<commit_before>import PropTypes from 'prop-types'
import React from 'react'
import FocusWithin from 'react-simple-focus-within'

import ErrorList from './ErrorList'
import {
  StyledStatedValueBox,
  StyledStatedValueDescription,
  StyledStatedValueError,
  StyledStatedValueLabel,
  StyledStatedValueWrapper
} from './StyledStatedValue'
import {design} from '../utilStyles'

const detectSignal = (dirty, hasError) => {
  if (hasError) {
    return design.condition.DANGER
  } else if (dirty) {
    return design.condition.WARNING
  }
}

/**
 * Wrap <EditableValue> and <FormattedVaule> in <StatedValue> to describe it
 * and signal conditions.
 */
const StatedValue = props => {
  const {
    children,
    description,
    dirty,
    isDisplay,
    error,
    hasValue,
    id,
    label,
    mandatory,
    mandatoryTitle,
    immutable,
    touched
  } = props

  const hasError = touched && props.error && Object.keys(props.error).length > 0
  const labelAlt = `${label}${mandatory && mandatoryTitle ? `, ${mandatoryTitle}` : ''}`
  const signal = detectSignal(dirty, hasError)

  return (
    <FocusWithin>
      {({focused, getRef}) => {
        const secondaryPosition = focused || hasValue || isDisplay
        return (
          <StyledStatedValueWrapper
            ref={getRef}
            secondaryPosition={secondaryPosition}>
            <StyledStatedValueBox
              immutable={immutable}
              isDisplay={isDisplay}
              signal={signal}>
              {children}
              <StyledStatedValueLabel
                {...(!isDisplay && !immutable) ? {htmlFor: id} : {}}
                alt={labelAlt}
                secondaryPosition={secondaryPosition}
                immutable={immutable}
                isDisplay={isDisplay}
                signal={signal}
              >{label}{mandatory && ' *'}</StyledStatedValueLabel>
            </StyledStatedValueBox>
            {description
              && <StyledStatedValueDescription>{description}</StyledStatedValueDescription>}
            {hasError
              && <StyledStatedValueError>
                <ErrorList error={error}/><commit_msg>refactor(tocco-ui): trigger focus only it mutable<commit_after>import PropTypes from 'prop-types'
import React from 'react'
import FocusWithin from 'react-simple-focus-within'

import ErrorList from './ErrorList'
import {
  StyledStatedValueBox,
  StyledStatedValueDescription,
  StyledStatedValueError,
  StyledStatedValueLabel,
  StyledStatedValueWrapper
} from './StyledStatedValue'
import {design} from '../utilStyles'

const detectSignal = (dirty, hasError) => {
  if (hasError) {
    return design.condition.DANGER
  } else if (dirty) {
    return design.condition.WARNING
  }
}

/**
 * Wrap <EditableValue> and <FormattedVaule> in <StatedValue> to describe it
 * and signal conditions.
 */
const StatedValue = props => {
  const {
    children,
    description,
    dirty,
    isDisplay,
    error,
    hasValue,
    id,
    label,
    mandatory,
    mandatoryTitle,
    immutable,
    touched
  } = props

  const hasError = touched && props.error && Object.keys(props.error).length > 0
  const labelAlt = `${label}${mandatory && mandatoryTitle ? `, ${mandatoryTitle}` : ''}`
  const signal = detectSignal(dirty, hasError)

  return (
    <FocusWithin>
      {({focused, getRef}) => {
        const secondaryPosition = (!immutable && focused) || hasValue || isDisplay
        return (
          <StyledStatedValueWrapper
            ref={getRef}
            secondaryPosition={secondaryPosition}>
            <StyledStatedValueBox
              immutable={immutable}
              isDisplay={isDisplay}
              signal={signal}>
              {children}
              <StyledStatedValueLabel
                {...(!isDisplay && !immutable) ? {htmlFor: id} : {}}
                alt={labelAlt}
                secondaryPosition={secondaryPosition}
                immutable={immutable}
                isDisplay={isDisplay}
                signal={signal}
              >{label}{mandatory && ' *'}</StyledStatedValueLabel>
            </StyledStatedValueBox>
            {description
              && <StyledStatedValueDescription>{description}</StyledStatedValueDescription>}
            {hasError
              && <StyledStatedValueError>
                <ErrorList error={error}/>
{'fraction_non_alphanumeric': 0.11000922509225092, 'fraction_numerical': 0.00046125461254612545, 'mean_word_length': 2.4723779023218575, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 37, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2360722', 'n_tokens_mistral': 1242, 'n_tokens_neox': 1208, 'n_words': 249}