@dnb/eufemia 10.55.0 → 10.56.0

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","names":["React","useCallback","useContext","useMemo","useRef","FieldBlock","useFieldProps","getFormattedNumber","Slider","pickSpacingProps","HelpButton","DataContext","useDataValue","SliderComponent","props","_ref","_props$paths","dataContextRef","current","getSourceValue","getValues","source","Array","isArray","map","s","value","paths","path","preparedProps","_objectSpread","step","min","max","id","width","help","hasError","disabled","vertical","reverse","hideButtons","multiThumbBehavior","thumbTitle","subtractTitle","addTitle","numberFormat","tooltip","alwaysShowTooltip","extensions","handleChange","handleFocus","handleBlur","setDisplayValue","omitMultiplePathWarning","number","handleLocalChange","forEach","i","updateDataValue","fieldBlockProps","forId","sliderProps","status","undefined","suffix","createElement","title","content","on_change","on_drag_start","on_drag_end","stretch","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Slider/Slider.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo, useRef } from 'react'\nimport FieldBlock, {\n  Props as FieldBlockProps,\n  FieldBlockWidth,\n} from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { FieldHelpProps, FieldProps, Path } from '../../types'\nimport { getFormattedNumber } from '../../../../components/slider/SliderHelpers'\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 { getSourceValue } = useDataValue()\n  const getValues = useCallback(\n    (source: SliderValue | Path | Array<Path>) => {\n      if (Array.isArray(source)) {\n        return source.map((s) => getSourceValue(s) || 0)\n      }\n\n      return getSourceValue(source) || 0\n    },\n    [getSourceValue]\n  )\n\n  const value = getValues(props.paths ?? props.path ?? props.value)\n  const preparedProps = {\n    ...props,\n    step: getSourceValue(props.step),\n    min: getSourceValue(props.min),\n    max: getSourceValue(props.max),\n  }\n\n  const {\n    id,\n    path,\n    step = 1,\n    min = 0,\n    max = 100,\n    width = 'stretch',\n    help,\n    hasError,\n    disabled,\n    vertical,\n    reverse,\n    hideButtons,\n    multiThumbBehavior,\n    thumbTitle,\n    subtractTitle,\n    addTitle,\n    numberFormat,\n    tooltip,\n    alwaysShowTooltip,\n    extensions,\n    handleChange,\n    handleFocus,\n    handleBlur,\n    setDisplayValue,\n  } = useFieldProps(preparedProps, {\n    omitMultiplePathWarning: true,\n  })\n\n  useMemo(() => {\n    if (path && numberFormat) {\n      const { number } = getFormattedNumber(value, numberFormat)\n      setDisplayValue(path, number)\n    }\n  }, [numberFormat, path, setDisplayValue, value])\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 fieldBlockProps: FieldBlockProps = {\n    forId: id,\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,\n    reverse,\n    hideButtons,\n    multiThumbBehavior,\n    thumbTitle,\n    subtractTitle,\n    addTitle,\n    numberFormat,\n    tooltip,\n    alwaysShowTooltip,\n    extensions,\n    stretch: true,\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps}>\n      <Slider {...sliderProps} />\n    </FieldBlock>\n  )\n}\n\nexport default SliderComponent\n\nSliderComponent._supportsSpacingProps = true\n"],"mappings":"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"}
+{"version":3,"file":"Slider.js","names":["React","useCallback","useContext","useMemo","useRef","FieldBlock","useFieldProps","getFormattedNumber","Slider","pickSpacingProps","DataContext","useDataValue","SliderComponent","props","_ref","_props$paths","dataContextRef","current","getSourceValue","getValues","source","Array","isArray","map","s","value","paths","path","preparedProps","_objectSpread","step","min","max","id","width","hasError","disabled","vertical","reverse","hideButtons","multiThumbBehavior","thumbTitle","subtractTitle","addTitle","numberFormat","tooltip","alwaysShowTooltip","extensions","handleChange","handleFocus","handleBlur","setDisplayValue","omitMultiplePathWarning","number","handleLocalChange","forEach","i","updateDataValue","fieldBlockProps","forId","sliderProps","status","undefined","on_change","on_drag_start","on_drag_end","stretch","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Slider/Slider.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo, useRef } from 'react'\nimport FieldBlock, {\n  Props as FieldBlockProps,\n  FieldBlockWidth,\n} from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { FieldProps, Path } from '../../types'\nimport { getFormattedNumber } from '../../../../components/slider/SliderHelpers'\nimport Slider, { SliderProps } from '../../../../components/Slider'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\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 = 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 { getSourceValue } = useDataValue()\n  const getValues = useCallback(\n    (source: SliderValue | Path | Array<Path>) => {\n      if (Array.isArray(source)) {\n        return source.map((s) => getSourceValue(s) || 0)\n      }\n\n      return getSourceValue(source) || 0\n    },\n    [getSourceValue]\n  )\n\n  const value = getValues(props.paths ?? props.path ?? props.value)\n  const preparedProps = {\n    ...props,\n    step: getSourceValue(props.step),\n    min: getSourceValue(props.min),\n    max: getSourceValue(props.max),\n  }\n\n  const {\n    id,\n    path,\n    step = 1,\n    min = 0,\n    max = 100,\n    width = 'stretch',\n    hasError,\n    disabled,\n    vertical,\n    reverse,\n    hideButtons,\n    multiThumbBehavior,\n    thumbTitle,\n    subtractTitle,\n    addTitle,\n    numberFormat,\n    tooltip,\n    alwaysShowTooltip,\n    extensions,\n    handleChange,\n    handleFocus,\n    handleBlur,\n    setDisplayValue,\n  } = useFieldProps(preparedProps, {\n    omitMultiplePathWarning: true,\n  })\n\n  useMemo(() => {\n    if (path && numberFormat) {\n      const { number } = getFormattedNumber(value, numberFormat)\n      setDisplayValue(path, number)\n    }\n  }, [numberFormat, path, setDisplayValue, value])\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 fieldBlockProps: FieldBlockProps = {\n    forId: id,\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    on_change: handleLocalChange,\n    on_drag_start: handleFocus,\n    on_drag_end: handleBlur,\n    vertical,\n    reverse,\n    hideButtons,\n    multiThumbBehavior,\n    thumbTitle,\n    subtractTitle,\n    addTitle,\n    numberFormat,\n    tooltip,\n    alwaysShowTooltip,\n    extensions,\n    stretch: true,\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps}>\n      <Slider {...sliderProps} />\n    </FieldBlock>\n  )\n}\n\nexport default SliderComponent\n\nSliderComponent._supportsSpacingProps = true\n"],"mappings":"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"}

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

