npm - @dnb/eufemia - Versions diffs - 10.55.0 → 10.56.0 - Mend

@dnb/eufemia 10.55.0 → 10.56.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (939) hide show

package/extensions/forms/Field/Selection/Selection.js CHANGED Viewed

@@ -7,21 +7,22 @@ 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, { useMemo, useCallback } from 'react';
 import classnames from 'classnames';
-import { makeUniqueId } from '../../../../shared/component-helper';
-import { ToggleButton, Dropdown, Radio, HelpButton, Autocomplete } from '../../../../components';
+import { convertJsxToString, makeUniqueId } from '../../../../shared/component-helper';
+import { ToggleButton, Dropdown, Radio, Autocomplete, HelpButton } from '../../../../components';
 import OptionField from '../Option';
 import { useFieldProps } from '../../hooks';
+import { checkForError } from '../../hooks/useFieldProps';
 import { pickSpacingProps } from '../../../../components/flex/utils';
 import FieldBlock from '../../FieldBlock';
 import { convertCamelCaseProps } from '../../../../shared/helpers/withCamelCaseProps';
 import useDataValue from '../../hooks/useDataValue';
-import { FormError } from '../../utils';
 function Selection(props) {
   const clearValue = useMemo(() => `clear-option-${makeUniqueId()}`, []);
   const {
     id,
     className,
     variant = 'dropdown',
+    layout = 'vertical',
     optionsLayout = 'vertical',
     placeholder,
     path,
@@ -31,7 +32,6 @@ function Selection(props) {
     error,
     hasError,
     disabled,
-    help,
     emptyValue,
     width = 'large',
     htmlAttributes,
@@ -76,7 +76,7 @@ function Selection(props) {
     } = _ref4;
     setHasFocus(false, data === null || data === void 0 ? void 0 : data.selectedKey);
   }, [setHasFocus]);
-  const cn = classnames(`dnb-forms-field-selection dnb-forms-field-selection__variant--${variant} dnb-forms-field-selection__options-layout--${optionsLayout}`, className);
+  const cn = classnames(`dnb-forms-field-selection dnb-forms-field-selection__variant--${variant} dnb-forms-field-selection--layout-${layout} dnb-forms-field-selection--options-layout--${optionsLayout}`, className);
   const fieldBlockProps = _objectSpread({
     forId: id,
     className: cn,
@@ -122,7 +122,6 @@ function Selection(props) {
     case 'dropdown':
       {
         var _data$find;
-        const status = getStatus(error, info, warning);
         const data = renderDropdownItems(dataList).concat(makeOptions(children)).filter(Boolean);
         const displayValue = (_data$find = data.find(item => item.selectedKey === value)) === null || _data$find === void 0 ? void 0 : _data$find.content;
         setDisplayValue(path, displayValue);
@@ -132,28 +131,26 @@ function Selection(props) {
           portal_class: 'dnb-forms-field-selection__portal',
           title: placeholder,
           value: String(value !== null && value !== void 0 ? value : ''),
-          status: (hasError || status) && 'error',
+          status: (hasError || checkForError([error, info, warning])) && 'error',
           disabled
         }, htmlAttributes), {}, {
           data,
-          suffix: help ? React.createElement(HelpButton, {
-            title: help.title
-          }, help.content) : undefined,
           on_change: handleDropdownChange,
           on_show: handleShow,
           on_hide: handleHide,
           stretch: true
         });
-        return React.createElement(FieldBlock, _extends({}, fieldBlockProps, {
-          width: width
-        }), variant === 'autocomplete' ? React.createElement(Autocomplete, _extends({}, sharedProps, autocompleteProps ? convertCamelCaseProps(autocompleteProps) : null)) : React.createElement(Dropdown, _extends({}, sharedProps, dropdownProps ? convertCamelCaseProps(dropdownProps) : null)));
+        const specificFieldBlockProps = {
+          width
+        };
+        if (layout === 'horizontal') {
+          specificFieldBlockProps.width = undefined;
+          specificFieldBlockProps.contentWidth = width;
+        }
+        return React.createElement(FieldBlock, _extends({}, fieldBlockProps, specificFieldBlockProps), variant === 'autocomplete' ? React.createElement(Autocomplete, _extends({}, sharedProps, autocompleteProps ? convertCamelCaseProps(autocompleteProps) : null)) : React.createElement(Dropdown, _extends({}, sharedProps, dropdownProps ? convertCamelCaseProps(dropdownProps) : null)));
       }
   }
 }
