@dnb/eufemia 10.62.4 → 10.63.0

package/extensions/forms/Field/Provider/useFieldProvider.d.ts

@@ -8,12 +8,12 @@ declare function useFieldProvider(props?: Omit<FieldProviderProps, 'children'>):
         space?: import("../../../../shared/types").SpaceTypeAll;
         left?: import("../../../../shared/types").SpaceType;
         right?: import("../../../../shared/types").SpaceType;
-        error?: Error | import("../..").FormError | (Error | import("../..").FormError)[];
+        error?: import("../../types").MessageProp<unknown, Error | import("../..").FormError | (Error | import("../..").FormError)[]>;
         label?: import("react").ReactNode;
         path?: string;
         'aria-hidden'?: boolean | "true" | "false";
         value?: unknown;
-        info?: import("react").ReactNode;
+        info?: import("../../types").MessageProp<unknown, import("react").ReactNode | import("react").ReactNode[]>;
         'aria-labelledby'?: string;
         'aria-describedby'?: string;
         'aria-details'?: string;
@@ -88,10 +88,11 @@ declare function useFieldProvider(props?: Omit<FieldProviderProps, 'children'>):
         layout?: "horizontal" | "vertical";
         translations?: import("../../../../shared/Context").Translations | import("../../../../shared/Context").TranslationCustomLocales;
         valueType?: string | number | boolean | (string | number | boolean)[];
-        warning?: import("react").ReactNode;
+        warning?: import("../../types").MessageProp<unknown, import("react").ReactNode | import("react").ReactNode[]>;
         emptyValue?: unknown;
         validateInitially?: boolean;
         continuousValidation?: boolean;
+        validateContinuously?: boolean;
         htmlAttributes?: Record<string, unknown>;
         schema?: import("../../types").AllJSONSchemaVersions<unknown>;
         validator?: import("../../types").Validator<unknown, import("../../types").DefaultErrorMessages>;

package/extensions/forms/Field/SelectCountry/SelectCountry.js