@@ -4,8 +4,8 @@ import { InputMaskedProps } from '../../../../components/InputMasked';
 import { TextareaProps } from '../../../../components/Textarea';
 import { FieldBlockWidth } from '../../FieldBlock';
 import type { TextCounterProps } from '../../../../fragments/TextCounter';
-import type { FieldProps, FieldHelpProps } from '../../types';
-export type Props = FieldHelpProps & FieldProps<string, undefined | string> & {
+import type { FieldProps } from '../../types';
+export type Props = FieldProps<string, undefined | string> & {
     multiline?: boolean;
     inputClassName?: string;
     innerRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement>;

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

@@ -6,7 +6,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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, { useContext, useMemo, useCallback, useEffect, useRef } from 'react';
 import classnames from 'classnames';
-import { HelpButton, Input, Textarea } from '../../../../components';
+import { Input, Textarea } from '../../../../components';
 import InputMasked from '../../../../components/InputMasked';
 import DataContext from '../../DataContext/Context';
 import FieldBlockContext from '../../FieldBlock/FieldBlockContext';
@@ -75,7 +75,6 @@ function StringComponent(props) {
     value,
     hasError,
     disabled,
-    help,
     multiline,
     mask,
     leftIcon,
@@ -136,9 +135,6 @@ function StringComponent(props) {
     inputMode,
     className: cn,
     placeholder,
-    suffix: help ? React.createElement(HelpButton, {
-      title: help.title
-    }, help.content) : undefined,
     on_focus: handleFocus,
     on_blur: handleBlur,
     on_change: handleChange,

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

@@ -1 +1 @@
-{"version":3,"file":"String.js","names":["React","useContext","useMemo","useCallback","useEffect","useRef","classnames","HelpButton","Input","Textarea","InputMasked","DataContext","FieldBlockContext","FieldBlock","useFieldProps","pickSpacingProps","toCapitalized","StringComponent","props","_props$width","_props$innerRef","_dataContext$props2","_value$toString","dataContext","fieldBlockContext","schema","_props$schema","type","minLength","maxLength","pattern","fromInput","event","_event","_event$cleanedValue","_event2","_event3","value","emptyValue","cleanedValue","toEvent","trim","spaces","RegExp","test","replace","handleChange","transform","transformValue","capitalize","String","ref","preparedProps","_objectSpread","width","composition","innerRef","id","name","className","inputClassName","placeholder","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","setDisplayValue","onKeyDown","_innerRef$current","path","current","transformInstantly","handleSubmit","handleKeyDown","_dataContext$props","isolate","key","_event$preventDefault","preventDefault","call","cn","sharedProps","suffix","createElement","title","content","undefined","on_focus","on_blur","on_change","on_key_down","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, {\n  useContext,\n  useMemo,\n  useCallback,\n  useEffect,\n  useRef,\n} 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 DataContext from '../../DataContext/Context'\nimport FieldBlockContext from '../../FieldBlock/FieldBlockContext'\nimport FieldBlock, {\n  Props as FieldBlockProps,\n  FieldBlockWidth,\n} 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  AllJSONSchemaVersions,\n} from '../../types'\n\nexport type Props = FieldHelpProps &\n  FieldProps<string, undefined | string> & {\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    // - Events\n    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>\n  }\n\nfunction StringComponent(props: Props) {\n  const dataContext = useContext(DataContext)\n  const fieldBlockContext = useContext(FieldBlockContext)\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 ref = useRef<HTMLInputElement>()\n  const preparedProps: Props = {\n    ...props,\n    schema,\n    fromInput,\n    toEvent,\n    transformValue,\n    width:\n      props.width ??\n      (fieldBlockContext?.composition ? 'stretch' : 'large'),\n    innerRef: props.innerRef ?? ref,\n  }\n\n  const {\n    id,\n    name,\n    className,\n    innerRef,\n    inputClassName,\n    placeholder,\n    value,\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    setDisplayValue,\n    onKeyDown,\n  } = useFieldProps(preparedProps)\n\n  useEffect(() => {\n    setDisplayValue(props.path, innerRef.current?.value)\n  }, [innerRef, props.path, setDisplayValue, value])\n\n  const transformInstantly = useCallback(\n    (value: string) => (props.capitalize ? toCapitalized(value) : value),\n    [props.capitalize]\n  )\n\n  const { handleSubmit } = dataContext ?? {}\n  const handleKeyDown = useCallback(\n    ({ event }: { event: React.KeyboardEvent<HTMLInputElement> }) => {\n      if (\n        !multiline &&\n        dataContext?.props?.isolate &&\n        event.key === 'Enter'\n      ) {\n        handleSubmit() // So we commit the data to the outer context\n        event.preventDefault?.() // And prevent the default form submit\n      }\n\n      onKeyDown?.(event)\n    },\n    [handleSubmit, dataContext?.props?.isolate, multiline, onKeyDown]\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    on_key_down: handleKeyDown,\n    disabled,\n    ...htmlAttributes,\n    stretch: Boolean(width),\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,\n    clear,\n    size,\n    align,\n    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: FieldBlockProps = {\n    forId: id,\n    className: classnames('dnb-forms-field-string', className),\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","useEffect","useRef","classnames","Input","Textarea","InputMasked","DataContext","FieldBlockContext","FieldBlock","useFieldProps","pickSpacingProps","toCapitalized","StringComponent","props","_props$width","_props$innerRef","_dataContext$props2","_value$toString","dataContext","fieldBlockContext","schema","_props$schema","type","minLength","maxLength","pattern","fromInput","event","_event","_event$cleanedValue","_event2","_event3","value","emptyValue","cleanedValue","toEvent","trim","spaces","RegExp","test","replace","handleChange","transform","transformValue","capitalize","String","ref","preparedProps","_objectSpread","width","composition","innerRef","id","name","className","inputClassName","placeholder","hasError","disabled","multiline","mask","leftIcon","rightIcon","htmlAttributes","submitElement","clear","align","size","selectall","keepPlaceholder","rows","autoresizeMaxRows","autoresize","characterCounter","autoComplete","inputMode","autoCorrect","spellCheck","autoFocus","autoCapitalize","handleFocus","handleBlur","setDisplayValue","onKeyDown","_innerRef$current","path","current","transformInstantly","handleSubmit","handleKeyDown","_dataContext$props","isolate","key","_event$preventDefault","preventDefault","call","cn","sharedProps","on_focus","on_blur","on_change","on_key_down","stretch","Boolean","inner_ref","status","undefined","toString","textareaProps","autoresize_max_rows","inputProps","icon","icon_position","submit_element","keep_placeholder","fieldBlockProps","forId","contentWidth","createElement","_extends","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/String/String.tsx"],"sourcesContent":["import React, {\n  useContext,\n  useMemo,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react'\nimport classnames from 'classnames'\nimport { Input, Textarea } from '../../../../components'\nimport { InputProps } from '../../../../components/input/Input'\nimport InputMasked, {\n  InputMaskedProps,\n} from '../../../../components/InputMasked'\nimport { TextareaProps } from '../../../../components/Textarea'\nimport DataContext from '../../DataContext/Context'\nimport FieldBlockContext from '../../FieldBlock/FieldBlockContext'\nimport FieldBlock, {\n  Props as FieldBlockProps,\n  FieldBlockWidth,\n} 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 { FieldProps, AllJSONSchemaVersions } from '../../types'\n\nexport type Props = FieldProps<string, undefined | string> & {\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  // - Events\n  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>\n}\n\nfunction StringComponent(props: Props) {\n  const dataContext = useContext(DataContext)\n  const fieldBlockContext = useContext(FieldBlockContext)\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 ref = useRef<HTMLInputElement>()\n  const preparedProps: Props = {\n    ...props,\n    schema,\n    fromInput,\n    toEvent,\n    transformValue,\n    width:\n      props.width ??\n      (fieldBlockContext?.composition ? 'stretch' : 'large'),\n    innerRef: props.innerRef ?? ref,\n  }\n\n  const {\n    id,\n    name,\n    className,\n    innerRef,\n    inputClassName,\n    placeholder,\n    value,\n    hasError,\n    disabled,\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    setDisplayValue,\n    onKeyDown,\n  } = useFieldProps(preparedProps)\n\n  useEffect(() => {\n    setDisplayValue(props.path, innerRef.current?.value)\n  }, [innerRef, props.path, setDisplayValue, value])\n\n  const transformInstantly = useCallback(\n    (value: string) => (props.capitalize ? toCapitalized(value) : value),\n    [props.capitalize]\n  )\n\n  const { handleSubmit } = dataContext ?? {}\n  const handleKeyDown = useCallback(\n    ({ event }: { event: React.KeyboardEvent<HTMLInputElement> }) => {\n      if (\n        !multiline &&\n        dataContext?.props?.isolate &&\n        event.key === 'Enter'\n      ) {\n        handleSubmit() // So we commit the data to the outer context\n        event.preventDefault?.() // And prevent the default form submit\n      }\n\n      onKeyDown?.(event)\n    },\n    [handleSubmit, dataContext?.props?.isolate, multiline, onKeyDown]\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    on_focus: handleFocus,\n    on_blur: handleBlur,\n    on_change: handleChange,\n    on_key_down: handleKeyDown,\n    disabled,\n    ...htmlAttributes,\n    stretch: Boolean(width),\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,\n    clear,\n    size,\n    align,\n    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: FieldBlockProps = {\n    forId: id,\n    className: classnames('dnb-forms-field-string', className),\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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"}

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

@@ -55,11 +55,6 @@ export const stringProperties = {
     type: ['string', 'false'],
     status: 'optional'
   },
-  help: {
-    doc: 'Provide a help button. Object consisting of title and content.',
-    type: 'object',
-    status: 'optional'
-  },
   size: inputProperties.size,
   align: inputProperties.align,
   selectall: inputProperties.selectall,

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

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

package/es/extensions/forms/Field/String/style/dnb-string.css

@@ -0,0 +1,11 @@
+/*
+ * Utilities
+ */
+.dnb-forms-field-string .dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__label.dnb-form-label {
+  align-items: baseline;
+}
+@media screen and (max-width: xx-small0) {
+  .dnb-forms-field-string .dnb-input__shell {
+    width: 90%;
+  }
+}

package/es/extensions/forms/Field/String/style/dnb-string.min.css

@@ -0,0 +1 @@
+.dnb-forms-field-string .dnb-forms-field-block--layout-horizontal .dnb-forms-field-block__label.dnb-form-label{align-items:baseline}@media screen and (max-width:xx-small0){.dnb-forms-field-string .dnb-input__shell{width:90%}}

package/es/extensions/forms/Field/String/style/dnb-string.scss

@@ -0,0 +1,17 @@
+@import '../../../../../style/core/utilities.scss';
+
+.dnb-forms-field-string {
+  .dnb-forms-field-block--layout-horizontal {
+    .dnb-forms-field-block__label.dnb-form-label {
+      // Multiline label placement
+      align-items: baseline;
+    }
+  }
+
+  // Ensure inputs to not overflow on xx-small (defined above), but exclude e.g. Autocomplete
+  @include allBelow(xx-small) {
+    .dnb-input__shell {
+      width: 90%;
+    }
+  }
+}

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

@@ -1,4 +1,4 @@
-import { FieldHelpProps, FieldProps } from '../../types';
+import { FieldProps } from '../../types';
 export type ToggleProps = {
     valueOn: unknown;
     valueOff: unknown;
@@ -6,7 +6,7 @@ export type ToggleProps = {
     textOn?: string;
     textOff?: string;
 };
-export type Props = FieldHelpProps & Omit<FieldProps<unknown>, 'layout' | 'layoutOptions'> & ToggleProps;
+export type Props = Omit<FieldProps<unknown>, 'layout' | 'layoutOptions'> & ToggleProps;
 declare function Toggle(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace Toggle {
     var _supportsSpacingProps: boolean;

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

@@ -4,7 +4,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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, useMemo } from 'react';
 import classnames from 'classnames';
-import { Checkbox, HelpButton, ToggleButton } from '../../../../components';
+import { Checkbox, ToggleButton } from '../../../../components';
 import ButtonRow from '../../Form/ButtonRow';
 import FieldBlock from '../../FieldBlock';
 import { useFieldProps } from '../../hooks';
@@ -24,11 +24,9 @@ function Toggle(props) {
     variant,
     disabled,
     label,
-    labelDescription,
     textOn,
     textOff,
     value,
-    help,
     hasError,
     htmlAttributes,
     handleChange,
@@ -50,9 +48,6 @@ function Toggle(props) {
     className: cn,
     disabled
   }, pickSpacingProps(props));
-  const suffix = help ? React.createElement(HelpButton, {
-    title: help.title
-  }, help.content) : undefined;
   const isOn = value === valueOn;
   const isOff = value === valueOff;
   useMemo(() => {
@@ -73,7 +68,6 @@ function Toggle(props) {
         checked: isOn,
         disabled: disabled,
         status: hasError ? 'error' : undefined,
-        suffix: suffix,
         onChange: handleCheckboxChange
       }, htmlAttributes)));
     case 'button':
@@ -83,18 +77,12 @@ function Toggle(props) {
         checked: isOn,
         disabled: disabled,
         status: hasError ? 'error' : undefined,
-        suffix: suffix,
         value: value ? 'true' : 'false',
         on_change: handleCheckboxChange
       }, htmlAttributes)));
     case 'buttons':
       return React.createElement(FieldBlock, _extends({}, fieldBlockProps, {
-        asFieldset: true,
-        labelDescription: React.createElement(React.Fragment, null, labelDescription, help ? React.createElement(HelpButton, {
-          size: "small",
-          left: labelDescription ? 'x-small' : false,
-          title: help.title
-        }, help.content) : undefined)
+        asFieldset: true
       }), React.createElement(ButtonRow, {
         bottom: "x-small"
       }, React.createElement(ToggleButtonGroupContext.Provider, {
@@ -119,7 +107,6 @@ function Toggle(props) {
         checked: isOn,
         disabled: disabled,
         status: hasError ? 'error' : undefined,
-        suffix: suffix,
         value: value ? 'true' : 'false',
         on_change: handleCheckboxChange
       }, htmlAttributes)));

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

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","names":["React","useCallback","useMemo","classnames","Checkbox","HelpButton","ToggleButton","ButtonRow","FieldBlock","useFieldProps","pickSpacingProps","ToggleButtonGroupContext","useTranslation","Toggle","props","translations","ToggleField","preparedProps","_objectSpread","errorMessages","id","className","valueOn","valueOff","variant","disabled","label","labelDescription","textOn","textOff","value","help","hasError","htmlAttributes","handleChange","setDisplayValue","handleCheckboxChange","checked","handleToggleChange","cn","fieldBlockProps","forId","suffix","createElement","title","content","undefined","isOn","isOff","text","path","_extends","yes","no","status","onChange","on_change","asFieldset","Fragment","size","left","bottom","Provider","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Toggle/Toggle.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react'\nimport classnames from 'classnames'\nimport { Checkbox, HelpButton, ToggleButton } from '../../../../components'\nimport ButtonRow from '../../Form/ButtonRow'\nimport FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { FieldHelpProps, 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 = FieldHelpProps &\n  Omit<FieldProps<unknown>, 'layout' | 'layoutOptions'> &\n  ToggleProps\n\nfunction Toggle(props: Props) {\n  const translations = useTranslation().ToggleField\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages: props.errorMessages,\n  }\n\n  const {\n    id,\n    className,\n    valueOn,\n    valueOff,\n    variant,\n    disabled,\n    label,\n    labelDescription,\n    textOn,\n    textOff,\n    value,\n    help,\n    hasError,\n    htmlAttributes,\n    handleChange,\n    setDisplayValue,\n  } = useFieldProps(preparedProps)\n\n  const handleCheckboxChange = useCallback(\n    ({ checked }) => {\n      handleChange?.(checked ? valueOn : valueOff)\n    },\n    [handleChange, valueOn, valueOff]\n  )\n  const handleToggleChange = useCallback(\n    ({ value }) => {\n      handleChange?.(value === 'on' ? valueOn : valueOff)\n    },\n    [handleChange, valueOn, valueOff]\n  )\n\n  const cn = classnames('dnb-forms-field-toggle', className)\n\n  const fieldBlockProps: FieldBlockProps = {\n    forId: id,\n    className: cn,\n    disabled,\n    ...pickSpacingProps(props),\n  }\n\n  const suffix = help ? (\n    <HelpButton title={help.title}>{help.content}</HelpButton>\n  ) : undefined\n\n  const isOn = value === valueOn\n  const isOff = value === valueOff\n\n  useMemo(() => {\n    const text = isOn ? textOn : textOff\n    if (text) {\n      setDisplayValue(props.path, text)\n    }\n  }, [isOn, props.path, setDisplayValue, textOff, textOn])\n\n  switch (variant) {\n    default:\n    case 'checkbox':\n      return (\n        <FieldBlock {...fieldBlockProps} label={undefined}>\n          <Checkbox\n            id={id}\n            className={cn}\n            label={\n              label ??\n              (isOn\n                ? textOn ?? translations.yes\n                : textOff ?? translations.no)\n            }\n            checked={isOn}\n            disabled={disabled}\n            status={hasError ? 'error' : undefined}\n            suffix={suffix}\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            suffix={suffix}\n            value={value ? 'true' : 'false'}\n            on_change={handleCheckboxChange}\n            {...htmlAttributes}\n          />\n        </FieldBlock>\n      )\n    case 'buttons':\n      return (\n        <FieldBlock\n          {...fieldBlockProps}\n          asFieldset\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        >\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            suffix={suffix}\n            value={value ? 'true' : 'false'}\n            on_change={handleCheckboxChange}\n            {...htmlAttributes}\n          />\n        </FieldBlock>\n      )\n  }\n}\n\nToggle._supportsSpacingProps = true\nexport default Toggle\n"],"mappings":"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"}
+{"version":3,"file":"Toggle.js","names":["React","useCallback","useMemo","classnames","Checkbox","ToggleButton","ButtonRow","FieldBlock","useFieldProps","pickSpacingProps","ToggleButtonGroupContext","useTranslation","Toggle","props","translations","ToggleField","preparedProps","_objectSpread","errorMessages","id","className","valueOn","valueOff","variant","disabled","label","textOn","textOff","value","hasError","htmlAttributes","handleChange","setDisplayValue","handleCheckboxChange","checked","handleToggleChange","cn","fieldBlockProps","forId","isOn","isOff","text","path","createElement","_extends","undefined","yes","no","status","onChange","on_change","asFieldset","bottom","Provider","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Toggle/Toggle.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react'\nimport classnames from 'classnames'\nimport { Checkbox, ToggleButton } from '../../../../components'\nimport ButtonRow from '../../Form/ButtonRow'\nimport FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\nimport useTranslation from '../../hooks/useTranslation'\n\nexport type ToggleProps = {\n  valueOn: unknown\n  valueOff: unknown\n  variant?: 'checkbox' | 'checkbox-button' | 'button' | 'buttons'\n  textOn?: string\n  textOff?: string\n}\n\nexport type Props = Omit<FieldProps<unknown>, 'layout' | 'layoutOptions'> &\n  ToggleProps\n\nfunction Toggle(props: Props) {\n  const translations = useTranslation().ToggleField\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages: props.errorMessages,\n  }\n\n  const {\n    id,\n    className,\n    valueOn,\n    valueOff,\n    variant,\n    disabled,\n    label,\n    textOn,\n    textOff,\n    value,\n    hasError,\n    htmlAttributes,\n    handleChange,\n    setDisplayValue,\n  } = useFieldProps(preparedProps)\n\n  const handleCheckboxChange = useCallback(\n    ({ checked }) => {\n      handleChange?.(checked ? valueOn : valueOff)\n    },\n    [handleChange, valueOn, valueOff]\n  )\n  const handleToggleChange = useCallback(\n    ({ value }) => {\n      handleChange?.(value === 'on' ? valueOn : valueOff)\n    },\n    [handleChange, valueOn, valueOff]\n  )\n\n  const cn = classnames('dnb-forms-field-toggle', className)\n\n  const fieldBlockProps: FieldBlockProps = {\n    forId: id,\n    className: cn,\n    disabled,\n    ...pickSpacingProps(props),\n  }\n\n  const isOn = value === valueOn\n  const isOff = value === valueOff\n\n  useMemo(() => {\n    const text = isOn ? textOn : textOff\n    if (text) {\n      setDisplayValue(props.path, text)\n    }\n  }, [isOn, props.path, setDisplayValue, textOff, textOn])\n\n  switch (variant) {\n    default:\n    case 'checkbox':\n      return (\n        <FieldBlock {...fieldBlockProps} label={undefined}>\n          <Checkbox\n            id={id}\n            className={cn}\n            label={\n              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 {...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":";;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACnD,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,QAAQ,EAAEC,YAAY,QAAQ,wBAAwB;AAC/D,OAAOC,SAAS,MAAM,sBAAsB;AAC5C,OAAOC,UAAU,MAAoC,kBAAkB;AACvE,SAASC,aAAa,QAAQ,aAAa;AAE3C,SAASC,gBAAgB,QAAQ,mCAAmC;AACpE,OAAOC,wBAAwB,MAAM,+DAA+D;AACpG,OAAOC,cAAc,MAAM,4BAA4B;AAavD,SAASC,MAAMA,CAACC,KAAY,EAAE;EAC5B,MAAMC,YAAY,GAAGH,cAAc,CAAC,CAAC,CAACI,WAAW;EAEjD,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,OAAO;IACPC,QAAQ;IACRC,KAAK;IACLC,MAAM;IACNC,OAAO;IACPC,KAAK;IACLC,QAAQ;IACRC,cAAc;IACdC,YAAY;IACZC;EACF,CAAC,GAAGxB,aAAa,CAACQ,aAAa,CAAC;EAEhC,MAAMiB,oBAAoB,GAAGhC,WAAW,CACtC,CAAC;IAAEiC;EAAQ,CAAC,KAAK;IACfH,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAGG,OAAO,GAAGb,OAAO,GAAGC,QAAQ,CAAC;EAC9C,CAAC,EACD,CAACS,YAAY,EAAEV,OAAO,EAAEC,QAAQ,CAClC,CAAC;EACD,MAAMa,kBAAkB,GAAGlC,WAAW,CACpC,CAAC;IAAE2B;EAAM,CAAC,KAAK;IACbG,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAGH,KAAK,KAAK,IAAI,GAAGP,OAAO,GAAGC,QAAQ,CAAC;EACrD,CAAC,EACD,CAACS,YAAY,EAAEV,OAAO,EAAEC,QAAQ,CAClC,CAAC;EAED,MAAMc,EAAE,GAAGjC,UAAU,CAAC,wBAAwB,EAAEiB,SAAS,CAAC;EAE1D,MAAMiB,eAAgC,GAAApB,aAAA;IACpCqB,KAAK,EAAEnB,EAAE;IACTC,SAAS,EAAEgB,EAAE;IACbZ;EAAQ,GACLf,gBAAgB,CAACI,KAAK,CAAC,CAC3B;EAED,MAAM0B,IAAI,GAAGX,KAAK,KAAKP,OAAO;EAC9B,MAAMmB,KAAK,GAAGZ,KAAK,KAAKN,QAAQ;EAEhCpB,OAAO,CAAC,MAAM;IACZ,MAAMuC,IAAI,GAAGF,IAAI,GAAGb,MAAM,GAAGC,OAAO;IACpC,IAAIc,IAAI,EAAE;MACRT,eAAe,CAACnB,KAAK,CAAC6B,IAAI,EAAED,IAAI,CAAC;IACnC;EACF,CAAC,EAAE,CAACF,IAAI,EAAE1B,KAAK,CAAC6B,IAAI,EAAEV,eAAe,EAAEL,OAAO,EAAED,MAAM,CAAC,CAAC;EAExD,QAAQH,OAAO;IACb;IACA,KAAK,UAAU;MACb,OACEvB,KAAA,CAAA2C,aAAA,CAACpC,UAAU,EAAAqC,QAAA,KAAKP,eAAe;QAAEZ,KAAK,EAAEoB;MAAU,IAChD7C,KAAA,CAAA2C,aAAA,CAACvC,QAAQ,EAAAwC,QAAA;QACPzB,EAAE,EAAEA,EAAG;QACPC,SAAS,EAAEgB,EAAG;QACdX,KAAK,EACHA,KAAK,aAALA,KAAK,cAALA,KAAK,GACJc,IAAI,GACDb,MAAM,aAANA,MAAM,cAANA,MAAM,GAAIZ,YAAY,CAACgC,GAAG,GAC1BnB,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAIb,YAAY,CAACiC,EAC7B;QACDb,OAAO,EAAEK,IAAK;QACdf,QAAQ,EAAEA,QAAS;QACnBwB,MAAM,EAAEnB,QAAQ,GAAG,OAAO,GAAGgB,SAAU;QACvCI,QAAQ,EAAEhB;MAAqB,GAC3BH,cAAc,CACnB,CACS,CAAC;IAEjB,KAAK,QAAQ;MACX,OACE9B,KAAA,CAAA2C,aAAA,CAACpC,UAAU,EAAK8B,eAAe,EAC7BrC,KAAA,CAAA2C,aAAA,CAACtC,YAAY,EAAAuC,QAAA;QACXzB,EAAE,EAAEA,EAAG;QACPsB,IAAI,EACFF,IAAI,GACAb,MAAM,aAANA,MAAM,cAANA,MAAM,GAAIZ,YAAY,CAACgC,GAAG,GAC1BnB,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAIb,YAAY,CAACiC,EAC7B;QACDb,OAAO,EAAEK,IAAK;QACdf,QAAQ,EAAEA,QAAS;QACnBwB,MAAM,EAAEnB,QAAQ,GAAG,OAAO,GAAGgB,SAAU;QACvCjB,KAAK,EAAEA,KAAK,GAAG,MAAM,GAAG,OAAQ;QAChCsB,SAAS,EAAEjB;MAAqB,GAC5BH,cAAc,CACnB,CACS,CAAC;IAEjB,KAAK,SAAS;MACZ,OACE9B,KAAA,CAAA2C,aAAA,CAACpC,UAAU,EAAAqC,QAAA,KAAKP,eAAe;QAAEc,UAAU;MAAA,IACzCnD,KAAA,CAAA2C,aAAA,CAACrC,SAAS;QAAC8C,MAAM,EAAC;MAAS,GACzBpD,KAAA,CAAA2C,aAAA,CAACjC,wBAAwB,CAAC2C,QAAQ;QAChCzB,KAAK,EAAE;UACLA,KAAK,EAAEW,IAAI,GAAG,IAAI,GAAGC,KAAK,GAAG,KAAK,GAAG,IAAI;UACzCS,QAAQ,EAAEd,kBAAkB;UAC5Ba,MAAM,EAAEnB,QAAQ,GAAG,OAAO,GAAGgB,SAAS;UACtCrB;QACF;MAAE,GAEFxB,KAAA,CAAA2C,aAAA,CAACtC,YAAY,EAAAuC,QAAA;QACXH,IAAI,EAAEf,MAAM,aAANA,MAAM,cAANA,MAAM,GAAIZ,YAAY,CAACgC,GAAI;QACjClB,KAAK,EAAC;MAAI,GACNE,cAAc,CACnB,CAAC,EACF9B,KAAA,CAAA2C,aAAA,CAACtC,YAAY,EAAAuC,QAAA;QACXH,IAAI,EAAEd,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAIb,YAAY,CAACiC,EAAG;QACjCnB,KAAK,EAAC;MAAK,GACPE,cAAc,CACnB,CACgC,CAC1B,CACD,CAAC;IAEjB,KAAK,iBAAiB;MACpB,OACE9B,KAAA,CAAA2C,aAAA,CAACpC,UAAU,EAAK8B,eAAe,EAC7BrC,KAAA,CAAA2C,aAAA,CAACtC,YAAY,EAAAuC,QAAA;QACXzB,EAAE,EAAEA,EAAG;QACPI,OAAO,EAAC,UAAU;QAClBkB,IAAI,EACFF,IAAI,GACAb,MAAM,aAANA,MAAM,cAANA,MAAM,GAAIZ,YAAY,CAACgC,GAAG,GAC1BnB,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAIb,YAAY,CAACiC,EAC7B;QACDb,OAAO,EAAEK,IAAK;QACdf,QAAQ,EAAEA,QAAS;QACnBwB,MAAM,EAAEnB,QAAQ,GAAG,OAAO,GAAGgB,SAAU;QACvCjB,KAAK,EAAEA,KAAK,GAAG,MAAM,GAAG,OAAQ;QAChCsB,SAAS,EAAEjB;MAAqB,GAC5BH,cAAc,CACnB,CACS,CAAC;EAEnB;AACF;AAEAlB,MAAM,CAAC0C,qBAAqB,GAAG,IAAI;AACnC,eAAe1C,MAAM"}

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

@@ -23,11 +23,6 @@ export const ToggleProperties = {
     doc: 'Choice of input feature. Can be: `checkbox`, `button`, `checkbox-button` or `buttons`.',
     type: 'string',
     status: 'optional'
-  },
-  help: {
-    doc: 'Provide a help button. Object consisting of `title` and `content`.',
-    type: 'object',
-    status: 'optional'
   }
 };
 //# sourceMappingURL=ToggleDocs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ToggleDocs.js","names":["ToggleProperties","valueOn","doc","type","status","valueOff","textOn","textOff","variant","help"],"sources":["../../../../../../src/extensions/forms/Field/Toggle/ToggleDocs.tsx"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const ToggleProperties: PropertiesTableProps = {\n  valueOn: {\n    doc: 'Source data value when the toggle is in the \"on-state\" (varies based on UI variant).',\n    type: ['string', 'number', 'boolean'],\n    status: 'required',\n  },\n  valueOff: {\n    doc: 'Source data value when the toggle is in the \"off-state\".',\n    type: ['string', 'number', 'boolean'],\n    status: 'required',\n  },\n  textOn: {\n    doc: 'Text to show in the UI when in the \"on-state\".',\n    type: 'string',\n    status: 'optional',\n  },\n  textOff: {\n    doc: 'Text to show in the UI when in the \"off-state\".',\n    type: 'string',\n    status: 'optional',\n  },\n  variant: {\n    doc: 'Choice of input feature. Can be: `checkbox`, `button`, `checkbox-button` or `buttons`.',\n    type: 'string',\n    status: 'optional',\n  },\n  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,gBAAsC,GAAG;EACpDC,OAAO,EAAE;IACPC,GAAG,EAAE,sFAAsF;IAC3FC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC;IACrCC,MAAM,EAAE;EACV,CAAC;EACDC,QAAQ,EAAE;IACRH,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC;IACrCC,MAAM,EAAE;EACV,CAAC;EACDE,MAAM,EAAE;IACNJ,GAAG,EAAE,gDAAgD;IACrDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,OAAO,EAAE;IACPL,GAAG,EAAE,iDAAiD;IACtDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,OAAO,EAAE;IACPN,GAAG,EAAE,wFAAwF;IAC7FC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,IAAI,EAAE;IACJP,GAAG,EAAE,oEAAoE;IACzEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV;AACF,CAAC"}
+{"version":3,"file":"ToggleDocs.js","names":["ToggleProperties","valueOn","doc","type","status","valueOff","textOn","textOff","variant"],"sources":["../../../../../../src/extensions/forms/Field/Toggle/ToggleDocs.tsx"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const ToggleProperties: PropertiesTableProps = {\n  valueOn: {\n    doc: 'Source data value when the toggle is in the \"on-state\" (varies based on UI variant).',\n    type: ['string', 'number', 'boolean'],\n    status: 'required',\n  },\n  valueOff: {\n    doc: 'Source data value when the toggle is in the \"off-state\".',\n    type: ['string', 'number', 'boolean'],\n    status: 'required',\n  },\n  textOn: {\n    doc: 'Text to show in the UI when in the \"on-state\".',\n    type: 'string',\n    status: 'optional',\n  },\n  textOff: {\n    doc: 'Text to show in the UI when in the \"off-state\".',\n    type: 'string',\n    status: 'optional',\n  },\n  variant: {\n    doc: 'Choice of input feature. Can be: `checkbox`, `button`, `checkbox-button` or `buttons`.',\n    type: 'string',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,gBAAsC,GAAG;EACpDC,OAAO,EAAE;IACPC,GAAG,EAAE,sFAAsF;IAC3FC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC;IACrCC,MAAM,EAAE;EACV,CAAC;EACDC,QAAQ,EAAE;IACRH,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC;IACrCC,MAAM,EAAE;EACV,CAAC;EACDE,MAAM,EAAE;IACNJ,GAAG,EAAE,gDAAgD;IACrDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,OAAO,EAAE;IACPL,GAAG,EAAE,iDAAiD;IACtDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,OAAO,EAAE;IACPN,GAAG,EAAE,wFAAwF;IAC7FC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV;AACF,CAAC"}

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

@@ -1,11 +1,13 @@
 import { FieldBlockWidth } from '../../FieldBlock';
-import { FieldHelpProps, FieldProps } from '../../types';
+import { FieldProps } from '../../types';
 import { UploadFile, UploadFileNative, UploadProps } from '../../../../components/Upload';
 import { SpacingProps } from '../../../../shared/types';
 export type UploadValue = Array<UploadFile | UploadFileNative>;
-export type Props = FieldHelpProps & Omit<FieldProps<UploadValue, UploadValue | undefined>, 'name'> & SpacingProps & {
+export type Props = Omit<FieldProps<UploadValue, UploadValue | undefined>, 'name'> & SpacingProps & {
     width?: Omit<FieldBlockWidth, 'medium' | 'small'>;
-} & Pick<Partial<UploadProps>, 'title' | 'text' | 'acceptedFileTypes' | 'filesAmountLimit' | 'fileMaxSize' | 'onFileDelete' | 'skeleton'>;
+} & Pick<Partial<UploadProps>, 'title' | 'text' | 'acceptedFileTypes' | 'filesAmountLimit' | 'fileMaxSize' | 'onFileDelete' | 'skeleton'> & {
+    asyncFileHandler?: (newFiles: UploadValue) => Promise<UploadValue>;
+};
 declare function UploadComponent(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace UploadComponent {
     var _supportsSpacingProps: boolean;

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

@@ -3,33 +3,40 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-const _excluded = ["id", "className", "width", "value", "label", "labelDescription", "help", "htmlAttributes", "handleChange", "handleFocus", "handleBlur"];
+const _excluded = ["id", "className", "width", "value", "label", "labelDescription", "help", "htmlAttributes", "handleChange", "handleFocus", "handleBlur", "asyncFileHandler"];
 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, useEffect, useMemo } from 'react';
+import classnames from 'classnames';
 import FieldBlock from '../../FieldBlock';
 import { useFieldProps, useTranslation as useFormsTranslation } from '../../hooks';
 import Upload from '../../../../components/Upload';
 import useUpload from '../../../../components/upload/useUpload';
 import { pickSpacingProps } from '../../../../components/flex/utils';
-import { HelpButton } from '../../../../components';
+import HelpButtonInline, { HelpButtonInlineContent } from '../../../../components/help-button/HelpButtonInline';
 import { useTranslation as useSharedTranslation } from '../../../../shared';
 import { FormError } from '../../utils';
+const validateRequired = (value, {
+  required,
+  isChanged,
+  error
+}) => {
+  const hasError = value === null || value === void 0 ? void 0 : value.some(file => file.errorMessage);
+  if (hasError) {
+    return new FormError('Upload.errorInvalidFiles');
+  }
+  const hasFiles = (value === null || value === void 0 ? void 0 : value.length) > 0;
+  if (required && (!isChanged && !hasFiles || !hasFiles)) {
+    return error;
+  }
+  return undefined;
+};
+const updateFileLoadingState = (files, isLoading) => {
+  return files.map(file => _objectSpread(_objectSpread({}, file), {}, {
+    isLoading
+  }));
+};
 function UploadComponent(props) {
-  const validateRequired = useCallback((value, {
-    required,
-    isChanged,
-    error
-  }) => {
-    const hasError = value === null || value === void 0 ? void 0 : value.some(file => file.errorMessage);
-    if (hasError) {
-      return new FormError('Upload.errorInvalidFiles');
-    }
-    if (required && (!isChanged || !(value.length > 0))) {
-      return error;
-    }
-    return undefined;
-  }, []);
   const sharedTr = useSharedTranslation().Upload;
   const formsTr = useFormsTranslation().Upload;
   const errorMessages = useMemo(() => ({
@@ -53,7 +60,8 @@ function UploadComponent(props) {
       htmlAttributes,
       handleChange,
       handleFocus,
-      handleBlur
+      handleBlur,
+      asyncFileHandler
     } = _useFieldProps,
     rest = _objectWithoutProperties(_useFieldProps, _excluded);
   const {
@@ -66,25 +74,42 @@ function UploadComponent(props) {
     onFileDelete
   } = rest;
   const {
+    files: fileContext,
     setFiles
   } = useUpload(id);
   useEffect(() => {
     setFiles(value);
-  }, [handleBlur, setFiles, value]);
+  }, [setFiles, value]);
+  const handleChangeAsync = useCallback(async files => {
+    const existingFileIds = (fileContext === null || fileContext === void 0 ? void 0 : fileContext.map(file => file.id)) || [];
+    const newFiles = files.filter(file => !existingFileIds.includes(file.id));
+    if (newFiles.length > 0) {
+      setFiles([...fileContext, ...updateFileLoadingState(newFiles, true)]);
+      const uploadedFiles = updateFileLoadingState(await asyncFileHandler(newFiles), false);
+      handleChange([...fileContext, ...uploadedFiles]);
+    } else {
+      handleChange(files);
+    }
+  }, [fileContext, asyncFileHandler, setFiles, updateFileLoadingState]);
   const changeHandler = useCallback(({
     files
   }) => {
     handleBlur();
     handleFocus();
-    handleChange(files);
-  }, [handleBlur, handleChange, handleFocus]);
+    if (asyncFileHandler) {
+      handleChangeAsync(files);
+    } else {
+      handleChange(files);
+    }
+  }, [handleBlur, handleChange, handleFocus, asyncFileHandler, fileContext]);
   const width = widthProp;
   const fieldBlockProps = _objectSpread({
     id,
-    forId: id,
+    forId: `${id}-input`,
     labelSrOnly: true,
-    className,
-    width
+    className: classnames('dnb-forms-field-upload', className),
+    width,
+    help: undefined
   }, pickSpacingProps(props));
   return React.createElement(FieldBlock, fieldBlockProps, React.createElement(Upload, _extends({
     id: id,
@@ -95,11 +120,15 @@ function UploadComponent(props) {
     onChange: changeHandler,
     onFileDelete: onFileDelete,
     title: label !== null && label !== void 0 ? label : title,
-    text: help ? React.createElement(React.Fragment, null, labelDescription !== null && labelDescription !== void 0 ? labelDescription : text, React.createElement(HelpButton, {
+    text: help ? React.createElement(React.Fragment, null, labelDescription !== null && labelDescription !== void 0 ? labelDescription : text, React.createElement(HelpButtonInline, {
+      contentId: `${id}-help`,
       left: text ? 'x-small' : false,
-      title: help.title
-    }, help.content)) : labelDescription !== null && labelDescription !== void 0 ? labelDescription : text
-  }, htmlAttributes)));
+      help: help
+    })) : labelDescription !== null && labelDescription !== void 0 ? labelDescription : text
+  }, htmlAttributes), help && React.createElement(HelpButtonInlineContent, {
+    contentId: `${id}-help`,
+    help: help
+  })));
 }
 export default UploadComponent;
 UploadComponent._supportsSpacingProps = true;