@dnb/eufemia 10.37.0 → 10.39.0

package/es/extensions/forms/Field/Number/Number.js.map

@@ -1 +1 @@
-{"version":3,"file":"Number.js","names":["React","useContext","useMemo","useCallback","InputMasked","HelpButton","Button","SharedContext","FieldBlockContext","classnames","FieldBlock","useFieldProps","pickSpacingProps","clamp","useErrorMessage","useTranslation","NumberComponent","props","_props$width","_sharedContext$transl","_sharedContext$transl2","fieldBlockContext","sharedContext","translations","currency","currencyDisplay","percent","mask","step","decimalLimit","prefix","suffix","showStepControls","errorMessages","path","required","Field","errorRequired","minimum","NumberField","errorMinimum","maximum","errorMaximum","exclusiveMinimum","errorExclusiveMinimum","exclusiveMaximum","errorExclusiveMaximum","multipleOf","errorMultipleOf","schema","_props$schema","type","toInput","external","undefined","fromInput","value","numberValue","emptyValue","transformValue","currentValue","Number","MAX_SAFE_INTEGER","MIN_SAFE_INTEGER","maskProps","mask_options","as_currency","currency_mask","as_percent","as_number","number_mask","_objectSpread","preparedProps","valueType","width","composition","id","name","className","inputClassName","autoComplete","layout","placeholder","label","labelDescription","startWith","disabled","htmlAttributes","info","warning","error","hasError","help","size","align","handleFocus","handleBlur","handleChange","onKeyDownHandler","key","event","persist","preventDefault","fieldBlockProps","contentClassName","forId","contentWidth","increaseClickHandler","increaseProps","variant","icon","tabIndex","onClick","title","translation","Slider","addTitle","replace","String","decreaseClickHandler","decreaseProps","subtractTitle","ariaParams","role","inputProps","onKeyDown","onFocus","onBlur","onChange","status","stretch","Boolean","createElement","content","_extends","asFieldset","left","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Number/Number.tsx"],"sourcesContent":["import React, { useContext, useMemo, useCallback } from 'react'\nimport { InputMasked, HelpButton, Button } from '../../../../components'\nimport { InputMaskedProps } from '../../../../components/InputMasked'\nimport type { InputAlign, InputSize } from '../../../../components/Input'\nimport SharedContext from '../../../../shared/Context'\nimport FieldBlockContext from '../../FieldBlock/FieldBlockContext'\nimport classnames from 'classnames'\nimport FieldBlock from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport {\n  FieldProps,\n  FieldHelpProps,\n  AllJSONSchemaVersions,\n  CustomErrorMessages,\n  FieldBlockWidth,\n} from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { ButtonProps, ButtonSize } from '../../../../components/Button'\nimport { clamp } from '../../../../components/slider/SliderHelpers'\nimport useErrorMessage from '../../hooks/useErrorMessage'\nimport useTranslation from '../../hooks/useTranslation'\n\ninterface ErrorMessages extends CustomErrorMessages {\n  required?: string\n  schema?: string\n  minimum?: string\n  maximum?: string\n  exclusiveMinimum?: string\n  exclusiveMaximum?: string\n  multipleOf?: string\n}\n\nexport type Props = FieldHelpProps &\n  FieldProps<number, undefined, ErrorMessages> & {\n    inputClassName?: string\n    currency?: InputMaskedProps['as_currency']\n    currencyDisplay?: 'code' | 'symbol' | 'narrowSymbol' | 'name'\n    percent?: InputMaskedProps['as_percent']\n    mask?: InputMaskedProps['mask']\n    step?: number\n    startWith?: number\n    // Formatting\n    decimalLimit?: number\n    prefix?: string\n    suffix?: string\n    // Validation\n    minimum?: number // aka greater than or equal to\n    maximum?: number // aka less than or equal to\n    exclusiveMinimum?: number // aka greater than\n    exclusiveMaximum?: number // aka less than\n    multipleOf?: number\n    // Styling\n    size?: InputSize\n    width?: FieldBlockWidth\n    align?: InputAlign\n    showStepControls?: boolean\n  }\n\nfunction NumberComponent(props: Props) {\n  const fieldBlockContext = useContext(FieldBlockContext)\n  const sharedContext = useContext(SharedContext)\n  const translations = useTranslation()\n\n  const {\n    currency,\n    currencyDisplay,\n    percent,\n    mask,\n    step = 1,\n    decimalLimit = 12,\n    prefix,\n    suffix,\n    showStepControls,\n  } = props\n\n  const errorMessages = useErrorMessage(props.path, props.errorMessages, {\n    required: translations.Field.errorRequired,\n    minimum: translations.NumberField.errorMinimum,\n    maximum: translations.NumberField.errorMaximum,\n    exclusiveMinimum: translations.NumberField.errorExclusiveMinimum,\n    exclusiveMaximum: translations.NumberField.errorExclusiveMaximum,\n    multipleOf: translations.NumberField.errorMultipleOf,\n  })\n\n  const schema = useMemo<AllJSONSchemaVersions>(\n    () =>\n      props.schema ?? {\n        type: 'number',\n        minimum: props.minimum,\n        maximum: props.maximum,\n        exclusiveMinimum: props.exclusiveMinimum,\n        exclusiveMaximum: props.exclusiveMaximum,\n        multipleOf: props.multipleOf,\n      },\n    [\n      props.schema,\n      props.minimum,\n      props.maximum,\n      props.exclusiveMinimum,\n      props.exclusiveMaximum,\n      props.multipleOf,\n    ]\n  )\n\n  const toInput = useCallback((external: number | undefined) => {\n    if (external === undefined) {\n      return null\n    }\n    return external\n  }, [])\n  const fromInput = useCallback(\n    ({ value, numberValue }: { value: string; numberValue: number }) => {\n      if (value === '') {\n        return props.emptyValue\n      }\n      return numberValue\n    },\n    [props.emptyValue]\n  )\n  const transformValue = useCallback(\n    (value: number, currentValue: number) => {\n      if (\n        value > Number.MAX_SAFE_INTEGER ||\n        value < Number.MIN_SAFE_INTEGER\n      ) {\n        return currentValue\n      }\n\n      return value\n    },\n    []\n  )\n\n  const maskProps: Partial<InputMaskedProps> = useMemo(() => {\n    const mask_options = { prefix, suffix, decimalLimit }\n\n    if (currency) {\n      return {\n        as_currency: currency,\n        mask_options,\n        currency_mask: {\n          currencyDisplay,\n        },\n      }\n    }\n\n    if (percent) {\n      return {\n        as_percent: percent,\n        mask_options,\n      }\n    }\n\n    // Custom mask based on props\n    return {\n      as_number: true,\n      mask,\n      number_mask: {\n        ...mask_options,\n      },\n    }\n  }, [\n    currency,\n    currencyDisplay,\n    decimalLimit,\n    mask,\n    percent,\n    prefix,\n    suffix,\n  ])\n\n  const preparedProps: Props = {\n    valueType: 'number',\n    ...props,\n    errorMessages,\n    schema,\n    toInput,\n    fromInput,\n    transformValue,\n    width:\n      props.width ??\n      (fieldBlockContext?.composition ? 'stretch' : 'medium'),\n  }\n\n  const {\n    id,\n    name,\n    className,\n    inputClassName,\n    autoComplete,\n    layout,\n    placeholder,\n    label,\n    labelDescription,\n    value,\n    startWith = null,\n    minimum = Number.MIN_SAFE_INTEGER,\n    maximum = Number.MAX_SAFE_INTEGER,\n    disabled,\n    htmlAttributes,\n    info,\n    warning,\n    error,\n    hasError,\n    help,\n    size,\n    width,\n    align,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useFieldProps(preparedProps)\n\n  const onKeyDownHandler = useCallback(\n    ({ key, event }) => {\n      if (!showStepControls) {\n        return\n      }\n\n      let numberValue = null\n\n      switch (key) {\n        case 'ArrowUp':\n          numberValue = clamp(\n            (value ?? startWith) + step,\n            minimum,\n            maximum\n          )\n          break\n        case 'ArrowDown':\n          numberValue = clamp(\n            (value ?? startWith) - step,\n            minimum,\n            maximum\n          )\n          break\n      }\n\n      if (numberValue !== null) {\n        event.persist()\n        event.preventDefault()\n        handleChange({ numberValue })\n      }\n    },\n    [\n      handleChange,\n      maximum,\n      minimum,\n      showStepControls,\n      startWith,\n      step,\n      value,\n    ]\n  )\n\n  const fieldBlockProps = {\n    className: classnames(\n      'dnb-forms-field-number',\n      'dnb-input__border--tokens', // Used by \"dnb-input__border\"\n      className\n    ),\n    contentClassName: classnames(\n      'dnb-forms-field-number__contents',\n      showStepControls && 'dnb-forms-field-number__contents--has-controls',\n      hasError && 'dnb-input__status--error', // Also used by \"dnb-input__border\"\n      disabled && 'dnb-input--disabled' // Also used by \"dnb-input__border\"\n    ),\n    forId: id,\n    layout,\n    label,\n    labelDescription,\n    info,\n    warning,\n    error,\n    disabled,\n    width:\n      (width === 'stretch' || fieldBlockContext?.composition) &&\n      !showStepControls\n        ? width\n        : undefined,\n    contentWidth: width !== false ? width : undefined,\n    ...pickSpacingProps(props),\n  }\n\n  const increaseClickHandler = useCallback(() => {\n    handleChange({\n      numberValue: clamp((value ?? startWith) + step, minimum, maximum),\n    })\n  }, [handleChange, maximum, minimum, startWith, step, value])\n\n  const increaseProps: ButtonProps = showStepControls && {\n    'aria-hidden': true,\n    className: 'dnb-button--control-after',\n    variant: 'secondary',\n    icon: 'add',\n    size: (size || 'small') as ButtonSize,\n    tabIndex: -1,\n    disabled: disabled || value >= maximum,\n    onClick: increaseClickHandler,\n    title: sharedContext?.translation.Slider.addTitle?.replace(\n      '%s',\n      String(value + step)\n    ),\n  }\n\n  const decreaseClickHandler = useCallback(() => {\n    handleChange({\n      numberValue: clamp((value ?? startWith) - step, minimum, maximum),\n    })\n  }, [handleChange, maximum, minimum, startWith, step, value])\n\n  const decreaseProps: ButtonProps = showStepControls && {\n    ...increaseProps,\n    className: 'dnb-button--control-before',\n    icon: 'subtract',\n    size: (size || 'small') as ButtonSize,\n    disabled: disabled || value <= minimum,\n    onClick: decreaseClickHandler,\n    title: sharedContext?.translation.Slider.subtractTitle?.replace(\n      '%s',\n      String(value - step)\n    ),\n  }\n\n  const ariaParams = showStepControls && {\n    role: 'spinbutton',\n    'aria-valuemin': String(minimum),\n    'aria-valuemax': String(maximum),\n    'aria-valuenow': String(value), // without it, VO will read an invalid value\n    'aria-valuetext': String(value), // without it, VO will read %\n  }\n\n  const inputProps = {\n    id,\n    name,\n    autoComplete,\n    className: classnames(\n      'dnb-forms-field-number__input',\n      `dnb-input--${size}`,\n      inputClassName\n    ),\n    step: showStepControls ? step : undefined,\n    placeholder,\n    value,\n    align: showStepControls ? 'center' : align,\n    ...maskProps,\n    onKeyDown: onKeyDownHandler,\n    onFocus: handleFocus,\n    onBlur: handleBlur,\n    onChange: handleChange,\n    disabled,\n    ...htmlAttributes,\n    status: hasError ? 'error' : undefined,\n    stretch: Boolean(\n      width !== undefined || fieldBlockContext?.composition\n    ),\n    suffix:\n      help && !showStepControls ? (\n        <HelpButton title={help.title}>{help.content}</HelpButton>\n      ) : undefined,\n    ...ariaParams,\n  }\n\n  if (showStepControls) {\n    return (\n      <FieldBlock {...fieldBlockProps} asFieldset={false}>\n        <span className=\"dnb-input__border dnb-input__border--root\">\n          {<Button {...decreaseProps} />}\n          <InputMasked {...inputProps} />\n          {<Button {...increaseProps} />}\n        </span>\n        {help && (\n          <HelpButton left=\"x-small\" title={help.title}>\n            {help.content}\n          </HelpButton>\n        )}\n      </FieldBlock>\n    )\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps} asFieldset={false}>\n      <InputMasked {...inputProps} />\n    </FieldBlock>\n  )\n}\n\nNumberComponent._supportsSpacingProps = true\nexport default NumberComponent\n"],"mappings":"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"}
+{"version":3,"file":"Number.js","names":["React","useContext","useMemo","useCallback","InputMasked","HelpButton","Button","SharedContext","FieldBlockContext","classnames","FieldBlock","useFieldProps","pickSpacingProps","clamp","useErrorMessage","useTranslation","NumberComponent","props","_props$width","_sharedContext$transl","_sharedContext$transl2","fieldBlockContext","sharedContext","translations","currency","currencyDisplay","percent","mask","step","decimalLimit","allowNegative","disallowLeadingZeroes","prefix","suffix","showStepControls","errorMessages","path","required","Field","errorRequired","minimum","NumberField","errorMinimum","maximum","errorMaximum","exclusiveMinimum","errorExclusiveMinimum","exclusiveMaximum","errorExclusiveMaximum","multipleOf","errorMultipleOf","schema","_props$schema","type","toInput","external","undefined","fromInput","value","numberValue","emptyValue","transformValue","currentValue","Number","MAX_SAFE_INTEGER","MIN_SAFE_INTEGER","maskProps","mask_options","as_currency","currency_mask","as_percent","as_number","number_mask","_objectSpread","preparedProps","valueType","width","composition","id","name","className","inputClassName","autoComplete","layout","placeholder","label","labelDescription","startWith","disabled","htmlAttributes","info","warning","error","hasError","help","size","align","handleFocus","handleBlur","handleChange","onKeyDownHandler","key","event","persist","preventDefault","fieldBlockProps","contentClassName","forId","contentWidth","increaseClickHandler","increaseProps","variant","icon","tabIndex","onClick","title","translation","Slider","addTitle","replace","String","decreaseClickHandler","decreaseProps","subtractTitle","ariaParams","role","inputProps","onKeyDown","onFocus","onBlur","onChange","status","stretch","Boolean","createElement","content","_extends","asFieldset","left","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Number/Number.tsx"],"sourcesContent":["import React, { useContext, useMemo, useCallback } from 'react'\nimport { InputMasked, HelpButton, Button } from '../../../../components'\nimport { InputMaskedProps } from '../../../../components/InputMasked'\nimport type { InputAlign, InputSize } from '../../../../components/Input'\nimport SharedContext from '../../../../shared/Context'\nimport FieldBlockContext from '../../FieldBlock/FieldBlockContext'\nimport classnames from 'classnames'\nimport FieldBlock from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport {\n  FieldProps,\n  FieldHelpProps,\n  AllJSONSchemaVersions,\n  CustomErrorMessages,\n  FieldBlockWidth,\n} from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { ButtonProps, ButtonSize } from '../../../../components/Button'\nimport { clamp } from '../../../../components/slider/SliderHelpers'\nimport useErrorMessage from '../../hooks/useErrorMessage'\nimport useTranslation from '../../hooks/useTranslation'\n\ninterface ErrorMessages extends CustomErrorMessages {\n  required?: string\n  schema?: string\n  minimum?: string\n  maximum?: string\n  exclusiveMinimum?: string\n  exclusiveMaximum?: string\n  multipleOf?: string\n}\n\nexport type Props = FieldHelpProps &\n  FieldProps<number, undefined | number, ErrorMessages> & {\n    inputClassName?: string\n    currency?: InputMaskedProps['as_currency']\n    currencyDisplay?: 'code' | 'symbol' | 'narrowSymbol' | 'name'\n    percent?: InputMaskedProps['as_percent']\n    mask?: InputMaskedProps['mask']\n    step?: number\n    startWith?: number\n    // Formatting\n    decimalLimit?: number\n    allowNegative?: boolean\n    disallowLeadingZeroes?: boolean\n    prefix?: string\n    suffix?: string\n    // Validation\n    minimum?: number // aka greater than or equal to\n    maximum?: number // aka less than or equal to\n    exclusiveMinimum?: number // aka greater than\n    exclusiveMaximum?: number // aka less than\n    multipleOf?: number\n    // Styling\n    size?: InputSize\n    width?: FieldBlockWidth\n    align?: InputAlign\n    showStepControls?: boolean\n  }\n\nfunction NumberComponent(props: Props) {\n  const fieldBlockContext = useContext(FieldBlockContext)\n  const sharedContext = useContext(SharedContext)\n  const translations = useTranslation()\n\n  const {\n    currency,\n    currencyDisplay,\n    percent,\n    mask,\n    step = 1,\n    decimalLimit = 12,\n    allowNegative = true,\n    disallowLeadingZeroes = false,\n    prefix,\n    suffix,\n    showStepControls,\n  } = props\n\n  const errorMessages = useErrorMessage(props.path, props.errorMessages, {\n    required: translations.Field.errorRequired,\n    minimum: translations.NumberField.errorMinimum,\n    maximum: translations.NumberField.errorMaximum,\n    exclusiveMinimum: translations.NumberField.errorExclusiveMinimum,\n    exclusiveMaximum: translations.NumberField.errorExclusiveMaximum,\n    multipleOf: translations.NumberField.errorMultipleOf,\n  })\n\n  const schema = useMemo<AllJSONSchemaVersions>(\n    () =>\n      props.schema ?? {\n        type: 'number',\n        minimum: props.minimum,\n        maximum: props.maximum,\n        exclusiveMinimum: props.exclusiveMinimum,\n        exclusiveMaximum: props.exclusiveMaximum,\n        multipleOf: props.multipleOf,\n      },\n    [\n      props.schema,\n      props.minimum,\n      props.maximum,\n      props.exclusiveMinimum,\n      props.exclusiveMaximum,\n      props.multipleOf,\n    ]\n  )\n\n  const toInput = useCallback((external: number | undefined) => {\n    if (external === undefined) {\n      return null\n    }\n    return external\n  }, [])\n  const fromInput = useCallback(\n    ({ value, numberValue }: { value: string; numberValue: number }) => {\n      if (value === '') {\n        return props.emptyValue\n      }\n      return numberValue\n    },\n    [props.emptyValue]\n  )\n  const transformValue = useCallback(\n    (value: number, currentValue: number) => {\n      if (\n        value > Number.MAX_SAFE_INTEGER ||\n        value < Number.MIN_SAFE_INTEGER\n      ) {\n        return currentValue\n      }\n\n      return value\n    },\n    []\n  )\n\n  const maskProps: Partial<InputMaskedProps> = useMemo(() => {\n    const mask_options = {\n      prefix,\n      suffix,\n      decimalLimit,\n      allowNegative,\n      disallowLeadingZeroes,\n    }\n\n    if (currency) {\n      return {\n        as_currency: currency,\n        mask_options,\n        currency_mask: {\n          currencyDisplay,\n        },\n      }\n    }\n\n    if (percent) {\n      return {\n        as_percent: percent,\n        mask_options,\n      }\n    }\n\n    // Custom mask based on props\n    return {\n      as_number: true,\n      mask,\n      number_mask: {\n        ...mask_options,\n      },\n    }\n  }, [\n    currency,\n    currencyDisplay,\n    decimalLimit,\n    mask,\n    percent,\n    prefix,\n    suffix,\n    allowNegative,\n    disallowLeadingZeroes,\n  ])\n\n  const preparedProps: Props = {\n    valueType: 'number',\n    ...props,\n    errorMessages,\n    schema,\n    toInput,\n    fromInput,\n    transformValue,\n    width:\n      props.width ??\n      (fieldBlockContext?.composition ? 'stretch' : 'medium'),\n  }\n\n  const {\n    id,\n    name,\n    className,\n    inputClassName,\n    autoComplete,\n    layout,\n    placeholder,\n    label,\n    labelDescription,\n    value,\n    startWith = null,\n    minimum = Number.MIN_SAFE_INTEGER,\n    maximum = Number.MAX_SAFE_INTEGER,\n    disabled,\n    htmlAttributes,\n    info,\n    warning,\n    error,\n    hasError,\n    help,\n    size,\n    width,\n    align,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useFieldProps(preparedProps)\n\n  const onKeyDownHandler = useCallback(\n    ({ key, event }) => {\n      if (!showStepControls) {\n        return\n      }\n\n      let numberValue = null\n\n      switch (key) {\n        case 'ArrowUp':\n          numberValue = clamp(\n            (value ?? startWith) + step,\n            minimum,\n            maximum\n          )\n          break\n        case 'ArrowDown':\n          numberValue = clamp(\n            (value ?? startWith) - step,\n            minimum,\n            maximum\n          )\n          break\n      }\n\n      if (numberValue !== null) {\n        event.persist()\n        event.preventDefault()\n        handleChange({ numberValue })\n      }\n    },\n    [\n      handleChange,\n      maximum,\n      minimum,\n      showStepControls,\n      startWith,\n      step,\n      value,\n    ]\n  )\n\n  const fieldBlockProps = {\n    className: classnames(\n      'dnb-forms-field-number',\n      'dnb-input__border--tokens', // Used by \"dnb-input__border\"\n      className\n    ),\n    contentClassName: classnames(\n      'dnb-forms-field-number__contents',\n      showStepControls && 'dnb-forms-field-number__contents--has-controls',\n      hasError && 'dnb-input__status--error', // Also used by \"dnb-input__border\"\n      disabled && 'dnb-input--disabled' // Also used by \"dnb-input__border\"\n    ),\n    forId: id,\n    layout,\n    label,\n    labelDescription,\n    info,\n    warning,\n    error,\n    disabled,\n    width:\n      (width === 'stretch' || fieldBlockContext?.composition) &&\n      !showStepControls\n        ? width\n        : undefined,\n    contentWidth: width !== false ? width : undefined,\n    ...pickSpacingProps(props),\n  }\n\n  const increaseClickHandler = useCallback(() => {\n    handleChange({\n      numberValue: clamp((value ?? startWith) + step, minimum, maximum),\n    })\n  }, [handleChange, maximum, minimum, startWith, step, value])\n\n  const increaseProps: ButtonProps = showStepControls && {\n    'aria-hidden': true,\n    className: 'dnb-button--control-after',\n    variant: 'secondary',\n    icon: 'add',\n    size: (size || 'small') as ButtonSize,\n    tabIndex: -1,\n    disabled: disabled || value >= maximum,\n    onClick: increaseClickHandler,\n    title: sharedContext?.translation.Slider.addTitle?.replace(\n      '%s',\n      String(value + step)\n    ),\n  }\n\n  const decreaseClickHandler = useCallback(() => {\n    handleChange({\n      numberValue: clamp((value ?? startWith) - step, minimum, maximum),\n    })\n  }, [handleChange, maximum, minimum, startWith, step, value])\n\n  const decreaseProps: ButtonProps = showStepControls && {\n    ...increaseProps,\n    className: 'dnb-button--control-before',\n    icon: 'subtract',\n    size: (size || 'small') as ButtonSize,\n    disabled: disabled || value <= minimum,\n    onClick: decreaseClickHandler,\n    title: sharedContext?.translation.Slider.subtractTitle?.replace(\n      '%s',\n      String(value - step)\n    ),\n  }\n\n  const ariaParams = showStepControls && {\n    role: 'spinbutton',\n    'aria-valuemin': String(minimum),\n    'aria-valuemax': String(maximum),\n    'aria-valuenow': String(value), // without it, VO will read an invalid value\n    'aria-valuetext': String(value), // without it, VO will read %\n  }\n\n  const inputProps = {\n    id,\n    name,\n    autoComplete,\n    className: classnames(\n      'dnb-forms-field-number__input',\n      `dnb-input--${size}`,\n      inputClassName\n    ),\n    step: showStepControls ? step : undefined,\n    placeholder,\n    value,\n    align: showStepControls ? 'center' : align,\n    ...maskProps,\n    onKeyDown: onKeyDownHandler,\n    onFocus: handleFocus,\n    onBlur: handleBlur,\n    onChange: handleChange,\n    disabled,\n    ...htmlAttributes,\n    status: hasError ? 'error' : undefined,\n    stretch: Boolean(\n      width !== undefined || fieldBlockContext?.composition\n    ),\n    suffix:\n      help && !showStepControls ? (\n        <HelpButton title={help.title}>{help.content}</HelpButton>\n      ) : undefined,\n    ...ariaParams,\n  }\n\n  if (showStepControls) {\n    return (\n      <FieldBlock {...fieldBlockProps} asFieldset={false}>\n        <span className=\"dnb-input__border dnb-input__border--root\">\n          {<Button {...decreaseProps} />}\n          <InputMasked {...inputProps} />\n          {<Button {...increaseProps} />}\n        </span>\n        {help && (\n          <HelpButton left=\"x-small\" title={help.title}>\n            {help.content}\n          </HelpButton>\n        )}\n      </FieldBlock>\n    )\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps} asFieldset={false}>\n      <InputMasked {...inputProps} />\n    </FieldBlock>\n  )\n}\n\nNumberComponent._supportsSpacingProps = true\nexport default NumberComponent\n"],"mappings":"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"}

