@dnb/eufemia 10.54.1 → 10.55.0

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

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

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { FieldBlockWidth, FieldHelpProps, FieldProps, Path } from '../../types';
+import { FieldBlockWidth } from '../../FieldBlock';
+import { FieldHelpProps, FieldProps, Path } from '../../types';
 import { SliderProps } from '../../../../components/Slider';
 export type SliderVisibilityEvent = React.MouseEvent<HTMLButtonElement> & {
     value: string;

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

@@ -38,13 +38,7 @@ function SliderComponent(props) {
     min = 0,
     max = 100,
     width = 'stretch',
-    layout,
-    label,
     help,
-    labelDescription,
-    info,
-    warning,
-    error,
     hasError,
     disabled,
     vertical,
@@ -85,13 +79,6 @@ function SliderComponent(props) {
   }, [handleChange, props.paths]);
   const fieldBlockProps = _objectSpread({
     forId: id,
-    layout,
-    label,
-    labelDescription,
-    info,
-    warning,
-    error,
-    disabled,
     width
   }, pickSpacingProps(props));
   const sliderProps = {

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","names":["React","useCallback","useContext","useMemo","useRef","FieldBlock","useFieldProps","getFormattedNumber","Slider","pickSpacingProps","HelpButton","DataContext","useDataValue","SliderComponent","props","_ref","_props$paths","dataContextRef","current","getSourceValue","getValues","source","Array","isArray","map","s","value","paths","path","preparedProps","_objectSpread","step","min","max","id","width","layout","label","help","labelDescription","info","warning","error","hasError","disabled","vertical","reverse","hideButtons","multiThumbBehavior","thumbTitle","subtractTitle","addTitle","numberFormat","tooltip","alwaysShowTooltip","extensions","handleChange","handleFocus","handleBlur","setDisplayValue","omitMultiplePathWarning","number","handleLocalChange","forEach","i","updateDataValue","fieldBlockProps","forId","sliderProps","status","undefined","suffix","createElement","title","content","on_change","on_drag_start","on_drag_end","stretch","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Slider/Slider.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo, useRef } from 'react'\nimport FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport {\n  FieldBlockWidth,\n  FieldHelpProps,\n  FieldProps,\n  Path,\n} from '../../types'\nimport { getFormattedNumber } from '../../../../components/slider/SliderHelpers'\nimport Slider, { SliderProps } from '../../../../components/Slider'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { HelpButton } from '../../../../components'\nimport DataContext, { ContextState } from '../../DataContext/Context'\nimport useDataValue from '../../hooks/useDataValue'\n\nexport type SliderVisibilityEvent = React.MouseEvent<HTMLButtonElement> & {\n  value: string\n}\n\nexport type SliderValue = number | Array<number>\nexport type Props = FieldHelpProps &\n  FieldProps<SliderValue> & {\n    /**\n     * Define an array with JSON Pointers for multiple thumb buttons.\n     */\n    paths?: Array<Path>\n    step?: SliderProps['step'] | Path\n    min?: SliderProps['min'] | Path\n    max?: SliderProps['max'] | Path\n    vertical?: SliderProps['vertical']\n    reverse?: SliderProps['reverse']\n    hideButtons?: SliderProps['hideButtons']\n    multiThumbBehavior?: SliderProps['multiThumbBehavior']\n    thumbTitle?: SliderProps['thumbTitle']\n    subtractTitle?: SliderProps['subtractTitle']\n    addTitle?: SliderProps['addTitle']\n    numberFormat?: SliderProps['numberFormat']\n    tooltip?: SliderProps['tooltip']\n    alwaysShowTooltip?: SliderProps['alwaysShowTooltip']\n    extensions?: SliderProps['extensions']\n\n    /** Styling */\n    width?: FieldBlockWidth\n  }\n\nfunction SliderComponent(props: Props) {\n  const dataContextRef = useRef<ContextState>()\n  dataContextRef.current = useContext<ContextState>(DataContext)\n\n  const { getSourceValue } = useDataValue()\n  const getValues = useCallback(\n    (source: SliderValue | Path | Array<Path>) => {\n      if (Array.isArray(source)) {\n        return source.map((s) => getSourceValue(s) || 0)\n      }\n\n      return getSourceValue(source) || 0\n    },\n    [getSourceValue]\n  )\n\n  const value = getValues(props.paths ?? props.path ?? props.value)\n  const preparedProps = {\n    ...props,\n    step: getSourceValue(props.step),\n    min: getSourceValue(props.min),\n    max: getSourceValue(props.max),\n  }\n\n  const {\n    id,\n    path,\n    step = 1,\n    min = 0,\n    max = 100,\n    width = 'stretch',\n    layout,\n    label,\n    help,\n    labelDescription,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    vertical,\n    reverse,\n    hideButtons,\n    multiThumbBehavior,\n    thumbTitle,\n    subtractTitle,\n    addTitle,\n    numberFormat,\n    tooltip,\n    alwaysShowTooltip,\n    extensions,\n    handleChange,\n    handleFocus,\n    handleBlur,\n    setDisplayValue,\n  } = useFieldProps(preparedProps, {\n    omitMultiplePathWarning: true,\n  })\n\n  useMemo(() => {\n    if (path && numberFormat) {\n      const { number } = getFormattedNumber(value, numberFormat)\n      setDisplayValue(path, number)\n    }\n  }, [numberFormat, path, setDisplayValue, value])\n\n  const handleLocalChange = useCallback(\n    ({ value }: { value: number | number[] }) => {\n      if (Array.isArray(props.paths) && Array.isArray(value)) {\n        value.forEach((value, i) => {\n          dataContextRef.current.updateDataValue(props.paths[i], value)\n        })\n      }\n\n      handleChange?.(value)\n    },\n    [handleChange, props.paths]\n  )\n\n  const fieldBlockProps: FieldBlockProps = {\n    forId: id,\n    layout,\n    label,\n    labelDescription,\n    info,\n    warning,\n    error,\n    disabled,\n    width,\n    ...pickSpacingProps(props),\n  }\n\n  const sliderProps: SliderProps = {\n    value,\n    step,\n    min,\n    max,\n    disabled,\n    status: hasError ? 'error' : undefined,\n    suffix: help ? (\n      <HelpButton title={help.title}>{help.content}</HelpButton>\n    ) : undefined,\n    on_change: handleLocalChange,\n    on_drag_start: handleFocus,\n    on_drag_end: handleBlur,\n    vertical,\n    reverse,\n    hideButtons,\n    multiThumbBehavior,\n    thumbTitle,\n    subtractTitle,\n    addTitle,\n    numberFormat,\n    tooltip,\n    alwaysShowTooltip,\n    extensions,\n    stretch: true,\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps}>\n      <Slider {...sliderProps} />\n    </FieldBlock>\n  )\n}\n\nexport default SliderComponent\n\nSliderComponent._supportsSpacingProps = true\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AACvE,OAAOC,UAAU,MAAoC,kBAAkB;AACvE,SAASC,aAAa,QAAQ,aAAa;AAO3C,SAASC,kBAAkB,QAAQ,6CAA6C;AAChF,OAAOC,MAAM,MAAuB,+BAA+B;AACnE,SAASC,gBAAgB,QAAQ,mCAAmC;AACpE,SAASC,UAAU,QAAQ,wBAAwB;AACnD,OAAOC,WAAW,MAAwB,2BAA2B;AACrE,OAAOC,YAAY,MAAM,0BAA0B;AAgCnD,SAASC,eAAeA,CAACC,KAAY,EAAE;EAAA,IAAAC,IAAA,EAAAC,YAAA;EACrC,MAAMC,cAAc,GAAGb,MAAM,CAAe,CAAC;EAC7Ca,cAAc,CAACC,OAAO,GAAGhB,UAAU,CAAeS,WAAW,CAAC;EAE9D,MAAM;IAAEQ;EAAe,CAAC,GAAGP,YAAY,CAAC,CAAC;EACzC,MAAMQ,SAAS,GAAGnB,WAAW,CAC1BoB,MAAwC,IAAK;IAC5C,IAAIC,KAAK,CAACC,OAAO,CAACF,MAAM,CAAC,EAAE;MACzB,OAAOA,MAAM,CAACG,GAAG,CAAEC,CAAC,IAAKN,cAAc,CAACM,CAAC,CAAC,IAAI,CAAC,CAAC;IAClD;IAEA,OAAON,cAAc,CAACE,MAAM,CAAC,IAAI,CAAC;EACpC,CAAC,EACD,CAACF,cAAc,CACjB,CAAC;EAED,MAAMO,KAAK,GAAGN,SAAS,EAAAL,IAAA,IAAAC,YAAA,GAACF,KAAK,CAACa,KAAK,cAAAX,YAAA,cAAAA,YAAA,GAAIF,KAAK,CAACc,IAAI,cAAAb,IAAA,cAAAA,IAAA,GAAID,KAAK,CAACY,KAAK,CAAC;EACjE,MAAMG,aAAa,GAAAC,aAAA,CAAAA,aAAA,KACdhB,KAAK;IACRiB,IAAI,EAAEZ,cAAc,CAACL,KAAK,CAACiB,IAAI,CAAC;IAChCC,GAAG,EAAEb,cAAc,CAACL,KAAK,CAACkB,GAAG,CAAC;IAC9BC,GAAG,EAAEd,cAAc,CAACL,KAAK,CAACmB,GAAG;EAAC,EAC/B;EAED,MAAM;IACJC,EAAE;IACFN,IAAI;IACJG,IAAI,GAAG,CAAC;IACRC,GAAG,GAAG,CAAC;IACPC,GAAG,GAAG,GAAG;IACTE,KAAK,GAAG,SAAS;IACjBC,MAAM;IACNC,KAAK;IACLC,IAAI;IACJC,gBAAgB;IAChBC,IAAI;IACJC,OAAO;IACPC,KAAK;IACLC,QAAQ;IACRC,QAAQ;IACRC,QAAQ;IACRC,OAAO;IACPC,WAAW;IACXC,kBAAkB;IAClBC,UAAU;IACVC,aAAa;IACbC,QAAQ;IACRC,YAAY;IACZC,OAAO;IACPC,iBAAiB;IACjBC,UAAU;IACVC,YAAY;IACZC,WAAW;IACXC,UAAU;IACVC;EACF,CAAC,GAAGrD,aAAa,CAACuB,aAAa,EAAE;IAC/B+B,uBAAuB,EAAE;EAC3B,CAAC,CAAC;EAEFzD,OAAO,CAAC,MAAM;IACZ,IAAIyB,IAAI,IAAIwB,YAAY,EAAE;MACxB,MAAM;QAAES;MAAO,CAAC,GAAGtD,kBAAkB,CAACmB,KAAK,EAAE0B,YAAY,CAAC;MAC1DO,eAAe,CAAC/B,IAAI,EAAEiC,MAAM,CAAC;IAC/B;EACF,CAAC,EAAE,CAACT,YAAY,EAAExB,IAAI,EAAE+B,eAAe,EAAEjC,KAAK,CAAC,CAAC;EAEhD,MAAMoC,iBAAiB,GAAG7D,WAAW,CACnC,CAAC;IAAEyB;EAAoC,CAAC,KAAK;IAC3C,IAAIJ,KAAK,CAACC,OAAO,CAACT,KAAK,CAACa,KAAK,CAAC,IAAIL,KAAK,CAACC,OAAO,CAACG,KAAK,CAAC,EAAE;MACtDA,KAAK,CAACqC,OAAO,CAAC,CAACrC,KAAK,EAAEsC,CAAC,KAAK;QAC1B/C,cAAc,CAACC,OAAO,CAAC+C,eAAe,CAACnD,KAAK,CAACa,KAAK,CAACqC,CAAC,CAAC,EAAEtC,KAAK,CAAC;MAC/D,CAAC,CAAC;IACJ;IAEA8B,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAG9B,KAAK,CAAC;EACvB,CAAC,EACD,CAAC8B,YAAY,EAAE1C,KAAK,CAACa,KAAK,CAC5B,CAAC;EAED,MAAMuC,eAAgC,GAAApC,aAAA;IACpCqC,KAAK,EAAEjC,EAAE;IACTE,MAAM;IACNC,KAAK;IACLE,gBAAgB;IAChBC,IAAI;IACJC,OAAO;IACPC,KAAK;IACLE,QAAQ;IACRT;EAAK,GACF1B,gBAAgB,CAACK,KAAK,CAAC,CAC3B;EAED,MAAMsD,WAAwB,GAAG;IAC/B1C,KAAK;IACLK,IAAI;IACJC,GAAG;IACHC,GAAG;IACHW,QAAQ;IACRyB,MAAM,EAAE1B,QAAQ,GAAG,OAAO,GAAG2B,SAAS;IACtCC,MAAM,EAAEjC,IAAI,GACVtC,KAAA,CAAAwE,aAAA,CAAC9D,UAAU;MAAC+D,KAAK,EAAEnC,IAAI,CAACmC;IAAM,GAAEnC,IAAI,CAACoC,OAAoB,CAAC,GACxDJ,SAAS;IACbK,SAAS,EAAEb,iBAAiB;IAC5Bc,aAAa,EAAEnB,WAAW;IAC1BoB,WAAW,EAAEnB,UAAU;IACvBb,QAAQ;IACRC,OAAO;IACPC,WAAW;IACXC,kBAAkB;IAClBC,UAAU;IACVC,aAAa;IACbC,QAAQ;IACRC,YAAY;IACZC,OAAO;IACPC,iBAAiB;IACjBC,UAAU;IACVuB,OAAO,EAAE;EACX,CAAC;EAED,OACE9E,KAAA,CAAAwE,aAAA,CAACnE,UAAU,EAAK6D,eAAe,EAC7BlE,KAAA,CAAAwE,aAAA,CAAChE,MAAM,EAAK4D,WAAc,CAChB,CAAC;AAEjB;AAEA,eAAevD,eAAe;AAE9BA,eAAe,CAACkE,qBAAqB,GAAG,IAAI"}
+{"version":3,"file":"Slider.js","names":["React","useCallback","useContext","useMemo","useRef","FieldBlock","useFieldProps","getFormattedNumber","Slider","pickSpacingProps","HelpButton","DataContext","useDataValue","SliderComponent","props","_ref","_props$paths","dataContextRef","current","getSourceValue","getValues","source","Array","isArray","map","s","value","paths","path","preparedProps","_objectSpread","step","min","max","id","width","help","hasError","disabled","vertical","reverse","hideButtons","multiThumbBehavior","thumbTitle","subtractTitle","addTitle","numberFormat","tooltip","alwaysShowTooltip","extensions","handleChange","handleFocus","handleBlur","setDisplayValue","omitMultiplePathWarning","number","handleLocalChange","forEach","i","updateDataValue","fieldBlockProps","forId","sliderProps","status","undefined","suffix","createElement","title","content","on_change","on_drag_start","on_drag_end","stretch","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Slider/Slider.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo, useRef } from 'react'\nimport FieldBlock, {\n  Props as FieldBlockProps,\n  FieldBlockWidth,\n} from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { FieldHelpProps, FieldProps, Path } from '../../types'\nimport { getFormattedNumber } from '../../../../components/slider/SliderHelpers'\nimport Slider, { SliderProps } from '../../../../components/Slider'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { HelpButton } from '../../../../components'\nimport DataContext, { ContextState } from '../../DataContext/Context'\nimport useDataValue from '../../hooks/useDataValue'\n\nexport type SliderVisibilityEvent = React.MouseEvent<HTMLButtonElement> & {\n  value: string\n}\n\nexport type SliderValue = number | Array<number>\nexport type Props = FieldHelpProps &\n  FieldProps<SliderValue> & {\n    /**\n     * Define an array with JSON Pointers for multiple thumb buttons.\n     */\n    paths?: Array<Path>\n    step?: SliderProps['step'] | Path\n    min?: SliderProps['min'] | Path\n    max?: SliderProps['max'] | Path\n    vertical?: SliderProps['vertical']\n    reverse?: SliderProps['reverse']\n    hideButtons?: SliderProps['hideButtons']\n    multiThumbBehavior?: SliderProps['multiThumbBehavior']\n    thumbTitle?: SliderProps['thumbTitle']\n    subtractTitle?: SliderProps['subtractTitle']\n    addTitle?: SliderProps['addTitle']\n    numberFormat?: SliderProps['numberFormat']\n    tooltip?: SliderProps['tooltip']\n    alwaysShowTooltip?: SliderProps['alwaysShowTooltip']\n    extensions?: SliderProps['extensions']\n\n    /** Styling */\n    width?: FieldBlockWidth\n  }\n\nfunction SliderComponent(props: Props) {\n  const dataContextRef = useRef<ContextState>()\n  dataContextRef.current = useContext<ContextState>(DataContext)\n\n  const { getSourceValue } = useDataValue()\n  const getValues = useCallback(\n    (source: SliderValue | Path | Array<Path>) => {\n      if (Array.isArray(source)) {\n        return source.map((s) => getSourceValue(s) || 0)\n      }\n\n      return getSourceValue(source) || 0\n    },\n    [getSourceValue]\n  )\n\n  const value = getValues(props.paths ?? props.path ?? props.value)\n  const preparedProps = {\n    ...props,\n    step: getSourceValue(props.step),\n    min: getSourceValue(props.min),\n    max: getSourceValue(props.max),\n  }\n\n  const {\n    id,\n    path,\n    step = 1,\n    min = 0,\n    max = 100,\n    width = 'stretch',\n    help,\n    hasError,\n    disabled,\n    vertical,\n    reverse,\n    hideButtons,\n    multiThumbBehavior,\n    thumbTitle,\n    subtractTitle,\n    addTitle,\n    numberFormat,\n    tooltip,\n    alwaysShowTooltip,\n    extensions,\n    handleChange,\n    handleFocus,\n    handleBlur,\n    setDisplayValue,\n  } = useFieldProps(preparedProps, {\n    omitMultiplePathWarning: true,\n  })\n\n  useMemo(() => {\n    if (path && numberFormat) {\n      const { number } = getFormattedNumber(value, numberFormat)\n      setDisplayValue(path, number)\n    }\n  }, [numberFormat, path, setDisplayValue, value])\n\n  const handleLocalChange = useCallback(\n    ({ value }: { value: number | number[] }) => {\n      if (Array.isArray(props.paths) && Array.isArray(value)) {\n        value.forEach((value, i) => {\n          dataContextRef.current.updateDataValue(props.paths[i], value)\n        })\n      }\n\n      handleChange?.(value)\n    },\n    [handleChange, props.paths]\n  )\n\n  const fieldBlockProps: FieldBlockProps = {\n    forId: id,\n    width,\n    ...pickSpacingProps(props),\n  }\n\n  const sliderProps: SliderProps = {\n    value,\n    step,\n    min,\n    max,\n    disabled,\n    status: hasError ? 'error' : undefined,\n    suffix: help ? (\n      <HelpButton title={help.title}>{help.content}</HelpButton>\n    ) : undefined,\n    on_change: handleLocalChange,\n    on_drag_start: handleFocus,\n    on_drag_end: handleBlur,\n    vertical,\n    reverse,\n    hideButtons,\n    multiThumbBehavior,\n    thumbTitle,\n    subtractTitle,\n    addTitle,\n    numberFormat,\n    tooltip,\n    alwaysShowTooltip,\n    extensions,\n    stretch: true,\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps}>\n      <Slider {...sliderProps} />\n    </FieldBlock>\n  )\n}\n\nexport default SliderComponent\n\nSliderComponent._supportsSpacingProps = true\n"],"mappings":"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"}

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

