@dnb/eufemia 10.64.0 → 10.65.0

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

@@ -2,7 +2,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _em, _em2;
-const _excluded = ["value", "title", "children", "error", "help"];
+const _excluded = ["value", "title", "children", "error", "help", "size"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useMemo, useCallback } from 'react';
@@ -31,6 +31,7 @@ function Selection(props) {
     error,
     hasError,
     disabled,
+    size,
     emptyValue,
     width = 'large',
     htmlAttributes,
@@ -107,15 +108,19 @@ function Selection(props) {
             }
           }
         });
-        return React.createElement(FieldBlock, _extends({}, fieldBlockProps, {
-          labelHeight: "small",
+        const additionalFieldBlockProps = {
           asFieldset: React.Children.count(items) > 1
-        }), React.createElement(Component.Group, {
+        };
+        if (!size) {
+          additionalFieldBlockProps.labelHeight = 'small';
+        }
+        return React.createElement(FieldBlock, _extends({}, fieldBlockProps, additionalFieldBlockProps), React.createElement(Component.Group, {
+          size: size,
           className: cn,
           layout_direction: optionsLayout === 'horizontal' ? 'row' : 'column',
           disabled: disabled,
           on_change: onChangeHandler,
-          value: String(value !== null && value !== void 0 ? value : '')
+          value: String(value !== null && value !== void 0 ? value : '') || undefined
         }, items));
       }
     case 'autocomplete':
@@ -135,6 +140,7 @@ function Selection(props) {
           disabled
         }, htmlAttributes), {}, {
           data,
+          size,
           on_change: handleDropdownChange,
           on_show: handleShow,
           on_hide: handleHide,
@@ -166,13 +172,13 @@ function renderRadioItems(_ref6) {
   } = _ref6;
   const optionsCount = React.Children.count(children) + ((dataList === null || dataList === void 0 ? void 0 : dataList.length) || 0);
   const createOption = (props, i) => {
-    var _ref7;
     const {
         value,
         title,
         children,
         error,
-        help
+        help,
+        size
       } = props,
       rest = _objectWithoutProperties(props, _excluded);
     const label = title !== null && title !== void 0 ? title : children;
@@ -190,9 +196,10 @@ function renderRadioItems(_ref6) {
       key: `option-${i}-${id}`,
       label: variant === 'radio' ? label : undefined,
       text: variant === 'button' ? label : undefined,
-      value: String((_ref7 = value !== null && value !== void 0 ? value : valueProp) !== null && _ref7 !== void 0 ? _ref7 : ''),
+      value: String(value !== null && value !== void 0 ? value : valueProp) || undefined,
       status: (hasError || checkForError([error, info, warning])) && 'error',
-      suffix: suffix
+      suffix: suffix,
+      size: size
     }, htmlAttributes, rest));
   };
   return [...(dataList || []).map((props, i) => {
@@ -201,10 +208,10 @@ function renderRadioItems(_ref6) {
     createOption
   }) || [])].filter(Boolean);
 }
