@dnb/eufemia 10.32.0 → 10.34.0

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

@@ -1 +1 @@
-{"version":3,"file":"Selection.js","names":["React","useMemo","useCallback","classnames","makeUniqueId","ToggleButton","Dropdown","Radio","HelpButton","Autocomplete","OptionField","makeOptions","useFieldProps","pickSpacingProps","FieldBlock","FormError","convertCamelCaseProps","Selection","props","clearValue","id","className","variant","label","labelDescription","layout","optionsLayout","placeholder","value","info","warning","error","hasError","disabled","help","emptyValue","width","htmlAttributes","setHasFocus","handleChange","children","data","autocompleteProps","dropdownProps","handleDropdownChange","_ref","selectedKey","onChangeHandler","_ref2","undefined","handleShow","_ref3","handleHide","_ref4","cn","fieldBlockProps","_objectSpread","forId","getStatus","_error$message","message","Error","toString","status","options","Children","toArray","filter","child","isValidElement","type","map","option","_option$props","title","rest","_objectWithoutProperties","_excluded","Component","createElement","Group","layout_direction","on_change","String","i","_excluded2","_extends","length","key","text","sharedProps","list_class","portal_class","suffix","content","on_show","on_hide","stretch","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Selection/Selection.tsx"],"sourcesContent":["import React, { useMemo, useCallback } from 'react'\nimport classnames from 'classnames'\nimport { makeUniqueId } from '../../../../shared/component-helper'\nimport {\n  ToggleButton,\n  Dropdown,\n  Radio,\n  HelpButton,\n  Autocomplete,\n} from '../../../../components'\nimport OptionField, { makeOptions } from '../Option'\nimport { useFieldProps } from '../../hooks'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport FieldBlock from '../../FieldBlock'\nimport {\n  FormError,\n  FieldProps,\n  FieldHelpProps,\n  FieldBlockWidth,\n} from '../../types'\nimport type { FormStatusText } from '../../../../components/FormStatus'\nimport type {\n  AutocompleteAllProps,\n  AutocompleteProps,\n} from '../../../../components/Autocomplete'\nimport type {\n  DropdownAllProps,\n  DropdownProps,\n} from '../../../../components/Dropdown'\nimport {\n  convertCamelCaseProps,\n  ToCamelCase,\n} from '../../../../shared/helpers/withCamelCaseProps'\n\ninterface IOption {\n  title: string | React.ReactNode\n  value: number | string\n  status: FormStatusText\n}\n\nexport type Data = AutocompleteAllProps['data'] | DropdownAllProps['data']\n\nexport type Props = FieldHelpProps &\n  FieldProps<IOption['value']> & {\n    variant?: 'dropdown' | 'autocomplete' | 'radio' | 'button'\n    optionsLayout?: 'horizontal' | 'vertical'\n    children?: React.ReactNode\n\n    // - Autocomplete and Dropdown specific props\n    autocompleteProps?: ToCamelCase<AutocompleteProps>\n    dropdownProps?: ToCamelCase<DropdownProps>\n    data?: Data\n    width?: FieldBlockWidth\n  }\n\nfunction Selection(props: Props) {\n  const clearValue = useMemo(() => `clear-option-${makeUniqueId()}`, [])\n\n  const {\n    id,\n    className,\n    variant = 'dropdown',\n    label,\n    labelDescription,\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    placeholder,\n    value,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    help,\n    emptyValue,\n    width = 'large',\n    htmlAttributes,\n    setHasFocus,\n    handleChange,\n    children,\n\n    // - Autocomplete and Dropdown specific props\n    data,\n    autocompleteProps,\n    dropdownProps,\n  } = useFieldProps(props)\n\n  const handleDropdownChange = useCallback(\n    ({ data: { selectedKey } }) => {\n      handleChange?.(\n        !selectedKey || selectedKey === clearValue\n          ? emptyValue\n          : selectedKey\n      )\n    },\n    [handleChange, emptyValue, clearValue]\n  )\n\n  const onChangeHandler = useCallback(\n    ({ value }) => {\n      handleChange?.(value === undefined ? emptyValue : value)\n    },\n    [handleChange, emptyValue]\n  )\n\n  // Specific handleShow and handleHide because Dropdown preserve the initially received callbacks, so changes\n  // due to `useCallback` usage will have no effect, leading to useFieldPropss handleFocus and handleBlur sending out old\n  // copies of value as arguments.\n  const handleShow = useCallback(\n    ({ data }) => {\n      setHasFocus(true, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const handleHide = useCallback(\n    ({ data }) => {\n      setHasFocus(false, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const cn = classnames(\n    'dnb-forms-field-selection',\n    `dnb-forms-field-selection__variant--${variant}`,\n    `dnb-forms-field-selection__options-layout--${optionsLayout}`,\n    className\n  )\n\n  const fieldBlockProps = {\n    forId: id,\n    className: cn,\n    ...pickSpacingProps(props),\n    info,\n    warning,\n    error,\n    layout,\n    label,\n    labelDescription,\n  }\n\n  const getStatus = useCallback(\n    (error: Error | FormError | undefined) => {\n      return (\n        error?.message ??\n        ((warning instanceof Error && warning.message) ||\n          (warning instanceof FormError && warning.message) ||\n          warning?.toString() ||\n          (info instanceof Error && info.message) ||\n          (info instanceof FormError && info.message) ||\n          info?.toString())\n      )\n    },\n    [info, warning]\n  )\n\n  const status = getStatus(error)\n\n  switch (variant) {\n    case 'radio':\n    case 'button': {\n      const options: IOption[] = React.Children.toArray(children)\n        .filter(\n          (child) =>\n            React.isValidElement(child) && child.type === OptionField\n        )\n        .map((option: React.ReactElement) => {\n          const { error, title, children, ...rest } = option.props\n          const status = getStatus(error)\n\n          return {\n            title: title ?? children,\n            status,\n            ...rest,\n          }\n        })\n\n      const Component = (\n        variant === 'radio' ? Radio : ToggleButton\n      ) as typeof Radio & typeof ToggleButton\n\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <Component.Group\n            className={cn}\n            layout_direction={\n              optionsLayout === 'horizontal' ? 'row' : 'column'\n            }\n            disabled={disabled}\n            on_change={onChangeHandler}\n            value={String(value ?? '')}\n          >\n            {options.map((option, i) => {\n              const { value, title, status, ...rest } = option\n              return (\n                <Component\n                  id={options.length === 1 ? id : undefined}\n                  key={`option-${i}-${value}`}\n                  label={variant === 'radio' ? title : undefined}\n                  text={variant === 'button' ? title : undefined}\n                  value={String(value ?? '')}\n                  status={(hasError || status) && 'error'}\n                  {...htmlAttributes}\n                  {...rest}\n                />\n              )\n            })}\n          </Component.Group>\n        </FieldBlock>\n      )\n    }\n\n    case 'autocomplete':\n    case 'dropdown': {\n      const sharedProps: AutocompleteAllProps & DropdownAllProps = {\n        id,\n        list_class: 'dnb-forms-field-selection__list',\n        portal_class: 'dnb-forms-field-selection__portal',\n        title: placeholder,\n        value: String(value ?? ''),\n        status: (hasError || status) && 'error',\n        disabled,\n        ...htmlAttributes,\n        data: data ?? makeOptions<Data>(children),\n        suffix: help ? (\n          <HelpButton title={help.title}>{help.content}</HelpButton>\n        ) : undefined,\n        on_change: handleDropdownChange,\n        on_show: handleShow,\n        on_hide: handleHide,\n        stretch: true,\n      }\n\n      return (\n        <FieldBlock {...fieldBlockProps} width={width}>\n          {variant === 'autocomplete' ? (\n            <Autocomplete\n              {...sharedProps}\n              {...(autocompleteProps\n                ? (convertCamelCaseProps(\n                    autocompleteProps\n                  ) as AutocompleteAllProps)\n                : null)}\n            />\n          ) : (\n            <Dropdown\n              {...sharedProps}\n              {...(dropdownProps\n                ? (convertCamelCaseProps(\n                    dropdownProps\n                  ) as DropdownAllProps)\n                : null)}\n            />\n          )}\n        </FieldBlock>\n      )\n    }\n  }\n}\n\nSelection._supportsSpacingProps = true\nexport default Selection\n"],"mappings":"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"}
+{"version":3,"file":"Selection.js","names":["React","useMemo","useCallback","classnames","makeUniqueId","ToggleButton","Dropdown","Radio","HelpButton","Autocomplete","OptionField","makeOptions","useFieldProps","pickSpacingProps","FieldBlock","FormError","convertCamelCaseProps","Selection","props","clearValue","id","className","variant","label","labelDescription","layout","optionsLayout","placeholder","value","info","warning","error","hasError","disabled","help","emptyValue","width","htmlAttributes","setHasFocus","handleChange","children","data","autocompleteProps","dropdownProps","handleDropdownChange","_ref","selectedKey","onChangeHandler","_ref2","undefined","handleShow","_ref3","handleHide","_ref4","cn","fieldSectionProps","_objectSpread","forId","getStatus","_error$message","message","Error","toString","status","options","Children","toArray","filter","child","isValidElement","type","map","option","_option$props","title","rest","_objectWithoutProperties","_excluded","Component","createElement","Group","layout_direction","on_change","String","i","_excluded2","_extends","length","key","text","sharedProps","list_class","portal_class","suffix","content","on_show","on_hide","stretch","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Selection/Selection.tsx"],"sourcesContent":["import React, { useMemo, useCallback } from 'react'\nimport classnames from 'classnames'\nimport { makeUniqueId } from '../../../../shared/component-helper'\nimport {\n  ToggleButton,\n  Dropdown,\n  Radio,\n  HelpButton,\n  Autocomplete,\n} from '../../../../components'\nimport OptionField, { makeOptions } from '../Option'\nimport { useFieldProps } from '../../hooks'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport FieldBlock from '../../FieldBlock'\nimport {\n  FormError,\n  FieldProps,\n  FieldHelpProps,\n  FieldBlockWidth,\n} from '../../types'\nimport type { FormStatusText } from '../../../../components/FormStatus'\nimport type {\n  AutocompleteAllProps,\n  AutocompleteProps,\n} from '../../../../components/Autocomplete'\nimport type {\n  DropdownAllProps,\n  DropdownProps,\n} from '../../../../components/Dropdown'\nimport {\n  convertCamelCaseProps,\n  ToCamelCase,\n} from '../../../../shared/helpers/withCamelCaseProps'\n\ninterface IOption {\n  title: string | React.ReactNode\n  value: number | string\n  status: FormStatusText\n}\n\nexport type Data = AutocompleteAllProps['data'] | DropdownAllProps['data']\n\nexport type Props = FieldHelpProps &\n  FieldProps<IOption['value']> & {\n    variant?: 'dropdown' | 'autocomplete' | 'radio' | 'button'\n    optionsLayout?: 'horizontal' | 'vertical'\n    children?: React.ReactNode\n\n    // - Autocomplete and Dropdown specific props\n    autocompleteProps?: ToCamelCase<AutocompleteProps>\n    dropdownProps?: ToCamelCase<DropdownProps>\n    data?: Data\n    width?: FieldBlockWidth\n  }\n\nfunction Selection(props: Props) {\n  const clearValue = useMemo(() => `clear-option-${makeUniqueId()}`, [])\n\n  const {\n    id,\n    className,\n    variant = 'dropdown',\n    label,\n    labelDescription,\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    placeholder,\n    value,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    help,\n    emptyValue,\n    width = 'large',\n    htmlAttributes,\n    setHasFocus,\n    handleChange,\n    children,\n\n    // - Autocomplete and Dropdown specific props\n    data,\n    autocompleteProps,\n    dropdownProps,\n  } = useFieldProps(props)\n\n  const handleDropdownChange = useCallback(\n    ({ data }) => {\n      const selectedKey = data?.selectedKey\n      handleChange?.(\n        !selectedKey || selectedKey === clearValue\n          ? emptyValue\n          : selectedKey\n      )\n    },\n    [handleChange, emptyValue, clearValue]\n  )\n\n  const onChangeHandler = useCallback(\n    ({ value }) => {\n      handleChange?.(value === undefined ? emptyValue : value)\n    },\n    [handleChange, emptyValue]\n  )\n\n  // Specific handleShow and handleHide because Dropdown preserve the initially received callbacks, so changes\n  // due to `useCallback` usage will have no effect, leading to useFieldPropss handleFocus and handleBlur sending out old\n  // copies of value as arguments.\n  const handleShow = useCallback(\n    ({ data }) => {\n      setHasFocus(true, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const handleHide = useCallback(\n    ({ data }) => {\n      setHasFocus(false, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const cn = classnames(\n    'dnb-forms-field-selection',\n    `dnb-forms-field-selection__variant--${variant}`,\n    `dnb-forms-field-selection__options-layout--${optionsLayout}`,\n    className\n  )\n\n  const fieldSectionProps = {\n    forId: id,\n    className: cn,\n    ...pickSpacingProps(props),\n    info,\n    warning,\n    error,\n    layout,\n    label,\n    labelDescription,\n  }\n\n  const getStatus = useCallback(\n    (error: Error | FormError | undefined) => {\n      return (\n        error?.message ??\n        ((warning instanceof Error && warning.message) ||\n          (warning instanceof FormError && warning.message) ||\n          warning?.toString() ||\n          (info instanceof Error && info.message) ||\n          (info instanceof FormError && info.message) ||\n          info?.toString())\n      )\n    },\n    [info, warning]\n  )\n\n  const status = getStatus(error)\n\n  switch (variant) {\n    case 'radio':\n    case 'button': {\n      const options: IOption[] = React.Children.toArray(children)\n        .filter(\n          (child) =>\n            React.isValidElement(child) && child.type === OptionField\n        )\n        .map((option: React.ReactElement) => {\n          const { error, title, children, ...rest } = option.props\n          const status = getStatus(error)\n\n          return {\n            title: title ?? children,\n            status,\n            ...rest,\n          }\n        })\n\n      const Component = (\n        variant === 'radio' ? Radio : ToggleButton\n      ) as typeof Radio & typeof ToggleButton\n\n      return (\n        <FieldBlock {...fieldSectionProps}>\n          <Component.Group\n            className={cn}\n            layout_direction={\n              optionsLayout === 'horizontal' ? 'row' : 'column'\n            }\n            disabled={disabled}\n            on_change={onChangeHandler}\n            value={String(value ?? '')}\n          >\n            {options.map((option, i) => {\n              const { value, title, status, ...rest } = option\n              return (\n                <Component\n                  id={options.length === 1 ? id : undefined}\n                  key={`option-${i}-${value}`}\n                  label={variant === 'radio' ? title : undefined}\n                  text={variant === 'button' ? title : undefined}\n                  value={String(value ?? '')}\n                  status={(hasError || status) && 'error'}\n                  {...htmlAttributes}\n                  {...rest}\n                />\n              )\n            })}\n          </Component.Group>\n        </FieldBlock>\n      )\n    }\n\n    case 'autocomplete':\n    case 'dropdown': {\n      const sharedProps: AutocompleteAllProps & DropdownAllProps = {\n        id,\n        list_class: 'dnb-forms-field-selection__list',\n        portal_class: 'dnb-forms-field-selection__portal',\n        title: placeholder,\n        value: String(value ?? ''),\n        status: (hasError || status) && 'error',\n        disabled,\n        ...htmlAttributes,\n        data: data ?? makeOptions<Data>(children),\n        suffix: help ? (\n          <HelpButton title={help.title}>{help.content}</HelpButton>\n        ) : undefined,\n        on_change: handleDropdownChange,\n        on_show: handleShow,\n        on_hide: handleHide,\n        stretch: true,\n      }\n\n      return (\n        <FieldBlock {...fieldSectionProps} width={width}>\n          {variant === 'autocomplete' ? (\n            <Autocomplete\n              {...sharedProps}\n              {...(autocompleteProps\n                ? (convertCamelCaseProps(\n                    autocompleteProps\n                  ) as AutocompleteAllProps)\n                : null)}\n            />\n          ) : (\n            <Dropdown\n              {...sharedProps}\n              {...(dropdownProps\n                ? (convertCamelCaseProps(\n                    dropdownProps\n                  ) as DropdownAllProps)\n                : null)}\n            />\n          )}\n        </FieldBlock>\n      )\n    }\n  }\n}\n\nSelection._supportsSpacingProps = true\nexport default Selection\n"],"mappings":"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"}

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { FieldBlockWidth, FieldHelpProps, FieldProps, Path } from '../../types';
+import { SliderProps } from '../../../../components/Slider';
+export type SliderVisibilityEvent = React.MouseEvent<HTMLButtonElement> & {
+    value: string;
+};
+export type SliderValue = number | Array<number>;
+export type Props = FieldHelpProps & FieldProps<SliderValue> & {
+    /**
+     * Define an array with JSON Pointers for multiple thumb buttons.
+     */
+    paths?: Array<Path>;
+    step?: SliderProps['step'] | Path;
+    min?: SliderProps['min'] | Path;
+    max?: SliderProps['max'] | Path;
+    vertical?: SliderProps['vertical'];
+    reverse?: SliderProps['reverse'];
+    hideButtons?: SliderProps['hideButtons'];
+    multiThumbBehavior?: SliderProps['multiThumbBehavior'];
+    thumbTitle?: SliderProps['thumbTitle'];
+    subtractTitle?: SliderProps['subtractTitle'];
+    addTitle?: SliderProps['addTitle'];
+    numberFormat?: SliderProps['numberFormat'];
+    tooltip?: SliderProps['tooltip'];
+    alwaysShowTooltip?: SliderProps['alwaysShowTooltip'];
+    extensions?: SliderProps['extensions'];
+    /** Styling */
+    width?: FieldBlockWidth;
+};
+declare function SliderComponent(props: Props): import("react/jsx-runtime").JSX.Element;
+declare namespace SliderComponent {
+    var _supportsSpacingProps: boolean;
+}
+export default SliderComponent;

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

