@dnb/eufemia 10.45.0 → 10.47.0

package/es/extensions/forms/DataContext/Provider/ProviderDocs.js

@@ -59,11 +59,6 @@ export const ProviderProperties = {
     type: 'function',
     status: 'optional'
   },
-  filterSubmitData: {
-    doc: 'Filter the `onSubmit` output data, based on your criteria: `({ path, value, data, props, internal }) => !props?.disabled`. It will iterate on each data entry (/path). Return false to exclude the entry.',
-    type: 'function',
-    status: 'optional'
-  },
   globalStatusId: {
     doc: 'If needed, you can define a custom [GlobalStatus](/uilib/components/global-status) id. Defaults to `main`.',
     type: 'string',
@@ -92,7 +87,7 @@ export const ProviderProperties = {
 };
 export const ProviderEvents = {
   onChange: {
-    doc: "Will be called when a value of a field was changed by the user, with the data set (including the changed value) as argument. When an async function is provided, it will show an indicator on the current label during a field change. Related props: `minimumAsyncBehaviorTime` and `asyncSubmitTimeout`. You can return an error or an object with these keys `{ info: 'Info message', warning: 'Warning message', error: Error('My error') } as const` in addition to { success: 'saved' } indicate the field was saved. Will emit unvalidated by default and validated when an async function is provided (like `onSubmit`).",
+    doc: "Will be called when a value of a field was changed by the user, with the data set (including the changed value) as argument. When an async function is provided, it will show an indicator on the current label during a field change. Related props: `minimumAsyncBehaviorTime` and `asyncSubmitTimeout`. You can return an error or an object with these keys `{ info: 'Info message', warning: 'Warning message', error: Error('My error') } as const` in addition to { success: 'saved' } indicate the field was saved. Will emit unvalidated by default and validated when an async function is provided (like `onSubmit`). The second parameter is an object containing the `filterData`, `resetForm` and `clearData` functions.",
     type: 'function',
     status: 'optional'
   },
@@ -102,7 +97,7 @@ export const ProviderEvents = {
     status: 'optional'
   },
   onSubmit: {
-    doc: "Will be called (on validation success) when the user submit the form (i.e by clicking a [SubmitButton](/uilib/extensions/forms/Form/SubmitButton) component inside), with the data set as argument. When an async function is provided, it will show an indicator on the submit button during the form submission. All form elements will be disabled during the submit. The indicator will be shown for minimum 1 second. Related props: `minimumAsyncBehaviorTime` and `asyncSubmitTimeout`. You can return an error or an object with these keys `{ status: 'pending', info: 'Info message', warning: 'Warning message', error: Error('My error') } as const` to be shown in a [FormStatus](/uilib/components/form-status). Will only emit when every validation has passed.",
+    doc: "Will be called (on validation success) when the user submit the form (i.e by clicking a [SubmitButton](/uilib/extensions/forms/Form/SubmitButton) component inside), with the data set as argument. When an async function is provided, it will show an indicator on the submit button during the form submission. All form elements will be disabled during the submit. The indicator will be shown for minimum 1 second. Related props: `minimumAsyncBehaviorTime` and `asyncSubmitTimeout`. You can return an error or an object with these keys `{ status: 'pending', info: 'Info message', warning: 'Warning message', error: Error('My error') } as const` to be shown in a [FormStatus](/uilib/components/form-status). Will only emit when every validation has passed. The second parameter is an object containing the `filterData` function.",
     type: 'function',
     status: 'optional'
   },

package/es/extensions/forms/DataContext/Provider/ProviderDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProviderDocs.js","names":["ProviderProperties","defaultData","doc","type","status","data","id","schema","errorMessages","minimumAsyncBehaviorTime","asyncSubmitTimeout","scrollTopOnSubmit","sessionStorageId","ajvInstance","transformIn","transformOut","filterSubmitData","globalStatusId","required","disabled","locale","children","ProviderEvents","onChange","onPathChange","onSubmit","onSubmitRequest","onSubmitComplete","onClear"],"sources":["../../../../../../src/extensions/forms/DataContext/Provider/ProviderDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const ProviderProperties: PropertiesTableProps = {\n  defaultData: {\n    doc: 'Default source data, only used if no other source is available, and not leading to updates if changed after mount.',\n    type: 'object',\n    status: 'optional',\n  },\n  data: {\n    doc: 'Dynamic source data used as both initial data, and updates internal data if changed after mount.',\n    type: 'object',\n    status: 'optional',\n  },\n  id: {\n    doc: 'Unique id for connecting Form.Handler and helper tools such as Form.useData.',\n    type: 'string',\n    status: 'optional',\n  },\n  schema: {\n    doc: 'JSON Schema for validation of the data set.',\n    type: 'object',\n    status: 'optional',\n  },\n  errorMessages: {\n    doc: 'Object containing error messages by either type of JSON Pointer path and type.',\n    type: 'object',\n    status: 'optional',\n  },\n  minimumAsyncBehaviorTime: {\n    doc: 'Minimum time to display the submit indicator. Default is 1s.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  asyncSubmitTimeout: {\n    doc: 'The maximum time to display the submit indicator before it changes back to normal. In case something went wrong during submission. Default is 30s.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  scrollTopOnSubmit: {\n    doc: 'True for the UI to scroll to the top of the page when data is submitted.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  sessionStorageId: {\n    doc: 'Key for saving active data to session storage and loading it on mount.',\n    type: 'string',\n    status: 'optional',\n  },\n  ajvInstance: {\n    doc: 'Provide your own custom Ajv instance. More info in the [Schema validation](/uilib/extensions/forms/Form/schema-validation/#custom-ajv-instance-and-keywords) section.',\n    type: 'ajv',\n    status: 'optional',\n  },\n  transformIn: {\n    doc: \"Mutate the data context (internally as well) based on your criteria: `({ path, value, data, props, internal }) => 'new value'`. It will iterate on each data entry (/path).\",\n    type: 'function',\n    status: 'optional',\n  },\n  transformOut: {\n    doc: \"Mutate the data before it enters onSubmit or onChange based on your criteria: `({ path, value, data, props, internal }) => 'new value'`. It will iterate on each data entry (/path).\",\n    type: 'function',\n    status: 'optional',\n  },\n  filterSubmitData: {\n    doc: 'Filter the `onSubmit` output data, based on your criteria: `({ path, value, data, props, internal }) => !props?.disabled`. It will iterate on each data entry (/path). Return false to exclude the entry.',\n    type: 'function',\n    status: 'optional',\n  },\n  globalStatusId: {\n    doc: 'If needed, you can define a custom [GlobalStatus](/uilib/components/global-status) id. Defaults to `main`.',\n    type: 'string',\n    status: 'optional',\n  },\n  required: {\n    doc: 'Make all fields required.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  disabled: {\n    doc: 'Disable all fields.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  locale: {\n    doc: 'Locale (language) to use for all nested Eufemia components.',\n    type: 'string',\n    status: 'optional',\n  },\n  children: {\n    doc: 'Contents.',\n    type: 'React.Node',\n    status: 'required',\n  },\n}\n\nexport const ProviderEvents: PropertiesTableProps = {\n  onChange: {\n    doc: \"Will be called when a value of a field was changed by the user, with the data set (including the changed value) as argument. When an async function is provided, it will show an indicator on the current label during a field change. Related props: `minimumAsyncBehaviorTime` and `asyncSubmitTimeout`. You can return an error or an object with these keys `{ info: 'Info message', warning: 'Warning message', error: Error('My error') } as const` in addition to { success: 'saved' } indicate the field was saved. Will emit unvalidated by default and validated when an async function is provided (like `onSubmit`).\",\n    type: 'function',\n    status: 'optional',\n  },\n  onPathChange: {\n    doc: 'Will be called when a value of a field was changed by the user, with the `path` (JSON Pointer) and new `value` as arguments. Can be an async function. Will emit unvalidated by default and validated when `onChange` is an async function.',\n    type: 'function',\n    status: 'optional',\n  },\n  onSubmit: {\n    doc: \"Will be called (on validation success) when the user submit the form (i.e by clicking a [SubmitButton](/uilib/extensions/forms/Form/SubmitButton) component inside), with the data set as argument. When an async function is provided, it will show an indicator on the submit button during the form submission. All form elements will be disabled during the submit. The indicator will be shown for minimum 1 second. Related props: `minimumAsyncBehaviorTime` and `asyncSubmitTimeout`. You can return an error or an object with these keys `{ status: 'pending', info: 'Info message', warning: 'Warning message', error: Error('My error') } as const` to be shown in a [FormStatus](/uilib/components/form-status). Will only emit when every validation has passed.\",\n    type: 'function',\n    status: 'optional',\n  },\n  onSubmitRequest: {\n    doc: 'Will be called when the user tries to submit, but errors stop the data from being submitted.',\n    type: 'function',\n    status: 'optional',\n  },\n  onSubmitComplete: {\n    doc: 'Will be called after onSubmit has finished and had not errors. It supports the same return values as `onSubmit` and will be merged together.',\n    type: 'function',\n    status: 'optional',\n  },\n  onClear: {\n    doc: 'Will be called when the form is cleared via `Form.clearData` or via the `onSubmit` event (or `onCommit`) argument `{ clearData }`.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"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"}
+{"version":3,"file":"ProviderDocs.js","names":["ProviderProperties","defaultData","doc","type","status","data","id","schema","errorMessages","minimumAsyncBehaviorTime","asyncSubmitTimeout","scrollTopOnSubmit","sessionStorageId","ajvInstance","transformIn","transformOut","globalStatusId","required","disabled","locale","children","ProviderEvents","onChange","onPathChange","onSubmit","onSubmitRequest","onSubmitComplete","onClear"],"sources":["../../../../../../src/extensions/forms/DataContext/Provider/ProviderDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const ProviderProperties: PropertiesTableProps = {\n  defaultData: {\n    doc: 'Default source data, only used if no other source is available, and not leading to updates if changed after mount.',\n    type: 'object',\n    status: 'optional',\n  },\n  data: {\n    doc: 'Dynamic source data used as both initial data, and updates internal data if changed after mount.',\n    type: 'object',\n    status: 'optional',\n  },\n  id: {\n    doc: 'Unique id for connecting Form.Handler and helper tools such as Form.useData.',\n    type: 'string',\n    status: 'optional',\n  },\n  schema: {\n    doc: 'JSON Schema for validation of the data set.',\n    type: 'object',\n    status: 'optional',\n  },\n  errorMessages: {\n    doc: 'Object containing error messages by either type of JSON Pointer path and type.',\n    type: 'object',\n    status: 'optional',\n  },\n  minimumAsyncBehaviorTime: {\n    doc: 'Minimum time to display the submit indicator. Default is 1s.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  asyncSubmitTimeout: {\n    doc: 'The maximum time to display the submit indicator before it changes back to normal. In case something went wrong during submission. Default is 30s.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  scrollTopOnSubmit: {\n    doc: 'True for the UI to scroll to the top of the page when data is submitted.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  sessionStorageId: {\n    doc: 'Key for saving active data to session storage and loading it on mount.',\n    type: 'string',\n    status: 'optional',\n  },\n  ajvInstance: {\n    doc: 'Provide your own custom Ajv instance. More info in the [Schema validation](/uilib/extensions/forms/Form/schema-validation/#custom-ajv-instance-and-keywords) section.',\n    type: 'ajv',\n    status: 'optional',\n  },\n  transformIn: {\n    doc: \"Mutate the data context (internally as well) based on your criteria: `({ path, value, data, props, internal }) => 'new value'`. It will iterate on each data entry (/path).\",\n    type: 'function',\n    status: 'optional',\n  },\n  transformOut: {\n    doc: \"Mutate the data before it enters onSubmit or onChange based on your criteria: `({ path, value, data, props, internal }) => 'new value'`. It will iterate on each data entry (/path).\",\n    type: 'function',\n    status: 'optional',\n  },\n  globalStatusId: {\n    doc: 'If needed, you can define a custom [GlobalStatus](/uilib/components/global-status) id. Defaults to `main`.',\n    type: 'string',\n    status: 'optional',\n  },\n  required: {\n    doc: 'Make all fields required.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  disabled: {\n    doc: 'Disable all fields.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  locale: {\n    doc: 'Locale (language) to use for all nested Eufemia components.',\n    type: 'string',\n    status: 'optional',\n  },\n  children: {\n    doc: 'Contents.',\n    type: 'React.Node',\n    status: 'required',\n  },\n}\n\nexport const ProviderEvents: PropertiesTableProps = {\n  onChange: {\n    doc: \"Will be called when a value of a field was changed by the user, with the data set (including the changed value) as argument. When an async function is provided, it will show an indicator on the current label during a field change. Related props: `minimumAsyncBehaviorTime` and `asyncSubmitTimeout`. You can return an error or an object with these keys `{ info: 'Info message', warning: 'Warning message', error: Error('My error') } as const` in addition to { success: 'saved' } indicate the field was saved. Will emit unvalidated by default and validated when an async function is provided (like `onSubmit`). The second parameter is an object containing the `filterData`, `resetForm` and `clearData` functions.\",\n    type: 'function',\n    status: 'optional',\n  },\n  onPathChange: {\n    doc: 'Will be called when a value of a field was changed by the user, with the `path` (JSON Pointer) and new `value` as arguments. Can be an async function. Will emit unvalidated by default and validated when `onChange` is an async function.',\n    type: 'function',\n    status: 'optional',\n  },\n  onSubmit: {\n    doc: \"Will be called (on validation success) when the user submit the form (i.e by clicking a [SubmitButton](/uilib/extensions/forms/Form/SubmitButton) component inside), with the data set as argument. When an async function is provided, it will show an indicator on the submit button during the form submission. All form elements will be disabled during the submit. The indicator will be shown for minimum 1 second. Related props: `minimumAsyncBehaviorTime` and `asyncSubmitTimeout`. You can return an error or an object with these keys `{ status: 'pending', info: 'Info message', warning: 'Warning message', error: Error('My error') } as const` to be shown in a [FormStatus](/uilib/components/form-status). Will only emit when every validation has passed. The second parameter is an object containing the `filterData` function.\",\n    type: 'function',\n    status: 'optional',\n  },\n  onSubmitRequest: {\n    doc: 'Will be called when the user tries to submit, but errors stop the data from being submitted.',\n    type: 'function',\n    status: 'optional',\n  },\n  onSubmitComplete: {\n    doc: 'Will be called after onSubmit has finished and had not errors. It supports the same return values as `onSubmit` and will be merged together.',\n    type: 'function',\n    status: 'optional',\n  },\n  onClear: {\n    doc: 'Will be called when the form is cleared via `Form.clearData` or via the `onSubmit` event (or `onCommit`) argument `{ clearData }`.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"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"}

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

@@ -1,16 +1,27 @@
 import React from 'react';
 import { ReturnAdditional } from '../../hooks/useFieldProps';
-import { FieldHelpProps, FieldProps } from '../../types';
+import { FieldHelpProps, FieldProps, Path } from '../../types';
+import { Data } from '../Selection';
 export type Props = FieldHelpProps & FieldProps<Array<string | number> | undefined> & {
     children?: React.ReactNode;
     variant?: 'checkbox' | 'button' | 'checkbox-button';
     optionsLayout?: 'horizontal' | 'vertical';
+    /**
+     * The path to the context data (Form.Handler).
+     * The context data object needs to have a `value` and a `title` property.
+     */
+    dataPath?: Path;
+    /**
+     * Data to be used for the component. The object needs to have a `value` and a `title` property.
+     * The generated options will be placed above given JSX based children.
+     */
+    data?: Data;
 };
 declare function ArraySelection(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace ArraySelection {
     var _supportsSpacingProps: boolean;
 }
-export declare function useCheckboxOrToggleOptions({ id, path, variant, info, warning, emptyValue, htmlAttributes, children, value, disabled, hasError, handleChange, }: {
+export declare function useCheckboxOrToggleOptions({ id, path, variant, info, warning, emptyValue, htmlAttributes, dataList, children, value, disabled, hasError, handleChange, }: {
     id: Props['id'];
     path?: Props['path'];
     variant?: Props['variant'];
@@ -18,10 +29,11 @@ export declare function useCheckboxOrToggleOptions({ id, path, variant, info, wa
     warning?: Props['warning'];
     emptyValue?: Props['emptyValue'];
     htmlAttributes?: Props['htmlAttributes'];
+    dataList?: Props['data'];
     children?: Props['children'];
     value?: Props['value'];
     disabled?: Props['disabled'];
     hasError?: ReturnAdditional<Props['value']>['hasError'];
     handleChange?: ReturnAdditional<Props['value']>['handleChange'];
-}): any;
+}): any[];
 export default ArraySelection;

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

@@ -15,10 +15,13 @@ import { pickSpacingProps } from '../../../../components/flex/utils';
 import { getStatus, mapOptions } from '../Selection';
 import ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext';
 import DataContext from '../../DataContext/Context';
+import useDataValue from '../../hooks/useDataValue';
 function ArraySelection(props) {
   const {
     id,
     path,
+    dataPath,
+    data,
     className,
     variant = 'checkbox',
     layout = 'vertical',
@@ -37,6 +40,10 @@ function ArraySelection(props) {
     handleChange,
     children
   } = useFieldProps(props);
+  const {
+    getValueByPath
+  } = useDataValue();
+  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),
@@ -61,6 +68,7 @@ function ArraySelection(props) {
     warning,
     emptyValue,
     htmlAttributes,
+    dataList,
     children,
     value,
     disabled,
@@ -88,6 +96,7 @@ export function useCheckboxOrToggleOptions({
   warning,
   emptyValue,
   htmlAttributes,
+  dataList,
   children,
   value,
   disabled,
@@ -97,7 +106,7 @@ export function useCheckboxOrToggleOptions({
   const {
     setFieldProps
   } = useContext(DataContext);
-  const optionsCount = useMemo(() => React.Children.count(children), [children]);
+  const optionsCount = useMemo(() => React.Children.count(children) + ((dataList === null || dataList === void 0 ? void 0 : dataList.length) || 0), [dataList, children]);
   const collectedData = [];
   const createOption = useCallback((props, i) => {
     const {
@@ -137,9 +146,9 @@ export function useCheckboxOrToggleOptions({
       on_change: handleSelect
     }, htmlAttributes, rest));
   }, [disabled, emptyValue, handleChange, hasError, htmlAttributes, id, info, optionsCount, value, variant, warning]);
-  const result = mapOptions(children, {
+  const result = [...(dataList || []).map((props, i) => createOption(props, i)), ...(mapOptions(children, {
     createOption
-  });
+  }) || []).filter(Boolean)];
   if (path) {
     setFieldProps === null || setFieldProps === void 0 ? void 0 : setFieldProps(path + '/arraySelectionData', collectedData);
   }

package/es/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","ArraySelection","props","id","path","className","variant","layout","optionsLayout","label","labelDescription","value","error","hasError","help","info","warning","disabled","emptyValue","htmlAttributes","handleChange","children","fieldBlockProps","_objectSpread","forId","contentClassName","createElement","Fragment","size","left","title","content","undefined","options","useCheckboxOrToggleOptions","Provider","status","setFieldProps","optionsCount","Children","count","collectedData","createOption","i","selected","rest","_objectWithoutProperties","_excluded","includes","push","suffix","handleSelect","newValue","filter","length","Component","_extends","key","text","checked","on_change","result","_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 from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { ReturnAdditional } from '../../hooks/useFieldProps'\nimport { FieldHelpProps, FieldProps, FormError } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { getStatus, mapOptions } from '../Selection'\nimport { HelpButtonProps } from '../../../../components/HelpButton'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\nimport DataContext from '../../DataContext/Context'\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\nexport type Props = FieldHelpProps &\n  FieldProps<Array<string | number> | undefined> & {\n    children?: React.ReactNode\n    variant?: 'checkbox' | 'button' | 'checkbox-button'\n    optionsLayout?: 'horizontal' | 'vertical'\n  }\n\nfunction ArraySelection(props: Props) {\n  const {\n    id,\n    path,\n    className,\n    variant = 'checkbox',\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    label,\n    labelDescription,\n    value,\n    error,\n    hasError,\n    help,\n    info,\n    warning,\n    disabled,\n    emptyValue,\n    htmlAttributes,\n    handleChange,\n    children,\n  } = useFieldProps(props)\n\n  const 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    help,\n    info,\n    warning,\n    error,\n    layout,\n    label,\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    ...pickSpacingProps(props),\n  }\n\n  const options = useCheckboxOrToggleOptions({\n    id,\n    path,\n    variant,\n    info,\n    warning,\n    emptyValue,\n    htmlAttributes,\n    children,\n    value,\n    disabled,\n    handleChange,\n    hasError,\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              variant:\n                variant === 'checkbox-button' ? 'checkbox' : 'default',\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  children,\n  value,\n  disabled,\n  hasError,\n  handleChange,\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  children?: Props['children']\n  value?: Props['value']\n  disabled?: Props['disabled']\n  hasError?: ReturnAdditional<Props['value']>['hasError']\n  handleChange?: ReturnAdditional<Props['value']>['handleChange']\n}) {\n  const { setFieldProps } = useContext(DataContext)\n  const optionsCount = useMemo(\n    () => React.Children.count(children),\n    [children]\n  )\n  const collectedData = []\n\n  const createOption = useCallback(\n    (props: OptionProps, i: number) => {\n      const {\n        value: selected,\n        error,\n        title,\n        help,\n        className,\n        children,\n        ...rest\n      } = props\n\n      if (value?.includes(selected)) {\n        collectedData.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      const handleSelect = () => {\n        const newValue = value?.includes(selected)\n          ? value.filter((value) => value !== selected)\n          : [...(value ?? []), selected]\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          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(selected)}\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 = mapOptions(children, { createOption })\n\n  if (path) {\n    setFieldProps?.(path + '/arraySelectionData', collectedData)\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","Checkbox","HelpButton","ToggleButton","classnames","FieldBlock","useFieldProps","pickSpacingProps","getStatus","mapOptions","ToggleButtonGroupContext","DataContext","useDataValue","ArraySelection","props","id","path","dataPath","data","className","variant","layout","optionsLayout","label","labelDescription","value","error","hasError","help","info","warning","disabled","emptyValue","htmlAttributes","handleChange","children","getValueByPath","dataList","fieldBlockProps","_objectSpread","forId","contentClassName","createElement","Fragment","size","left","title","content","undefined","options","useCheckboxOrToggleOptions","Provider","status","setFieldProps","optionsCount","Children","count","length","collectedData","createOption","i","selected","rest","_objectWithoutProperties","_excluded","includes","push","suffix","handleSelect","newValue","filter","Component","_extends","key","text","checked","on_change","result","map","Boolean","_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 from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { ReturnAdditional } from '../../hooks/useFieldProps'\nimport { FieldHelpProps, FieldProps, FormError, Path } 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'\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\nexport type Props = FieldHelpProps &\n  FieldProps<Array<string | number> | 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\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    label,\n    labelDescription,\n    value,\n    error,\n    hasError,\n    help,\n    info,\n    warning,\n    disabled,\n    emptyValue,\n    htmlAttributes,\n    handleChange,\n    children,\n  } = useFieldProps(props)\n\n  const { getValueByPath } = useDataValue()\n  const dataList = dataPath ? getValueByPath(dataPath) : data\n\n  const 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    help,\n    info,\n    warning,\n    error,\n    layout,\n    label,\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    ...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    handleChange,\n    hasError,\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              variant:\n                variant === 'checkbox-button' ? 'checkbox' : 'default',\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}: {\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}) {\n  const { setFieldProps } = useContext(DataContext)\n  const optionsCount = useMemo(\n    () => React.Children.count(children) + (dataList?.length || 0),\n    [dataList, children]\n  )\n  const collectedData = []\n\n  const createOption = useCallback(\n    (props: OptionProps, i: number) => {\n      const {\n        value: selected,\n        error,\n        title,\n        help,\n        className,\n        children,\n        ...rest\n      } = props\n\n      if (value?.includes(selected)) {\n        collectedData.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      const handleSelect = () => {\n        const newValue = value?.includes(selected)\n          ? value.filter((value) => value !== selected)\n          : [...(value ?? []), selected]\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          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(selected)}\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 (path) {\n    setFieldProps?.(path + '/arraySelectionData', collectedData)\n  }\n\n  return result\n}\n\nArraySelection._supportsSpacingProps = true\nexport default ArraySelection\n"],"mappings":"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"}

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

@@ -15,6 +15,16 @@ export const arraySelectionProperties = {
     doc: 'For providing `<Field.Option>` components.',
     type: 'React.Node',
     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',
+    status: 'optional'
+  },
+  dataPath: {
+    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.',
+    type: 'string',
+    status: 'optional'
   }
 };
 //# sourceMappingURL=ArraySelectionDocs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ArraySelectionDocs.js","names":["arraySelectionProperties","variant","doc","type","defaultValue","status","optionsLayout","children"],"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}\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;AACF,CAAC"}
+{"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"}

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

@@ -25,7 +25,7 @@
        column-gap: var(--spacing-small);
   row-gap: var(--row-gap);
 }
-@media screen and (min-width: 40em) {
+@media screen and (min-width: 40.0625em) {
   .dnb-forms-field-array-selection .dnb-forms-field-block--layout-horizontal .dnb-form-label {
     line-height: 2.5rem;
     margin-bottom: 0;

package/es/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--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-checkbox.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-array-selection__options{row-gap:0}.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:40em){.dnb-forms-field-array-selection .dnb-forms-field-block--layout-horizontal .dnb-form-label{line-height:2.5rem;margin-bottom:0}}
+.dnb-forms-field-array-selection{--row-gap:var(--spacing-x-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-checkbox.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-array-selection__options{row-gap:0}.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.0625em){.dnb-forms-field-array-selection .dnb-forms-field-block--layout-horizontal .dnb-form-label{line-height:2.5rem;margin-bottom:0}}

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

@@ -15,7 +15,7 @@ function Email(props) {
     label: translations.label,
     autoComplete: 'email',
     inputMode: 'email',
-    pattern: "^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$",
+    pattern: `^(?!.*\\.\\.)(?!.*--)(?!.*\\.-)(?!.*-\\.)` + `[a-zA-Z0-9]+([._%+-]?[a-zA-Z0-9]+)*@` + `(?:` + `([a-zA-Z0-9]+([.-]?[a-zA-Z0-9]+)*\\.[a-zA-Z]{2,})` + `|` + `\\[(?:` + `(?:\\d{1,3}\\.){3}\\d{1,3}` + `|` + `IPv6:[0-9a-fA-F:]+` + `)\\]` + `)$`,
     trim: true
   }, props), {}, {
     errorMessages

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

@@ -1 +1 @@
-{"version":3,"file":"Email.js","names":["React","StringField","useErrorMessage","useTranslation","Email","props","translations","errorMessages","path","required","errorRequired","pattern","errorPattern","StringFieldProps","_objectSpread","label","autoComplete","inputMode","trim","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Email/Email.tsx"],"sourcesContent":["import React from 'react'\nimport StringField, { Props as StringFieldProps } from '../String'\nimport useErrorMessage from '../../hooks/useErrorMessage'\nimport useTranslation from '../../hooks/useTranslation'\n\nexport type Props = StringFieldProps\n\nfunction Email(props: Props) {\n  const translations = useTranslation().Email\n\n  const errorMessages = useErrorMessage(props.path, props.errorMessages, {\n    required: translations.errorRequired,\n    pattern: translations.errorPattern,\n  })\n\n  const StringFieldProps: Props = {\n    label: translations.label,\n    autoComplete: 'email',\n    inputMode: 'email',\n    pattern:\n      \"^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$\",\n    trim: true,\n    ...props,\n    errorMessages,\n  }\n\n  return <StringField {...StringFieldProps} />\n}\n\nEmail._supportsSpacingProps = true\nexport default Email\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,WAAW,MAAqC,WAAW;AAClE,OAAOC,eAAe,MAAM,6BAA6B;AACzD,OAAOC,cAAc,MAAM,4BAA4B;AAIvD,SAASC,KAAKA,CAACC,KAAY,EAAE;EAC3B,MAAMC,YAAY,GAAGH,cAAc,CAAC,CAAC,CAACC,KAAK;EAE3C,MAAMG,aAAa,GAAGL,eAAe,CAACG,KAAK,CAACG,IAAI,EAAEH,KAAK,CAACE,aAAa,EAAE;IACrEE,QAAQ,EAAEH,YAAY,CAACI,aAAa;IACpCC,OAAO,EAAEL,YAAY,CAACM;EACxB,CAAC,CAAC;EAEF,MAAMC,gBAAuB,GAAAC,aAAA,CAAAA,aAAA;IAC3BC,KAAK,EAAET,YAAY,CAACS,KAAK;IACzBC,YAAY,EAAE,OAAO;IACrBC,SAAS,EAAE,OAAO;IAClBN,OAAO,EACL,qEAAqE;IACvEO,IAAI,EAAE;EAAI,GACPb,KAAK;IACRE;EAAa,EACd;EAED,OAAOP,KAAA,CAAAmB,aAAA,CAAClB,WAAW,EAAKY,gBAAmB,CAAC;AAC9C;AAEAT,KAAK,CAACgB,qBAAqB,GAAG,IAAI;AAClC,eAAehB,KAAK"}
+{"version":3,"file":"Email.js","names":["React","StringField","useErrorMessage","useTranslation","Email","props","translations","errorMessages","path","required","errorRequired","pattern","errorPattern","StringFieldProps","_objectSpread","label","autoComplete","inputMode","trim","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Email/Email.tsx"],"sourcesContent":["import React from 'react'\nimport StringField, { Props as StringFieldProps } from '../String'\nimport useErrorMessage from '../../hooks/useErrorMessage'\nimport useTranslation from '../../hooks/useTranslation'\n\nexport type Props = StringFieldProps\n\nfunction Email(props: Props) {\n  const translations = useTranslation().Email\n\n  const errorMessages = useErrorMessage(props.path, props.errorMessages, {\n    required: translations.errorRequired,\n    pattern: translations.errorPattern,\n  })\n\n  const StringFieldProps: Props = {\n    label: translations.label,\n    autoComplete: 'email',\n    inputMode: 'email',\n    pattern:\n      `^(?!.*\\\\.\\\\.)(?!.*--)(?!.*\\\\.-)(?!.*-\\\\.)` + // No consecutive dots, hyphens, or dot-hyphen sequences\n      `[a-zA-Z0-9]+([._%+-]?[a-zA-Z0-9]+)*@` + // Local part: letters, numbers, dots, etc.\n      `(?:` +\n      `([a-zA-Z0-9]+([.-]?[a-zA-Z0-9]+)*\\\\.[a-zA-Z]{2,})` + // Domain part: standard domain names\n      `|` +\n      `\\\\[(?:` +\n      `(?:\\\\d{1,3}\\\\.){3}\\\\d{1,3}` + // Allow IPv4 address (no validation)\n      `|` +\n      `IPv6:[0-9a-fA-F:]+` + // Allow IPv6 address (no validation)\n      `)\\\\]` +\n      `)$`,\n    trim: true,\n    ...props,\n    errorMessages,\n  }\n\n  return <StringField {...StringFieldProps} />\n}\n\nEmail._supportsSpacingProps = true\nexport default Email\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,WAAW,MAAqC,WAAW;AAClE,OAAOC,eAAe,MAAM,6BAA6B;AACzD,OAAOC,cAAc,MAAM,4BAA4B;AAIvD,SAASC,KAAKA,CAACC,KAAY,EAAE;EAC3B,MAAMC,YAAY,GAAGH,cAAc,CAAC,CAAC,CAACC,KAAK;EAE3C,MAAMG,aAAa,GAAGL,eAAe,CAACG,KAAK,CAACG,IAAI,EAAEH,KAAK,CAACE,aAAa,EAAE;IACrEE,QAAQ,EAAEH,YAAY,CAACI,aAAa;IACpCC,OAAO,EAAEL,YAAY,CAACM;EACxB,CAAC,CAAC;EAEF,MAAMC,gBAAuB,GAAAC,aAAA,CAAAA,aAAA;IAC3BC,KAAK,EAAET,YAAY,CAACS,KAAK;IACzBC,YAAY,EAAE,OAAO;IACrBC,SAAS,EAAE,OAAO;IAClBN,OAAO,EACJ,2CAA0C,GAC1C,sCAAqC,GACrC,KAAI,GACJ,mDAAkD,GAClD,GAAE,GACF,QAAO,GACP,4BAA2B,GAC3B,GAAE,GACF,oBAAmB,GACnB,MAAK,GACL,IAAG;IACNO,IAAI,EAAE;EAAI,GACPb,KAAK;IACRE;EAAa,EACd;EAED,OAAOP,KAAA,CAAAmB,aAAA,CAAClB,WAAW,EAAKY,gBAAmB,CAAC;AAC9C;AAEAT,KAAK,CAACgB,qBAAqB,GAAG,IAAI;AAClC,eAAehB,KAAK"}

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

@@ -1,30 +1,58 @@
 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 React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import StringField from '../String';
+import { dnr, fnr } from '@navikt/fnrvalidator';
 import useErrorMessage from '../../hooks/useErrorMessage';
 import useTranslation from '../../hooks/useTranslation';
 function NationalIdentityNumber(props) {
-  var _props$pattern, _props$label, _props$width;
-  const translations = useTranslation().NationalIdentityNumber;
-  const errorMessage = translations.errorRequired;
+  var _props$label, _props$width;
   const {
     validate = true,
     omitMask
   } = props;
+  const translations = useTranslation().NationalIdentityNumber;
+  const {
+    label,
+    errorRequired,
+    errorFnr,
+    errorDnr
+  } = translations;
   const errorMessages = useErrorMessage(props.path, props.errorMessages, {
-    required: errorMessage,
-    pattern: errorMessage
+    required: errorRequired,
+    pattern: errorRequired,
+    errorFnr,
+    errorDnr
   });
   const mask = useMemo(() => omitMask ? Array(11).fill(/\d/) : [/\d/, /\d/, /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, /\d/], [omitMask]);
+  const validationPattern = '^[0-9]{11}$';
+  const fnrValidator = useCallback(value => {
+    if (new RegExp(validationPattern).test(value) && fnr(value).status === 'invalid') {
+      return Error(errorFnr);
+    }
+  }, [errorFnr]);
+  const dnrValidator = useCallback(value => {
+    const validationPattern = '^[4-7]([0-9]{10}$)';
+    if (new RegExp(validationPattern).test(value) && dnr(value).status === 'invalid') {
+      return Error(errorDnr);
+    }
+  }, [errorDnr]);
+  const dnrAndFnrValidator = useCallback(value => {
+    return dnrValidator(value) || fnrValidator(value);
+  }, [dnrValidator, fnrValidator]);
   const StringFieldProps = _objectSpread(_objectSpread({}, props), {}, {
-    pattern: (_props$pattern = props.pattern) !== null && _props$pattern !== void 0 ? _props$pattern : validate && !props.validator ? '^[0-9]{11}$' : undefined,
-    label: (_props$label = props.label) !== null && _props$label !== void 0 ? _props$label : translations.label,
+    pattern: validate && props.pattern ? props.pattern : validate && !props.validator ? validationPattern : undefined,
+    label: (_props$label = props.label) !== null && _props$label !== void 0 ? _props$label : label,
     errorMessages,
     mask,
     width: (_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : 'medium',
-    inputMode: 'numeric'
+    inputMode: 'numeric',
+    validator: validate ? props.validator || dnrAndFnrValidator : undefined,
+    exportValidators: {
+      dnrValidator,
+      fnrValidator
+    }
   });
   return React.createElement(StringField, StringFieldProps);
 }

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

@@ -1 +1 @@
-{"version":3,"file":"NationalIdentityNumber.js","names":["React","useMemo","StringField","useErrorMessage","useTranslation","NationalIdentityNumber","props","_props$pattern","_props$label","_props$width","translations","errorMessage","errorRequired","validate","omitMask","errorMessages","path","required","pattern","mask","Array","fill","StringFieldProps","_objectSpread","validator","undefined","label","width","inputMode","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/NationalIdentityNumber/NationalIdentityNumber.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\nimport StringField, { Props as StringFieldProps } from '../String'\n\nimport useErrorMessage from '../../hooks/useErrorMessage'\nimport useTranslation from '../../hooks/useTranslation'\n\nexport type Props = StringFieldProps & {\n  omitMask?: boolean\n  validate?: boolean\n}\n\nfunction NationalIdentityNumber(props: Props) {\n  const translations = useTranslation().NationalIdentityNumber\n  const errorMessage = translations.errorRequired\n\n  const { validate = true, omitMask } = props\n\n  const errorMessages = useErrorMessage(props.path, props.errorMessages, {\n    required: errorMessage,\n    pattern: errorMessage,\n  })\n\n  const mask = useMemo(\n    () =>\n      omitMask\n        ? Array(11).fill(/\\d/)\n        : [\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            ' ',\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n          ],\n    [omitMask]\n  )\n\n  const StringFieldProps: Props = {\n    ...props,\n    pattern:\n      props.pattern ??\n      (validate && !props.validator ? '^[0-9]{11}$' : undefined),\n    label: props.label ?? translations.label,\n    errorMessages,\n    mask,\n    width: props.width ?? 'medium',\n    inputMode: 'numeric',\n  }\n\n  return <StringField {...StringFieldProps} />\n}\n\nNationalIdentityNumber._supportsSpacingProps = true\nexport default NationalIdentityNumber\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,OAAOC,WAAW,MAAqC,WAAW;AAElE,OAAOC,eAAe,MAAM,6BAA6B;AACzD,OAAOC,cAAc,MAAM,4BAA4B;AAOvD,SAASC,sBAAsBA,CAACC,KAAY,EAAE;EAAA,IAAAC,cAAA,EAAAC,YAAA,EAAAC,YAAA;EAC5C,MAAMC,YAAY,GAAGN,cAAc,CAAC,CAAC,CAACC,sBAAsB;EAC5D,MAAMM,YAAY,GAAGD,YAAY,CAACE,aAAa;EAE/C,MAAM;IAAEC,QAAQ,GAAG,IAAI;IAAEC;EAAS,CAAC,GAAGR,KAAK;EAE3C,MAAMS,aAAa,GAAGZ,eAAe,CAACG,KAAK,CAACU,IAAI,EAAEV,KAAK,CAACS,aAAa,EAAE;IACrEE,QAAQ,EAAEN,YAAY;IACtBO,OAAO,EAAEP;EACX,CAAC,CAAC;EAEF,MAAMQ,IAAI,GAAGlB,OAAO,CAClB,MACEa,QAAQ,GACJM,KAAK,CAAC,EAAE,CAAC,CAACC,IAAI,CAAC,IAAI,CAAC,GACpB,CACE,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,CACL,EACP,CAACP,QAAQ,CACX,CAAC;EAED,MAAMQ,gBAAuB,GAAAC,aAAA,CAAAA,aAAA,KACxBjB,KAAK;IACRY,OAAO,GAAAX,cAAA,GACLD,KAAK,CAACY,OAAO,cAAAX,cAAA,cAAAA,cAAA,GACZM,QAAQ,IAAI,CAACP,KAAK,CAACkB,SAAS,GAAG,aAAa,GAAGC,SAAU;IAC5DC,KAAK,GAAAlB,YAAA,GAAEF,KAAK,CAACoB,KAAK,cAAAlB,YAAA,cAAAA,YAAA,GAAIE,YAAY,CAACgB,KAAK;IACxCX,aAAa;IACbI,IAAI;IACJQ,KAAK,GAAAlB,YAAA,GAAEH,KAAK,CAACqB,KAAK,cAAAlB,YAAA,cAAAA,YAAA,GAAI,QAAQ;IAC9BmB,SAAS,EAAE;EAAS,EACrB;EAED,OAAO5B,KAAA,CAAA6B,aAAA,CAAC3B,WAAW,EAAKoB,gBAAmB,CAAC;AAC9C;AAEAjB,sBAAsB,CAACyB,qBAAqB,GAAG,IAAI;AACnD,eAAezB,sBAAsB"}
+{"version":3,"file":"NationalIdentityNumber.js","names":["React","useCallback","useMemo","StringField","dnr","fnr","useErrorMessage","useTranslation","NationalIdentityNumber","props","_props$label","_props$width","validate","omitMask","translations","label","errorRequired","errorFnr","errorDnr","errorMessages","path","required","pattern","mask","Array","fill","validationPattern","fnrValidator","value","RegExp","test","status","Error","dnrValidator","dnrAndFnrValidator","StringFieldProps","_objectSpread","validator","undefined","width","inputMode","exportValidators","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/NationalIdentityNumber/NationalIdentityNumber.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react'\nimport StringField, { Props as StringFieldProps } from '../String'\nimport { dnr, fnr } from '@navikt/fnrvalidator'\n\nimport useErrorMessage from '../../hooks/useErrorMessage'\nimport useTranslation from '../../hooks/useTranslation'\n\nexport type Props = StringFieldProps & {\n  omitMask?: boolean\n  validate?: boolean\n}\n\nfunction NationalIdentityNumber(props: Props) {\n  const { validate = true, omitMask } = props\n\n  const translations = useTranslation().NationalIdentityNumber\n  const { label, errorRequired, errorFnr, errorDnr } = translations\n  const errorMessages = useErrorMessage(props.path, props.errorMessages, {\n    required: errorRequired,\n    pattern: errorRequired,\n    errorFnr,\n    errorDnr,\n  })\n\n  const mask = useMemo(\n    () =>\n      omitMask\n        ? Array(11).fill(/\\d/)\n        : [\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            ' ',\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n            /\\d/,\n          ],\n    [omitMask]\n  )\n  const validationPattern = '^[0-9]{11}$'\n\n  const fnrValidator = useCallback(\n    (value: string) => {\n      if (\n        new RegExp(validationPattern).test(value) &&\n        fnr(value).status === 'invalid'\n      ) {\n        return Error(errorFnr)\n      }\n    },\n    [errorFnr]\n  )\n\n  const dnrValidator = useCallback(\n    (value: string) => {\n      const validationPattern = '^[4-7]([0-9]{10}$)' // 1st num is increased by 4. i.e, if 01.01.1985, D number would be 410185.\n      if (\n        new RegExp(validationPattern).test(value) &&\n        dnr(value).status === 'invalid'\n      ) {\n        return Error(errorDnr)\n      }\n    },\n    [errorDnr]\n  )\n\n  const dnrAndFnrValidator = useCallback(\n    (value: string) => {\n      return dnrValidator(value) || fnrValidator(value)\n    },\n    [dnrValidator, fnrValidator]\n  )\n\n  const StringFieldProps: Props = {\n    ...props,\n    pattern:\n      validate && props.pattern\n        ? props.pattern\n        : validate && !props.validator\n        ? validationPattern\n        : undefined,\n    label: props.label ?? label,\n    errorMessages,\n    mask,\n    width: props.width ?? 'medium',\n    inputMode: 'numeric',\n    validator: validate\n      ? props.validator || dnrAndFnrValidator\n      : undefined,\n    exportValidators: { dnrValidator, fnrValidator },\n  }\n\n  return <StringField {...StringFieldProps} />\n}\n\nNationalIdentityNumber._supportsSpacingProps = true\nexport default NationalIdentityNumber\n"],"mappings":"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"}

package/es/extensions/forms/Field/NationalIdentityNumber/NationalIdentityNumberDocs.d.ts

@@ -0,0 +1,2 @@
+import { PropertiesTableProps } from '../../../../shared/types';
+export declare const NationalIdentityNumberProperties: PropertiesTableProps;

package/es/extensions/forms/Field/NationalIdentityNumber/NationalIdentityNumberDocs.js

@@ -0,0 +1,13 @@
+export const NationalIdentityNumberProperties = {
+  validate: {
+    doc: 'Using this prop you can disable the default validation.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  help: {
+    doc: 'Provide a help button. Object consisting of `title` and `content`.',
+    type: 'object',
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=NationalIdentityNumberDocs.js.map

package/es/extensions/forms/Field/NationalIdentityNumber/NationalIdentityNumberDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NationalIdentityNumberDocs.js","names":["NationalIdentityNumberProperties","validate","doc","type","status","help"],"sources":["../../../../../../src/extensions/forms/Field/NationalIdentityNumber/NationalIdentityNumberDocs.tsx"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const NationalIdentityNumberProperties: 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}\n"],"mappings":"AAEA,OAAO,MAAMA,gCAAsD,GAAG;EACpEC,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;AACF,CAAC"}

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

@@ -21,8 +21,8 @@ export type Props = FieldHelpProps & FieldProps<number, undefined | number, Erro
     decimalLimit?: number;
     allowNegative?: boolean;
     disallowLeadingZeroes?: boolean;
-    prefix?: string;
-    suffix?: string;
+    prefix?: string | ((value: number) => string);
+    suffix?: string | ((value: number) => string);
     minimum?: number;
     maximum?: number;
     exclusiveMinimum?: number;

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

@@ -33,8 +33,8 @@ function NumberComponent(props) {
     decimalLimit = 12,
     allowNegative = true,
     disallowLeadingZeroes = false,
-    prefix,
-    suffix,
+    prefix: prefixProp,
+    suffix: suffixProp,
     showStepControls
   } = props;
   const errorMessages = useErrorMessage(props.path, props.errorMessages, {
@@ -71,35 +71,6 @@ function NumberComponent(props) {
     }
     return numberValue;
   }, [props.emptyValue]);
-  const maskProps = useMemo(() => {
-    const mask_options = {
-      prefix,
-      suffix,
-      decimalLimit,
-      allowNegative,
-      disallowLeadingZeroes
-    };
-    if (currency) {
-      return {
-        as_currency: currency,
-        mask_options,
-        currency_mask: {
-          currencyDisplay
-        }
-      };
-    }
-    if (percent) {
-      return {
-        as_percent: percent,
-        mask_options
-      };
-    }
-    return {
-      as_number: true,
-      mask,
-      number_mask: _objectSpread({}, mask_options)
-    };
-  }, [currency, currencyDisplay, decimalLimit, mask, percent, prefix, suffix, allowNegative, disallowLeadingZeroes]);
   const preparedProps = _objectSpread(_objectSpread({
     valueType: 'number'
   }, props), {}, {
@@ -212,6 +183,37 @@ function NumberComponent(props) {
     onClick: decreaseClickHandler,
     title: sharedContext === null || sharedContext === void 0 ? void 0 : (_sharedContext$transl2 = sharedContext.translation.Slider.subtractTitle) === null || _sharedContext$transl2 === void 0 ? void 0 : _sharedContext$transl2.replace('%s', String(value - step))
   });
+  const prefix = typeof prefixProp === 'function' ? prefixProp(value) : prefixProp;
+  const suffix = typeof suffixProp === 'function' ? suffixProp(value) : suffixProp;
+  const maskProps = useMemo(() => {
+    const mask_options = {
+      prefix,
+      suffix,
+      decimalLimit,
+      allowNegative,
+      disallowLeadingZeroes
+    };
+    if (currency) {
+      return {
+        as_currency: currency,
+        mask_options,
+        currency_mask: {
+          currencyDisplay
+        }
+      };
+    }
+    if (percent) {
+      return {
+        as_percent: percent,
+        mask_options
+      };
+    }
+    return {
+      as_number: true,
+      mask,
+      number_mask: _objectSpread({}, mask_options)
+    };
+  }, [currency, currencyDisplay, decimalLimit, mask, percent, prefix, suffix, allowNegative, disallowLeadingZeroes]);
   const ariaParams = showStepControls && {
     role: 'spinbutton',
     'aria-valuemin': String(minimum),