-export function mapOptions(children, _ref8) {
+export function mapOptions(children, _ref7) {
   let {
     createOption
-  } = _ref8;
+  } = _ref7;
   return React.Children.map(children, (child, i) => {
     if (React.isValidElement(child)) {
       if (child.type === OptionField) {
@@ -227,9 +234,9 @@ export function makeOptions(children, transformSelection) {
       child = child['props'].children;
     }
     if (React.isValidElement(child) && child.type === OptionField) {
-      var _ref9, _props$title, _props$value;
+      var _ref8, _props$title, _props$value;
       const props = child.props;
-      const title = (_ref9 = (_props$title = props.title) !== null && _props$title !== void 0 ? _props$title : props.children) !== null && _ref9 !== void 0 ? _ref9 : _em || (_em = React.createElement("em", null, "Untitled"));
+      const title = (_ref8 = (_props$title = props.title) !== null && _props$title !== void 0 ? _props$title : props.children) !== null && _ref8 !== void 0 ? _ref8 : _em || (_em = React.createElement("em", null, "Untitled"));
       const content = props.text ? [title, props.text] : title;
       const selected_value = transformSelection ? transformSelection(props) : undefined;
       const selectedKey = String((_props$value = props.value) !== null && _props$value !== void 0 ? _props$value : '');

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

@@ -1 +1 @@
-{"version":3,"file":"Selection.js","names":["React","useMemo","useCallback","classnames","convertJsxToString","makeUniqueId","ToggleButton","Dropdown","Radio","Autocomplete","HelpButton","OptionField","useFieldProps","checkForError","pickSpacingProps","FieldBlock","convertCamelCaseProps","useDataValue","Selection","props","clearValue","id","className","variant","layout","optionsLayout","placeholder","value","info","warning","error","hasError","disabled","emptyValue","width","htmlAttributes","setHasFocus","handleChange","setDisplayValue","transformSelection","data","dataPath","children","autocompleteProps","dropdownProps","getValueByPath","dataList","handleDropdownChange","_ref","selectedKey","onChangeHandler","_ref2","undefined","handleShow","_ref3","handleHide","_ref4","cn","fieldBlockProps","_objectSpread","forId","disableStatusSummary","Component","items","renderRadioItems","iterateOverItems","_ref5","v","label","createElement","_extends","labelHeight","asFieldset","Children","count","Group","layout_direction","on_change","String","_data$find","renderDropdownItems","concat","makeOptions","filter","Boolean","displayValue","find","item","content","sharedProps","list_class","portal_class","title","status","on_show","on_hide","stretch","specificFieldBlockProps","contentWidth","_ref6","valueProp","optionsCount","length","createOption","i","_ref7","help","rest","_objectWithoutProperties","_excluded","suffix","size","key","text","map","mapOptions","_ref8","child","isValidElement","type","nestedChildren","cloneElement","_child","_child$props","_child$props$children","_ref9","_props$title","_props$value","_em","selected_value","style","_em2","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Selection/Selection.tsx"],"sourcesContent":["import React, { useMemo, useCallback } from 'react'\nimport classnames from 'classnames'\nimport {\n  convertJsxToString,\n  makeUniqueId,\n} from '../../../../shared/component-helper'\nimport {\n  ToggleButton,\n  Dropdown,\n  Radio,\n  Autocomplete,\n  HelpButton,\n} from '../../../../components'\nimport OptionField, { Props as OptionFieldProps } from '../Option'\nimport { useFieldProps } from '../../hooks'\nimport { checkForError, ReturnAdditional } from '../../hooks/useFieldProps'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport FieldBlock, {\n  Props as FieldBlockProps,\n  FieldBlockWidth,\n} from '../../FieldBlock'\nimport { FieldProps, Path } from '../../types'\nimport type { FormStatusText } from '../../../../components/FormStatus'\nimport type { AutocompleteAllProps } from '../../../../components/Autocomplete'\nimport type { DropdownAllProps } from '../../../../components/Dropdown'\nimport { HelpProps } from '../../../../components/help-button/HelpButtonInline'\nimport { DrawerListProps } from '../../../../fragments/DrawerList'\nimport {\n  convertCamelCaseProps,\n  ToCamelCase,\n} from '../../../../shared/helpers/withCamelCaseProps'\nimport useDataValue from '../../hooks/useDataValue'\nimport { FormError } from '../../utils'\n\ntype IOption = {\n  title: string | React.ReactNode\n  value: number | string\n  status: FormStatusText\n}\nexport type Data = Array<{\n  value: string\n  title: React.ReactNode\n  text?: React.ReactNode\n  disabled?: boolean\n  style?: React.CSSProperties\n}>\n\nexport type Props = FieldProps<IOption['value']> & {\n  /**\n   * Defines the variant of the component.\n   * Default: dropdown\n   */\n  variant?: 'dropdown' | 'autocomplete' | 'radio' | 'button'\n\n  /**\n   * The width of the component.\n   * Default: large\n   */\n  width?: FieldBlockWidth\n\n  /**\n   * Defines the layout of the options for radio and button variants.\n   */\n  optionsLayout?: 'horizontal' | 'vertical'\n\n  /**\n   * Transform the displayed selection for Dropdown and Autocomplete variant.\n   * Use it to display a different value than the one in the data set.\n   */\n  transformSelection?: (props: OptionFieldProps) => React.ReactNode\n\n  /**\n   * The path to the context data (Form.Handler).\n   * The context data object needs to have a `value` and a `title` property.\n   */\n  dataPath?: Path\n\n  /**\n   * Data to be used for the component. The object needs to have a `value` and a `title` property.\n   * The generated options will be placed above given JSX based children.\n   */\n  data?: Data\n\n  /**\n   * Autocomplete specific props\n   */\n  autocompleteProps?: ToCamelCase<AutocompleteAllProps>\n\n  /**\n   * Dropdown specific props\n   */\n  dropdownProps?: ToCamelCase<DropdownAllProps>\n\n  /**\n   * The content of the component.\n   */\n  children?: React.ReactNode\n}\n\nfunction Selection(props: Props) {\n  const clearValue = useMemo(() => `clear-option-${makeUniqueId()}`, [])\n\n  const {\n    id,\n    className,\n    variant = 'dropdown',\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    placeholder,\n    value,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    emptyValue,\n    width = 'large',\n    htmlAttributes,\n    setHasFocus,\n    handleChange,\n    setDisplayValue,\n    transformSelection,\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--layout-${layout}`,\n    `dnb-forms-field-selection--options-layout--${optionsLayout}`,\n    className\n  )\n\n  const fieldBlockProps: FieldBlockProps = {\n    forId: id,\n    className: cn,\n    disableStatusSummary: true,\n    ...pickSpacingProps(props),\n  }\n\n  switch (variant) {\n    case 'radio':\n    case 'button': {\n      const Component = (\n        variant === 'radio' ? Radio : ToggleButton\n      ) as typeof Radio & typeof ToggleButton\n\n      const items = renderRadioItems({\n        id,\n        value,\n        variant,\n        info,\n        warning,\n        htmlAttributes,\n        children,\n        dataList,\n        hasError,\n        iterateOverItems: ({ value: v, label }) => {\n          if (v === value) {\n            setDisplayValue(label)\n          }\n        },\n      })\n\n      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 data = renderDropdownItems(dataList, transformSelection)\n        .concat(makeOptions(children, transformSelection))\n        .filter(Boolean)\n      const displayValue = data.find((item) => item.selectedKey === value)\n        ?.content\n      setDisplayValue(displayValue)\n\n      const sharedProps: AutocompleteAllProps & DropdownAllProps = {\n        id,\n        list_class: 'dnb-forms-field-selection__list',\n        portal_class: 'dnb-forms-field-selection__portal',\n        title: placeholder,\n        value: String(value ?? ''),\n        status:\n          (hasError || checkForError([error, info, warning])) && 'error',\n        disabled,\n        ...htmlAttributes,\n        data,\n        on_change: handleDropdownChange,\n        on_show: handleShow,\n        on_hide: handleHide,\n        stretch: true,\n      }\n\n      const specificFieldBlockProps: FieldBlockProps = {\n        width,\n      }\n      if (layout === 'horizontal') {\n        specificFieldBlockProps.width = undefined\n        specificFieldBlockProps.contentWidth = width\n      }\n\n      return (\n        <FieldBlock {...fieldBlockProps} {...specificFieldBlockProps}>\n          {variant === 'autocomplete' ? (\n            <Autocomplete\n              {...sharedProps}\n              {...(autocompleteProps\n                ? (convertCamelCaseProps(\n                    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\ntype OptionProps = React.ComponentProps<\n  React.FC<{\n    value: Props['value']\n    error: Error | FormError | undefined\n    help: HelpProps\n    title: React.ReactNode\n    children: React.ReactNode\n  }>\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 suffix = help ? (\n      <HelpButton size=\"small\" title={convertJsxToString(help.title)}>\n        {help.content}\n      </HelpButton>\n    ) : undefined\n\n    iterateOverItems?.({ value, label })\n\n    const Component = (\n      variant === 'radio' ? Radio : ToggleButton\n    ) as typeof Radio & typeof ToggleButton\n\n    return (\n      <Component\n        id={optionsCount === 1 ? id : undefined}\n        key={`option-${i}-${id}`}\n        label={variant === 'radio' ? label : undefined}\n        text={variant === 'button' ? label : undefined}\n        value={String(value ?? valueProp ?? '')}\n        status={\n          (hasError || checkForError([error, info, warning])) && 'error'\n        }\n        suffix={suffix}\n        {...htmlAttributes}\n        {...rest}\n      />\n    )\n  }\n\n  return [\n    ...(dataList || []).map((props, i) => {\n      return createOption(props as OptionProps, i)\n    }),\n    ...(mapOptions(children, { createOption }) || []),\n  ].filter(Boolean)\n}\n\nexport function mapOptions(\n  children: React.ReactNode,\n  {\n    createOption,\n  }: { createOption: (props: OptionProps, i: number) => React.ReactNode }\n) {\n  return React.Children.map(\n    children,\n    (child: React.ReactElement<OptionProps>, i) => {\n      if (React.isValidElement(child)) {\n        if (child.type === OptionField) {\n          return createOption(child.props, i)\n        }\n\n        if (child.props.children) {\n          const nestedChildren = mapOptions(child.props.children, {\n            createOption,\n          })\n          return React.cloneElement(child, child.props, nestedChildren)\n        }\n      }\n\n      return child\n    }\n  )\n}\n\nexport function makeOptions<T = DrawerListProps['data']>(\n  children: React.ReactNode,\n  transformSelection?: Props['transformSelection']\n): T {\n  return React.Children.map(children, (child) => {\n    if (child?.['props']?.children?.type === OptionField) {\n      child = child['props'].children\n    }\n\n    if (React.isValidElement(child) && child.type === OptionField) {\n      const props = child.props as OptionFieldProps\n      const title = props.title ?? props.children ?? <em>Untitled</em>\n      const content = props.text ? [title, props.text] : title\n      const selected_value = transformSelection\n        ? transformSelection(props)\n        : undefined\n      const selectedKey = String(props.value ?? '')\n      const disabled = props.disabled\n      const style = props.style\n\n      return { selectedKey, selected_value, content, disabled, style }\n    }\n\n    // For other children, just show them as content\n    if (child) {\n      return {\n        content: child,\n      }\n    }\n  }) as T\n}\n\nfunction renderDropdownItems(\n  data: Data,\n  transformSelection?: Props['transformSelection']\n) {\n  return (\n    data?.map((props) => {\n      const { value, title, text, disabled, style } = props\n      return {\n        selectedKey: value,\n        content: (text ? [title, text] : title) || <em>Untitled</em>,\n        selected_value: transformSelection\n          ? transformSelection(props)\n          : undefined,\n        disabled,\n        style,\n      }\n    }) || []\n  )\n}\n\nSelection._supportsSpacingProps = true\nexport default Selection\n"],"mappings":"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"}
+{"version":3,"file":"Selection.js","names":["React","useMemo","useCallback","classnames","convertJsxToString","makeUniqueId","ToggleButton","Dropdown","Radio","Autocomplete","HelpButton","OptionField","useFieldProps","checkForError","pickSpacingProps","FieldBlock","convertCamelCaseProps","useDataValue","Selection","props","clearValue","id","className","variant","layout","optionsLayout","placeholder","value","info","warning","error","hasError","disabled","size","emptyValue","width","htmlAttributes","setHasFocus","handleChange","setDisplayValue","transformSelection","data","dataPath","children","autocompleteProps","dropdownProps","getValueByPath","dataList","handleDropdownChange","_ref","selectedKey","onChangeHandler","_ref2","undefined","handleShow","_ref3","handleHide","_ref4","cn","fieldBlockProps","_objectSpread","forId","disableStatusSummary","Component","items","renderRadioItems","iterateOverItems","_ref5","v","label","additionalFieldBlockProps","asFieldset","Children","count","labelHeight","createElement","_extends","Group","layout_direction","on_change","String","_data$find","renderDropdownItems","concat","makeOptions","filter","Boolean","displayValue","find","item","content","sharedProps","list_class","portal_class","title","status","on_show","on_hide","stretch","specificFieldBlockProps","contentWidth","_ref6","valueProp","optionsCount","length","createOption","i","help","rest","_objectWithoutProperties","_excluded","suffix","key","text","map","mapOptions","_ref7","child","isValidElement","type","nestedChildren","cloneElement","_child","_child$props","_child$props$children","_ref8","_props$title","_props$value","_em","selected_value","style","_em2","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Selection/Selection.tsx"],"sourcesContent":["import React, { useMemo, useCallback } from 'react'\nimport classnames from 'classnames'\nimport {\n  convertJsxToString,\n  makeUniqueId,\n} from '../../../../shared/component-helper'\nimport {\n  ToggleButton,\n  Dropdown,\n  Radio,\n  Autocomplete,\n  HelpButton,\n} from '../../../../components'\nimport OptionField, { Props as OptionFieldProps } from '../Option'\nimport { useFieldProps } from '../../hooks'\nimport { checkForError, ReturnAdditional } from '../../hooks/useFieldProps'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport FieldBlock, {\n  Props as FieldBlockProps,\n  FieldBlockWidth,\n} from '../../FieldBlock'\nimport { FieldProps, Path } from '../../types'\nimport type { FormStatusText } from '../../../../components/FormStatus'\nimport type { AutocompleteAllProps } from '../../../../components/Autocomplete'\nimport type { DropdownAllProps } from '../../../../components/Dropdown'\nimport { HelpProps } from '../../../../components/help-button/HelpButtonInline'\nimport { DrawerListProps } from '../../../../fragments/DrawerList'\nimport {\n  convertCamelCaseProps,\n  ToCamelCase,\n} from '../../../../shared/helpers/withCamelCaseProps'\nimport useDataValue from '../../hooks/useDataValue'\nimport { FormError } from '../../utils'\nimport type { RadioProps } from '../../../../components/Radio'\nimport type { ToggleButtonProps } from '../../../../components/ToggleButton'\nimport type { RadioGroupProps } from '../../../../components/radio/RadioGroup'\nimport type { ToggleButtonGroupProps } from '../../../../components/toggle-button/ToggleButtonGroup'\n\ntype IOption = {\n  title: string | React.ReactNode\n  value: number | string\n  status: FormStatusText\n}\nexport type Data = Array<{\n  value: string\n  title: React.ReactNode\n  text?: React.ReactNode\n  disabled?: boolean\n  style?: React.CSSProperties\n}>\n\nexport type Props = FieldProps<IOption['value']> & {\n  /**\n   * Defines the variant of the component.\n   * Default: dropdown\n   */\n  variant?: 'dropdown' | 'autocomplete' | 'radio' | 'button'\n\n  /**\n   * The width of the component.\n   * Default: large\n   */\n  width?: FieldBlockWidth\n\n  /**\n   * Defines the layout of the options for radio and button variants.\n   */\n  optionsLayout?: 'horizontal' | 'vertical'\n\n  /**\n   * Transform the displayed selection for Dropdown and Autocomplete variant.\n   * Use it to display a different value than the one in the data set.\n   */\n  transformSelection?: (props: OptionFieldProps) => React.ReactNode\n\n  /**\n   * The path to the context data (Form.Handler).\n   * The context data object needs to have a `value` and a `title` property.\n   */\n  dataPath?: Path\n\n  /**\n   * Data to be used for the component. The object needs to have a `value` and a `title` property.\n   * The generated options will be placed above given JSX based children.\n   */\n  data?: Data\n\n  /**\n   * Autocomplete specific props\n   */\n  autocompleteProps?: ToCamelCase<AutocompleteAllProps>\n\n  /**\n   * Dropdown specific props\n   */\n  dropdownProps?: ToCamelCase<DropdownAllProps>\n\n  /**\n   * The size of the component.\n   */\n  size?:\n    | ToggleButtonGroupProps['size']\n    | RadioGroupProps['size']\n    | AutocompleteAllProps['size']\n    | DropdownAllProps['size']\n\n  /**\n   * The content of the component.\n   */\n  children?: React.ReactNode\n}\n\nfunction Selection(props: Props) {\n  const clearValue = useMemo(() => `clear-option-${makeUniqueId()}`, [])\n\n  const {\n    id,\n    className,\n    variant = 'dropdown',\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    placeholder,\n    value,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    size,\n    emptyValue,\n    width = 'large',\n    htmlAttributes,\n    setHasFocus,\n    handleChange,\n    setDisplayValue,\n    transformSelection,\n    data,\n    dataPath,\n    children,\n\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--layout-${layout}`,\n    `dnb-forms-field-selection--options-layout--${optionsLayout}`,\n    className\n  )\n\n  const fieldBlockProps: FieldBlockProps = {\n    forId: id,\n    className: cn,\n    disableStatusSummary: true,\n    ...pickSpacingProps(props),\n  }\n\n  switch (variant) {\n    case 'radio':\n    case 'button': {\n      const Component = (\n        variant === 'radio' ? Radio : ToggleButton\n      ) as typeof Radio & typeof ToggleButton\n\n      const items = renderRadioItems({\n        id,\n        value,\n        variant,\n        info,\n        warning,\n        htmlAttributes,\n        children,\n        dataList,\n        hasError,\n        iterateOverItems: ({ value: v, label }) => {\n          if (v === value) {\n            setDisplayValue(label)\n          }\n        },\n      })\n\n      const additionalFieldBlockProps: FieldBlockProps = {\n        asFieldset: React.Children.count(items) > 1,\n      }\n      if (!size) {\n        additionalFieldBlockProps.labelHeight = 'small'\n      }\n\n      return (\n        <FieldBlock {...fieldBlockProps} {...additionalFieldBlockProps}>\n          <Component.Group\n            size={size}\n            className={cn}\n            layout_direction={\n              optionsLayout === 'horizontal' ? 'row' : 'column'\n            }\n            disabled={disabled}\n            on_change={onChangeHandler}\n            value={String(value ?? '') || undefined}\n          >\n            {items}\n          </Component.Group>\n        </FieldBlock>\n      )\n    }\n\n    case 'autocomplete':\n    case 'dropdown': {\n      const data = renderDropdownItems(dataList, transformSelection)\n        .concat(makeOptions(children, transformSelection))\n        .filter(Boolean)\n      const displayValue = data.find((item) => item.selectedKey === value)\n        ?.content\n      setDisplayValue(displayValue)\n\n      const sharedProps: AutocompleteAllProps & DropdownAllProps = {\n        id,\n        list_class: 'dnb-forms-field-selection__list',\n        portal_class: 'dnb-forms-field-selection__portal',\n        title: placeholder,\n        value: String(value ?? ''),\n        status:\n          (hasError || checkForError([error, info, warning])) && 'error',\n        disabled,\n        ...htmlAttributes,\n        data,\n        size,\n        on_change: handleDropdownChange,\n        on_show: handleShow,\n        on_hide: handleHide,\n        stretch: true,\n      }\n\n      const specificFieldBlockProps: FieldBlockProps = {\n        width,\n      }\n      if (layout === 'horizontal') {\n        specificFieldBlockProps.width = undefined\n        specificFieldBlockProps.contentWidth = width\n      }\n\n      return (\n        <FieldBlock {...fieldBlockProps} {...specificFieldBlockProps}>\n          {variant === 'autocomplete' ? (\n            <Autocomplete\n              {...sharedProps}\n              {...(autocompleteProps\n                ? (convertCamelCaseProps(\n                    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\ntype OptionProps = React.ComponentProps<\n  React.FC<{\n    value: Props['value']\n    error: Error | FormError | undefined\n    help: HelpProps\n    title: React.ReactNode\n    children: React.ReactNode\n    size?: ToggleButtonProps['size'] | RadioProps['size']\n  }>\n>\n\nfunction renderRadioItems({\n  id,\n  value: valueProp,\n  variant,\n  info,\n  warning,\n  htmlAttributes,\n  children,\n  dataList,\n  hasError,\n  iterateOverItems,\n}: {\n  id: string\n  value: Props['value']\n  variant: Props['variant']\n  info: Props['info']\n  warning: Props['warning']\n  htmlAttributes: Props['htmlAttributes']\n  children: Props['children']\n  dataList: Data\n  hasError: ReturnAdditional<Props['value']>['hasError']\n  iterateOverItems?: (item: {\n    value: Props['value']\n    label: Props['children']\n  }) => void\n}) {\n  const optionsCount =\n    React.Children.count(children) + (dataList?.length || 0)\n\n  const createOption = (props: OptionProps, i: number) => {\n    const { value, title, children, error, help, size, ...rest } = props\n\n    const label = title ?? children\n    const suffix = help ? (\n      <HelpButton size=\"small\" title={convertJsxToString(help.title)}>\n        {help.content}\n      </HelpButton>\n    ) : undefined\n\n    iterateOverItems?.({ value, label })\n\n    const Component = (\n      variant === 'radio' ? Radio : ToggleButton\n    ) as typeof Radio & typeof ToggleButton\n\n    return (\n      <Component\n        id={optionsCount === 1 ? id : undefined}\n        key={`option-${i}-${id}`}\n        label={variant === 'radio' ? label : undefined}\n        text={variant === 'button' ? label : undefined}\n        value={String(value ?? valueProp) || undefined}\n        status={\n          (hasError || checkForError([error, info, warning])) && 'error'\n        }\n        suffix={suffix}\n        size={size}\n        {...htmlAttributes}\n        {...rest}\n      />\n    )\n  }\n\n  return [\n    ...(dataList || []).map((props, i) => {\n      return createOption(props as OptionProps, i)\n    }),\n    ...(mapOptions(children, { createOption }) || []),\n  ].filter(Boolean)\n}\n\nexport function mapOptions(\n  children: React.ReactNode,\n  {\n    createOption,\n  }: { createOption: (props: OptionProps, i: number) => React.ReactNode }\n) {\n  return React.Children.map(\n    children,\n    (child: React.ReactElement<OptionProps>, i) => {\n      if (React.isValidElement(child)) {\n        if (child.type === OptionField) {\n          return createOption(child.props, i)\n        }\n\n        if (child.props.children) {\n          const nestedChildren = mapOptions(child.props.children, {\n            createOption,\n          })\n          return React.cloneElement(child, child.props, nestedChildren)\n        }\n      }\n\n      return child\n    }\n  )\n}\n\nexport function makeOptions<T = DrawerListProps['data']>(\n  children: React.ReactNode,\n  transformSelection?: Props['transformSelection']\n): T {\n  return React.Children.map(children, (child) => {\n    if (child?.['props']?.children?.type === OptionField) {\n      child = child['props'].children\n    }\n\n    if (React.isValidElement(child) && child.type === OptionField) {\n      const props = child.props as OptionFieldProps\n      const title = props.title ?? props.children ?? <em>Untitled</em>\n      const content = props.text ? [title, props.text] : title\n      const selected_value = transformSelection\n        ? transformSelection(props)\n        : undefined\n      const selectedKey = String(props.value ?? '')\n      const disabled = props.disabled\n      const style = props.style\n\n      return { selectedKey, selected_value, content, disabled, style }\n    }\n\n    // For other children, just show them as content\n    if (child) {\n      return {\n        content: child,\n      }\n    }\n  }) as T\n}\n\nfunction renderDropdownItems(\n  data: Data,\n  transformSelection?: Props['transformSelection']\n) {\n  return (\n    data?.map((props) => {\n      const { value, title, text, disabled, style } = props\n      return {\n        selectedKey: value,\n        content: (text ? [title, text] : title) || <em>Untitled</em>,\n        selected_value: transformSelection\n          ? transformSelection(props)\n          : undefined,\n        disabled,\n        style,\n      }\n    }) || []\n  )\n}\n\nSelection._supportsSpacingProps = true\nexport default Selection\n"],"mappings":"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"}

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

@@ -44,6 +44,11 @@ export const SelectionProperties = {
     type: 'object',
     status: 'optional'
   },
+  size: {
+    doc: 'The sizes you can choose is small (1.5rem), default (2rem), medium (2.5rem) and large (3rem) are supported component sizes. Defaults to default / null. Also, if you define a number like size="2" then it will be forwarded as the input element attribute. Consider rather setting field sizes with [Form.Appearance](/uilib/extensions/forms/Form/Appearance/).',
+    type: 'string',
+    status: 'optional'
+  },
   children: {
     doc: 'For providing Option components, and other children.',
     type: 'React.Node',

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

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

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

@@ -1,3 +1,6 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+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 { inputProperties } from '../../../../components/input/InputDocs';
 export const stringProperties = {
   multiline: {
@@ -55,7 +58,9 @@ export const stringProperties = {
     type: ['string', 'false'],
     status: 'optional'
   },
-  size: inputProperties.size,
+  size: _objectSpread(_objectSpread({}, inputProperties.size), {}, {
+    doc: `${inputProperties.size.doc} Consider rather setting field sizes with [Form.Appearance](/uilib/extensions/forms/Form/Appearance/).`
+  }),
   align: inputProperties.align,
   selectall: inputProperties.selectall,
   clear: inputProperties.clear,

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

@@ -1 +1 @@
-{"version":3,"file":"StringDocs.js","names":["inputProperties","stringProperties","multiline","doc","type","status","leftIcon","rightIcon","capitalize","trim","inputMode","autoComplete","minLength","maxLength","pattern","width","size","align","selectall","clear","keepPlaceholder","keep_placeholder","rows","autoresizeMaxRows","characterCounter","autoresize","inputClassName","innerRef","submitElement"],"sources":["../../../../../../src/extensions/forms/Field/String/StringDocs.ts"],"sourcesContent":["import { inputProperties } from '../../../../components/input/InputDocs'\nimport { PropertiesTableProps } from '../../../../shared/types'\n\nexport const stringProperties: PropertiesTableProps = {\n  multiline: {\n    doc: 'True to be able to write in multiple lines (switching from input-element to textarea-element).',\n    type: 'boolean',\n    status: 'optional',\n  },\n  leftIcon: {\n    doc: 'For icon at the left side of the text input.',\n    type: 'string',\n    status: 'optional',\n  },\n  rightIcon: {\n    doc: 'For icon at the right side of the text input.',\n    type: 'string',\n    status: 'optional',\n  },\n  capitalize: {\n    doc: 'When set to true, it will capitalize the first letter of every word, transforming the rest to lowercase.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  trim: {\n    doc: 'When true, it will trim leading and trailing whitespaces on blur, triggering onChange if the value changes.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  inputMode: {\n    doc: 'Define an [inputmode](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode).',\n    type: 'string',\n    status: 'optional',\n  },\n  autoComplete: {\n    doc: 'For HTML [autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) attributes.',\n    type: ['on', 'string'],\n    status: 'optional',\n  },\n  minLength: {\n    doc: 'Validation for minimum length of the text (number of characters).',\n    type: 'number',\n    status: 'optional',\n  },\n  maxLength: {\n    doc: 'Validation for maximum length of the text (number of characters).',\n    type: 'number',\n    status: 'optional',\n  },\n  pattern: {\n    doc: 'Validation based on regex pattern.',\n    type: 'string',\n    status: 'optional',\n  },\n  width: {\n    doc: '`false` for no width (use browser default), small, medium or large for predefined standard widths, stretch to fill available width.',\n    type: ['string', 'false'],\n    status: 'optional',\n  },\n\n  // - Input props\n  size: inputProperties.size,\n  align: inputProperties.align,\n  selectall: inputProperties.selectall,\n  clear: inputProperties.clear,\n  keepPlaceholder: inputProperties.keep_placeholder,\n\n  // - Textarea props\n  rows: {\n    doc: 'For multiline, set how many rows of text can be shown by default. Defaults to 2.',\n    type: 'number',\n    status: 'optional',\n  },\n  autoresizeMaxRows: {\n    doc: 'For multiline, set how many rows of text can be shown at max. Defaults to 6',\n    type: 'number',\n    status: 'optional',\n  },\n  characterCounter: {\n    doc: \"For multiline, use a number to define the displayed max length e.g. `40` or `{ max: 40, variant: 'down' }`.\",\n    type: ['number', 'object'],\n    status: 'optional',\n  },\n  autoresize: {\n    doc: 'For multiline, set true to expand when writing longer texts. Defaults to true.',\n    type: 'boolean',\n    status: 'optional',\n  },\n\n  // - Additional props\n  inputClassName: {\n    doc: 'Class name set on the <input> DOM element.',\n    type: 'string',\n    status: 'optional',\n  },\n  innerRef: {\n    doc: 'By providing a React.Ref we can get the internally used input element (DOM).',\n    type: 'React.Ref',\n    status: 'optional',\n  },\n  submitElement: {\n    doc: 'Accepts a React element which will show up like the \"submit button\" would do on type=\"search\".',\n    type: 'React.Element',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAAA,SAASA,eAAe,QAAQ,wCAAwC;AAGxE,OAAO,MAAMC,gBAAsC,GAAG;EACpDC,SAAS,EAAE;IACTC,GAAG,EAAE,gGAAgG;IACrGC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDC,QAAQ,EAAE;IACRH,GAAG,EAAE,8CAA8C;IACnDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,SAAS,EAAE;IACTJ,GAAG,EAAE,+CAA+C;IACpDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,UAAU,EAAE;IACVL,GAAG,EAAE,0GAA0G;IAC/GC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDI,IAAI,EAAE;IACJN,GAAG,EAAE,6GAA6G;IAClHC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDK,SAAS,EAAE;IACTP,GAAG,EAAE,uGAAuG;IAC5GC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDM,YAAY,EAAE;IACZR,GAAG,EAAE,gHAAgH;IACrHC,IAAI,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC;IACtBC,MAAM,EAAE;EACV,CAAC;EACDO,SAAS,EAAE;IACTT,GAAG,EAAE,mEAAmE;IACxEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDQ,SAAS,EAAE;IACTV,GAAG,EAAE,mEAAmE;IACxEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDS,OAAO,EAAE;IACPX,GAAG,EAAE,oCAAoC;IACzCC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDU,KAAK,EAAE;IACLZ,GAAG,EAAE,qIAAqI;IAC1IC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,MAAM,EAAE;EACV,CAAC;EAGDW,IAAI,EAAEhB,eAAe,CAACgB,IAAI;EAC1BC,KAAK,EAAEjB,eAAe,CAACiB,KAAK;EAC5BC,SAAS,EAAElB,eAAe,CAACkB,SAAS;EACpCC,KAAK,EAAEnB,eAAe,CAACmB,KAAK;EAC5BC,eAAe,EAAEpB,eAAe,CAACqB,gBAAgB;EAGjDC,IAAI,EAAE;IACJnB,GAAG,EAAE,kFAAkF;IACvFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDkB,iBAAiB,EAAE;IACjBpB,GAAG,EAAE,6EAA6E;IAClFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDmB,gBAAgB,EAAE;IAChBrB,GAAG,EAAE,6GAA6G;IAClHC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV,CAAC;EACDoB,UAAU,EAAE;IACVtB,GAAG,EAAE,gFAAgF;IACrFC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EAGDqB,cAAc,EAAE;IACdvB,GAAG,EAAE,4CAA4C;IACjDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDsB,QAAQ,EAAE;IACRxB,GAAG,EAAE,8EAA8E;IACnFC,IAAI,EAAE,WAAW;IACjBC,MAAM,EAAE;EACV,CAAC;EACDuB,aAAa,EAAE;IACbzB,GAAG,EAAE,gGAAgG;IACrGC,IAAI,EAAE,eAAe;IACrBC,MAAM,EAAE;EACV;AACF,CAAC"}
+{"version":3,"file":"StringDocs.js","names":["inputProperties","stringProperties","multiline","doc","type","status","leftIcon","rightIcon","capitalize","trim","inputMode","autoComplete","minLength","maxLength","pattern","width","size","_objectSpread","align","selectall","clear","keepPlaceholder","keep_placeholder","rows","autoresizeMaxRows","characterCounter","autoresize","inputClassName","innerRef","submitElement"],"sources":["../../../../../../src/extensions/forms/Field/String/StringDocs.ts"],"sourcesContent":["import { inputProperties } from '../../../../components/input/InputDocs'\nimport { PropertiesTableProps } from '../../../../shared/types'\n\nexport const stringProperties: PropertiesTableProps = {\n  multiline: {\n    doc: 'True to be able to write in multiple lines (switching from input-element to textarea-element).',\n    type: 'boolean',\n    status: 'optional',\n  },\n  leftIcon: {\n    doc: 'For icon at the left side of the text input.',\n    type: 'string',\n    status: 'optional',\n  },\n  rightIcon: {\n    doc: 'For icon at the right side of the text input.',\n    type: 'string',\n    status: 'optional',\n  },\n  capitalize: {\n    doc: 'When set to true, it will capitalize the first letter of every word, transforming the rest to lowercase.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  trim: {\n    doc: 'When true, it will trim leading and trailing whitespaces on blur, triggering onChange if the value changes.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  inputMode: {\n    doc: 'Define an [inputmode](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode).',\n    type: 'string',\n    status: 'optional',\n  },\n  autoComplete: {\n    doc: 'For HTML [autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) attributes.',\n    type: ['on', 'string'],\n    status: 'optional',\n  },\n  minLength: {\n    doc: 'Validation for minimum length of the text (number of characters).',\n    type: 'number',\n    status: 'optional',\n  },\n  maxLength: {\n    doc: 'Validation for maximum length of the text (number of characters).',\n    type: 'number',\n    status: 'optional',\n  },\n  pattern: {\n    doc: 'Validation based on regex pattern.',\n    type: 'string',\n    status: 'optional',\n  },\n  width: {\n    doc: '`false` for no width (use browser default), small, medium or large for predefined standard widths, stretch to fill available width.',\n    type: ['string', 'false'],\n    status: 'optional',\n  },\n\n  // - Input props\n  size: {\n    ...inputProperties.size,\n    doc: `${inputProperties.size.doc} Consider rather setting field sizes with [Form.Appearance](/uilib/extensions/forms/Form/Appearance/).`,\n  },\n  align: inputProperties.align,\n  selectall: inputProperties.selectall,\n  clear: inputProperties.clear,\n  keepPlaceholder: inputProperties.keep_placeholder,\n\n  // - Textarea props\n  rows: {\n    doc: 'For multiline, set how many rows of text can be shown by default. Defaults to 2.',\n    type: 'number',\n    status: 'optional',\n  },\n  autoresizeMaxRows: {\n    doc: 'For multiline, set how many rows of text can be shown at max. Defaults to 6',\n    type: 'number',\n    status: 'optional',\n  },\n  characterCounter: {\n    doc: \"For multiline, use a number to define the displayed max length e.g. `40` or `{ max: 40, variant: 'down' }`.\",\n    type: ['number', 'object'],\n    status: 'optional',\n  },\n  autoresize: {\n    doc: 'For multiline, set true to expand when writing longer texts. Defaults to true.',\n    type: 'boolean',\n    status: 'optional',\n  },\n\n  // - Additional props\n  inputClassName: {\n    doc: 'Class name set on the <input> DOM element.',\n    type: 'string',\n    status: 'optional',\n  },\n  innerRef: {\n    doc: 'By providing a React.Ref we can get the internally used input element (DOM).',\n    type: 'React.Ref',\n    status: 'optional',\n  },\n  submitElement: {\n    doc: 'Accepts a React element which will show up like the \"submit button\" would do on type=\"search\".',\n    type: 'React.Element',\n    status: 'optional',\n  },\n}\n"],"mappings":";;;AAAA,SAASA,eAAe,QAAQ,wCAAwC;AAGxE,OAAO,MAAMC,gBAAsC,GAAG;EACpDC,SAAS,EAAE;IACTC,GAAG,EAAE,gGAAgG;IACrGC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDC,QAAQ,EAAE;IACRH,GAAG,EAAE,8CAA8C;IACnDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,SAAS,EAAE;IACTJ,GAAG,EAAE,+CAA+C;IACpDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,UAAU,EAAE;IACVL,GAAG,EAAE,0GAA0G;IAC/GC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDI,IAAI,EAAE;IACJN,GAAG,EAAE,6GAA6G;IAClHC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDK,SAAS,EAAE;IACTP,GAAG,EAAE,uGAAuG;IAC5GC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDM,YAAY,EAAE;IACZR,GAAG,EAAE,gHAAgH;IACrHC,IAAI,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC;IACtBC,MAAM,EAAE;EACV,CAAC;EACDO,SAAS,EAAE;IACTT,GAAG,EAAE,mEAAmE;IACxEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDQ,SAAS,EAAE;IACTV,GAAG,EAAE,mEAAmE;IACxEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDS,OAAO,EAAE;IACPX,GAAG,EAAE,oCAAoC;IACzCC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDU,KAAK,EAAE;IACLZ,GAAG,EAAE,qIAAqI;IAC1IC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,MAAM,EAAE;EACV,CAAC;EAGDW,IAAI,EAAAC,aAAA,CAAAA,aAAA,KACCjB,eAAe,CAACgB,IAAI;IACvBb,GAAG,EAAG,GAAEH,eAAe,CAACgB,IAAI,CAACb,GAAI;EAAuG,EACzI;EACDe,KAAK,EAAElB,eAAe,CAACkB,KAAK;EAC5BC,SAAS,EAAEnB,eAAe,CAACmB,SAAS;EACpCC,KAAK,EAAEpB,eAAe,CAACoB,KAAK;EAC5BC,eAAe,EAAErB,eAAe,CAACsB,gBAAgB;EAGjDC,IAAI,EAAE;IACJpB,GAAG,EAAE,kFAAkF;IACvFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDmB,iBAAiB,EAAE;IACjBrB,GAAG,EAAE,6EAA6E;IAClFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDoB,gBAAgB,EAAE;IAChBtB,GAAG,EAAE,6GAA6G;IAClHC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV,CAAC;EACDqB,UAAU,EAAE;IACVvB,GAAG,EAAE,gFAAgF;IACrFC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EAGDsB,cAAc,EAAE;IACdxB,GAAG,EAAE,4CAA4C;IACjDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDuB,QAAQ,EAAE;IACRzB,GAAG,EAAE,8EAA8E;IACnFC,IAAI,EAAE,WAAW;IACjBC,MAAM,EAAE;EACV,CAAC;EACDwB,aAAa,EAAE;IACb1B,GAAG,EAAE,gGAAgG;IACrGC,IAAI,EAAE,eAAe;IACrBC,MAAM,EAAE;EACV;AACF,CAAC"}

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

@@ -1,10 +1,13 @@
 import { FieldProps } from '../../types';
+import type { CheckboxProps } from '../../../../components/Checkbox';
+import type { ToggleButtonProps } from '../../../../components/ToggleButton';
 export type ToggleProps = {
     valueOn: unknown;
     valueOff: unknown;
     variant?: 'checkbox' | 'checkbox-button' | 'button' | 'buttons';
     textOn?: string;
     textOff?: string;
+    size?: ToggleButtonProps['size'] | CheckboxProps['size'];
 };
 export type Props = Omit<FieldProps<unknown>, 'layout' | 'layoutOptions'> & ToggleProps;
 declare function Toggle(props: Props): import("react/jsx-runtime").JSX.Element;

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

@@ -27,6 +27,7 @@ function Toggle(props) {
     textOn,
     textOff,
     value,
+    size,
     hasError,
     htmlAttributes,
     handleChange,
@@ -79,6 +80,7 @@ function Toggle(props) {
         label: labelWithItemNo !== null && labelWithItemNo !== void 0 ? labelWithItemNo : isOn ? textOn !== null && textOn !== void 0 ? textOn : translations.yes : textOff !== null && textOff !== void 0 ? textOff : translations.no,
         checked: isOn,
         disabled: disabled,
+        size: size !== 'small' ? size : undefined,
         status: hasError ? 'error' : undefined,
         onChange: handleCheckboxChange
       }, htmlAttributes)));
@@ -90,6 +92,7 @@ function Toggle(props) {
         disabled: disabled,
         status: hasError ? 'error' : undefined,
         value: value ? 'true' : 'false',
+        size: size,
         on_change: handleCheckboxChange
       }, htmlAttributes)));
     case 'buttons':
@@ -102,7 +105,8 @@ function Toggle(props) {
           value: isOn ? 'on' : isOff ? 'off' : null,
           onChange: handleToggleChange,
           status: hasError ? 'error' : undefined,
-          disabled
+          disabled,
+          size
         }
       }, React.createElement(ToggleButton, _extends({
         text: textOn !== null && textOn !== void 0 ? textOn : translations.yes,
@@ -120,6 +124,7 @@ function Toggle(props) {
         disabled: disabled,
         status: hasError ? 'error' : undefined,
         value: value ? 'true' : 'false',
+        size: size,
         on_change: handleCheckboxChange
       }, htmlAttributes)));
   }

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

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","names":["React","useCallback","useMemo","classnames","Checkbox","ToggleButton","ButtonRow","FieldBlock","useFieldProps","pickSpacingProps","ToggleButtonGroupContext","useTranslation","useIterateItemNo","Toggle","props","translations","ToggleField","preparedProps","_objectSpread","errorMessages","id","className","valueOn","valueOff","variant","disabled","textOn","textOff","value","hasError","htmlAttributes","handleChange","setDisplayValue","handleCheckboxChange","_ref","checked","handleToggleChange","_ref2","cn","fieldBlockProps","forId","isOn","isOff","text","label","labelSuffix","required","labelWithItemNo","createElement","_extends","undefined","yes","no","status","onChange","on_change","asFieldset","bottom","Provider","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Toggle/Toggle.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react'\nimport classnames from 'classnames'\nimport { Checkbox, ToggleButton } from '../../../../components'\nimport ButtonRow from '../../Form/ButtonRow'\nimport FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\nimport useTranslation from '../../hooks/useTranslation'\nimport { useIterateItemNo } from '../../Iterate/ItemNo/useIItemNo'\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 = 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    textOn,\n    textOff,\n    value,\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 isOn = value === valueOn\n  const isOff = value === valueOff\n\n  useMemo(() => {\n    const text = isOn ? textOn : textOff\n    if (text) {\n      setDisplayValue(text)\n    }\n  }, [isOn, setDisplayValue, textOff, textOn])\n\n  const { label, labelSuffix, required } = props\n  const labelWithItemNo = useIterateItemNo({\n    label,\n    labelSuffix,\n    required,\n  })\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              labelWithItemNo ??\n              (isOn\n                ? textOn ?? translations.yes\n                : textOff ?? translations.no)\n            }\n            checked={isOn}\n            disabled={disabled}\n            status={hasError ? 'error' : undefined}\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            value={value ? 'true' : 'false'}\n            on_change={handleCheckboxChange}\n            {...htmlAttributes}\n          />\n        </FieldBlock>\n      )\n    case 'buttons':\n      return (\n        <FieldBlock {...fieldBlockProps} asFieldset>\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            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","ToggleButton","ButtonRow","FieldBlock","useFieldProps","pickSpacingProps","ToggleButtonGroupContext","useTranslation","useIterateItemNo","Toggle","props","translations","ToggleField","preparedProps","_objectSpread","errorMessages","id","className","valueOn","valueOff","variant","disabled","textOn","textOff","value","size","hasError","htmlAttributes","handleChange","setDisplayValue","handleCheckboxChange","_ref","checked","handleToggleChange","_ref2","cn","fieldBlockProps","forId","isOn","isOff","text","label","labelSuffix","required","labelWithItemNo","createElement","_extends","undefined","yes","no","status","onChange","on_change","asFieldset","bottom","Provider","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Toggle/Toggle.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react'\nimport classnames from 'classnames'\nimport { Checkbox, ToggleButton } from '../../../../components'\nimport ButtonRow from '../../Form/ButtonRow'\nimport FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\nimport useTranslation from '../../hooks/useTranslation'\nimport { useIterateItemNo } from '../../Iterate/ItemNo/useIItemNo'\nimport type { CheckboxProps } from '../../../../components/Checkbox'\nimport type { ToggleButtonProps } from '../../../../components/ToggleButton'\n\nexport type ToggleProps = {\n  valueOn: unknown\n  valueOff: unknown\n  variant?: 'checkbox' | 'checkbox-button' | 'button' | 'buttons'\n  textOn?: string\n  textOff?: string\n  size?: ToggleButtonProps['size'] | CheckboxProps['size']\n}\n\nexport type Props = 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    textOn,\n    textOff,\n    value,\n    size,\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 isOn = value === valueOn\n  const isOff = value === valueOff\n\n  useMemo(() => {\n    const text = isOn ? textOn : textOff\n    if (text) {\n      setDisplayValue(text)\n    }\n  }, [isOn, setDisplayValue, textOff, textOn])\n\n  const { label, labelSuffix, required } = props\n  const labelWithItemNo = useIterateItemNo({\n    label,\n    labelSuffix,\n    required,\n  })\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              labelWithItemNo ??\n              (isOn\n                ? textOn ?? translations.yes\n                : textOff ?? translations.no)\n            }\n            checked={isOn}\n            disabled={disabled}\n            size={size !== 'small' ? size : undefined}\n            status={hasError ? 'error' : undefined}\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            value={value ? 'true' : 'false'}\n            size={size}\n            on_change={handleCheckboxChange}\n            {...htmlAttributes}\n          />\n        </FieldBlock>\n      )\n    case 'buttons':\n      return (\n        <FieldBlock {...fieldBlockProps} asFieldset>\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                size,\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            value={value ? 'true' : 'false'}\n            size={size}\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/extensions/forms/Field/Toggle/ToggleDocs.js

@@ -19,6 +19,11 @@ export const ToggleProperties = {
     type: 'string',
     status: 'optional'
   },
+  size: {
+    doc: 'The sizes you can choose is small (1.5rem), default (2rem), medium (2.5rem) and large (3rem) are supported component sizes. Defaults to default / null. Also, if you define a number like size="2" then it will be forwarded as the input element attribute. Consider rather setting field sizes with [Form.Appearance](/uilib/extensions/forms/Form/Appearance/).',
+    type: 'string',
+    status: 'optional'
+  },
   variant: {
     doc: 'Choice of input feature. Can be: `checkbox`, `button`, `checkbox-button` or `buttons`.',
     type: 'string',

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

@@ -1 +1 @@
-{"version":3,"file":"ToggleDocs.js","names":["ToggleProperties","valueOn","doc","type","status","valueOff","textOn","textOff","variant"],"sources":["../../../../../../src/extensions/forms/Field/Toggle/ToggleDocs.tsx"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const ToggleProperties: PropertiesTableProps = {\n  valueOn: {\n    doc: 'Source data value when the toggle is in the \"on-state\" (varies based on UI variant).',\n    type: ['string', 'number', 'boolean'],\n    status: 'required',\n  },\n  valueOff: {\n    doc: 'Source data value when the toggle is in the \"off-state\".',\n    type: ['string', 'number', 'boolean'],\n    status: 'required',\n  },\n  textOn: {\n    doc: 'Text to show in the UI when in the \"on-state\".',\n    type: 'string',\n    status: 'optional',\n  },\n  textOff: {\n    doc: 'Text to show in the UI when in the \"off-state\".',\n    type: 'string',\n    status: 'optional',\n  },\n  variant: {\n    doc: 'Choice of input feature. Can be: `checkbox`, `button`, `checkbox-button` or `buttons`.',\n    type: 'string',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,gBAAsC,GAAG;EACpDC,OAAO,EAAE;IACPC,GAAG,EAAE,sFAAsF;IAC3FC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC;IACrCC,MAAM,EAAE;EACV,CAAC;EACDC,QAAQ,EAAE;IACRH,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC;IACrCC,MAAM,EAAE;EACV,CAAC;EACDE,MAAM,EAAE;IACNJ,GAAG,EAAE,gDAAgD;IACrDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,OAAO,EAAE;IACPL,GAAG,EAAE,iDAAiD;IACtDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,OAAO,EAAE;IACPN,GAAG,EAAE,wFAAwF;IAC7FC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV;AACF,CAAC"}
+{"version":3,"file":"ToggleDocs.js","names":["ToggleProperties","valueOn","doc","type","status","valueOff","textOn","textOff","size","variant"],"sources":["../../../../../../src/extensions/forms/Field/Toggle/ToggleDocs.tsx"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const ToggleProperties: PropertiesTableProps = {\n  valueOn: {\n    doc: 'Source data value when the toggle is in the \"on-state\" (varies based on UI variant).',\n    type: ['string', 'number', 'boolean'],\n    status: 'required',\n  },\n  valueOff: {\n    doc: 'Source data value when the toggle is in the \"off-state\".',\n    type: ['string', 'number', 'boolean'],\n    status: 'required',\n  },\n  textOn: {\n    doc: 'Text to show in the UI when in the \"on-state\".',\n    type: 'string',\n    status: 'optional',\n  },\n  textOff: {\n    doc: 'Text to show in the UI when in the \"off-state\".',\n    type: 'string',\n    status: 'optional',\n  },\n  size: {\n    doc: 'The sizes you can choose is small (1.5rem), default (2rem), medium (2.5rem) and large (3rem) are supported component sizes. Defaults to default / null. Also, if you define a number like size=\"2\" then it will be forwarded as the input element attribute. Consider rather setting field sizes with [Form.Appearance](/uilib/extensions/forms/Form/Appearance/).',\n    type: 'string',\n    status: 'optional',\n  },\n  variant: {\n    doc: 'Choice of input feature. Can be: `checkbox`, `button`, `checkbox-button` or `buttons`.',\n    type: 'string',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,gBAAsC,GAAG;EACpDC,OAAO,EAAE;IACPC,GAAG,EAAE,sFAAsF;IAC3FC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC;IACrCC,MAAM,EAAE;EACV,CAAC;EACDC,QAAQ,EAAE;IACRH,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC;IACrCC,MAAM,EAAE;EACV,CAAC;EACDE,MAAM,EAAE;IACNJ,GAAG,EAAE,gDAAgD;IACrDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,OAAO,EAAE;IACPL,GAAG,EAAE,iDAAiD;IACtDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,IAAI,EAAE;IACJN,GAAG,EAAE,oWAAoW;IACzWC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,OAAO,EAAE;IACPP,GAAG,EAAE,wFAAwF;IAC7FC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV;AACF,CAAC"}

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

@@ -56,7 +56,7 @@ export type Props = {
     pathTrue?: Path;
     /** Given data context path must be false to show children */
     pathFalse?: Path;
-    /** Provide a `path` or `itemPath` and a `hasValue` method that returns a boolean or the excepted value in order to show children. The first parameter is the value of the path. */
+    /** Provide a `path` or `itemPath` and a `hasValue` method that returns a boolean or the expected value in order to show children. The first parameter is the value of the path. */
     visibleWhen?: VisibleWhen;
     /** Same as `visibleWhen`, but with inverted logic. */
     visibleWhenNot?: VisibleWhen;

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

@@ -1 +1 @@
-{"version":3,"file":"Visibility.js","names":["React","useCallback","useContext","warn","useMountEffect","useMounted","HeightAnimation","FieldProvider","useVisibility","VisibilityContext","SummaryListContext","Visibility","props","visible","pathDefined","pathUndefined","pathTruthy","pathFalsy","pathTrue","pathFalse","pathValue","whenValue","visibleWhen","visibleWhenNot","inferData","filterData","onVisible","onAnimationEnd","animate","keepInDOM","compensateForGap","fieldPropsWhenHidden","withinIterate","children","rest","_objectWithoutProperties","_excluded","check","open","content","createElement","Provider","value","isVisible","mountedRef","onOpen","state","current","summaryListContext","providerProps","isNested","_extends","Boolean","className","hidden","Fragment","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Form/Visibility/Visibility.tsx"],"sourcesContent":["import React, { AriaAttributes, useCallback, useContext } from 'react'\n\nimport { warn } from '../../../../shared/helpers'\nimport useMountEffect from '../../../../shared/helpers/useMountEffect'\nimport useMounted from '../../../../shared/helpers/useMounted'\nimport HeightAnimation, {\n  HeightAnimationAllProps,\n} from '../../../../components/HeightAnimation'\nimport FieldProvider from '../../Field/Provider'\nimport useVisibility from './useVisibility'\nimport VisibilityContext from './VisibilityContext'\nimport SummaryListContext from '../../Value/SummaryList/SummaryListContext'\n\nimport type { Path, UseFieldProps } from '../../types'\nimport type { DataAttributes } from '../../hooks/useFieldProps'\nimport { FilterData } from '../../DataContext'\n\nexport type VisibleWhen =\n  | {\n      path: Path\n      hasValue: unknown | ((value: unknown) => boolean)\n    }\n  | {\n      itemPath: Path\n      hasValue: unknown | ((value: unknown) => boolean)\n    }\n  | {\n      path: Path\n      isValid: boolean\n      /**\n       * @deprecated – Replaced with validateContinuously, continuousValidation can be removed in v11.\n       */\n      continuousValidation?: boolean\n      validateContinuously?: boolean\n    }\n  | {\n      itemPath: Path\n      isValid: boolean\n      /**\n       * @deprecated – Replaced with validateContinuously, continuousValidation can be removed in v11.\n       */\n      continuousValidation?: boolean\n      validateContinuously?: boolean\n    }\n\n  /**\n   * @deprecated Will be removed in v11!\n   */\n  | {\n      path: Path\n      /** @deprecated Use `hasValue` instead */\n      withValue: (value: unknown) => boolean\n    }\n  /**\n   * @deprecated  Will be removed in v11!\n   */\n  | {\n      itemPath: Path\n      /** @deprecated Use `hasValue` instead */\n      withValue: (value: unknown) => boolean\n    }\n\nexport type Props = {\n  visible?: boolean\n  /** Given data context path must be defined to show children */\n  pathDefined?: Path\n  /** Given data context path must be undefined to show children */\n  pathUndefined?: Path\n  /** Given data context path must be truthy to show children */\n  pathTruthy?: Path\n  /** Given data context path must be falsy to show children */\n  pathFalsy?: Path\n  /** Given data context path must be true to show children */\n  pathTrue?: Path\n  /** Given data context path must be false to show children */\n  pathFalse?: Path\n  /** Provide a `path` or `itemPath` and a `hasValue` method that returns a boolean or the excepted value in order to show children. The first parameter is the value of the path. */\n  visibleWhen?: VisibleWhen\n  /** Same as `visibleWhen`, but with inverted logic. */\n  visibleWhenNot?: VisibleWhen\n  /** Infer visibility calling given derivative function with the whole data set. Should return true/false for visibility.   */\n  inferData?: (data: unknown) => boolean\n  /** Filter data based on provided criteria. The first parameter is the path, the second is the value, and the third is the props, and the fourth is the internal. Return false to filter out the data. */\n  filterData?: FilterData\n  /** Animate the visibility change */\n  animate?: boolean\n  /** Keep the content in the DOM, even if it's not visible */\n  keepInDOM?: boolean\n  /** Callback for when the content gets visible. */\n  onVisible?: HeightAnimationAllProps['onOpen']\n  /** Callback for when animation has ended */\n  onAnimationEnd?: HeightAnimationAllProps['onAnimationEnd']\n  /** To compensate for CSS gap between the rows, so animation does not jump during the animation. Provide a CSS unit or `auto`. Defaults to `null`. */\n  compensateForGap?: HeightAnimationAllProps['compensateForGap']\n  /** When visibility is hidden, and `keepInDOM` is true, pass these props to the children */\n  fieldPropsWhenHidden?: UseFieldProps & DataAttributes & AriaAttributes\n  element?: HeightAnimationAllProps['element']\n  children: React.ReactNode\n\n  /** For internal use only. Used by \"Iterate.Visibility\" */\n  withinIterate?: boolean\n\n  /** @deprecated Use `visibleWhen` instead */\n  pathValue?: string\n  /** @deprecated Use `visibleWhen` instead */\n  whenValue?: unknown\n}\n\nfunction Visibility(props: Props) {\n  const {\n    visible,\n    pathDefined,\n    pathUndefined,\n    pathTruthy,\n    pathFalsy,\n    pathTrue,\n    pathFalse,\n    pathValue,\n    whenValue,\n    visibleWhen,\n    visibleWhenNot,\n    inferData,\n    filterData,\n    onVisible,\n    onAnimationEnd,\n    animate,\n    keepInDOM,\n    compensateForGap,\n    fieldPropsWhenHidden,\n    withinIterate,\n    children,\n    ...rest\n  } = props\n\n  useMountEffect(() => {\n    if (fieldPropsWhenHidden && !keepInDOM) {\n      warn('Using \"fieldPropsWhenHidden\" requires \"keepInDOM\" to be true.')\n    }\n  })\n\n  const { check } = useVisibility({\n    visible,\n    withinIterate,\n    pathDefined,\n    pathUndefined,\n    pathTruthy,\n    pathFalsy,\n    pathTrue,\n    pathFalse,\n    pathValue,\n    whenValue,\n    visibleWhen,\n    visibleWhenNot,\n    inferData,\n    filterData,\n  })\n  const open = check()\n  const content = (\n    <VisibilityContext.Provider\n      value={{\n        isVisible: open,\n        props,\n      }}\n    >\n      {children}\n    </VisibilityContext.Provider>\n  )\n  const mountedRef = useMounted()\n\n  const onOpen: HeightAnimationAllProps['onOpen'] = useCallback(\n    (state) => {\n      if (mountedRef.current) {\n        onVisible?.(state)\n      }\n    },\n    [mountedRef, onVisible]\n  )\n\n  const summaryListContext = useContext(SummaryListContext)\n  const providerProps = !open ? fieldPropsWhenHidden : null\n\n  if (\n    (animate || keepInDOM) &&\n    summaryListContext &&\n    !summaryListContext.isNested\n  ) {\n    // Handle the animation inside the SummaryList\n    return <FieldProvider {...providerProps}>{content}</FieldProvider>\n  }\n\n  if (animate) {\n    return (\n      <HeightAnimation\n        open={open}\n        onAnimationEnd={onAnimationEnd}\n        onOpen={onOpen}\n        keepInDOM={Boolean(keepInDOM)}\n        className=\"dnb-forms-visibility\"\n        compensateForGap={compensateForGap}\n        {...rest}\n      >\n        <FieldProvider {...providerProps}>{content}</FieldProvider>\n      </HeightAnimation>\n    )\n  }\n\n  if (mountedRef.current) {\n    onVisible?.(open)\n  }\n\n  if (keepInDOM) {\n    return (\n      <span className=\"dnb-forms-visibility\" hidden={!open}>\n        <FieldProvider {...providerProps}>{content}</FieldProvider>\n      </span>\n    )\n  }\n\n  return <>{open ? content : null}</>\n}\n\nVisibility._supportsSpacingProps = 'children'\nexport default Visibility\n"],"mappings":"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"}
+{"version":3,"file":"Visibility.js","names":["React","useCallback","useContext","warn","useMountEffect","useMounted","HeightAnimation","FieldProvider","useVisibility","VisibilityContext","SummaryListContext","Visibility","props","visible","pathDefined","pathUndefined","pathTruthy","pathFalsy","pathTrue","pathFalse","pathValue","whenValue","visibleWhen","visibleWhenNot","inferData","filterData","onVisible","onAnimationEnd","animate","keepInDOM","compensateForGap","fieldPropsWhenHidden","withinIterate","children","rest","_objectWithoutProperties","_excluded","check","open","content","createElement","Provider","value","isVisible","mountedRef","onOpen","state","current","summaryListContext","providerProps","isNested","_extends","Boolean","className","hidden","Fragment","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Form/Visibility/Visibility.tsx"],"sourcesContent":["import React, { AriaAttributes, useCallback, useContext } from 'react'\n\nimport { warn } from '../../../../shared/helpers'\nimport useMountEffect from '../../../../shared/helpers/useMountEffect'\nimport useMounted from '../../../../shared/helpers/useMounted'\nimport HeightAnimation, {\n  HeightAnimationAllProps,\n} from '../../../../components/HeightAnimation'\nimport FieldProvider from '../../Field/Provider'\nimport useVisibility from './useVisibility'\nimport VisibilityContext from './VisibilityContext'\nimport SummaryListContext from '../../Value/SummaryList/SummaryListContext'\n\nimport type { Path, UseFieldProps } from '../../types'\nimport type { DataAttributes } from '../../hooks/useFieldProps'\nimport { FilterData } from '../../DataContext'\n\nexport type VisibleWhen =\n  | {\n      path: Path\n      hasValue: unknown | ((value: unknown) => boolean)\n    }\n  | {\n      itemPath: Path\n      hasValue: unknown | ((value: unknown) => boolean)\n    }\n  | {\n      path: Path\n      isValid: boolean\n      /**\n       * @deprecated – Replaced with validateContinuously, continuousValidation can be removed in v11.\n       */\n      continuousValidation?: boolean\n      validateContinuously?: boolean\n    }\n  | {\n      itemPath: Path\n      isValid: boolean\n      /**\n       * @deprecated – Replaced with validateContinuously, continuousValidation can be removed in v11.\n       */\n      continuousValidation?: boolean\n      validateContinuously?: boolean\n    }\n\n  /**\n   * @deprecated Will be removed in v11!\n   */\n  | {\n      path: Path\n      /** @deprecated Use `hasValue` instead */\n      withValue: (value: unknown) => boolean\n    }\n  /**\n   * @deprecated  Will be removed in v11!\n   */\n  | {\n      itemPath: Path\n      /** @deprecated Use `hasValue` instead */\n      withValue: (value: unknown) => boolean\n    }\n\nexport type Props = {\n  visible?: boolean\n  /** Given data context path must be defined to show children */\n  pathDefined?: Path\n  /** Given data context path must be undefined to show children */\n  pathUndefined?: Path\n  /** Given data context path must be truthy to show children */\n  pathTruthy?: Path\n  /** Given data context path must be falsy to show children */\n  pathFalsy?: Path\n  /** Given data context path must be true to show children */\n  pathTrue?: Path\n  /** Given data context path must be false to show children */\n  pathFalse?: Path\n  /** Provide a `path` or `itemPath` and a `hasValue` method that returns a boolean or the expected value in order to show children. The first parameter is the value of the path. */\n  visibleWhen?: VisibleWhen\n  /** Same as `visibleWhen`, but with inverted logic. */\n  visibleWhenNot?: VisibleWhen\n  /** Infer visibility calling given derivative function with the whole data set. Should return true/false for visibility.   */\n  inferData?: (data: unknown) => boolean\n  /** Filter data based on provided criteria. The first parameter is the path, the second is the value, and the third is the props, and the fourth is the internal. Return false to filter out the data. */\n  filterData?: FilterData\n  /** Animate the visibility change */\n  animate?: boolean\n  /** Keep the content in the DOM, even if it's not visible */\n  keepInDOM?: boolean\n  /** Callback for when the content gets visible. */\n  onVisible?: HeightAnimationAllProps['onOpen']\n  /** Callback for when animation has ended */\n  onAnimationEnd?: HeightAnimationAllProps['onAnimationEnd']\n  /** To compensate for CSS gap between the rows, so animation does not jump during the animation. Provide a CSS unit or `auto`. Defaults to `null`. */\n  compensateForGap?: HeightAnimationAllProps['compensateForGap']\n  /** When visibility is hidden, and `keepInDOM` is true, pass these props to the children */\n  fieldPropsWhenHidden?: UseFieldProps & DataAttributes & AriaAttributes\n  element?: HeightAnimationAllProps['element']\n  children: React.ReactNode\n\n  /** For internal use only. Used by \"Iterate.Visibility\" */\n  withinIterate?: boolean\n\n  /** @deprecated Use `visibleWhen` instead */\n  pathValue?: string\n  /** @deprecated Use `visibleWhen` instead */\n  whenValue?: unknown\n}\n\nfunction Visibility(props: Props) {\n  const {\n    visible,\n    pathDefined,\n    pathUndefined,\n    pathTruthy,\n    pathFalsy,\n    pathTrue,\n    pathFalse,\n    pathValue,\n    whenValue,\n    visibleWhen,\n    visibleWhenNot,\n    inferData,\n    filterData,\n    onVisible,\n    onAnimationEnd,\n    animate,\n    keepInDOM,\n    compensateForGap,\n    fieldPropsWhenHidden,\n    withinIterate,\n    children,\n    ...rest\n  } = props\n\n  useMountEffect(() => {\n    if (fieldPropsWhenHidden && !keepInDOM) {\n      warn('Using \"fieldPropsWhenHidden\" requires \"keepInDOM\" to be true.')\n    }\n  })\n\n  const { check } = useVisibility({\n    visible,\n    withinIterate,\n    pathDefined,\n    pathUndefined,\n    pathTruthy,\n    pathFalsy,\n    pathTrue,\n    pathFalse,\n    pathValue,\n    whenValue,\n    visibleWhen,\n    visibleWhenNot,\n    inferData,\n    filterData,\n  })\n  const open = check()\n  const content = (\n    <VisibilityContext.Provider\n      value={{\n        isVisible: open,\n        props,\n      }}\n    >\n      {children}\n    </VisibilityContext.Provider>\n  )\n  const mountedRef = useMounted()\n\n  const onOpen: HeightAnimationAllProps['onOpen'] = useCallback(\n    (state) => {\n      if (mountedRef.current) {\n        onVisible?.(state)\n      }\n    },\n    [mountedRef, onVisible]\n  )\n\n  const summaryListContext = useContext(SummaryListContext)\n  const providerProps = !open ? fieldPropsWhenHidden : null\n\n  if (\n    (animate || keepInDOM) &&\n    summaryListContext &&\n    !summaryListContext.isNested\n  ) {\n    // Handle the animation inside the SummaryList\n    return <FieldProvider {...providerProps}>{content}</FieldProvider>\n  }\n\n  if (animate) {\n    return (\n      <HeightAnimation\n        open={open}\n        onAnimationEnd={onAnimationEnd}\n        onOpen={onOpen}\n        keepInDOM={Boolean(keepInDOM)}\n        className=\"dnb-forms-visibility\"\n        compensateForGap={compensateForGap}\n        {...rest}\n      >\n        <FieldProvider {...providerProps}>{content}</FieldProvider>\n      </HeightAnimation>\n    )\n  }\n\n  if (mountedRef.current) {\n    onVisible?.(open)\n  }\n\n  if (keepInDOM) {\n    return (\n      <span className=\"dnb-forms-visibility\" hidden={!open}>\n        <FieldProvider {...providerProps}>{content}</FieldProvider>\n      </span>\n    )\n  }\n\n  return <>{open ? content : null}</>\n}\n\nVisibility._supportsSpacingProps = 'children'\nexport default Visibility\n"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 import { HeightAnimationEvents } from '../../../../components/height-animation/HeightAnimationDocs';
 export const VisibilityProperties = {
   visibleWhen: {
-    doc: 'Provide a `path` or `itemPath` and a `hasValue` method that returns a boolean or the excepted value in order to show children. The first parameter is the value of the path. You can also use `isValid` instead of `hasValue` to only show the children when the field has no errors and has lost focus (blurred). You can change that behavior by using the `validateContinuously` property.',
+    doc: 'Provide a `path` or `itemPath` and a `hasValue` method that returns a boolean or the expected value in order to show children. The first parameter is the value of the path. You can also use `isValid` instead of `hasValue` to only show the children when the field has no errors and has lost focus (blurred). You can change that behavior by using the `validateContinuously` property.',
     type: 'object',
     status: 'optional'
   },

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

@@ -1 +1 @@
-{"version":3,"file":"VisibilityDocs.js","names":["HeightAnimationEvents","VisibilityProperties","visibleWhen","doc","type","status","visibleWhenNot","pathDefined","pathUndefined","pathTruthy","pathFalsy","pathTrue","pathFalse","inferData","visible","animate","keepInDOM","compensateForGap","filterData","fieldPropsWhenHidden","element","children","VisibilityEvents","onVisible","onOpen","onAnimationEnd"],"sources":["../../../../../../src/extensions/forms/Form/Visibility/VisibilityDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\nimport { HeightAnimationEvents } from '../../../../components/height-animation/HeightAnimationDocs'\n\nexport const VisibilityProperties: PropertiesTableProps = {\n  visibleWhen: {\n    doc: 'Provide a `path` or `itemPath` and a `hasValue` method that returns a boolean or the excepted value in order to show children. The first parameter is the value of the path. You can also use `isValid` instead of `hasValue` to only show the children when the field has no errors and has lost focus (blurred). You can change that behavior by using the `validateContinuously` property.',\n    type: 'object',\n    status: 'optional',\n  },\n  visibleWhenNot: {\n    doc: 'Same as `visibleWhen`, but with inverted logic.',\n    type: 'object',\n    status: 'optional',\n  },\n  pathDefined: {\n    doc: 'Given data context path must be defined to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathUndefined: {\n    doc: 'Given data context path must be undefined to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathTruthy: {\n    doc: 'Given data context path must be truthy to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathFalsy: {\n    doc: 'Given data context path must be falsy to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathTrue: {\n    doc: 'Given data context path must be true to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathFalse: {\n    doc: 'Given data context path must be false to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  inferData: {\n    doc: 'Will be called to decide by external logic, and show/hide contents based on the return value.',\n    type: 'function',\n    status: 'optional',\n  },\n  visible: {\n    doc: 'Control visibility directly using the `visible` prop. When used alongside other conditions, the `visible` prop takes precedence.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  animate: {\n    doc: 'Define if the content should animate during show/hide.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  keepInDOM: {\n    doc: \"Keep the content in the DOM, even if it's not visible. Can be used to let fields run validation.\",\n    type: 'boolean',\n    status: 'optional',\n  },\n  compensateForGap: {\n    doc: 'To compensate for CSS gap between the rows, so animation does not jump during the animation. Provide a CSS unit or `auto`. Defaults to `null`.',\n    type: 'string',\n    status: 'optional',\n  },\n  filterData: {\n    doc: 'Filter data based on provided criteria. More info about `filterData` can be found in the [Getting Started](/uilib/extensions/forms/getting-started/#filter-data) documentation.',\n    type: ['object', 'function'],\n    status: 'optional',\n  },\n  fieldPropsWhenHidden: {\n    doc: 'When visibility is hidden, and `keepInDOM` is true, pass these props to the children.',\n    type: 'various',\n    status: 'optional',\n  },\n  element: {\n    doc: 'Define the type of element. Defaults to `div`. Only for when `animate` is true.',\n    type: 'string or React.Element',\n    status: 'optional',\n  },\n  children: {\n    doc: 'Contents.',\n    type: 'React.Node',\n    status: 'required',\n  },\n}\n\nexport const VisibilityEvents: PropertiesTableProps = {\n  onVisible: {\n    doc: 'Callback for when the content gets visible. Returns a boolean as the first parameter.',\n    type: HeightAnimationEvents.onOpen.type,\n    status: 'optional',\n  },\n  onAnimationEnd: HeightAnimationEvents.onAnimationEnd,\n}\n"],"mappings":"AACA,SAASA,qBAAqB,QAAQ,6DAA6D;AAEnG,OAAO,MAAMC,oBAA0C,GAAG;EACxDC,WAAW,EAAE;IACXC,GAAG,EAAE,+XAA+X;IACpYC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,cAAc,EAAE;IACdH,GAAG,EAAE,iDAAiD;IACtDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,WAAW,EAAE;IACXJ,GAAG,EAAE,2DAA2D;IAChEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,aAAa,EAAE;IACbL,GAAG,EAAE,6DAA6D;IAClEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,UAAU,EAAE;IACVN,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,SAAS,EAAE;IACTP,GAAG,EAAE,yDAAyD;IAC9DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDM,QAAQ,EAAE;IACRR,GAAG,EAAE,wDAAwD;IAC7DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDO,SAAS,EAAE;IACTT,GAAG,EAAE,yDAAyD;IAC9DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDQ,SAAS,EAAE;IACTV,GAAG,EAAE,+FAA+F;IACpGC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDS,OAAO,EAAE;IACPX,GAAG,EAAE,kIAAkI;IACvIC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDU,OAAO,EAAE;IACPZ,GAAG,EAAE,wDAAwD;IAC7DC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDW,SAAS,EAAE;IACTb,GAAG,EAAE,kGAAkG;IACvGC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDY,gBAAgB,EAAE;IAChBd,GAAG,EAAE,gJAAgJ;IACrJC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDa,UAAU,EAAE;IACVf,GAAG,EAAE,iLAAiL;IACtLC,IAAI,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC;IAC5BC,MAAM,EAAE;EACV,CAAC;EACDc,oBAAoB,EAAE;IACpBhB,GAAG,EAAE,uFAAuF;IAC5FC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDe,OAAO,EAAE;IACPjB,GAAG,EAAE,iFAAiF;IACtFC,IAAI,EAAE,yBAAyB;IAC/BC,MAAM,EAAE;EACV,CAAC;EACDgB,QAAQ,EAAE;IACRlB,GAAG,EAAE,WAAW;IAChBC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMiB,gBAAsC,GAAG;EACpDC,SAAS,EAAE;IACTpB,GAAG,EAAE,uFAAuF;IAC5FC,IAAI,EAAEJ,qBAAqB,CAACwB,MAAM,CAACpB,IAAI;IACvCC,MAAM,EAAE;EACV,CAAC;EACDoB,cAAc,EAAEzB,qBAAqB,CAACyB;AACxC,CAAC"}
+{"version":3,"file":"VisibilityDocs.js","names":["HeightAnimationEvents","VisibilityProperties","visibleWhen","doc","type","status","visibleWhenNot","pathDefined","pathUndefined","pathTruthy","pathFalsy","pathTrue","pathFalse","inferData","visible","animate","keepInDOM","compensateForGap","filterData","fieldPropsWhenHidden","element","children","VisibilityEvents","onVisible","onOpen","onAnimationEnd"],"sources":["../../../../../../src/extensions/forms/Form/Visibility/VisibilityDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\nimport { HeightAnimationEvents } from '../../../../components/height-animation/HeightAnimationDocs'\n\nexport const VisibilityProperties: PropertiesTableProps = {\n  visibleWhen: {\n    doc: 'Provide a `path` or `itemPath` and a `hasValue` method that returns a boolean or the expected value in order to show children. The first parameter is the value of the path. You can also use `isValid` instead of `hasValue` to only show the children when the field has no errors and has lost focus (blurred). You can change that behavior by using the `validateContinuously` property.',\n    type: 'object',\n    status: 'optional',\n  },\n  visibleWhenNot: {\n    doc: 'Same as `visibleWhen`, but with inverted logic.',\n    type: 'object',\n    status: 'optional',\n  },\n  pathDefined: {\n    doc: 'Given data context path must be defined to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathUndefined: {\n    doc: 'Given data context path must be undefined to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathTruthy: {\n    doc: 'Given data context path must be truthy to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathFalsy: {\n    doc: 'Given data context path must be falsy to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathTrue: {\n    doc: 'Given data context path must be true to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  pathFalse: {\n    doc: 'Given data context path must be false to show children.',\n    type: 'string',\n    status: 'optional',\n  },\n  inferData: {\n    doc: 'Will be called to decide by external logic, and show/hide contents based on the return value.',\n    type: 'function',\n    status: 'optional',\n  },\n  visible: {\n    doc: 'Control visibility directly using the `visible` prop. When used alongside other conditions, the `visible` prop takes precedence.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  animate: {\n    doc: 'Define if the content should animate during show/hide.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  keepInDOM: {\n    doc: \"Keep the content in the DOM, even if it's not visible. Can be used to let fields run validation.\",\n    type: 'boolean',\n    status: 'optional',\n  },\n  compensateForGap: {\n    doc: 'To compensate for CSS gap between the rows, so animation does not jump during the animation. Provide a CSS unit or `auto`. Defaults to `null`.',\n    type: 'string',\n    status: 'optional',\n  },\n  filterData: {\n    doc: 'Filter data based on provided criteria. More info about `filterData` can be found in the [Getting Started](/uilib/extensions/forms/getting-started/#filter-data) documentation.',\n    type: ['object', 'function'],\n    status: 'optional',\n  },\n  fieldPropsWhenHidden: {\n    doc: 'When visibility is hidden, and `keepInDOM` is true, pass these props to the children.',\n    type: 'various',\n    status: 'optional',\n  },\n  element: {\n    doc: 'Define the type of element. Defaults to `div`. Only for when `animate` is true.',\n    type: 'string or React.Element',\n    status: 'optional',\n  },\n  children: {\n    doc: 'Contents.',\n    type: 'React.Node',\n    status: 'required',\n  },\n}\n\nexport const VisibilityEvents: PropertiesTableProps = {\n  onVisible: {\n    doc: 'Callback for when the content gets visible. Returns a boolean as the first parameter.',\n    type: HeightAnimationEvents.onOpen.type,\n    status: 'optional',\n  },\n  onAnimationEnd: HeightAnimationEvents.onAnimationEnd,\n}\n"],"mappings":"AACA,SAASA,qBAAqB,QAAQ,6DAA6D;AAEnG,OAAO,MAAMC,oBAA0C,GAAG;EACxDC,WAAW,EAAE;IACXC,GAAG,EAAE,+XAA+X;IACpYC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,cAAc,EAAE;IACdH,GAAG,EAAE,iDAAiD;IACtDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,WAAW,EAAE;IACXJ,GAAG,EAAE,2DAA2D;IAChEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,aAAa,EAAE;IACbL,GAAG,EAAE,6DAA6D;IAClEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,UAAU,EAAE;IACVN,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,SAAS,EAAE;IACTP,GAAG,EAAE,yDAAyD;IAC9DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDM,QAAQ,EAAE;IACRR,GAAG,EAAE,wDAAwD;IAC7DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDO,SAAS,EAAE;IACTT,GAAG,EAAE,yDAAyD;IAC9DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDQ,SAAS,EAAE;IACTV,GAAG,EAAE,+FAA+F;IACpGC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDS,OAAO,EAAE;IACPX,GAAG,EAAE,kIAAkI;IACvIC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDU,OAAO,EAAE;IACPZ,GAAG,EAAE,wDAAwD;IAC7DC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDW,SAAS,EAAE;IACTb,GAAG,EAAE,kGAAkG;IACvGC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDY,gBAAgB,EAAE;IAChBd,GAAG,EAAE,gJAAgJ;IACrJC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDa,UAAU,EAAE;IACVf,GAAG,EAAE,iLAAiL;IACtLC,IAAI,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC;IAC5BC,MAAM,EAAE;EACV,CAAC;EACDc,oBAAoB,EAAE;IACpBhB,GAAG,EAAE,uFAAuF;IAC5FC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDe,OAAO,EAAE;IACPjB,GAAG,EAAE,iFAAiF;IACtFC,IAAI,EAAE,yBAAyB;IAC/BC,MAAM,EAAE;EACV,CAAC;EACDgB,QAAQ,EAAE;IACRlB,GAAG,EAAE,WAAW;IAChBC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMiB,gBAAsC,GAAG;EACpDC,SAAS,EAAE;IACTpB,GAAG,EAAE,uFAAuF;IAC5FC,IAAI,EAAEJ,qBAAqB,CAACwB,MAAM,CAACpB,IAAI;IACvCC,MAAM,EAAE;EACV,CAAC;EACDoB,cAAc,EAAEzB,qBAAqB,CAACyB;AACxC,CAAC"}

package/extensions/forms/Value/Date/Date.d.ts

@@ -8,9 +8,10 @@ declare function DateComponent(props: Props): import("react/jsx-runtime").JSX.El
 declare namespace DateComponent {
     var _supportsSpacingProps: boolean;
 }
-export declare function formatDate(value: string, { locale, variant, }?: {
+export type FormatDateOptions = {
     locale?: string;
     variant?: Props['variant'];
-}): string;
+};
+export declare function formatDate(value: string, { locale, variant }?: FormatDateOptions): string;
 export declare function getOptions(variant: Props['variant']): Intl.DateTimeFormatOptions;
 export default DateComponent;