@dnb/eufemia 10.55.0 → 10.56.0

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import { ReturnAdditional } from '../../hooks/useFieldProps';
-import { DefaultErrorMessages, FieldHelpProps, FieldProps, Path } from '../../types';
+import { DefaultErrorMessages, FieldProps, Path } from '../../types';
 import { Data } from '../Selection';
 type OptionValue = string | number;
-export type Props = FieldHelpProps & FieldProps<Array<OptionValue> | undefined> & {
+export type Props = FieldProps<Array<OptionValue> | undefined> & {
     children?: React.ReactNode;
     variant?: 'checkbox' | 'button' | 'checkbox-button';
     optionsLayout?: 'horizontal' | 'vertical';

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

@@ -1,19 +1,21 @@
 "use client";
 
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 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 = ["value", "error", "title", "help", "className", "children"];
 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';
-import { Checkbox, HelpButton, ToggleButton } from '../../../../components';
 import classnames from 'classnames';
+import { convertJsxToString } from '../../../../shared/component-helper';
+import { Checkbox, HelpButton, ToggleButton } from '../../../../components';
 import FieldBlock from '../../FieldBlock';
 import { useFieldProps } from '../../hooks';
+import { checkForError } from '../../hooks/useFieldProps';
 import { pickSpacingProps } from '../../../../components/flex/utils';
-import { getStatus, mapOptions } from '../Selection';
 import ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext';
+import { mapOptions } from '../Selection';
 import DataContext from '../../DataContext/Context';
 import useDataValue from '../../hooks/useDataValue';
 function ArraySelection(props) {
@@ -26,10 +28,8 @@ function ArraySelection(props) {
     variant = 'checkbox',
     layout = 'vertical',
     optionsLayout = 'vertical',
-    labelDescription,
     value,
     hasError,
-    help,
     info,
     warning,
     disabled,
@@ -45,13 +45,9 @@ function ArraySelection(props) {
   const dataList = dataPath ? getValueByPath(dataPath) : data;
   const fieldBlockProps = _objectSpread({
     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),
+    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',
-    labelDescription: React.createElement(React.Fragment, null, labelDescription, help ? React.createElement(HelpButton, {
-      size: "small",
-      left: labelDescription ? 'x-small' : false,
-      title: help.title
-    }, help.content) : undefined),
+    labelHeight: 'small',
     disableStatusSummary: true
   }, pickSpacingProps(props));
   const options = useCheckboxOrToggleOptions({
@@ -77,13 +73,9 @@ function ArraySelection(props) {
   });
   switch (variant) {
     case 'checkbox':
-      return React.createElement(FieldBlock, _extends({}, fieldBlockProps, {
-        labelHeight: "small"
-      }), options);
+      return React.createElement(FieldBlock, fieldBlockProps, options);
     default:
-      return React.createElement(FieldBlock, _extends({}, fieldBlockProps, {
-        labelHeight: "small"
-      }), React.createElement(ToggleButtonGroupContext.Provider, {
+      return React.createElement(FieldBlock, fieldBlockProps, React.createElement(ToggleButtonGroupContext.Provider, {
         value: {
           status: hasError ? 'error' : undefined,
           disabled
@@ -127,10 +119,9 @@ export function useCheckboxOrToggleOptions(_ref2) {
       activeData.push(props);
     }
     const label = title !== null && title !== void 0 ? title : children;
-    const status = getStatus(error, info, warning);
     const suffix = help ? React.createElement(HelpButton, {
       size: "small",
-      title: help.title
+      title: convertJsxToString(help.title)
     }, help.content) : undefined;
     const handleSelect = () => {
       const newValue = value !== null && value !== void 0 && value.includes(active) ? value.filter(value => value !== active) : [...(value !== null && value !== void 0 ? value : []), active];
@@ -147,7 +138,7 @@ export function useCheckboxOrToggleOptions(_ref2) {
       value: value,
       disabled: disabled,
       checked: value === null || value === void 0 ? void 0 : value.includes(active),
-      status: (hasError || status) && 'error',
+      status: (hasError || checkForError([error, info, warning])) && 'error',
       suffix: suffix,
       on_change: handleSelect
     }, htmlAttributes, rest));

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

@@ -1 +1 @@
-{"version":3,"file":"ArraySelection.js","names":["React","useCallback","useContext","useMemo","Checkbox","HelpButton","ToggleButton","classnames","FieldBlock","useFieldProps","pickSpacingProps","getStatus","mapOptions","ToggleButtonGroupContext","DataContext","useDataValue","ArraySelection","props","id","path","dataPath","data","className","variant","layout","optionsLayout","labelDescription","value","hasError","help","info","warning","disabled","emptyValue","htmlAttributes","handleChange","setDisplayValue","children","getValueByPath","dataList","fieldBlockProps","_objectSpread","forId","contentClassName","createElement","Fragment","size","left","title","content","undefined","disableStatusSummary","options","useCheckboxOrToggleOptions","handleActiveData","_ref","labels","_extends","labelHeight","Provider","status","_ref2","setFieldProps","optionsCount","Children","count","length","activeData","createOption","i","active","error","rest","_objectWithoutProperties","_excluded","includes","push","label","suffix","handleSelect","newValue","filter","Component","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 { Checkbox, HelpButton, ToggleButton } from '../../../../components'\nimport classnames from 'classnames'\nimport FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { ReturnAdditional } from '../../hooks/useFieldProps'\nimport {\n  DefaultErrorMessages,\n  FieldHelpProps,\n  FieldProps,\n  Path,\n} from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { getStatus, mapOptions, Data } from '../Selection'\nimport { HelpButtonProps } from '../../../../components/HelpButton'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\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: HelpButtonProps\n    className: string\n    children: React.ReactNode\n    handleSelect: () => void\n  }>\n>\n\ntype OptionValue = string | number\n\nexport type Props = FieldHelpProps &\n  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    labelDescription,\n    value,\n    hasError,\n    help,\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    labelDescription: (\n      <>\n        {labelDescription}\n        {help ? (\n          <HelpButton\n            size=\"small\"\n            left={labelDescription ? 'x-small' : false}\n            title={help.title}\n          >\n            {help.content}\n          </HelpButton>\n        ) : undefined}\n      </>\n    ),\n    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(path, labels)\n    },\n  })\n\n  switch (variant) {\n    case 'checkbox':\n      return (\n        <FieldBlock {...fieldBlockProps} labelHeight=\"small\">\n          {options}\n        </FieldBlock>\n      )\n    default:\n      return (\n        <FieldBlock {...fieldBlockProps} labelHeight=\"small\">\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 { setFieldProps } = 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 status = getStatus(error, info, warning)\n      const suffix = help ? (\n        <HelpButton size=\"small\" title={help.title}>\n          {help.content}\n        </HelpButton>\n      ) : undefined\n\n      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={(hasError || status) && 'error'}\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    setFieldProps?.(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","emptyValue","htmlAttributes","handleChange","setDisplayValue","children","getValueByPath","dataList","fieldBlockProps","_objectSpread","forId","contentClassName","labelHeight","disableStatusSummary","options","useCheckboxOrToggleOptions","handleActiveData","_ref","labels","createElement","Provider","status","undefined","_ref2","setFieldProps","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(path, 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 { setFieldProps } = 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    setFieldProps?.(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/style/dnb-array-selection.css

@@ -7,18 +7,18 @@
 .dnb-forms-field-array-selection--variant-button {
   --row-gap: var(--spacing-small);
 }
-.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options {
+.dnb-forms-field-array-selection--options-layout--vertical .dnb-forms-field-array-selection__options {
   display: flex;
   flex-flow: column;
   row-gap: var(--row-gap);
 }
-.dnb-forms-field-array-selection--options-layout-vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label {
+.dnb-forms-field-array-selection--options-layout--vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label {
   align-items: flex-start;
 }
-.dnb-forms-field-array-selection--variant-button.dnb-forms-field-array-selection--options-layout-vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label {
+.dnb-forms-field-array-selection--variant-button.dnb-forms-field-array-selection--options-layout--vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label {
   line-height: 2.5rem;
 }
-.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options {
+.dnb-forms-field-array-selection--options-layout--horizontal .dnb-forms-field-array-selection__options {
   display: flex;
   flex-flow: row wrap;
   -moz-column-gap: var(--spacing-small);

package/extensions/forms/Field/ArraySelection/style/dnb-array-selection.min.css

@@ -1 +1 @@
-.dnb-forms-field-array-selection{--row-gap:var(--spacing-x-small)}.dnb-forms-field-array-selection--variant-button{--row-gap:var(--spacing-small)}.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options{display:flex;flex-flow:column;row-gap:var(--row-gap)}.dnb-forms-field-array-selection--options-layout-vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label{align-items:flex-start}.dnb-forms-field-array-selection--variant-button.dnb-forms-field-array-selection--options-layout-vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label{line-height:2.5rem}.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row wrap;row-gap:var(--row-gap)}@media screen and (min-width:40.00625em){.dnb-forms-field-array-selection .dnb-forms-field-block--layout-horizontal .dnb-form-label{margin-bottom:0}}
+.dnb-forms-field-array-selection{--row-gap:var(--spacing-x-small)}.dnb-forms-field-array-selection--variant-button{--row-gap:var(--spacing-small)}.dnb-forms-field-array-selection--options-layout--vertical .dnb-forms-field-array-selection__options{display:flex;flex-flow:column;row-gap:var(--row-gap)}.dnb-forms-field-array-selection--options-layout--vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label{align-items:flex-start}.dnb-forms-field-array-selection--variant-button.dnb-forms-field-array-selection--options-layout--vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-block__label{line-height:2.5rem}.dnb-forms-field-array-selection--options-layout--horizontal .dnb-forms-field-array-selection__options{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row wrap;row-gap:var(--row-gap)}@media screen and (min-width:40.00625em){.dnb-forms-field-array-selection .dnb-forms-field-block--layout-horizontal .dnb-form-label{margin-bottom:0}}

package/extensions/forms/Field/ArraySelection/style/dnb-array-selection.scss

@@ -6,23 +6,23 @@
     --row-gap: var(--spacing-small);
   }
 
-  &--options-layout-vertical &__options {
+  &--options-layout--vertical &__options {
     display: flex;
     flex-flow: column;
     row-gap: var(--row-gap);
   }
-  &--options-layout-vertical#{&}--layout-horizontal {
+  &--options-layout--vertical#{&}--layout-horizontal {
     .dnb-forms-field-block__label {
       align-items: flex-start;
     }
   }
-  &--variant-button#{&}--options-layout-vertical#{&}--layout-horizontal {
+  &--variant-button#{&}--options-layout--vertical#{&}--layout-horizontal {
     .dnb-forms-field-block__label {
       line-height: 2.5rem;
     }
   }
 
-  &--options-layout-horizontal &__options {
+  &--options-layout--horizontal &__options {
     display: flex;
     flex-flow: row wrap;
     column-gap: var(--spacing-small);

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

@@ -4,11 +4,6 @@ export const BankAccountNumberProperties = {
     type: 'boolean',
     status: 'optional'
   },
-  help: {
-    doc: 'Provide a help button. Object consisting of `title` and `content`.',
-    type: 'object',
-    status: 'optional'
-  },
   onBlurValidator: {
     doc: 'Custom validator function that is triggered when the user leaves a field (e.g., blurring a text input or closing a dropdown). The function can be either asynchronous or synchronous. The first parameter is the value, and the second parameter returns an object containing { errorMessages, connectWithPath, validators }. Defaults to bank account number validation, using `bankAccountNumberValidator`. Can be disabled using `false`.',
     type: 'function',

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

@@ -1 +1 @@
-{"version":3,"file":"BankAccountNumberDocs.js","names":["BankAccountNumberProperties","validate","doc","type","status","help","onBlurValidator"],"sources":["../../../../../../src/extensions/forms/Field/BankAccountNumber/BankAccountNumberDocs.tsx"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const BankAccountNumberProperties: PropertiesTableProps = {\n  validate: {\n    doc: 'Using this prop you can disable the default validation.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  help: {\n    doc: 'Provide a help button. Object consisting of `title` and `content`.',\n    type: 'object',\n    status: 'optional',\n  },\n  onBlurValidator: {\n    doc: 'Custom validator function that is triggered when the user leaves a field (e.g., blurring a text input or closing a dropdown). The function can be either asynchronous or synchronous. The first parameter is the value, and the second parameter returns an object containing { errorMessages, connectWithPath, validators }. Defaults to bank account number validation, using `bankAccountNumberValidator`. Can be disabled using `false`.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,2BAAiD,GAAG;EAC/DC,QAAQ,EAAE;IACRC,GAAG,EAAE,yDAAyD;IAC9DC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDC,IAAI,EAAE;IACJH,GAAG,EAAE,oEAAoE;IACzEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,eAAe,EAAE;IACfJ,GAAG,EAAE,8aAA8a;IACnbC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV;AACF,CAAC"}
+{"version":3,"file":"BankAccountNumberDocs.js","names":["BankAccountNumberProperties","validate","doc","type","status","onBlurValidator"],"sources":["../../../../../../src/extensions/forms/Field/BankAccountNumber/BankAccountNumberDocs.tsx"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const BankAccountNumberProperties: PropertiesTableProps = {\n  validate: {\n    doc: 'Using this prop you can disable the default validation.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  onBlurValidator: {\n    doc: 'Custom validator function that is triggered when the user leaves a field (e.g., blurring a text input or closing a dropdown). The function can be either asynchronous or synchronous. The first parameter is the value, and the second parameter returns an object containing { errorMessages, connectWithPath, validators }. Defaults to bank account number validation, using `bankAccountNumberValidator`. Can be disabled using `false`.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,2BAAiD,GAAG;EAC/DC,QAAQ,EAAE;IACRC,GAAG,EAAE,yDAAyD;IAC9DC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDC,eAAe,EAAE;IACfH,GAAG,EAAE,8aAA8a;IACnbC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV;AACF,CAAC"}

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

@@ -1,5 +1,5 @@
 import { Props as ToggleFieldProps } from '../Toggle';
-import { FieldHelpProps, FieldProps, Path } from '../../types';
+import { FieldProps, Path } from '../../types';
 type BooleanProps = {
     trueText?: string;
     falseText?: string;
@@ -13,7 +13,7 @@ type SharedFieldProps = Omit<FieldProps<unknown>, 'layout' | 'layoutOptions'>;
 export type IndeterminateProps = SharedFieldProps & {
     dependencePaths: Array<Path>;
 } & NeverBooleanProps;
-export type Props = FieldHelpProps & SharedFieldProps & BooleanProps;
+export type Props = SharedFieldProps & BooleanProps;
 declare function BooleanComponent(props: Props | IndeterminateProps): import("react/jsx-runtime").JSX.Element;
 declare namespace BooleanComponent {
     var _supportsSpacingProps: boolean;

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 { FieldHelpProps, 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 = FieldHelpProps & 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  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"}

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

@@ -1,5 +1,5 @@
 import { Props as FieldBlockProps } from '../../FieldBlock';
-declare function CompositionField(props: FieldBlockProps): import("react/jsx-runtime").JSX.Element;
+declare function CompositionField(props: Pick<FieldBlockProps, 'label' | 'labelDescription' | 'labelSrOnly' | 'width' | 'align' | 'contentWidth' | 'disabled' | 'error' | 'warning' | 'info' | 'children'>): import("react/jsx-runtime").JSX.Element;
 declare namespace CompositionField {
     var _supportsSpacingProps: boolean;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Composition.js","names":["React","FieldBlock","CompositionField","props","createElement","_extends","composition","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Composition/Composition.tsx"],"sourcesContent":["import React from 'react'\nimport FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'\n\nfunction CompositionField(props: FieldBlockProps) {\n  return <FieldBlock {...props} composition />\n}\n\nCompositionField._supportsSpacingProps = true\nexport default CompositionField\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAoC,kBAAkB;AAEvE,SAASC,gBAAgBA,CAACC,KAAsB,EAAE;EAChD,OAAOH,KAAA,CAAAI,aAAA,CAACH,UAAU,EAAAI,QAAA,KAAKF,KAAK;IAAEG,WAAW;EAAA,EAAE,CAAC;AAC9C;AAEAJ,gBAAgB,CAACK,qBAAqB,GAAG,IAAI;AAC7C,eAAeL,gBAAgB"}
+{"version":3,"file":"Composition.js","names":["React","FieldBlock","CompositionField","props","createElement","_extends","composition","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Composition/Composition.tsx"],"sourcesContent":["import React from 'react'\nimport FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'\n\nfunction CompositionField(\n  props: Pick<\n    FieldBlockProps,\n    | 'label'\n    | 'labelDescription'\n    | 'labelSrOnly'\n    | 'width'\n    | 'align'\n    | 'contentWidth'\n    | 'disabled'\n    | 'error'\n    | 'warning'\n    | 'info'\n    | 'children'\n  >\n) {\n  return <FieldBlock {...props} composition />\n}\n\nCompositionField._supportsSpacingProps = true\nexport default CompositionField\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAoC,kBAAkB;AAEvE,SAASC,gBAAgBA,CACvBC,KAaC,EACD;EACA,OAAOH,KAAA,CAAAI,aAAA,CAACH,UAAU,EAAAI,QAAA,KAAKF,KAAK;IAAEG,WAAW;EAAA,EAAE,CAAC;AAC9C;AAEAJ,gBAAgB,CAACK,qBAAqB,GAAG,IAAI;AAC7C,eAAeL,gBAAgB"}

package/extensions/forms/Field/Composition/CompositionDocs.js

@@ -1,14 +1,23 @@
-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 { FieldBlockProperties } from '../../FieldBlock/FieldBlockDocs';
-export const CompositionProperties = _objectSpread(_objectSpread({}, FieldBlockProperties), {}, {
+export const CompositionProperties = {
+  label: FieldBlockProperties.label,
+  labelDescription: FieldBlockProperties.labelDescription,
+  labelSrOnly: FieldBlockProperties.labelSrOnly,
+  width: FieldBlockProperties.width,
+  contentWidth: FieldBlockProperties.contentWidth,
+  disabled: FieldBlockProperties.disabled,
+  error: FieldBlockProperties.error,
+  warning: FieldBlockProperties.warning,
+  info: FieldBlockProperties.info,
   align: {
     doc: '`center` or `bottom` for aligning the contents vertically. Defaults to `bottom`.',
     type: ['string', 'false'],
     status: 'optional'
   },
-  asFieldset: undefined,
-  composition: undefined
-});
+  '[Space](/uilib/layout/space/properties)': {
+    doc: 'Spacing properties like `top` or `bottom` are supported.',
+    type: ['string', 'object'],
+    status: 'optional'
+  }
+};
 //# sourceMappingURL=CompositionDocs.js.map

package/extensions/forms/Field/Composition/CompositionDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"CompositionDocs.js","names":["FieldBlockProperties","CompositionProperties","_objectSpread","align","doc","type","status","asFieldset","undefined","composition"],"sources":["../../../../../../src/extensions/forms/Field/Composition/CompositionDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\nimport { FieldBlockProperties } from '../../FieldBlock/FieldBlockDocs'\n\nexport const CompositionProperties: PropertiesTableProps = {\n  ...FieldBlockProperties,\n  align: {\n    doc: '`center` or `bottom` for aligning the contents vertically. Defaults to `bottom`.',\n    type: ['string', 'false'],\n    status: 'optional',\n  },\n  asFieldset: undefined,\n  composition: undefined,\n}\n"],"mappings":";;;AACA,SAASA,oBAAoB,QAAQ,iCAAiC;AAEtE,OAAO,MAAMC,qBAA2C,GAAAC,aAAA,CAAAA,aAAA,KACnDF,oBAAoB;EACvBG,KAAK,EAAE;IACLC,GAAG,EAAE,kFAAkF;IACvFC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,MAAM,EAAE;EACV,CAAC;EACDC,UAAU,EAAEC,SAAS;EACrBC,WAAW,EAAED;AAAS,EACvB"}
+{"version":3,"file":"CompositionDocs.js","names":["FieldBlockProperties","CompositionProperties","label","labelDescription","labelSrOnly","width","contentWidth","disabled","error","warning","info","align","doc","type","status"],"sources":["../../../../../../src/extensions/forms/Field/Composition/CompositionDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\nimport { FieldBlockProperties } from '../../FieldBlock/FieldBlockDocs'\n\nexport const CompositionProperties: PropertiesTableProps = {\n  label: FieldBlockProperties.label,\n  labelDescription: FieldBlockProperties.labelDescription,\n  labelSrOnly: FieldBlockProperties.labelSrOnly,\n  width: FieldBlockProperties.width,\n  contentWidth: FieldBlockProperties.contentWidth,\n  disabled: FieldBlockProperties.disabled,\n  error: FieldBlockProperties.error,\n  warning: FieldBlockProperties.warning,\n  info: FieldBlockProperties.info,\n  align: {\n    doc: '`center` or `bottom` for aligning the contents vertically. Defaults to `bottom`.',\n    type: ['string', 'false'],\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n"],"mappings":"AACA,SAASA,oBAAoB,QAAQ,iCAAiC;AAEtE,OAAO,MAAMC,qBAA2C,GAAG;EACzDC,KAAK,EAAEF,oBAAoB,CAACE,KAAK;EACjCC,gBAAgB,EAAEH,oBAAoB,CAACG,gBAAgB;EACvDC,WAAW,EAAEJ,oBAAoB,CAACI,WAAW;EAC7CC,KAAK,EAAEL,oBAAoB,CAACK,KAAK;EACjCC,YAAY,EAAEN,oBAAoB,CAACM,YAAY;EAC/CC,QAAQ,EAAEP,oBAAoB,CAACO,QAAQ;EACvCC,KAAK,EAAER,oBAAoB,CAACQ,KAAK;EACjCC,OAAO,EAAET,oBAAoB,CAACS,OAAO;EACrCC,IAAI,EAAEV,oBAAoB,CAACU,IAAI;EAC/BC,KAAK,EAAE;IACLC,GAAG,EAAE,kFAAkF;IACvFC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC"}

package/extensions/forms/Field/Currency/CurrencyDocs.js

@@ -12,11 +12,6 @@ export const currencyProperties = _objectSpread({
     doc: 'Defined the currency display style. Defaults to `code`.',
     type: ['code', 'symbol', 'narrowSymbol', 'name'],
     status: 'optional'
-  },
-  help: {
-    doc: 'Provide a help button. Object consisting of `title` and `content`.',
-    type: 'object',
-    status: 'optional'
   }
 }, numberProperties);
 //# sourceMappingURL=CurrencyDocs.js.map

package/extensions/forms/Field/Currency/CurrencyDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"CurrencyDocs.js","names":["numberProperties","currencyProperties","_objectSpread","currency","doc","type","status","currencyDisplay","help"],"sources":["../../../../../../src/extensions/forms/Field/Currency/CurrencyDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\nimport { numberProperties } from '../Number/NumberDocs'\n\nexport const currencyProperties: PropertiesTableProps = {\n  currency: {\n    doc: 'Defines what format to show the currency value in I.e `NOK` or `USD`.',\n    type: 'string',\n    status: 'optional',\n  },\n  currencyDisplay: {\n    doc: 'Defined the currency display style. Defaults to `code`.',\n    type: ['code', 'symbol', 'narrowSymbol', 'name'],\n    status: 'optional',\n  },\n  help: {\n    doc: 'Provide a help button. Object consisting of `title` and `content`.',\n    type: 'object',\n    status: 'optional',\n  },\n  ...numberProperties,\n}\n"],"mappings":";;;AACA,SAASA,gBAAgB,QAAQ,sBAAsB;AAEvD,OAAO,MAAMC,kBAAwC,GAAAC,aAAA;EACnDC,QAAQ,EAAE;IACRC,GAAG,EAAE,uEAAuE;IAC5EC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,eAAe,EAAE;IACfH,GAAG,EAAE,yDAAyD;IAC9DC,IAAI,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,CAAC;IAChDC,MAAM,EAAE;EACV,CAAC;EACDE,IAAI,EAAE;IACJJ,GAAG,EAAE,oEAAoE;IACzEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV;AAAC,GACEN,gBAAgB,CACpB"}
+{"version":3,"file":"CurrencyDocs.js","names":["numberProperties","currencyProperties","_objectSpread","currency","doc","type","status","currencyDisplay"],"sources":["../../../../../../src/extensions/forms/Field/Currency/CurrencyDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\nimport { numberProperties } from '../Number/NumberDocs'\n\nexport const currencyProperties: PropertiesTableProps = {\n  currency: {\n    doc: 'Defines what format to show the currency value in I.e `NOK` or `USD`.',\n    type: 'string',\n    status: 'optional',\n  },\n  currencyDisplay: {\n    doc: 'Defined the currency display style. Defaults to `code`.',\n    type: ['code', 'symbol', 'narrowSymbol', 'name'],\n    status: 'optional',\n  },\n  ...numberProperties,\n}\n"],"mappings":";;;AACA,SAASA,gBAAgB,QAAQ,sBAAsB;AAEvD,OAAO,MAAMC,kBAAwC,GAAAC,aAAA;EACnDC,QAAQ,EAAE;IACRC,GAAG,EAAE,uEAAuE;IAC5EC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,eAAe,EAAE;IACfH,GAAG,EAAE,yDAAyD;IAC9DC,IAAI,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,CAAC;IAChDC,MAAM,EAAE;EACV;AAAC,GACEN,gBAAgB,CACpB"}

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

@@ -1,13 +1,26 @@
-import { FieldProps, FieldHelpProps } from '../../types';
-export type Props = FieldHelpProps & FieldProps<string, undefined | string> & {
+import { FieldProps } from '../../types';
+import { DatePickerProps } from '../../../../components/DatePicker';
+export type Props = FieldProps<string, undefined | string> & {
     pattern?: string;
     /**
      * Defines if the Date field should support a value of two dates (starting and ending date).
      * The value needs to be a string containing two dates, separated by a pipe character (`|`) i.e. (`01-09-2024|30-09-2024`) when this is set to `true`.
      * Defaults to `false`.
      */
-    range?: boolean;
-};
+    range?: DatePickerProps['range'];
+    /**
+     * If the input fields with the mask should be visible. Defaults to `true`.
+     */
+    showInput?: DatePickerProps['showInput'];
+    /**
+     * If set to `true`, a cancel button will be shown. You can change the default text by using `cancel_button_text="Avbryt"` Defaults to `true`. If the `range` prop is `true`, then the cancel button is shown.
+     */
+    showCancelButton?: DatePickerProps['showCancelButton'];
+    /**
+     * 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;
 declare namespace DateComponent {
     var _supportsSpacingProps: boolean;

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

@@ -1,11 +1,13 @@
 "use client";
 
 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", "className", "label", "value", "hasError", "disabled", "htmlAttributes", "handleFocus", "handleBlur", "handleChange", "setDisplayValue", "range", "showCancelButton", "showResetButton", "showInput", "onReset"];
 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';
-import { DatePicker, HelpButton } from '../../../../components';
+import { DatePicker } from '../../../../components';
 import { useFieldProps } from '../../hooks';
 import { pickSpacingProps } from '../../../../components/flex/utils';
 import classnames from 'classnames';
@@ -55,39 +57,54 @@ function DateComponent(props) {
     },
     validateRequired
   });
+  const _useFieldProps = useFieldProps(preparedProps),
+    {
+      id,
+      path,
+      className,
+      label,
+      value: valueProp,
+      hasError,
+      disabled,
+      htmlAttributes,
+      handleFocus,
+      handleBlur,
+      handleChange,
+      setDisplayValue,
+      range,
+      showCancelButton = true,
+      showResetButton = true,
+      showInput = true,
+      onReset
+    } = _useFieldProps,
+    rest = _objectWithoutProperties(_useFieldProps, _excluded);
+  const datePickerProps = pickDatePickerProps(rest);
   const {
-    id,
-    path,
-    className,
-    label,
     value,
-    help,
-    hasError,
-    disabled,
-    htmlAttributes,
-    handleFocus,
-    handleBlur,
-    handleChange,
-    setDisplayValue,
-    range
-  } = useFieldProps(preparedProps);
-  const rangeValue = useMemo(() => {
-    if (!range) {
-      return;
+    startDate,
+    endDate
+  } = useMemo(() => {
+    if (!range || !valueProp) {
+      return {
+        value: valueProp,
+        startDate: undefined,
+        endDate: undefined
+      };
     }
-    const [startDate, endDate] = value.split('|');
+    const [startDate, endDate] = valueProp.split('|').map(value => /(undefined|null)/.test(value) ? undefined : value);
     return {
+      value: undefined,
       startDate,
       endDate
     };
-  }, [range, value]);
+  }, [range, valueProp]);
   useMemo(() => {
-    if (path && value) {
-      setDisplayValue(path, formatDate(value, {
+    if (path && valueProp) {
+      setDisplayValue(path, formatDate(valueProp, {
         locale
       }));
     }
-  }, [locale, path, setDisplayValue, value]);
+  }, [locale, path, setDisplayValue, valueProp]);
   const fieldBlockProps = _objectSpread({
     forId: id,
     label: label !== null && label !== void 0 ? label : translations.Date.label,
@@ -95,23 +112,33 @@ function DateComponent(props) {
   }, pickSpacingProps(props));
   return React.createElement(FieldBlock, fieldBlockProps, React.createElement(DatePicker, _extends({
     id: id,
-    date: !range ? value : undefined,
+    date: value,
     disabled: disabled,
-    show_input: true,
-    show_cancel_button: true,
-    show_reset_button: true,
-    start_date: range ? rangeValue.startDate : undefined,
-    end_date: range ? rangeValue.endDate : undefined,
+    showInput: showInput,
+    showCancelButton: showCancelButton,
+    showResetButton: showResetButton,
+    startDate: startDate,
+    endDate: endDate,
     status: hasError ? 'error' : undefined,
-    suffix: help ? React.createElement(HelpButton, {
-      title: help.title
-    }, help.content) : undefined,
     range: range,
-    on_change: handleChange,
-    on_reset: handleChange,
+    onChange: handleChange,
+    onReset: event => {
+      handleChange(event);
+      onReset === null || onReset === void 0 ? void 0 : onReset(event);
+    },
     onFocus: handleFocus,
     onBlur: handleBlur
-  }, htmlAttributes)));
+  }, 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 pickDatePickerProps(props) {
+  const datePickerProps = Object.keys(props).reduce((datePickerProps, key) => {
+    if (datePickerPropKeys.includes(key)) {
+      datePickerProps[key] = props[key];
+    }
+    return datePickerProps;
+  }, {});
+  return datePickerProps;
 }
 DateComponent._supportsSpacingProps = true;
 export default DateComponent;

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

@@ -1 +1 @@
-{"version":3,"file":"Date.js","names":["React","useCallback","useContext","useMemo","DatePicker","HelpButton","useFieldProps","pickSpacingProps","classnames","FieldBlock","SharedContext","parseISO","isValid","useTranslation","formatDate","DateComponent","props","translations","locale","errorMessages","_objectSpread","Date","errorRequired","schema","_props$schema","type","pattern","validateRequired","value","_ref","required","error","undefined","preparedProps","fromInput","_ref2","date","start_date","end_date","range","id","path","className","label","help","hasError","disabled","htmlAttributes","handleFocus","handleBlur","handleChange","setDisplayValue","rangeValue","startDate","endDate","split","fieldBlockProps","forId","createElement","_extends","show_input","show_cancel_button","show_reset_button","status","suffix","title","content","on_change","on_reset","onFocus","onBlur","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Date/Date.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo } from 'react'\nimport { DatePicker, HelpButton } from '../../../../components'\nimport { useFieldProps } from '../../hooks'\nimport {\n  FieldProps,\n  FieldHelpProps,\n  AllJSONSchemaVersions,\n} from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport classnames from 'classnames'\nimport FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'\nimport SharedContext from '../../../../shared/Context'\nimport { parseISO, isValid } from 'date-fns'\nimport useTranslation from '../../hooks/useTranslation'\nimport { DatePickerEvent } from '../../../../components/DatePicker'\nimport { formatDate } from '../../Value/Date'\n\nexport type Props = FieldHelpProps &\n  FieldProps<string, undefined | string> & {\n    // Validation\n    pattern?: string\n    /**\n     * Defines if the Date field should support a value of two dates (starting and ending date).\n     * The value needs to be a string containing two dates, separated by a pipe character (`|`) i.e. (`01-09-2024|30-09-2024`) when this is set to `true`.\n     * Defaults to `false`.\n     */\n    range?: boolean\n  }\n\nfunction DateComponent(props: Props) {\n  const translations = useTranslation()\n  const { locale } = useContext(SharedContext)\n\n  const errorMessages = useMemo(() => {\n    return {\n      'Field.errorRequired': translations.Date.errorRequired,\n      'Field.errorPattern': translations.Date.errorRequired,\n      ...props.errorMessages,\n    }\n  }, [props.errorMessages, translations.Date.errorRequired])\n\n  const schema = useMemo<AllJSONSchemaVersions>(\n    () =>\n      props.schema ?? {\n        type: 'string',\n        pattern: props.pattern,\n      },\n    [props.schema, props.pattern]\n  )\n\n  const validateRequired = useCallback(\n    (value: string, { required, error }) => {\n      if (required && (!value || !isValid(parseISO(value)))) {\n        return error\n      }\n\n      return undefined\n    },\n    []\n  )\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages,\n    schema,\n    fromInput: ({\n      date,\n      start_date,\n      end_date,\n    }: DatePickerEvent<React.ChangeEvent<HTMLInputElement>>) => {\n      return range ? `${start_date}|${end_date}` : date\n    },\n    validateRequired,\n  }\n\n  const {\n    id,\n    path,\n    className,\n    label,\n    value,\n    help,\n    hasError,\n    disabled,\n    htmlAttributes,\n    handleFocus,\n    handleBlur,\n    handleChange,\n    setDisplayValue,\n    range,\n  } = useFieldProps(preparedProps)\n\n  const rangeValue = useMemo(() => {\n    if (!range) {\n      return\n    }\n\n    const [startDate, endDate] = value.split('|')\n\n    return { startDate, endDate }\n  }, [range, value])\n\n  useMemo(() => {\n    if (path && value) {\n      setDisplayValue(path, formatDate(value, { locale }))\n    }\n  }, [locale, path, setDisplayValue, value])\n\n  const fieldBlockProps: FieldBlockProps = {\n    forId: id,\n    label: label ?? translations.Date.label,\n    className: classnames('dnb-forms-field-string', className),\n    ...pickSpacingProps(props),\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps}>\n      <DatePicker\n        id={id}\n        date={!range ? value : undefined}\n        disabled={disabled}\n        show_input={true}\n        show_cancel_button={true}\n        show_reset_button={true}\n        start_date={range ? rangeValue.startDate : undefined}\n        end_date={range ? rangeValue.endDate : undefined}\n        status={hasError ? 'error' : undefined}\n        suffix={\n          help ? (\n            <HelpButton title={help.title}>{help.content}</HelpButton>\n          ) : undefined\n        }\n        range={range}\n        on_change={handleChange}\n        on_reset={handleChange}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        {...htmlAttributes}\n      />\n    </FieldBlock>\n  )\n}\n\nDateComponent._supportsSpacingProps = true\nexport default DateComponent\n"],"mappings":";;;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAC/D,SAASC,UAAU,EAAEC,UAAU,QAAQ,wBAAwB;AAC/D,SAASC,aAAa,QAAQ,aAAa;AAM3C,SAASC,gBAAgB,QAAQ,mCAAmC;AACpE,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,UAAU,MAAoC,kBAAkB;AACvE,OAAOC,aAAa,MAAM,4BAA4B;AACtD,SAASC,QAAQ,EAAEC,OAAO,QAAQ,UAAU;AAC5C,OAAOC,cAAc,MAAM,4BAA4B;AAEvD,SAASC,UAAU,QAAQ,kBAAkB;AAc7C,SAASC,aAAaA,CAACC,KAAY,EAAE;EACnC,MAAMC,YAAY,GAAGJ,cAAc,CAAC,CAAC;EACrC,MAAM;IAAEK;EAAO,CAAC,GAAGhB,UAAU,CAACQ,aAAa,CAAC;EAE5C,MAAMS,aAAa,GAAGhB,OAAO,CAAC,MAAM;IAClC,OAAAiB,aAAA;MACE,qBAAqB,EAAEH,YAAY,CAACI,IAAI,CAACC,aAAa;MACtD,oBAAoB,EAAEL,YAAY,CAACI,IAAI,CAACC;IAAa,GAClDN,KAAK,CAACG,aAAa;EAE1B,CAAC,EAAE,CAACH,KAAK,CAACG,aAAa,EAAEF,YAAY,CAACI,IAAI,CAACC,aAAa,CAAC,CAAC;EAE1D,MAAMC,MAAM,GAAGpB,OAAO,CACpB;IAAA,IAAAqB,aAAA;IAAA,QAAAA,aAAA,GACER,KAAK,CAACO,MAAM,cAAAC,aAAA,cAAAA,aAAA,GAAI;MACdC,IAAI,EAAE,QAAQ;MACdC,OAAO,EAAEV,KAAK,CAACU;IACjB,CAAC;EAAA,GACH,CAACV,KAAK,CAACO,MAAM,EAAEP,KAAK,CAACU,OAAO,CAC9B,CAAC;EAED,MAAMC,gBAAgB,GAAG1B,WAAW,CAClC,CAAC2B,KAAa,EAAAC,IAAA,KAA0B;IAAA,IAAxB;MAAEC,QAAQ;MAAEC;IAAM,CAAC,GAAAF,IAAA;IACjC,IAAIC,QAAQ,KAAK,CAACF,KAAK,IAAI,CAAChB,OAAO,CAACD,QAAQ,CAACiB,KAAK,CAAC,CAAC,CAAC,EAAE;MACrD,OAAOG,KAAK;IACd;IAEA,OAAOC,SAAS;EAClB,CAAC,EACD,EACF,CAAC;EAED,MAAMC,aAAoB,GAAAb,aAAA,CAAAA,aAAA,KACrBJ,KAAK;IACRG,aAAa;IACbI,MAAM;IACNW,SAAS,EAAEC,KAAA,IAIiD;MAAA,IAJhD;QACVC,IAAI;QACJC,UAAU;QACVC;MACoD,CAAC,GAAAH,KAAA;MACrD,OAAOI,KAAK,GAAI,GAAEF,UAAW,IAAGC,QAAS,EAAC,GAAGF,IAAI;IACnD,CAAC;IACDT;EAAgB,EACjB;EAED,MAAM;IACJa,EAAE;IACFC,IAAI;IACJC,SAAS;IACTC,KAAK;IACLf,KAAK;IACLgB,IAAI;IACJC,QAAQ;IACRC,QAAQ;IACRC,cAAc;IACdC,WAAW;IACXC,UAAU;IACVC,YAAY;IACZC,eAAe;IACfZ;EACF,CAAC,GAAGjC,aAAa,CAAC2B,aAAa,CAAC;EAEhC,MAAMmB,UAAU,GAAGjD,OAAO,CAAC,MAAM;IAC/B,IAAI,CAACoC,KAAK,EAAE;MACV;IACF;IAEA,MAAM,CAACc,SAAS,EAAEC,OAAO,CAAC,GAAG1B,KAAK,CAAC2B,KAAK,CAAC,GAAG,CAAC;IAE7C,OAAO;MAAEF,SAAS;MAAEC;IAAQ,CAAC;EAC/B,CAAC,EAAE,CAACf,KAAK,EAAEX,KAAK,CAAC,CAAC;EAElBzB,OAAO,CAAC,MAAM;IACZ,IAAIsC,IAAI,IAAIb,KAAK,EAAE;MACjBuB,eAAe,CAACV,IAAI,EAAE3B,UAAU,CAACc,KAAK,EAAE;QAAEV;MAAO,CAAC,CAAC,CAAC;IACtD;EACF,CAAC,EAAE,CAACA,MAAM,EAAEuB,IAAI,EAAEU,eAAe,EAAEvB,KAAK,CAAC,CAAC;EAE1C,MAAM4B,eAAgC,GAAApC,aAAA;IACpCqC,KAAK,EAAEjB,EAAE;IACTG,KAAK,EAAEA,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI1B,YAAY,CAACI,IAAI,CAACsB,KAAK;IACvCD,SAAS,EAAElC,UAAU,CAAC,wBAAwB,EAAEkC,SAAS;EAAC,GACvDnC,gBAAgB,CAACS,KAAK,CAAC,CAC3B;EAED,OACEhB,KAAA,CAAA0D,aAAA,CAACjD,UAAU,EAAK+C,eAAe,EAC7BxD,KAAA,CAAA0D,aAAA,CAACtD,UAAU,EAAAuD,QAAA;IACTnB,EAAE,EAAEA,EAAG;IACPJ,IAAI,EAAE,CAACG,KAAK,GAAGX,KAAK,GAAGI,SAAU;IACjCc,QAAQ,EAAEA,QAAS;IACnBc,UAAU,EAAE,IAAK;IACjBC,kBAAkB,EAAE,IAAK;IACzBC,iBAAiB,EAAE,IAAK;IACxBzB,UAAU,EAAEE,KAAK,GAAGa,UAAU,CAACC,SAAS,GAAGrB,SAAU;IACrDM,QAAQ,EAAEC,KAAK,GAAGa,UAAU,CAACE,OAAO,GAAGtB,SAAU;IACjD+B,MAAM,EAAElB,QAAQ,GAAG,OAAO,GAAGb,SAAU;IACvCgC,MAAM,EACJpB,IAAI,GACF5C,KAAA,CAAA0D,aAAA,CAACrD,UAAU;MAAC4D,KAAK,EAAErB,IAAI,CAACqB;IAAM,GAAErB,IAAI,CAACsB,OAAoB,CAAC,GACxDlC,SACL;IACDO,KAAK,EAAEA,KAAM;IACb4B,SAAS,EAAEjB,YAAa;IACxBkB,QAAQ,EAAElB,YAAa;IACvBmB,OAAO,EAAErB,WAAY;IACrBsB,MAAM,EAAErB;EAAW,GACfF,cAAc,CACnB,CACS,CAAC;AAEjB;AAEAhC,aAAa,CAACwD,qBAAqB,GAAG,IAAI;AAC1C,eAAexD,aAAa"}
+{"version":3,"file":"Date.js","names":["React","useCallback","useContext","useMemo","DatePicker","useFieldProps","pickSpacingProps","classnames","FieldBlock","SharedContext","parseISO","isValid","useTranslation","formatDate","DateComponent","props","translations","locale","errorMessages","_objectSpread","Date","errorRequired","schema","_props$schema","type","pattern","validateRequired","value","_ref","required","error","undefined","preparedProps","fromInput","_ref2","date","start_date","end_date","range","_useFieldProps","id","path","className","label","valueProp","hasError","disabled","htmlAttributes","handleFocus","handleBlur","handleChange","setDisplayValue","showCancelButton","showResetButton","showInput","onReset","rest","_objectWithoutProperties","_excluded","datePickerProps","pickDatePickerProps","startDate","endDate","split","map","test","fieldBlockProps","forId","createElement","_extends","status","onChange","event","onFocus","onBlur","datePickerPropKeys","Object","keys","reduce","key","includes","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Date/Date.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo } from 'react'\nimport { DatePicker } from '../../../../components'\nimport { useFieldProps } from '../../hooks'\nimport { FieldProps, AllJSONSchemaVersions } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport classnames from 'classnames'\nimport FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'\nimport SharedContext from '../../../../shared/Context'\nimport { parseISO, isValid } from 'date-fns'\nimport useTranslation from '../../hooks/useTranslation'\nimport { formatDate } from '../../Value/Date'\nimport {\n  DatePickerEvent,\n  DatePickerProps,\n} from '../../../../components/DatePicker'\n\n// `range`, `showInput`, `showCancelButton` and `showResetButton` are not picked from the `DatePickerProps`\n// Since they require `Field.Date` specific comments, due to them having different default values\nexport type Props = FieldProps<string, undefined | string> & {\n  // Validation\n  pattern?: string\n  /**\n   * Defines if the Date field should support a value of two dates (starting and ending date).\n   * The value needs to be a string containing two dates, separated by a pipe character (`|`) i.e. (`01-09-2024|30-09-2024`) when this is set to `true`.\n   * Defaults to `false`.\n   */\n  range?: DatePickerProps['range']\n  /**\n   * If the input fields with the mask should be visible. Defaults to `true`.\n   */\n  showInput?: DatePickerProps['showInput']\n\n  /**\n   * If set to `true`, a cancel button will be shown. You can change the default text by using `cancel_button_text=\"Avbryt\"` Defaults to `true`. If the `range` prop is `true`, then the cancel button is shown.\n   */\n  showCancelButton?: DatePickerProps['showCancelButton']\n  /**\n   * 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`.\n   */\n  showResetButton?: DatePickerProps['showResetButton']\n} & Pick<\n    DatePickerProps,\n    | 'month'\n    | 'startMonth'\n    | 'endMonth'\n    | 'minDate'\n    | 'maxDate'\n    | 'correctInvalidDate'\n    | 'maskOrder'\n    | 'maskPlaceholder'\n    | 'dateFormat'\n    | 'returnFormat'\n    | 'hideNavigation'\n    | 'hideDays'\n    | 'onlyMonth'\n    | 'hideLastWeek'\n    | 'disableAutofocus'\n    | 'showSubmitButton'\n    | 'submitButtonText'\n    | 'cancelButtonText'\n    | 'resetButtonText'\n    | 'firstDay'\n    | 'link'\n    | 'sync'\n    | 'addonElement'\n    | 'shortcuts'\n    | 'opened'\n    | 'direction'\n    | 'alignPicker'\n    | 'onDaysRender'\n    | 'onType'\n    | 'onShow'\n    | 'onHide'\n    | 'onSubmit'\n    | 'onCancel'\n    | 'onReset'\n  >\n\nfunction DateComponent(props: Props) {\n  const translations = useTranslation()\n  const { locale } = useContext(SharedContext)\n\n  const errorMessages = useMemo(() => {\n    return {\n      'Field.errorRequired': translations.Date.errorRequired,\n      'Field.errorPattern': translations.Date.errorRequired,\n      ...props.errorMessages,\n    }\n  }, [props.errorMessages, translations.Date.errorRequired])\n\n  const schema = useMemo<AllJSONSchemaVersions>(\n    () =>\n      props.schema ?? {\n        type: 'string',\n        pattern: props.pattern,\n      },\n    [props.schema, props.pattern]\n  )\n\n  const validateRequired = useCallback(\n    (value: string, { required, error }) => {\n      if (required && (!value || !isValid(parseISO(value)))) {\n        return error\n      }\n\n      return undefined\n    },\n    []\n  )\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages,\n    schema,\n    fromInput: ({\n      date,\n      start_date,\n      end_date,\n    }: DatePickerEvent<React.ChangeEvent<HTMLInputElement>>) => {\n      return range ? `${start_date}|${end_date}` : date\n    },\n    validateRequired,\n  }\n\n  const {\n    id,\n    path,\n    className,\n    label,\n    value: valueProp,\n    hasError,\n    disabled,\n    htmlAttributes,\n    handleFocus,\n    handleBlur,\n    handleChange,\n    setDisplayValue,\n    range,\n    showCancelButton = true,\n    showResetButton = true,\n    showInput = true,\n    onReset,\n    ...rest\n  } = useFieldProps(preparedProps)\n\n  const datePickerProps = pickDatePickerProps(rest)\n\n  const { value, startDate, endDate } = useMemo(() => {\n    if (!range || !valueProp) {\n      return { value: valueProp, startDate: undefined, endDate: undefined }\n    }\n\n    const [startDate, endDate] = valueProp\n      .split('|')\n      .map((value) => (/(undefined|null)/.test(value) ? undefined : value))\n\n    return {\n      value: undefined,\n      startDate,\n      endDate,\n    }\n  }, [range, valueProp])\n\n  useMemo(() => {\n    if (path && valueProp) {\n      setDisplayValue(path, formatDate(valueProp, { locale }))\n    }\n  }, [locale, path, setDisplayValue, valueProp])\n\n  const fieldBlockProps: FieldBlockProps = {\n    forId: id,\n    label: label ?? translations.Date.label,\n    className: classnames('dnb-forms-field-string', className),\n    ...pickSpacingProps(props),\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps}>\n      <DatePicker\n        id={id}\n        date={value}\n        disabled={disabled}\n        showInput={showInput}\n        showCancelButton={showCancelButton}\n        showResetButton={showResetButton}\n        startDate={startDate}\n        endDate={endDate}\n        status={hasError ? 'error' : undefined}\n        range={range}\n        onChange={handleChange}\n        onReset={(event) => {\n          handleChange(event)\n          onReset?.(event)\n        }}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        {...datePickerProps}\n        {...htmlAttributes}\n      />\n    </FieldBlock>\n  )\n}\n\n// Used to filter out DatePickerProps from the FieldProps.\n// Includes DatePickerProps that are not destructured in useFieldProps\nconst datePickerPropKeys = [\n  'month',\n  'startMonth',\n  'endMonth',\n  'minDate',\n  'maxDate',\n  'correctInvalidDate',\n  'maskOrder',\n  'maskPlaceholder',\n  'dateFormat',\n  'returnFormat',\n  'hideNavigation',\n  'hideDays',\n  'onlyMonth',\n  'hideLastWeek',\n  'disableAutofocus',\n  'showSubmitButton',\n  'submitButtonText',\n  'cancelButtonText',\n  'resetButtonText',\n  'firstDay',\n  'link',\n  'sync',\n  'addonElement',\n  'shortcuts',\n  'opened',\n  'direction',\n  'alignPicker',\n  'onDaysRender',\n  'showInput',\n  'onDaysRender',\n  'onType',\n  'onShow',\n  'onHide',\n  'onSubmit',\n  'onCancel',\n  'onReset',\n]\n\nfunction pickDatePickerProps(props: Props) {\n  const datePickerProps = Object.keys(props).reduce(\n    (datePickerProps, key) => {\n      if (datePickerPropKeys.includes(key)) {\n        datePickerProps[key] = props[key]\n      }\n\n      return datePickerProps\n    },\n    {}\n  )\n\n  return datePickerProps\n}\n\nDateComponent._supportsSpacingProps = true\nexport default DateComponent\n"],"mappings":"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"}