package/es/extensions/forms/Field/Number/NumberDocs.js

@@ -15,6 +15,16 @@ export const numberProperties = {
     type: ['boolean', 'string'],
     status: 'optional'
   },
+  allowNegative: {
+    doc: 'Whether or not to allow negative numbers. Defaults to `true`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  disallowLeadingZeroes: {
+    doc: 'Whether or not to allow leading zeroes. Defaults to `false`.',
+    type: 'boolean',
+    status: 'optional'
+  },
   minimum: {
     doc: 'Validation for inclusive minimum number value (greater than or equal). Defaults to `Number.MIN_SAFE_INTEGER`.',
     type: 'number',

package/es/extensions/forms/Field/Number/NumberDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberDocs.js","names":["inputProperties","numberProperties","decimalLimit","doc","type","status","percent","currency","minimum","maximum","exclusiveMinimum","exclusiveMaximum","multipleOf","width","size","align","help","autoComplete","prefix","suffix","step","startWith","showStepControls"],"sources":["../../../../../../src/extensions/forms/Field/Number/NumberDocs.ts"],"sourcesContent":["import { inputProperties } from '../../../../components/input/InputDocs'\nimport { PropertiesTableProps } from '../../../../shared/types'\n\nexport const numberProperties: PropertiesTableProps = {\n  decimalLimit: {\n    doc: 'Max number of decimals. Values with more decimals will be rounded. Defaults to `12`.',\n    type: 'number',\n    status: 'optional',\n  },\n  percent: {\n    doc: 'Format a number as percentage.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  currency: {\n    doc: 'Currency code (ISO 4217) or `true` to use the default `NOK`. Uses two decimals by default.',\n    type: ['boolean', 'string'],\n    status: 'optional',\n  },\n  minimum: {\n    doc: 'Validation for inclusive minimum number value (greater than or equal). Defaults to `Number.MIN_SAFE_INTEGER`.',\n    type: 'number',\n    status: 'optional',\n  },\n  maximum: {\n    doc: 'Validation for inclusive maximum number value (less than or equal). Defaults to `Number.MAX_SAFE_INTEGER`.',\n    type: 'number',\n    status: 'optional',\n  },\n  exclusiveMinimum: {\n    doc: 'Validation for exclusive minimum number value (greater than).',\n    type: 'number',\n    status: 'optional',\n  },\n  exclusiveMaximum: {\n    doc: 'Validation for exclusive maximum number value (less than).',\n    type: 'number',\n    status: 'optional',\n  },\n  multipleOf: {\n    doc: 'Validation that requires the number to be a multiple of given value.',\n    type: 'number',\n    status: 'optional',\n  },\n  width: {\n    doc: '`false` for no width (use browser default), `small`, `medium` or `large` for predefined standard widths, `stretch` for fill available width.',\n    type: ['string', 'false'],\n    status: 'optional',\n  },\n  size: inputProperties.size,\n  align: {\n    doc: 'Lateral alignment of contents of input field, one of `left` (default), `center`, or `right`.',\n    type: 'string',\n    status: 'optional',\n  },\n  help: {\n    doc: 'Provide a help button. Object consisting of `title` and `content`.',\n    type: 'object',\n    status: 'optional',\n  },\n  autoComplete: {\n    doc: 'For HTML `autocomplete` attributes.',\n    type: ['on', 'string'],\n    status: 'optional',\n  },\n  prefix: {\n    doc: 'Text added before the value input.',\n    type: 'string',\n    status: 'optional',\n  },\n  suffix: {\n    doc: 'Text added after the value input.',\n    type: 'string',\n    status: 'optional',\n  },\n  step: {\n    doc: 'Determines step granularity when in/decreasing value input through step controls buttons or arrow keys. Defaults to 1.',\n    type: 'number',\n    status: 'optional',\n  },\n  startWith: {\n    doc: 'When no `value` or `defaultValue` is given, start with a given value when in/decreasing value input through step controls buttons or arrow keys. Defaults to `null`.',\n    type: 'number',\n    status: 'optional',\n  },\n  showStepControls: {\n    doc: 'Show buttons that in/decreases value input by the step value.',\n    type: 'boolean',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAAA,SAASA,eAAe,QAAQ,wCAAwC;AAGxE,OAAO,MAAMC,gBAAsC,GAAG;EACpDC,YAAY,EAAE;IACZC,GAAG,EAAE,sFAAsF;IAC3FC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,OAAO,EAAE;IACPH,GAAG,EAAE,gCAAgC;IACrCC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDE,QAAQ,EAAE;IACRJ,GAAG,EAAE,4FAA4F;IACjGC,IAAI,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC;IAC3BC,MAAM,EAAE;EACV,CAAC;EACDG,OAAO,EAAE;IACPL,GAAG,EAAE,+GAA+G;IACpHC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,OAAO,EAAE;IACPN,GAAG,EAAE,4GAA4G;IACjHC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,gBAAgB,EAAE;IAChBP,GAAG,EAAE,+DAA+D;IACpEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDM,gBAAgB,EAAE;IAChBR,GAAG,EAAE,4DAA4D;IACjEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDO,UAAU,EAAE;IACVT,GAAG,EAAE,sEAAsE;IAC3EC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDQ,KAAK,EAAE;IACLV,GAAG,EAAE,8IAA8I;IACnJC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,MAAM,EAAE;EACV,CAAC;EACDS,IAAI,EAAEd,eAAe,CAACc,IAAI;EAC1BC,KAAK,EAAE;IACLZ,GAAG,EAAE,8FAA8F;IACnGC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDW,IAAI,EAAE;IACJb,GAAG,EAAE,oEAAoE;IACzEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDY,YAAY,EAAE;IACZd,GAAG,EAAE,qCAAqC;IAC1CC,IAAI,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC;IACtBC,MAAM,EAAE;EACV,CAAC;EACDa,MAAM,EAAE;IACNf,GAAG,EAAE,oCAAoC;IACzCC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDc,MAAM,EAAE;IACNhB,GAAG,EAAE,mCAAmC;IACxCC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDe,IAAI,EAAE;IACJjB,GAAG,EAAE,wHAAwH;IAC7HC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDgB,SAAS,EAAE;IACTlB,GAAG,EAAE,sKAAsK;IAC3KC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDiB,gBAAgB,EAAE;IAChBnB,GAAG,EAAE,+DAA+D;IACpEC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV;AACF,CAAC"}
+{"version":3,"file":"NumberDocs.js","names":["inputProperties","numberProperties","decimalLimit","doc","type","status","percent","currency","allowNegative","disallowLeadingZeroes","minimum","maximum","exclusiveMinimum","exclusiveMaximum","multipleOf","width","size","align","help","autoComplete","prefix","suffix","step","startWith","showStepControls"],"sources":["../../../../../../src/extensions/forms/Field/Number/NumberDocs.ts"],"sourcesContent":["import { inputProperties } from '../../../../components/input/InputDocs'\nimport { PropertiesTableProps } from '../../../../shared/types'\n\nexport const numberProperties: PropertiesTableProps = {\n  decimalLimit: {\n    doc: 'Max number of decimals. Values with more decimals will be rounded. Defaults to `12`.',\n    type: 'number',\n    status: 'optional',\n  },\n  percent: {\n    doc: 'Format a number as percentage.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  currency: {\n    doc: 'Currency code (ISO 4217) or `true` to use the default `NOK`. Uses two decimals by default.',\n    type: ['boolean', 'string'],\n    status: 'optional',\n  },\n  allowNegative: {\n    doc: 'Whether or not to allow negative numbers. Defaults to `true`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  disallowLeadingZeroes: {\n    doc: 'Whether or not to allow leading zeroes. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  minimum: {\n    doc: 'Validation for inclusive minimum number value (greater than or equal). Defaults to `Number.MIN_SAFE_INTEGER`.',\n    type: 'number',\n    status: 'optional',\n  },\n  maximum: {\n    doc: 'Validation for inclusive maximum number value (less than or equal). Defaults to `Number.MAX_SAFE_INTEGER`.',\n    type: 'number',\n    status: 'optional',\n  },\n  exclusiveMinimum: {\n    doc: 'Validation for exclusive minimum number value (greater than).',\n    type: 'number',\n    status: 'optional',\n  },\n  exclusiveMaximum: {\n    doc: 'Validation for exclusive maximum number value (less than).',\n    type: 'number',\n    status: 'optional',\n  },\n  multipleOf: {\n    doc: 'Validation that requires the number to be a multiple of given value.',\n    type: 'number',\n    status: 'optional',\n  },\n  width: {\n    doc: '`false` for no width (use browser default), `small`, `medium` or `large` for predefined standard widths, `stretch` for fill available width.',\n    type: ['string', 'false'],\n    status: 'optional',\n  },\n  size: inputProperties.size,\n  align: {\n    doc: 'Lateral alignment of contents of input field, one of `left` (default), `center`, or `right`.',\n    type: 'string',\n    status: 'optional',\n  },\n  help: {\n    doc: 'Provide a help button. Object consisting of `title` and `content`.',\n    type: 'object',\n    status: 'optional',\n  },\n  autoComplete: {\n    doc: 'For HTML `autocomplete` attributes.',\n    type: ['on', 'string'],\n    status: 'optional',\n  },\n  prefix: {\n    doc: 'Text added before the value input.',\n    type: 'string',\n    status: 'optional',\n  },\n  suffix: {\n    doc: 'Text added after the value input.',\n    type: 'string',\n    status: 'optional',\n  },\n  step: {\n    doc: 'Determines step granularity when in/decreasing value input through step controls buttons or arrow keys. Defaults to 1.',\n    type: 'number',\n    status: 'optional',\n  },\n  startWith: {\n    doc: 'When no `value` or `defaultValue` is given, start with a given value when in/decreasing value input through step controls buttons or arrow keys. Defaults to `null`.',\n    type: 'number',\n    status: 'optional',\n  },\n  showStepControls: {\n    doc: 'Show buttons that in/decreases value input by the step value.',\n    type: 'boolean',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAAA,SAASA,eAAe,QAAQ,wCAAwC;AAGxE,OAAO,MAAMC,gBAAsC,GAAG;EACpDC,YAAY,EAAE;IACZC,GAAG,EAAE,sFAAsF;IAC3FC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,OAAO,EAAE;IACPH,GAAG,EAAE,gCAAgC;IACrCC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDE,QAAQ,EAAE;IACRJ,GAAG,EAAE,4FAA4F;IACjGC,IAAI,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC;IAC3BC,MAAM,EAAE;EACV,CAAC;EACDG,aAAa,EAAE;IACbL,GAAG,EAAE,+DAA+D;IACpEC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDI,qBAAqB,EAAE;IACrBN,GAAG,EAAE,8DAA8D;IACnEC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDK,OAAO,EAAE;IACPP,GAAG,EAAE,+GAA+G;IACpHC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDM,OAAO,EAAE;IACPR,GAAG,EAAE,4GAA4G;IACjHC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDO,gBAAgB,EAAE;IAChBT,GAAG,EAAE,+DAA+D;IACpEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDQ,gBAAgB,EAAE;IAChBV,GAAG,EAAE,4DAA4D;IACjEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDS,UAAU,EAAE;IACVX,GAAG,EAAE,sEAAsE;IAC3EC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDU,KAAK,EAAE;IACLZ,GAAG,EAAE,8IAA8I;IACnJC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,MAAM,EAAE;EACV,CAAC;EACDW,IAAI,EAAEhB,eAAe,CAACgB,IAAI;EAC1BC,KAAK,EAAE;IACLd,GAAG,EAAE,8FAA8F;IACnGC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDa,IAAI,EAAE;IACJf,GAAG,EAAE,oEAAoE;IACzEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDc,YAAY,EAAE;IACZhB,GAAG,EAAE,qCAAqC;IAC1CC,IAAI,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC;IACtBC,MAAM,EAAE;EACV,CAAC;EACDe,MAAM,EAAE;IACNjB,GAAG,EAAE,oCAAoC;IACzCC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDgB,MAAM,EAAE;IACNlB,GAAG,EAAE,mCAAmC;IACxCC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDiB,IAAI,EAAE;IACJnB,GAAG,EAAE,wHAAwH;IAC7HC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDkB,SAAS,EAAE;IACTpB,GAAG,EAAE,sKAAsK;IAC3KC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDmB,gBAAgB,EAAE;IAChBrB,GAAG,EAAE,+DAA+D;IACpEC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV;AACF,CAAC"}

package/es/extensions/forms/Field/Selection/Selection.d.ts

@@ -1,14 +1,15 @@
 import React from 'react';
-import { FieldProps, FieldHelpProps, FieldBlockWidth } from '../../types';
+import { ReturnAdditional } from '../../hooks/useFieldProps';
+import { FormError, FieldProps, FieldHelpProps, FieldBlockWidth } from '../../types';
 import type { FormStatusText } from '../../../../components/FormStatus';
 import type { AutocompleteAllProps, AutocompleteProps } from '../../../../components/Autocomplete';
 import type { DropdownAllProps, DropdownProps } from '../../../../components/Dropdown';
 import { ToCamelCase } from '../../../../shared/helpers/withCamelCaseProps';
-interface IOption {
+type IOption = {
     title: string | React.ReactNode;
     value: number | string;
     status: FormStatusText;
-}
+};
 export type Data = AutocompleteAllProps['data'] | DropdownAllProps['data'];
 export type Props = FieldHelpProps & FieldProps<IOption['value']> & {
     variant?: 'dropdown' | 'autocomplete' | 'radio' | 'button';
@@ -23,4 +24,15 @@ declare function Selection(props: Props): import("react/jsx-runtime").JSX.Elemen
 declare namespace Selection {
     var _supportsSpacingProps: boolean;
 }
+export declare function getStatus(error: Error | FormError | undefined, info: React.ReactNode, warning: React.ReactNode): string;
+export declare function getRadioOrToggleOptions({ id, value, variant, info, warning, htmlAttributes, children, hasError, }: {
+    id: string;
+    value: Props['value'];
+    variant: Props['variant'];
+    info: Props['info'];
+    warning: Props['warning'];
+    htmlAttributes: Props['htmlAttributes'];
+    children: Props['children'];
+    hasError: ReturnAdditional<Props['value']>['hasError'];
+}): any;
 export default Selection;

package/es/extensions/forms/Field/Selection/Selection.js

@@ -1,8 +1,7 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-const _excluded = ["error", "title", "help", "children"],
-  _excluded2 = ["value", "title", "status"];
+const _excluded = ["error", "title", "help", "children"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useMemo, useCallback } from 'react';
@@ -76,34 +75,10 @@ function Selection(props) {
     label,
     labelDescription
   });
-  const getStatus = useCallback(error => {
-    var _error$message;
-    return (_error$message = error === null || error === void 0 ? void 0 : error.message) !== null && _error$message !== void 0 ? _error$message : warning instanceof Error && warning.message || warning instanceof FormError && warning.message || (warning === null || warning === void 0 ? void 0 : warning.toString()) || info instanceof Error && info.message || info instanceof FormError && info.message || (info === null || info === void 0 ? void 0 : info.toString());
-  }, [info, warning]);
-  const status = getStatus(error);
   switch (variant) {
     case 'radio':
     case 'button':
       {
-        const options = React.Children.toArray(children).filter(child => React.isValidElement(child) && child.type === OptionField).map(option => {
-          const _option$props = option.props,
-            {
-              error,
-              title,
-              help,
-              children
-            } = _option$props,
-            rest = _objectWithoutProperties(_option$props, _excluded);
-          const status = getStatus(error);
-          return _objectSpread({
-            title: title !== null && title !== void 0 ? title : children,
-            status,
-            suffix: help ? React.createElement(HelpButton, {
-              size: "small",
-              title: help.title
-            }, help.content) : undefined
-          }, rest);
-        });
         const Component = variant === 'radio' ? Radio : ToggleButton;
         return React.createElement(FieldBlock, fieldSectionProps, React.createElement(Component.Group, {
           className: cn,
@@ -111,26 +86,21 @@ function Selection(props) {
           disabled: disabled,
           on_change: onChangeHandler,
           value: String(value !== null && value !== void 0 ? value : '')
-        }, options.map((option, i) => {
-          const {
-              value,
-              title,
-              status
-            } = option,
-            rest = _objectWithoutProperties(option, _excluded2);
-          return React.createElement(Component, _extends({
-            id: options.length === 1 ? id : undefined,
-            key: `option-${i}-${value}`,
-            label: variant === 'radio' ? title : undefined,
-            text: variant === 'button' ? title : undefined,
-            value: String(value !== null && value !== void 0 ? value : ''),
-            status: (hasError || status) && 'error'
-          }, htmlAttributes, rest));
+        }, getRadioOrToggleOptions({
+          id,
+          value,
+          variant,
+          info,
+          warning,
+          htmlAttributes,
+          children,
+          hasError
         })));
       }
     case 'autocomplete':
     case 'dropdown':
       {
+        const status = getStatus(error, info, warning);
         const sharedProps = _objectSpread(_objectSpread({
           id,
           list_class: 'dnb-forms-field-selection__list',
@@ -155,6 +125,62 @@ function Selection(props) {
       }
   }
 }
+export function getStatus(error, info, warning) {
+  var _error$message;
+  return (_error$message = error === null || error === void 0 ? void 0 : error.message) !== null && _error$message !== void 0 ? _error$message : warning instanceof Error && warning.message || warning instanceof FormError && warning.message || (warning === null || warning === void 0 ? void 0 : warning.toString()) || info instanceof Error && info.message || info instanceof FormError && info.message || (info === null || info === void 0 ? void 0 : info.toString());
+}
+export function getRadioOrToggleOptions({
+  id,
+  value,
+  variant,
+  info,
+  warning,
+  htmlAttributes,
+  children,
+  hasError
+}) {
+  const optionsCount = React.Children.count(children);
+  const Component = variant === 'radio' ? Radio : ToggleButton;
+  const createOption = (props, i) => {
+    const {
+        error,
+        title,
+        help,
+        children
+      } = props,
+      rest = _objectWithoutProperties(props, _excluded);
+    const label = title !== null && title !== void 0 ? title : children;
+    const status = getStatus(error, info, warning);
+    const suffix = help ? React.createElement(HelpButton, {
+      size: "small",
+      title: help.title
+    }, help.content) : undefined;
+    return React.createElement(Component, _extends({
+      id: optionsCount === 1 ? id : undefined,
+      key: `option-${i}-${value}`,
+      label: variant === 'radio' ? label : undefined,
+      text: variant === 'button' ? label : undefined,
+      value: String(value !== null && value !== void 0 ? value : ''),
+      status: (hasError || status) && 'error',
+      suffix: suffix
+    }, htmlAttributes, rest));
+  };
+  const mapOptions = children => {
+    return React.Children.toArray(children).map((child, i) => {
+      if (React.isValidElement(child)) {
+        if (child.type === OptionField) {
+          return createOption(child.props, i);
+        }
+        if (child.props.children) {
+          const nestedChildren = mapOptions(child.props.children);
+          return React.cloneElement(child, child.props, nestedChildren);
+        }
+      }
+      return child;
+    });
+  };
+  return mapOptions(children);
+}
 Selection._supportsSpacingProps = true;
 export default Selection;
 //# sourceMappingURL=Selection.js.map

package/es/extensions/forms/Field/Selection/Selection.js.map

@@ -1 +1 @@
-{"version":3,"file":"Selection.js","names":["React","useMemo","useCallback","classnames","makeUniqueId","ToggleButton","Dropdown","Radio","HelpButton","Autocomplete","OptionField","makeOptions","useFieldProps","pickSpacingProps","FieldBlock","FormError","convertCamelCaseProps","Selection","props","clearValue","id","className","variant","label","labelDescription","layout","optionsLayout","placeholder","value","info","warning","error","hasError","disabled","help","emptyValue","width","htmlAttributes","setHasFocus","handleChange","children","data","autocompleteProps","dropdownProps","handleDropdownChange","selectedKey","onChangeHandler","undefined","handleShow","handleHide","cn","fieldSectionProps","_objectSpread","forId","getStatus","_error$message","message","Error","toString","status","options","Children","toArray","filter","child","isValidElement","type","map","option","_option$props","title","rest","_objectWithoutProperties","_excluded","suffix","createElement","size","content","Component","Group","layout_direction","on_change","String","i","_excluded2","_extends","length","key","text","sharedProps","list_class","portal_class","on_show","on_hide","stretch","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Selection/Selection.tsx"],"sourcesContent":["import React, { useMemo, useCallback } from 'react'\nimport classnames from 'classnames'\nimport { makeUniqueId } from '../../../../shared/component-helper'\nimport {\n  ToggleButton,\n  Dropdown,\n  Radio,\n  HelpButton,\n  Autocomplete,\n} from '../../../../components'\nimport OptionField, { makeOptions } from '../Option'\nimport { useFieldProps } from '../../hooks'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport FieldBlock from '../../FieldBlock'\nimport {\n  FormError,\n  FieldProps,\n  FieldHelpProps,\n  FieldBlockWidth,\n} from '../../types'\nimport type { FormStatusText } from '../../../../components/FormStatus'\nimport type {\n  AutocompleteAllProps,\n  AutocompleteProps,\n} from '../../../../components/Autocomplete'\nimport type {\n  DropdownAllProps,\n  DropdownProps,\n} from '../../../../components/Dropdown'\nimport {\n  convertCamelCaseProps,\n  ToCamelCase,\n} from '../../../../shared/helpers/withCamelCaseProps'\n\ninterface IOption {\n  title: string | React.ReactNode\n  value: number | string\n  status: FormStatusText\n}\n\nexport type Data = AutocompleteAllProps['data'] | DropdownAllProps['data']\n\nexport type Props = FieldHelpProps &\n  FieldProps<IOption['value']> & {\n    variant?: 'dropdown' | 'autocomplete' | 'radio' | 'button'\n    optionsLayout?: 'horizontal' | 'vertical'\n    children?: React.ReactNode\n\n    // - Autocomplete and Dropdown specific props\n    autocompleteProps?: ToCamelCase<AutocompleteProps>\n    dropdownProps?: ToCamelCase<DropdownProps>\n    data?: Data\n    width?: FieldBlockWidth\n  }\n\nfunction Selection(props: Props) {\n  const clearValue = useMemo(() => `clear-option-${makeUniqueId()}`, [])\n\n  const {\n    id,\n    className,\n    variant = 'dropdown',\n    label,\n    labelDescription,\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    placeholder,\n    value,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    help,\n    emptyValue,\n    width = 'large',\n    htmlAttributes,\n    setHasFocus,\n    handleChange,\n    children,\n\n    // - Autocomplete and Dropdown specific props\n    data,\n    autocompleteProps,\n    dropdownProps,\n  } = useFieldProps(props)\n\n  const handleDropdownChange = useCallback(\n    ({ data }) => {\n      const selectedKey = data?.selectedKey\n      handleChange?.(\n        !selectedKey || selectedKey === clearValue\n          ? emptyValue\n          : selectedKey\n      )\n    },\n    [handleChange, emptyValue, clearValue]\n  )\n\n  const onChangeHandler = useCallback(\n    ({ value }) => {\n      handleChange?.(value === undefined ? emptyValue : value)\n    },\n    [handleChange, emptyValue]\n  )\n\n  // Specific handleShow and handleHide because Dropdown preserve the initially received callbacks, so changes\n  // due to `useCallback` usage will have no effect, leading to useFieldPropss handleFocus and handleBlur sending out old\n  // copies of value as arguments.\n  const handleShow = useCallback(\n    ({ data }) => {\n      setHasFocus(true, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const handleHide = useCallback(\n    ({ data }) => {\n      setHasFocus(false, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const cn = classnames(\n    'dnb-forms-field-selection',\n    `dnb-forms-field-selection__variant--${variant}`,\n    `dnb-forms-field-selection__options-layout--${optionsLayout}`,\n    className\n  )\n\n  const fieldSectionProps = {\n    forId: id,\n    className: cn,\n    ...pickSpacingProps(props),\n    info,\n    warning,\n    error,\n    layout,\n    label,\n    labelDescription,\n  }\n\n  const getStatus = useCallback(\n    (error: Error | FormError | undefined) => {\n      return (\n        error?.message ??\n        ((warning instanceof Error && warning.message) ||\n          (warning instanceof FormError && warning.message) ||\n          warning?.toString() ||\n          (info instanceof Error && info.message) ||\n          (info instanceof FormError && info.message) ||\n          info?.toString())\n      )\n    },\n    [info, warning]\n  )\n\n  const status = getStatus(error)\n\n  switch (variant) {\n    case 'radio':\n    case 'button': {\n      const options: IOption[] = React.Children.toArray(children)\n        .filter(\n          (child) =>\n            React.isValidElement(child) && child.type === OptionField\n        )\n        .map((option: React.ReactElement) => {\n          const { error, title, help, children, ...rest } = option.props\n          const status = getStatus(error)\n\n          return {\n            title: title ?? children,\n            status,\n            suffix: help ? (\n              <HelpButton size=\"small\" title={help.title}>\n                {help.content}\n              </HelpButton>\n            ) : undefined,\n            ...rest,\n          }\n        })\n\n      const Component = (\n        variant === 'radio' ? Radio : ToggleButton\n      ) as typeof Radio & typeof ToggleButton\n\n      return (\n        <FieldBlock {...fieldSectionProps}>\n          <Component.Group\n            className={cn}\n            layout_direction={\n              optionsLayout === 'horizontal' ? 'row' : 'column'\n            }\n            disabled={disabled}\n            on_change={onChangeHandler}\n            value={String(value ?? '')}\n          >\n            {options.map((option, i) => {\n              const { value, title, status, ...rest } = option\n              return (\n                <Component\n                  id={options.length === 1 ? id : undefined}\n                  key={`option-${i}-${value}`}\n                  label={variant === 'radio' ? title : undefined}\n                  text={variant === 'button' ? title : undefined}\n                  value={String(value ?? '')}\n                  status={(hasError || status) && 'error'}\n                  {...htmlAttributes}\n                  {...rest}\n                />\n              )\n            })}\n          </Component.Group>\n        </FieldBlock>\n      )\n    }\n\n    case 'autocomplete':\n    case 'dropdown': {\n      const sharedProps: AutocompleteAllProps & DropdownAllProps = {\n        id,\n        list_class: 'dnb-forms-field-selection__list',\n        portal_class: 'dnb-forms-field-selection__portal',\n        title: placeholder,\n        value: String(value ?? ''),\n        status: (hasError || status) && 'error',\n        disabled,\n        ...htmlAttributes,\n        data: data ?? makeOptions<Data>(children),\n        suffix: help ? (\n          <HelpButton title={help.title}>{help.content}</HelpButton>\n        ) : undefined,\n        on_change: handleDropdownChange,\n        on_show: handleShow,\n        on_hide: handleHide,\n        stretch: true,\n      }\n\n      return (\n        <FieldBlock {...fieldSectionProps} width={width}>\n          {variant === 'autocomplete' ? (\n            <Autocomplete\n              {...sharedProps}\n              {...(autocompleteProps\n                ? (convertCamelCaseProps(\n                    autocompleteProps\n                  ) as AutocompleteAllProps)\n                : null)}\n            />\n          ) : (\n            <Dropdown\n              {...sharedProps}\n              {...(dropdownProps\n                ? (convertCamelCaseProps(\n                    dropdownProps\n                  ) as DropdownAllProps)\n                : null)}\n            />\n          )}\n        </FieldBlock>\n      )\n    }\n  }\n}\n\nSelection._supportsSpacingProps = true\nexport default Selection\n"],"mappings":"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"}
+{"version":3,"file":"Selection.js","names":["React","useMemo","useCallback","classnames","makeUniqueId","ToggleButton","Dropdown","Radio","HelpButton","Autocomplete","OptionField","makeOptions","useFieldProps","pickSpacingProps","FieldBlock","FormError","convertCamelCaseProps","Selection","props","clearValue","id","className","variant","label","labelDescription","layout","optionsLayout","placeholder","value","info","warning","error","hasError","disabled","help","emptyValue","width","htmlAttributes","setHasFocus","handleChange","children","data","autocompleteProps","dropdownProps","handleDropdownChange","selectedKey","onChangeHandler","undefined","handleShow","handleHide","cn","fieldSectionProps","_objectSpread","forId","Component","createElement","Group","layout_direction","on_change","String","getRadioOrToggleOptions","status","getStatus","sharedProps","list_class","portal_class","title","suffix","content","on_show","on_hide","stretch","_extends","_error$message","message","Error","toString","optionsCount","Children","count","createOption","i","rest","_objectWithoutProperties","_excluded","size","key","text","mapOptions","toArray","map","child","isValidElement","type","nestedChildren","cloneElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Selection/Selection.tsx"],"sourcesContent":["import React, { useMemo, useCallback } from 'react'\nimport classnames from 'classnames'\nimport { makeUniqueId } from '../../../../shared/component-helper'\nimport {\n  ToggleButton,\n  Dropdown,\n  Radio,\n  HelpButton,\n  Autocomplete,\n} from '../../../../components'\nimport OptionField, { makeOptions } from '../Option'\nimport { useFieldProps } from '../../hooks'\nimport { ReturnAdditional } from '../../hooks/useFieldProps'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport FieldBlock from '../../FieldBlock'\nimport {\n  FormError,\n  FieldProps,\n  FieldHelpProps,\n  FieldBlockWidth,\n} from '../../types'\nimport type { FormStatusText } from '../../../../components/FormStatus'\nimport type {\n  AutocompleteAllProps,\n  AutocompleteProps,\n} from '../../../../components/Autocomplete'\nimport type {\n  DropdownAllProps,\n  DropdownProps,\n} from '../../../../components/Dropdown'\nimport { HelpButtonProps } from '../../../../components/HelpButton'\nimport {\n  convertCamelCaseProps,\n  ToCamelCase,\n} from '../../../../shared/helpers/withCamelCaseProps'\n\ntype IOption = {\n  title: string | React.ReactNode\n  value: number | string\n  status: FormStatusText\n}\ntype OptionProps = React.ComponentProps<\n  React.FC<{\n    error: Error | FormError | undefined\n    title: React.ReactNode\n    help: HelpButtonProps\n    children: React.ReactNode\n  }>\n>\n\nexport type Data = AutocompleteAllProps['data'] | DropdownAllProps['data']\n\nexport type Props = FieldHelpProps &\n  FieldProps<IOption['value']> & {\n    variant?: 'dropdown' | 'autocomplete' | 'radio' | 'button'\n    optionsLayout?: 'horizontal' | 'vertical'\n    children?: React.ReactNode\n\n    // - Autocomplete and Dropdown specific props\n    autocompleteProps?: ToCamelCase<AutocompleteProps>\n    dropdownProps?: ToCamelCase<DropdownProps>\n    data?: Data\n    width?: FieldBlockWidth\n  }\n\nfunction Selection(props: Props) {\n  const clearValue = useMemo(() => `clear-option-${makeUniqueId()}`, [])\n\n  const {\n    id,\n    className,\n    variant = 'dropdown',\n    label,\n    labelDescription,\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    placeholder,\n    value,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    help,\n    emptyValue,\n    width = 'large',\n    htmlAttributes,\n    setHasFocus,\n    handleChange,\n    children,\n\n    // - Autocomplete and Dropdown specific props\n    data,\n    autocompleteProps,\n    dropdownProps,\n  } = useFieldProps(props)\n\n  const handleDropdownChange = useCallback(\n    ({ data }) => {\n      const selectedKey = data?.selectedKey\n      handleChange?.(\n        !selectedKey || selectedKey === clearValue\n          ? emptyValue\n          : selectedKey\n      )\n    },\n    [handleChange, emptyValue, clearValue]\n  )\n\n  const onChangeHandler = useCallback(\n    ({ value }) => {\n      handleChange?.(value === undefined ? emptyValue : value)\n    },\n    [handleChange, emptyValue]\n  )\n\n  // Specific handleShow and handleHide because Dropdown preserve the initially received callbacks, so changes\n  // due to `useCallback` usage will have no effect, leading to useFieldPropss handleFocus and handleBlur sending out old\n  // copies of value as arguments.\n  const handleShow = useCallback(\n    ({ data }) => {\n      setHasFocus(true, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const handleHide = useCallback(\n    ({ data }) => {\n      setHasFocus(false, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const cn = classnames(\n    'dnb-forms-field-selection',\n    `dnb-forms-field-selection__variant--${variant}`,\n    `dnb-forms-field-selection__options-layout--${optionsLayout}`,\n    className\n  )\n\n  const fieldSectionProps = {\n    forId: id,\n    className: cn,\n    ...pickSpacingProps(props),\n    info,\n    warning,\n    error,\n    layout,\n    label,\n    labelDescription,\n  }\n\n  switch (variant) {\n    case 'radio':\n    case 'button': {\n      const Component = (\n        variant === 'radio' ? Radio : ToggleButton\n      ) as typeof Radio & typeof ToggleButton\n\n      return (\n        <FieldBlock {...fieldSectionProps}>\n          <Component.Group\n            className={cn}\n            layout_direction={\n              optionsLayout === 'horizontal' ? 'row' : 'column'\n            }\n            disabled={disabled}\n            on_change={onChangeHandler}\n            value={String(value ?? '')}\n          >\n            {getRadioOrToggleOptions({\n              id,\n              value,\n              variant,\n              info,\n              warning,\n              htmlAttributes,\n              children,\n              hasError,\n            })}\n          </Component.Group>\n        </FieldBlock>\n      )\n    }\n\n    case 'autocomplete':\n    case 'dropdown': {\n      const status = getStatus(error, info, warning)\n      const sharedProps: AutocompleteAllProps & DropdownAllProps = {\n        id,\n        list_class: 'dnb-forms-field-selection__list',\n        portal_class: 'dnb-forms-field-selection__portal',\n        title: placeholder,\n        value: String(value ?? ''),\n        status: (hasError || status) && 'error',\n        disabled,\n        ...htmlAttributes,\n        data: data ?? makeOptions<Data>(children),\n        suffix: help ? (\n          <HelpButton title={help.title}>{help.content}</HelpButton>\n        ) : undefined,\n        on_change: handleDropdownChange,\n        on_show: handleShow,\n        on_hide: handleHide,\n        stretch: true,\n      }\n\n      return (\n        <FieldBlock {...fieldSectionProps} width={width}>\n          {variant === 'autocomplete' ? (\n            <Autocomplete\n              {...sharedProps}\n              {...(autocompleteProps\n                ? (convertCamelCaseProps(\n                    autocompleteProps\n                  ) as AutocompleteAllProps)\n                : null)}\n            />\n          ) : (\n            <Dropdown\n              {...sharedProps}\n              {...(dropdownProps\n                ? (convertCamelCaseProps(\n                    dropdownProps\n                  ) as DropdownAllProps)\n                : null)}\n            />\n          )}\n        </FieldBlock>\n      )\n    }\n  }\n}\n\nexport function getStatus(\n  error: Error | FormError | undefined,\n  info: React.ReactNode,\n  warning: React.ReactNode\n) {\n  return (\n    error?.message ??\n    ((warning instanceof Error && warning.message) ||\n      (warning instanceof FormError && warning.message) ||\n      warning?.toString() ||\n      (info instanceof Error && info.message) ||\n      (info instanceof FormError && info.message) ||\n      info?.toString())\n  )\n}\n\nexport function getRadioOrToggleOptions({\n  id,\n  value,\n  variant,\n  info,\n  warning,\n  htmlAttributes,\n  children,\n  hasError,\n}: {\n  id: string\n  value: Props['value']\n  variant: Props['variant']\n  info: Props['info']\n  warning: Props['warning']\n  htmlAttributes: Props['htmlAttributes']\n  children: Props['children']\n  hasError: ReturnAdditional<Props['value']>['hasError']\n}) {\n  const optionsCount = React.Children.count(children)\n\n  const Component = (\n    variant === 'radio' ? Radio : ToggleButton\n  ) as typeof Radio & typeof ToggleButton\n\n  const createOption = (props: OptionProps, i: number) => {\n    const { error, title, help, children, ...rest } = props\n\n    const label = title ?? children\n    const status = getStatus(error, info, warning)\n    const suffix = help ? (\n      <HelpButton size=\"small\" title={help.title}>\n        {help.content}\n      </HelpButton>\n    ) : undefined\n\n    return (\n      <Component\n        id={optionsCount === 1 ? id : undefined}\n        key={`option-${i}-${value}`}\n        label={variant === 'radio' ? label : undefined}\n        text={variant === 'button' ? label : undefined}\n        value={String(value ?? '')}\n        status={(hasError || status) && 'error'}\n        suffix={suffix}\n        {...htmlAttributes}\n        {...rest}\n      />\n    )\n  }\n\n  const mapOptions = (children: React.ReactNode) => {\n    return React.Children.toArray(children).map(\n      (child: React.ReactElement<OptionProps>, i) => {\n        if (React.isValidElement(child)) {\n          if (child.type === OptionField) {\n            return createOption(child.props, i)\n          }\n\n          if (child.props.children) {\n            const nestedChildren = mapOptions(child.props.children)\n            return React.cloneElement(child, child.props, nestedChildren)\n          }\n        }\n\n        return child\n      }\n    )\n  }\n\n  return mapOptions(children)\n}\n\nSelection._supportsSpacingProps = true\nexport default Selection\n"],"mappings":"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"}

package/es/extensions/forms/Field/Selection/style/dnb-selection.css

@@ -6,4 +6,13 @@
 }
 .dnb-forms-field-selection__variant--button .dnb-forms-field-block--layout-horizontal .dnb-form-label {
   line-height: 2.5rem;
+}
+.dnb-forms-field-selection .dnb-forms-field-block__contents {
+  display: flex;
+}
+.dnb-forms-field-selection .dnb-radio-group .dnb-height-animation, .dnb-forms-field-selection .dnb-radio-group > .dnb-flex-container,
+.dnb-forms-field-selection .dnb-toggle-button-group .dnb-height-animation,
+.dnb-forms-field-selection .dnb-toggle-button-group > .dnb-flex-container {
+  width: 100%;
+  flex-grow: 1;
 }

package/es/extensions/forms/Field/Selection/style/dnb-selection.min.css

@@ -1 +1 @@
-.dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label{align-self:center}.dnb-forms-field-selection__options-layout--horizontal .dnb-forms-field-block--layout-horizontal .dnb-form-label,.dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label{margin-bottom:0}.dnb-forms-field-selection__variant--button .dnb-forms-field-block--layout-horizontal .dnb-form-label{line-height:2.5rem}
+.dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label{align-self:center}.dnb-forms-field-selection__options-layout--horizontal .dnb-forms-field-block--layout-horizontal .dnb-form-label,.dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label{margin-bottom:0}.dnb-forms-field-selection__variant--button .dnb-forms-field-block--layout-horizontal .dnb-form-label{line-height:2.5rem}.dnb-forms-field-selection .dnb-forms-field-block__contents{display:flex}.dnb-forms-field-selection .dnb-radio-group .dnb-height-animation,.dnb-forms-field-selection .dnb-radio-group>.dnb-flex-container,.dnb-forms-field-selection .dnb-toggle-button-group .dnb-height-animation,.dnb-forms-field-selection .dnb-toggle-button-group>.dnb-flex-container{flex-grow:1;width:100%}

package/es/extensions/forms/Field/Selection/style/dnb-selection.scss

@@ -21,4 +21,20 @@
       }
     }
   }
+
+  // In order to stretch nested Section components
+  // Because __contents is not a flex container by default (and should not be)
+  .dnb-forms-field-block__contents {
+    display: flex;
+  }
+
+  .dnb-radio-group,
+  .dnb-toggle-button-group {
+    // On order to stretch a nested Section component
+    .dnb-height-animation,
+    & > .dnb-flex-container {
+      width: 100%;
+      flex-grow: 1;
+    }
+  }
 }

package/es/extensions/forms/Form/Visibility/Visibility.d.ts

@@ -36,6 +36,8 @@ export type Props = {
     animate?: boolean;
     /** Keep the content in the DOM, even if it's not visible */
     keepInDOM?: boolean;
+    /** To compensate for CSS gap between the rows, so animation does not jump during the animation. Provide a CSS unit or `auto`. Defaults to `null`. */
+    compensateForGap?: HeightAnimationProps['compensateForGap'];
     /** When visibility is hidden, and `keepInDOM` is true, pass these props to the children */
     fieldPropsWhenHidden?: UseFieldProps & DataAttributes & AriaAttributes;
     element?: HeightAnimationProps['element'];
@@ -45,7 +47,7 @@ export type Props = {
     /** @deprecated Use `visibleWhen` instead */
     whenValue?: unknown;
 };
-declare function Visibility({ visible, pathDefined, pathUndefined, pathTruthy, pathFalsy, pathTrue, pathFalse, pathValue, whenValue, visibleWhen, visibleWhenNot, inferData, filterData, animate, keepInDOM, fieldPropsWhenHidden, children, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+declare function Visibility({ visible, pathDefined, pathUndefined, pathTruthy, pathFalsy, pathTrue, pathFalse, pathValue, whenValue, visibleWhen, visibleWhenNot, inferData, filterData, animate, keepInDOM, compensateForGap, fieldPropsWhenHidden, children, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace Visibility {
     var _supportsSpacingProps: string;
 }

package/es/extensions/forms/Form/Visibility/Visibility.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["visible", "pathDefined", "pathUndefined", "pathTruthy", "pathFalsy", "pathTrue", "pathFalse", "pathValue", "whenValue", "visibleWhen", "visibleWhenNot", "inferData", "filterData", "animate", "keepInDOM", "fieldPropsWhenHidden", "children"];
+const _excluded = ["visible", "pathDefined", "pathUndefined", "pathTruthy", "pathFalsy", "pathTrue", "pathFalse", "pathValue", "whenValue", "visibleWhen", "visibleWhenNot", "inferData", "filterData", "animate", "keepInDOM", "compensateForGap", "fieldPropsWhenHidden", "children"];
 import React from 'react';
 import { warn } from '../../../../shared/helpers';
 import useMountEffect from '../../../../shared/helpers/useMountEffect';
@@ -24,6 +24,7 @@ function Visibility(_ref) {
       filterData,
       animate,
       keepInDOM,
+      compensateForGap,
       fieldPropsWhenHidden,
       children
     } = _ref,
@@ -56,7 +57,8 @@ function Visibility(_ref) {
     return React.createElement(HeightAnimation, _extends({
       open: open,
       keepInDOM: Boolean(keepInDOM),
-      className: "dnb-forms-visibility"
+      className: "dnb-forms-visibility",
+      compensateForGap: compensateForGap
     }, rest), React.createElement(FieldProps, props, children));
   }
   if (keepInDOM) {

package/es/extensions/forms/Form/Visibility/Visibility.js.map

@@ -1 +1 @@
-{"version":3,"file":"Visibility.js","names":["React","warn","useMountEffect","HeightAnimation","FieldProps","useVisibility","Visibility","_ref","visible","pathDefined","pathUndefined","pathTruthy","pathFalsy","pathTrue","pathFalse","pathValue","whenValue","visibleWhen","visibleWhenNot","inferData","filterData","animate","keepInDOM","fieldPropsWhenHidden","children","rest","_objectWithoutProperties","_excluded","check","open","props","createElement","_extends","Boolean","className","hidden","Fragment","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Form/Visibility/Visibility.tsx"],"sourcesContent":["import React, { AriaAttributes } from 'react'\n\nimport { warn } from '../../../../shared/helpers'\nimport useMountEffect from '../../../../shared/helpers/useMountEffect'\nimport HeightAnimation, {\n  HeightAnimationProps,\n} from '../../../../components/HeightAnimation'\nimport FieldProps from '../FieldProps'\nimport useVisibility from './useVisibility'\n\nimport type { UseFieldProps } from '../../types'\nimport type { DataAttributes } from '../../hooks/useFieldProps'\nimport { FilterData } from '../../DataContext'\n\nexport type VisibleWhen =\n  | {\n      path: string\n      hasValue: unknown\n    }\n  | {\n      path: string\n      withValue: (value: unknown) => boolean\n    }\n\nexport type Props = {\n  visible?: boolean\n  /** Given data context path must be defined to show children */\n  pathDefined?: string\n  /** Given data context path must be undefined to show children */\n  pathUndefined?: string\n  /** Given data context path must be truthy to show children */\n  pathTruthy?: string\n  /** Given data context path must be falsy to show children */\n  pathFalsy?: string\n  /** Given data context path must be true to show children */\n  pathTrue?: string\n  /** Given data context path must be false to show children */\n  pathFalse?: string\n  /** Provide a `path` and a `hasValue` property with the excepted value in order to show children. You can alternatively provide a `withValue` function that returns a boolean. The first parameter is the value of the path. */\n  visibleWhen?: VisibleWhen\n  /** Same as `visibleWhen`, but with inverted logic. */\n  visibleWhenNot?: VisibleWhen\n  /** Infer visibility calling given derivative function with the whole data set. Should return true/false for visibility.   */\n  inferData?: (data: unknown) => boolean\n  /** Filter data based on provided criteria. The first parameter is the path, the second is the value, and the third is the props, and the fourth is the internal. Return false to filter out the data. */\n  filterData?: FilterData\n  /** Animate the visibility change */\n  animate?: boolean\n  /** Keep the content in the DOM, even if it's not visible */\n  keepInDOM?: boolean\n  /** When visibility is hidden, and `keepInDOM` is true, pass these props to the children */\n  fieldPropsWhenHidden?: UseFieldProps & DataAttributes & AriaAttributes\n  element?: HeightAnimationProps['element']\n  children: React.ReactNode\n\n  /** @deprecated Use `visibleWhen` instead */\n  pathValue?: string\n  /** @deprecated Use `visibleWhen` instead */\n  whenValue?: unknown\n}\n\nfunction Visibility({\n  visible,\n  pathDefined,\n  pathUndefined,\n  pathTruthy,\n  pathFalsy,\n  pathTrue,\n  pathFalse,\n  pathValue,\n  whenValue,\n  visibleWhen,\n  visibleWhenNot,\n  inferData,\n  filterData,\n  animate,\n  keepInDOM,\n  fieldPropsWhenHidden,\n  children,\n  ...rest\n}: Props) {\n  useMountEffect(() => {\n    if (fieldPropsWhenHidden && !keepInDOM) {\n      warn('Using \"fieldPropsWhenHidden\" requires \"keepInDOM\" to be true.')\n    }\n  })\n\n  const { check } = useVisibility({\n    visible,\n    pathDefined,\n    pathUndefined,\n    pathTruthy,\n    pathFalsy,\n    pathTrue,\n    pathFalse,\n    pathValue,\n    whenValue,\n    visibleWhen,\n    visibleWhenNot,\n    inferData,\n    filterData,\n  })\n  const open = check()\n\n  if (animate) {\n    const props = !open ? fieldPropsWhenHidden : null\n\n    return (\n      <HeightAnimation\n        open={open}\n        keepInDOM={Boolean(keepInDOM)}\n        className=\"dnb-forms-visibility\"\n        {...rest}\n      >\n        <FieldProps {...props}>{children}</FieldProps>\n      </HeightAnimation>\n    )\n  }\n\n  if (keepInDOM) {\n    const props = !open ? fieldPropsWhenHidden : null\n    return (\n      <span className=\"dnb-forms-visibility\" hidden={!open}>\n        <FieldProps {...props}>{children}</FieldProps>\n      </span>\n    )\n  }\n\n  return <>{open ? children : null}</>\n}\n\nVisibility._supportsSpacingProps = 'children'\nexport default Visibility\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAA0B,OAAO;AAE7C,SAASC,IAAI,QAAQ,4BAA4B;AACjD,OAAOC,cAAc,MAAM,2CAA2C;AACtE,OAAOC,eAAe,MAEf,wCAAwC;AAC/C,OAAOC,UAAU,MAAM,eAAe;AACtC,OAAOC,aAAa,MAAM,iBAAiB;AAqD3C,SAASC,UAAUA,CAAAC,IAAA,EAmBT;EAAA,IAnBU;MAClBC,OAAO;MACPC,WAAW;MACXC,aAAa;MACbC,UAAU;MACVC,SAAS;MACTC,QAAQ;MACRC,SAAS;MACTC,SAAS;MACTC,SAAS;MACTC,WAAW;MACXC,cAAc;MACdC,SAAS;MACTC,UAAU;MACVC,OAAO;MACPC,SAAS;MACTC,oBAAoB;MACpBC;IAEK,CAAC,GAAAjB,IAAA;IADHkB,IAAI,GAAAC,wBAAA,CAAAnB,IAAA,EAAAoB,SAAA;EAEPzB,cAAc,CAAC,MAAM;IACnB,IAAIqB,oBAAoB,IAAI,CAACD,SAAS,EAAE;MACtCrB,IAAI,CAAC,+DAA+D,CAAC;IACvE;EACF,CAAC,CAAC;EAEF,MAAM;IAAE2B;EAAM,CAAC,GAAGvB,aAAa,CAAC;IAC9BG,OAAO;IACPC,WAAW;IACXC,aAAa;IACbC,UAAU;IACVC,SAAS;IACTC,QAAQ;IACRC,SAAS;IACTC,SAAS;IACTC,SAAS;IACTC,WAAW;IACXC,cAAc;IACdC,SAAS;IACTC;EACF,CAAC,CAAC;EACF,MAAMS,IAAI,GAAGD,KAAK,CAAC,CAAC;EAEpB,IAAIP,OAAO,EAAE;IACX,MAAMS,KAAK,GAAG,CAACD,IAAI,GAAGN,oBAAoB,GAAG,IAAI;IAEjD,OACEvB,KAAA,CAAA+B,aAAA,CAAC5B,eAAe,EAAA6B,QAAA;MACdH,IAAI,EAAEA,IAAK;MACXP,SAAS,EAAEW,OAAO,CAACX,SAAS,CAAE;MAC9BY,SAAS,EAAC;IAAsB,GAC5BT,IAAI,GAERzB,KAAA,CAAA+B,aAAA,CAAC3B,UAAU,EAAK0B,KAAK,EAAGN,QAAqB,CAC9B,CAAC;EAEtB;EAEA,IAAIF,SAAS,EAAE;IACb,MAAMQ,KAAK,GAAG,CAACD,IAAI,GAAGN,oBAAoB,GAAG,IAAI;IACjD,OACEvB,KAAA,CAAA+B,aAAA;MAAMG,SAAS,EAAC,sBAAsB;MAACC,MAAM,EAAE,CAACN;IAAK,GACnD7B,KAAA,CAAA+B,aAAA,CAAC3B,UAAU,EAAK0B,KAAK,EAAGN,QAAqB,CACzC,CAAC;EAEX;EAEA,OAAOxB,KAAA,CAAA+B,aAAA,CAAA/B,KAAA,CAAAoC,QAAA,QAAGP,IAAI,GAAGL,QAAQ,GAAG,IAAO,CAAC;AACtC;AAEAlB,UAAU,CAAC+B,qBAAqB,GAAG,UAAU;AAC7C,eAAe/B,UAAU"}
+{"version":3,"file":"Visibility.js","names":["React","warn","useMountEffect","HeightAnimation","FieldProps","useVisibility","Visibility","_ref","visible","pathDefined","pathUndefined","pathTruthy","pathFalsy","pathTrue","pathFalse","pathValue","whenValue","visibleWhen","visibleWhenNot","inferData","filterData","animate","keepInDOM","compensateForGap","fieldPropsWhenHidden","children","rest","_objectWithoutProperties","_excluded","check","open","props","createElement","_extends","Boolean","className","hidden","Fragment","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Form/Visibility/Visibility.tsx"],"sourcesContent":["import React, { AriaAttributes } from 'react'\n\nimport { warn } from '../../../../shared/helpers'\nimport useMountEffect from '../../../../shared/helpers/useMountEffect'\nimport HeightAnimation, {\n  HeightAnimationProps,\n} from '../../../../components/HeightAnimation'\nimport FieldProps from '../FieldProps'\nimport useVisibility from './useVisibility'\n\nimport type { UseFieldProps } from '../../types'\nimport type { DataAttributes } from '../../hooks/useFieldProps'\nimport { FilterData } from '../../DataContext'\n\nexport type VisibleWhen =\n  | {\n      path: string\n      hasValue: unknown\n    }\n  | {\n      path: string\n      withValue: (value: unknown) => boolean\n    }\n\nexport type Props = {\n  visible?: boolean\n  /** Given data context path must be defined to show children */\n  pathDefined?: string\n  /** Given data context path must be undefined to show children */\n  pathUndefined?: string\n  /** Given data context path must be truthy to show children */\n  pathTruthy?: string\n  /** Given data context path must be falsy to show children */\n  pathFalsy?: string\n  /** Given data context path must be true to show children */\n  pathTrue?: string\n  /** Given data context path must be false to show children */\n  pathFalse?: string\n  /** Provide a `path` and a `hasValue` property with the excepted value in order to show children. You can alternatively provide a `withValue` function that returns a boolean. The first parameter is the value of the path. */\n  visibleWhen?: VisibleWhen\n  /** Same as `visibleWhen`, but with inverted logic. */\n  visibleWhenNot?: VisibleWhen\n  /** Infer visibility calling given derivative function with the whole data set. Should return true/false for visibility.   */\n  inferData?: (data: unknown) => boolean\n  /** Filter data based on provided criteria. The first parameter is the path, the second is the value, and the third is the props, and the fourth is the internal. Return false to filter out the data. */\n  filterData?: FilterData\n  /** Animate the visibility change */\n  animate?: boolean\n  /** Keep the content in the DOM, even if it's not visible */\n  keepInDOM?: boolean\n  /** To compensate for CSS gap between the rows, so animation does not jump during the animation. Provide a CSS unit or `auto`. Defaults to `null`. */\n  compensateForGap?: HeightAnimationProps['compensateForGap']\n  /** When visibility is hidden, and `keepInDOM` is true, pass these props to the children */\n  fieldPropsWhenHidden?: UseFieldProps & DataAttributes & AriaAttributes\n  element?: HeightAnimationProps['element']\n  children: React.ReactNode\n\n  /** @deprecated Use `visibleWhen` instead */\n  pathValue?: string\n  /** @deprecated Use `visibleWhen` instead */\n  whenValue?: unknown\n}\n\nfunction Visibility({\n  visible,\n  pathDefined,\n  pathUndefined,\n  pathTruthy,\n  pathFalsy,\n  pathTrue,\n  pathFalse,\n  pathValue,\n  whenValue,\n  visibleWhen,\n  visibleWhenNot,\n  inferData,\n  filterData,\n  animate,\n  keepInDOM,\n  compensateForGap,\n  fieldPropsWhenHidden,\n  children,\n  ...rest\n}: Props) {\n  useMountEffect(() => {\n    if (fieldPropsWhenHidden && !keepInDOM) {\n      warn('Using \"fieldPropsWhenHidden\" requires \"keepInDOM\" to be true.')\n    }\n  })\n\n  const { check } = useVisibility({\n    visible,\n    pathDefined,\n    pathUndefined,\n    pathTruthy,\n    pathFalsy,\n    pathTrue,\n    pathFalse,\n    pathValue,\n    whenValue,\n    visibleWhen,\n    visibleWhenNot,\n    inferData,\n    filterData,\n  })\n  const open = check()\n\n  if (animate) {\n    const props = !open ? fieldPropsWhenHidden : null\n\n    return (\n      <HeightAnimation\n        open={open}\n        keepInDOM={Boolean(keepInDOM)}\n        className=\"dnb-forms-visibility\"\n        compensateForGap={compensateForGap}\n        {...rest}\n      >\n        <FieldProps {...props}>{children}</FieldProps>\n      </HeightAnimation>\n    )\n  }\n\n  if (keepInDOM) {\n    const props = !open ? fieldPropsWhenHidden : null\n    return (\n      <span className=\"dnb-forms-visibility\" hidden={!open}>\n        <FieldProps {...props}>{children}</FieldProps>\n      </span>\n    )\n  }\n\n  return <>{open ? children : null}</>\n}\n\nVisibility._supportsSpacingProps = 'children'\nexport default Visibility\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAA0B,OAAO;AAE7C,SAASC,IAAI,QAAQ,4BAA4B;AACjD,OAAOC,cAAc,MAAM,2CAA2C;AACtE,OAAOC,eAAe,MAEf,wCAAwC;AAC/C,OAAOC,UAAU,MAAM,eAAe;AACtC,OAAOC,aAAa,MAAM,iBAAiB;AAuD3C,SAASC,UAAUA,CAAAC,IAAA,EAoBT;EAAA,IApBU;MAClBC,OAAO;MACPC,WAAW;MACXC,aAAa;MACbC,UAAU;MACVC,SAAS;MACTC,QAAQ;MACRC,SAAS;MACTC,SAAS;MACTC,SAAS;MACTC,WAAW;MACXC,cAAc;MACdC,SAAS;MACTC,UAAU;MACVC,OAAO;MACPC,SAAS;MACTC,gBAAgB;MAChBC,oBAAoB;MACpBC;IAEK,CAAC,GAAAlB,IAAA;IADHmB,IAAI,GAAAC,wBAAA,CAAApB,IAAA,EAAAqB,SAAA;EAEP1B,cAAc,CAAC,MAAM;IACnB,IAAIsB,oBAAoB,IAAI,CAACF,SAAS,EAAE;MACtCrB,IAAI,CAAC,+DAA+D,CAAC;IACvE;EACF,CAAC,CAAC;EAEF,MAAM;IAAE4B;EAAM,CAAC,GAAGxB,aAAa,CAAC;IAC9BG,OAAO;IACPC,WAAW;IACXC,aAAa;IACbC,UAAU;IACVC,SAAS;IACTC,QAAQ;IACRC,SAAS;IACTC,SAAS;IACTC,SAAS;IACTC,WAAW;IACXC,cAAc;IACdC,SAAS;IACTC;EACF,CAAC,CAAC;EACF,MAAMU,IAAI,GAAGD,KAAK,CAAC,CAAC;EAEpB,IAAIR,OAAO,EAAE;IACX,MAAMU,KAAK,GAAG,CAACD,IAAI,GAAGN,oBAAoB,GAAG,IAAI;IAEjD,OACExB,KAAA,CAAAgC,aAAA,CAAC7B,eAAe,EAAA8B,QAAA;MACdH,IAAI,EAAEA,IAAK;MACXR,SAAS,EAAEY,OAAO,CAACZ,SAAS,CAAE;MAC9Ba,SAAS,EAAC,sBAAsB;MAChCZ,gBAAgB,EAAEA;IAAiB,GAC/BG,IAAI,GAER1B,KAAA,CAAAgC,aAAA,CAAC5B,UAAU,EAAK2B,KAAK,EAAGN,QAAqB,CAC9B,CAAC;EAEtB;EAEA,IAAIH,SAAS,EAAE;IACb,MAAMS,KAAK,GAAG,CAACD,IAAI,GAAGN,oBAAoB,GAAG,IAAI;IACjD,OACExB,KAAA,CAAAgC,aAAA;MAAMG,SAAS,EAAC,sBAAsB;MAACC,MAAM,EAAE,CAACN;IAAK,GACnD9B,KAAA,CAAAgC,aAAA,CAAC5B,UAAU,EAAK2B,KAAK,EAAGN,QAAqB,CACzC,CAAC;EAEX;EAEA,OAAOzB,KAAA,CAAAgC,aAAA,CAAAhC,KAAA,CAAAqC,QAAA,QAAGP,IAAI,GAAGL,QAAQ,GAAG,IAAO,CAAC;AACtC;AAEAnB,UAAU,CAACgC,qBAAqB,GAAG,UAAU;AAC7C,eAAehC,UAAU"}

package/es/extensions/forms/Form/Visibility/VisibilityDocs.js

@@ -59,6 +59,11 @@ export const VisibilityProperties = {
     type: 'boolean',
     status: 'optional'
   },
+  compensateForGap: {
+    doc: 'To compensate for CSS gap between the rows, so animation does not jump during the animation. Provide a CSS unit or `auto`. Defaults to `null`.',
+    type: 'string',
+    status: 'optional'
+  },
   filterData: {
     doc: 'Filter data based on provided criteria. More info about `filterData` can be found in the [Getting Started](/uilib/extensions/forms/getting-started/#filter-data) documentation.',
     type: ['object', 'function'],

package/es/extensions/forms/Form/Visibility/VisibilityDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"VisibilityDocs.js","names":["VisibilityProperties","pathDefined","doc","type","status","pathUndefined","pathTruthy","pathFalsy","pathTrue","pathFalse","visibleWhen","visibleWhenNot","inferData","visible","animate","keepInDOM","filterData","fieldPropsWhenHidden","element","children"],"sources":["../../../../../../src/extensions/forms/Form/Visibility/VisibilityDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const VisibilityProperties: PropertiesTableProps = {\n  pathDefined: {\n    doc: 'Given data context path must be defined to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathUndefined: {\n    doc: 'Given data context path must be undefined to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathTruthy: {\n    doc: 'Given data context path must be truthy to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathFalsy: {\n    doc: 'Given data context path must be falsy to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathTrue: {\n    doc: 'Given data context path must be true to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathFalse: {\n    doc: 'Given data context path must be false to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  visibleWhen: {\n    doc: 'Provide a `path` and a `hasValue` property with the excepted value in order to show children. You can alternatively provide a `withValue` function that returns a boolean. The first parameter is the value of the path.',\n    type: 'object',\n    status: 'optional',\n  },\n  visibleWhenNot: {\n    doc: 'Same as `visibleWhen`, but with inverted logic.',\n    type: 'object',\n    status: 'optional',\n  },\n  inferData: {\n    doc: 'Will be called to decide by external logic, and show/hide contents based on the return value.',\n    type: 'function',\n    status: 'optional',\n  },\n  visible: {\n    doc: 'Control visibility directly by boolean value.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  animate: {\n    doc: 'Define if the content should animate during show/hide.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  keepInDOM: {\n    doc: \"Keep the content in the DOM, even if it's not visible. Can be used to let fields run validation.\",\n    type: 'boolean',\n    status: 'optional',\n  },\n  filterData: {\n    doc: 'Filter data based on provided criteria. More info about `filterData` can be found in the [Getting Started](/uilib/extensions/forms/getting-started/#filter-data) documentation.',\n    type: ['object', 'function'],\n    status: 'optional',\n  },\n  fieldPropsWhenHidden: {\n    doc: 'When visibility is hidden, and `keepInDOM` is true, pass these props to the children.',\n    type: 'various',\n    status: 'optional',\n  },\n  element: {\n    doc: 'Define the type of element. Defaults to `div`. Only for when `animate` is true.',\n    type: 'string or React.Element',\n    status: 'optional',\n  },\n  children: {\n    doc: 'Contents.',\n    type: 'React.Node',\n    status: 'required',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,oBAA0C,GAAG;EACxDC,WAAW,EAAE;IACXC,GAAG,EAAE,2DAA2D;IAChEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,aAAa,EAAE;IACbH,GAAG,EAAE,6DAA6D;IAClEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,UAAU,EAAE;IACVJ,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,SAAS,EAAE;IACTL,GAAG,EAAE,yDAAyD;IAC9DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,QAAQ,EAAE;IACRN,GAAG,EAAE,wDAAwD;IAC7DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,SAAS,EAAE;IACTP,GAAG,EAAE,yDAAyD;IAC9DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDM,WAAW,EAAE;IACXR,GAAG,EAAE,0NAA0N;IAC/NC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDO,cAAc,EAAE;IACdT,GAAG,EAAE,iDAAiD;IACtDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDQ,SAAS,EAAE;IACTV,GAAG,EAAE,+FAA+F;IACpGC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDS,OAAO,EAAE;IACPX,GAAG,EAAE,+CAA+C;IACpDC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDU,OAAO,EAAE;IACPZ,GAAG,EAAE,wDAAwD;IAC7DC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDW,SAAS,EAAE;IACTb,GAAG,EAAE,kGAAkG;IACvGC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDY,UAAU,EAAE;IACVd,GAAG,EAAE,iLAAiL;IACtLC,IAAI,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC;IAC5BC,MAAM,EAAE;EACV,CAAC;EACDa,oBAAoB,EAAE;IACpBf,GAAG,EAAE,uFAAuF;IAC5FC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDc,OAAO,EAAE;IACPhB,GAAG,EAAE,iFAAiF;IACtFC,IAAI,EAAE,yBAAyB;IAC/BC,MAAM,EAAE;EACV,CAAC;EACDe,QAAQ,EAAE;IACRjB,GAAG,EAAE,WAAW;IAChBC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV;AACF,CAAC"}
+{"version":3,"file":"VisibilityDocs.js","names":["VisibilityProperties","pathDefined","doc","type","status","pathUndefined","pathTruthy","pathFalsy","pathTrue","pathFalse","visibleWhen","visibleWhenNot","inferData","visible","animate","keepInDOM","compensateForGap","filterData","fieldPropsWhenHidden","element","children"],"sources":["../../../../../../src/extensions/forms/Form/Visibility/VisibilityDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const VisibilityProperties: PropertiesTableProps = {\n  pathDefined: {\n    doc: 'Given data context path must be defined to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathUndefined: {\n    doc: 'Given data context path must be undefined to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathTruthy: {\n    doc: 'Given data context path must be truthy to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathFalsy: {\n    doc: 'Given data context path must be falsy to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathTrue: {\n    doc: 'Given data context path must be true to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathFalse: {\n    doc: 'Given data context path must be false to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  visibleWhen: {\n    doc: 'Provide a `path` and a `hasValue` property with the excepted value in order to show children. You can alternatively provide a `withValue` function that returns a boolean. The first parameter is the value of the path.',\n    type: 'object',\n    status: 'optional',\n  },\n  visibleWhenNot: {\n    doc: 'Same as `visibleWhen`, but with inverted logic.',\n    type: 'object',\n    status: 'optional',\n  },\n  inferData: {\n    doc: 'Will be called to decide by external logic, and show/hide contents based on the return value.',\n    type: 'function',\n    status: 'optional',\n  },\n  visible: {\n    doc: 'Control visibility directly by boolean value.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  animate: {\n    doc: 'Define if the content should animate during show/hide.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  keepInDOM: {\n    doc: \"Keep the content in the DOM, even if it's not visible. Can be used to let fields run validation.\",\n    type: 'boolean',\n    status: 'optional',\n  },\n  compensateForGap: {\n    doc: 'To compensate for CSS gap between the rows, so animation does not jump during the animation. Provide a CSS unit or `auto`. Defaults to `null`.',\n    type: 'string',\n    status: 'optional',\n  },\n  filterData: {\n    doc: 'Filter data based on provided criteria. More info about `filterData` can be found in the [Getting Started](/uilib/extensions/forms/getting-started/#filter-data) documentation.',\n    type: ['object', 'function'],\n    status: 'optional',\n  },\n  fieldPropsWhenHidden: {\n    doc: 'When visibility is hidden, and `keepInDOM` is true, pass these props to the children.',\n    type: 'various',\n    status: 'optional',\n  },\n  element: {\n    doc: 'Define the type of element. Defaults to `div`. Only for when `animate` is true.',\n    type: 'string or React.Element',\n    status: 'optional',\n  },\n  children: {\n    doc: 'Contents.',\n    type: 'React.Node',\n    status: 'required',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,oBAA0C,GAAG;EACxDC,WAAW,EAAE;IACXC,GAAG,EAAE,2DAA2D;IAChEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,aAAa,EAAE;IACbH,GAAG,EAAE,6DAA6D;IAClEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,UAAU,EAAE;IACVJ,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,SAAS,EAAE;IACTL,GAAG,EAAE,yDAAyD;IAC9DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,QAAQ,EAAE;IACRN,GAAG,EAAE,wDAAwD;IAC7DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,SAAS,EAAE;IACTP,GAAG,EAAE,yDAAyD;IAC9DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDM,WAAW,EAAE;IACXR,GAAG,EAAE,0NAA0N;IAC/NC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDO,cAAc,EAAE;IACdT,GAAG,EAAE,iDAAiD;IACtDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDQ,SAAS,EAAE;IACTV,GAAG,EAAE,+FAA+F;IACpGC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDS,OAAO,EAAE;IACPX,GAAG,EAAE,+CAA+C;IACpDC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDU,OAAO,EAAE;IACPZ,GAAG,EAAE,wDAAwD;IAC7DC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDW,SAAS,EAAE;IACTb,GAAG,EAAE,kGAAkG;IACvGC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDY,gBAAgB,EAAE;IAChBd,GAAG,EAAE,gJAAgJ;IACrJC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDa,UAAU,EAAE;IACVf,GAAG,EAAE,iLAAiL;IACtLC,IAAI,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC;IAC5BC,MAAM,EAAE;EACV,CAAC;EACDc,oBAAoB,EAAE;IACpBhB,GAAG,EAAE,uFAAuF;IAC5FC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDe,OAAO,EAAE;IACPjB,GAAG,EAAE,iFAAiF;IACtFC,IAAI,EAAE,yBAAyB;IAC/BC,MAAM,EAAE;EACV,CAAC;EACDgB,QAAQ,EAAE;IACRlB,GAAG,EAAE,WAAW;IAChBC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV;AACF,CAAC"}

package/es/extensions/forms/hooks/DataValueDocs.js

@@ -36,7 +36,7 @@ export const dataValueProperties = {
   },
   emptyValue: {
     doc: 'The value to use (in `onChange` events etc) when emptying the field. Makes it possible for instance to provide `undefined` instead of an empty string when clearing the content of a text input.',
-    type: 'any',
+    type: ['{valueType}', 'undefined'],
     status: 'optional'
   },
   required: {