@dnb/eufemia 10.72.1 → 10.72.3

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

@@ -92,11 +92,13 @@ function Selection(props) {
   }, pickSpacingProps(props));
   const onType = props === null || props === void 0 ? void 0 : (_props$autocompletePr = props.autocompleteProps) === null || _props$autocompletePr === void 0 ? void 0 : _props$autocompletePr.onType;
   const onTypeAutocompleteHandler = useCallback(event => {
-    const {
-      value
-    } = event;
     if (typeof onType === 'function') {
-      onType(value === undefined ? emptyValue : value, _objectSpread(_objectSpread({}, event), additionalArgs));
+      const {
+        value
+      } = event;
+      onType(_objectSpread(_objectSpread(_objectSpread({}, event), additionalArgs), {}, {
+        value: value === '' ? emptyValue : value
+      }));
     }
   }, [additionalArgs, emptyValue, onType]);
   switch (variant) {

package/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","_ref","_data$selectedKey","selectedKey","onChangeHandler","_ref2","undefined","handleShow","_ref3","handleHide","_ref4","cn","fieldBlockProps","_objectSpread","forId","disableStatusSummary","onType","onTypeAutocompleteHandler","event","Component","items","renderRadioItems","iterateOverItems","_ref5","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","_ref6","valueProp","optionsCount","length","createOption","i","help","rest","_objectWithoutProperties","_excluded","suffix","key","text","map","mapOptions","_ref7","child","isValidElement","type","nestedChildren","cloneElement","_child","_child$props","_child$props$children","_ref8","_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","_ref","_data$selectedKey","selectedKey","onChangeHandler","_ref2","undefined","handleShow","_ref3","handleHide","_ref4","cn","fieldBlockProps","_objectSpread","forId","disableStatusSummary","onType","onTypeAutocompleteHandler","event","Component","items","renderRadioItems","iterateOverItems","_ref5","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","_ref6","valueProp","optionsCount","length","createOption","i","help","rest","_objectWithoutProperties","_excluded","suffix","key","text","map","mapOptions","_ref7","child","isValidElement","type","nestedChildren","cloneElement","_child","_child$props","_child$props$children","_ref8","_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,CACxCiD,IAAA,IAAqB;IAAA,IAAAC,iBAAA;IAAA,IAApB;MAAEV,IAAI;MAAEd;IAAM,CAAC,GAAAuB,IAAA;IACd,MAAME,WAAW,IAAAD,iBAAA,GAAGV,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEW,WAAW,cAAAD,iBAAA,cAAAA,iBAAA,GAAIxB,KAAK;IAC9CW,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CACV,CAACc,WAAW,IAAIA,WAAW,KAAKhC,UAAU,GACtCc,UAAU,GACVkB,WAAW,EACf;MAAEX;IAAK,CACT,CAAC;EACH,CAAC,EACD,CAACH,YAAY,EAAEJ,UAAU,EAAEd,UAAU,CACvC,CAAC;EAED,MAAMiC,eAAe,GAAGpD,WAAW,CACjCqD,KAAA,IAAe;IAAA,IAAd;MAAE3B;IAAM,CAAC,GAAA2B,KAAA;IACRhB,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAGX,KAAK,KAAK4B,SAAS,GAAGrB,UAAU,GAAGP,KAAK,CAAC;EAC1D,CAAC,EACD,CAACW,YAAY,EAAEJ,UAAU,CAC3B,CAAC;EAKD,MAAMsB,UAAU,GAAGvD,WAAW,CAC5BwD,KAAA,IAAc;IAAA,IAAb;MAAEhB;IAAK,CAAC,GAAAgB,KAAA;IACPpB,WAAW,CAAC,IAAI,EAAEI,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEW,WAAW,CAAC;EACtC,CAAC,EACD,CAACf,WAAW,CACd,CAAC;EAED,MAAMqB,UAAU,GAAGzD,WAAW,CAC5B0D,KAAA,IAAc;IAAA,IAAb;MAAElB;IAAK,CAAC,GAAAkB,KAAA;IACPtB,WAAW,CAAC,KAAK,EAAEI,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEW,WAAW,CAAC;EACvC,CAAC,EACD,CAACf,WAAW,CACd,CAAC;EAED,MAAMuB,EAAE,GAAG1D,UAAU,kEAEoBqB,OAAO,sCACTC,MAAM,+CACGC,aAAa,IAC3DH,SACF,CAAC;EAED,MAAMuC,eAAgC,GAAAC,aAAA;IACpCC,KAAK,EAAE1C,EAAE;IACTC,SAAS,EAAEsC,EAAE;IACbI,oBAAoB,EAAE;EAAI,GACvBnD,gBAAgB,CAACK,KAAK,CAAC,CAC3B;EAED,MAAM+C,MAAM,GAAG/C,KAAK,aAALA,KAAK,wBAAAC,qBAAA,GAALD,KAAK,CAAE2B,iBAAiB,cAAA1B,qBAAA,uBAAxBA,qBAAA,CAA0B8C,MAAM;EAC/C,MAAMC,yBAAyB,GAAGjE,WAAW,CAC1CkE,KAAK,IAAK;IACT,IAAI,OAAOF,MAAM,KAAK,UAAU,EAAE;MAChC,MAAM;QAAEtC;MAAM,CAAC,GAAGwC,KAAK;MACvBF,MAAM,CAAAH,aAAA,CAAAA,aAAA,CAAAA,aAAA,KACDK,KAAK,GACLvB,cAAc;QACjBjB,KAAK,EAAEA,KAAK,KAAK,EAAE,GAAGO,UAAU,GAAGP;MAAK,EACzC,CAAC;IACJ;EACF,CAAC,EACD,CAACiB,cAAc,EAAEV,UAAU,EAAE+B,MAAM,CACrC,CAAC;EAED,QAAQ1C,OAAO;IACb,KAAK,OAAO;IACZ,KAAK,QAAQ;MAAE;QACb,MAAM6C,SAAS,GACb7C,OAAO,KAAK,OAAO,GAAGhB,KAAK,GAAGF,YACO;QAEvC,MAAMgE,KAAK,GAAGC,gBAAgB,CAAC;UAC7BjD,EAAE;UACFM,KAAK;UACLJ,OAAO;UACPK,IAAI;UACJC,OAAO;UACPO,cAAc;UACdO,QAAQ;UACRK,QAAQ;UACRjB,QAAQ;UACRwC,gBAAgB,EAAEC,KAAA,IAAyB;YAAA,IAAxB;cAAE7C,KAAK,EAAE8C,CAAC;cAAEC;YAAM,CAAC,GAAAF,KAAA;YACpC,IAAIC,CAAC,KAAK9C,KAAK,EAAE;cACfY,eAAe,CAACmC,KAAK,CAAC;YACxB;UACF;QACF,CAAC,CAAC;QAEF,MAAMC,yBAA0C,GAAG;UACjDC,UAAU,EAAE7E,KAAK,CAAC8E,QAAQ,CAACC,KAAK,CAACT,KAAK,CAAC,GAAG;QAC5C,CAAC;QACD,IAAI,CAACpC,IAAI,EAAE;UACT0C,yBAAyB,CAACI,WAAW,GAAG,OAAO;QACjD;QAEA,OACEhF,KAAA,CAAAiF,aAAA,CAAClE,UAAU,EAAAmE,QAAA,KAAKpB,eAAe,EAAMc,yBAAyB,GAC5D5E,KAAA,CAAAiF,aAAA,CAACZ,SAAS,CAACc,KAAK;UACdjD,IAAI,EAAEA,IAAK;UACXX,SAAS,EAAEsC,EAAG;UACduB,gBAAgB,EACd1D,aAAa,KAAK,YAAY,GAAG,KAAK,GAAG,QAC1C;UACDO,QAAQ,EAAEA,QAAS;UACnBoD,SAAS,EAAE/B,eAAgB;UAC3B1B,KAAK,EAAE0D,MAAM,CAAC1D,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,EAAE,CAAC,IAAI4B;QAAU,GAEvCc,KACc,CACP,CAAC;MAEjB;IAEA,KAAK,cAAc;IACnB,KAAK,UAAU;MAAE;QAAA,IAAAiB,UAAA;QACf,MAAM7C,IAAI,GAAG8C,mBAAmB,CAACvC,QAAQ,EAAER,kBAAkB,CAAC,CAC3DgD,MAAM,CAACC,WAAW,CAAC9C,QAAQ,EAAEH,kBAAkB,CAAC,CAAC,CACjDkD,MAAM,CAACC,OAAO,CAAC;QAClB,MAAMC,YAAY,IAAAN,UAAA,GAAG7C,IAAI,CAACoD,IAAI,CAAEC,IAAI,IAAKA,IAAI,CAAC1C,WAAW,KAAKzB,KAAK,CAAC,cAAA2D,UAAA,uBAA/CA,UAAA,CACjBS,OAAO;QACXxD,eAAe,CAACqD,YAAY,CAAC;QAE7B,MAAMI,WAAoD,GAAAlC,aAAA,CAAAA,aAAA;UACxDzC,EAAE;UACF4E,UAAU,EAAE,iCAAiC;UAC7CC,YAAY,EAAE,mCAAmC;UACjDC,KAAK,EAAEzE,WAAW;UAClBC,KAAK,EAAE0D,MAAM,CAAC1D,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,EAAE,CAAC;UAC1ByE,MAAM,EACJ,CAACrE,QAAQ,IAAInB,aAAa,CAAC,CAACkB,KAAK,EAAEF,IAAI,EAAEC,OAAO,CAAC,CAAC,KAAK,OAAO;UAChEG;QAAQ,GACLI,cAAc;UACjBK,IAAI;UACJR,IAAI;UACJmD,SAAS,EAAEnC,sBAAsB;UACjCoD,OAAO,EAAE7C,UAAU;UACnB8C,OAAO,EAAE5C,UAAU;UACnB6C,OAAO,EAAE;QAAI,EACd;QAED,MAAMC,uBAAwC,GAAG;UAC/CrE;QACF,CAAC;QACD,IAAIX,MAAM,KAAK,YAAY,EAAE;UAC3BgF,uBAAuB,CAACrE,KAAK,GAAGoB,SAAS;UACzCiD,uBAAuB,CAACC,YAAY,GAAGtE,KAAK;QAC9C;QAEA,OACEpC,KAAA,CAAAiF,aAAA,CAAClE,UAAU,EAAAmE,QAAA,KAAKpB,eAAe,EAAM2C,uBAAuB,GACzDjF,OAAO,KAAK,cAAc,GACzBxB,KAAA,CAAAiF,aAAA,CAACxE,YAAY,EAAAyE,QAAA,KACPe,WAAW,EACVnD,iBAAiB,GACjB9B,qBAAqB,CACpB2F,MAAM,CAACC,MAAM,CAAC9D,iBAAiB,CACjC,CAAC,GACD,IAAI;UACRlB,KAAK,EACHkB,iBAAiB,aAAjBA,iBAAiB,eAAjBA,iBAAiB,CAAE+D,gBAAgB,GAAGrD,SAAS,GAAG5B,KACnD;UACDkF,OAAO,EAAE3C,yBAA0B;UACnCzB,IAAI,EACF,CAACvB,KAAK,CAACuB,IAAI,IACX,CAACvB,KAAK,CAACwB,QAAQ,IACf,CAAAG,iBAAiB,aAAjBA,iBAAiB,uBAAjBA,iBAAiB,CAAEiE,IAAI,MAAK,OAAO,GAC/BvD,SAAS,GACTd;QACL,EACF,CAAC,GAEF1C,KAAA,CAAAiF,aAAA,CAAC1E,QAAQ,EAAA2E,QAAA,KACHe,WAAW,EACVlD,aAAa,GACb/B,qBAAqB,CACpB+B,aACF,CAAC,GACD,IAAI,CACT,CAEO,CAAC;MAEjB;EACF;AACF;AAaA,SAASwB,gBAAgBA,CAAAyC,KAAA,EAyBtB;EAAA,IAzBuB;IACxB1F,EAAE;IACFM,KAAK,EAAEqF,SAAS;IAChBzF,OAAO;IACPK,IAAI;IACJC,OAAO;IACPO,cAAc;IACdO,QAAQ;IACRK,QAAQ;IACRjB,QAAQ;IACRwC;EAeF,CAAC,GAAAwC,KAAA;EACC,MAAME,YAAY,GAChBlH,KAAK,CAAC8E,QAAQ,CAACC,KAAK,CAACnC,QAAQ,CAAC,IAAI,CAAAK,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAEkE,MAAM,KAAI,CAAC,CAAC;EAE1D,MAAMC,YAAY,GAAGA,CAACjG,KAAkB,EAAEkG,CAAS,KAAK;IACtD,MAAM;QAAEzF,KAAK;QAAEwE,KAAK;QAAExD,QAAQ;QAAEb,KAAK;QAAEuF,IAAI;QAAEpF;MAAc,CAAC,GAAGf,KAAK;MAAdoG,IAAI,GAAAC,wBAAA,CAAKrG,KAAK,EAAAsG,SAAA;IAEpE,MAAM9C,KAAK,GAAGyB,KAAK,aAALA,KAAK,cAALA,KAAK,GAAIxD,QAAQ;IAC/B,MAAM8E,MAAM,GAAGJ,IAAI,GACjBtH,KAAA,CAAAiF,aAAA,CAACvE,UAAU;MAACwB,IAAI,EAAC,OAAO;MAACkE,KAAK,EAAEhG,kBAAkB,CAACkH,IAAI,CAAClB,KAAK;IAAE,GAC5DkB,IAAI,CAACtB,OACI,CAAC,GACXxC,SAAS;IAEbgB,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAG;MAAE5C,KAAK;MAAE+C;IAAM,CAAC,CAAC;IAEpC,MAAMN,SAAS,GACb7C,OAAO,KAAK,OAAO,GAAGhB,KAAK,GAAGF,YACO;IAEvC,OACEN,KAAA,CAAAiF,aAAA,CAACZ,SAAS,EAAAa,QAAA;MACR5D,EAAE,EAAE4F,YAAY,KAAK,CAAC,GAAG5F,EAAE,GAAGkC,SAAU;MACxCmE,GAAG,EAAE,UAAUN,CAAC,IAAI/F,EAAE,EAAG;MACzBqD,KAAK,EAAEnD,OAAO,KAAK,OAAO,GAAGmD,KAAK,GAAGnB,SAAU;MAC/CoE,IAAI,EAAEpG,OAAO,KAAK,QAAQ,GAAGmD,KAAK,GAAGnB,SAAU;MAC/C5B,KAAK,EAAE0D,MAAM,CAAC1D,KAAK,aAALA,KAAK,cAALA,KAAK,GAAIqF,SAAS,CAAC,IAAIzD,SAAU;MAC/C6C,MAAM,EACJ,CAACrE,QAAQ,IAAInB,aAAa,CAAC,CAACkB,KAAK,EAAEF,IAAI,EAAEC,OAAO,CAAC,CAAC,KAAK,OACxD;MACD4F,MAAM,EAAEA,MAAO;MACfxF,IAAI,EAAEA;IAAK,GACPG,cAAc,EACdkF,IAAI,CACT,CAAC;EAEN,CAAC;EAED,OAAO,CACL,GAAG,CAACtE,QAAQ,IAAI,EAAE,EAAE4E,GAAG,CAAC,CAAC1G,KAAK,EAAEkG,CAAC,KAAK;IACpC,OAAOD,YAAY,CAACjG,KAAK,EAAiBkG,CAAC,CAAC;EAC9C,CAAC,CAAC,EACF,IAAIS,UAAU,CAAClF,QAAQ,EAAE;IAAEwE;EAAa,CAAC,CAAC,IAAI,EAAE,CAAC,CAClD,CAACzB,MAAM,CAACC,OAAO,CAAC;AACnB;AAEA,OAAO,SAASkC,UAAUA,CACxBlF,QAAyB,EAAAmF,KAAA,EAIzB;EAAA,IAHA;IACEX;EACoE,CAAC,GAAAW,KAAA;EAEvE,OAAO/H,KAAK,CAAC8E,QAAQ,CAAC+C,GAAG,CACvBjF,QAAQ,EACR,CAACoF,KAAsC,EAAEX,CAAC,KAAK;IAC7C,IAAIrH,KAAK,CAACiI,cAAc,CAACD,KAAK,CAAC,EAAE;MAC/B,IAAIA,KAAK,CAACE,IAAI,KAAKvH,WAAW,EAAE;QAC9B,OAAOyG,YAAY,CAACY,KAAK,CAAC7G,KAAK,EAAEkG,CAAC,CAAC;MACrC;MAEA,IAAIW,KAAK,CAAC7G,KAAK,CAACyB,QAAQ,EAAE;QACxB,MAAMuF,cAAc,GAAGL,UAAU,CAACE,KAAK,CAAC7G,KAAK,CAACyB,QAAQ,EAAE;UACtDwE;QACF,CAAC,CAAC;QACF,OAAOpH,KAAK,CAACoI,YAAY,CAACJ,KAAK,EAAEA,KAAK,CAAC7G,KAAK,EAAEgH,cAAc,CAAC;MAC/D;IACF;IAEA,OAAOH,KAAK;EACd,CACF,CAAC;AACH;AAEA,OAAO,SAAStC,WAAWA,CACzB9C,QAAyB,EACzBH,kBAAgD,EAC7C;EACH,OAAOzC,KAAK,CAAC8E,QAAQ,CAAC+C,GAAG,CAACjF,QAAQ,EAAGoF,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,CAAkB1F,QAAQ,cAAA2F,qBAAA,uBAA1BA,qBAAA,CAA4BL,IAAI,MAAKvH,WAAW,EAAE;MACpDqH,KAAK,GAAGA,KAAK,CAAC,OAAO,CAAC,CAACpF,QAAQ;IACjC;IAEA,IAAI5C,KAAK,CAACiI,cAAc,CAACD,KAAK,CAAC,IAAIA,KAAK,CAACE,IAAI,KAAKvH,WAAW,EAAE;MAAA,IAAA6H,KAAA,EAAAC,YAAA,EAAAC,YAAA;MAC7D,MAAMvH,KAAK,GAAG6G,KAAK,CAAC7G,KAAyB;MAC7C,MAAMiF,KAAK,IAAAoC,KAAA,IAAAC,YAAA,GAAGtH,KAAK,CAACiF,KAAK,cAAAqC,YAAA,cAAAA,YAAA,GAAItH,KAAK,CAACyB,QAAQ,cAAA4F,KAAA,cAAAA,KAAA,GAAAG,GAAA,KAAAA,GAAA,GAAI3I,KAAA,CAAAiF,aAAA,aAAI,UAAY,CAAC;MAChE,MAAMe,OAAO,GAAG7E,KAAK,CAACyG,IAAI,GAAG,CAACxB,KAAK,EAAEjF,KAAK,CAACyG,IAAI,CAAC,GAAGxB,KAAK;MACxD,MAAMwC,cAAc,GAAGnG,kBAAkB,GACrCA,kBAAkB,CAACtB,KAAK,CAAC,GACzBqC,SAAS;MACb,MAAMH,WAAW,GAAGiC,MAAM,EAAAoD,YAAA,GAACvH,KAAK,CAACS,KAAK,cAAA8G,YAAA,cAAAA,YAAA,GAAI,EAAE,CAAC;MAC7C,MAAMzG,QAAQ,GAAGd,KAAK,CAACc,QAAQ;MAC/B,MAAM4G,KAAK,GAAG1H,KAAK,CAAC0H,KAAK;MAEzB,OAAO;QAAExF,WAAW;QAAEuF,cAAc;QAAE5C,OAAO;QAAE/D,QAAQ;QAAE4G;MAAM,CAAC;IAClE;IAGA,IAAIb,KAAK,EAAE;MACT,OAAO;QACLhC,OAAO,EAAEgC;MACX,CAAC;IACH;EACF,CAAC,CAAC;AACJ;AAEA,SAASxC,mBAAmBA,CAC1B9C,IAAU,EACVD,kBAAgD,EAChD;EACA,OACE,CAAAC,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEmF,GAAG,CAAE1G,KAAK,IAAK;IACnB,MAAM;MAAES,KAAK;MAAEwE,KAAK;MAAEwB,IAAI;MAAE3F,QAAQ;MAAE4G;IAAM,CAAC,GAAG1H,KAAK;IACrD,OAAO;MACLkC,WAAW,EAAEzB,KAAK;MAClBoE,OAAO,EAAE,CAAC4B,IAAI,GAAG,CAACxB,KAAK,EAAEwB,IAAI,CAAC,GAAGxB,KAAK,KAAA0C,IAAA,KAAAA,IAAA,GAAK9I,KAAA,CAAAiF,aAAA,aAAI,UAAY,CAAC;MAC5D2D,cAAc,EAAEnG,kBAAkB,GAC9BA,kBAAkB,CAACtB,KAAK,CAAC,GACzBqC,SAAS;MACbvB,QAAQ;MACR4G;IACF,CAAC;EACH,CAAC,CAAC,KAAI,EAAE;AAEZ;AAEA3H,SAAS,CAAC6H,qBAAqB,GAAG,IAAI;AACtC,eAAe7H,SAAS","ignoreList":[]}

package/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/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/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/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/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/extensions/forms/hooks/useFieldProps.js

@@ -427,7 +427,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(() => {