@dnb/eufemia 10.64.0 → 10.65.0

package/extensions/forms/Field/Address/AddressDocs.js

@@ -1,8 +1,6 @@
-export const AddressProperties = {
-  '[Input](/uilib/components/input/properties)': {
-    doc: 'All `Input` properties are supported.',
-    type: 'Various',
-    status: 'optional'
-  }
-};
+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 { stringProperties } from '../String/StringDocs';
+export const AddressProperties = _objectSpread({}, stringProperties);
 //# sourceMappingURL=AddressDocs.js.map

package/extensions/forms/Field/Address/AddressDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddressDocs.js","names":["AddressProperties","doc","type","status"],"sources":["../../../../../../src/extensions/forms/Field/Address/AddressDocs.tsx"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const AddressProperties: PropertiesTableProps = {\n  '[Input](/uilib/components/input/properties)': {\n    doc: 'All `Input` properties are supported.',\n    type: 'Various',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,iBAAuC,GAAG;EACrD,6CAA6C,EAAE;IAC7CC,GAAG,EAAE,uCAAuC;IAC5CC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV;AACF,CAAC"}
+{"version":3,"file":"AddressDocs.js","names":["stringProperties","AddressProperties","_objectSpread"],"sources":["../../../../../../src/extensions/forms/Field/Address/AddressDocs.tsx"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\nimport { stringProperties } from '../String/StringDocs'\n\nexport const AddressProperties: PropertiesTableProps = {\n  ...stringProperties,\n}\n"],"mappings":";;;AACA,SAASA,gBAAgB,QAAQ,sBAAsB;AAEvD,OAAO,MAAMC,iBAAuC,GAAAC,aAAA,KAC/CF,gBAAgB,CACpB"}

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

@@ -2,6 +2,8 @@ import React from 'react';
 import { ReturnAdditional } from '../../hooks/useFieldProps';
 import { DefaultErrorMessages, FieldProps, Path } from '../../types';
 import { Data } from '../Selection';
+import type { CheckboxProps } from '../../../../components/Checkbox';
+import type { ToggleButtonProps } from '../../../../components/ToggleButton';
 type OptionValue = string | number;
 export type Props = FieldProps<Array<OptionValue> | undefined> & {
     children?: React.ReactNode;
@@ -17,6 +19,10 @@ export type Props = FieldProps<Array<OptionValue> | undefined> & {
      * The generated options will be placed above given JSX based children.
      */
     data?: Data;
+    /**
+     * The size of the component.
+     */
+    size?: ToggleButtonProps['size'] | CheckboxProps['size'];
     errorMessages?: DefaultErrorMessages & {
         minItems?: string;
         maxItems?: string;
@@ -26,7 +32,7 @@ declare function ArraySelection(props: Props): import("react/jsx-runtime").JSX.E
 declare namespace ArraySelection {
     var _supportsSpacingProps: boolean;
 }
-export declare function useCheckboxOrToggleOptions({ id, path, variant, info, warning, emptyValue, htmlAttributes, dataList, children, value, disabled, hasError, handleChange, handleActiveData, }: {
+export declare function useCheckboxOrToggleOptions({ id, path, variant, info, warning, emptyValue, htmlAttributes, dataList, children, value, disabled, size, hasError, handleChange, handleActiveData, }: {
     id: Props['id'];
     path?: Props['path'];
     variant?: Props['variant'];
@@ -38,6 +44,7 @@ export declare function useCheckboxOrToggleOptions({ id, path, variant, info, wa
     children?: Props['children'];
     value?: Props['value'];
     disabled?: Props['disabled'];
+    size?: Props['size'];
     hasError?: ReturnAdditional<Props['value']>['hasError'];
     handleChange?: ReturnAdditional<Props['value']>['handleChange'];
     handleActiveData?: (item: {

package/extensions/forms/Field/ArraySelection/ArraySelection.js

@@ -33,6 +33,7 @@ function ArraySelection(props) {
     info,
     warning,
     disabled,
+    size,
     emptyValue,
     htmlAttributes,
     handleChange,
@@ -47,9 +48,11 @@ function ArraySelection(props) {
     forId: id,
     className: classnames(`dnb-forms-field-array-selection dnb-forms-field-array-selection--variant-${variant === 'checkbox' ? 'checkbox' : 'button'} dnb-forms-field-array-selection--layout-${layout} dnb-forms-field-array-selection--options-layout--${optionsLayout}`, className),
     contentClassName: 'dnb-forms-field-array-selection__options',
-    labelHeight: 'small',
     disableStatusSummary: true
   }, pickSpacingProps(props));
+  if (!size) {
+    fieldBlockProps.labelHeight = 'small';
+  }
   const options = useCheckboxOrToggleOptions({
     id,
     path,
@@ -62,6 +65,7 @@ function ArraySelection(props) {
     children,
     value,
     disabled,
+    size,
     hasError,
     handleChange,
     handleActiveData: _ref => {
@@ -78,7 +82,8 @@ function ArraySelection(props) {
       return React.createElement(FieldBlock, fieldBlockProps, React.createElement(ToggleButtonGroupContext.Provider, {
         value: {
           status: hasError ? 'error' : undefined,
-          disabled
+          disabled,
+          size
         }
       }, options));
   }
@@ -96,6 +101,7 @@ export function useCheckboxOrToggleOptions(_ref2) {
     children,
     value,
     disabled,
+    size,
     hasError,
     handleChange,
     handleActiveData
@@ -133,6 +139,7 @@ export function useCheckboxOrToggleOptions(_ref2) {
       key: `option-${i}-${value}`,
       variant: variant === 'checkbox-button' ? 'checkbox' : undefined,
       className: classnames(`dnb-forms-field-array-selection__${variant === 'checkbox' ? 'checkbox' : 'button'}`, className),
+      size: size,
       label: variant === 'checkbox' ? label : undefined,
       text: variant !== 'checkbox' ? label : undefined,
       value: value,

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

@@ -1 +1 @@
-{"version":3,"file":"ArraySelection.js","names":["React","useCallback","useContext","useMemo","classnames","convertJsxToString","Checkbox","HelpButton","ToggleButton","FieldBlock","useFieldProps","checkForError","pickSpacingProps","ToggleButtonGroupContext","mapOptions","DataContext","useDataValue","ArraySelection","props","id","path","dataPath","data","className","variant","layout","optionsLayout","value","hasError","info","warning","disabled","emptyValue","htmlAttributes","handleChange","setDisplayValue","children","getValueByPath","dataList","fieldBlockProps","_objectSpread","forId","contentClassName","labelHeight","disableStatusSummary","options","useCheckboxOrToggleOptions","handleActiveData","_ref","labels","createElement","Provider","status","undefined","_ref2","setFieldInternals","optionsCount","Children","count","length","activeData","createOption","i","active","error","title","help","rest","_objectWithoutProperties","_excluded","includes","push","label","suffix","size","content","handleSelect","newValue","filter","Component","_extends","key","text","checked","on_change","result","map","Boolean","_ref3","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/ArraySelection/ArraySelection.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo } from 'react'\nimport classnames from 'classnames'\nimport { convertJsxToString } from '../../../../shared/component-helper'\nimport { Checkbox, HelpButton, ToggleButton } from '../../../../components'\nimport FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { checkForError, ReturnAdditional } from '../../hooks/useFieldProps'\nimport { DefaultErrorMessages, FieldProps, Path } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\nimport { HelpProps } from '../../../../components/help-button/HelpButtonInline'\nimport { mapOptions, Data } from '../Selection'\nimport DataContext from '../../DataContext/Context'\nimport useDataValue from '../../hooks/useDataValue'\nimport { FormError } from '../../utils'\n\ntype OptionProps = React.ComponentProps<\n  React.FC<{\n    value: number | string\n    error: Error | FormError | undefined\n    title: React.ReactNode\n    help: HelpProps\n    className: string\n    children: React.ReactNode\n    handleSelect: () => void\n  }>\n>\n\ntype OptionValue = string | number\n\nexport type Props = FieldProps<Array<OptionValue> | undefined> & {\n  children?: React.ReactNode\n  variant?: 'checkbox' | 'button' | 'checkbox-button'\n  optionsLayout?: 'horizontal' | 'vertical'\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  errorMessages?: DefaultErrorMessages & {\n    minItems?: string\n    maxItems?: string\n  }\n}\n\nfunction ArraySelection(props: Props) {\n  const {\n    id,\n    path,\n    dataPath,\n    data,\n    className,\n    variant = 'checkbox',\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    value,\n    hasError,\n    info,\n    warning,\n    disabled,\n    emptyValue,\n    htmlAttributes,\n    handleChange,\n    setDisplayValue,\n    children,\n  } = useFieldProps(props)\n\n  const { getValueByPath } = useDataValue()\n  const dataList = dataPath ? getValueByPath(dataPath) : data\n\n  const fieldBlockProps: FieldBlockProps = {\n    forId: id,\n    className: classnames(\n      'dnb-forms-field-array-selection',\n      `dnb-forms-field-array-selection--variant-${\n        variant === 'checkbox' ? 'checkbox' : 'button'\n      }`,\n      `dnb-forms-field-array-selection--layout-${layout}`,\n      `dnb-forms-field-array-selection--options-layout--${optionsLayout}`,\n      className\n    ),\n    contentClassName: 'dnb-forms-field-array-selection__options',\n    labelHeight: 'small',\n    disableStatusSummary: true,\n    ...pickSpacingProps(props),\n  }\n\n  const options = useCheckboxOrToggleOptions({\n    id,\n    path,\n    variant,\n    info,\n    warning,\n    emptyValue,\n    htmlAttributes,\n    dataList,\n    children,\n    value,\n    disabled,\n    hasError,\n    handleChange,\n    handleActiveData: ({ labels }) => {\n      setDisplayValue(labels)\n    },\n  })\n\n  switch (variant) {\n    case 'checkbox':\n      return <FieldBlock {...fieldBlockProps}>{options}</FieldBlock>\n    default:\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ToggleButtonGroupContext.Provider\n            value={{\n              status: hasError ? 'error' : undefined,\n              disabled,\n            }}\n          >\n            {options}\n          </ToggleButtonGroupContext.Provider>\n        </FieldBlock>\n      )\n  }\n}\n\nexport function useCheckboxOrToggleOptions({\n  id,\n  path,\n  variant = 'checkbox',\n  info,\n  warning,\n  emptyValue,\n  htmlAttributes,\n  dataList,\n  children,\n  value,\n  disabled,\n  hasError,\n  handleChange,\n  handleActiveData,\n}: {\n  id: Props['id']\n  path?: Props['path']\n  variant?: Props['variant']\n  info?: Props['info']\n  warning?: Props['warning']\n  emptyValue?: Props['emptyValue']\n  htmlAttributes?: Props['htmlAttributes']\n  dataList?: Props['data']\n  children?: Props['children']\n  value?: Props['value']\n  disabled?: Props['disabled']\n  hasError?: ReturnAdditional<Props['value']>['hasError']\n  handleChange?: ReturnAdditional<Props['value']>['handleChange']\n  handleActiveData?: (item: { labels: Array<Props['children']> }) => void\n}) {\n  const { setFieldInternals } = useContext(DataContext)\n  const optionsCount = useMemo(\n    () => React.Children.count(children) + (dataList?.length || 0),\n    [dataList, children]\n  )\n  const activeData = []\n\n  const createOption = useCallback(\n    (props: OptionProps, i: number) => {\n      const {\n        value: active,\n        error,\n        title,\n        help,\n        className,\n        children,\n        ...rest\n      } = props\n\n      if (value?.includes(active)) {\n        activeData.push(props)\n      }\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      const handleSelect = () => {\n        const newValue = value?.includes(active)\n          ? value.filter((value) => value !== active)\n          : [...(value ?? []), active]\n\n        handleChange?.(\n          newValue.length === 0 ? (emptyValue as typeof value) : newValue\n        )\n      }\n\n      const Component = (\n        variant === 'checkbox' ? Checkbox : ToggleButton\n      ) as typeof Checkbox & typeof ToggleButton\n\n      return (\n        <Component\n          id={optionsCount === 1 ? id : undefined}\n          key={`option-${i}-${value}`}\n          variant={variant === 'checkbox-button' ? 'checkbox' : undefined}\n          className={classnames(\n            `dnb-forms-field-array-selection__${\n              variant === 'checkbox' ? 'checkbox' : 'button'\n            }`,\n            className\n          )}\n          label={variant === 'checkbox' ? label : undefined}\n          text={variant !== 'checkbox' ? label : undefined}\n          value={value}\n          disabled={disabled}\n          checked={value?.includes(active)}\n          status={\n            (hasError || checkForError([error, info, warning])) && 'error'\n          }\n          suffix={suffix}\n          on_change={handleSelect}\n          {...htmlAttributes}\n          {...rest}\n        />\n      )\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      disabled,\n      emptyValue,\n      handleChange,\n      hasError,\n      htmlAttributes,\n      id,\n      info,\n      optionsCount,\n      value,\n      variant,\n      warning,\n    ]\n  )\n\n  const result = [\n    ...(dataList || []).map((props, i) =>\n      createOption(props as OptionProps, i)\n    ),\n    ...(mapOptions(children, { createOption }) || []).filter(Boolean),\n  ]\n\n  if (handleActiveData) {\n    handleActiveData({\n      labels: activeData.map(({ title, children }) => title ?? children),\n    })\n  }\n\n  if (path) {\n    setFieldInternals?.(path + '/arraySelectionData', activeData)\n  }\n\n  return result\n}\n\nArraySelection._supportsSpacingProps = true\nexport default ArraySelection\n"],"mappings":"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"}
+{"version":3,"file":"ArraySelection.js","names":["React","useCallback","useContext","useMemo","classnames","convertJsxToString","Checkbox","HelpButton","ToggleButton","FieldBlock","useFieldProps","checkForError","pickSpacingProps","ToggleButtonGroupContext","mapOptions","DataContext","useDataValue","ArraySelection","props","id","path","dataPath","data","className","variant","layout","optionsLayout","value","hasError","info","warning","disabled","size","emptyValue","htmlAttributes","handleChange","setDisplayValue","children","getValueByPath","dataList","fieldBlockProps","_objectSpread","forId","contentClassName","disableStatusSummary","labelHeight","options","useCheckboxOrToggleOptions","handleActiveData","_ref","labels","createElement","Provider","status","undefined","_ref2","setFieldInternals","optionsCount","Children","count","length","activeData","createOption","i","active","error","title","help","rest","_objectWithoutProperties","_excluded","includes","push","label","suffix","content","handleSelect","newValue","filter","Component","_extends","key","text","checked","on_change","result","map","Boolean","_ref3","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/ArraySelection/ArraySelection.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo } from 'react'\nimport classnames from 'classnames'\nimport { convertJsxToString } from '../../../../shared/component-helper'\nimport { Checkbox, HelpButton, ToggleButton } from '../../../../components'\nimport FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { checkForError, ReturnAdditional } from '../../hooks/useFieldProps'\nimport { DefaultErrorMessages, FieldProps, Path } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\nimport { HelpProps } from '../../../../components/help-button/HelpButtonInline'\nimport { mapOptions, Data } from '../Selection'\nimport DataContext from '../../DataContext/Context'\nimport useDataValue from '../../hooks/useDataValue'\nimport { FormError } from '../../utils'\nimport type { CheckboxProps } from '../../../../components/Checkbox'\nimport type { ToggleButtonProps } from '../../../../components/ToggleButton'\n\ntype OptionProps = React.ComponentProps<\n  React.FC<{\n    value: number | string\n    error: Error | FormError | undefined\n    title: React.ReactNode\n    help: HelpProps\n    className: string\n    children: React.ReactNode\n    handleSelect: () => void\n    size?: ToggleButtonProps['size'] | CheckboxProps['size']\n  }>\n>\n\ntype OptionValue = string | number\n\nexport type Props = FieldProps<Array<OptionValue> | undefined> & {\n  children?: React.ReactNode\n  variant?: 'checkbox' | 'button' | 'checkbox-button'\n  optionsLayout?: 'horizontal' | 'vertical'\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   * The size of the component.\n   */\n  size?: ToggleButtonProps['size'] | CheckboxProps['size']\n\n  errorMessages?: DefaultErrorMessages & {\n    minItems?: string\n    maxItems?: string\n  }\n}\n\nfunction ArraySelection(props: Props) {\n  const {\n    id,\n    path,\n    dataPath,\n    data,\n    className,\n    variant = 'checkbox',\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    value,\n    hasError,\n    info,\n    warning,\n    disabled,\n    size,\n    emptyValue,\n    htmlAttributes,\n    handleChange,\n    setDisplayValue,\n    children,\n  } = useFieldProps(props)\n\n  const { getValueByPath } = useDataValue()\n  const dataList = dataPath ? getValueByPath(dataPath) : data\n\n  const fieldBlockProps: FieldBlockProps = {\n    forId: id,\n    className: classnames(\n      'dnb-forms-field-array-selection',\n      `dnb-forms-field-array-selection--variant-${\n        variant === 'checkbox' ? 'checkbox' : 'button'\n      }`,\n      `dnb-forms-field-array-selection--layout-${layout}`,\n      `dnb-forms-field-array-selection--options-layout--${optionsLayout}`,\n      className\n    ),\n    contentClassName: 'dnb-forms-field-array-selection__options',\n    disableStatusSummary: true,\n    ...pickSpacingProps(props),\n  }\n  if (!size) {\n    fieldBlockProps.labelHeight = 'small'\n  }\n\n  const options = useCheckboxOrToggleOptions({\n    id,\n    path,\n    variant,\n    info,\n    warning,\n    emptyValue,\n    htmlAttributes,\n    dataList,\n    children,\n    value,\n    disabled,\n    size,\n    hasError,\n    handleChange,\n    handleActiveData: ({ labels }) => {\n      setDisplayValue(labels)\n    },\n  })\n\n  switch (variant) {\n    case 'checkbox':\n      return <FieldBlock {...fieldBlockProps}>{options}</FieldBlock>\n    default:\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ToggleButtonGroupContext.Provider\n            value={{\n              status: hasError ? 'error' : undefined,\n              disabled,\n              size,\n            }}\n          >\n            {options}\n          </ToggleButtonGroupContext.Provider>\n        </FieldBlock>\n      )\n  }\n}\n\nexport function useCheckboxOrToggleOptions({\n  id,\n  path,\n  variant = 'checkbox',\n  info,\n  warning,\n  emptyValue,\n  htmlAttributes,\n  dataList,\n  children,\n  value,\n  disabled,\n  size,\n  hasError,\n  handleChange,\n  handleActiveData,\n}: {\n  id: Props['id']\n  path?: Props['path']\n  variant?: Props['variant']\n  info?: Props['info']\n  warning?: Props['warning']\n  emptyValue?: Props['emptyValue']\n  htmlAttributes?: Props['htmlAttributes']\n  dataList?: Props['data']\n  children?: Props['children']\n  value?: Props['value']\n  disabled?: Props['disabled']\n  size?: Props['size']\n  hasError?: ReturnAdditional<Props['value']>['hasError']\n  handleChange?: ReturnAdditional<Props['value']>['handleChange']\n  handleActiveData?: (item: { labels: Array<Props['children']> }) => void\n}) {\n  const { setFieldInternals } = useContext(DataContext)\n  const optionsCount = useMemo(\n    () => React.Children.count(children) + (dataList?.length || 0),\n    [dataList, children]\n  )\n  const activeData = []\n\n  const createOption = useCallback(\n    (props: OptionProps, i: number) => {\n      const {\n        value: active,\n        error,\n        title,\n        help,\n        className,\n        children,\n        ...rest\n      } = props\n\n      if (value?.includes(active)) {\n        activeData.push(props)\n      }\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      const handleSelect = () => {\n        const newValue = value?.includes(active)\n          ? value.filter((value) => value !== active)\n          : [...(value ?? []), active]\n\n        handleChange?.(\n          newValue.length === 0 ? (emptyValue as typeof value) : newValue\n        )\n      }\n\n      const Component = (\n        variant === 'checkbox' ? Checkbox : ToggleButton\n      ) as typeof Checkbox & typeof ToggleButton\n\n      return (\n        <Component\n          id={optionsCount === 1 ? id : undefined}\n          key={`option-${i}-${value}`}\n          variant={variant === 'checkbox-button' ? 'checkbox' : undefined}\n          className={classnames(\n            `dnb-forms-field-array-selection__${\n              variant === 'checkbox' ? 'checkbox' : 'button'\n            }`,\n            className\n          )}\n          size={size}\n          label={variant === 'checkbox' ? label : undefined}\n          text={variant !== 'checkbox' ? label : undefined}\n          value={value}\n          disabled={disabled}\n          checked={value?.includes(active)}\n          status={\n            (hasError || checkForError([error, info, warning])) && 'error'\n          }\n          suffix={suffix}\n          on_change={handleSelect}\n          {...htmlAttributes}\n          {...rest}\n        />\n      )\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      disabled,\n      emptyValue,\n      handleChange,\n      hasError,\n      htmlAttributes,\n      id,\n      info,\n      optionsCount,\n      value,\n      variant,\n      warning,\n    ]\n  )\n\n  const result = [\n    ...(dataList || []).map((props, i) =>\n      createOption(props as OptionProps, i)\n    ),\n    ...(mapOptions(children, { createOption }) || []).filter(Boolean),\n  ]\n\n  if (handleActiveData) {\n    handleActiveData({\n      labels: activeData.map(({ title, children }) => title ?? children),\n    })\n  }\n\n  if (path) {\n    setFieldInternals?.(path + '/arraySelectionData', activeData)\n  }\n\n  return result\n}\n\nArraySelection._supportsSpacingProps = true\nexport default ArraySelection\n"],"mappings":"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"}

package/extensions/forms/Field/ArraySelection/ArraySelectionDocs.js

@@ -16,6 +16,11 @@ export const arraySelectionProperties = {
     type: 'React.Node',
     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'
+  },
   data: {
     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.',
     type: 'array',

package/extensions/forms/Field/ArraySelection/ArraySelectionDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArraySelectionDocs.js","names":["arraySelectionProperties","variant","doc","type","defaultValue","status","optionsLayout","children","data","dataPath"],"sources":["../../../../../../src/extensions/forms/Field/ArraySelection/ArraySelectionDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const arraySelectionProperties: PropertiesTableProps = {\n  variant: {\n    doc: 'Choice of UI feature.',\n    type: [`'checkbox'`, `'button'`, `'checkbox-button'`],\n    defaultValue: `'checkbox'`,\n    status: 'optional',\n  },\n  optionsLayout: {\n    doc: 'Layout for the list of options.',\n    type: [`'horizontal'`, `'vertical'`],\n    defaultValue: `'vertical'`,\n    status: 'optional',\n  },\n  children: {\n    doc: 'For providing `<Field.Option>` components.',\n    type: 'React.Node',\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}\n"],"mappings":"AAEA,OAAO,MAAMA,wBAA8C,GAAG;EAC5DC,OAAO,EAAE;IACPC,GAAG,EAAE,uBAAuB;IAC5BC,IAAI,EAAE,CAAE,YAAW,EAAG,UAAS,EAAG,mBAAkB,CAAC;IACrDC,YAAY,EAAG,YAAW;IAC1BC,MAAM,EAAE;EACV,CAAC;EACDC,aAAa,EAAE;IACbJ,GAAG,EAAE,iCAAiC;IACtCC,IAAI,EAAE,CAAE,cAAa,EAAG,YAAW,CAAC;IACpCC,YAAY,EAAG,YAAW;IAC1BC,MAAM,EAAE;EACV,CAAC;EACDE,QAAQ,EAAE;IACRL,GAAG,EAAE,4CAA4C;IACjDC,IAAI,EAAE,YAAY;IAClBE,MAAM,EAAE;EACV,CAAC;EACDG,IAAI,EAAE;IACJN,GAAG,EAAE,iRAAiR;IACtRC,IAAI,EAAE,OAAO;IACbE,MAAM,EAAE;EACV,CAAC;EACDI,QAAQ,EAAE;IACRP,GAAG,EAAE,2LAA2L;IAChMC,IAAI,EAAE,QAAQ;IACdE,MAAM,EAAE;EACV;AACF,CAAC"}
+{"version":3,"file":"ArraySelectionDocs.js","names":["arraySelectionProperties","variant","doc","type","defaultValue","status","optionsLayout","children","size","data","dataPath"],"sources":["../../../../../../src/extensions/forms/Field/ArraySelection/ArraySelectionDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const arraySelectionProperties: PropertiesTableProps = {\n  variant: {\n    doc: 'Choice of UI feature.',\n    type: [`'checkbox'`, `'button'`, `'checkbox-button'`],\n    defaultValue: `'checkbox'`,\n    status: 'optional',\n  },\n  optionsLayout: {\n    doc: 'Layout for the list of options.',\n    type: [`'horizontal'`, `'vertical'`],\n    defaultValue: `'vertical'`,\n    status: 'optional',\n  },\n  children: {\n    doc: 'For providing `<Field.Option>` components.',\n    type: 'React.Node',\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  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}\n"],"mappings":"AAEA,OAAO,MAAMA,wBAA8C,GAAG;EAC5DC,OAAO,EAAE;IACPC,GAAG,EAAE,uBAAuB;IAC5BC,IAAI,EAAE,CAAE,YAAW,EAAG,UAAS,EAAG,mBAAkB,CAAC;IACrDC,YAAY,EAAG,YAAW;IAC1BC,MAAM,EAAE;EACV,CAAC;EACDC,aAAa,EAAE;IACbJ,GAAG,EAAE,iCAAiC;IACtCC,IAAI,EAAE,CAAE,cAAa,EAAG,YAAW,CAAC;IACpCC,YAAY,EAAG,YAAW;IAC1BC,MAAM,EAAE;EACV,CAAC;EACDE,QAAQ,EAAE;IACRL,GAAG,EAAE,4CAA4C;IACjDC,IAAI,EAAE,YAAY;IAClBE,MAAM,EAAE;EACV,CAAC;EACDG,IAAI,EAAE;IACJN,GAAG,EAAE,oWAAoW;IACzWC,IAAI,EAAE,QAAQ;IACdE,MAAM,EAAE;EACV,CAAC;EACDI,IAAI,EAAE;IACJP,GAAG,EAAE,iRAAiR;IACtRC,IAAI,EAAE,OAAO;IACbE,MAAM,EAAE;EACV,CAAC;EACDK,QAAQ,EAAE;IACRR,GAAG,EAAE,2LAA2L;IAChMC,IAAI,EAAE,QAAQ;IACdE,MAAM,EAAE;EACV;AACF,CAAC"}

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

@@ -1,9 +1,9 @@
 import { Props as StringFieldProps } from '../String';
-import { Validator } from '../../types';
+import type { ValidatorDisableable } from '../../types';
 export type Props = Omit<StringFieldProps, 'onBlurValidator'> & {
     validate?: boolean;
     omitMask?: boolean;
-    onBlurValidator?: Validator<string> | false;
+    onBlurValidator?: ValidatorDisableable<string>;
 };
 declare function BankAccountNumber(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace BankAccountNumber {

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

@@ -1 +1 @@
-{"version":3,"file":"BankAccountNumber.js","names":["React","useCallback","useMemo","StringField","useTranslation","BankAccountNumber","props","errorBankAccountNumber","errorBankAccountNumberLength","errorRequired","label","errorMessages","_objectSpread","bankAccountNumberValidator","value","undefined","bankAccountNoIs11Digits","length","Error","isValidAccountNumber","validate","omitMask","validator","onChangeValidator","onBlurValidator","labelProp","width","mask","onBlurValidatorToUse","StringFieldProps","className","inputMode","exportValidators","createElement","digits","checkDigit","sum","i","parseInt","charAt","result","finalCheckDigit","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/BankAccountNumber/BankAccountNumber.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react'\nimport StringField, { Props as StringFieldProps } from '../String'\n\nimport useTranslation from '../../hooks/useTranslation'\nimport { Validator } from '../../types'\n\nexport type Props = Omit<StringFieldProps, 'onBlurValidator'> & {\n  validate?: boolean\n  omitMask?: boolean\n  onBlurValidator?: Validator<string> | false\n}\n\nfunction BankAccountNumber(props: Props) {\n  const {\n    errorBankAccountNumber,\n    errorBankAccountNumberLength,\n    errorRequired,\n    label,\n  } = useTranslation().BankAccountNumber\n\n  const errorMessages = useMemo(() => {\n    return {\n      'Field.errorRequired': errorRequired,\n      'Field.errorPattern': errorBankAccountNumber,\n      ...props.errorMessages,\n    }\n  }, [errorBankAccountNumber, errorRequired, props.errorMessages])\n\n  const bankAccountNumberValidator = useCallback(\n    (value: string) => {\n      if (value !== undefined) {\n        const bankAccountNoIs11Digits = value?.length === 11\n\n        if (!bankAccountNoIs11Digits) {\n          return Error(errorBankAccountNumberLength)\n        }\n\n        if (bankAccountNoIs11Digits && !isValidAccountNumber(value)) {\n          return Error(errorBankAccountNumber)\n        }\n      }\n    },\n    [errorBankAccountNumber, errorBankAccountNumberLength]\n  )\n\n  const {\n    validate = true,\n    omitMask,\n    // Deprecated – can be removed in v11\n    validator,\n    onChangeValidator = validator,\n    onBlurValidator = bankAccountNumberValidator,\n    label: labelProp,\n    width,\n  } = props\n\n  const mask = useMemo(\n    () =>\n      omitMask\n        ? [\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n          ]\n        : [\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            ' ',\n            /\\d/,\n            /\\d/,\n            ' ',\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n          ],\n    [omitMask]\n  )\n\n  const onBlurValidatorToUse =\n    onBlurValidator === false ? undefined : onBlurValidator\n\n  const StringFieldProps: StringFieldProps = {\n    ...props,\n    className: 'dnb-forms-field-bank-account-number',\n    label: labelProp ?? label,\n    errorMessages,\n    mask,\n    width: width ?? 'medium',\n    inputMode: 'numeric',\n    onChangeValidator: validate ? onChangeValidator : undefined,\n    onBlurValidator: validate ? onBlurValidatorToUse : undefined,\n    exportValidators: { bankAccountNumberValidator },\n  }\n\n  return <StringField {...StringFieldProps} />\n}\n\nfunction isValidAccountNumber(digits: string) {\n  let checkDigit = 2\n  let sum = 0\n\n  for (let i = digits.length - 2; i >= 0; --i) {\n    sum += parseInt(digits.charAt(i)) * checkDigit\n\n    checkDigit += 1\n\n    if (checkDigit > 7) {\n      checkDigit = 2\n    }\n  }\n\n  const result = 11 - (sum % 11)\n  const finalCheckDigit = result === 11 ? 0 : result\n\n  return parseInt(digits.charAt(digits.length - 1), 10) === finalCheckDigit\n}\n\nBankAccountNumber._supportsSpacingProps = true\nexport default BankAccountNumber\n"],"mappings":"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"}
+{"version":3,"file":"BankAccountNumber.js","names":["React","useCallback","useMemo","StringField","useTranslation","BankAccountNumber","props","errorBankAccountNumber","errorBankAccountNumberLength","errorRequired","label","errorMessages","_objectSpread","bankAccountNumberValidator","value","undefined","bankAccountNoIs11Digits","length","Error","isValidAccountNumber","validate","omitMask","validator","onChangeValidator","onBlurValidator","labelProp","width","mask","onBlurValidatorToUse","StringFieldProps","className","inputMode","exportValidators","createElement","digits","checkDigit","sum","i","parseInt","charAt","result","finalCheckDigit","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/BankAccountNumber/BankAccountNumber.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react'\nimport StringField, { Props as StringFieldProps } from '../String'\n\nimport useTranslation from '../../hooks/useTranslation'\nimport type { ValidatorDisableable } from '../../types'\n\nexport type Props = Omit<StringFieldProps, 'onBlurValidator'> & {\n  validate?: boolean\n  omitMask?: boolean\n  onBlurValidator?: ValidatorDisableable<string>\n}\n\nfunction BankAccountNumber(props: Props) {\n  const {\n    errorBankAccountNumber,\n    errorBankAccountNumberLength,\n    errorRequired,\n    label,\n  } = useTranslation().BankAccountNumber\n\n  const errorMessages = useMemo(() => {\n    return {\n      'Field.errorRequired': errorRequired,\n      'Field.errorPattern': errorBankAccountNumber,\n      ...props.errorMessages,\n    }\n  }, [errorBankAccountNumber, errorRequired, props.errorMessages])\n\n  const bankAccountNumberValidator = useCallback(\n    (value: string) => {\n      if (value !== undefined) {\n        const bankAccountNoIs11Digits = value?.length === 11\n\n        if (!bankAccountNoIs11Digits) {\n          return Error(errorBankAccountNumberLength)\n        }\n\n        if (bankAccountNoIs11Digits && !isValidAccountNumber(value)) {\n          return Error(errorBankAccountNumber)\n        }\n      }\n    },\n    [errorBankAccountNumber, errorBankAccountNumberLength]\n  )\n\n  const {\n    validate = true,\n    omitMask,\n    // Deprecated – can be removed in v11\n    validator,\n    onChangeValidator = validator,\n    onBlurValidator = bankAccountNumberValidator,\n    label: labelProp,\n    width,\n  } = props\n\n  const mask = useMemo(\n    () =>\n      omitMask\n        ? [\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n          ]\n        : [\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            ' ',\n            /\\d/,\n            /\\d/,\n            ' ',\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n          ],\n    [omitMask]\n  )\n\n  const onBlurValidatorToUse =\n    onBlurValidator === false ? undefined : onBlurValidator\n\n  const StringFieldProps: StringFieldProps = {\n    ...props,\n    className: 'dnb-forms-field-bank-account-number',\n    label: labelProp ?? label,\n    errorMessages,\n    mask,\n    width: width ?? 'medium',\n    inputMode: 'numeric',\n    onChangeValidator: validate ? onChangeValidator : undefined,\n    onBlurValidator: validate ? onBlurValidatorToUse : undefined,\n    exportValidators: { bankAccountNumberValidator },\n  }\n\n  return <StringField {...StringFieldProps} />\n}\n\nfunction isValidAccountNumber(digits: string) {\n  let checkDigit = 2\n  let sum = 0\n\n  for (let i = digits.length - 2; i >= 0; --i) {\n    sum += parseInt(digits.charAt(i)) * checkDigit\n\n    checkDigit += 1\n\n    if (checkDigit > 7) {\n      checkDigit = 2\n    }\n  }\n\n  const result = 11 - (sum % 11)\n  const finalCheckDigit = result === 11 ? 0 : result\n\n  return parseInt(digits.charAt(digits.length - 1), 10) === finalCheckDigit\n}\n\nBankAccountNumber._supportsSpacingProps = true\nexport default BankAccountNumber\n"],"mappings":"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"}

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

@@ -4,6 +4,7 @@ type BooleanProps = {
     trueText?: string;
     falseText?: string;
     variant?: ToggleFieldProps['variant'];
+    size?: ToggleFieldProps['size'];
     dependencePaths?: never;
 };
 type NeverBooleanProps = {

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

@@ -1 +1 @@
-{"version":3,"file":"Boolean.js","names":["React","ToggleField","useTranslation","BooleanComponent","props","trueText","falseText","restProps","_objectWithoutProperties","_excluded","translations","BooleanField","createElement","_extends","valueOn","valueOff","textOn","yes","textOff","no","valueType","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Boolean/Boolean.tsx"],"sourcesContent":["import React from 'react'\nimport ToggleField, { Props as ToggleFieldProps } from '../Toggle'\nimport useTranslation from '../../hooks/useTranslation'\nimport { FieldProps, Path } from '../../types'\n\ntype BooleanProps = {\n  trueText?: string\n  falseText?: string\n  variant?: ToggleFieldProps['variant']\n  dependencePaths?: never\n}\ntype NeverBooleanProps = {\n  // eslint-disable-next-line no-unused-vars\n  [K in keyof Partial<Omit<BooleanProps, 'dependencePaths'>>]: never\n}\ntype SharedFieldProps = Omit<\n  FieldProps<unknown>,\n  'layout' | 'layoutOptions'\n>\nexport type IndeterminateProps = SharedFieldProps & {\n  dependencePaths: Array<Path>\n} & NeverBooleanProps\nexport type Props = SharedFieldProps & BooleanProps\n\nfunction BooleanComponent(props: Props | IndeterminateProps) {\n  const { trueText, falseText, ...restProps } = props\n  const translations = useTranslation().BooleanField\n\n  return (\n    <ToggleField\n      {...(restProps as ToggleFieldProps)}\n      valueOn={true}\n      valueOff={false}\n      textOn={trueText ?? translations.yes}\n      textOff={falseText ?? translations.no}\n      valueType=\"boolean\"\n    />\n  )\n}\n\nBooleanComponent._supportsSpacingProps = true\nexport default BooleanComponent\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,WAAW,MAAqC,WAAW;AAClE,OAAOC,cAAc,MAAM,4BAA4B;AAsBvD,SAASC,gBAAgBA,CAACC,KAAiC,EAAE;EAC3D,MAAM;MAAEC,QAAQ;MAAEC;IAAwB,CAAC,GAAGF,KAAK;IAAnBG,SAAS,GAAAC,wBAAA,CAAKJ,KAAK,EAAAK,SAAA;EACnD,MAAMC,YAAY,GAAGR,cAAc,CAAC,CAAC,CAACS,YAAY;EAElD,OACEX,KAAA,CAAAY,aAAA,CAACX,WAAW,EAAAY,QAAA,KACLN,SAAS;IACdO,OAAO,EAAE,IAAK;IACdC,QAAQ,EAAE,KAAM;IAChBC,MAAM,EAAEX,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAIK,YAAY,CAACO,GAAI;IACrCC,OAAO,EAAEZ,SAAS,aAATA,SAAS,cAATA,SAAS,GAAII,YAAY,CAACS,EAAG;IACtCC,SAAS,EAAC;EAAS,EACpB,CAAC;AAEN;AAEAjB,gBAAgB,CAACkB,qBAAqB,GAAG,IAAI;AAC7C,eAAelB,gBAAgB"}
+{"version":3,"file":"Boolean.js","names":["React","ToggleField","useTranslation","BooleanComponent","props","trueText","falseText","restProps","_objectWithoutProperties","_excluded","translations","BooleanField","createElement","_extends","valueOn","valueOff","textOn","yes","textOff","no","valueType","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Boolean/Boolean.tsx"],"sourcesContent":["import React from 'react'\nimport ToggleField, { Props as ToggleFieldProps } from '../Toggle'\nimport useTranslation from '../../hooks/useTranslation'\nimport { FieldProps, Path } from '../../types'\n\ntype BooleanProps = {\n  trueText?: string\n  falseText?: string\n  variant?: ToggleFieldProps['variant']\n  size?: ToggleFieldProps['size']\n  dependencePaths?: never\n}\ntype NeverBooleanProps = {\n  // eslint-disable-next-line no-unused-vars\n  [K in keyof Partial<Omit<BooleanProps, 'dependencePaths'>>]: never\n}\ntype SharedFieldProps = Omit<\n  FieldProps<unknown>,\n  'layout' | 'layoutOptions'\n>\nexport type IndeterminateProps = SharedFieldProps & {\n  dependencePaths: Array<Path>\n} & NeverBooleanProps\nexport type Props = SharedFieldProps & BooleanProps\n\nfunction BooleanComponent(props: Props | IndeterminateProps) {\n  const { trueText, falseText, ...restProps } = props\n  const translations = useTranslation().BooleanField\n\n  return (\n    <ToggleField\n      {...(restProps as ToggleFieldProps)}\n      valueOn={true}\n      valueOff={false}\n      textOn={trueText ?? translations.yes}\n      textOff={falseText ?? translations.no}\n      valueType=\"boolean\"\n    />\n  )\n}\n\nBooleanComponent._supportsSpacingProps = true\nexport default BooleanComponent\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,WAAW,MAAqC,WAAW;AAClE,OAAOC,cAAc,MAAM,4BAA4B;AAuBvD,SAASC,gBAAgBA,CAACC,KAAiC,EAAE;EAC3D,MAAM;MAAEC,QAAQ;MAAEC;IAAwB,CAAC,GAAGF,KAAK;IAAnBG,SAAS,GAAAC,wBAAA,CAAKJ,KAAK,EAAAK,SAAA;EACnD,MAAMC,YAAY,GAAGR,cAAc,CAAC,CAAC,CAACS,YAAY;EAElD,OACEX,KAAA,CAAAY,aAAA,CAACX,WAAW,EAAAY,QAAA,KACLN,SAAS;IACdO,OAAO,EAAE,IAAK;IACdC,QAAQ,EAAE,KAAM;IAChBC,MAAM,EAAEX,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAIK,YAAY,CAACO,GAAI;IACrCC,OAAO,EAAEZ,SAAS,aAATA,SAAS,cAATA,SAAS,GAAII,YAAY,CAACS,EAAG;IACtCC,SAAS,EAAC;EAAS,EACpB,CAAC;AAEN;AAEAjB,gBAAgB,CAACkB,qBAAqB,GAAG,IAAI;AAC7C,eAAelB,gBAAgB"}

package/extensions/forms/Field/Boolean/BooleanDocs.js

@@ -1,3 +1,4 @@
+import { ToggleProperties } from '../Toggle/ToggleDocs';
 export const BooleanProperties = {
   trueText: {
     doc: 'Text to show in the UI when value is `true`.',
@@ -13,6 +14,7 @@ export const BooleanProperties = {
     doc: 'Choice of input feature. Can be: `checkbox`, `button`, `checkbox-button` or `buttons`.',
     type: 'string',
     status: 'optional'
-  }
+  },
+  size: ToggleProperties.size
 };
 //# sourceMappingURL=BooleanDocs.js.map

package/extensions/forms/Field/Boolean/BooleanDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"BooleanDocs.js","names":["BooleanProperties","trueText","doc","type","status","falseText","variant"],"sources":["../../../../../../src/extensions/forms/Field/Boolean/BooleanDocs.tsx"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const BooleanProperties: PropertiesTableProps = {\n  trueText: {\n    doc: 'Text to show in the UI when value is `true`.',\n    type: 'string',\n    status: 'optional',\n  },\n  falseText: {\n    doc: 'Text to show in the UI when value is `false`.',\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,iBAAuC,GAAG;EACrDC,QAAQ,EAAE;IACRC,GAAG,EAAE,8CAA8C;IACnDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,SAAS,EAAE;IACTH,GAAG,EAAE,+CAA+C;IACpDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,OAAO,EAAE;IACPJ,GAAG,EAAE,wFAAwF;IAC7FC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV;AACF,CAAC"}
+{"version":3,"file":"BooleanDocs.js","names":["ToggleProperties","BooleanProperties","trueText","doc","type","status","falseText","variant","size"],"sources":["../../../../../../src/extensions/forms/Field/Boolean/BooleanDocs.tsx"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\nimport { ToggleProperties } from '../Toggle/ToggleDocs'\n\nexport const BooleanProperties: PropertiesTableProps = {\n  trueText: {\n    doc: 'Text to show in the UI when value is `true`.',\n    type: 'string',\n    status: 'optional',\n  },\n  falseText: {\n    doc: 'Text to show in the UI when value is `false`.',\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  size: ToggleProperties.size,\n}\n"],"mappings":"AACA,SAASA,gBAAgB,QAAQ,sBAAsB;AAEvD,OAAO,MAAMC,iBAAuC,GAAG;EACrDC,QAAQ,EAAE;IACRC,GAAG,EAAE,8CAA8C;IACnDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,SAAS,EAAE;IACTH,GAAG,EAAE,+CAA+C;IACpDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,OAAO,EAAE;IACPJ,GAAG,EAAE,wFAAwF;IAC7FC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,IAAI,EAAER,gBAAgB,CAACQ;AACzB,CAAC"}

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

@@ -1,6 +1,6 @@
-import { FieldProps } from '../../types';
+import type { FieldProps, ValidatorDisableable } from '../../types';
 import { DatePickerProps } from '../../../../components/DatePicker';
-export type Props = FieldProps<string, undefined | string> & {
+export type DateProps = Omit<FieldProps<string, undefined | string>, 'onBlurValidator'> & {
     pattern?: string;
     /**
      * Defines if the Date field should support a value of two dates (starting and ending date).
@@ -20,8 +20,9 @@ export type Props = FieldProps<string, undefined | string> & {
      * If set to `true`, a reset button will be shown. You can change the default text by using `reset_button_text="Tilbakestill"` Defaults to `true`.
      */
     showResetButton?: DatePickerProps['showResetButton'];
-} & Pick<DatePickerProps, 'month' | 'startMonth' | 'endMonth' | 'minDate' | 'maxDate' | 'correctInvalidDate' | 'maskOrder' | 'maskPlaceholder' | 'dateFormat' | 'returnFormat' | 'hideNavigation' | 'hideDays' | 'onlyMonth' | 'hideLastWeek' | 'disableAutofocus' | 'showSubmitButton' | 'submitButtonText' | 'cancelButtonText' | 'resetButtonText' | 'firstDay' | 'link' | 'sync' | 'addonElement' | 'shortcuts' | 'opened' | 'direction' | 'alignPicker' | 'onDaysRender' | 'onType' | 'onShow' | 'onHide' | 'onSubmit' | 'onCancel' | 'onReset'>;
-declare function DateComponent(props: Props): import("react/jsx-runtime").JSX.Element;
+    onBlurValidator?: ValidatorDisableable<string>;
+} & Pick<DatePickerProps, 'month' | 'startMonth' | 'endMonth' | 'minDate' | 'maxDate' | 'correctInvalidDate' | 'maskOrder' | 'maskPlaceholder' | 'dateFormat' | 'returnFormat' | 'hideNavigation' | 'hideDays' | 'onlyMonth' | 'hideLastWeek' | 'disableAutofocus' | 'showSubmitButton' | 'submitButtonText' | 'cancelButtonText' | 'resetButtonText' | 'firstDay' | 'link' | 'size' | 'sync' | 'addonElement' | 'shortcuts' | 'opened' | 'direction' | 'alignPicker' | 'onDaysRender' | 'onType' | 'onShow' | 'onHide' | 'onSubmit' | 'onCancel' | 'onReset'>;
+declare function DateComponent(props: DateProps): import("react/jsx-runtime").JSX.Element;
 declare namespace DateComponent {
     var _supportsSpacingProps: boolean;
 }

package/extensions/forms/Field/Date/Date.js

@@ -3,7 +3,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-const _excluded = ["id", "path", "itemPath", "className", "label", "value", "hasError", "disabled", "htmlAttributes", "handleFocus", "handleBlur", "handleChange", "setDisplayValue", "range", "showCancelButton", "showResetButton", "showInput", "onReset"];
+const _excluded = ["id", "path", "itemPath", "className", "label", "value", "hasError", "disabled", "htmlAttributes", "handleFocus", "handleBlur", "handleChange", "setDisplayValue", "range", "showCancelButton", "showResetButton", "showInput", "onReset", "minDate", "maxDate"],
+  _excluded2 = ["value", "isRange", "locale"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useCallback, useContext, useMemo } from 'react';
@@ -13,20 +14,26 @@ import { pickSpacingProps } from '../../../../components/flex/utils';
 import classnames from 'classnames';
 import FieldBlock from '../../FieldBlock';
 import SharedContext from '../../../../shared/Context';
-import { parseISO, isValid } from 'date-fns';
+import { parseISO, isValid, isBefore, isAfter } from 'date-fns';
 import useTranslation from '../../hooks/useTranslation';
 import { formatDate } from '../../Value/Date';
+import { convertStringToDate } from '../../../../components/date-picker/DatePickerCalc';
+import { FormError } from '../../utils';
 function DateComponent(props) {
-  const translations = useTranslation();
+  var _props$validateInitia;
+  const {
+    errorRequired,
+    label: defaultLabel
+  } = useTranslation().Date;
   const {
     locale
   } = useContext(SharedContext);
   const errorMessages = useMemo(() => {
     return _objectSpread({
-      'Field.errorRequired': translations.Date.errorRequired,
-      'Field.errorPattern': translations.Date.errorRequired
+      'Field.errorRequired': errorRequired,
+      'Field.errorPattern': errorRequired
     }, props.errorMessages);
-  }, [props.errorMessages, translations.Date.errorRequired]);
+  }, [props.errorMessages, errorRequired]);
   const schema = useMemo(() => {
     var _props$schema;
     return (_props$schema = props.schema) !== null && _props$schema !== void 0 ? _props$schema : {
@@ -44,6 +51,28 @@ function DateComponent(props) {
     }
     return undefined;
   }, []);
+  const dateLimitValidator = useCallback(value => {
+    const res = validateDateLimit({
+      value,
+      locale,
+      minDate: props.minDate,
+      maxDate: props.maxDate,
+      isRange: props.range
+    });
+    return res;
+  }, [props.maxDate, props.minDate, props.range, locale]);
+  const onBlurValidator = useMemo(() => {
+    if (props.onBlurValidator === false) {
+      return undefined;
+    }
+    if (props.onBlurValidator) {
+      return props.onBlurValidator;
+    }
+    return dateLimitValidator;
+  }, [props.onBlurValidator, dateLimitValidator]);
+  const hasDateLimitAndValue = useMemo(() => {
+    return (props.minDate || props.maxDate) && Boolean(props.value);
+  }, [props.minDate, props.maxDate, props.value]);
   const preparedProps = _objectSpread(_objectSpread({}, props), {}, {
     errorMessages,
     schema,
@@ -55,7 +84,12 @@ function DateComponent(props) {
       } = _ref2;
       return range ? `${start_date}|${end_date}` : date;
     },
-    validateRequired
+    validateRequired,
+    validateInitially: (_props$validateInitia = props.validateInitially) !== null && _props$validateInitia !== void 0 ? _props$validateInitia : hasDateLimitAndValue,
+    onBlurValidator,
+    exportValidators: {
+      dateLimitValidator
+    }
   });
   const _useFieldProps = useFieldProps(preparedProps),
     {
@@ -76,7 +110,9 @@ function DateComponent(props) {
       showCancelButton = true,
       showResetButton = true,
       showInput = true,
-      onReset
+      onReset,
+      minDate,
+      maxDate
     } = _useFieldProps,
     rest = _objectWithoutProperties(_useFieldProps, _excluded);
   const datePickerProps = pickDatePickerProps(rest);
@@ -92,7 +128,7 @@ function DateComponent(props) {
         endDate: undefined
       };
     }
-    const [startDate, endDate] = valueProp.split('|').map(value => /(undefined|null)/.test(value) ? null : value);
+    const [startDate, endDate] = parseRangeValue(valueProp);
     return {
       value: undefined,
       startDate,
@@ -103,12 +139,12 @@ function DateComponent(props) {
     if ((path || itemPath) && valueProp) {
       setDisplayValue(formatDate(valueProp, {
         locale
-      }));
+      }), undefined);
     }
   }, [itemPath, locale, path, setDisplayValue, valueProp]);
   const fieldBlockProps = _objectSpread({
     forId: id,
-    label: label !== null && label !== void 0 ? label : translations.Date.label,
+    label: label !== null && label !== void 0 ? label : defaultLabel,
     className: classnames('dnb-forms-field-string', className)
   }, pickSpacingProps(props));
   return React.createElement(FieldBlock, fieldBlockProps, React.createElement(DatePicker, _extends({
@@ -120,6 +156,8 @@ function DateComponent(props) {
     showResetButton: showResetButton,
     startDate: startDate,
     endDate: endDate,
+    minDate: minDate,
+    maxDate: maxDate,
     status: hasError ? 'error' : undefined,
     range: range,
     onChange: handleChange,
@@ -131,7 +169,81 @@ function DateComponent(props) {
     onBlur: handleBlur
   }, datePickerProps, htmlAttributes)));
 }
-const datePickerPropKeys = ['month', 'startMonth', 'endMonth', 'minDate', 'maxDate', 'correctInvalidDate', 'maskOrder', 'maskPlaceholder', 'dateFormat', 'returnFormat', 'hideNavigation', 'hideDays', 'onlyMonth', 'hideLastWeek', 'disableAutofocus', 'showSubmitButton', 'submitButtonText', 'cancelButtonText', 'resetButtonText', 'firstDay', 'link', 'sync', 'addonElement', 'shortcuts', 'opened', 'direction', 'alignPicker', 'onDaysRender', 'showInput', 'onDaysRender', 'onType', 'onShow', 'onHide', 'onSubmit', 'onCancel', 'onReset'];
+function parseRangeValue(value) {
+  return value.split('|').map(value => /(undefined|null)/.test(value) ? null : value);
+}
+function validateDateLimit(_ref3) {
+  let {
+      value,
+      isRange,
+      locale
+    } = _ref3,
+    dates = _objectWithoutProperties(_ref3, _excluded2);
+  if (!dates.minDate && !dates.maxDate || !value) {
+    return;
+  }
+  const [startDateParsed, endDateParsed] = parseRangeValue(value);
+  const minDate = convertStringToDate(dates.minDate);
+  const maxDate = convertStringToDate(dates.maxDate);
+  const startDate = convertStringToDate(startDateParsed);
+  const endDate = convertStringToDate(endDateParsed);
+  const isoDates = {
+    minDate: dates.minDate instanceof Date ? dates.minDate.toISOString() : dates.minDate,
+    maxDate: dates.maxDate instanceof Date ? dates.maxDate.toISOString() : dates.maxDate
+  };
+  const options = {
+    locale,
+    variant: 'long'
+  };
+  if (!isRange) {
+    if (isBefore(startDate, minDate)) {
+      return new FormError('Date.errorMinDate', {
+        messageValues: {
+          date: formatDate(isoDates.minDate, options)
+        }
+      });
+    }
+    if (isAfter(startDate, maxDate)) {
+      return new FormError('Date.errorMaxDate', {
+        messageValues: {
+          date: formatDate(isoDates.maxDate, options)
+        }
+      });
+    }
+    return;
+  }
+  const messages = [];
+  if (isBefore(startDate, minDate)) {
+    messages.push(new FormError('Date.errorStartDateMinDate', {
+      messageValues: {
+        date: formatDate(isoDates.minDate, options)
+      }
+    }));
+  }
+  if (isAfter(startDate, maxDate)) {
+    messages.push(new FormError('Date.errorStartDateMaxDate', {
+      messageValues: {
+        date: formatDate(isoDates.maxDate, options)
+      }
+    }));
+  }
+  if (isBefore(endDate, minDate)) {
+    messages.push(new FormError('Date.errorEndDateMinDate', {
+      messageValues: {
+        date: formatDate(isoDates.minDate, options)
+      }
+    }));
+  }
+  if (isAfter(endDate, maxDate)) {
+    messages.push(new FormError('Date.errorEndDateMaxDate', {
+      messageValues: {
+        date: formatDate(isoDates.maxDate, options)
+      }
+    }));
+  }
+  return messages;
+}
+const datePickerPropKeys = ['month', 'startMonth', 'endMonth', 'minDate', 'maxDate', 'correctInvalidDate', 'maskOrder', 'maskPlaceholder', 'dateFormat', 'returnFormat', 'hideNavigation', 'hideDays', 'onlyMonth', 'hideLastWeek', 'disableAutofocus', 'showSubmitButton', 'submitButtonText', 'cancelButtonText', 'resetButtonText', 'firstDay', 'link', 'size', 'sync', 'addonElement', 'shortcuts', 'opened', 'direction', 'alignPicker', 'onDaysRender', 'showInput', 'onDaysRender', 'onType', 'onShow', 'onHide', 'onSubmit', 'onCancel', 'onReset'];
 function pickDatePickerProps(props) {
   const datePickerProps = Object.keys(props).reduce((datePickerProps, key) => {
     if (datePickerPropKeys.includes(key)) {