@@ -0,0 +1,104 @@
+"use client";
+
+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, { useCallback, useContext, useRef } from 'react';
+import FieldBlock from '../../FieldBlock';
+import { useFieldProps } from '../../hooks';
+import Slider from '../../../../components/Slider';
+import { pickSpacingProps } from '../../../../components/flex/utils';
+import { HelpButton } from '../../../../components';
+import DataContext from '../../DataContext/Context';
+import useDataValue from '../../hooks/useDataValue';
+function SliderComponent(props) {
+  var _ref, _props$paths;
+  const dataContextRef = useRef();
+  dataContextRef.current = useContext(DataContext);
+  const {
+    getValue
+  } = useDataValue();
+  const getValues = useCallback(source => {
+    if (Array.isArray(source)) {
+      return source.map(s => getValue(s) || 0);
+    }
+    return getValue(source) || 0;
+  }, [getValue]);
+  const value = getValues((_ref = (_props$paths = props.paths) !== null && _props$paths !== void 0 ? _props$paths : props.path) !== null && _ref !== void 0 ? _ref : props.value);
+  const preparedProps = _objectSpread(_objectSpread({}, props), {}, {
+    step: getValue(props.step),
+    min: getValue(props.min),
+    max: getValue(props.max)
+  });
+  const {
+    id,
+    step = 1,
+    min = 0,
+    max = 100,
+    width = 'stretch',
+    layout,
+    label,
+    help,
+    labelDescription,
+    info,
+    warning,
+    error,
+    hasError,
+    disabled,
+    handleChange,
+    handleFocus,
+    handleBlur
+  } = useFieldProps(preparedProps);
+  const handleLocalChange = useCallback(_ref2 => {
+    let {
+      value
+    } = _ref2;
+    if (Array.isArray(props.paths) && Array.isArray(value)) {
+      value.forEach((value, i) => {
+        dataContextRef.current.updateDataValue(props.paths[i], value);
+      });
+    }
+    handleChange === null || handleChange === void 0 ? void 0 : handleChange(value);
+  }, [handleChange, props.paths]);
+  const fieldSectionProps = _objectSpread({
+    forId: id,
+    layout,
+    label,
+    labelDescription,
+    info,
+    warning,
+    error,
+    disabled,
+    width
+  }, pickSpacingProps(props));
+  const sliderProps = {
+    value,
+    step,
+    min,
+    max,
+    disabled,
+    status: hasError ? 'error' : undefined,
+    suffix: help ? React.createElement(HelpButton, {
+      title: help.title
+    }, help.content) : undefined,
+    on_change: handleLocalChange,
+    on_drag_start: handleFocus,
+    on_drag_end: handleBlur,
+    vertical: props.vertical,
+    reverse: props.reverse,
+    hideButtons: props.hideButtons,
+    multiThumbBehavior: props.multiThumbBehavior,
+    thumbTitle: props.thumbTitle,
+    subtractTitle: props.subtractTitle,
+    addTitle: props.addTitle,
+    numberFormat: props.numberFormat,
+    tooltip: props.tooltip,
+    alwaysShowTooltip: props.alwaysShowTooltip,
+    extensions: props.extensions,
+    stretch: true
+  };
+  return React.createElement(FieldBlock, fieldSectionProps, React.createElement(Slider, sliderProps));
+}
+export default SliderComponent;
+SliderComponent._supportsSpacingProps = true;
+//# sourceMappingURL=Slider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","names":["React","useCallback","useContext","useRef","FieldBlock","useFieldProps","Slider","pickSpacingProps","HelpButton","DataContext","useDataValue","SliderComponent","props","_ref","_props$paths","dataContextRef","current","getValue","getValues","source","Array","isArray","map","s","value","paths","path","preparedProps","_objectSpread","step","min","max","id","width","layout","label","help","labelDescription","info","warning","error","hasError","disabled","handleChange","handleFocus","handleBlur","handleLocalChange","_ref2","forEach","i","updateDataValue","fieldSectionProps","forId","sliderProps","status","undefined","suffix","createElement","title","content","on_change","on_drag_start","on_drag_end","vertical","reverse","hideButtons","multiThumbBehavior","thumbTitle","subtractTitle","addTitle","numberFormat","tooltip","alwaysShowTooltip","extensions","stretch","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Slider/Slider.tsx"],"sourcesContent":["import React, { useCallback, useContext, useRef } from 'react'\nimport FieldBlock, { Props as FieldSectionProps } from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport {\n  FieldBlockWidth,\n  FieldHelpProps,\n  FieldProps,\n  Path,\n} from '../../types'\nimport Slider, { SliderProps } from '../../../../components/Slider'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { HelpButton } from '../../../../components'\nimport DataContext, { ContextState } from '../../DataContext/Context'\nimport useDataValue from '../../hooks/useDataValue'\n\nexport type SliderVisibilityEvent = React.MouseEvent<HTMLButtonElement> & {\n  value: string\n}\n\nexport type SliderValue = number | Array<number>\nexport type Props = FieldHelpProps &\n  FieldProps<SliderValue> & {\n    /**\n     * Define an array with JSON Pointers for multiple thumb buttons.\n     */\n    paths?: Array<Path>\n    step?: SliderProps['step'] | Path\n    min?: SliderProps['min'] | Path\n    max?: SliderProps['max'] | Path\n    vertical?: SliderProps['vertical']\n    reverse?: SliderProps['reverse']\n    hideButtons?: SliderProps['hideButtons']\n    multiThumbBehavior?: SliderProps['multiThumbBehavior']\n    thumbTitle?: SliderProps['thumbTitle']\n    subtractTitle?: SliderProps['subtractTitle']\n    addTitle?: SliderProps['addTitle']\n    numberFormat?: SliderProps['numberFormat']\n    tooltip?: SliderProps['tooltip']\n    alwaysShowTooltip?: SliderProps['alwaysShowTooltip']\n    extensions?: SliderProps['extensions']\n\n    /** Styling */\n    width?: FieldBlockWidth\n  }\n\nfunction SliderComponent(props: Props) {\n  const dataContextRef = useRef<ContextState>()\n  dataContextRef.current = useContext<ContextState>(DataContext)\n\n  const { getValue } = useDataValue()\n  const getValues = useCallback(\n    (source: SliderValue | Path | Array<Path>) => {\n      if (Array.isArray(source)) {\n        return source.map((s) => getValue(s) || 0)\n      }\n\n      return getValue(source) || 0\n    },\n    [getValue]\n  )\n\n  const value = getValues(props.paths ?? props.path ?? props.value)\n  const preparedProps = {\n    ...props,\n    step: getValue(props.step),\n    min: getValue(props.min),\n    max: getValue(props.max),\n  }\n\n  const {\n    id,\n    step = 1,\n    min = 0,\n    max = 100,\n    width = 'stretch',\n    layout,\n    label,\n    help,\n    labelDescription,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    handleChange,\n    handleFocus,\n    handleBlur,\n  } = useFieldProps(preparedProps)\n\n  const handleLocalChange = useCallback(\n    ({ value }: { value: number | number[] }) => {\n      if (Array.isArray(props.paths) && Array.isArray(value)) {\n        value.forEach((value, i) => {\n          dataContextRef.current.updateDataValue(props.paths[i], value)\n        })\n      }\n\n      handleChange?.(value)\n    },\n    [handleChange, props.paths]\n  )\n\n  const fieldSectionProps: FieldSectionProps = {\n    forId: id,\n    layout,\n    label,\n    labelDescription,\n    info,\n    warning,\n    error,\n    disabled,\n    width,\n    ...pickSpacingProps(props),\n  }\n\n  const sliderProps: SliderProps = {\n    value,\n    step,\n    min,\n    max,\n    disabled,\n    status: hasError ? 'error' : undefined,\n    suffix: help ? (\n      <HelpButton title={help.title}>{help.content}</HelpButton>\n    ) : undefined,\n    on_change: handleLocalChange,\n    on_drag_start: handleFocus,\n    on_drag_end: handleBlur,\n    vertical: props.vertical,\n    reverse: props.reverse,\n    hideButtons: props.hideButtons,\n    multiThumbBehavior: props.multiThumbBehavior,\n    thumbTitle: props.thumbTitle,\n    subtractTitle: props.subtractTitle,\n    addTitle: props.addTitle,\n    numberFormat: props.numberFormat,\n    tooltip: props.tooltip,\n    alwaysShowTooltip: props.alwaysShowTooltip,\n    extensions: props.extensions,\n    stretch: true,\n  }\n\n  return (\n    <FieldBlock {...fieldSectionProps}>\n      <Slider {...sliderProps} />\n    </FieldBlock>\n  )\n}\n\nexport default SliderComponent\n\nSliderComponent._supportsSpacingProps = true\n"],"mappings":"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"}

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

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

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