@@ -54,6 +54,8 @@ function SelectCountry(props) {
   });
   const {
     id,
+    path,
+    itemPath,
     className,
     placeholder = defaultPlaceholder,
     label = defaultLabel,
@@ -145,9 +147,11 @@ function SelectCountry(props) {
     }
   }, [handleChange]);
   useMemo(() => {
-    var _getCountryObjectByIs, _getCountryObjectByIs2;
-    setDisplayValue(props.path, (_getCountryObjectByIs = getCountryObjectByIso(value)) === null || _getCountryObjectByIs === void 0 ? void 0 : (_getCountryObjectByIs2 = _getCountryObjectByIs.i18n) === null || _getCountryObjectByIs2 === void 0 ? void 0 : _getCountryObjectByIs2[langRef.current]);
-  }, [getCountryObjectByIso, props.path, setDisplayValue, value]);
+    if (path || itemPath) {
+      var _getCountryObjectByIs, _getCountryObjectByIs2;
+      setDisplayValue((_getCountryObjectByIs = getCountryObjectByIso(value)) === null || _getCountryObjectByIs === void 0 ? void 0 : (_getCountryObjectByIs2 = _getCountryObjectByIs.i18n) === null || _getCountryObjectByIs2 === void 0 ? void 0 : _getCountryObjectByIs2[langRef.current]);
+    }
+  }, [getCountryObjectByIso, itemPath, path, setDisplayValue, value]);
   const fieldBlockProps = _objectSpread({
     forId: id,
     className: classnames('dnb-forms-field-select-country', className),
@@ -189,7 +193,7 @@ export function getCountryData() {
       };
     }
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return countries.filter(country => {
+  const sortedCountries = countries.filter(country => {
     if (typeof filter === 'function') {
       return filter(country);
     }
@@ -217,6 +221,10 @@ export function getCountryData() {
     }
     return (_String = String(a[lang])) === null || _String === void 0 ? void 0 : (_String$localeCompare = _String.localeCompare) === null || _String$localeCompare === void 0 ? void 0 : _String$localeCompare.call(_String, b[lang], 'nb');
   }).map(country => makeObject(country, lang));
+  if (sortedCountries.length === 0) {
+    return undefined;
+  }
+  return sortedCountries;
 }
 export function countryFilter(country, filterCountries, ccFilter) {
   let result = true;

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

@@ -1 +1 @@
-{"version":3,"file":"SelectCountry.js","names":["React","useCallback","useContext","useMemo","useRef","classnames","SharedContext","FieldBlockContext","LOCALE","Autocomplete","pickSpacingProps","countries","prioritizedCountries","useFieldProps","FieldBlock","useTranslation","SelectCountry","props","_props$width","sharedContext","fieldBlockContext","label","defaultLabel","placeholder","defaultPlaceholder","errorRequired","lang","locale","split","getCountryObjectByIso","value","country","find","_ref","iso","i18n","provideAdditionalArgs","errorMessages","required","preparedProps","_objectSpread","width","composition","id","className","ccFilter","hasError","disabled","htmlAttributes","handleFocus","handleBlur","handleChange","updateValue","setDisplayValue","forceUpdate","filterCountries","dataRef","langRef","wasFilled","filter","countryFilter","isLangChange","current","getCountryData","sort","window","requestAnimationFrame","handleCountryChange","_ref2","data","newValue","selectedKey","fillData","onFocusHandler","_ref3","updateData","onTypeHandler","_ref4","_event$nativeEvent","currentValue","setHidden","event","nativeEvent","search","toLowerCase","_ref5","Object","values","some","s","includes","_getCountryObjectByIs","_getCountryObjectByIs2","path","fieldBlockProps","forId","undefined","contentWidth","createElement","_extends","input_icon","on_show","on_focus","on_blur","on_change","on_type","stretch","status","show_submit_button","keep_selection","autoComplete","no_animation","noAnimation","makeObject","_country$i18n$lang","content","en","arguments","length","_ref6","_ref7","_String","_String$localeCompare","a","b","indexA","indexOf","indexB","priorityA","priorityB","String","localeCompare","call","map","result","_country$regions","regions","continent","makeCountryFilterSet","_country$regions2","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/SelectCountry/SelectCountry.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo, useRef } from 'react'\nimport classnames from 'classnames'\nimport SharedContext from '../../../../shared/Context'\nimport FieldBlockContext from '../../FieldBlock/FieldBlockContext'\nimport { LOCALE } from '../../../../shared/defaults'\nimport { Autocomplete } from '../../../../components'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport countries, {\n  prioritizedCountries,\n  type CountryType,\n  type CountryLang,\n} from '../../constants/countries'\nimport { useFieldProps } from '../../hooks'\nimport { FieldPropsWithExtraValue } from '../../types'\nimport FieldBlock, {\n  Props as FieldBlockProps,\n  FieldBlockWidth,\n} from '../../FieldBlock'\nimport useTranslation from '../../hooks/useTranslation'\n\nexport type CountryFilterSet =\n  | 'Scandinavia'\n  | 'Nordic'\n  | 'Europe'\n  | 'Prioritized'\nexport type { CountryType }\n\nexport type Props = FieldPropsWithExtraValue<\n  string,\n  CountryType,\n  undefined | string\n> & {\n  /**\n   * Lists only the countries you want to show. Can be `Scandinavia`, `Nordic`, `Europe` or `Prioritized`.\n   * Defaults to `Prioritized`.\n   */\n  countries?: CountryFilterSet\n\n  /**\n   * Use this prop to filter out certain countries. The function receives the country object and should return a boolean. Returning `false` will omit the country.\n   */\n  filterCountries?: (country: CountryType) => boolean\n\n  /**\n   * For internal testing purposes\n   */\n  noAnimation?: boolean\n\n  /**\n   * The width of the component.\n   */\n  width?: FieldBlockWidth\n}\n\nfunction SelectCountry(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const fieldBlockContext = useContext(FieldBlockContext)\n  const {\n    label: defaultLabel,\n    placeholder: defaultPlaceholder,\n    errorRequired,\n  } = useTranslation().SelectCountry\n  const lang = (sharedContext.locale || LOCALE).split(\n    '-'\n  )[0] as CountryLang\n\n  const getCountryObjectByIso = useCallback(\n    (value: CountryType['iso']) => {\n      const country = countries.find(({ iso }) => value === iso)\n      if (country?.i18n) {\n        country['name'] = country.i18n[lang]\n      }\n      return country\n    },\n    [lang]\n  )\n\n  const provideAdditionalArgs = useCallback(\n    (value: CountryType['iso']) => {\n      const country = getCountryObjectByIso(value)\n\n      if (country?.iso) {\n        return country\n      }\n    },\n    [getCountryObjectByIso]\n  )\n\n  const errorMessages = useMemo(\n    () => ({\n      required: errorRequired,\n    }),\n    [errorRequired]\n  )\n\n  const preparedProps: Props = {\n    errorMessages,\n    ...props,\n    width:\n      props.width ??\n      (fieldBlockContext?.composition ? 'stretch' : 'large'),\n    provideAdditionalArgs,\n  }\n\n  const {\n    id,\n    className,\n    placeholder = defaultPlaceholder,\n    label = defaultLabel,\n    countries: ccFilter = 'Prioritized',\n    hasError,\n    disabled,\n    value,\n    width,\n    htmlAttributes,\n    handleFocus,\n    handleBlur,\n    handleChange,\n    updateValue,\n    setDisplayValue,\n    forceUpdate,\n    filterCountries,\n  } = useFieldProps(preparedProps)\n\n  const dataRef = useRef(null)\n  const langRef = useRef(lang)\n  const wasFilled = useRef(false)\n\n  const filter = useCallback(\n    (country: CountryType) => {\n      return countryFilter(country, filterCountries, ccFilter)\n    },\n    [ccFilter, filterCountries]\n  )\n\n  /**\n   * We do not process the whole country list at the first render.\n   * Only when the Autocomplete opens (focus).\n   * To achieve this, we use memo instead of effect to update refs in sync.\n   *\n   * We set or update the data list depending on if the countrycode changes or lang changes.\n   * We then update data set when value changes.\n   */\n  useMemo(() => {\n    const isLangChange = lang !== langRef.current\n\n    if (isLangChange || !wasFilled.current) {\n      langRef.current = lang\n      dataRef.current = getCountryData({\n        lang,\n        filter: !wasFilled.current\n          ? (country) => country.iso === value\n          : filter,\n        sort: ccFilter as Extract<CountryFilterSet, 'Prioritized'>,\n      })\n\n      // To force Autocomplete to re-evaluate the internal data\n      if (isLangChange && value && typeof window !== 'undefined') {\n        updateValue(null)\n        window.requestAnimationFrame(() => {\n          updateValue(value)\n        })\n      }\n    }\n  }, [lang, filter, ccFilter, updateValue, value])\n\n  const handleCountryChange = useCallback(\n    ({ data }: { data: { selectedKey: string } }) => {\n      const newValue = data?.selectedKey\n      const country = getCountryObjectByIso(newValue)\n      if (country?.iso) {\n        handleChange(country.iso, country)\n      }\n    },\n    [getCountryObjectByIso, handleChange]\n  )\n\n  const fillData = useCallback(() => {\n    if (!wasFilled.current) {\n      wasFilled.current = true\n      dataRef.current = getCountryData({\n        lang: langRef.current,\n        filter,\n        sort: ccFilter as Extract<CountryFilterSet, 'Prioritized'>,\n      })\n      forceUpdate()\n    }\n  }, [ccFilter, filter, forceUpdate])\n\n  const onFocusHandler = useCallback(\n    ({ updateData }) => {\n      fillData()\n      updateData(dataRef.current)\n      handleFocus()\n    },\n    [fillData, handleFocus]\n  )\n\n  const onTypeHandler = useCallback(\n    ({ value: currentValue, setHidden, event }) => {\n      // Handle browser autofill/autocomplete\n      if (typeof event?.nativeEvent?.data === 'undefined') {\n        const search = currentValue.toLowerCase()\n        const country = countries.find(({ i18n }) =>\n          Object.values(i18n).some((s) => s.toLowerCase().includes(search))\n        )\n        if (country?.iso) {\n          setHidden()\n          handleChange(country.iso)\n        }\n      }\n    },\n    [handleChange]\n  )\n\n  useMemo(() => {\n    setDisplayValue(\n      props.path,\n      getCountryObjectByIso(value)?.i18n?.[langRef.current]\n    )\n  }, [getCountryObjectByIso, props.path, setDisplayValue, value])\n\n  const fieldBlockProps: FieldBlockProps = {\n    forId: id,\n    className: classnames('dnb-forms-field-select-country', className),\n    label,\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      <Autocomplete\n        id={id}\n        placeholder={placeholder}\n        input_icon={false}\n        data={dataRef.current}\n        value={typeof value === 'string' ? value : null}\n        disabled={disabled}\n        on_show={fillData}\n        on_focus={onFocusHandler}\n        on_blur={handleBlur}\n        on_change={handleCountryChange}\n        on_type={onTypeHandler}\n        stretch\n        status={hasError ? 'error' : undefined}\n        show_submit_button\n        keep_selection\n        autoComplete=\"country-name\"\n        no_animation={props.noAnimation}\n        {...htmlAttributes}\n      />\n    </FieldBlock>\n  )\n}\n\ntype GetCountryData = {\n  lang?: CountryLang\n  filter?: Props['filterCountries']\n  sort?: Extract<CountryFilterSet, 'Prioritized'>\n  makeObject?: (\n    country: CountryType,\n    lang: string\n  ) => {\n    selectedKey: string\n    selected_value?: string\n    content: string\n  }\n}\n\nexport function getCountryData({\n  lang = 'nb',\n  filter = null,\n  sort = null,\n  makeObject = (country: CountryType, lang: string) => {\n    const content = country.i18n[lang] ?? country.i18n.en\n    return {\n      selectedKey: country.iso,\n      content,\n    }\n  },\n}: GetCountryData = {}) {\n  return countries\n    .filter((country) => {\n      if (typeof filter === 'function') {\n        return filter(country)\n      }\n\n      return !filter\n    })\n    .sort(({ i18n: a }, { i18n: b }) => {\n      if (sort === 'Prioritized') {\n        const indexA = prioritizedCountries.indexOf(a['en'])\n        const indexB = prioritizedCountries.indexOf(b['en'])\n\n        const priorityA = indexA !== -1\n        const priorityB = indexB !== -1\n\n        if (priorityA && priorityB) {\n          return indexA - indexB\n        } else if (priorityA) {\n          return -1\n        } else if (priorityB) {\n          return 1\n        }\n      }\n\n      return String(a[lang])?.localeCompare?.(b[lang], 'nb') // Always sort by nb, because åøæ (for Åland) is not in the en alphabet\n    })\n    .map((country) => makeObject(country, lang))\n}\n\nexport function countryFilter(\n  country: CountryType,\n  filterCountries: (country: CountryType) => boolean,\n  ccFilter: CountryFilterSet\n) {\n  let result = true\n\n  if (ccFilter !== 'Prioritized') {\n    switch (ccFilter) {\n      case 'Scandinavia':\n      case 'Nordic': {\n        result = country.regions?.includes(ccFilter)\n        break\n      }\n      case 'Europe': {\n        result = country.continent.includes(ccFilter)\n        break\n      }\n    }\n  }\n\n  if (result && filterCountries) {\n    result = filterCountries(country)\n  }\n\n  return result\n}\n\nexport function makeCountryFilterSet(ccFilter: CountryFilterSet) {\n  return (country: CountryType) => {\n    switch (ccFilter) {\n      case 'Scandinavia':\n      case 'Nordic':\n        return country.regions?.includes(ccFilter)\n      case 'Europe':\n        return country.continent.includes(ccFilter)\n    }\n    return true\n  }\n}\n\nSelectCountry._supportsSpacingProps = true\nexport default SelectCountry\n"],"mappings":"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"}
+{"version":3,"file":"SelectCountry.js","names":["React","useCallback","useContext","useMemo","useRef","classnames","SharedContext","FieldBlockContext","LOCALE","Autocomplete","pickSpacingProps","countries","prioritizedCountries","useFieldProps","FieldBlock","useTranslation","SelectCountry","props","_props$width","sharedContext","fieldBlockContext","label","defaultLabel","placeholder","defaultPlaceholder","errorRequired","lang","locale","split","getCountryObjectByIso","value","country","find","_ref","iso","i18n","provideAdditionalArgs","errorMessages","required","preparedProps","_objectSpread","width","composition","id","path","itemPath","className","ccFilter","hasError","disabled","htmlAttributes","handleFocus","handleBlur","handleChange","updateValue","setDisplayValue","forceUpdate","filterCountries","dataRef","langRef","wasFilled","filter","countryFilter","isLangChange","current","getCountryData","sort","window","requestAnimationFrame","handleCountryChange","_ref2","data","newValue","selectedKey","fillData","onFocusHandler","_ref3","updateData","onTypeHandler","_ref4","_event$nativeEvent","currentValue","setHidden","event","nativeEvent","search","toLowerCase","_ref5","Object","values","some","s","includes","_getCountryObjectByIs","_getCountryObjectByIs2","fieldBlockProps","forId","undefined","contentWidth","createElement","_extends","input_icon","on_show","on_focus","on_blur","on_change","on_type","stretch","status","show_submit_button","keep_selection","autoComplete","no_animation","noAnimation","makeObject","_country$i18n$lang","content","en","arguments","length","sortedCountries","_ref6","_ref7","_String","_String$localeCompare","a","b","indexA","indexOf","indexB","priorityA","priorityB","String","localeCompare","call","map","result","_country$regions","regions","continent","makeCountryFilterSet","_country$regions2","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/SelectCountry/SelectCountry.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo, useRef } from 'react'\nimport classnames from 'classnames'\nimport SharedContext from '../../../../shared/Context'\nimport FieldBlockContext from '../../FieldBlock/FieldBlockContext'\nimport { LOCALE } from '../../../../shared/defaults'\nimport { Autocomplete } from '../../../../components'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport countries, {\n  prioritizedCountries,\n  type CountryType,\n  type CountryLang,\n} from '../../constants/countries'\nimport { useFieldProps } from '../../hooks'\nimport { FieldPropsWithExtraValue } from '../../types'\nimport FieldBlock, {\n  Props as FieldBlockProps,\n  FieldBlockWidth,\n} from '../../FieldBlock'\nimport useTranslation from '../../hooks/useTranslation'\n\nexport type CountryFilterSet =\n  | 'Scandinavia'\n  | 'Nordic'\n  | 'Europe'\n  | 'Prioritized'\nexport type { CountryType }\n\nexport type Props = FieldPropsWithExtraValue<\n  string,\n  CountryType,\n  undefined | string\n> & {\n  /**\n   * Lists only the countries you want to show. Can be `Scandinavia`, `Nordic`, `Europe` or `Prioritized`.\n   * Defaults to `Prioritized`.\n   */\n  countries?: CountryFilterSet\n\n  /**\n   * Use this prop to filter out certain countries. The function receives the country object and should return a boolean. Returning `false` will omit the country.\n   */\n  filterCountries?: (country: CountryType) => boolean\n\n  /**\n   * For internal testing purposes\n   */\n  noAnimation?: boolean\n\n  /**\n   * The width of the component.\n   */\n  width?: FieldBlockWidth\n}\n\nfunction SelectCountry(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const fieldBlockContext = useContext(FieldBlockContext)\n  const {\n    label: defaultLabel,\n    placeholder: defaultPlaceholder,\n    errorRequired,\n  } = useTranslation().SelectCountry\n  const lang = (sharedContext.locale || LOCALE).split(\n    '-'\n  )[0] as CountryLang\n\n  const getCountryObjectByIso = useCallback(\n    (value: CountryType['iso']) => {\n      const country = countries.find(({ iso }) => value === iso)\n      if (country?.i18n) {\n        country['name'] = country.i18n[lang]\n      }\n      return country\n    },\n    [lang]\n  )\n\n  const provideAdditionalArgs = useCallback(\n    (value: CountryType['iso']) => {\n      const country = getCountryObjectByIso(value)\n\n      if (country?.iso) {\n        return country\n      }\n    },\n    [getCountryObjectByIso]\n  )\n\n  const errorMessages = useMemo(\n    () => ({\n      required: errorRequired,\n    }),\n    [errorRequired]\n  )\n\n  const preparedProps: Props = {\n    errorMessages,\n    ...props,\n    width:\n      props.width ??\n      (fieldBlockContext?.composition ? 'stretch' : 'large'),\n    provideAdditionalArgs,\n  }\n\n  const {\n    id,\n    path,\n    itemPath,\n    className,\n    placeholder = defaultPlaceholder,\n    label = defaultLabel,\n    countries: ccFilter = 'Prioritized',\n    hasError,\n    disabled,\n    value,\n    width,\n    htmlAttributes,\n    handleFocus,\n    handleBlur,\n    handleChange,\n    updateValue,\n    setDisplayValue,\n    forceUpdate,\n    filterCountries,\n  } = useFieldProps(preparedProps)\n\n  const dataRef = useRef(null)\n  const langRef = useRef(lang)\n  const wasFilled = useRef(false)\n\n  const filter = useCallback(\n    (country: CountryType) => {\n      return countryFilter(country, filterCountries, ccFilter)\n    },\n    [ccFilter, filterCountries]\n  )\n\n  /**\n   * We do not process the whole country list at the first render.\n   * Only when the Autocomplete opens (focus).\n   * To achieve this, we use memo instead of effect to update refs in sync.\n   *\n   * We set or update the data list depending on if the countrycode changes or lang changes.\n   * We then update data set when value changes.\n   */\n  useMemo(() => {\n    const isLangChange = lang !== langRef.current\n\n    if (isLangChange || !wasFilled.current) {\n      langRef.current = lang\n      dataRef.current = getCountryData({\n        lang,\n        filter: !wasFilled.current\n          ? (country) => country.iso === value\n          : filter,\n        sort: ccFilter as Extract<CountryFilterSet, 'Prioritized'>,\n      })\n\n      // To force Autocomplete to re-evaluate the internal data\n      if (isLangChange && value && typeof window !== 'undefined') {\n        updateValue(null)\n        window.requestAnimationFrame(() => {\n          updateValue(value)\n        })\n      }\n    }\n  }, [lang, filter, ccFilter, updateValue, value])\n\n  const handleCountryChange = useCallback(\n    ({ data }: { data: { selectedKey: string } }) => {\n      const newValue = data?.selectedKey\n      const country = getCountryObjectByIso(newValue)\n      if (country?.iso) {\n        handleChange(country.iso, country)\n      }\n    },\n    [getCountryObjectByIso, handleChange]\n  )\n\n  const fillData = useCallback(() => {\n    if (!wasFilled.current) {\n      wasFilled.current = true\n      dataRef.current = getCountryData({\n        lang: langRef.current,\n        filter,\n        sort: ccFilter as Extract<CountryFilterSet, 'Prioritized'>,\n      })\n      forceUpdate()\n    }\n  }, [ccFilter, filter, forceUpdate])\n\n  const onFocusHandler = useCallback(\n    ({ updateData }) => {\n      fillData()\n      updateData(dataRef.current)\n      handleFocus()\n    },\n    [fillData, handleFocus]\n  )\n\n  const onTypeHandler = useCallback(\n    ({ value: currentValue, setHidden, event }) => {\n      // Handle browser autofill/autocomplete\n      if (typeof event?.nativeEvent?.data === 'undefined') {\n        const search = currentValue.toLowerCase()\n        const country = countries.find(({ i18n }) =>\n          Object.values(i18n).some((s) => s.toLowerCase().includes(search))\n        )\n        if (country?.iso) {\n          setHidden()\n          handleChange(country.iso)\n        }\n      }\n    },\n    [handleChange]\n  )\n\n  useMemo(() => {\n    if (path || itemPath) {\n      setDisplayValue(\n        getCountryObjectByIso(value)?.i18n?.[langRef.current]\n      )\n    }\n  }, [getCountryObjectByIso, itemPath, path, setDisplayValue, value])\n\n  const fieldBlockProps: FieldBlockProps = {\n    forId: id,\n    className: classnames('dnb-forms-field-select-country', className),\n    label,\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      <Autocomplete\n        id={id}\n        placeholder={placeholder}\n        input_icon={false}\n        data={dataRef.current}\n        value={typeof value === 'string' ? value : null}\n        disabled={disabled}\n        on_show={fillData}\n        on_focus={onFocusHandler}\n        on_blur={handleBlur}\n        on_change={handleCountryChange}\n        on_type={onTypeHandler}\n        stretch\n        status={hasError ? 'error' : undefined}\n        show_submit_button\n        keep_selection\n        autoComplete=\"country-name\"\n        no_animation={props.noAnimation}\n        {...htmlAttributes}\n      />\n    </FieldBlock>\n  )\n}\n\ntype GetCountryData = {\n  lang?: CountryLang\n  filter?: Props['filterCountries']\n  sort?: Extract<CountryFilterSet, 'Prioritized'>\n  makeObject?: (\n    country: CountryType,\n    lang: string\n  ) => {\n    selectedKey: string\n    selected_value?: string\n    content: string\n  }\n}\n\nexport function getCountryData({\n  lang = 'nb',\n  filter = null,\n  sort = null,\n  makeObject = (country: CountryType, lang: string) => {\n    const content = country.i18n[lang] ?? country.i18n.en\n    return {\n      selectedKey: country.iso,\n      content,\n    }\n  },\n}: GetCountryData = {}) {\n  const sortedCountries = countries\n    .filter((country) => {\n      if (typeof filter === 'function') {\n        return filter(country)\n      }\n\n      return !filter\n    })\n    .sort(({ i18n: a }, { i18n: b }) => {\n      if (sort === 'Prioritized') {\n        const indexA = prioritizedCountries.indexOf(a['en'])\n        const indexB = prioritizedCountries.indexOf(b['en'])\n\n        const priorityA = indexA !== -1\n        const priorityB = indexB !== -1\n\n        if (priorityA && priorityB) {\n          return indexA - indexB\n        } else if (priorityA) {\n          return -1\n        } else if (priorityB) {\n          return 1\n        }\n      }\n\n      return String(a[lang])?.localeCompare?.(b[lang], 'nb') // Always sort by nb, because åøæ (for Åland) is not in the en alphabet\n    })\n    .map((country) => makeObject(country, lang))\n\n  if (sortedCountries.length === 0) {\n    return undefined\n  }\n\n  return sortedCountries\n}\n\nexport function countryFilter(\n  country: CountryType,\n  filterCountries: (country: CountryType) => boolean,\n  ccFilter: CountryFilterSet\n) {\n  let result = true\n\n  if (ccFilter !== 'Prioritized') {\n    switch (ccFilter) {\n      case 'Scandinavia':\n      case 'Nordic': {\n        result = country.regions?.includes(ccFilter)\n        break\n      }\n      case 'Europe': {\n        result = country.continent.includes(ccFilter)\n        break\n      }\n    }\n  }\n\n  if (result && filterCountries) {\n    result = filterCountries(country)\n  }\n\n  return result\n}\n\nexport function makeCountryFilterSet(ccFilter: CountryFilterSet) {\n  return (country: CountryType) => {\n    switch (ccFilter) {\n      case 'Scandinavia':\n      case 'Nordic':\n        return country.regions?.includes(ccFilter)\n      case 'Europe':\n        return country.continent.includes(ccFilter)\n    }\n    return true\n  }\n}\n\nSelectCountry._supportsSpacingProps = true\nexport default SelectCountry\n"],"mappings":"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"}

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Props as OptionFieldProps } from '../Option';
 import { FieldBlockWidth } from '../../FieldBlock';
 import { FieldProps, Path } from '../../types';
 import type { FormStatusText } from '../../../../components/FormStatus';
@@ -18,6 +19,7 @@ export type Data = Array<{
     title: React.ReactNode;
     text?: React.ReactNode;
     disabled?: boolean;
+    style?: React.CSSProperties;
 }>;
 export type Props = FieldProps<IOption['value']> & {
     /**
@@ -34,6 +36,11 @@ export type Props = FieldProps<IOption['value']> & {
      * Defines the layout of the options for radio and button variants.
      */
     optionsLayout?: 'horizontal' | 'vertical';
+    /**
+     * Transform the displayed selection for Dropdown and Autocomplete variant.
+     * Use it to display a different value than the one in the data set.
+     */
+    transformSelection?: (props: OptionFieldProps) => React.ReactNode;
     /**
      * The path to the context data (Form.Handler).
      * The context data object needs to have a `value` and a `title` property.
@@ -71,5 +78,5 @@ type OptionProps = React.ComponentProps<React.FC<{
 export declare function mapOptions(children: React.ReactNode, { createOption, }: {
     createOption: (props: OptionProps, i: number) => React.ReactNode;
 }): any;
-export declare function makeOptions<T = DrawerListProps['data']>(children: React.ReactNode): T;
+export declare function makeOptions<T = DrawerListProps['data']>(children: React.ReactNode, transformSelection?: Props['transformSelection']): T;
 export default Selection;

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

@@ -25,7 +25,6 @@ function Selection(props) {
     layout = 'vertical',
     optionsLayout = 'vertical',
     placeholder,
-    path,
     value,
     info,
     warning,
@@ -38,6 +37,7 @@ function Selection(props) {
     setHasFocus,
     handleChange,
     setDisplayValue,
+    transformSelection,
     data,
     dataPath,
     children,
@@ -103,7 +103,7 @@ function Selection(props) {
               label
             } = _ref5;
             if (v === value) {
-              setDisplayValue(path, label);
+              setDisplayValue(label);
             }
           }
         });
@@ -122,9 +122,9 @@ function Selection(props) {
     case 'dropdown':
       {
         var _data$find;
-        const data = renderDropdownItems(dataList).concat(makeOptions(children)).filter(Boolean);
+        const data = renderDropdownItems(dataList, transformSelection).concat(makeOptions(children, transformSelection)).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);
+        setDisplayValue(displayValue);
         const sharedProps = _objectSpread(_objectSpread({
           id,
           list_class: 'dnb-forms-field-selection__list',
@@ -220,7 +220,7 @@ export function mapOptions(children, _ref8) {
     return child;
   });
 }
-export function makeOptions(children) {
+export function makeOptions(children, transformSelection) {
   return React.Children.map(children, child => {
     var _child, _child$props, _child$props$children;
     if (((_child = child) === null || _child === void 0 ? void 0 : (_child$props = _child['props']) === null || _child$props === void 0 ? void 0 : (_child$props$children = _child$props.children) === null || _child$props$children === void 0 ? void 0 : _child$props$children.type) === OptionField) {
@@ -231,12 +231,16 @@ export function makeOptions(children) {
       const props = child.props;
       const title = (_ref9 = (_props$title = props.title) !== null && _props$title !== void 0 ? _props$title : props.children) !== null && _ref9 !== void 0 ? _ref9 : _em || (_em = React.createElement("em", null, "Untitled"));
       const content = props.text ? [title, props.text] : title;
+      const selected_value = transformSelection ? transformSelection(props) : undefined;
       const selectedKey = String((_props$value = props.value) !== null && _props$value !== void 0 ? _props$value : '');
       const disabled = props.disabled;
+      const style = props.style;
       return {
         selectedKey,
+        selected_value,
         content,
-        disabled
+        disabled,
+        style
       };
     }
     if (child) {
@@ -246,18 +250,21 @@ export function makeOptions(children) {
     }
   });
 }
-function renderDropdownItems(data) {
-  return (data === null || data === void 0 ? void 0 : data.map(_ref10 => {
-    let {
+function renderDropdownItems(data, transformSelection) {
+  return (data === null || data === void 0 ? void 0 : data.map(props => {
+    const {
       value,
       title,
       text,
-      disabled
-    } = _ref10;
+      disabled,
+      style
+    } = props;
     return {
       selectedKey: value,
       content: (text ? [title, text] : title) || _em2 || (_em2 = React.createElement("em", null, "Untitled")),
-      disabled
+      selected_value: transformSelection ? transformSelection(props) : undefined,
+      disabled,
+      style
     };
   })) || [];
 }

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

@@ -1 +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$title","_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  disabled?: boolean\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(\n  children: React.ReactNode,\n  {\n    createOption,\n  }: { createOption: (props: OptionProps, i: number) => React.ReactNode }\n) {\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.title ?? props.children ?? <em>Untitled</em>\n      const content = props.text ? [title, props.text] : title\n      const selectedKey = String(props.value ?? '')\n      const disabled = props.disabled\n\n      return { selectedKey, content, disabled }\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, disabled }) => {\n      return {\n        selectedKey: value,\n        content: (text ? [title, text] : title) || <em>Untitled</em>,\n        disabled,\n      }\n    }) || []\n  )\n}\n\nSelection._supportsSpacingProps = true\nexport default Selection\n"],"mappings":"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"}
+{"version":3,"file":"Selection.js","names":["React","useMemo","useCallback","classnames","convertJsxToString","makeUniqueId","ToggleButton","Dropdown","Radio","Autocomplete","HelpButton","OptionField","useFieldProps","checkForError","pickSpacingProps","FieldBlock","convertCamelCaseProps","useDataValue","Selection","props","clearValue","id","className","variant","layout","optionsLayout","placeholder","value","info","warning","error","hasError","disabled","emptyValue","width","htmlAttributes","setHasFocus","handleChange","setDisplayValue","transformSelection","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$title","_props$value","_em","selected_value","style","_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  disabled?: boolean\n  style?: React.CSSProperties\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   * Transform the displayed selection for Dropdown and Autocomplete variant.\n   * Use it to display a different value than the one in the data set.\n   */\n  transformSelection?: (props: OptionFieldProps) => React.ReactNode\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    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    transformSelection,\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(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, transformSelection)\n        .concat(makeOptions(children, transformSelection))\n        .filter(Boolean)\n      const displayValue = data.find((item) => item.selectedKey === value)\n        ?.content\n      setDisplayValue(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(\n  children: React.ReactNode,\n  {\n    createOption,\n  }: { createOption: (props: OptionProps, i: number) => React.ReactNode }\n) {\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  transformSelection?: Props['transformSelection']\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.title ?? props.children ?? <em>Untitled</em>\n      const content = props.text ? [title, props.text] : title\n      const selected_value = transformSelection\n        ? transformSelection(props)\n        : undefined\n      const selectedKey = String(props.value ?? '')\n      const disabled = props.disabled\n      const style = props.style\n\n      return { selectedKey, selected_value, content, disabled, style }\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(\n  data: Data,\n  transformSelection?: Props['transformSelection']\n) {\n  return (\n    data?.map((props) => {\n      const { value, title, text, disabled, style } = props\n      return {\n        selectedKey: value,\n        content: (text ? [title, text] : title) || <em>Untitled</em>,\n        selected_value: transformSelection\n          ? transformSelection(props)\n          : undefined,\n        disabled,\n        style,\n      }\n    }) || []\n  )\n}\n\nSelection._supportsSpacingProps = true\nexport default Selection\n"],"mappings":"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"}

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

@@ -9,6 +9,11 @@ export const SelectionProperties = {
     type: ['number', 'string'],
     status: 'optional'
   },
+  transformSelection: {
+    doc: 'Transform the displayed selection for Dropdown and Autocomplete variant. Use it to display a different value than the one in the data set. The first parameter is the props of the Option component or data item. You can return a React.Node that will be displayed in the selection.',
+    type: 'function',
+    status: 'optional'
+  },
   optionsLayout: {
     doc: 'Layout for the list of options. Can be `horizontal` or `vertical`.',
     type: 'string',

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

@@ -1 +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"}
+{"version":3,"file":"SelectionDocs.js","names":["SelectionProperties","variant","doc","type","status","value","transformSelection","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  transformSelection: {\n    doc: 'Transform the displayed selection for Dropdown and Autocomplete variant. Use it to display a different value than the one in the data set. The first parameter is the props of the Option component or data item. You can return a React.Node that will be displayed in the selection.',\n    type: 'function',\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,kBAAkB,EAAE;IAClBJ,GAAG,EAAE,wRAAwR;IAC7RC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDG,aAAa,EAAE;IACbL,GAAG,EAAE,oEAAoE;IACzEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,KAAK,EAAE;IACLN,GAAG,EAAE,kGAAkG;IACvGC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,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,sDAAsD;IAC3DC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV;AACF,CAAC"}

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

@@ -33,6 +33,7 @@ function SliderComponent(props) {
   const {
     id,
     path,
+    itemPath,
     step = 1,
     min = 0,
     max = 100,
@@ -58,13 +59,13 @@ function SliderComponent(props) {
     omitMultiplePathWarning: true
   });
   useMemo(() => {
-    if (path && numberFormat) {
+    if ((path || itemPath) && numberFormat) {
       const {
         number
       } = getFormattedNumber(value, numberFormat);
-      setDisplayValue(path, number);
+      setDisplayValue(number);
     }
-  }, [numberFormat, path, setDisplayValue, value]);
+  }, [itemPath, numberFormat, path, setDisplayValue, value]);
   const handleLocalChange = useCallback(_ref3 => {
     let {
       value

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","names":["React","useCallback","useContext","useMemo","useRef","FieldBlock","useFieldProps","getFormattedNumber","Slider","pickSpacingProps","DataContext","useDataValue","SliderComponent","props","_ref","_ref2","_props$paths","dataContextRef","current","getSourceValue","getValues","source","Array","isArray","map","s","value","paths","path","defaultValue","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","_ref3","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(\n    props.paths ?? props.path ?? props.value ?? props.defaultValue\n  )\n  const preparedProps = {\n    ...props,\n    step: getSourceValue(props.step),\n    min: getSourceValue(props.min),\n    max: getSourceValue(props.max),\n  }\n\n  const {\n    id,\n    path,\n    step = 1,\n    min = 0,\n    max = 100,\n    width = 'stretch',\n    hasError,\n    disabled,\n    vertical,\n    reverse,\n    hideButtons,\n    multiThumbBehavior,\n    thumbTitle,\n    subtractTitle,\n    addTitle,\n    numberFormat,\n    tooltip,\n    alwaysShowTooltip,\n    extensions,\n    handleChange,\n    handleFocus,\n    handleBlur,\n    setDisplayValue,\n  } = useFieldProps(preparedProps, {\n    omitMultiplePathWarning: true,\n  })\n\n  useMemo(() => {\n    if (path && numberFormat) {\n      const { number } = getFormattedNumber(value, numberFormat)\n      setDisplayValue(path, number)\n    }\n  }, [numberFormat, path, setDisplayValue, value])\n\n  const handleLocalChange = useCallback(\n    ({ value }: { value: number | number[] }) => {\n      if (Array.isArray(props.paths) && Array.isArray(value)) {\n        value.forEach((value, i) => {\n          dataContextRef.current.updateDataValue(props.paths[i], value)\n        })\n      }\n\n      handleChange?.(value)\n    },\n    [handleChange, props.paths]\n  )\n\n  const fieldBlockProps: FieldBlockProps = {\n    forId: id,\n    width,\n    ...pickSpacingProps(props),\n  }\n\n  const sliderProps: SliderProps = {\n    value,\n    step,\n    min,\n    max,\n    disabled,\n    status: hasError ? 'error' : undefined,\n    on_change: handleLocalChange,\n    on_drag_start: handleFocus,\n    on_drag_end: handleBlur,\n    vertical,\n    reverse,\n    hideButtons,\n    multiThumbBehavior,\n    thumbTitle,\n    subtractTitle,\n    addTitle,\n    numberFormat,\n    tooltip,\n    alwaysShowTooltip,\n    extensions,\n    stretch: true,\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps}>\n      <Slider {...sliderProps} />\n    </FieldBlock>\n  )\n}\n\nexport default SliderComponent\n\nSliderComponent._supportsSpacingProps = true\n"],"mappings":"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"}
+{"version":3,"file":"Slider.js","names":["React","useCallback","useContext","useMemo","useRef","FieldBlock","useFieldProps","getFormattedNumber","Slider","pickSpacingProps","DataContext","useDataValue","SliderComponent","props","_ref","_ref2","_props$paths","dataContextRef","current","getSourceValue","getValues","source","Array","isArray","map","s","value","paths","path","defaultValue","preparedProps","_objectSpread","step","min","max","id","itemPath","width","hasError","disabled","vertical","reverse","hideButtons","multiThumbBehavior","thumbTitle","subtractTitle","addTitle","numberFormat","tooltip","alwaysShowTooltip","extensions","handleChange","handleFocus","handleBlur","setDisplayValue","omitMultiplePathWarning","number","handleLocalChange","_ref3","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(\n    props.paths ?? props.path ?? props.value ?? props.defaultValue\n  )\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    itemPath,\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 || itemPath) && numberFormat) {\n      const { number } = getFormattedNumber(value, numberFormat)\n      setDisplayValue(number)\n    }\n  }, [itemPath, numberFormat, path, setDisplayValue, value])\n\n  const handleLocalChange = useCallback(\n    ({ value }: { value: number | number[] }) => {\n      if (Array.isArray(props.paths) && Array.isArray(value)) {\n        value.forEach((value, i) => {\n          dataContextRef.current.updateDataValue(props.paths[i], value)\n        })\n      }\n\n      handleChange?.(value)\n    },\n    [handleChange, props.paths]\n  )\n\n  const fieldBlockProps: FieldBlockProps = {\n    forId: id,\n    width,\n    ...pickSpacingProps(props),\n  }\n\n  const sliderProps: SliderProps = {\n    value,\n    step,\n    min,\n    max,\n    disabled,\n    status: hasError ? 'error' : undefined,\n    on_change: handleLocalChange,\n    on_drag_start: handleFocus,\n    on_drag_end: handleBlur,\n    vertical,\n    reverse,\n    hideButtons,\n    multiThumbBehavior,\n    thumbTitle,\n    subtractTitle,\n    addTitle,\n    numberFormat,\n    tooltip,\n    alwaysShowTooltip,\n    extensions,\n    stretch: true,\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps}>\n      <Slider {...sliderProps} />\n    </FieldBlock>\n  )\n}\n\nexport default SliderComponent\n\nSliderComponent._supportsSpacingProps = true\n"],"mappings":"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"}

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

@@ -106,8 +106,8 @@ function StringComponent(props) {
   } = useFieldProps(preparedProps);
   useEffect(() => {
     var _innerRef$current;
-    setDisplayValue(props.path, (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.value);
-  }, [innerRef, props.path, setDisplayValue, value]);
+    setDisplayValue((_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.value);
+  }, [innerRef, setDisplayValue, value]);
   const transformInstantly = useCallback(value => props.capitalize ? toCapitalized(value) : value, [props.capitalize]);
   const {
     handleSubmit