-export function getStatus(error, info, warning) {
-  var _error$message;
-  return (_error$message = error === null || error === void 0 ? void 0 : error.message) !== null && _error$message !== void 0 ? _error$message : warning instanceof Error && warning.message || warning instanceof FormError && warning.message || (warning === null || warning === void 0 ? void 0 : warning.toString()) || info instanceof Error && info.message || info instanceof FormError && info.message || (info === null || info === void 0 ? void 0 : info.toString());
-}
 function renderRadioItems(_ref6) {
   let {
     id,
@@ -179,10 +176,9 @@ function renderRadioItems(_ref6) {
       } = props,
       rest = _objectWithoutProperties(props, _excluded);
     const label = title !== null && title !== void 0 ? title : children;
-    const status = getStatus(error, info, warning);
     const suffix = help ? React.createElement(HelpButton, {
       size: "small",
-      title: help.title
+      title: convertJsxToString(help.title)
     }, help.content) : undefined;
     iterateOverItems === null || iterateOverItems === void 0 ? void 0 : iterateOverItems({
       value,
@@ -195,7 +191,7 @@ function renderRadioItems(_ref6) {
       label: variant === 'radio' ? label : undefined,
       text: variant === 'button' ? label : undefined,
       value: String((_ref7 = value !== null && value !== void 0 ? value : valueProp) !== null && _ref7 !== void 0 ? _ref7 : ''),
-      status: (hasError || status) && 'error',
+      status: (hasError || checkForError([error, info, warning])) && 'error',
       suffix: suffix
     }, htmlAttributes, rest));
   };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Selection.js","names":["React","useMemo","useCallback","classnames","makeUniqueId","ToggleButton","Dropdown","Radio","HelpButton","Autocomplete","OptionField","useFieldProps","pickSpacingProps","FieldBlock","convertCamelCaseProps","useDataValue","FormError","Selection","props","clearValue","id","className","variant","optionsLayout","placeholder","path","value","info","warning","error","hasError","disabled","help","emptyValue","width","htmlAttributes","setHasFocus","handleChange","setDisplayValue","data","dataPath","children","autocompleteProps","dropdownProps","getValueByPath","dataList","handleDropdownChange","_ref","selectedKey","onChangeHandler","_ref2","undefined","handleShow","_ref3","handleHide","_ref4","cn","fieldBlockProps","_objectSpread","forId","disableStatusSummary","Component","items","renderRadioItems","iterateOverItems","_ref5","v","label","createElement","_extends","labelHeight","asFieldset","Children","count","Group","layout_direction","on_change","String","_data$find","status","getStatus","renderDropdownItems","concat","makeOptions","filter","Boolean","displayValue","find","item","content","sharedProps","list_class","portal_class","title","suffix","on_show","on_hide","stretch","_error$message","message","Error","toString","_ref6","valueProp","optionsCount","length","createOption","i","_ref7","rest","_objectWithoutProperties","_excluded","size","key","text","map","mapOptions","_ref8","child","isValidElement","type","nestedChildren","cloneElement","_child","_child$props","_child$props$children","_ref9","_props$children","_props$value","_em","_ref10","_em2","_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, { Props as OptionFieldProps } from '../Option'\nimport { useFieldProps } from '../../hooks'\nimport { ReturnAdditional } from '../../hooks/useFieldProps'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport FieldBlock, {\n Props as FieldBlockProps,\n FieldBlockWidth,\n} from '../../FieldBlock'\nimport { FieldProps, FieldHelpProps, Path } from '../../types'\nimport type { FormStatusText } from '../../../../components/FormStatus'\nimport type { AutocompleteAllProps } from '../../../../components/Autocomplete'\nimport type { DropdownAllProps } from '../../../../components/Dropdown'\nimport { HelpButtonProps } from '../../../../components/HelpButton'\nimport { DrawerListProps } from '../../../../fragments/DrawerList'\nimport {\n convertCamelCaseProps,\n ToCamelCase,\n} from '../../../../shared/helpers/withCamelCaseProps'\nimport useDataValue from '../../hooks/useDataValue'\nimport { FormError } from '../../utils'\n\ntype IOption = {\n title: string \| React.ReactNode\n value: number \| string\n status: FormStatusText\n}\nexport type Data = Array<{\n value: string\n title: React.ReactNode\n text?: React.ReactNode\n}>\n\nexport type Props = FieldHelpProps &\n FieldProps<IOption['value']> & {\n /*\n Defines the variant of the component.\n * Default: dropdown\n /\n variant?: 'dropdown' \| 'autocomplete' \| 'radio' \| 'button'\n\n /\n The width of the component.\n * Default: large\n /\n width?: FieldBlockWidth\n\n /\n Defines the layout of the options for radio and button variants.\n /\n optionsLayout?: 'horizontal' \| 'vertical'\n\n /\n The path to the context data (Form.Handler).\n * The context data object needs to have a `value` and a `title` property.\n /\n dataPath?: Path\n\n /\n Data to be used for the component. The object needs to have a `value` and a `title` property.\n * The generated options will be placed above given JSX based children.\n /\n data?: Data\n\n /\n Autocomplete specific props\n /\n autocompleteProps?: ToCamelCase<AutocompleteAllProps>\n\n /\n Dropdown specific props\n /\n dropdownProps?: ToCamelCase<DropdownAllProps>\n\n /\n The content of the component.\n */\n children?: React.ReactNode\n }\n\nfunction Selection(props: Props) {\n const clearValue = useMemo(() => `clear-option-${makeUniqueId()}`, [])\n\n const {\n id,\n className,\n variant = 'dropdown',\n optionsLayout = 'vertical',\n placeholder,\n path,\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 setDisplayValue,\n data,\n dataPath,\n children,\n\n // - Autocomplete and Dropdown specific props\n autocompleteProps,\n dropdownProps,\n } = useFieldProps(props)\n\n const { getValueByPath } = useDataValue()\n let dataList = data\n if (dataPath) {\n dataList = getValueByPath(dataPath)\n }\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 fieldBlockProps: FieldBlockProps = {\n forId: id,\n className: cn,\n disableStatusSummary: true,\n ...pickSpacingProps(props),\n }\n\n switch (variant) {\n case 'radio':\n case 'button': {\n const Component = (\n variant === 'radio' ? Radio : ToggleButton\n ) as typeof Radio & typeof ToggleButton\n\n const items = renderRadioItems({\n id,\n value,\n variant,\n info,\n warning,\n htmlAttributes,\n children,\n dataList,\n hasError,\n iterateOverItems: ({ value: v, label }) => {\n if (v === value) {\n setDisplayValue(path, label)\n }\n },\n })\n\n return (\n <FieldBlock\n {...fieldBlockProps}\n labelHeight=\"small\"\n asFieldset={React.Children.count(items) > 1}\n >\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 {items}\n </Component.Group>\n </FieldBlock>\n )\n }\n\n case 'autocomplete':\n case 'dropdown': {\n const status = getStatus(error, info, warning)\n const data = renderDropdownItems(dataList)\n .concat(makeOptions(children))\n .filter(Boolean)\n const displayValue = data.find((item) => item.selectedKey === value)\n ?.content\n setDisplayValue(path, displayValue)\n\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,\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\nexport function getStatus(\n error: Error \| FormError \| undefined,\n info: React.ReactNode,\n warning: React.ReactNode\n) {\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\ntype OptionProps = React.ComponentProps<\n React.FC<{\n value?: Props['value']\n error?: Error \| FormError \| undefined\n title: React.ReactNode\n help?: HelpButtonProps\n children?: React.ReactNode\n }>\n>\n\nfunction renderRadioItems({\n id,\n value: valueProp,\n variant,\n info,\n warning,\n htmlAttributes,\n children,\n dataList,\n hasError,\n iterateOverItems,\n}: {\n id: string\n value: Props['value']\n variant: Props['variant']\n info: Props['info']\n warning: Props['warning']\n htmlAttributes: Props['htmlAttributes']\n children: Props['children']\n dataList: Data\n hasError: ReturnAdditional<Props['value']>['hasError']\n iterateOverItems?: (item: {\n value: Props['value']\n label: Props['children']\n }) => void\n}) {\n const optionsCount =\n React.Children.count(children) + (dataList?.length \|\| 0)\n\n const createOption = (props: OptionProps, i: number) => {\n const { value, title, children, error, help, ...rest } = props\n\n const label = title ?? children\n const status = getStatus(error, info, warning)\n const suffix = help ? (\n <HelpButton size=\"small\" title={help.title}>\n {help.content}\n </HelpButton>\n ) : undefined\n\n iterateOverItems?.({ value, label })\n\n const Component = (\n variant === 'radio' ? Radio : ToggleButton\n ) as typeof Radio & typeof ToggleButton\n\n return (\n <Component\n id={optionsCount === 1 ? id : undefined}\n key={`option-${i}-${id}`}\n label={variant === 'radio' ? label : undefined}\n text={variant === 'button' ? label : undefined}\n value={String(value ?? valueProp ?? '')}\n status={(hasError \|\| status) && 'error'}\n suffix={suffix}\n {...htmlAttributes}\n {...rest}\n />\n )\n }\n\n return [\n ...(dataList \|\| []).map((props, i) => {\n return createOption(props, i)\n }),\n ...(mapOptions(children, { createOption }) \|\| []),\n ].filter(Boolean)\n}\n\nexport function mapOptions(children: React.ReactNode, { createOption }) {\n return React.Children.map(\n children,\n (child: React.ReactElement<OptionProps>, i) => {\n if (React.isValidElement(child)) {\n if (child.type === OptionField) {\n return createOption(child.props, i)\n }\n\n if (child.props.children) {\n const nestedChildren = mapOptions(child.props.children, {\n createOption,\n })\n return React.cloneElement(child, child.props, nestedChildren)\n }\n }\n\n return child\n }\n )\n}\n\nexport function makeOptions<T = DrawerListProps['data']>(\n children: React.ReactNode\n): T {\n return React.Children.map(children, (child) => {\n if (child?.['props']?.children?.type === OptionField) {\n child = child['props'].children\n }\n\n if (React.isValidElement(child) && child.type === OptionField) {\n const props = child.props as OptionFieldProps\n const title = props.children ?? props.title ?? <em>Untitled</em>\n const content = props.text ? [title, props.text] : title\n const selectedKey = String(props.value ?? '')\n\n return { selectedKey, content }\n }\n\n // For other children, just show them as content\n if (child) {\n return {\n content: child,\n }\n }\n }) as T\n}\n\nfunction renderDropdownItems(data: Data) {\n return (\n data?.map(({ value, title, text }) => {\n return {\n selectedKey: value,\n content: (text ? [title, text] : title) \|\| <em>Untitled</em>,\n }\n }) \|\| []\n )\n}\n\nSelection._supportsSpacingProps = true\nexport default Selection\n"],"mappings":"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"}
1	+ {"version":3,"file":"Selection.js","names":["React","useMemo","useCallback","classnames","convertJsxToString","makeUniqueId","ToggleButton","Dropdown","Radio","Autocomplete","HelpButton","OptionField","useFieldProps","checkForError","pickSpacingProps","FieldBlock","convertCamelCaseProps","useDataValue","Selection","props","clearValue","id","className","variant","layout","optionsLayout","placeholder","path","value","info","warning","error","hasError","disabled","emptyValue","width","htmlAttributes","setHasFocus","handleChange","setDisplayValue","data","dataPath","children","autocompleteProps","dropdownProps","getValueByPath","dataList","handleDropdownChange","_ref","selectedKey","onChangeHandler","_ref2","undefined","handleShow","_ref3","handleHide","_ref4","cn","fieldBlockProps","_objectSpread","forId","disableStatusSummary","Component","items","renderRadioItems","iterateOverItems","_ref5","v","label","createElement","_extends","labelHeight","asFieldset","Children","count","Group","layout_direction","on_change","String","_data$find","renderDropdownItems","concat","makeOptions","filter","Boolean","displayValue","find","item","content","sharedProps","list_class","portal_class","title","status","on_show","on_hide","stretch","specificFieldBlockProps","contentWidth","_ref6","valueProp","optionsCount","length","createOption","i","_ref7","help","rest","_objectWithoutProperties","_excluded","suffix","size","key","text","map","mapOptions","_ref8","child","isValidElement","type","nestedChildren","cloneElement","_child","_child$props","_child$props$children","_ref9","_props$children","_props$value","_em","_ref10","_em2","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Selection/Selection.tsx"],"sourcesContent":["import React, { useMemo, useCallback } from 'react'\nimport classnames from 'classnames'\nimport {\n convertJsxToString,\n makeUniqueId,\n} from '../../../../shared/component-helper'\nimport {\n ToggleButton,\n Dropdown,\n Radio,\n Autocomplete,\n HelpButton,\n} from '../../../../components'\nimport OptionField, { Props as OptionFieldProps } from '../Option'\nimport { useFieldProps } from '../../hooks'\nimport { checkForError, ReturnAdditional } from '../../hooks/useFieldProps'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport FieldBlock, {\n Props as FieldBlockProps,\n FieldBlockWidth,\n} from '../../FieldBlock'\nimport { FieldProps, Path } from '../../types'\nimport type { FormStatusText } from '../../../../components/FormStatus'\nimport type { AutocompleteAllProps } from '../../../../components/Autocomplete'\nimport type { DropdownAllProps } from '../../../../components/Dropdown'\nimport { HelpProps } from '../../../../components/help-button/HelpButtonInline'\nimport { DrawerListProps } from '../../../../fragments/DrawerList'\nimport {\n convertCamelCaseProps,\n ToCamelCase,\n} from '../../../../shared/helpers/withCamelCaseProps'\nimport useDataValue from '../../hooks/useDataValue'\nimport { FormError } from '../../utils'\n\ntype IOption = {\n title: string \| React.ReactNode\n value: number \| string\n status: FormStatusText\n}\nexport type Data = Array<{\n value: string\n title: React.ReactNode\n text?: React.ReactNode\n}>\n\nexport type Props = FieldProps<IOption['value']> & {\n /*\n Defines the variant of the component.\n * Default: dropdown\n /\n variant?: 'dropdown' \| 'autocomplete' \| 'radio' \| 'button'\n\n /\n The width of the component.\n * Default: large\n /\n width?: FieldBlockWidth\n\n /\n Defines the layout of the options for radio and button variants.\n /\n optionsLayout?: 'horizontal' \| 'vertical'\n\n /\n The path to the context data (Form.Handler).\n * The context data object needs to have a `value` and a `title` property.\n /\n dataPath?: Path\n\n /\n Data to be used for the component. The object needs to have a `value` and a `title` property.\n * The generated options will be placed above given JSX based children.\n /\n data?: Data\n\n /\n Autocomplete specific props\n /\n autocompleteProps?: ToCamelCase<AutocompleteAllProps>\n\n /\n Dropdown specific props\n /\n dropdownProps?: ToCamelCase<DropdownAllProps>\n\n /\n The content of the component.\n */\n children?: React.ReactNode\n}\n\nfunction Selection(props: Props) {\n const clearValue = useMemo(() => `clear-option-${makeUniqueId()}`, [])\n\n const {\n id,\n className,\n variant = 'dropdown',\n layout = 'vertical',\n optionsLayout = 'vertical',\n placeholder,\n path,\n value,\n info,\n warning,\n error,\n hasError,\n disabled,\n emptyValue,\n width = 'large',\n htmlAttributes,\n setHasFocus,\n handleChange,\n setDisplayValue,\n data,\n dataPath,\n children,\n\n // - Autocomplete and Dropdown specific props\n autocompleteProps,\n dropdownProps,\n } = useFieldProps(props)\n\n const { getValueByPath } = useDataValue()\n let dataList = data\n if (dataPath) {\n dataList = getValueByPath(dataPath)\n }\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--layout-${layout}`,\n `dnb-forms-field-selection--options-layout--${optionsLayout}`,\n className\n )\n\n const fieldBlockProps: FieldBlockProps = {\n forId: id,\n className: cn,\n disableStatusSummary: true,\n ...pickSpacingProps(props),\n }\n\n switch (variant) {\n case 'radio':\n case 'button': {\n const Component = (\n variant === 'radio' ? Radio : ToggleButton\n ) as typeof Radio & typeof ToggleButton\n\n const items = renderRadioItems({\n id,\n value,\n variant,\n info,\n warning,\n htmlAttributes,\n children,\n dataList,\n hasError,\n iterateOverItems: ({ value: v, label }) => {\n if (v === value) {\n setDisplayValue(path, label)\n }\n },\n })\n\n return (\n <FieldBlock\n {...fieldBlockProps}\n labelHeight=\"small\"\n asFieldset={React.Children.count(items) > 1}\n >\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 {items}\n </Component.Group>\n </FieldBlock>\n )\n }\n\n case 'autocomplete':\n case 'dropdown': {\n const data = renderDropdownItems(dataList)\n .concat(makeOptions(children))\n .filter(Boolean)\n const displayValue = data.find((item) => item.selectedKey === value)\n ?.content\n setDisplayValue(path, displayValue)\n\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:\n (hasError \|\| checkForError([error, info, warning])) && 'error',\n disabled,\n ...htmlAttributes,\n data,\n on_change: handleDropdownChange,\n on_show: handleShow,\n on_hide: handleHide,\n stretch: true,\n }\n\n const specificFieldBlockProps: FieldBlockProps = {\n width,\n }\n if (layout === 'horizontal') {\n specificFieldBlockProps.width = undefined\n specificFieldBlockProps.contentWidth = width\n }\n\n return (\n <FieldBlock {...fieldBlockProps} {...specificFieldBlockProps}>\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\ntype OptionProps = React.ComponentProps<\n React.FC<{\n value: Props['value']\n error: Error \| FormError \| undefined\n help: HelpProps\n title: React.ReactNode\n children: React.ReactNode\n }>\n>\n\nfunction renderRadioItems({\n id,\n value: valueProp,\n variant,\n info,\n warning,\n htmlAttributes,\n children,\n dataList,\n hasError,\n iterateOverItems,\n}: {\n id: string\n value: Props['value']\n variant: Props['variant']\n info: Props['info']\n warning: Props['warning']\n htmlAttributes: Props['htmlAttributes']\n children: Props['children']\n dataList: Data\n hasError: ReturnAdditional<Props['value']>['hasError']\n iterateOverItems?: (item: {\n value: Props['value']\n label: Props['children']\n }) => void\n}) {\n const optionsCount =\n React.Children.count(children) + (dataList?.length \|\| 0)\n\n const createOption = (props: OptionProps, i: number) => {\n const { value, title, children, error, help, ...rest } = props\n\n const label = title ?? children\n const suffix = help ? (\n <HelpButton size=\"small\" title={convertJsxToString(help.title)}>\n {help.content}\n </HelpButton>\n ) : undefined\n\n iterateOverItems?.({ value, label })\n\n const Component = (\n variant === 'radio' ? Radio : ToggleButton\n ) as typeof Radio & typeof ToggleButton\n\n return (\n <Component\n id={optionsCount === 1 ? id : undefined}\n key={`option-${i}-${id}`}\n label={variant === 'radio' ? label : undefined}\n text={variant === 'button' ? label : undefined}\n value={String(value ?? valueProp ?? '')}\n status={\n (hasError \|\| checkForError([error, info, warning])) && 'error'\n }\n suffix={suffix}\n {...htmlAttributes}\n {...rest}\n />\n )\n }\n\n return [\n ...(dataList \|\| []).map((props, i) => {\n return createOption(props as OptionProps, i)\n }),\n ...(mapOptions(children, { createOption }) \|\| []),\n ].filter(Boolean)\n}\n\nexport function mapOptions(children: React.ReactNode, { createOption }) {\n return React.Children.map(\n children,\n (child: React.ReactElement<OptionProps>, i) => {\n if (React.isValidElement(child)) {\n if (child.type === OptionField) {\n return createOption(child.props, i)\n }\n\n if (child.props.children) {\n const nestedChildren = mapOptions(child.props.children, {\n createOption,\n })\n return React.cloneElement(child, child.props, nestedChildren)\n }\n }\n\n return child\n }\n )\n}\n\nexport function makeOptions<T = DrawerListProps['data']>(\n children: React.ReactNode\n): T {\n return React.Children.map(children, (child) => {\n if (child?.['props']?.children?.type === OptionField) {\n child = child['props'].children\n }\n\n if (React.isValidElement(child) && child.type === OptionField) {\n const props = child.props as OptionFieldProps\n const title = props.children ?? props.title ?? <em>Untitled</em>\n const content = props.text ? [title, props.text] : title\n const selectedKey = String(props.value ?? '')\n\n return { selectedKey, content }\n }\n\n // For other children, just show them as content\n if (child) {\n return {\n content: child,\n }\n }\n }) as T\n}\n\nfunction renderDropdownItems(data: Data) {\n return (\n data?.map(({ value, title, text }) => {\n return {\n selectedKey: value,\n content: (text ? [title, text] : title) \|\| <em>Untitled</em>,\n }\n }) \|\| []\n )\n}\n\nSelection._supportsSpacingProps = true\nexport default Selection\n"],"mappings":"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"}

package/extensions/forms/Field/Selection/SelectionDocs.js CHANGED Viewed

@@ -19,11 +19,6 @@ export const SelectionProperties = {
     type: ['string', 'false'],
     status: 'optional'
   },
-  help: {
-    doc: 'Provide a help button. Object consisting of `title` and `content`.',
-    type: 'object',
-    status: 'optional'
-  },
   data: {
     doc: 'Data to be used for the component. The object needs to have a `value` and a `title` property. Provide the Dropdown or Autocomplete data in the format documented here: [Dropdown](/uilib/components/dropdown) and [Autocomplete](/uilib/components/autocomplete) documentation.',
     type: 'array',
@@ -45,7 +40,7 @@ export const SelectionProperties = {
     status: 'optional'
   },
   children: {
-    doc: 'For providing Option components.',
+    doc: 'For providing Option components, and other children.',
     type: 'React.Node',
     status: 'optional'
   }

package/extensions/forms/Field/Selection/SelectionDocs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectionDocs.js","names":["SelectionProperties","variant","doc","type","status","value","optionsLayout","width","~~help","~~data","dataPath","autocompleteProps","dropdownProps","children"],"sources":["../../../../../../src/extensions/forms/Field/Selection/SelectionDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const SelectionProperties: PropertiesTableProps = {\n variant: {\n doc: 'Choice of UI feature. Can be: `dropdown`, `autocomplete`, `radio` or `button`.',\n type: 'string',\n status: 'optional',\n },\n value: {\n doc: 'Defines the `value`. When using variant `radio` or `button`, value has to be a `string`.',\n type: ['number', 'string'],\n status: 'optional',\n },\n optionsLayout: {\n doc: 'Layout for the list of options. Can be `horizontal` or `vertical`.',\n type: 'string',\n status: 'optional',\n },\n width: {\n doc: '`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~~ data: {\n doc: 'Data to be used for the component. The object needs to have a `value` and a `title` property. Provide the Dropdown or Autocomplete data in the format documented here: [Dropdown](/uilib/components/dropdown) and [Autocomplete](/uilib/components/autocomplete) documentation.',\n type: 'array',\n status: 'optional',\n },\n dataPath: {\n doc: 'The path to the context data (Form.Handler). The context data object needs to have a `value` and a `title` property. The generated options will be placed above given JSX based children.',\n type: 'string',\n status: 'optional',\n },\n autocompleteProps: {\n doc: 'Forward any additional props (camelCase) to the [Autocomplete](/uilib/components/autocomplete/) component.',\n type: 'object',\n status: 'optional',\n },\n dropdownProps: {\n doc: 'Forward any additional props (camelCase) to the [Dropdown](/uilib/components/dropdown/) component.',\n type: 'object',\n status: 'optional',\n },\n children: {\n doc: 'For providing Option components.',\n type: 'React.Node',\n status: 'optional',\n },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,mBAAyC,GAAG;EACvDC,OAAO,EAAE;IACPC,GAAG,EAAE,gFAAgF;IACrFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,KAAK,EAAE;IACLH,GAAG,EAAE,0FAA0F;IAC/FC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV,CAAC;EACDE,aAAa,EAAE;IACbJ,GAAG,EAAE,oEAAoE;IACzEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,KAAK,EAAE;IACLL,GAAG,EAAE,kGAAkG;IACvGC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,MAAM,EAAE;EACV,CAAC;EACDI,IAAI,EAAE;IACJN,GAAG,EAAE,~~oEAAoE;IACzEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,IAAI,EAAE;IACJP,GAAG,EAAE,~~iRAAiR;IACtRC,IAAI,EAAE,OAAO;IACbC,MAAM,EAAE;EACV,CAAC;~~EACDM~~,QAAQ,EAAE;~~IACRR~~,GAAG,EAAE,2LAA2L;IAChMC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;~~EACDO~~,iBAAiB,EAAE;~~IACjBT~~,GAAG,EAAE,4GAA4G;IACjHC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;~~EACDQ~~,aAAa,EAAE;~~IACbV~~,GAAG,EAAE,oGAAoG;IACzGC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;~~EACDS~~,QAAQ,EAAE;~~IACRX~~,GAAG,EAAE,~~kCAAkC~~;~~IACvCC~~,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV;AACF,CAAC"}
1	+ {"version":3,"file":"SelectionDocs.js","names":["SelectionProperties","variant","doc","type","status","value","optionsLayout","width","data","dataPath","autocompleteProps","dropdownProps","children"],"sources":["../../../../../../src/extensions/forms/Field/Selection/SelectionDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const SelectionProperties: PropertiesTableProps = {\n variant: {\n doc: 'Choice of UI feature. Can be: `dropdown`, `autocomplete`, `radio` or `button`.',\n type: 'string',\n status: 'optional',\n },\n value: {\n doc: 'Defines the `value`. When using variant `radio` or `button`, value has to be a `string`.',\n type: ['number', 'string'],\n status: 'optional',\n },\n optionsLayout: {\n doc: 'Layout for the list of options. Can be `horizontal` or `vertical`.',\n type: 'string',\n status: 'optional',\n },\n width: {\n doc: '`small`, `medium` or `large` for predefined standard widths, `stretch` for fill available width.',\n type: ['string', 'false'],\n status: 'optional',\n },\n data: {\n doc: 'Data to be used for the component. The object needs to have a `value` and a `title` property. Provide the Dropdown or Autocomplete data in the format documented here: [Dropdown](/uilib/components/dropdown) and [Autocomplete](/uilib/components/autocomplete) documentation.',\n type: 'array',\n status: 'optional',\n },\n dataPath: {\n doc: 'The path to the context data (Form.Handler). The context data object needs to have a `value` and a `title` property. The generated options will be placed above given JSX based children.',\n type: 'string',\n status: 'optional',\n },\n autocompleteProps: {\n doc: 'Forward any additional props (camelCase) to the [Autocomplete](/uilib/components/autocomplete/) component.',\n type: 'object',\n status: 'optional',\n },\n dropdownProps: {\n doc: 'Forward any additional props (camelCase) to the [Dropdown](/uilib/components/dropdown/) component.',\n type: 'object',\n status: 'optional',\n },\n children: {\n doc: 'For providing Option components, and other children.',\n type: 'React.Node',\n status: 'optional',\n },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,mBAAyC,GAAG;EACvDC,OAAO,EAAE;IACPC,GAAG,EAAE,gFAAgF;IACrFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,KAAK,EAAE;IACLH,GAAG,EAAE,0FAA0F;IAC/FC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV,CAAC;EACDE,aAAa,EAAE;IACbJ,GAAG,EAAE,oEAAoE;IACzEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,KAAK,EAAE;IACLL,GAAG,EAAE,kGAAkG;IACvGC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,MAAM,EAAE;EACV,CAAC;EACDI,IAAI,EAAE;IACJN,GAAG,EAAE,iRAAiR;IACtRC,IAAI,EAAE,OAAO;IACbC,MAAM,EAAE;EACV,CAAC;EACDK,QAAQ,EAAE;IACRP,GAAG,EAAE,2LAA2L;IAChMC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDM,iBAAiB,EAAE;IACjBR,GAAG,EAAE,4GAA4G;IACjHC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDO,aAAa,EAAE;IACbT,GAAG,EAAE,oGAAoG;IACzGC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDQ,QAAQ,EAAE;IACRV,GAAG,EAAE,sDAAsD;IAC3DC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV;AACF,CAAC"}

package/extensions/forms/Field/Selection/style/dnb-selection.css CHANGED Viewed

@@ -4,6 +4,9 @@
 .dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label, .dnb-forms-field-selection__options-layout--horizontal .dnb-forms-field-block--layout-horizontal .dnb-form-label {
   margin-bottom: 0;
 }
+.dnb-forms-field-selection--options-layout--vertical.dnb-forms-field-selection--layout-horizontal .dnb-forms-field-block__label {
+  align-items: flex-start;
+}
 .dnb-forms-field-selection__variant--button .dnb-forms-field-block--layout-horizontal .dnb-form-label {
   line-height: 2.5rem;
 }

package/extensions/forms/Field/Selection/style/dnb-selection.min.css CHANGED Viewed

	@@ -1 +1 @@
1	- .dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label{align-self:center}.dnb-forms-field-selection__options-layout--horizontal .dnb-forms-field-block--layout-horizontal .dnb-form-label,.dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label{margin-bottom:0}.dnb-forms-field-selection__variant--button .dnb-forms-field-block--layout-horizontal .dnb-form-label{line-height:2.5rem}.dnb-forms-field-selection .dnb-forms-field-block__contents{display:flex}.dnb-forms-field-selection .dnb-radio-group .dnb-height-animation,.dnb-forms-field-selection .dnb-radio-group>.dnb-flex-container,.dnb-forms-field-selection .dnb-toggle-button-group .dnb-height-animation,.dnb-forms-field-selection .dnb-toggle-button-group>.dnb-flex-container{flex-grow:1;width:100%}
1	+ .dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label{align-self:center}.dnb-forms-field-selection__options-layout--horizontal .dnb-forms-field-block--layout-horizontal .dnb-form-label,.dnb-forms-field-selection__variant--dropdown .dnb-forms-field-block--layout-horizontal .dnb-form-label{margin-bottom:0}.dnb-forms-field-selection--options-layout--vertical.dnb-forms-field-selection--layout-horizontal .dnb-forms-field-block__label{align-items:flex-start}.dnb-forms-field-selection__variant--button .dnb-forms-field-block--layout-horizontal .dnb-form-label{line-height:2.5rem}.dnb-forms-field-selection .dnb-forms-field-block__contents{display:flex}.dnb-forms-field-selection .dnb-radio-group .dnb-height-animation,.dnb-forms-field-selection .dnb-radio-group>.dnb-flex-container,.dnb-forms-field-selection .dnb-toggle-button-group .dnb-height-animation,.dnb-forms-field-selection .dnb-toggle-button-group>.dnb-flex-container{flex-grow:1;width:100%}

package/extensions/forms/Field/Selection/style/dnb-selection.scss CHANGED Viewed

@@ -14,6 +14,11 @@
       }
     }
   }
+  &--options-layout--vertical#{&}--layout-horizontal {
+    .dnb-forms-field-block__label {
+      align-items: flex-start;
+    }
+  }
   &__variant--button {
     .dnb-forms-field-block {
       &--layout-horizontal .dnb-form-label {

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

@@ -1,12 +1,12 @@
 import React from 'react';
 import { FieldBlockWidth } from '../../FieldBlock';
-import { FieldHelpProps, FieldProps, Path } from '../../types';
+import { 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> & {
+export type Props = FieldProps<SliderValue> & {
     /**
      * Define an array with JSON Pointers for multiple thumb buttons.
      */

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

@@ -9,7 +9,6 @@ import { useFieldProps } from '../../hooks';
 import { getFormattedNumber } from '../../../../components/slider/SliderHelpers';
 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) {
@@ -38,7 +37,6 @@ function SliderComponent(props) {
     min = 0,
     max = 100,
     width = 'stretch',
-    help,
     hasError,
     disabled,
     vertical,
@@ -89,9 +87,6 @@ function SliderComponent(props) {
     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,

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

	@@ -1 +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","_ref2","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":";;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AACvE,OAAOC,UAAU,MAGV,kBAAkB;AACzB,SAASC,aAAa,QAAQ,aAAa;AAE3C,SAASC,kBAAkB,QAAQ,6CAA6C;AAChF,OAAOC,MAAM,MAAuB,+BAA+B;AACnE,SAASC,gBAAgB,QAAQ,mCAAmC;AACpE,~~SAASC,UAAU,QAAQ,wBAAwB;AACnD,~~OAAOC,WAAW,MAAwB,2BAA2B;AACrE,OAAOC,YAAY,MAAM,0BAA0B;~~AAgCnD~~,SAASC,eAAeA,CAACC,KAAY,EAAE;EAAA,IAAAC,IAAA,EAAAC,YAAA;EACrC,MAAMC,cAAc,~~GAAGb~~,MAAM,CAAe,CAAC;~~EAC7Ca~~,cAAc,CAACC,OAAO,~~GAAGhB~~,UAAU,~~CAAeS~~,WAAW,CAAC;EAE9D,MAAM;IAAEQ;EAAe,CAAC,GAAGP,YAAY,CAAC,CAAC;EACzC,MAAMQ,SAAS,~~GAAGnB~~,WAAW,~~CAC1BoB~~,MAAwC,IAAK;IAC5C,IAAIC,KAAK,CAACC,OAAO,CAACF,MAAM,CAAC,EAAE;MACzB,OAAOA,MAAM,CAACG,GAAG,CAAEC,CAAC,IAAKN,cAAc,CAACM,CAAC,CAAC,IAAI,CAAC,CAAC;IAClD;IAEA,OAAON,cAAc,CAACE,MAAM,CAAC,IAAI,CAAC;EACpC,CAAC,EACD,CAACF,cAAc,CACjB,CAAC;EAED,MAAMO,KAAK,GAAGN,SAAS,EAAAL,IAAA,IAAAC,YAAA,GAACF,KAAK,CAACa,KAAK,cAAAX,YAAA,cAAAA,YAAA,GAAIF,KAAK,CAACc,IAAI,cAAAb,IAAA,cAAAA,IAAA,GAAID,KAAK,CAACY,KAAK,CAAC;EACjE,MAAMG,aAAa,GAAAC,aAAA,CAAAA,aAAA,KACdhB,KAAK;IACRiB,IAAI,EAAEZ,cAAc,CAACL,KAAK,CAACiB,IAAI,CAAC;IAChCC,GAAG,EAAEb,cAAc,CAACL,KAAK,CAACkB,GAAG,CAAC;IAC9BC,GAAG,EAAEd,cAAc,CAACL,KAAK,CAACmB,GAAG;EAAC,EAC/B;EAED,MAAM;IACJC,EAAE;IACFN,IAAI;IACJG,IAAI,GAAG,CAAC;IACRC,GAAG,GAAG,CAAC;IACPC,GAAG,GAAG,GAAG;IACTE,KAAK,GAAG,SAAS;IACjBC,~~IAAI;IACJC,~~QAAQ;IACRC,QAAQ;IACRC,QAAQ;IACRC,OAAO;IACPC,WAAW;IACXC,kBAAkB;IAClBC,UAAU;IACVC,aAAa;IACbC,QAAQ;IACRC,YAAY;IACZC,OAAO;IACPC,iBAAiB;IACjBC,UAAU;IACVC,YAAY;IACZC,WAAW;IACXC,UAAU;IACVC;EACF,CAAC,~~GAAG/C~~,aAAa,~~CAACuB~~,aAAa,EAAE;IAC/~~ByB~~,uBAAuB,EAAE;EAC3B,CAAC,CAAC;~~EAEFnD~~,OAAO,CAAC,MAAM;IACZ,~~IAAIyB~~,IAAI,~~IAAIkB~~,YAAY,EAAE;MACxB,MAAM;QAAES;MAAO,CAAC,~~GAAGhD~~,kBAAkB,~~CAACmB~~,KAAK,~~EAAEoB~~,YAAY,CAAC;MAC1DO,eAAe,~~CAACzB~~,IAAI,~~EAAE2B~~,MAAM,CAAC;IAC/B;EACF,CAAC,EAAE,CAACT,YAAY,~~EAAElB~~,IAAI,~~EAAEyB~~,eAAe,~~EAAE3B~~,KAAK,CAAC,CAAC;EAEhD,~~MAAM8B~~,iBAAiB,~~GAAGvD~~,WAAW,~~CACnCwD~~,KAAA,IAA6C;IAAA,IAA5C;~~MAAE/B~~;IAAoC,CAAC,~~GAAA+B~~,KAAA;IACtC,~~IAAInC~~,KAAK,CAACC,OAAO,CAACT,KAAK,CAACa,KAAK,CAAC,IAAIL,KAAK,CAACC,OAAO,CAACG,KAAK,CAAC,EAAE;MACtDA,KAAK,~~CAACgC~~,OAAO,CAAC,~~CAAChC~~,KAAK,~~EAAEiC~~,CAAC,KAAK;~~QAC1B1C~~,cAAc,CAACC,OAAO,~~CAAC0C~~,eAAe,~~CAAC9C~~,KAAK,CAACa,KAAK,~~CAACgC~~,CAAC,CAAC,~~EAAEjC~~,KAAK,CAAC;MAC/D,CAAC,CAAC;IACJ;~~IAEAwB~~,YAAY,aAAZA,YAAY,uBAAZA,YAAY,~~CAAGxB~~,KAAK,CAAC;EACvB,CAAC,EACD,~~CAACwB~~,YAAY,~~EAAEpC~~,KAAK,CAACa,KAAK,CAC5B,CAAC;EAED,~~MAAMkC~~,eAAgC,~~GAAA/B~~,aAAA;~~IACpCgC~~,KAAK,~~EAAE5B~~,EAAE;IACTC;EAAK,~~GACF1B~~,gBAAgB,~~CAACK~~,KAAK,CAAC,CAC3B;EAED,~~MAAMiD~~,WAAwB,GAAG;IAC/~~BrC~~,KAAK;IACLK,IAAI;IACJC,GAAG;IACHC,GAAG;~~IACHK~~,QAAQ;IACR0B,MAAM,EAAE3B,QAAQ,GAAG,OAAO,GAAG4B,SAAS;IACtCC,~~MAAM,EAAE9B,IAAI,GACVpC,KAAA,CAAAmE,aAAA,CAACzD,UAAU;MAAC0D,KAAK,EAAEhC,IAAI,CAACgC;IAAM,GAAEhC,IAAI,CAACiC,OAAoB,CAAC,GACxDJ,~~SAAS~~;IACbK~~,~~SAAS~~,~~EAAEd,~~iBAAiB;~~IAC5Be~~,aAAa,~~EAAEpB~~,WAAW;~~IAC1BqB~~,WAAW,~~EAAEpB~~,UAAU;IACvBb,QAAQ;IACRC,OAAO;IACPC,WAAW;IACXC,kBAAkB;IAClBC,UAAU;IACVC,aAAa;IACbC,QAAQ;IACRC,YAAY;IACZC,OAAO;IACPC,iBAAiB;IACjBC,UAAU;~~IACVwB~~,OAAO,EAAE;EACX,CAAC;EAED,~~OACEzE~~,KAAA,~~CAAAmE~~,aAAA,~~CAAC9D~~,UAAU,~~EAAKwD~~,eAAe,~~EAC7B7D~~,KAAA,~~CAAAmE~~,aAAA,~~CAAC3D~~,MAAM,~~EAAKuD~~,WAAc,CAChB,CAAC;AAEjB;AAEA,~~eAAelD~~,eAAe;AAE9BA,eAAe,~~CAAC6D~~,qBAAqB,GAAG,IAAI"}
1	+ {"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","_ref2","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":";;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AACvE,OAAOC,UAAU,MAGV,kBAAkB;AACzB,SAASC,aAAa,QAAQ,aAAa;AAE3C,SAASC,kBAAkB,QAAQ,6CAA6C;AAChF,OAAOC,MAAM,MAAuB,+BAA+B;AACnE,SAASC,gBAAgB,QAAQ,mCAAmC;AACpE,OAAOC,WAAW,MAAwB,2BAA2B;AACrE,OAAOC,YAAY,MAAM,0BAA0B;AA+BnD,SAASC,eAAeA,CAACC,KAAY,EAAE;EAAA,IAAAC,IAAA,EAAAC,YAAA;EACrC,MAAMC,cAAc,GAAGZ,MAAM,CAAe,CAAC;EAC7CY,cAAc,CAACC,OAAO,GAAGf,UAAU,CAAeQ,WAAW,CAAC;EAE9D,MAAM;IAAEQ;EAAe,CAAC,GAAGP,YAAY,CAAC,CAAC;EACzC,MAAMQ,SAAS,GAAGlB,WAAW,CAC1BmB,MAAwC,IAAK;IAC5C,IAAIC,KAAK,CAACC,OAAO,CAACF,MAAM,CAAC,EAAE;MACzB,OAAOA,MAAM,CAACG,GAAG,CAAEC,CAAC,IAAKN,cAAc,CAACM,CAAC,CAAC,IAAI,CAAC,CAAC;IAClD;IAEA,OAAON,cAAc,CAACE,MAAM,CAAC,IAAI,CAAC;EACpC,CAAC,EACD,CAACF,cAAc,CACjB,CAAC;EAED,MAAMO,KAAK,GAAGN,SAAS,EAAAL,IAAA,IAAAC,YAAA,GAACF,KAAK,CAACa,KAAK,cAAAX,YAAA,cAAAA,YAAA,GAAIF,KAAK,CAACc,IAAI,cAAAb,IAAA,cAAAA,IAAA,GAAID,KAAK,CAACY,KAAK,CAAC;EACjE,MAAMG,aAAa,GAAAC,aAAA,CAAAA,aAAA,KACdhB,KAAK;IACRiB,IAAI,EAAEZ,cAAc,CAACL,KAAK,CAACiB,IAAI,CAAC;IAChCC,GAAG,EAAEb,cAAc,CAACL,KAAK,CAACkB,GAAG,CAAC;IAC9BC,GAAG,EAAEd,cAAc,CAACL,KAAK,CAACmB,GAAG;EAAC,EAC/B;EAED,MAAM;IACJC,EAAE;IACFN,IAAI;IACJG,IAAI,GAAG,CAAC;IACRC,GAAG,GAAG,CAAC;IACPC,GAAG,GAAG,GAAG;IACTE,KAAK,GAAG,SAAS;IACjBC,QAAQ;IACRC,QAAQ;IACRC,QAAQ;IACRC,OAAO;IACPC,WAAW;IACXC,kBAAkB;IAClBC,UAAU;IACVC,aAAa;IACbC,QAAQ;IACRC,YAAY;IACZC,OAAO;IACPC,iBAAiB;IACjBC,UAAU;IACVC,YAAY;IACZC,WAAW;IACXC,UAAU;IACVC;EACF,CAAC,GAAG7C,aAAa,CAACsB,aAAa,EAAE;IAC/BwB,uBAAuB,EAAE;EAC3B,CAAC,CAAC;EAEFjD,OAAO,CAAC,MAAM;IACZ,IAAIwB,IAAI,IAAIiB,YAAY,EAAE;MACxB,MAAM;QAAES;MAAO,CAAC,GAAG9C,kBAAkB,CAACkB,KAAK,EAAEmB,YAAY,CAAC;MAC1DO,eAAe,CAACxB,IAAI,EAAE0B,MAAM,CAAC;IAC/B;EACF,CAAC,EAAE,CAACT,YAAY,EAAEjB,IAAI,EAAEwB,eAAe,EAAE1B,KAAK,CAAC,CAAC;EAEhD,MAAM6B,iBAAiB,GAAGrD,WAAW,CACnCsD,KAAA,IAA6C;IAAA,IAA5C;MAAE9B;IAAoC,CAAC,GAAA8B,KAAA;IACtC,IAAIlC,KAAK,CAACC,OAAO,CAACT,KAAK,CAACa,KAAK,CAAC,IAAIL,KAAK,CAACC,OAAO,CAACG,KAAK,CAAC,EAAE;MACtDA,KAAK,CAAC+B,OAAO,CAAC,CAAC/B,KAAK,EAAEgC,CAAC,KAAK;QAC1BzC,cAAc,CAACC,OAAO,CAACyC,eAAe,CAAC7C,KAAK,CAACa,KAAK,CAAC+B,CAAC,CAAC,EAAEhC,KAAK,CAAC;MAC/D,CAAC,CAAC;IACJ;IAEAuB,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAGvB,KAAK,CAAC;EACvB,CAAC,EACD,CAACuB,YAAY,EAAEnC,KAAK,CAACa,KAAK,CAC5B,CAAC;EAED,MAAMiC,eAAgC,GAAA9B,aAAA;IACpC+B,KAAK,EAAE3B,EAAE;IACTC;EAAK,GACFzB,gBAAgB,CAACI,KAAK,CAAC,CAC3B;EAED,MAAMgD,WAAwB,GAAG;IAC/BpC,KAAK;IACLK,IAAI;IACJC,GAAG;IACHC,GAAG;IACHI,QAAQ;IACR0B,MAAM,EAAE3B,QAAQ,GAAG,OAAO,GAAG4B,SAAS;IACtCC,SAAS,EAAEV,iBAAiB;IAC5BW,aAAa,EAAEhB,WAAW;IAC1BiB,WAAW,EAAEhB,UAAU;IACvBb,QAAQ;IACRC,OAAO;IACPC,WAAW;IACXC,kBAAkB;IAClBC,UAAU;IACVC,aAAa;IACbC,QAAQ;IACRC,YAAY;IACZC,OAAO;IACPC,iBAAiB;IACjBC,UAAU;IACVoB,OAAO,EAAE;EACX,CAAC;EAED,OACEnE,KAAA,CAAAoE,aAAA,CAAC/D,UAAU,EAAKsD,eAAe,EAC7B3D,KAAA,CAAAoE,aAAA,CAAC5D,MAAM,EAAKqD,WAAc,CAChB,CAAC;AAEjB;AAEA,eAAejD,eAAe;AAE9BA,eAAe,CAACyD,qBAAqB,GAAG,IAAI"}

package/extensions/forms/Field/String/String.d.ts CHANGED Viewed

@@ -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/extensions/forms/Field/String/String.js CHANGED Viewed

@@ -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,
@@ -137,9 +136,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/extensions/forms/Field/String/String.js.map CHANGED Viewed

	@@ -1 +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","_ref","_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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"}
1	+ {"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","_ref","_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/extensions/forms/Field/String/StringDocs.js CHANGED Viewed

@@ -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/extensions/forms/Field/String/StringDocs.js.map CHANGED Viewed

	@@ -1 +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"}
1	+ {"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/extensions/forms/Field/String/style/dnb-string.css ADDED Viewed

@@ -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/extensions/forms/Field/String/style/dnb-string.min.css ADDED Viewed

	@@ -0,0 +1 @@
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/extensions/forms/Field/String/style/dnb-string.scss ADDED Viewed

@@ -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%;
+    }
+  }
+}