@@ -0,0 +1,26 @@
+import { SliderProperties } from '../../../../components/slider/SliderDocs';
+export const SliderFieldProperties = {
+  paths: {
+    doc: 'Define an array with JSON Pointer paths for multiple thumb buttons.',
+    type: 'Array<string>',
+    status: 'required'
+  },
+  min: SliderProperties.min,
+  max: SliderProperties.max,
+  step: SliderProperties.step,
+  vertical: SliderProperties.vertical,
+  reverse: SliderProperties.reverse,
+  stretch: SliderProperties.stretch,
+  hideButtons: SliderProperties.hideButtons,
+  multiThumbBehavior: SliderProperties.multiThumbBehavior,
+  thumbTitle: SliderProperties.thumbTitle,
+  subtractTitle: SliderProperties.subtractTitle,
+  addTitle: SliderProperties.addTitle,
+  numberFormat: SliderProperties.numberFormat,
+  tooltip: SliderProperties.tooltip,
+  alwaysShowTooltip: SliderProperties.alwaysShowTooltip,
+  extensions: SliderProperties.extensions,
+  '[Space](/uilib/layout/space/properties)': SliderProperties['[Space](/uilib/layout/space/properties)']
+};
+export const SliderFieldEvents = {};
+//# sourceMappingURL=SliderDocs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SliderDocs.js","names":["SliderProperties","SliderFieldProperties","paths","doc","type","status","min","max","step","vertical","reverse","stretch","hideButtons","multiThumbBehavior","thumbTitle","subtractTitle","addTitle","numberFormat","tooltip","alwaysShowTooltip","extensions","SliderFieldEvents"],"sources":["../../../../../../src/extensions/forms/Field/Slider/SliderDocs.ts"],"sourcesContent":["import { SliderProperties } from '../../../../components/slider/SliderDocs'\nimport { PropertiesTableProps } from '../../../../shared/types'\n\nexport const SliderFieldProperties: PropertiesTableProps = {\n  paths: {\n    doc: 'Define an array with JSON Pointer paths for multiple thumb buttons.',\n    type: 'Array<string>',\n    status: 'required',\n  },\n  min: SliderProperties.min,\n  max: SliderProperties.max,\n  step: SliderProperties.step,\n  vertical: SliderProperties.vertical,\n  reverse: SliderProperties.reverse,\n  stretch: SliderProperties.stretch,\n  hideButtons: SliderProperties.hideButtons,\n  multiThumbBehavior: SliderProperties.multiThumbBehavior,\n  thumbTitle: SliderProperties.thumbTitle,\n  subtractTitle: SliderProperties.subtractTitle,\n  addTitle: SliderProperties.addTitle,\n  numberFormat: SliderProperties.numberFormat,\n  tooltip: SliderProperties.tooltip,\n  alwaysShowTooltip: SliderProperties.alwaysShowTooltip,\n  extensions: SliderProperties.extensions,\n  '[Space](/uilib/layout/space/properties)':\n    SliderProperties['[Space](/uilib/layout/space/properties)'],\n}\n\nexport const SliderFieldEvents: PropertiesTableProps = {}\n"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,0CAA0C;AAG3E,OAAO,MAAMC,qBAA2C,GAAG;EACzDC,KAAK,EAAE;IACLC,GAAG,EAAE,qEAAqE;IAC1EC,IAAI,EAAE,eAAe;IACrBC,MAAM,EAAE;EACV,CAAC;EACDC,GAAG,EAAEN,gBAAgB,CAACM,GAAG;EACzBC,GAAG,EAAEP,gBAAgB,CAACO,GAAG;EACzBC,IAAI,EAAER,gBAAgB,CAACQ,IAAI;EAC3BC,QAAQ,EAAET,gBAAgB,CAACS,QAAQ;EACnCC,OAAO,EAAEV,gBAAgB,CAACU,OAAO;EACjCC,OAAO,EAAEX,gBAAgB,CAACW,OAAO;EACjCC,WAAW,EAAEZ,gBAAgB,CAACY,WAAW;EACzCC,kBAAkB,EAAEb,gBAAgB,CAACa,kBAAkB;EACvDC,UAAU,EAAEd,gBAAgB,CAACc,UAAU;EACvCC,aAAa,EAAEf,gBAAgB,CAACe,aAAa;EAC7CC,QAAQ,EAAEhB,gBAAgB,CAACgB,QAAQ;EACnCC,YAAY,EAAEjB,gBAAgB,CAACiB,YAAY;EAC3CC,OAAO,EAAElB,gBAAgB,CAACkB,OAAO;EACjCC,iBAAiB,EAAEnB,gBAAgB,CAACmB,iBAAiB;EACrDC,UAAU,EAAEpB,gBAAgB,CAACoB,UAAU;EACvC,yCAAyC,EACvCpB,gBAAgB,CAAC,yCAAyC;AAC9D,CAAC;AAED,OAAO,MAAMqB,iBAAuC,GAAG,CAAC,CAAC"}

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