@@ -2,8 +2,9 @@ import React from 'react';
 import { InputProps } from '../../../../components/input/Input';
 import { InputMaskedProps } from '../../../../components/InputMasked';
 import { TextareaProps } from '../../../../components/Textarea';
+import { FieldBlockWidth } from '../../FieldBlock';
 import type { TextCounterProps } from '../../../../fragments/TextCounter';
-import type { FieldProps, FieldHelpProps, FieldBlockWidth } from '../../types';
+import type { FieldProps, FieldHelpProps } from '../../types';
 export type Props = FieldHelpProps & FieldProps<string, undefined | string> & {
     multiline?: boolean;
     inputClassName?: string;

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

@@ -71,14 +71,8 @@ function StringComponent(props) {
     className,
     innerRef,
     inputClassName,
-    layout,
     placeholder,
-    label,
-    labelDescription,
     value,
-    info,
-    warning,
-    error,
     hasError,
     disabled,
     help,
@@ -151,7 +145,7 @@ function StringComponent(props) {
     on_key_down: handleKeyDown,
     disabled
   }, htmlAttributes), {}, {
-    stretch: Boolean(width !== undefined || (fieldBlockContext === null || fieldBlockContext === void 0 ? void 0 : fieldBlockContext.composition)),
+    stretch: Boolean(width),
     inner_ref: innerRef,
     status: hasError ? 'error' : undefined,
     value: transformInstantly((_value$toString = value === null || value === void 0 ? void 0 : value.toString()) !== null && _value$toString !== void 0 ? _value$toString : '')
@@ -164,26 +158,19 @@ function StringComponent(props) {
     characterCounter
   };
   const inputProps = {
-    type: type,
-    clear: clear,
-    size: size,
-    align: align,
-    selectall: selectall,
+    type,
+    clear,
+    size,
+    align,
+    selectall,
     icon: leftIcon !== null && leftIcon !== void 0 ? leftIcon : rightIcon,
     icon_position: rightIcon && !leftIcon ? 'right' : undefined,
     submit_element: submitElement,
     keep_placeholder: keepPlaceholder
   };
   const fieldBlockProps = _objectSpread({
-    className: classnames('dnb-forms-field-string', className),
     forId: id,
-    layout,
-    label,
-    labelDescription,
-    info,
-    warning,
-    error,
-    disabled,
+    className: classnames('dnb-forms-field-string', className),
     width: width === 'stretch' || fieldBlockContext !== null && fieldBlockContext !== void 0 && fieldBlockContext.composition ? width : undefined,
     contentWidth: width !== false ? width : undefined
   }, pickSpacingProps(props));

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

@@ -1 +1 @@
-{"version":3,"file":"String.js","names":["React","useContext","useMemo","useCallback","useEffect","useRef","classnames","HelpButton","Input","Textarea","InputMasked","DataContext","FieldBlockContext","FieldBlock","useFieldProps","pickSpacingProps","toCapitalized","StringComponent","props","_props$width","_props$innerRef","_dataContext$props2","_value$toString","dataContext","fieldBlockContext","schema","_props$schema","type","minLength","maxLength","pattern","fromInput","event","_event","_event$cleanedValue","_event2","_event3","value","emptyValue","cleanedValue","toEvent","trim","spaces","RegExp","test","replace","handleChange","transform","transformValue","capitalize","String","ref","preparedProps","_objectSpread","width","composition","innerRef","id","name","className","inputClassName","layout","placeholder","label","labelDescription","info","warning","error","hasError","disabled","help","multiline","mask","leftIcon","rightIcon","htmlAttributes","submitElement","clear","align","size","selectall","keepPlaceholder","rows","autoresizeMaxRows","autoresize","characterCounter","autoComplete","inputMode","autoCorrect","spellCheck","autoFocus","autoCapitalize","handleFocus","handleBlur","setDisplayValue","onKeyDown","_innerRef$current","path","current","transformInstantly","handleSubmit","handleKeyDown","_dataContext$props","isolate","key","_event$preventDefault","preventDefault","call","cn","sharedProps","suffix","createElement","title","content","undefined","on_focus","on_blur","on_change","on_key_down","stretch","Boolean","inner_ref","status","toString","textareaProps","autoresize_max_rows","inputProps","icon","icon_position","submit_element","keep_placeholder","fieldBlockProps","forId","contentWidth","_extends","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/String/String.tsx"],"sourcesContent":["import React, {\n  useContext,\n  useMemo,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react'\nimport classnames from 'classnames'\nimport { HelpButton, Input, Textarea } from '../../../../components'\nimport { InputProps } from '../../../../components/input/Input'\nimport InputMasked, {\n  InputMaskedProps,\n} from '../../../../components/InputMasked'\nimport { TextareaProps } from '../../../../components/Textarea'\nimport DataContext from '../../DataContext/Context'\nimport FieldBlockContext from '../../FieldBlock/FieldBlockContext'\nimport FieldBlock from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { toCapitalized } from '../../../../shared/component-helper'\nimport type { TextCounterProps } from '../../../../fragments/TextCounter'\nimport type {\n  FieldProps,\n  FieldHelpProps,\n  AllJSONSchemaVersions,\n  FieldBlockWidth,\n} from '../../types'\n\nexport type Props = FieldHelpProps &\n  FieldProps<string, undefined | string> & {\n    // - Shared props\n    multiline?: boolean\n    inputClassName?: string\n    innerRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement>\n    width?: FieldBlockWidth\n    size?: InputProps['size'] | TextareaProps['size']\n    keepPlaceholder?: InputProps['keep_placeholder']\n\n    // - Validation\n    minLength?: number\n    maxLength?: number\n    pattern?: string\n\n    // - Input props\n    type?: InputProps['type']\n    align?: InputProps['align']\n    selectall?: InputProps['selectall']\n    clear?: boolean\n    mask?: InputMaskedProps['mask']\n    leftIcon?: string\n    rightIcon?: string\n    submitElement?: InputProps['submit_element']\n    capitalize?: boolean\n    trim?: boolean\n\n    // - Textarea props\n    rows?: TextareaProps['rows']\n    autoresizeMaxRows?: TextareaProps['autoresize_max_rows']\n    autoresize?: TextareaProps['autoresize']\n    characterCounter?: Omit<TextCounterProps, 'text'> | number\n\n    // - Html props\n    autoComplete?: HTMLInputElement['autocomplete']\n    inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode']\n    autoCorrect?: React.HTMLAttributes<HTMLInputElement>['autoCorrect']\n    spellCheck?: React.HTMLAttributes<HTMLInputElement>['spellCheck']\n    autoFocus?: React.HTMLAttributes<HTMLInputElement>['autoFocus']\n    autoCapitalize?: React.HTMLAttributes<HTMLInputElement>['autoCapitalize']\n\n    // - Events\n    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>\n  }\n\nfunction StringComponent(props: Props) {\n  const dataContext = useContext(DataContext)\n  const fieldBlockContext = useContext(FieldBlockContext)\n\n  const schema = useMemo<AllJSONSchemaVersions>(\n    () =>\n      props.schema ?? {\n        type: 'string',\n        minLength: props.minLength,\n        maxLength: props.maxLength,\n        pattern: props.pattern,\n      },\n    [props.schema, props.minLength, props.maxLength, props.pattern]\n  )\n  const fromInput = useCallback(\n    (event: { value: string; cleanedValue?: string }) => {\n      if (typeof event === 'string') {\n        event = { value: event }\n      }\n      if (event?.value === '') {\n        return props.emptyValue\n      }\n      // Cleaned value for masked\n      return event?.cleanedValue ?? event?.value\n    },\n    [props.emptyValue]\n  )\n  const toEvent = useCallback(\n    (value: string, type: string) => {\n      if (props.trim && type === 'onBlur') {\n        const spaces = '[\\\\s ]'\n        if (new RegExp(`^${spaces}|${spaces}$`).test(value)) {\n          value = value.replace(\n            new RegExp(`^${spaces}+|${spaces}+$`, 'g'),\n            ''\n          )\n          handleChange(value)\n        }\n      }\n      return value\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [props.trim]\n  )\n  const transform = props.transformValue\n  const transformValue = useCallback(\n    (value: string) => {\n      if (props.capitalize) {\n        value = toCapitalized(String(value || ''))\n      }\n      return transform?.(value) || value\n    },\n    [props.capitalize, transform]\n  )\n\n  const ref = useRef<HTMLInputElement>()\n  const preparedProps: Props = {\n    ...props,\n    schema,\n    fromInput,\n    toEvent,\n    transformValue,\n    width:\n      props.width ??\n      (fieldBlockContext?.composition ? 'stretch' : 'large'),\n    innerRef: props.innerRef ?? ref,\n  }\n\n  const {\n    id,\n    name,\n    className,\n    innerRef,\n    inputClassName,\n    layout,\n    placeholder,\n    label,\n    labelDescription,\n    value,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    help,\n    multiline,\n    mask,\n    leftIcon,\n    rightIcon,\n    width,\n    htmlAttributes,\n    submitElement,\n\n    // - Input props\n    type,\n    clear,\n    align,\n    size,\n    selectall,\n    keepPlaceholder,\n\n    // - Textarea props\n    rows,\n    autoresizeMaxRows = 6,\n    autoresize = true,\n    characterCounter,\n\n    // - Html props\n    autoComplete,\n    inputMode,\n    autoCorrect,\n    spellCheck,\n    autoFocus,\n    autoCapitalize,\n\n    // - Events\n    handleFocus,\n    handleBlur,\n    handleChange,\n    setDisplayValue,\n    onKeyDown,\n  } = useFieldProps(preparedProps)\n\n  useEffect(() => {\n    setDisplayValue(props.path, innerRef.current?.value)\n  }, [innerRef, props.path, setDisplayValue, value])\n\n  const transformInstantly = useCallback(\n    (value: string) => (props.capitalize ? toCapitalized(value) : value),\n    [props.capitalize]\n  )\n\n  const { handleSubmit } = dataContext ?? {}\n  const handleKeyDown = useCallback(\n    ({ event }: { event: React.KeyboardEvent<HTMLInputElement> }) => {\n      if (\n        !multiline &&\n        dataContext?.props?.isolate &&\n        event.key === 'Enter'\n      ) {\n        handleSubmit() // So we commit the data to the outer context\n        event.preventDefault?.() // And prevent the default form submit\n      }\n\n      onKeyDown?.(event)\n    },\n    [handleSubmit, dataContext?.props?.isolate, multiline, onKeyDown]\n  )\n\n  const cn = classnames('dnb-forms-field-string__input', inputClassName)\n\n  const sharedProps: InputProps & TextareaProps = {\n    id,\n    name,\n    autoComplete,\n    autoCorrect,\n    spellCheck,\n    autoFocus,\n    autoCapitalize,\n    inputMode,\n    className: cn,\n    placeholder,\n    suffix: help ? (\n      <HelpButton title={help.title}>{help.content}</HelpButton>\n    ) : undefined,\n    on_focus: handleFocus,\n    on_blur: handleBlur,\n    on_change: handleChange,\n    on_key_down: handleKeyDown,\n    disabled,\n    ...htmlAttributes,\n    stretch: Boolean(\n      width !== undefined || fieldBlockContext?.composition\n    ),\n    inner_ref: innerRef,\n    status: hasError ? 'error' : undefined,\n    value: transformInstantly(value?.toString() ?? ''),\n  }\n\n  const textareaProps: TextareaProps = {\n    keepPlaceholder,\n    rows,\n    autoresize_max_rows: autoresizeMaxRows,\n    autoresize,\n    characterCounter,\n  }\n\n  const inputProps: InputProps = {\n    type: type,\n    clear: clear,\n    size: size,\n    align: align,\n    selectall: selectall,\n    icon: leftIcon ?? rightIcon,\n    icon_position: rightIcon && !leftIcon ? 'right' : undefined,\n    submit_element: submitElement,\n    keep_placeholder: keepPlaceholder,\n  }\n\n  const fieldBlockProps = {\n    className: classnames('dnb-forms-field-string', className),\n    forId: id,\n    layout,\n    label,\n    labelDescription,\n    info,\n    warning,\n    error,\n    disabled,\n    width:\n      width === 'stretch' || fieldBlockContext?.composition\n        ? width\n        : undefined,\n    contentWidth: width !== false ? width : undefined,\n    ...pickSpacingProps(props),\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps}>\n      {multiline ? (\n        <Textarea {...sharedProps} {...textareaProps} />\n      ) : mask ? (\n        <InputMasked {...sharedProps} {...inputProps} mask={mask} />\n      ) : (\n        <Input {...sharedProps} {...inputProps} />\n      )}\n    </FieldBlock>\n  )\n}\n\nStringComponent._supportsSpacingProps = true\nexport default StringComponent\n"],"mappings":"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"}
+{"version":3,"file":"String.js","names":["React","useContext","useMemo","useCallback","useEffect","useRef","classnames","HelpButton","Input","Textarea","InputMasked","DataContext","FieldBlockContext","FieldBlock","useFieldProps","pickSpacingProps","toCapitalized","StringComponent","props","_props$width","_props$innerRef","_dataContext$props2","_value$toString","dataContext","fieldBlockContext","schema","_props$schema","type","minLength","maxLength","pattern","fromInput","event","_event","_event$cleanedValue","_event2","_event3","value","emptyValue","cleanedValue","toEvent","trim","spaces","RegExp","test","replace","handleChange","transform","transformValue","capitalize","String","ref","preparedProps","_objectSpread","width","composition","innerRef","id","name","className","inputClassName","placeholder","hasError","disabled","help","multiline","mask","leftIcon","rightIcon","htmlAttributes","submitElement","clear","align","size","selectall","keepPlaceholder","rows","autoresizeMaxRows","autoresize","characterCounter","autoComplete","inputMode","autoCorrect","spellCheck","autoFocus","autoCapitalize","handleFocus","handleBlur","setDisplayValue","onKeyDown","_innerRef$current","path","current","transformInstantly","handleSubmit","handleKeyDown","_dataContext$props","isolate","key","_event$preventDefault","preventDefault","call","cn","sharedProps","suffix","createElement","title","content","undefined","on_focus","on_blur","on_change","on_key_down","stretch","Boolean","inner_ref","status","toString","textareaProps","autoresize_max_rows","inputProps","icon","icon_position","submit_element","keep_placeholder","fieldBlockProps","forId","contentWidth","_extends","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/String/String.tsx"],"sourcesContent":["import React, {\n  useContext,\n  useMemo,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react'\nimport classnames from 'classnames'\nimport { HelpButton, Input, Textarea } from '../../../../components'\nimport { InputProps } from '../../../../components/input/Input'\nimport InputMasked, {\n  InputMaskedProps,\n} from '../../../../components/InputMasked'\nimport { TextareaProps } from '../../../../components/Textarea'\nimport DataContext from '../../DataContext/Context'\nimport FieldBlockContext from '../../FieldBlock/FieldBlockContext'\nimport FieldBlock, {\n  Props as FieldBlockProps,\n  FieldBlockWidth,\n} from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { toCapitalized } from '../../../../shared/component-helper'\nimport type { TextCounterProps } from '../../../../fragments/TextCounter'\nimport type {\n  FieldProps,\n  FieldHelpProps,\n  AllJSONSchemaVersions,\n} from '../../types'\n\nexport type Props = FieldHelpProps &\n  FieldProps<string, undefined | string> & {\n    // - Shared props\n    multiline?: boolean\n    inputClassName?: string\n    innerRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement>\n    width?: FieldBlockWidth\n    size?: InputProps['size'] | TextareaProps['size']\n    keepPlaceholder?: InputProps['keep_placeholder']\n\n    // - Validation\n    minLength?: number\n    maxLength?: number\n    pattern?: string\n\n    // - Input props\n    type?: InputProps['type']\n    align?: InputProps['align']\n    selectall?: InputProps['selectall']\n    clear?: boolean\n    mask?: InputMaskedProps['mask']\n    leftIcon?: string\n    rightIcon?: string\n    submitElement?: InputProps['submit_element']\n    capitalize?: boolean\n    trim?: boolean\n\n    // - Textarea props\n    rows?: TextareaProps['rows']\n    autoresizeMaxRows?: TextareaProps['autoresize_max_rows']\n    autoresize?: TextareaProps['autoresize']\n    characterCounter?: Omit<TextCounterProps, 'text'> | number\n\n    // - Html props\n    autoComplete?: HTMLInputElement['autocomplete']\n    inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode']\n    autoCorrect?: React.HTMLAttributes<HTMLInputElement>['autoCorrect']\n    spellCheck?: React.HTMLAttributes<HTMLInputElement>['spellCheck']\n    autoFocus?: React.HTMLAttributes<HTMLInputElement>['autoFocus']\n    autoCapitalize?: React.HTMLAttributes<HTMLInputElement>['autoCapitalize']\n\n    // - Events\n    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>\n  }\n\nfunction StringComponent(props: Props) {\n  const dataContext = useContext(DataContext)\n  const fieldBlockContext = useContext(FieldBlockContext)\n\n  const schema = useMemo<AllJSONSchemaVersions>(\n    () =>\n      props.schema ?? {\n        type: 'string',\n        minLength: props.minLength,\n        maxLength: props.maxLength,\n        pattern: props.pattern,\n      },\n    [props.schema, props.minLength, props.maxLength, props.pattern]\n  )\n  const fromInput = useCallback(\n    (event: { value: string; cleanedValue?: string }) => {\n      if (typeof event === 'string') {\n        event = { value: event }\n      }\n      if (event?.value === '') {\n        return props.emptyValue\n      }\n      // Cleaned value for masked\n      return event?.cleanedValue ?? event?.value\n    },\n    [props.emptyValue]\n  )\n  const toEvent = useCallback(\n    (value: string, type: string) => {\n      if (props.trim && type === 'onBlur') {\n        const spaces = '[\\\\s ]'\n        if (new RegExp(`^${spaces}|${spaces}$`).test(value)) {\n          value = value.replace(\n            new RegExp(`^${spaces}+|${spaces}+$`, 'g'),\n            ''\n          )\n          handleChange(value)\n        }\n      }\n      return value\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [props.trim]\n  )\n  const transform = props.transformValue\n  const transformValue = useCallback(\n    (value: string) => {\n      if (props.capitalize) {\n        value = toCapitalized(String(value || ''))\n      }\n      return transform?.(value) || value\n    },\n    [props.capitalize, transform]\n  )\n\n  const ref = useRef<HTMLInputElement>()\n  const preparedProps: Props = {\n    ...props,\n    schema,\n    fromInput,\n    toEvent,\n    transformValue,\n    width:\n      props.width ??\n      (fieldBlockContext?.composition ? 'stretch' : 'large'),\n    innerRef: props.innerRef ?? ref,\n  }\n\n  const {\n    id,\n    name,\n    className,\n    innerRef,\n    inputClassName,\n    placeholder,\n    value,\n    hasError,\n    disabled,\n    help,\n    multiline,\n    mask,\n    leftIcon,\n    rightIcon,\n    width,\n    htmlAttributes,\n    submitElement,\n\n    // - Input props\n    type,\n    clear,\n    align,\n    size,\n    selectall,\n    keepPlaceholder,\n\n    // - Textarea props\n    rows,\n    autoresizeMaxRows = 6,\n    autoresize = true,\n    characterCounter,\n\n    // - Html props\n    autoComplete,\n    inputMode,\n    autoCorrect,\n    spellCheck,\n    autoFocus,\n    autoCapitalize,\n\n    // - Events\n    handleFocus,\n    handleBlur,\n    handleChange,\n    setDisplayValue,\n    onKeyDown,\n  } = useFieldProps(preparedProps)\n\n  useEffect(() => {\n    setDisplayValue(props.path, innerRef.current?.value)\n  }, [innerRef, props.path, setDisplayValue, value])\n\n  const transformInstantly = useCallback(\n    (value: string) => (props.capitalize ? toCapitalized(value) : value),\n    [props.capitalize]\n  )\n\n  const { handleSubmit } = dataContext ?? {}\n  const handleKeyDown = useCallback(\n    ({ event }: { event: React.KeyboardEvent<HTMLInputElement> }) => {\n      if (\n        !multiline &&\n        dataContext?.props?.isolate &&\n        event.key === 'Enter'\n      ) {\n        handleSubmit() // So we commit the data to the outer context\n        event.preventDefault?.() // And prevent the default form submit\n      }\n\n      onKeyDown?.(event)\n    },\n    [handleSubmit, dataContext?.props?.isolate, multiline, onKeyDown]\n  )\n\n  const cn = classnames('dnb-forms-field-string__input', inputClassName)\n\n  const sharedProps: InputProps & TextareaProps = {\n    id,\n    name,\n    autoComplete,\n    autoCorrect,\n    spellCheck,\n    autoFocus,\n    autoCapitalize,\n    inputMode,\n    className: cn,\n    placeholder,\n    suffix: help ? (\n      <HelpButton title={help.title}>{help.content}</HelpButton>\n    ) : undefined,\n    on_focus: handleFocus,\n    on_blur: handleBlur,\n    on_change: handleChange,\n    on_key_down: handleKeyDown,\n    disabled,\n    ...htmlAttributes,\n    stretch: Boolean(width),\n    inner_ref: innerRef,\n    status: hasError ? 'error' : undefined,\n    value: transformInstantly(value?.toString() ?? ''),\n  }\n\n  const textareaProps: TextareaProps = {\n    keepPlaceholder,\n    rows,\n    autoresize_max_rows: autoresizeMaxRows,\n    autoresize,\n    characterCounter,\n  }\n\n  const inputProps: InputProps = {\n    type,\n    clear,\n    size,\n    align,\n    selectall,\n    icon: leftIcon ?? rightIcon,\n    icon_position: rightIcon && !leftIcon ? 'right' : undefined,\n    submit_element: submitElement,\n    keep_placeholder: keepPlaceholder,\n  }\n\n  const fieldBlockProps: FieldBlockProps = {\n    forId: id,\n    className: classnames('dnb-forms-field-string', className),\n    width:\n      width === 'stretch' || fieldBlockContext?.composition\n        ? width\n        : undefined,\n    contentWidth: width !== false ? width : undefined,\n    ...pickSpacingProps(props),\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps}>\n      {multiline ? (\n        <Textarea {...sharedProps} {...textareaProps} />\n      ) : mask ? (\n        <InputMasked {...sharedProps} {...inputProps} mask={mask} />\n      ) : (\n        <Input {...sharedProps} {...inputProps} />\n      )}\n    </FieldBlock>\n  )\n}\n\nStringComponent._supportsSpacingProps = true\nexport default StringComponent\n"],"mappings":"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"}

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

@@ -6,7 +6,7 @@ export type ToggleProps = {
     textOn?: string;
     textOff?: string;
 };
-export type Props = FieldHelpProps & FieldProps<unknown> & ToggleProps;
+export type Props = FieldHelpProps & Omit<FieldProps<unknown>, 'layout' | 'layoutOptions'> & ToggleProps;
 declare function Toggle(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace Toggle {
     var _supportsSpacingProps: boolean;

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

@@ -21,7 +21,6 @@ function Toggle(props) {
     className,
     valueOn,
     valueOff,
-    layout,
     variant,
     disabled,
     label,
@@ -30,9 +29,6 @@ function Toggle(props) {
     textOff,
     value,
     help,
-    info,
-    warning,
-    error,
     hasError,
     htmlAttributes,
     handleChange,
@@ -49,21 +45,11 @@ function Toggle(props) {
     handleChange === null || handleChange === void 0 ? void 0 : handleChange(value === 'on' ? valueOn : valueOff);
   }, [handleChange, valueOn, valueOff]);
   const cn = classnames('dnb-forms-field-toggle', className);
-  const fieldBlockPropsWithoutLabel = _objectSpread(_objectSpread({
+  const fieldBlockProps = _objectSpread({
     forId: id,
-    className: cn
-  }, pickSpacingProps(props)), {}, {
-    info,
-    warning,
-    error,
+    className: cn,
     disabled
-  });
-  const fieldBlockProps = _objectSpread(_objectSpread({}, fieldBlockPropsWithoutLabel), {}, {
-    layout,
-    label,
-    labelDescription,
-    disabled
-  });
+  }, pickSpacingProps(props));
   const suffix = help ? React.createElement(HelpButton, {
     title: help.title
   }, help.content) : undefined;
@@ -78,7 +64,9 @@ function Toggle(props) {
   switch (variant) {
     default:
     case 'checkbox':
-      return React.createElement(FieldBlock, fieldBlockPropsWithoutLabel, React.createElement(Checkbox, _extends({
+      return React.createElement(FieldBlock, _extends({}, fieldBlockProps, {
+        label: undefined
+      }), React.createElement(Checkbox, _extends({
         id: id,
         className: cn,
         label: label !== null && label !== void 0 ? label : isOn ? textOn !== null && textOn !== void 0 ? textOn : translations.yes : textOff !== null && textOff !== void 0 ? textOff : translations.no,

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

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","names":["React","useCallback","useMemo","classnames","Checkbox","HelpButton","ToggleButton","ButtonRow","FieldBlock","useFieldProps","pickSpacingProps","ToggleButtonGroupContext","useTranslation","Toggle","props","translations","ToggleField","preparedProps","_objectSpread","errorMessages","id","className","valueOn","valueOff","layout","variant","disabled","label","labelDescription","textOn","textOff","value","help","info","warning","error","hasError","htmlAttributes","handleChange","setDisplayValue","handleCheckboxChange","checked","handleToggleChange","cn","fieldBlockPropsWithoutLabel","forId","fieldBlockProps","suffix","createElement","title","content","undefined","isOn","isOff","text","path","_extends","yes","no","status","onChange","on_change","asFieldset","Fragment","size","left","bottom","Provider","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Toggle/Toggle.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react'\nimport classnames from 'classnames'\n\nimport { Checkbox, HelpButton, ToggleButton } from '../../../../components'\nimport ButtonRow from '../../Form/ButtonRow'\nimport FieldBlock from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { FieldHelpProps, FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\nimport useTranslation from '../../hooks/useTranslation'\n\nexport type ToggleProps = {\n  valueOn: unknown\n  valueOff: unknown\n  variant?: 'checkbox' | 'checkbox-button' | 'button' | 'buttons'\n  textOn?: string\n  textOff?: string\n}\n\nexport type Props = FieldHelpProps & FieldProps<unknown> & ToggleProps\n\nfunction Toggle(props: Props) {\n  const translations = useTranslation().ToggleField\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages: props.errorMessages,\n  }\n\n  const {\n    id,\n    className,\n    valueOn,\n    valueOff,\n    layout,\n    variant,\n    disabled,\n    label,\n    labelDescription,\n    textOn,\n    textOff,\n    value,\n    help,\n    info,\n    warning,\n    error,\n    hasError,\n    htmlAttributes,\n    handleChange,\n    setDisplayValue,\n  } = useFieldProps(preparedProps)\n\n  const handleCheckboxChange = useCallback(\n    ({ checked }) => {\n      handleChange?.(checked ? valueOn : valueOff)\n    },\n    [handleChange, valueOn, valueOff]\n  )\n  const handleToggleChange = useCallback(\n    ({ value }) => {\n      handleChange?.(value === 'on' ? valueOn : valueOff)\n    },\n    [handleChange, valueOn, valueOff]\n  )\n\n  const cn = classnames('dnb-forms-field-toggle', className)\n\n  const fieldBlockPropsWithoutLabel = {\n    forId: id,\n    className: cn,\n    ...pickSpacingProps(props),\n    info,\n    warning,\n    error,\n    disabled,\n  }\n\n  const fieldBlockProps = {\n    ...fieldBlockPropsWithoutLabel,\n    layout,\n    label,\n    labelDescription,\n    disabled,\n  }\n\n  const suffix = help ? (\n    <HelpButton title={help.title}>{help.content}</HelpButton>\n  ) : undefined\n\n  const isOn = value === valueOn\n  const isOff = value === valueOff\n\n  useMemo(() => {\n    const text = isOn ? textOn : textOff\n    if (text) {\n      setDisplayValue(props.path, text)\n    }\n  }, [isOn, props.path, setDisplayValue, textOff, textOn])\n\n  switch (variant) {\n    default:\n    case 'checkbox':\n      return (\n        <FieldBlock {...fieldBlockPropsWithoutLabel}>\n          <Checkbox\n            id={id}\n            className={cn}\n            label={\n              label ??\n              (isOn\n                ? textOn ?? translations.yes\n                : textOff ?? translations.no)\n            }\n            checked={isOn}\n            disabled={disabled}\n            status={hasError ? 'error' : undefined}\n            suffix={suffix}\n            onChange={handleCheckboxChange}\n            {...htmlAttributes}\n          />\n        </FieldBlock>\n      )\n    case 'button':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ToggleButton\n            id={id}\n            text={\n              isOn\n                ? textOn ?? translations.yes\n                : textOff ?? translations.no\n            }\n            checked={isOn}\n            disabled={disabled}\n            status={hasError ? 'error' : undefined}\n            suffix={suffix}\n            value={value ? 'true' : 'false'}\n            on_change={handleCheckboxChange}\n            {...htmlAttributes}\n          />\n        </FieldBlock>\n      )\n    case 'buttons':\n      return (\n        <FieldBlock\n          {...fieldBlockProps}\n          asFieldset\n          labelDescription={\n            <>\n              {labelDescription}\n              {help ? (\n                <HelpButton\n                  size=\"small\"\n                  left={labelDescription ? 'x-small' : false}\n                  title={help.title}\n                >\n                  {help.content}\n                </HelpButton>\n              ) : undefined}\n            </>\n          }\n        >\n          <ButtonRow bottom=\"x-small\">\n            <ToggleButtonGroupContext.Provider\n              value={{\n                value: isOn ? 'on' : isOff ? 'off' : null, // use \"null\" to reset the value\n                onChange: handleToggleChange,\n                status: hasError ? 'error' : undefined,\n                disabled,\n              }}\n            >\n              <ToggleButton\n                text={textOn ?? translations.yes}\n                value=\"on\"\n                {...htmlAttributes}\n              />\n              <ToggleButton\n                text={textOff ?? translations.no}\n                value=\"off\"\n                {...htmlAttributes}\n              />\n            </ToggleButtonGroupContext.Provider>\n          </ButtonRow>\n        </FieldBlock>\n      )\n    case 'checkbox-button':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ToggleButton\n            id={id}\n            variant=\"checkbox\"\n            text={\n              isOn\n                ? textOn ?? translations.yes\n                : textOff ?? translations.no\n            }\n            checked={isOn}\n            disabled={disabled}\n            status={hasError ? 'error' : undefined}\n            suffix={suffix}\n            value={value ? 'true' : 'false'}\n            on_change={handleCheckboxChange}\n            {...htmlAttributes}\n          />\n        </FieldBlock>\n      )\n  }\n}\n\nToggle._supportsSpacingProps = true\nexport default Toggle\n"],"mappings":"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"}
+{"version":3,"file":"Toggle.js","names":["React","useCallback","useMemo","classnames","Checkbox","HelpButton","ToggleButton","ButtonRow","FieldBlock","useFieldProps","pickSpacingProps","ToggleButtonGroupContext","useTranslation","Toggle","props","translations","ToggleField","preparedProps","_objectSpread","errorMessages","id","className","valueOn","valueOff","variant","disabled","label","labelDescription","textOn","textOff","value","help","hasError","htmlAttributes","handleChange","setDisplayValue","handleCheckboxChange","checked","handleToggleChange","cn","fieldBlockProps","forId","suffix","createElement","title","content","undefined","isOn","isOff","text","path","_extends","yes","no","status","onChange","on_change","asFieldset","Fragment","size","left","bottom","Provider","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Toggle/Toggle.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react'\nimport classnames from 'classnames'\nimport { Checkbox, HelpButton, ToggleButton } from '../../../../components'\nimport ButtonRow from '../../Form/ButtonRow'\nimport FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { FieldHelpProps, FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\nimport useTranslation from '../../hooks/useTranslation'\n\nexport type ToggleProps = {\n  valueOn: unknown\n  valueOff: unknown\n  variant?: 'checkbox' | 'checkbox-button' | 'button' | 'buttons'\n  textOn?: string\n  textOff?: string\n}\n\nexport type Props = FieldHelpProps &\n  Omit<FieldProps<unknown>, 'layout' | 'layoutOptions'> &\n  ToggleProps\n\nfunction Toggle(props: Props) {\n  const translations = useTranslation().ToggleField\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages: props.errorMessages,\n  }\n\n  const {\n    id,\n    className,\n    valueOn,\n    valueOff,\n    variant,\n    disabled,\n    label,\n    labelDescription,\n    textOn,\n    textOff,\n    value,\n    help,\n    hasError,\n    htmlAttributes,\n    handleChange,\n    setDisplayValue,\n  } = useFieldProps(preparedProps)\n\n  const handleCheckboxChange = useCallback(\n    ({ checked }) => {\n      handleChange?.(checked ? valueOn : valueOff)\n    },\n    [handleChange, valueOn, valueOff]\n  )\n  const handleToggleChange = useCallback(\n    ({ value }) => {\n      handleChange?.(value === 'on' ? valueOn : valueOff)\n    },\n    [handleChange, valueOn, valueOff]\n  )\n\n  const cn = classnames('dnb-forms-field-toggle', className)\n\n  const fieldBlockProps: FieldBlockProps = {\n    forId: id,\n    className: cn,\n    disabled,\n    ...pickSpacingProps(props),\n  }\n\n  const suffix = help ? (\n    <HelpButton title={help.title}>{help.content}</HelpButton>\n  ) : undefined\n\n  const isOn = value === valueOn\n  const isOff = value === valueOff\n\n  useMemo(() => {\n    const text = isOn ? textOn : textOff\n    if (text) {\n      setDisplayValue(props.path, text)\n    }\n  }, [isOn, props.path, setDisplayValue, textOff, textOn])\n\n  switch (variant) {\n    default:\n    case 'checkbox':\n      return (\n        <FieldBlock {...fieldBlockProps} label={undefined}>\n          <Checkbox\n            id={id}\n            className={cn}\n            label={\n              label ??\n              (isOn\n                ? textOn ?? translations.yes\n                : textOff ?? translations.no)\n            }\n            checked={isOn}\n            disabled={disabled}\n            status={hasError ? 'error' : undefined}\n            suffix={suffix}\n            onChange={handleCheckboxChange}\n            {...htmlAttributes}\n          />\n        </FieldBlock>\n      )\n    case 'button':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ToggleButton\n            id={id}\n            text={\n              isOn\n                ? textOn ?? translations.yes\n                : textOff ?? translations.no\n            }\n            checked={isOn}\n            disabled={disabled}\n            status={hasError ? 'error' : undefined}\n            suffix={suffix}\n            value={value ? 'true' : 'false'}\n            on_change={handleCheckboxChange}\n            {...htmlAttributes}\n          />\n        </FieldBlock>\n      )\n    case 'buttons':\n      return (\n        <FieldBlock\n          {...fieldBlockProps}\n          asFieldset\n          labelDescription={\n            <>\n              {labelDescription}\n              {help ? (\n                <HelpButton\n                  size=\"small\"\n                  left={labelDescription ? 'x-small' : false}\n                  title={help.title}\n                >\n                  {help.content}\n                </HelpButton>\n              ) : undefined}\n            </>\n          }\n        >\n          <ButtonRow bottom=\"x-small\">\n            <ToggleButtonGroupContext.Provider\n              value={{\n                value: isOn ? 'on' : isOff ? 'off' : null, // use \"null\" to reset the value\n                onChange: handleToggleChange,\n                status: hasError ? 'error' : undefined,\n                disabled,\n              }}\n            >\n              <ToggleButton\n                text={textOn ?? translations.yes}\n                value=\"on\"\n                {...htmlAttributes}\n              />\n              <ToggleButton\n                text={textOff ?? translations.no}\n                value=\"off\"\n                {...htmlAttributes}\n              />\n            </ToggleButtonGroupContext.Provider>\n          </ButtonRow>\n        </FieldBlock>\n      )\n    case 'checkbox-button':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ToggleButton\n            id={id}\n            variant=\"checkbox\"\n            text={\n              isOn\n                ? textOn ?? translations.yes\n                : textOff ?? translations.no\n            }\n            checked={isOn}\n            disabled={disabled}\n            status={hasError ? 'error' : undefined}\n            suffix={suffix}\n            value={value ? 'true' : 'false'}\n            on_change={handleCheckboxChange}\n            {...htmlAttributes}\n          />\n        </FieldBlock>\n      )\n  }\n}\n\nToggle._supportsSpacingProps = true\nexport default Toggle\n"],"mappings":"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"}

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

@@ -1,7 +1,8 @@
-import { FieldBlockWidth, FieldHelpProps, FieldProps } from '../../types';
-import { UploadFile, UploadProps } from '../../../../components/Upload';
+import { FieldBlockWidth } from '../../FieldBlock';
+import { FieldHelpProps, FieldProps } from '../../types';
+import { UploadFile, UploadFileNative, UploadProps } from '../../../../components/Upload';
 import { SpacingProps } from '../../../../shared/types';
-export type UploadValue = Array<UploadFile>;
+export type UploadValue = Array<UploadFile | UploadFileNative>;
 export type Props = FieldHelpProps & Omit<FieldProps<UploadValue, UploadValue | undefined>, 'name'> & SpacingProps & {
     width?: Omit<FieldBlockWidth, 'medium' | 'small'>;
 } & Pick<Partial<UploadProps>, 'title' | 'text' | 'acceptedFileTypes' | 'filesAmountLimit' | 'fileMaxSize' | 'onFileDelete' | 'skeleton'>;

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

@@ -3,7 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-const _excluded = ["id", "className", "width", "layout", "value", "label", "labelDescription", "disabled", "help", "info", "warning", "error", "htmlAttributes", "handleChange", "handleFocus", "handleBlur"];
+const _excluded = ["id", "className", "width", "value", "label", "labelDescription", "help", "htmlAttributes", "handleChange", "handleFocus", "handleBlur"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useCallback, useEffect, useMemo } from 'react';
@@ -46,15 +46,10 @@ function UploadComponent(props) {
       id,
       className,
       width: widthProp = 'stretch',
-      layout,
       value,
       label,
       labelDescription,
-      disabled,
       help,
-      info,
-      warning,
-      error,
       htmlAttributes,
       handleChange,
       handleFocus,
@@ -85,15 +80,10 @@ function UploadComponent(props) {
   }, [handleBlur, handleChange, handleFocus]);
   const width = widthProp;
   const fieldBlockProps = _objectSpread({
+    id,
     forId: id,
-    layout,
-    label,
     labelSrOnly: true,
-    info,
-    warning,
-    error,
     className,
-    disabled,
     width
   }, pickSpacingProps(props));
   return React.createElement(FieldBlock, fieldBlockProps, React.createElement(Upload, _extends({

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

@@ -1 +1 @@
-{"version":3,"file":"Upload.js","names":["React","useCallback","useEffect","useMemo","FieldBlock","useFieldProps","useTranslation","useFormsTranslation","Upload","useUpload","pickSpacingProps","HelpButton","useSharedTranslation","FormError","UploadComponent","props","validateRequired","value","required","isChanged","error","hasError","some","file","errorMessage","length","undefined","sharedTr","formsTr","errorMessages","errorRequired","preparedProps","_objectSpread","_useFieldProps","executeOnChangeRegardlessOfError","id","className","width","widthProp","layout","label","labelDescription","disabled","help","info","warning","htmlAttributes","handleChange","handleFocus","handleBlur","rest","_objectWithoutProperties","_excluded","title","text","acceptedFileTypes","filesAmountLimit","fileMaxSize","skeleton","onFileDelete","setFiles","changeHandler","files","fieldBlockProps","forId","labelSrOnly","createElement","_extends","onChange","Fragment","left","content","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Upload/Upload.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from 'react'\nimport FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'\nimport {\n  useFieldProps,\n  useTranslation as useFormsTranslation,\n} from '../../hooks'\nimport { FieldBlockWidth, FieldHelpProps, FieldProps } from '../../types'\nimport Upload, {\n  UploadFile,\n  UploadProps,\n} from '../../../../components/Upload'\nimport useUpload from '../../../../components/upload/useUpload'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { HelpButton } from '../../../../components'\nimport { useTranslation as useSharedTranslation } from '../../../../shared'\nimport { SpacingProps } from '../../../../shared/types'\nimport { FormError } from '../../utils'\n\nexport type UploadValue = Array<UploadFile>\nexport type Props = FieldHelpProps &\n  Omit<FieldProps<UploadValue, UploadValue | undefined>, 'name'> &\n  SpacingProps & {\n    width?: Omit<FieldBlockWidth, 'medium' | 'small'>\n  } & Pick<\n    Partial<UploadProps>,\n    | 'title'\n    | 'text'\n    | 'acceptedFileTypes'\n    | 'filesAmountLimit'\n    | 'fileMaxSize'\n    | 'onFileDelete'\n    | 'skeleton'\n  >\n\nfunction UploadComponent(props: Props) {\n  const validateRequired = useCallback(\n    (value: UploadValue, { required, isChanged, error }) => {\n      const hasError = value?.some((file) => file.errorMessage)\n      if (hasError) {\n        return new FormError('Upload.errorInvalidFiles')\n      }\n\n      if (required && (!isChanged || !(value.length > 0))) {\n        return error\n      }\n\n      return undefined\n    },\n    []\n  )\n\n  const sharedTr = useSharedTranslation().Upload\n  const formsTr = useFormsTranslation().Upload\n\n  const errorMessages = useMemo(\n    () => ({\n      'Field.errorRequired': formsTr.errorRequired,\n    }),\n    [formsTr.errorRequired]\n  )\n\n  const preparedProps = {\n    errorMessages,\n    validateRequired,\n    ...props,\n  }\n\n  const {\n    id,\n    className,\n    width: widthProp = 'stretch',\n    layout,\n    value,\n    label,\n    labelDescription,\n    disabled,\n    help,\n    info,\n    warning,\n    error,\n    htmlAttributes,\n    handleChange,\n    handleFocus,\n    handleBlur,\n    ...rest\n  } = useFieldProps(preparedProps, {\n    executeOnChangeRegardlessOfError: true,\n  })\n\n  // Upload props\n  const {\n    title = sharedTr.title,\n    text = sharedTr.text,\n    acceptedFileTypes = ['pdf', 'png', 'jpg', 'jpeg'],\n    filesAmountLimit = 100,\n    fileMaxSize = 5,\n    skeleton,\n    onFileDelete,\n  } = rest\n\n  const { setFiles } = useUpload(id)\n\n  useEffect(() => {\n    setFiles(value)\n  }, [handleBlur, setFiles, value])\n\n  const changeHandler = useCallback(\n    ({ files }: { files: UploadValue }) => {\n      // Prevents the form-status from showing up\n      handleBlur()\n      handleFocus()\n      handleChange(files)\n    },\n    [handleBlur, handleChange, handleFocus]\n  )\n\n  const width = widthProp as FieldBlockWidth\n  const fieldBlockProps: FieldBlockProps = {\n    forId: id,\n    layout,\n    label,\n    labelSrOnly: true,\n    info,\n    warning,\n    error,\n    className,\n    disabled,\n    width,\n    ...pickSpacingProps(props),\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps}>\n      <Upload\n        id={id}\n        acceptedFileTypes={acceptedFileTypes}\n        filesAmountLimit={filesAmountLimit}\n        fileMaxSize={fileMaxSize}\n        skeleton={skeleton}\n        onChange={changeHandler}\n        onFileDelete={onFileDelete}\n        title={label ?? title}\n        text={\n          help ? (\n            <>\n              {labelDescription ?? text}\n              <HelpButton\n                left={text ? 'x-small' : false}\n                title={help.title}\n              >\n                {help.content}\n              </HelpButton>\n            </>\n          ) : (\n            labelDescription ?? text\n          )\n        }\n        {...htmlAttributes}\n      />\n    </FieldBlock>\n  )\n}\n\nexport default UploadComponent\n\nUploadComponent._supportsSpacingProps = true\n"],"mappings":"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"}
+{"version":3,"file":"Upload.js","names":["React","useCallback","useEffect","useMemo","FieldBlock","useFieldProps","useTranslation","useFormsTranslation","Upload","useUpload","pickSpacingProps","HelpButton","useSharedTranslation","FormError","UploadComponent","props","validateRequired","value","required","isChanged","error","hasError","some","file","errorMessage","length","undefined","sharedTr","formsTr","errorMessages","errorRequired","preparedProps","_objectSpread","_useFieldProps","executeOnChangeRegardlessOfError","id","className","width","widthProp","label","labelDescription","help","htmlAttributes","handleChange","handleFocus","handleBlur","rest","_objectWithoutProperties","_excluded","title","text","acceptedFileTypes","filesAmountLimit","fileMaxSize","skeleton","onFileDelete","setFiles","changeHandler","files","fieldBlockProps","forId","labelSrOnly","createElement","_extends","onChange","Fragment","left","content","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Upload/Upload.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo } from 'react'\nimport FieldBlock, {\n  Props as FieldBlockProps,\n  FieldBlockWidth,\n} from '../../FieldBlock'\nimport {\n  useFieldProps,\n  useTranslation as useFormsTranslation,\n} from '../../hooks'\nimport { FieldHelpProps, FieldProps } from '../../types'\nimport Upload, {\n  UploadFile,\n  UploadFileNative,\n  UploadProps,\n} from '../../../../components/Upload'\nimport useUpload from '../../../../components/upload/useUpload'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { HelpButton } from '../../../../components'\nimport { useTranslation as useSharedTranslation } from '../../../../shared'\nimport { SpacingProps } from '../../../../shared/types'\nimport { FormError } from '../../utils'\n\nexport type UploadValue = Array<UploadFile | UploadFileNative>\nexport type Props = FieldHelpProps &\n  Omit<FieldProps<UploadValue, UploadValue | undefined>, 'name'> &\n  SpacingProps & {\n    width?: Omit<FieldBlockWidth, 'medium' | 'small'>\n  } & Pick<\n    Partial<UploadProps>,\n    | 'title'\n    | 'text'\n    | 'acceptedFileTypes'\n    | 'filesAmountLimit'\n    | 'fileMaxSize'\n    | 'onFileDelete'\n    | 'skeleton'\n  >\n\nfunction UploadComponent(props: Props) {\n  const validateRequired = useCallback(\n    (value: UploadValue, { required, isChanged, error }) => {\n      const hasError = value?.some((file) => file.errorMessage)\n      if (hasError) {\n        return new FormError('Upload.errorInvalidFiles')\n      }\n\n      if (required && (!isChanged || !(value.length > 0))) {\n        return error\n      }\n\n      return undefined\n    },\n    []\n  )\n\n  const sharedTr = useSharedTranslation().Upload\n  const formsTr = useFormsTranslation().Upload\n\n  const errorMessages = useMemo(\n    () => ({\n      'Field.errorRequired': formsTr.errorRequired,\n    }),\n    [formsTr.errorRequired]\n  )\n\n  const preparedProps = {\n    errorMessages,\n    validateRequired,\n    ...props,\n  }\n\n  const {\n    id,\n    className,\n    width: widthProp = 'stretch',\n    value,\n    label,\n    labelDescription,\n    help,\n    htmlAttributes,\n    handleChange,\n    handleFocus,\n    handleBlur,\n    ...rest\n  } = useFieldProps(preparedProps, {\n    executeOnChangeRegardlessOfError: true,\n  })\n\n  // Upload props\n  const {\n    title = sharedTr.title,\n    text = sharedTr.text,\n    acceptedFileTypes = ['pdf', 'png', 'jpg', 'jpeg'],\n    filesAmountLimit = 100,\n    fileMaxSize = 5,\n    skeleton,\n    onFileDelete,\n  } = rest\n\n  const { setFiles } = useUpload(id)\n\n  useEffect(() => {\n    setFiles(value)\n  }, [handleBlur, setFiles, value])\n\n  const changeHandler = useCallback(\n    ({ files }: { files: UploadValue }) => {\n      // Prevents the form-status from showing up\n      handleBlur()\n      handleFocus()\n      handleChange(files)\n    },\n    [handleBlur, handleChange, handleFocus]\n  )\n\n  const width = widthProp as FieldBlockWidth\n  const fieldBlockProps: FieldBlockProps = {\n    id,\n    forId: id,\n    labelSrOnly: true,\n    className,\n    width,\n    ...pickSpacingProps(props),\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps}>\n      <Upload\n        id={id}\n        acceptedFileTypes={acceptedFileTypes}\n        filesAmountLimit={filesAmountLimit}\n        fileMaxSize={fileMaxSize}\n        skeleton={skeleton}\n        onChange={changeHandler}\n        onFileDelete={onFileDelete}\n        title={label ?? title}\n        text={\n          help ? (\n            <>\n              {labelDescription ?? text}\n              <HelpButton\n                left={text ? 'x-small' : false}\n                title={help.title}\n              >\n                {help.content}\n              </HelpButton>\n            </>\n          ) : (\n            labelDescription ?? text\n          )\n        }\n        {...htmlAttributes}\n      />\n    </FieldBlock>\n  )\n}\n\nexport default UploadComponent\n\nUploadComponent._supportsSpacingProps = true\n"],"mappings":"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"}