@dnb/eufemia 10.72.1 → 10.72.3

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

@@ -1 +1 @@
-{"version":3,"file":"Selection.js","names":["React","useMemo","useCallback","classnames","convertJsxToString","makeUniqueId","ToggleButton","Dropdown","Radio","Autocomplete","HelpButton","OptionField","useFieldProps","checkForError","pickSpacingProps","FieldBlock","convertCamelCaseProps","useDataValue","Selection","props","_props$autocompletePr","clearValue","id","className","variant","layout","optionsLayout","placeholder","value","info","warning","error","hasError","disabled","size","emptyValue","width","htmlAttributes","setHasFocus","handleChange","setDisplayValue","transformSelection","data","dataPath","children","additionalArgs","autocompleteProps","dropdownProps","getValueByPath","dataList","handleDrawerListChange","_data$selectedKey","selectedKey","onChangeHandler","undefined","handleShow","handleHide","cn","fieldBlockProps","_objectSpread","forId","disableStatusSummary","onType","onTypeAutocompleteHandler","event","Component","items","renderRadioItems","iterateOverItems","v","label","additionalFieldBlockProps","asFieldset","Children","count","labelHeight","createElement","_extends","Group","layout_direction","on_change","String","_data$find","renderDropdownItems","concat","makeOptions","filter","Boolean","displayValue","find","item","content","sharedProps","list_class","portal_class","title","status","on_show","on_hide","stretch","specificFieldBlockProps","contentWidth","Object","freeze","preventSelection","on_type","mode","valueProp","optionsCount","length","createOption","i","help","rest","_objectWithoutProperties","_excluded","suffix","key","text","map","mapOptions","child","isValidElement","type","nestedChildren","cloneElement","_child","_child$props","_child$props$children","_ref","_props$title","_props$value","_em","selected_value","style","_em2","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Selection/Selection.tsx"],"sourcesContent":["import React, { useMemo, useCallback } from 'react'\nimport classnames from 'classnames'\nimport {\n  convertJsxToString,\n  makeUniqueId,\n} from '../../../../shared/component-helper'\nimport {\n  ToggleButton,\n  Dropdown,\n  Radio,\n  Autocomplete,\n  HelpButton,\n} from '../../../../components'\nimport OptionField, { Props as OptionFieldProps } from '../Option'\nimport { useFieldProps } from '../../hooks'\nimport { checkForError, ReturnAdditional } from '../../hooks/useFieldProps'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport FieldBlock, {\n  Props as FieldBlockProps,\n  FieldBlockWidth,\n} from '../../FieldBlock'\nimport { FieldProps, Path } from '../../types'\nimport type { FormStatusText } from '../../../../components/FormStatus'\nimport type { AutocompleteAllProps } from '../../../../components/Autocomplete'\nimport type { DropdownAllProps } from '../../../../components/Dropdown'\nimport { HelpProps } from '../../../../components/help-button/HelpButtonInline'\nimport { DrawerListProps } from '../../../../fragments/DrawerList'\nimport {\n  convertCamelCaseProps,\n  ToCamelCase,\n} from '../../../../shared/helpers/withCamelCaseProps'\nimport useDataValue from '../../hooks/useDataValue'\nimport { FormError } from '../../utils'\nimport type { RadioProps } from '../../../../components/Radio'\nimport type { ToggleButtonProps } from '../../../../components/ToggleButton'\nimport type { RadioGroupProps } from '../../../../components/radio/RadioGroup'\nimport type { ToggleButtonGroupProps } from '../../../../components/toggle-button/ToggleButtonGroup'\n\ntype IOption = {\n  title: string | React.ReactNode\n  value: number | string\n  status: FormStatusText\n}\nexport type Data = Array<{\n  value: string\n  title: React.ReactNode\n  text?: React.ReactNode\n  disabled?: boolean\n  style?: React.CSSProperties\n}>\n\nexport type Props = FieldProps<IOption['value']> & {\n  /**\n   * Defines the variant of the component.\n   * Default: dropdown\n   */\n  variant?: 'dropdown' | 'autocomplete' | 'radio' | 'button'\n\n  /**\n   * The width of the component.\n   * Default: large\n   */\n  width?: FieldBlockWidth\n\n  /**\n   * Defines the layout of the options for radio and button variants.\n   */\n  optionsLayout?: 'horizontal' | 'vertical'\n\n  /**\n   * Transform the displayed selection for Dropdown and Autocomplete variant.\n   * Use it to display a different value than the one in the data set.\n   */\n  transformSelection?: (props: OptionFieldProps) => React.ReactNode\n\n  /**\n   * The path to the context data (Form.Handler).\n   * The context data object needs to have a `value` and a `title` property.\n   */\n  dataPath?: Path\n\n  /**\n   * Data to be used for the component. The object needs to have a `value` and a `title` property.\n   * The generated options will be placed above given JSX based children.\n   */\n  data?: Data\n\n  /**\n   * Autocomplete specific props\n   */\n  autocompleteProps?: ToCamelCase<AutocompleteAllProps>\n\n  /**\n   * Dropdown specific props\n   */\n  dropdownProps?: ToCamelCase<DropdownAllProps>\n\n  /**\n   * The size of the component.\n   */\n  size?:\n    | ToggleButtonGroupProps['size']\n    | RadioGroupProps['size']\n    | AutocompleteAllProps['size']\n    | DropdownAllProps['size']\n\n  /**\n   * The content of the component.\n   */\n  children?: React.ReactNode\n}\n\nfunction Selection(props: Props) {\n  const clearValue = useMemo(() => `clear-option-${makeUniqueId()}`, [])\n\n  const {\n    id,\n    className,\n    variant = 'dropdown',\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    placeholder,\n    value,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    size,\n    emptyValue,\n    width = 'large',\n    htmlAttributes,\n    setHasFocus,\n    handleChange,\n    setDisplayValue,\n    transformSelection,\n    data,\n    dataPath,\n    children,\n    additionalArgs,\n\n    // - Autocomplete and Dropdown specific props\n    autocompleteProps,\n    dropdownProps,\n  } = useFieldProps(props)\n\n  const { getValueByPath } = useDataValue()\n  let dataList = data\n  if (dataPath) {\n    dataList = getValueByPath(dataPath)\n  }\n\n  const handleDrawerListChange = useCallback(\n    ({ data, value }) => {\n      const selectedKey = data?.selectedKey ?? value\n      handleChange?.(\n        !selectedKey || selectedKey === clearValue\n          ? emptyValue\n          : selectedKey,\n        { data }\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--layout-${layout}`,\n    `dnb-forms-field-selection--options-layout--${optionsLayout}`,\n    className\n  )\n\n  const fieldBlockProps: FieldBlockProps = {\n    forId: id,\n    className: cn,\n    disableStatusSummary: true,\n    ...pickSpacingProps(props),\n  }\n\n  const onType = props?.autocompleteProps?.onType\n  const onTypeAutocompleteHandler = useCallback(\n    (event) => {\n      const { value } = event\n      if (typeof onType === 'function') {\n        onType(value === undefined ? emptyValue : value, {\n          ...event,\n          ...additionalArgs,\n        })\n      }\n    },\n    [additionalArgs, emptyValue, onType]\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      const items = renderRadioItems({\n        id,\n        value,\n        variant,\n        info,\n        warning,\n        htmlAttributes,\n        children,\n        dataList,\n        hasError,\n        iterateOverItems: ({ value: v, label }) => {\n          if (v === value) {\n            setDisplayValue(label)\n          }\n        },\n      })\n\n      const additionalFieldBlockProps: FieldBlockProps = {\n        asFieldset: React.Children.count(items) > 1,\n      }\n      if (!size) {\n        additionalFieldBlockProps.labelHeight = 'small'\n      }\n\n      return (\n        <FieldBlock {...fieldBlockProps} {...additionalFieldBlockProps}>\n          <Component.Group\n            size={size}\n            className={cn}\n            layout_direction={\n              optionsLayout === 'horizontal' ? 'row' : 'column'\n            }\n            disabled={disabled}\n            on_change={onChangeHandler}\n            value={String(value ?? '') || undefined}\n          >\n            {items}\n          </Component.Group>\n        </FieldBlock>\n      )\n    }\n\n    case 'autocomplete':\n    case 'dropdown': {\n      const data = renderDropdownItems(dataList, transformSelection)\n        .concat(makeOptions(children, transformSelection))\n        .filter(Boolean)\n      const displayValue = data.find((item) => item.selectedKey === value)\n        ?.content\n      setDisplayValue(displayValue)\n\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:\n          (hasError || checkForError([error, info, warning])) && 'error',\n        disabled,\n        ...htmlAttributes,\n        data,\n        size,\n        on_change: handleDrawerListChange,\n        on_show: handleShow,\n        on_hide: handleHide,\n        stretch: true,\n      }\n\n      const specificFieldBlockProps: FieldBlockProps = {\n        width,\n      }\n      if (layout === 'horizontal') {\n        specificFieldBlockProps.width = undefined\n        specificFieldBlockProps.contentWidth = width\n      }\n\n      return (\n        <FieldBlock {...fieldBlockProps} {...specificFieldBlockProps}>\n          {variant === 'autocomplete' ? (\n            <Autocomplete\n              {...sharedProps}\n              {...(autocompleteProps\n                ? (convertCamelCaseProps(\n                    Object.freeze(autocompleteProps)\n                  ) as AutocompleteAllProps)\n                : null)}\n              value={\n                autocompleteProps?.preventSelection ? undefined : value\n              }\n              on_type={onTypeAutocompleteHandler}\n              data={\n                !props.data &&\n                !props.dataPath &&\n                autocompleteProps?.mode === 'async'\n                  ? undefined\n                  : data\n              }\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\ntype OptionProps = React.ComponentProps<\n  React.FC<{\n    value: Props['value']\n    error: Error | FormError | undefined\n    help: HelpProps\n    title: React.ReactNode\n    children: React.ReactNode\n    size?: ToggleButtonProps['size'] | RadioProps['size']\n  }>\n>\n\nfunction renderRadioItems({\n  id,\n  value: valueProp,\n  variant,\n  info,\n  warning,\n  htmlAttributes,\n  children,\n  dataList,\n  hasError,\n  iterateOverItems,\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  dataList: Data\n  hasError: ReturnAdditional<Props['value']>['hasError']\n  iterateOverItems?: (item: {\n    value: Props['value']\n    label: Props['children']\n  }) => void\n}) {\n  const optionsCount =\n    React.Children.count(children) + (dataList?.length || 0)\n\n  const createOption = (props: OptionProps, i: number) => {\n    const { value, title, children, error, help, size, ...rest } = props\n\n    const label = title ?? children\n    const suffix = help ? (\n      <HelpButton size=\"small\" title={convertJsxToString(help.title)}>\n        {help.content}\n      </HelpButton>\n    ) : undefined\n\n    iterateOverItems?.({ value, label })\n\n    const Component = (\n      variant === 'radio' ? Radio : ToggleButton\n    ) as typeof Radio & typeof ToggleButton\n\n    return (\n      <Component\n        id={optionsCount === 1 ? id : undefined}\n        key={`option-${i}-${id}`}\n        label={variant === 'radio' ? label : undefined}\n        text={variant === 'button' ? label : undefined}\n        value={String(value ?? valueProp) || undefined}\n        status={\n          (hasError || checkForError([error, info, warning])) && 'error'\n        }\n        suffix={suffix}\n        size={size}\n        {...htmlAttributes}\n        {...rest}\n      />\n    )\n  }\n\n  return [\n    ...(dataList || []).map((props, i) => {\n      return createOption(props as OptionProps, i)\n    }),\n    ...(mapOptions(children, { createOption }) || []),\n  ].filter(Boolean)\n}\n\nexport function mapOptions(\n  children: React.ReactNode,\n  {\n    createOption,\n  }: { createOption: (props: OptionProps, i: number) => React.ReactNode }\n) {\n  return React.Children.map(\n    children,\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            createOption,\n          })\n          return React.cloneElement(child, child.props, nestedChildren)\n        }\n      }\n\n      return child\n    }\n  )\n}\n\nexport function makeOptions<T = DrawerListProps['data']>(\n  children: React.ReactNode,\n  transformSelection?: Props['transformSelection']\n): T {\n  return React.Children.map(children, (child) => {\n    if (child?.['props']?.children?.type === OptionField) {\n      child = child['props'].children\n    }\n\n    if (React.isValidElement(child) && child.type === OptionField) {\n      const props = child.props as OptionFieldProps\n      const title = props.title ?? props.children ?? <em>Untitled</em>\n      const content = props.text ? [title, props.text] : title\n      const selected_value = transformSelection\n        ? transformSelection(props)\n        : undefined\n      const selectedKey = String(props.value ?? '')\n      const disabled = props.disabled\n      const style = props.style\n\n      return { selectedKey, selected_value, content, disabled, style }\n    }\n\n    // For other children, just show them as content\n    if (child) {\n      return {\n        content: child,\n      }\n    }\n  }) as T\n}\n\nfunction renderDropdownItems(\n  data: Data,\n  transformSelection?: Props['transformSelection']\n) {\n  return (\n    data?.map((props) => {\n      const { value, title, text, disabled, style } = props\n      return {\n        selectedKey: value,\n        content: (text ? [title, text] : title) || <em>Untitled</em>,\n        selected_value: transformSelection\n          ? transformSelection(props)\n          : undefined,\n        disabled,\n        style,\n      }\n    }) || []\n  )\n}\n\nSelection._supportsSpacingProps = true\nexport default Selection\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Selection.js","names":["React","useMemo","useCallback","classnames","convertJsxToString","makeUniqueId","ToggleButton","Dropdown","Radio","Autocomplete","HelpButton","OptionField","useFieldProps","checkForError","pickSpacingProps","FieldBlock","convertCamelCaseProps","useDataValue","Selection","props","_props$autocompletePr","clearValue","id","className","variant","layout","optionsLayout","placeholder","value","info","warning","error","hasError","disabled","size","emptyValue","width","htmlAttributes","setHasFocus","handleChange","setDisplayValue","transformSelection","data","dataPath","children","additionalArgs","autocompleteProps","dropdownProps","getValueByPath","dataList","handleDrawerListChange","_data$selectedKey","selectedKey","onChangeHandler","undefined","handleShow","handleHide","cn","fieldBlockProps","_objectSpread","forId","disableStatusSummary","onType","onTypeAutocompleteHandler","event","Component","items","renderRadioItems","iterateOverItems","v","label","additionalFieldBlockProps","asFieldset","Children","count","labelHeight","createElement","_extends","Group","layout_direction","on_change","String","_data$find","renderDropdownItems","concat","makeOptions","filter","Boolean","displayValue","find","item","content","sharedProps","list_class","portal_class","title","status","on_show","on_hide","stretch","specificFieldBlockProps","contentWidth","Object","freeze","preventSelection","on_type","mode","valueProp","optionsCount","length","createOption","i","help","rest","_objectWithoutProperties","_excluded","suffix","key","text","map","mapOptions","child","isValidElement","type","nestedChildren","cloneElement","_child","_child$props","_child$props$children","_ref","_props$title","_props$value","_em","selected_value","style","_em2","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Selection/Selection.tsx"],"sourcesContent":["import React, { useMemo, useCallback } from 'react'\nimport classnames from 'classnames'\nimport {\n  convertJsxToString,\n  makeUniqueId,\n} from '../../../../shared/component-helper'\nimport {\n  ToggleButton,\n  Dropdown,\n  Radio,\n  Autocomplete,\n  HelpButton,\n} from '../../../../components'\nimport OptionField, { Props as OptionFieldProps } from '../Option'\nimport { useFieldProps } from '../../hooks'\nimport { checkForError, ReturnAdditional } from '../../hooks/useFieldProps'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport FieldBlock, {\n  Props as FieldBlockProps,\n  FieldBlockWidth,\n} from '../../FieldBlock'\nimport { FieldProps, Path } from '../../types'\nimport type { FormStatusText } from '../../../../components/FormStatus'\nimport type { AutocompleteAllProps } from '../../../../components/Autocomplete'\nimport type { DropdownAllProps } from '../../../../components/Dropdown'\nimport { HelpProps } from '../../../../components/help-button/HelpButtonInline'\nimport { DrawerListProps } from '../../../../fragments/DrawerList'\nimport {\n  convertCamelCaseProps,\n  ToCamelCase,\n} from '../../../../shared/helpers/withCamelCaseProps'\nimport useDataValue from '../../hooks/useDataValue'\nimport { FormError } from '../../utils'\nimport type { RadioProps } from '../../../../components/Radio'\nimport type { ToggleButtonProps } from '../../../../components/ToggleButton'\nimport type { RadioGroupProps } from '../../../../components/radio/RadioGroup'\nimport type { ToggleButtonGroupProps } from '../../../../components/toggle-button/ToggleButtonGroup'\n\ntype IOption = {\n  title: string | React.ReactNode\n  value: number | string\n  status: FormStatusText\n}\nexport type Data = Array<{\n  value: string\n  title: React.ReactNode\n  text?: React.ReactNode\n  disabled?: boolean\n  style?: React.CSSProperties\n}>\n\nexport type Props = FieldProps<IOption['value']> & {\n  /**\n   * Defines the variant of the component.\n   * Default: dropdown\n   */\n  variant?: 'dropdown' | 'autocomplete' | 'radio' | 'button'\n\n  /**\n   * The width of the component.\n   * Default: large\n   */\n  width?: FieldBlockWidth\n\n  /**\n   * Defines the layout of the options for radio and button variants.\n   */\n  optionsLayout?: 'horizontal' | 'vertical'\n\n  /**\n   * Transform the displayed selection for Dropdown and Autocomplete variant.\n   * Use it to display a different value than the one in the data set.\n   */\n  transformSelection?: (props: OptionFieldProps) => React.ReactNode\n\n  /**\n   * The path to the context data (Form.Handler).\n   * The context data object needs to have a `value` and a `title` property.\n   */\n  dataPath?: Path\n\n  /**\n   * Data to be used for the component. The object needs to have a `value` and a `title` property.\n   * The generated options will be placed above given JSX based children.\n   */\n  data?: Data\n\n  /**\n   * Autocomplete specific props\n   */\n  autocompleteProps?: ToCamelCase<AutocompleteAllProps>\n\n  /**\n   * Dropdown specific props\n   */\n  dropdownProps?: ToCamelCase<DropdownAllProps>\n\n  /**\n   * The size of the component.\n   */\n  size?:\n    | ToggleButtonGroupProps['size']\n    | RadioGroupProps['size']\n    | AutocompleteAllProps['size']\n    | DropdownAllProps['size']\n\n  /**\n   * The content of the component.\n   */\n  children?: React.ReactNode\n}\n\nfunction Selection(props: Props) {\n  const clearValue = useMemo(() => `clear-option-${makeUniqueId()}`, [])\n\n  const {\n    id,\n    className,\n    variant = 'dropdown',\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    placeholder,\n    value,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    size,\n    emptyValue,\n    width = 'large',\n    htmlAttributes,\n    setHasFocus,\n    handleChange,\n    setDisplayValue,\n    transformSelection,\n    data,\n    dataPath,\n    children,\n    additionalArgs,\n\n    // - Autocomplete and Dropdown specific props\n    autocompleteProps,\n    dropdownProps,\n  } = useFieldProps(props)\n\n  const { getValueByPath } = useDataValue()\n  let dataList = data\n  if (dataPath) {\n    dataList = getValueByPath(dataPath)\n  }\n\n  const handleDrawerListChange = useCallback(\n    ({ data, value }) => {\n      const selectedKey = data?.selectedKey ?? value\n      handleChange?.(\n        !selectedKey || selectedKey === clearValue\n          ? emptyValue\n          : selectedKey,\n        { data }\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--layout-${layout}`,\n    `dnb-forms-field-selection--options-layout--${optionsLayout}`,\n    className\n  )\n\n  const fieldBlockProps: FieldBlockProps = {\n    forId: id,\n    className: cn,\n    disableStatusSummary: true,\n    ...pickSpacingProps(props),\n  }\n\n  const onType = props?.autocompleteProps?.onType\n  const onTypeAutocompleteHandler = useCallback(\n    (event) => {\n      if (typeof onType === 'function') {\n        const { value } = event\n        onType({\n          ...event,\n          ...additionalArgs,\n          value: value === '' ? emptyValue : value,\n        })\n      }\n    },\n    [additionalArgs, emptyValue, onType]\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      const items = renderRadioItems({\n        id,\n        value,\n        variant,\n        info,\n        warning,\n        htmlAttributes,\n        children,\n        dataList,\n        hasError,\n        iterateOverItems: ({ value: v, label }) => {\n          if (v === value) {\n            setDisplayValue(label)\n          }\n        },\n      })\n\n      const additionalFieldBlockProps: FieldBlockProps = {\n        asFieldset: React.Children.count(items) > 1,\n      }\n      if (!size) {\n        additionalFieldBlockProps.labelHeight = 'small'\n      }\n\n      return (\n        <FieldBlock {...fieldBlockProps} {...additionalFieldBlockProps}>\n          <Component.Group\n            size={size}\n            className={cn}\n            layout_direction={\n              optionsLayout === 'horizontal' ? 'row' : 'column'\n            }\n            disabled={disabled}\n            on_change={onChangeHandler}\n            value={String(value ?? '') || undefined}\n          >\n            {items}\n          </Component.Group>\n        </FieldBlock>\n      )\n    }\n\n    case 'autocomplete':\n    case 'dropdown': {\n      const data = renderDropdownItems(dataList, transformSelection)\n        .concat(makeOptions(children, transformSelection))\n        .filter(Boolean)\n      const displayValue = data.find((item) => item.selectedKey === value)\n        ?.content\n      setDisplayValue(displayValue)\n\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:\n          (hasError || checkForError([error, info, warning])) && 'error',\n        disabled,\n        ...htmlAttributes,\n        data,\n        size,\n        on_change: handleDrawerListChange,\n        on_show: handleShow,\n        on_hide: handleHide,\n        stretch: true,\n      }\n\n      const specificFieldBlockProps: FieldBlockProps = {\n        width,\n      }\n      if (layout === 'horizontal') {\n        specificFieldBlockProps.width = undefined\n        specificFieldBlockProps.contentWidth = width\n      }\n\n      return (\n        <FieldBlock {...fieldBlockProps} {...specificFieldBlockProps}>\n          {variant === 'autocomplete' ? (\n            <Autocomplete\n              {...sharedProps}\n              {...(autocompleteProps\n                ? (convertCamelCaseProps(\n                    Object.freeze(autocompleteProps)\n                  ) as AutocompleteAllProps)\n                : null)}\n              value={\n                autocompleteProps?.preventSelection ? undefined : value\n              }\n              on_type={onTypeAutocompleteHandler}\n              data={\n                !props.data &&\n                !props.dataPath &&\n                autocompleteProps?.mode === 'async'\n                  ? undefined\n                  : data\n              }\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\ntype OptionProps = React.ComponentProps<\n  React.FC<{\n    value: Props['value']\n    error: Error | FormError | undefined\n    help: HelpProps\n    title: React.ReactNode\n    children: React.ReactNode\n    size?: ToggleButtonProps['size'] | RadioProps['size']\n  }>\n>\n\nfunction renderRadioItems({\n  id,\n  value: valueProp,\n  variant,\n  info,\n  warning,\n  htmlAttributes,\n  children,\n  dataList,\n  hasError,\n  iterateOverItems,\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  dataList: Data\n  hasError: ReturnAdditional<Props['value']>['hasError']\n  iterateOverItems?: (item: {\n    value: Props['value']\n    label: Props['children']\n  }) => void\n}) {\n  const optionsCount =\n    React.Children.count(children) + (dataList?.length || 0)\n\n  const createOption = (props: OptionProps, i: number) => {\n    const { value, title, children, error, help, size, ...rest } = props\n\n    const label = title ?? children\n    const suffix = help ? (\n      <HelpButton size=\"small\" title={convertJsxToString(help.title)}>\n        {help.content}\n      </HelpButton>\n    ) : undefined\n\n    iterateOverItems?.({ value, label })\n\n    const Component = (\n      variant === 'radio' ? Radio : ToggleButton\n    ) as typeof Radio & typeof ToggleButton\n\n    return (\n      <Component\n        id={optionsCount === 1 ? id : undefined}\n        key={`option-${i}-${id}`}\n        label={variant === 'radio' ? label : undefined}\n        text={variant === 'button' ? label : undefined}\n        value={String(value ?? valueProp) || undefined}\n        status={\n          (hasError || checkForError([error, info, warning])) && 'error'\n        }\n        suffix={suffix}\n        size={size}\n        {...htmlAttributes}\n        {...rest}\n      />\n    )\n  }\n\n  return [\n    ...(dataList || []).map((props, i) => {\n      return createOption(props as OptionProps, i)\n    }),\n    ...(mapOptions(children, { createOption }) || []),\n  ].filter(Boolean)\n}\n\nexport function mapOptions(\n  children: React.ReactNode,\n  {\n    createOption,\n  }: { createOption: (props: OptionProps, i: number) => React.ReactNode }\n) {\n  return React.Children.map(\n    children,\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            createOption,\n          })\n          return React.cloneElement(child, child.props, nestedChildren)\n        }\n      }\n\n      return child\n    }\n  )\n}\n\nexport function makeOptions<T = DrawerListProps['data']>(\n  children: React.ReactNode,\n  transformSelection?: Props['transformSelection']\n): T {\n  return React.Children.map(children, (child) => {\n    if (child?.['props']?.children?.type === OptionField) {\n      child = child['props'].children\n    }\n\n    if (React.isValidElement(child) && child.type === OptionField) {\n      const props = child.props as OptionFieldProps\n      const title = props.title ?? props.children ?? <em>Untitled</em>\n      const content = props.text ? [title, props.text] : title\n      const selected_value = transformSelection\n        ? transformSelection(props)\n        : undefined\n      const selectedKey = String(props.value ?? '')\n      const disabled = props.disabled\n      const style = props.style\n\n      return { selectedKey, selected_value, content, disabled, style }\n    }\n\n    // For other children, just show them as content\n    if (child) {\n      return {\n        content: child,\n      }\n    }\n  }) as T\n}\n\nfunction renderDropdownItems(\n  data: Data,\n  transformSelection?: Props['transformSelection']\n) {\n  return (\n    data?.map((props) => {\n      const { value, title, text, disabled, style } = props\n      return {\n        selectedKey: value,\n        content: (text ? [title, text] : title) || <em>Untitled</em>,\n        selected_value: transformSelection\n          ? transformSelection(props)\n          : undefined,\n        disabled,\n        style,\n      }\n    }) || []\n  )\n}\n\nSelection._supportsSpacingProps = true\nexport default Selection\n"],"mappings":";;;;;;;AAAA,OAAOA,KAAK,IAAIC,OAAO,EAAEC,WAAW,QAAQ,OAAO;AACnD,OAAOC,UAAU,MAAM,YAAY;AACnC,SACEC,kBAAkB,EAClBC,YAAY,QACP,qCAAqC;AAC5C,SACEC,YAAY,EACZC,QAAQ,EACRC,KAAK,EACLC,YAAY,EACZC,UAAU,QACL,wBAAwB;AAC/B,OAAOC,WAAW,MAAqC,WAAW;AAClE,SAASC,aAAa,QAAQ,aAAa;AAC3C,SAASC,aAAa,QAA0B,2BAA2B;AAC3E,SAASC,gBAAgB,QAAQ,mCAAmC;AACpE,OAAOC,UAAU,MAGV,kBAAkB;AAOzB,SACEC,qBAAqB,QAEhB,+CAA+C;AACtD,OAAOC,YAAY,MAAM,0BAA0B;AAiFnD,SAASC,SAASA,CAACC,KAAY,EAAE;EAAA,IAAAC,qBAAA;EAC/B,MAAMC,UAAU,GAAGpB,OAAO,CAAC,MAAM,gBAAgBI,YAAY,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC;EAEtE,MAAM;IACJiB,EAAE;IACFC,SAAS;IACTC,OAAO,GAAG,UAAU;IACpBC,MAAM,GAAG,UAAU;IACnBC,aAAa,GAAG,UAAU;IAC1BC,WAAW;IACXC,KAAK;IACLC,IAAI;IACJC,OAAO;IACPC,KAAK;IACLC,QAAQ;IACRC,QAAQ;IACRC,IAAI;IACJC,UAAU;IACVC,KAAK,GAAG,OAAO;IACfC,cAAc;IACdC,WAAW;IACXC,YAAY;IACZC,eAAe;IACfC,kBAAkB;IAClBC,IAAI;IACJC,QAAQ;IACRC,QAAQ;IACRC,cAAc;IAGdC,iBAAiB;IACjBC;EACF,CAAC,GAAGnC,aAAa,CAACO,KAAK,CAAC;EAExB,MAAM;IAAE6B;EAAe,CAAC,GAAG/B,YAAY,CAAC,CAAC;EACzC,IAAIgC,QAAQ,GAAGP,IAAI;EACnB,IAAIC,QAAQ,EAAE;IACZM,QAAQ,GAAGD,cAAc,CAACL,QAAQ,CAAC;EACrC;EAEA,MAAMO,sBAAsB,GAAGhD,WAAW,CACxC,CAAC;IAAEwC,IAAI;IAAEd;EAAM,CAAC,KAAK;IAAA,IAAAuB,iBAAA;IACnB,MAAMC,WAAW,IAAAD,iBAAA,GAAGT,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEU,WAAW,cAAAD,iBAAA,cAAAA,iBAAA,GAAIvB,KAAK;IAC9CW,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CACV,CAACa,WAAW,IAAIA,WAAW,KAAK/B,UAAU,GACtCc,UAAU,GACViB,WAAW,EACf;MAAEV;IAAK,CACT,CAAC;EACH,CAAC,EACD,CAACH,YAAY,EAAEJ,UAAU,EAAEd,UAAU,CACvC,CAAC;EAED,MAAMgC,eAAe,GAAGnD,WAAW,CACjC,CAAC;IAAE0B;EAAM,CAAC,KAAK;IACbW,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAGX,KAAK,KAAK0B,SAAS,GAAGnB,UAAU,GAAGP,KAAK,CAAC;EAC1D,CAAC,EACD,CAACW,YAAY,EAAEJ,UAAU,CAC3B,CAAC;EAKD,MAAMoB,UAAU,GAAGrD,WAAW,CAC5B,CAAC;IAAEwC;EAAK,CAAC,KAAK;IACZJ,WAAW,CAAC,IAAI,EAAEI,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEU,WAAW,CAAC;EACtC,CAAC,EACD,CAACd,WAAW,CACd,CAAC;EAED,MAAMkB,UAAU,GAAGtD,WAAW,CAC5B,CAAC;IAAEwC;EAAK,CAAC,KAAK;IACZJ,WAAW,CAAC,KAAK,EAAEI,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEU,WAAW,CAAC;EACvC,CAAC,EACD,CAACd,WAAW,CACd,CAAC;EAED,MAAMmB,EAAE,GAAGtD,UAAU,kEAEoBqB,OAAO,sCACTC,MAAM,+CACGC,aAAa,IAC3DH,SACF,CAAC;EAED,MAAMmC,eAAgC,GAAAC,aAAA;IACpCC,KAAK,EAAEtC,EAAE;IACTC,SAAS,EAAEkC,EAAE;IACbI,oBAAoB,EAAE;EAAI,GACvB/C,gBAAgB,CAACK,KAAK,CAAC,CAC3B;EAED,MAAM2C,MAAM,GAAG3C,KAAK,aAALA,KAAK,wBAAAC,qBAAA,GAALD,KAAK,CAAE2B,iBAAiB,cAAA1B,qBAAA,uBAAxBA,qBAAA,CAA0B0C,MAAM;EAC/C,MAAMC,yBAAyB,GAAG7D,WAAW,CAC1C8D,KAAK,IAAK;IACT,IAAI,OAAOF,MAAM,KAAK,UAAU,EAAE;MAChC,MAAM;QAAElC;MAAM,CAAC,GAAGoC,KAAK;MACvBF,MAAM,CAAAH,aAAA,CAAAA,aAAA,CAAAA,aAAA,KACDK,KAAK,GACLnB,cAAc;QACjBjB,KAAK,EAAEA,KAAK,KAAK,EAAE,GAAGO,UAAU,GAAGP;MAAK,EACzC,CAAC;IACJ;EACF,CAAC,EACD,CAACiB,cAAc,EAAEV,UAAU,EAAE2B,MAAM,CACrC,CAAC;EAED,QAAQtC,OAAO;IACb,KAAK,OAAO;IACZ,KAAK,QAAQ;MAAE;QACb,MAAMyC,SAAS,GACbzC,OAAO,KAAK,OAAO,GAAGhB,KAAK,GAAGF,YACO;QAEvC,MAAM4D,KAAK,GAAGC,gBAAgB,CAAC;UAC7B7C,EAAE;UACFM,KAAK;UACLJ,OAAO;UACPK,IAAI;UACJC,OAAO;UACPO,cAAc;UACdO,QAAQ;UACRK,QAAQ;UACRjB,QAAQ;UACRoC,gBAAgB,EAAEA,CAAC;YAAExC,KAAK,EAAEyC,CAAC;YAAEC;UAAM,CAAC,KAAK;YACzC,IAAID,CAAC,KAAKzC,KAAK,EAAE;cACfY,eAAe,CAAC8B,KAAK,CAAC;YACxB;UACF;QACF,CAAC,CAAC;QAEF,MAAMC,yBAA0C,GAAG;UACjDC,UAAU,EAAExE,KAAK,CAACyE,QAAQ,CAACC,KAAK,CAACR,KAAK,CAAC,GAAG;QAC5C,CAAC;QACD,IAAI,CAAChC,IAAI,EAAE;UACTqC,yBAAyB,CAACI,WAAW,GAAG,OAAO;QACjD;QAEA,OACE3E,KAAA,CAAA4E,aAAA,CAAC7D,UAAU,EAAA8D,QAAA,KAAKnB,eAAe,EAAMa,yBAAyB,GAC5DvE,KAAA,CAAA4E,aAAA,CAACX,SAAS,CAACa,KAAK;UACd5C,IAAI,EAAEA,IAAK;UACXX,SAAS,EAAEkC,EAAG;UACdsB,gBAAgB,EACdrD,aAAa,KAAK,YAAY,GAAG,KAAK,GAAG,QAC1C;UACDO,QAAQ,EAAEA,QAAS;UACnB+C,SAAS,EAAE3B,eAAgB;UAC3BzB,KAAK,EAAEqD,MAAM,CAACrD,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,EAAE,CAAC,IAAI0B;QAAU,GAEvCY,KACc,CACP,CAAC;MAEjB;IAEA,KAAK,cAAc;IACnB,KAAK,UAAU;MAAE;QAAA,IAAAgB,UAAA;QACf,MAAMxC,IAAI,GAAGyC,mBAAmB,CAAClC,QAAQ,EAAER,kBAAkB,CAAC,CAC3D2C,MAAM,CAACC,WAAW,CAACzC,QAAQ,EAAEH,kBAAkB,CAAC,CAAC,CACjD6C,MAAM,CAACC,OAAO,CAAC;QAClB,MAAMC,YAAY,IAAAN,UAAA,GAAGxC,IAAI,CAAC+C,IAAI,CAAEC,IAAI,IAAKA,IAAI,CAACtC,WAAW,KAAKxB,KAAK,CAAC,cAAAsD,UAAA,uBAA/CA,UAAA,CACjBS,OAAO;QACXnD,eAAe,CAACgD,YAAY,CAAC;QAE7B,MAAMI,WAAoD,GAAAjC,aAAA,CAAAA,aAAA;UACxDrC,EAAE;UACFuE,UAAU,EAAE,iCAAiC;UAC7CC,YAAY,EAAE,mCAAmC;UACjDC,KAAK,EAAEpE,WAAW;UAClBC,KAAK,EAAEqD,MAAM,CAACrD,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,EAAE,CAAC;UAC1BoE,MAAM,EACJ,CAAChE,QAAQ,IAAInB,aAAa,CAAC,CAACkB,KAAK,EAAEF,IAAI,EAAEC,OAAO,CAAC,CAAC,KAAK,OAAO;UAChEG;QAAQ,GACLI,cAAc;UACjBK,IAAI;UACJR,IAAI;UACJ8C,SAAS,EAAE9B,sBAAsB;UACjC+C,OAAO,EAAE1C,UAAU;UACnB2C,OAAO,EAAE1C,UAAU;UACnB2C,OAAO,EAAE;QAAI,EACd;QAED,MAAMC,uBAAwC,GAAG;UAC/ChE;QACF,CAAC;QACD,IAAIX,MAAM,KAAK,YAAY,EAAE;UAC3B2E,uBAAuB,CAAChE,KAAK,GAAGkB,SAAS;UACzC8C,uBAAuB,CAACC,YAAY,GAAGjE,KAAK;QAC9C;QAEA,OACEpC,KAAA,CAAA4E,aAAA,CAAC7D,UAAU,EAAA8D,QAAA,KAAKnB,eAAe,EAAM0C,uBAAuB,GACzD5E,OAAO,KAAK,cAAc,GACzBxB,KAAA,CAAA4E,aAAA,CAACnE,YAAY,EAAAoE,QAAA,KACPe,WAAW,EACV9C,iBAAiB,GACjB9B,qBAAqB,CACpBsF,MAAM,CAACC,MAAM,CAACzD,iBAAiB,CACjC,CAAC,GACD,IAAI;UACRlB,KAAK,EACHkB,iBAAiB,aAAjBA,iBAAiB,eAAjBA,iBAAiB,CAAE0D,gBAAgB,GAAGlD,SAAS,GAAG1B,KACnD;UACD6E,OAAO,EAAE1C,yBAA0B;UACnCrB,IAAI,EACF,CAACvB,KAAK,CAACuB,IAAI,IACX,CAACvB,KAAK,CAACwB,QAAQ,IACf,CAAAG,iBAAiB,aAAjBA,iBAAiB,uBAAjBA,iBAAiB,CAAE4D,IAAI,MAAK,OAAO,GAC/BpD,SAAS,GACTZ;QACL,EACF,CAAC,GAEF1C,KAAA,CAAA4E,aAAA,CAACrE,QAAQ,EAAAsE,QAAA,KACHe,WAAW,EACV7C,aAAa,GACb/B,qBAAqB,CACpB+B,aACF,CAAC,GACD,IAAI,CACT,CAEO,CAAC;MAEjB;EACF;AACF;AAaA,SAASoB,gBAAgBA,CAAC;EACxB7C,EAAE;EACFM,KAAK,EAAE+E,SAAS;EAChBnF,OAAO;EACPK,IAAI;EACJC,OAAO;EACPO,cAAc;EACdO,QAAQ;EACRK,QAAQ;EACRjB,QAAQ;EACRoC;AAeF,CAAC,EAAE;EACD,MAAMwC,YAAY,GAChB5G,KAAK,CAACyE,QAAQ,CAACC,KAAK,CAAC9B,QAAQ,CAAC,IAAI,CAAAK,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAE4D,MAAM,KAAI,CAAC,CAAC;EAE1D,MAAMC,YAAY,GAAGA,CAAC3F,KAAkB,EAAE4F,CAAS,KAAK;IACtD,MAAM;QAAEnF,KAAK;QAAEmE,KAAK;QAAEnD,QAAQ;QAAEb,KAAK;QAAEiF,IAAI;QAAE9E;MAAc,CAAC,GAAGf,KAAK;MAAd8F,IAAI,GAAAC,wBAAA,CAAK/F,KAAK,EAAAgG,SAAA;IAEpE,MAAM7C,KAAK,GAAGyB,KAAK,aAALA,KAAK,cAALA,KAAK,GAAInD,QAAQ;IAC/B,MAAMwE,MAAM,GAAGJ,IAAI,GACjBhH,KAAA,CAAA4E,aAAA,CAAClE,UAAU;MAACwB,IAAI,EAAC,OAAO;MAAC6D,KAAK,EAAE3F,kBAAkB,CAAC4G,IAAI,CAACjB,KAAK;IAAE,GAC5DiB,IAAI,CAACrB,OACI,CAAC,GACXrC,SAAS;IAEbc,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAG;MAAExC,KAAK;MAAE0C;IAAM,CAAC,CAAC;IAEpC,MAAML,SAAS,GACbzC,OAAO,KAAK,OAAO,GAAGhB,KAAK,GAAGF,YACO;IAEvC,OACEN,KAAA,CAAA4E,aAAA,CAACX,SAAS,EAAAY,QAAA;MACRvD,EAAE,EAAEsF,YAAY,KAAK,CAAC,GAAGtF,EAAE,GAAGgC,SAAU;MACxC+D,GAAG,EAAE,UAAUN,CAAC,IAAIzF,EAAE,EAAG;MACzBgD,KAAK,EAAE9C,OAAO,KAAK,OAAO,GAAG8C,KAAK,GAAGhB,SAAU;MAC/CgE,IAAI,EAAE9F,OAAO,KAAK,QAAQ,GAAG8C,KAAK,GAAGhB,SAAU;MAC/C1B,KAAK,EAAEqD,MAAM,CAACrD,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI+E,SAAS,CAAC,IAAIrD,SAAU;MAC/C0C,MAAM,EACJ,CAAChE,QAAQ,IAAInB,aAAa,CAAC,CAACkB,KAAK,EAAEF,IAAI,EAAEC,OAAO,CAAC,CAAC,KAAK,OACxD;MACDsF,MAAM,EAAEA,MAAO;MACflF,IAAI,EAAEA;IAAK,GACPG,cAAc,EACd4E,IAAI,CACT,CAAC;EAEN,CAAC;EAED,OAAO,CACL,GAAG,CAAChE,QAAQ,IAAI,EAAE,EAAEsE,GAAG,CAAC,CAACpG,KAAK,EAAE4F,CAAC,KAAK;IACpC,OAAOD,YAAY,CAAC3F,KAAK,EAAiB4F,CAAC,CAAC;EAC9C,CAAC,CAAC,EACF,IAAIS,UAAU,CAAC5E,QAAQ,EAAE;IAAEkE;EAAa,CAAC,CAAC,IAAI,EAAE,CAAC,CAClD,CAACxB,MAAM,CAACC,OAAO,CAAC;AACnB;AAEA,OAAO,SAASiC,UAAUA,CACxB5E,QAAyB,EACzB;EACEkE;AACoE,CAAC,EACvE;EACA,OAAO9G,KAAK,CAACyE,QAAQ,CAAC8C,GAAG,CACvB3E,QAAQ,EACR,CAAC6E,KAAsC,EAAEV,CAAC,KAAK;IAC7C,IAAI/G,KAAK,CAAC0H,cAAc,CAACD,KAAK,CAAC,EAAE;MAC/B,IAAIA,KAAK,CAACE,IAAI,KAAKhH,WAAW,EAAE;QAC9B,OAAOmG,YAAY,CAACW,KAAK,CAACtG,KAAK,EAAE4F,CAAC,CAAC;MACrC;MAEA,IAAIU,KAAK,CAACtG,KAAK,CAACyB,QAAQ,EAAE;QACxB,MAAMgF,cAAc,GAAGJ,UAAU,CAACC,KAAK,CAACtG,KAAK,CAACyB,QAAQ,EAAE;UACtDkE;QACF,CAAC,CAAC;QACF,OAAO9G,KAAK,CAAC6H,YAAY,CAACJ,KAAK,EAAEA,KAAK,CAACtG,KAAK,EAAEyG,cAAc,CAAC;MAC/D;IACF;IAEA,OAAOH,KAAK;EACd,CACF,CAAC;AACH;AAEA,OAAO,SAASpC,WAAWA,CACzBzC,QAAyB,EACzBH,kBAAgD,EAC7C;EACH,OAAOzC,KAAK,CAACyE,QAAQ,CAAC8C,GAAG,CAAC3E,QAAQ,EAAG6E,KAAK,IAAK;IAAA,IAAAK,MAAA,EAAAC,YAAA,EAAAC,qBAAA;IAC7C,IAAI,EAAAF,MAAA,GAAAL,KAAK,cAAAK,MAAA,wBAAAC,YAAA,GAALD,MAAA,CAAQ,OAAO,CAAC,cAAAC,YAAA,wBAAAC,qBAAA,GAAhBD,YAAA,CAAkBnF,QAAQ,cAAAoF,qBAAA,uBAA1BA,qBAAA,CAA4BL,IAAI,MAAKhH,WAAW,EAAE;MACpD8G,KAAK,GAAGA,KAAK,CAAC,OAAO,CAAC,CAAC7E,QAAQ;IACjC;IAEA,IAAI5C,KAAK,CAAC0H,cAAc,CAACD,KAAK,CAAC,IAAIA,KAAK,CAACE,IAAI,KAAKhH,WAAW,EAAE;MAAA,IAAAsH,IAAA,EAAAC,YAAA,EAAAC,YAAA;MAC7D,MAAMhH,KAAK,GAAGsG,KAAK,CAACtG,KAAyB;MAC7C,MAAM4E,KAAK,IAAAkC,IAAA,IAAAC,YAAA,GAAG/G,KAAK,CAAC4E,KAAK,cAAAmC,YAAA,cAAAA,YAAA,GAAI/G,KAAK,CAACyB,QAAQ,cAAAqF,IAAA,cAAAA,IAAA,GAAAG,GAAA,KAAAA,GAAA,GAAIpI,KAAA,CAAA4E,aAAA,aAAI,UAAY,CAAC;MAChE,MAAMe,OAAO,GAAGxE,KAAK,CAACmG,IAAI,GAAG,CAACvB,KAAK,EAAE5E,KAAK,CAACmG,IAAI,CAAC,GAAGvB,KAAK;MACxD,MAAMsC,cAAc,GAAG5F,kBAAkB,GACrCA,kBAAkB,CAACtB,KAAK,CAAC,GACzBmC,SAAS;MACb,MAAMF,WAAW,GAAG6B,MAAM,EAAAkD,YAAA,GAAChH,KAAK,CAACS,KAAK,cAAAuG,YAAA,cAAAA,YAAA,GAAI,EAAE,CAAC;MAC7C,MAAMlG,QAAQ,GAAGd,KAAK,CAACc,QAAQ;MAC/B,MAAMqG,KAAK,GAAGnH,KAAK,CAACmH,KAAK;MAEzB,OAAO;QAAElF,WAAW;QAAEiF,cAAc;QAAE1C,OAAO;QAAE1D,QAAQ;QAAEqG;MAAM,CAAC;IAClE;IAGA,IAAIb,KAAK,EAAE;MACT,OAAO;QACL9B,OAAO,EAAE8B;MACX,CAAC;IACH;EACF,CAAC,CAAC;AACJ;AAEA,SAAStC,mBAAmBA,CAC1BzC,IAAU,EACVD,kBAAgD,EAChD;EACA,OACE,CAAAC,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAE6E,GAAG,CAAEpG,KAAK,IAAK;IACnB,MAAM;MAAES,KAAK;MAAEmE,KAAK;MAAEuB,IAAI;MAAErF,QAAQ;MAAEqG;IAAM,CAAC,GAAGnH,KAAK;IACrD,OAAO;MACLiC,WAAW,EAAExB,KAAK;MAClB+D,OAAO,EAAE,CAAC2B,IAAI,GAAG,CAACvB,KAAK,EAAEuB,IAAI,CAAC,GAAGvB,KAAK,KAAAwC,IAAA,KAAAA,IAAA,GAAKvI,KAAA,CAAA4E,aAAA,aAAI,UAAY,CAAC;MAC5DyD,cAAc,EAAE5F,kBAAkB,GAC9BA,kBAAkB,CAACtB,KAAK,CAAC,GACzBmC,SAAS;MACbrB,QAAQ;MACRqG;IACF,CAAC;EACH,CAAC,CAAC,KAAI,EAAE;AAEZ;AAEApH,SAAS,CAACsH,qBAAqB,GAAG,IAAI;AACtC,eAAetH,SAAS","ignoreList":[]}

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

@@ -35,7 +35,7 @@ export const SelectionProperties = {
     status: 'optional'
   },
   autocompleteProps: {
-    doc: 'Forward any additional props (camelCase) to the [Autocomplete](/uilib/components/autocomplete/) component.',
+    doc: 'Forward any additional props (camelCase) to the [Autocomplete](/uilib/components/autocomplete/) component. `onType` will additionally provide the `value` parameter with `emptyValue` support in addition to the internal `dataContext`.',
     type: 'object',
     status: 'optional'
   },

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

@@ -1 +1 @@
-{"version":3,"file":"SelectionDocs.js","names":["SelectionProperties","variant","doc","type","status","value","transformSelection","optionsLayout","width","data","dataPath","autocompleteProps","dropdownProps","size","children"],"sources":["../../../../../../src/extensions/forms/Field/Selection/SelectionDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const SelectionProperties: PropertiesTableProps = {\n  variant: {\n    doc: 'Choice of UI feature. Can be: `dropdown`, `autocomplete`, `radio` or `button`.',\n    type: 'string',\n    status: 'optional',\n  },\n  value: {\n    doc: 'Defines the `value`. When using variant `radio` or `button`, value has to be a `string`.',\n    type: ['number', 'string'],\n    status: 'optional',\n  },\n  transformSelection: {\n    doc: 'Transform the displayed selection for Dropdown and Autocomplete variant. Use it to display a different value than the one in the data set. The first parameter is the props of the Option component or data item. You can return a React.Node that will be displayed in the selection.',\n    type: 'function',\n    status: 'optional',\n  },\n  optionsLayout: {\n    doc: 'Layout for the list of options. Can be `horizontal` or `vertical`.',\n    type: 'string',\n    status: 'optional',\n  },\n  width: {\n    doc: '`small`, `medium` or `large` for predefined standard widths, `stretch` for fill available width.',\n    type: ['string', 'false'],\n    status: 'optional',\n  },\n  data: {\n    doc: 'Data to be used for the component. The object needs to have a `value` and a `title` property. Provide the Dropdown or Autocomplete data in the format documented here: [Dropdown](/uilib/components/dropdown) and [Autocomplete](/uilib/components/autocomplete) documentation.',\n    type: 'array',\n    status: 'optional',\n  },\n  dataPath: {\n    doc: 'The path to the context data (Form.Handler). The context data object needs to have a `value` and a `title` property. The generated options will be placed above given JSX based children.',\n    type: 'string',\n    status: 'optional',\n  },\n  autocompleteProps: {\n    doc: 'Forward any additional props (camelCase) to the [Autocomplete](/uilib/components/autocomplete/) component.',\n    type: 'object',\n    status: 'optional',\n  },\n  dropdownProps: {\n    doc: 'Forward any additional props (camelCase) to the [Dropdown](/uilib/components/dropdown/) component.',\n    type: 'object',\n    status: 'optional',\n  },\n  size: {\n    doc: 'The sizes you can choose is small (1.5rem), default (2rem), medium (2.5rem) and large (3rem) are supported component sizes. Defaults to default / null. Also, if you define a number like size=\"2\" then it will be forwarded as the input element attribute. Consider rather setting field sizes with [Form.Appearance](/uilib/extensions/forms/Form/Appearance/).',\n    type: 'string',\n    status: 'optional',\n  },\n  children: {\n    doc: 'For providing Option components, and other children.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,mBAAyC,GAAG;EACvDC,OAAO,EAAE;IACPC,GAAG,EAAE,gFAAgF;IACrFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,KAAK,EAAE;IACLH,GAAG,EAAE,0FAA0F;IAC/FC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV,CAAC;EACDE,kBAAkB,EAAE;IAClBJ,GAAG,EAAE,wRAAwR;IAC7RC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDG,aAAa,EAAE;IACbL,GAAG,EAAE,oEAAoE;IACzEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,KAAK,EAAE;IACLN,GAAG,EAAE,kGAAkG;IACvGC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,MAAM,EAAE;EACV,CAAC;EACDK,IAAI,EAAE;IACJP,GAAG,EAAE,iRAAiR;IACtRC,IAAI,EAAE,OAAO;IACbC,MAAM,EAAE;EACV,CAAC;EACDM,QAAQ,EAAE;IACRR,GAAG,EAAE,2LAA2L;IAChMC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDO,iBAAiB,EAAE;IACjBT,GAAG,EAAE,4GAA4G;IACjHC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDQ,aAAa,EAAE;IACbV,GAAG,EAAE,oGAAoG;IACzGC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDS,IAAI,EAAE;IACJX,GAAG,EAAE,oWAAoW;IACzWC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDU,QAAQ,EAAE;IACRZ,GAAG,EAAE,sDAAsD;IAC3DC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV;AACF,CAAC","ignoreList":[]}
+{"version":3,"file":"SelectionDocs.js","names":["SelectionProperties","variant","doc","type","status","value","transformSelection","optionsLayout","width","data","dataPath","autocompleteProps","dropdownProps","size","children"],"sources":["../../../../../../src/extensions/forms/Field/Selection/SelectionDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const SelectionProperties: PropertiesTableProps = {\n  variant: {\n    doc: 'Choice of UI feature. Can be: `dropdown`, `autocomplete`, `radio` or `button`.',\n    type: 'string',\n    status: 'optional',\n  },\n  value: {\n    doc: 'Defines the `value`. When using variant `radio` or `button`, value has to be a `string`.',\n    type: ['number', 'string'],\n    status: 'optional',\n  },\n  transformSelection: {\n    doc: 'Transform the displayed selection for Dropdown and Autocomplete variant. Use it to display a different value than the one in the data set. The first parameter is the props of the Option component or data item. You can return a React.Node that will be displayed in the selection.',\n    type: 'function',\n    status: 'optional',\n  },\n  optionsLayout: {\n    doc: 'Layout for the list of options. Can be `horizontal` or `vertical`.',\n    type: 'string',\n    status: 'optional',\n  },\n  width: {\n    doc: '`small`, `medium` or `large` for predefined standard widths, `stretch` for fill available width.',\n    type: ['string', 'false'],\n    status: 'optional',\n  },\n  data: {\n    doc: 'Data to be used for the component. The object needs to have a `value` and a `title` property. Provide the Dropdown or Autocomplete data in the format documented here: [Dropdown](/uilib/components/dropdown) and [Autocomplete](/uilib/components/autocomplete) documentation.',\n    type: 'array',\n    status: 'optional',\n  },\n  dataPath: {\n    doc: 'The path to the context data (Form.Handler). The context data object needs to have a `value` and a `title` property. The generated options will be placed above given JSX based children.',\n    type: 'string',\n    status: 'optional',\n  },\n  autocompleteProps: {\n    doc: 'Forward any additional props (camelCase) to the [Autocomplete](/uilib/components/autocomplete/) component. `onType` will additionally provide the `value` parameter with `emptyValue` support in addition to the internal `dataContext`.',\n    type: 'object',\n    status: 'optional',\n  },\n  dropdownProps: {\n    doc: 'Forward any additional props (camelCase) to the [Dropdown](/uilib/components/dropdown/) component.',\n    type: 'object',\n    status: 'optional',\n  },\n  size: {\n    doc: 'The sizes you can choose is small (1.5rem), default (2rem), medium (2.5rem) and large (3rem) are supported component sizes. Defaults to default / null. Also, if you define a number like size=\"2\" then it will be forwarded as the input element attribute. Consider rather setting field sizes with [Form.Appearance](/uilib/extensions/forms/Form/Appearance/).',\n    type: 'string',\n    status: 'optional',\n  },\n  children: {\n    doc: 'For providing Option components, and other children.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,mBAAyC,GAAG;EACvDC,OAAO,EAAE;IACPC,GAAG,EAAE,gFAAgF;IACrFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,KAAK,EAAE;IACLH,GAAG,EAAE,0FAA0F;IAC/FC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV,CAAC;EACDE,kBAAkB,EAAE;IAClBJ,GAAG,EAAE,wRAAwR;IAC7RC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDG,aAAa,EAAE;IACbL,GAAG,EAAE,oEAAoE;IACzEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,KAAK,EAAE;IACLN,GAAG,EAAE,kGAAkG;IACvGC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,MAAM,EAAE;EACV,CAAC;EACDK,IAAI,EAAE;IACJP,GAAG,EAAE,iRAAiR;IACtRC,IAAI,EAAE,OAAO;IACbC,MAAM,EAAE;EACV,CAAC;EACDM,QAAQ,EAAE;IACRR,GAAG,EAAE,2LAA2L;IAChMC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDO,iBAAiB,EAAE;IACjBT,GAAG,EAAE,0OAA0O;IAC/OC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDQ,aAAa,EAAE;IACbV,GAAG,EAAE,oGAAoG;IACzGC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDS,IAAI,EAAE;IACJX,GAAG,EAAE,oWAAoW;IACzWC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDU,QAAQ,EAAE;IACRZ,GAAG,EAAE,sDAAsD;IAC3DC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV;AACF,CAAC","ignoreList":[]}

package/es/extensions/forms/FieldBlock/style/dnb-field-block.css

@@ -181,6 +181,11 @@ fieldset.dnb-forms-field-block:not([class*=space__right]) {
   display: flex;
   flex-flow: row;
   column-gap: var(--spacing-small);
+  flex-wrap: wrap;
+  row-gap: var(--spacing-small);
+}
+.dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents > .dnb-forms-field-block--width-stretch {
+  flex: 1;
 }
 @media screen and (min-width: 25.00625em) {
   .dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents {

package/es/extensions/forms/FieldBlock/style/dnb-field-block.min.css

@@ -1 +1 @@
-:root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem;--forms-field-label-max-width--large:60ch}fieldset.dnb-forms-field-block{border:none;padding:0}fieldset.dnb-forms-field-block:not([class*=space__top]){margin-top:0}fieldset.dnb-forms-field-block:not([class*=space__bottom]){margin-bottom:0}fieldset.dnb-forms-field-block:not([class*=space__left]){margin-left:0}fieldset.dnb-forms-field-block:not([class*=space__right]){margin-right:0}.dnb-forms-field-block{--label-margin:0.25rem}.dnb-forms-field-block__grid{display:grid;grid-template-areas:"label" "help" "contents" "indicator" "status";grid-template-columns:minmax(-webkit-min-content,var(--block-content-width,auto));grid-template-columns:minmax(min-content,var(--block-content-width,auto))}.dnb-forms-field-block--label-height-small{--label-margin:0}.dnb-forms-field-block--label-height-medium{--label-margin:0.5rem}.dnb-forms-field-block--label-height-large{--label-margin:0.7rem}.dnb-forms-field-block--width-stretch{flex-grow:1}.dnb-forms-field-block--width-stretch label.dnb-form-label{max-width:none}@media screen and (min-width:25.00625em){.dnb-forms-field-block--width-custom{width:calc(var(--dnb-forms-field-block-width))}.dnb-forms-field-block--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block:not([class*="--content-width"]){--max-width:var(--forms-field-label-max-width--large)}.dnb-forms-field-block__label,.dnb-forms-field-block__label.dnb-form-label{align-items:center;display:flex;grid-area:label;margin-right:0;max-width:var(--forms-field-label-max-width--large)}.dnb-forms-field-block__label.dnb-form-label__content:has(+.dnb-help-button),.dnb-forms-field-block__label.dnb-form-label__description:has(+.dnb-help-button),.dnb-forms-field-block__label__content:has(+.dnb-help-button),.dnb-forms-field-block__label__description:has(+.dnb-help-button){margin-right:.5rem}.dnb-forms-field-block__label.dnb-form-label:has(.dnb-forms-field-block__label__description,.dnb-forms-field-block__label.dnb-form-label__description) .dnb-help-button,.dnb-forms-field-block__label.dnb-form-label:has(.dnb-forms-field-block__label__description,.dnb-forms-field-block__label.dnb-form-label__description):not(.dnb-forms-field-block__label:has(+.dnb-help-button),.dnb-forms-field-block__label.dnb-form-label:has(+.dnb-help-button)) .dnb-forms-field-block__label.dnb-form-label__content,.dnb-forms-field-block__label.dnb-form-label:has(.dnb-forms-field-block__label__description,.dnb-forms-field-block__label.dnb-form-label__description):not(.dnb-forms-field-block__label:has(+.dnb-help-button),.dnb-forms-field-block__label.dnb-form-label:has(+.dnb-help-button)) .dnb-forms-field-block__label__content,.dnb-forms-field-block__label:has(.dnb-forms-field-block__label__description,.dnb-forms-field-block__label.dnb-form-label__description) .dnb-help-button,.dnb-forms-field-block__label:has(.dnb-forms-field-block__label__description,.dnb-forms-field-block__label.dnb-form-label__description):not(.dnb-forms-field-block__label:has(+.dnb-help-button),.dnb-forms-field-block__label.dnb-form-label:has(+.dnb-help-button)) .dnb-forms-field-block__label.dnb-form-label__content,.dnb-forms-field-block__label:has(.dnb-forms-field-block__label__description,.dnb-forms-field-block__label.dnb-form-label__description):not(.dnb-forms-field-block__label:has(+.dnb-help-button),.dnb-forms-field-block__label.dnb-form-label:has(+.dnb-help-button)) .dnb-forms-field-block__label__content{margin-right:.3em}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical{flex-wrap:wrap}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical>.dnb-form-label{margin-bottom:.5rem}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__label{margin-right:1rem}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal>.dnb-form-label{margin-bottom:var(--label-margin);margin-top:var(--label-margin)}@media screen and (max-width:40em){.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal>.dnb-form-label{margin-bottom:calc(var(--label-margin) + .5rem)}}@media screen and (min-width:40.00625em){.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal{grid-template-areas:"label contents" ". help" ". indicator" ". status";grid-template-columns:minmax(var(--dnb-forms-field-block-layout-width-min,-webkit-min-content),var(--dnb-forms-field-block-layout-width-max,-webkit-max-content)) auto;grid-template-columns:minmax(var(--dnb-forms-field-block-layout-width-min,min-content),var(--dnb-forms-field-block-layout-width-max,max-content)) auto}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-help-button__content{--help-button-indent-width:0}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-help-button__content .dnb-section{--rounded-corner:0.25rem;align-self:flex-start}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__contents{align-self:end}}.dnb-forms-field-block__indicator{grid-area:indicator;position:relative}.dnb-forms-field-block__indicator .dnb-forms-submit-indicator__content{position:absolute}.dnb-forms-field-block__help{display:flex;flex-flow:column;grid-area:help}.dnb-forms-field-block__help .dnb-section{margin-bottom:1rem}.dnb-forms-field-block__help .dnb-section>.dnb-p--lead{margin-bottom:.5rem}@media screen and (min-width:40.00625em){.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__help .dnb-section{margin-bottom:0;margin-top:.5rem}}.dnb-forms-field-block__status{grid-area:status}.dnb-forms-field-block__status .dnb-form-status__shell{margin-top:.5rem;max-width:60ch}@media screen and (max-width:15em){.dnb-forms-field-block__status{width:90%}}.dnb-forms-field-block__contents{display:flex;grid-area:contents;width:100%}.dnb-forms-field-block__contents--width-stretch{width:100%}@media screen and (min-width:25.00625em){.dnb-forms-field-block__contents--width-custom{width:calc(var(--dnb-forms-field-block-content-width))}.dnb-forms-field-block__contents--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block__contents--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block__contents--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block__composition--vertical .dnb-forms-field-block__contents{display:flex;flex-flow:column;row-gap:var(--spacing-x-small)}.dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents{column-gap:var(--spacing-small);display:flex;flex-flow:row}@media screen and (min-width:25.00625em){.dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents{align-items:flex-end}.dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents[class*=align-center]{align-items:center}}@media screen and (max-width:25em){.dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents{flex-flow:column;row-gap:var(--spacing-x-small)}.dnb-forms-field-block__composition>.dnb-forms-field-block__grid>.dnb-forms-submit-indicator{display:none}}@media screen and (min-width:25.00625em){.dnb-forms-field-block__composition>.dnb-forms-field-block__grid>.dnb-forms-field-block__contents .dnb-forms-submit-indicator{display:none}}
+:root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem;--forms-field-label-max-width--large:60ch}fieldset.dnb-forms-field-block{border:none;padding:0}fieldset.dnb-forms-field-block:not([class*=space__top]){margin-top:0}fieldset.dnb-forms-field-block:not([class*=space__bottom]){margin-bottom:0}fieldset.dnb-forms-field-block:not([class*=space__left]){margin-left:0}fieldset.dnb-forms-field-block:not([class*=space__right]){margin-right:0}.dnb-forms-field-block{--label-margin:0.25rem}.dnb-forms-field-block__grid{display:grid;grid-template-areas:"label" "help" "contents" "indicator" "status";grid-template-columns:minmax(-webkit-min-content,var(--block-content-width,auto));grid-template-columns:minmax(min-content,var(--block-content-width,auto))}.dnb-forms-field-block--label-height-small{--label-margin:0}.dnb-forms-field-block--label-height-medium{--label-margin:0.5rem}.dnb-forms-field-block--label-height-large{--label-margin:0.7rem}.dnb-forms-field-block--width-stretch{flex-grow:1}.dnb-forms-field-block--width-stretch label.dnb-form-label{max-width:none}@media screen and (min-width:25.00625em){.dnb-forms-field-block--width-custom{width:calc(var(--dnb-forms-field-block-width))}.dnb-forms-field-block--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block:not([class*="--content-width"]){--max-width:var(--forms-field-label-max-width--large)}.dnb-forms-field-block__label,.dnb-forms-field-block__label.dnb-form-label{align-items:center;display:flex;grid-area:label;margin-right:0;max-width:var(--forms-field-label-max-width--large)}.dnb-forms-field-block__label.dnb-form-label__content:has(+.dnb-help-button),.dnb-forms-field-block__label.dnb-form-label__description:has(+.dnb-help-button),.dnb-forms-field-block__label__content:has(+.dnb-help-button),.dnb-forms-field-block__label__description:has(+.dnb-help-button){margin-right:.5rem}.dnb-forms-field-block__label.dnb-form-label:has(.dnb-forms-field-block__label__description,.dnb-forms-field-block__label.dnb-form-label__description) .dnb-help-button,.dnb-forms-field-block__label.dnb-form-label:has(.dnb-forms-field-block__label__description,.dnb-forms-field-block__label.dnb-form-label__description):not(.dnb-forms-field-block__label:has(+.dnb-help-button),.dnb-forms-field-block__label.dnb-form-label:has(+.dnb-help-button)) .dnb-forms-field-block__label.dnb-form-label__content,.dnb-forms-field-block__label.dnb-form-label:has(.dnb-forms-field-block__label__description,.dnb-forms-field-block__label.dnb-form-label__description):not(.dnb-forms-field-block__label:has(+.dnb-help-button),.dnb-forms-field-block__label.dnb-form-label:has(+.dnb-help-button)) .dnb-forms-field-block__label__content,.dnb-forms-field-block__label:has(.dnb-forms-field-block__label__description,.dnb-forms-field-block__label.dnb-form-label__description) .dnb-help-button,.dnb-forms-field-block__label:has(.dnb-forms-field-block__label__description,.dnb-forms-field-block__label.dnb-form-label__description):not(.dnb-forms-field-block__label:has(+.dnb-help-button),.dnb-forms-field-block__label.dnb-form-label:has(+.dnb-help-button)) .dnb-forms-field-block__label.dnb-form-label__content,.dnb-forms-field-block__label:has(.dnb-forms-field-block__label__description,.dnb-forms-field-block__label.dnb-form-label__description):not(.dnb-forms-field-block__label:has(+.dnb-help-button),.dnb-forms-field-block__label.dnb-form-label:has(+.dnb-help-button)) .dnb-forms-field-block__label__content{margin-right:.3em}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical{flex-wrap:wrap}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-vertical>.dnb-form-label{margin-bottom:.5rem}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__label{margin-right:1rem}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal>.dnb-form-label{margin-bottom:var(--label-margin);margin-top:var(--label-margin)}@media screen and (max-width:40em){.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal>.dnb-form-label{margin-bottom:calc(var(--label-margin) + .5rem)}}@media screen and (min-width:40.00625em){.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal{grid-template-areas:"label contents" ". help" ". indicator" ". status";grid-template-columns:minmax(var(--dnb-forms-field-block-layout-width-min,-webkit-min-content),var(--dnb-forms-field-block-layout-width-max,-webkit-max-content)) auto;grid-template-columns:minmax(var(--dnb-forms-field-block-layout-width-min,min-content),var(--dnb-forms-field-block-layout-width-max,max-content)) auto}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-help-button__content{--help-button-indent-width:0}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-help-button__content .dnb-section{--rounded-corner:0.25rem;align-self:flex-start}.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__contents{align-self:end}}.dnb-forms-field-block__indicator{grid-area:indicator;position:relative}.dnb-forms-field-block__indicator .dnb-forms-submit-indicator__content{position:absolute}.dnb-forms-field-block__help{display:flex;flex-flow:column;grid-area:help}.dnb-forms-field-block__help .dnb-section{margin-bottom:1rem}.dnb-forms-field-block__help .dnb-section>.dnb-p--lead{margin-bottom:.5rem}@media screen and (min-width:40.00625em){.dnb-forms-field-block__grid.dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__help .dnb-section{margin-bottom:0;margin-top:.5rem}}.dnb-forms-field-block__status{grid-area:status}.dnb-forms-field-block__status .dnb-form-status__shell{margin-top:.5rem;max-width:60ch}@media screen and (max-width:15em){.dnb-forms-field-block__status{width:90%}}.dnb-forms-field-block__contents{display:flex;grid-area:contents;width:100%}.dnb-forms-field-block__contents--width-stretch{width:100%}@media screen and (min-width:25.00625em){.dnb-forms-field-block__contents--width-custom{width:calc(var(--dnb-forms-field-block-content-width))}.dnb-forms-field-block__contents--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block__contents--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block__contents--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block__composition--vertical .dnb-forms-field-block__contents{display:flex;flex-flow:column;row-gap:var(--spacing-x-small)}.dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents{column-gap:var(--spacing-small);display:flex;flex-flow:row;flex-wrap:wrap;row-gap:var(--spacing-small)}.dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents>.dnb-forms-field-block--width-stretch{flex:1}@media screen and (min-width:25.00625em){.dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents{align-items:flex-end}.dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents[class*=align-center]{align-items:center}}@media screen and (max-width:25em){.dnb-forms-field-block__composition--horizontal .dnb-forms-field-block__contents{flex-flow:column;row-gap:var(--spacing-x-small)}.dnb-forms-field-block__composition>.dnb-forms-field-block__grid>.dnb-forms-submit-indicator{display:none}}@media screen and (min-width:25.00625em){.dnb-forms-field-block__composition>.dnb-forms-field-block__grid>.dnb-forms-field-block__contents .dnb-forms-submit-indicator{display:none}}

package/es/extensions/forms/FieldBlock/style/dnb-field-block.scss

@@ -226,6 +226,13 @@ fieldset.dnb-forms-field-block {
     flex-flow: row;
     column-gap: var(--spacing-small);
 
+    // Support wrapping
+    flex-wrap: wrap;
+    row-gap: var(--spacing-small);
+    & > .dnb-forms-field-block--width-stretch {
+      flex: 1;
+    }
+
     @include allAbove(x-small) {
       align-items: flex-end; // To support fields with labels of different size
 

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

@@ -417,7 +417,7 @@ export default function useFieldProps(localProps, {
       return;
     }
     const hasError = Boolean(localErrorRef.current);
-    revealErrorRef.current = hasError;
+    revealErrorRef.current = true;
     setErrorState(hasError);
   }, [validateInitially, setErrorState]);
   const hideError = useCallback(() => {