@@ -0,0 +1,2 @@
+export { default } from './Slider';
+export * from './Slider';

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

@@ -0,0 +1,3 @@
+export { default } from './Slider';
+export * from './Slider';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["default"],"sources":["../../../../../../src/extensions/forms/Field/Slider/index.ts"],"sourcesContent":["export { default } from './Slider'\nexport * from './Slider'\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,UAAU;AAClC,cAAc,UAAU"}

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

@@ -159,7 +159,7 @@ function StringComponent(props) {
     submit_element: submitElement,
     keep_placeholder: keepPlaceholder
   };
-  const fieldBlockProps = _objectSpread({
+  const fieldSectionProps = _objectSpread({
     className: classnames('dnb-forms-field-string', className),
     forId: id,
     layout,
@@ -172,7 +172,7 @@ function StringComponent(props) {
     width: width === 'stretch' || fieldBlockContext !== null && fieldBlockContext !== void 0 && fieldBlockContext.composition ? width : undefined,
     contentWidth: width !== false ? width : undefined
   }, pickSpacingProps(props));
-  return React.createElement(FieldBlock, fieldBlockProps, multiline ? React.createElement(Textarea, _extends({}, sharedProps, textareaProps)) : mask ? React.createElement(InputMasked, _extends({}, sharedProps, inputProps, {
+  return React.createElement(FieldBlock, fieldSectionProps, multiline ? React.createElement(Textarea, _extends({}, sharedProps, textareaProps)) : mask ? React.createElement(InputMasked, _extends({}, sharedProps, inputProps, {
     mask: mask
   })) : React.createElement(Input, _extends({}, sharedProps, inputProps)));
 }

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

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

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

@@ -49,7 +49,7 @@ function Toggle(props) {
     handleChange === null || handleChange === void 0 ? void 0 : handleChange(value === 'on' ? valueOn : valueOff);
   }, [handleChange, valueOn, valueOff]);
   const cn = classnames('dnb-forms-field-toggle', className);
-  const fieldBlockPropsWithoutLabel = _objectSpread(_objectSpread({
+  const fieldSectionPropsWithoutLabel = _objectSpread(_objectSpread({
     forId: id,
     className: cn
   }, pickSpacingProps(props)), {}, {
@@ -58,7 +58,7 @@ function Toggle(props) {
     error,
     disabled
   });
-  const fieldBlockProps = _objectSpread(_objectSpread({}, fieldBlockPropsWithoutLabel), {}, {
+  const fieldSectionProps = _objectSpread(_objectSpread({}, fieldSectionPropsWithoutLabel), {}, {
     layout,
     label,
     labelDescription,
@@ -69,17 +69,17 @@ function Toggle(props) {
   switch (variant) {
     default:
     case 'checkbox':
-      return React.createElement(FieldBlock, fieldBlockPropsWithoutLabel, React.createElement(Checkbox, _extends({
+      return React.createElement(FieldBlock, fieldSectionPropsWithoutLabel, React.createElement(Checkbox, _extends({
         id: id,
         className: cn,
-        label: label,
+        label: label !== null && label !== void 0 ? label : isOn ? textOn !== null && textOn !== void 0 ? textOn : translations.yes : textOff !== null && textOff !== void 0 ? textOff : translations.no,
         checked: isOn,
         disabled: disabled,
         status: hasError ? 'error' : undefined,
         onChange: handleCheckboxChange
       }, htmlAttributes)));
     case 'button':
-      return React.createElement(FieldBlock, fieldBlockProps, React.createElement(ToggleButton, _extends({
+      return React.createElement(FieldBlock, fieldSectionProps, React.createElement(ToggleButton, _extends({
         id: id,
         text: isOn ? textOn !== null && textOn !== void 0 ? textOn : translations.yes : textOff !== null && textOff !== void 0 ? textOff : translations.no,
         checked: isOn,
@@ -89,7 +89,7 @@ function Toggle(props) {
         on_change: handleCheckboxChange
       }, htmlAttributes)));
     case 'buttons':
-      return React.createElement(FieldBlock, _extends({}, fieldBlockProps, {
+      return React.createElement(FieldBlock, _extends({}, fieldSectionProps, {
         asFieldset: true
       }), React.createElement(ButtonRow, {
         bottom: "x-small"
@@ -108,7 +108,7 @@ function Toggle(props) {
         value: "off"
       }, htmlAttributes)))));
     case 'checkbox-button':
-      return React.createElement(FieldBlock, fieldBlockProps, React.createElement(ToggleButton, _extends({
+      return React.createElement(FieldBlock, fieldSectionProps, React.createElement(ToggleButton, _extends({
         id: id,
         variant: "checkbox",
         text: isOn ? textOn !== null && textOn !== void 0 ? textOn : translations.yes : textOff !== null && textOff !== void 0 ? textOff : translations.no,

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

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","names":["React","useCallback","classnames","Checkbox","ToggleButton","ButtonRow","FieldBlock","useFieldProps","pickSpacingProps","ToggleButtonGroupContext","useTranslation","Toggle","props","translations","BooleanField","preparedProps","_objectSpread","errorMessages","id","className","valueOn","valueOff","layout","variant","disabled","label","labelDescription","textOn","textOff","value","info","warning","error","hasError","htmlAttributes","handleChange","handleCheckboxChange","_ref","checked","handleToggleChange","_ref2","cn","fieldBlockPropsWithoutLabel","forId","fieldBlockProps","isOn","isOff","createElement","_extends","status","undefined","onChange","text","yes","no","on_change","asFieldset","bottom","Provider","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Toggle/Toggle.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport classnames from 'classnames'\n\nimport { Checkbox, ToggleButton } from '../../../../components'\nimport ButtonRow from '../../Form/ButtonRow'\nimport FieldBlock from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\nimport useTranslation from '../../hooks/useTranslation'\n\nexport type ToggleProps = {\n  valueOn: unknown\n  valueOff: unknown\n  variant?: 'checkbox' | 'checkbox-button' | 'button' | 'buttons'\n  textOn?: string\n  textOff?: string\n}\n\nexport type Props = FieldProps<unknown> & ToggleProps\n\nfunction Toggle(props: Props) {\n  const translations = useTranslation().BooleanField\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages: props.errorMessages,\n  }\n\n  const {\n    id,\n    className,\n    valueOn,\n    valueOff,\n    layout,\n    variant,\n    disabled,\n    label,\n    labelDescription,\n    textOn,\n    textOff,\n    value,\n    info,\n    warning,\n    error,\n    hasError,\n    htmlAttributes,\n    handleChange,\n  } = useFieldProps(preparedProps)\n\n  const handleCheckboxChange = useCallback(\n    ({ checked }) => {\n      handleChange?.(checked ? valueOn : valueOff)\n    },\n    [handleChange, valueOn, valueOff]\n  )\n  const handleToggleChange = useCallback(\n    ({ value }) => {\n      handleChange?.(value === 'on' ? valueOn : valueOff)\n    },\n    [handleChange, valueOn, valueOff]\n  )\n\n  const cn = classnames('dnb-forms-field-toggle', className)\n\n  const fieldBlockPropsWithoutLabel = {\n    forId: id,\n    className: cn,\n    ...pickSpacingProps(props),\n    info,\n    warning,\n    error,\n    disabled,\n  }\n\n  const fieldBlockProps = {\n    ...fieldBlockPropsWithoutLabel,\n    layout,\n    label,\n    labelDescription,\n    disabled,\n  }\n\n  const isOn = value === valueOn\n  const isOff = value === valueOff\n\n  switch (variant) {\n    default:\n    case 'checkbox':\n      return (\n        <FieldBlock {...fieldBlockPropsWithoutLabel}>\n          <Checkbox\n            id={id}\n            className={cn}\n            label={label}\n            checked={isOn}\n            disabled={disabled}\n            status={hasError ? 'error' : undefined}\n            onChange={handleCheckboxChange}\n            {...htmlAttributes}\n          />\n        </FieldBlock>\n      )\n    case 'button':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ToggleButton\n            id={id}\n            text={\n              isOn\n                ? textOn ?? translations.yes\n                : textOff ?? translations.no\n            }\n            checked={isOn}\n            disabled={disabled}\n            status={hasError ? 'error' : undefined}\n            value={value ? 'true' : 'false'}\n            on_change={handleCheckboxChange}\n            {...htmlAttributes}\n          />\n        </FieldBlock>\n      )\n    case 'buttons':\n      return (\n        <FieldBlock {...fieldBlockProps} asFieldset>\n          <ButtonRow bottom=\"x-small\">\n            <ToggleButtonGroupContext.Provider\n              value={{\n                value: isOn ? 'on' : isOff ? 'off' : null, // use \"null\" to reset the value\n                onChange: handleToggleChange,\n                status: hasError ? 'error' : undefined,\n                disabled,\n              }}\n            >\n              <ToggleButton\n                text={textOn ?? translations.yes}\n                value=\"on\"\n                {...htmlAttributes}\n              />\n              <ToggleButton\n                text={textOff ?? translations.no}\n                value=\"off\"\n                {...htmlAttributes}\n              />\n            </ToggleButtonGroupContext.Provider>\n          </ButtonRow>\n        </FieldBlock>\n      )\n    case 'checkbox-button':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ToggleButton\n            id={id}\n            variant=\"checkbox\"\n            text={\n              isOn\n                ? textOn ?? translations.yes\n                : textOff ?? translations.no\n            }\n            checked={isOn}\n            disabled={disabled}\n            status={hasError ? 'error' : undefined}\n            value={value ? 'true' : 'false'}\n            on_change={handleCheckboxChange}\n            {...htmlAttributes}\n          />\n        </FieldBlock>\n      )\n  }\n}\n\nToggle._supportsSpacingProps = true\nexport default Toggle\n"],"mappings":"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"}
+{"version":3,"file":"Toggle.js","names":["React","useCallback","classnames","Checkbox","ToggleButton","ButtonRow","FieldBlock","useFieldProps","pickSpacingProps","ToggleButtonGroupContext","useTranslation","Toggle","props","translations","BooleanField","preparedProps","_objectSpread","errorMessages","id","className","valueOn","valueOff","layout","variant","disabled","label","labelDescription","textOn","textOff","value","info","warning","error","hasError","htmlAttributes","handleChange","handleCheckboxChange","_ref","checked","handleToggleChange","_ref2","cn","fieldSectionPropsWithoutLabel","forId","fieldSectionProps","isOn","isOff","createElement","_extends","yes","no","status","undefined","onChange","text","on_change","asFieldset","bottom","Provider","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Toggle/Toggle.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport classnames from 'classnames'\n\nimport { Checkbox, ToggleButton } from '../../../../components'\nimport ButtonRow from '../../Form/ButtonRow'\nimport FieldBlock from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\nimport useTranslation from '../../hooks/useTranslation'\n\nexport type ToggleProps = {\n  valueOn: unknown\n  valueOff: unknown\n  variant?: 'checkbox' | 'checkbox-button' | 'button' | 'buttons'\n  textOn?: string\n  textOff?: string\n}\n\nexport type Props = FieldProps<unknown> & ToggleProps\n\nfunction Toggle(props: Props) {\n  const translations = useTranslation().BooleanField\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages: props.errorMessages,\n  }\n\n  const {\n    id,\n    className,\n    valueOn,\n    valueOff,\n    layout,\n    variant,\n    disabled,\n    label,\n    labelDescription,\n    textOn,\n    textOff,\n    value,\n    info,\n    warning,\n    error,\n    hasError,\n    htmlAttributes,\n    handleChange,\n  } = useFieldProps(preparedProps)\n\n  const handleCheckboxChange = useCallback(\n    ({ checked }) => {\n      handleChange?.(checked ? valueOn : valueOff)\n    },\n    [handleChange, valueOn, valueOff]\n  )\n  const handleToggleChange = useCallback(\n    ({ value }) => {\n      handleChange?.(value === 'on' ? valueOn : valueOff)\n    },\n    [handleChange, valueOn, valueOff]\n  )\n\n  const cn = classnames('dnb-forms-field-toggle', className)\n\n  const fieldSectionPropsWithoutLabel = {\n    forId: id,\n    className: cn,\n    ...pickSpacingProps(props),\n    info,\n    warning,\n    error,\n    disabled,\n  }\n\n  const fieldSectionProps = {\n    ...fieldSectionPropsWithoutLabel,\n    layout,\n    label,\n    labelDescription,\n    disabled,\n  }\n\n  const isOn = value === valueOn\n  const isOff = value === valueOff\n\n  switch (variant) {\n    default:\n    case 'checkbox':\n      return (\n        <FieldBlock {...fieldSectionPropsWithoutLabel}>\n          <Checkbox\n            id={id}\n            className={cn}\n            label={\n              label ??\n              (isOn\n                ? textOn ?? translations.yes\n                : textOff ?? translations.no)\n            }\n            checked={isOn}\n            disabled={disabled}\n            status={hasError ? 'error' : undefined}\n            onChange={handleCheckboxChange}\n            {...htmlAttributes}\n          />\n        </FieldBlock>\n      )\n    case 'button':\n      return (\n        <FieldBlock {...fieldSectionProps}>\n          <ToggleButton\n            id={id}\n            text={\n              isOn\n                ? textOn ?? translations.yes\n                : textOff ?? translations.no\n            }\n            checked={isOn}\n            disabled={disabled}\n            status={hasError ? 'error' : undefined}\n            value={value ? 'true' : 'false'}\n            on_change={handleCheckboxChange}\n            {...htmlAttributes}\n          />\n        </FieldBlock>\n      )\n    case 'buttons':\n      return (\n        <FieldBlock {...fieldSectionProps} asFieldset>\n          <ButtonRow bottom=\"x-small\">\n            <ToggleButtonGroupContext.Provider\n              value={{\n                value: isOn ? 'on' : isOff ? 'off' : null, // use \"null\" to reset the value\n                onChange: handleToggleChange,\n                status: hasError ? 'error' : undefined,\n                disabled,\n              }}\n            >\n              <ToggleButton\n                text={textOn ?? translations.yes}\n                value=\"on\"\n                {...htmlAttributes}\n              />\n              <ToggleButton\n                text={textOff ?? translations.no}\n                value=\"off\"\n                {...htmlAttributes}\n              />\n            </ToggleButtonGroupContext.Provider>\n          </ButtonRow>\n        </FieldBlock>\n      )\n    case 'checkbox-button':\n      return (\n        <FieldBlock {...fieldSectionProps}>\n          <ToggleButton\n            id={id}\n            variant=\"checkbox\"\n            text={\n              isOn\n                ? textOn ?? translations.yes\n                : textOff ?? translations.no\n            }\n            checked={isOn}\n            disabled={disabled}\n            status={hasError ? 'error' : undefined}\n            value={value ? 'true' : 'false'}\n            on_change={handleCheckboxChange}\n            {...htmlAttributes}\n          />\n        </FieldBlock>\n      )\n  }\n}\n\nToggle._supportsSpacingProps = true\nexport default Toggle\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,QAAQ,EAAEC,YAAY,QAAQ,wBAAwB;AAC/D,OAAOC,SAAS,MAAM,sBAAsB;AAC5C,OAAOC,UAAU,MAAM,kBAAkB;AACzC,SAASC,aAAa,QAAQ,aAAa;AAE3C,SAASC,gBAAgB,QAAQ,mCAAmC;AACpE,OAAOC,wBAAwB,MAAM,+DAA+D;AACpG,OAAOC,cAAc,MAAM,4BAA4B;AAYvD,SAASC,MAAMA,CAACC,KAAY,EAAE;EAC5B,MAAMC,YAAY,GAAGH,cAAc,CAAC,CAAC,CAACI,YAAY;EAElD,MAAMC,aAAoB,GAAAC,aAAA,CAAAA,aAAA,KACrBJ,KAAK;IACRK,aAAa,EAAEL,KAAK,CAACK;EAAa,EACnC;EAED,MAAM;IACJC,EAAE;IACFC,SAAS;IACTC,OAAO;IACPC,QAAQ;IACRC,MAAM;IACNC,OAAO;IACPC,QAAQ;IACRC,KAAK;IACLC,gBAAgB;IAChBC,MAAM;IACNC,OAAO;IACPC,KAAK;IACLC,IAAI;IACJC,OAAO;IACPC,KAAK;IACLC,QAAQ;IACRC,cAAc;IACdC;EACF,CAAC,GAAG5B,aAAa,CAACQ,aAAa,CAAC;EAEhC,MAAMqB,oBAAoB,GAAGnC,WAAW,CACtCoC,IAAA,IAAiB;IAAA,IAAhB;MAAEC;IAAQ,CAAC,GAAAD,IAAA;IACVF,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAGG,OAAO,GAAGlB,OAAO,GAAGC,QAAQ,CAAC;EAC9C,CAAC,EACD,CAACc,YAAY,EAAEf,OAAO,EAAEC,QAAQ,CAClC,CAAC;EACD,MAAMkB,kBAAkB,GAAGtC,WAAW,CACpCuC,KAAA,IAAe;IAAA,IAAd;MAAEX;IAAM,CAAC,GAAAW,KAAA;IACRL,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAGN,KAAK,KAAK,IAAI,GAAGT,OAAO,GAAGC,QAAQ,CAAC;EACrD,CAAC,EACD,CAACc,YAAY,EAAEf,OAAO,EAAEC,QAAQ,CAClC,CAAC;EAED,MAAMoB,EAAE,GAAGvC,UAAU,CAAC,wBAAwB,EAAEiB,SAAS,CAAC;EAE1D,MAAMuB,6BAA6B,GAAA1B,aAAA,CAAAA,aAAA;IACjC2B,KAAK,EAAEzB,EAAE;IACTC,SAAS,EAAEsB;EAAE,GACVjC,gBAAgB,CAACI,KAAK,CAAC;IAC1BkB,IAAI;IACJC,OAAO;IACPC,KAAK;IACLR;EAAQ,EACT;EAED,MAAMoB,iBAAiB,GAAA5B,aAAA,CAAAA,aAAA,KAClB0B,6BAA6B;IAChCpB,MAAM;IACNG,KAAK;IACLC,gBAAgB;IAChBF;EAAQ,EACT;EAED,MAAMqB,IAAI,GAAGhB,KAAK,KAAKT,OAAO;EAC9B,MAAM0B,KAAK,GAAGjB,KAAK,KAAKR,QAAQ;EAEhC,QAAQE,OAAO;IACb;IACA,KAAK,UAAU;MACb,OACEvB,KAAA,CAAA+C,aAAA,CAACzC,UAAU,EAAKoC,6BAA6B,EAC3C1C,KAAA,CAAA+C,aAAA,CAAC5C,QAAQ,EAAA6C,QAAA;QACP9B,EAAE,EAAEA,EAAG;QACPC,SAAS,EAAEsB,EAAG;QACdhB,KAAK,EACHA,KAAK,aAALA,KAAK,cAALA,KAAK,GACJoB,IAAI,GACDlB,MAAM,aAANA,MAAM,cAANA,MAAM,GAAId,YAAY,CAACoC,GAAG,GAC1BrB,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAIf,YAAY,CAACqC,EAC7B;QACDZ,OAAO,EAAEO,IAAK;QACdrB,QAAQ,EAAEA,QAAS;QACnB2B,MAAM,EAAElB,QAAQ,GAAG,OAAO,GAAGmB,SAAU;QACvCC,QAAQ,EAAEjB;MAAqB,GAC3BF,cAAc,CACnB,CACS,CAAC;IAEjB,KAAK,QAAQ;MACX,OACElC,KAAA,CAAA+C,aAAA,CAACzC,UAAU,EAAKsC,iBAAiB,EAC/B5C,KAAA,CAAA+C,aAAA,CAAC3C,YAAY,EAAA4C,QAAA;QACX9B,EAAE,EAAEA,EAAG;QACPoC,IAAI,EACFT,IAAI,GACAlB,MAAM,aAANA,MAAM,cAANA,MAAM,GAAId,YAAY,CAACoC,GAAG,GAC1BrB,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAIf,YAAY,CAACqC,EAC7B;QACDZ,OAAO,EAAEO,IAAK;QACdrB,QAAQ,EAAEA,QAAS;QACnB2B,MAAM,EAAElB,QAAQ,GAAG,OAAO,GAAGmB,SAAU;QACvCvB,KAAK,EAAEA,KAAK,GAAG,MAAM,GAAG,OAAQ;QAChC0B,SAAS,EAAEnB;MAAqB,GAC5BF,cAAc,CACnB,CACS,CAAC;IAEjB,KAAK,SAAS;MACZ,OACElC,KAAA,CAAA+C,aAAA,CAACzC,UAAU,EAAA0C,QAAA,KAAKJ,iBAAiB;QAAEY,UAAU;MAAA,IAC3CxD,KAAA,CAAA+C,aAAA,CAAC1C,SAAS;QAACoD,MAAM,EAAC;MAAS,GACzBzD,KAAA,CAAA+C,aAAA,CAACtC,wBAAwB,CAACiD,QAAQ;QAChC7B,KAAK,EAAE;UACLA,KAAK,EAAEgB,IAAI,GAAG,IAAI,GAAGC,KAAK,GAAG,KAAK,GAAG,IAAI;UACzCO,QAAQ,EAAEd,kBAAkB;UAC5BY,MAAM,EAAElB,QAAQ,GAAG,OAAO,GAAGmB,SAAS;UACtC5B;QACF;MAAE,GAEFxB,KAAA,CAAA+C,aAAA,CAAC3C,YAAY,EAAA4C,QAAA;QACXM,IAAI,EAAE3B,MAAM,aAANA,MAAM,cAANA,MAAM,GAAId,YAAY,CAACoC,GAAI;QACjCpB,KAAK,EAAC;MAAI,GACNK,cAAc,CACnB,CAAC,EACFlC,KAAA,CAAA+C,aAAA,CAAC3C,YAAY,EAAA4C,QAAA;QACXM,IAAI,EAAE1B,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAIf,YAAY,CAACqC,EAAG;QACjCrB,KAAK,EAAC;MAAK,GACPK,cAAc,CACnB,CACgC,CAC1B,CACD,CAAC;IAEjB,KAAK,iBAAiB;MACpB,OACElC,KAAA,CAAA+C,aAAA,CAACzC,UAAU,EAAKsC,iBAAiB,EAC/B5C,KAAA,CAAA+C,aAAA,CAAC3C,YAAY,EAAA4C,QAAA;QACX9B,EAAE,EAAEA,EAAG;QACPK,OAAO,EAAC,UAAU;QAClB+B,IAAI,EACFT,IAAI,GACAlB,MAAM,aAANA,MAAM,cAANA,MAAM,GAAId,YAAY,CAACoC,GAAG,GAC1BrB,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAIf,YAAY,CAACqC,EAC7B;QACDZ,OAAO,EAAEO,IAAK;QACdrB,QAAQ,EAAEA,QAAS;QACnB2B,MAAM,EAAElB,QAAQ,GAAG,OAAO,GAAGmB,SAAU;QACvCvB,KAAK,EAAEA,KAAK,GAAG,MAAM,GAAG,OAAQ;QAChC0B,SAAS,EAAEnB;MAAqB,GAC5BF,cAAc,CACnB,CACS,CAAC;EAEnB;AACF;AAEAvB,MAAM,CAACgD,qBAAqB,GAAG,IAAI;AACnC,eAAehD,MAAM"}

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

@@ -19,3 +19,4 @@ export { default as SelectCountry } from './SelectCountry';
 export { default as BankAccountNumber } from './BankAccountNumber';
 export { default as Expiry } from './Expiry';
 export { default as Password } from './Password';
+export { default as Slider } from './Slider';

package/extensions/forms/Field/index.js

@@ -19,4 +19,5 @@ export { default as SelectCountry } from './SelectCountry';
 export { default as BankAccountNumber } from './BankAccountNumber';
 export { default as Expiry } from './Expiry';
 export { default as Password } from './Password';
+export { default as Slider } from './Slider';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","Composition","String","Number","Toggle","Indeterminate","Boolean","Currency","Date","Email","Name","NationalIdentityNumber","PhoneNumber","OrganizationNumber","PostalCodeAndCity","Selection","ArraySelection","Option","SelectCountry","BankAccountNumber","Expiry","Password"],"sources":["../../../../../src/extensions/forms/Field/index.ts"],"sourcesContent":["export { default as Composition } from './Composition'\nexport { default as String } from './String'\nexport { default as Number } from './Number'\nexport { default as Toggle } from './Toggle'\nexport { default as Indeterminate } from './Indeterminate'\nexport { default as Boolean } from './Boolean'\nexport { default as Currency } from './Currency'\nexport { default as Date } from './Date'\nexport { default as Email } from './Email'\nexport { default as Name } from './Name'\nexport { default as NationalIdentityNumber } from './NationalIdentityNumber'\nexport { default as PhoneNumber } from './PhoneNumber'\nexport { default as OrganizationNumber } from './OrganizationNumber'\nexport { default as PostalCodeAndCity } from './PostalCodeAndCity'\nexport { default as Selection } from './Selection'\nexport { default as ArraySelection } from './ArraySelection'\nexport { default as Option } from './Option'\nexport { default as SelectCountry } from './SelectCountry'\nexport { default as BankAccountNumber } from './BankAccountNumber'\nexport { default as Expiry } from './Expiry'\nexport { default as Password } from './Password'\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,WAAW,QAAQ,eAAe;AACtD,SAASD,OAAO,IAAIE,MAAM,QAAQ,UAAU;AAC5C,SAASF,OAAO,IAAIG,MAAM,QAAQ,UAAU;AAC5C,SAASH,OAAO,IAAII,MAAM,QAAQ,UAAU;AAC5C,SAASJ,OAAO,IAAIK,aAAa,QAAQ,iBAAiB;AAC1D,SAASL,OAAO,IAAIM,OAAO,QAAQ,WAAW;AAC9C,SAASN,OAAO,IAAIO,QAAQ,QAAQ,YAAY;AAChD,SAASP,OAAO,IAAIQ,IAAI,QAAQ,QAAQ;AACxC,SAASR,OAAO,IAAIS,KAAK,QAAQ,SAAS;AAC1C,SAAST,OAAO,IAAIU,IAAI,QAAQ,QAAQ;AACxC,SAASV,OAAO,IAAIW,sBAAsB,QAAQ,0BAA0B;AAC5E,SAASX,OAAO,IAAIY,WAAW,QAAQ,eAAe;AACtD,SAASZ,OAAO,IAAIa,kBAAkB,QAAQ,sBAAsB;AACpE,SAASb,OAAO,IAAIc,iBAAiB,QAAQ,qBAAqB;AAClE,SAASd,OAAO,IAAIe,SAAS,QAAQ,aAAa;AAClD,SAASf,OAAO,IAAIgB,cAAc,QAAQ,kBAAkB;AAC5D,SAAShB,OAAO,IAAIiB,MAAM,QAAQ,UAAU;AAC5C,SAASjB,OAAO,IAAIkB,aAAa,QAAQ,iBAAiB;AAC1D,SAASlB,OAAO,IAAImB,iBAAiB,QAAQ,qBAAqB;AAClE,SAASnB,OAAO,IAAIoB,MAAM,QAAQ,UAAU;AAC5C,SAASpB,OAAO,IAAIqB,QAAQ,QAAQ,YAAY"}
+{"version":3,"file":"index.js","names":["default","Composition","String","Number","Toggle","Indeterminate","Boolean","Currency","Date","Email","Name","NationalIdentityNumber","PhoneNumber","OrganizationNumber","PostalCodeAndCity","Selection","ArraySelection","Option","SelectCountry","BankAccountNumber","Expiry","Password","Slider"],"sources":["../../../../../src/extensions/forms/Field/index.ts"],"sourcesContent":["export { default as Composition } from './Composition'\nexport { default as String } from './String'\nexport { default as Number } from './Number'\nexport { default as Toggle } from './Toggle'\nexport { default as Indeterminate } from './Indeterminate'\nexport { default as Boolean } from './Boolean'\nexport { default as Currency } from './Currency'\nexport { default as Date } from './Date'\nexport { default as Email } from './Email'\nexport { default as Name } from './Name'\nexport { default as NationalIdentityNumber } from './NationalIdentityNumber'\nexport { default as PhoneNumber } from './PhoneNumber'\nexport { default as OrganizationNumber } from './OrganizationNumber'\nexport { default as PostalCodeAndCity } from './PostalCodeAndCity'\nexport { default as Selection } from './Selection'\nexport { default as ArraySelection } from './ArraySelection'\nexport { default as Option } from './Option'\nexport { default as SelectCountry } from './SelectCountry'\nexport { default as BankAccountNumber } from './BankAccountNumber'\nexport { default as Expiry } from './Expiry'\nexport { default as Password } from './Password'\nexport { default as Slider } from './Slider'\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,WAAW,QAAQ,eAAe;AACtD,SAASD,OAAO,IAAIE,MAAM,QAAQ,UAAU;AAC5C,SAASF,OAAO,IAAIG,MAAM,QAAQ,UAAU;AAC5C,SAASH,OAAO,IAAII,MAAM,QAAQ,UAAU;AAC5C,SAASJ,OAAO,IAAIK,aAAa,QAAQ,iBAAiB;AAC1D,SAASL,OAAO,IAAIM,OAAO,QAAQ,WAAW;AAC9C,SAASN,OAAO,IAAIO,QAAQ,QAAQ,YAAY;AAChD,SAASP,OAAO,IAAIQ,IAAI,QAAQ,QAAQ;AACxC,SAASR,OAAO,IAAIS,KAAK,QAAQ,SAAS;AAC1C,SAAST,OAAO,IAAIU,IAAI,QAAQ,QAAQ;AACxC,SAASV,OAAO,IAAIW,sBAAsB,QAAQ,0BAA0B;AAC5E,SAASX,OAAO,IAAIY,WAAW,QAAQ,eAAe;AACtD,SAASZ,OAAO,IAAIa,kBAAkB,QAAQ,sBAAsB;AACpE,SAASb,OAAO,IAAIc,iBAAiB,QAAQ,qBAAqB;AAClE,SAASd,OAAO,IAAIe,SAAS,QAAQ,aAAa;AAClD,SAASf,OAAO,IAAIgB,cAAc,QAAQ,kBAAkB;AAC5D,SAAShB,OAAO,IAAIiB,MAAM,QAAQ,UAAU;AAC5C,SAASjB,OAAO,IAAIkB,aAAa,QAAQ,iBAAiB;AAC1D,SAASlB,OAAO,IAAImB,iBAAiB,QAAQ,qBAAqB;AAClE,SAASnB,OAAO,IAAIoB,MAAM,QAAQ,UAAU;AAC5C,SAASpB,OAAO,IAAIqB,QAAQ,QAAQ,YAAY;AAChD,SAASrB,OAAO,IAAIsB,MAAM,QAAQ,UAAU"}

package/extensions/forms/FieldBlock/FieldBlock.d.ts

@@ -13,12 +13,15 @@ export type Props = Pick<FieldProps, keyof ComponentProps | 'layout' | 'label' |
     width?: FieldBlockWidth;
     /** Width of contents block, while label etc can be wider if space is available */
     contentWidth?: FieldBlockWidth;
+    /** For composition only: Align the contents vertically */
+    align?: 'center' | 'bottom';
+    /** Class name for the contents block */
     contentClassName?: string;
     /** To show the SubmitIndicator during async validation */
     fieldState?: SubmitState;
     /** Typography size */
     labelSize?: 'medium' | 'large';
-    children: React.ReactNode;
+    children?: React.ReactNode;
 } & React.HTMLAttributes<HTMLDivElement>;
 declare function FieldBlock(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace FieldBlock {