@dnb/eufemia 10.55.0 → 10.56.0

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

@@ -1 +1 @@
-{"version":3,"file":"PostalCodeAndCity.js","names":["React","useCallback","classnames","StringField","CompositionField","useTranslation","useDataValue","COUNTRY","defaultCountry","PostalCodeAndCity","props","translations","getSourceValue","postalCode","city","help","width","country","fieldBlockProps","_objectWithoutProperties","_excluded","pattern","cityPattern","className","cityClassName","label","cityLabel","cityWidth","errorMessages","cityErrorMessages","countryValue","handleDefaults","mask","placeholder","_objectSpread","postalCodeMask","postalCodePattern","postalCodePlaceHolder","postalCodeClassName","postalCodeLabel","postalCodeWidth","postalCodeErrorMessages","postalCodeValidationProps","createElement","_extends","PostalCode","errorRequired","errorPattern","inputClassName","inputMode","autoComplete","City","trim","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport classnames from 'classnames'\nimport { Props as FieldBlockProps } from '../../FieldBlock'\nimport StringField, { Props as StringFieldProps } from '../String'\nimport CompositionField from '../Composition'\nimport { FieldHelpProps, Path } from '../../types'\nimport useTranslation from '../../hooks/useTranslation'\nimport useDataValue from '../../hooks/useDataValue'\nimport { COUNTRY as defaultCountry } from '../../../../shared/defaults'\n\nexport type Props = FieldHelpProps &\n  Omit<FieldBlockProps, 'children'> &\n  Partial<Record<'postalCode' | 'city', StringFieldProps>> & {\n    /**\n     * Defines which country the postal code and city is for.\n     * Setting it to anything other than `no` will remove the default norwegian postal code pattern.\n     * You can also use the value of another field to define the country, by using a path value i.e. `/myCountryPath`.\n     * Default: `NO`\n     */\n    // Add type for all country codes?\n    country?: Path | string\n  }\n\nfunction PostalCodeAndCity(props: Props) {\n  const translations = useTranslation()\n  const { getSourceValue } = useDataValue()\n\n  const {\n    postalCode = {},\n    city = {},\n    help,\n    width = 'large',\n    country = defaultCountry,\n    ...fieldBlockProps\n  } = props\n\n  const {\n    pattern: cityPattern,\n    className: cityClassName,\n    label: cityLabel,\n    width: cityWidth,\n    errorMessages: cityErrorMessages,\n  } = city\n\n  const countryValue = getSourceValue(country)\n  const handleDefaults = useCallback(\n    (postalCode: StringFieldProps) => {\n      const props: StringFieldProps = {}\n\n      switch (countryValue) {\n        case defaultCountry:\n        case 'DK':\n        case 'CH': {\n          props.mask = [/\\d/, /\\d/, /\\d/, /\\d/]\n          props.pattern = '^[0-9]{4}$'\n          props.placeholder = '0000'\n          break\n        }\n        default:\n          props.width = '8rem'\n          break\n      }\n\n      return { ...props, ...postalCode }\n    },\n    [countryValue]\n  )\n\n  const {\n    mask: postalCodeMask,\n    pattern: postalCodePattern,\n    placeholder: postalCodePlaceHolder,\n    className: postalCodeClassName,\n    label: postalCodeLabel,\n    width: postalCodeWidth,\n    errorMessages: postalCodeErrorMessages,\n  } = handleDefaults(postalCode)\n\n  const postalCodeValidationProps = {\n    mask: postalCodeMask,\n    pattern: postalCodePattern,\n    placeholder: postalCodePlaceHolder,\n  }\n\n  return (\n    <CompositionField\n      className={classnames(\n        'dnb-forms-field-postal-code-and-city',\n        props.className\n      )}\n      {...fieldBlockProps}\n      width={width}\n    >\n      <StringField\n        {...postalCode}\n        {...postalCodeValidationProps}\n        className={classnames(\n          'dnb-forms-field-postal-code-and-city__postal-code',\n          postalCodeClassName\n        )}\n        label={postalCodeLabel ?? translations.PostalCode.label}\n        errorMessages={{\n          'Field.errorRequired': translations.PostalCode.errorRequired,\n          'Field.errorPattern': translations.PostalCode.errorPattern,\n          ...postalCodeErrorMessages,\n        }}\n        width={postalCodeWidth ?? false}\n        inputClassName=\"dnb-forms-field-postal-code-and-city__postal-code-input\"\n        inputMode=\"numeric\"\n        autoComplete=\"postal-code\"\n      />\n\n      <StringField\n        {...city}\n        className={classnames(\n          'dnb-forms-field-postal-code-and-city__city',\n          cityClassName\n        )}\n        label={cityLabel ?? translations.City.label}\n        errorMessages={{\n          'Field.errorRequired': translations.City.errorRequired,\n          'Field.errorPattern': translations.City.errorPattern,\n          ...cityErrorMessages,\n        }}\n        pattern={cityPattern ?? '^[A-Za-zÆØÅæøå -]+$'}\n        trim\n        width={cityWidth ?? 'stretch'}\n        autoComplete=\"address-level2\"\n        help={help}\n      />\n    </CompositionField>\n  )\n}\n\nPostalCodeAndCity._supportsSpacingProps = true\nexport default PostalCodeAndCity\n"],"mappings":"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"}
+{"version":3,"file":"PostalCodeAndCity.js","names":["React","useCallback","classnames","StringField","CompositionField","useTranslation","useDataValue","COUNTRY","defaultCountry","PostalCodeAndCity","props","translations","getSourceValue","postalCode","city","help","width","country","fieldBlockProps","_objectWithoutProperties","_excluded","pattern","cityPattern","className","cityClassName","label","cityLabel","cityWidth","errorMessages","cityErrorMessages","countryValue","handleDefaults","mask","placeholder","_objectSpread","postalCodeMask","postalCodePattern","postalCodePlaceHolder","postalCodeClassName","postalCodeLabel","postalCodeWidth","postalCodeErrorMessages","postalCodeValidationProps","createElement","_extends","PostalCode","errorRequired","errorPattern","inputClassName","inputMode","autoComplete","City","trim","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport classnames from 'classnames'\nimport { Props as FieldBlockProps } from '../../FieldBlock'\nimport StringField, { Props as StringFieldProps } from '../String'\nimport CompositionField from '../Composition'\nimport { Path } from '../../types'\nimport useTranslation from '../../hooks/useTranslation'\nimport useDataValue from '../../hooks/useDataValue'\nimport { COUNTRY as defaultCountry } from '../../../../shared/defaults'\nimport { HelpProps } from '../../../../components/help-button/HelpButtonInline'\n\nexport type Props = Pick<\n  FieldBlockProps,\n  'error' | 'warning' | 'info' | 'width' | 'className'\n> &\n  Partial<Record<'postalCode' | 'city', StringFieldProps>> & {\n    /**\n     * Defines which country the postal code and city is for.\n     * Setting it to anything other than `no` will remove the default norwegian postal code pattern.\n     * You can also use the value of another field to define the country, by using a path value i.e. `/myCountryPath`.\n     * Default: `NO`\n     */\n    country?: Path | string\n    help?: HelpProps\n  }\n\nfunction PostalCodeAndCity(props: Props) {\n  const translations = useTranslation()\n  const { getSourceValue } = useDataValue()\n\n  const {\n    postalCode = {},\n    city = {},\n    help,\n    width = 'large',\n    country = defaultCountry,\n    ...fieldBlockProps\n  } = props\n\n  const {\n    pattern: cityPattern,\n    className: cityClassName,\n    label: cityLabel,\n    width: cityWidth,\n    errorMessages: cityErrorMessages,\n  } = city\n\n  const countryValue = getSourceValue(country)\n  const handleDefaults = useCallback(\n    (postalCode: StringFieldProps) => {\n      const props: StringFieldProps = {}\n\n      switch (countryValue) {\n        case defaultCountry:\n        case 'DK':\n        case 'CH': {\n          props.mask = [/\\d/, /\\d/, /\\d/, /\\d/]\n          props.pattern = '^[0-9]{4}$'\n          props.placeholder = '0000'\n          break\n        }\n        default:\n          props.width = '8rem'\n          break\n      }\n\n      return { ...props, ...postalCode }\n    },\n    [countryValue]\n  )\n\n  const {\n    mask: postalCodeMask,\n    pattern: postalCodePattern,\n    placeholder: postalCodePlaceHolder,\n    className: postalCodeClassName,\n    label: postalCodeLabel,\n    width: postalCodeWidth,\n    errorMessages: postalCodeErrorMessages,\n  } = handleDefaults(postalCode)\n\n  const postalCodeValidationProps = {\n    mask: postalCodeMask,\n    pattern: postalCodePattern,\n    placeholder: postalCodePlaceHolder,\n  }\n\n  return (\n    <CompositionField\n      className={classnames(\n        'dnb-forms-field-postal-code-and-city',\n        props.className\n      )}\n      {...fieldBlockProps}\n      width={width}\n    >\n      <StringField\n        {...postalCode}\n        {...postalCodeValidationProps}\n        className={classnames(\n          'dnb-forms-field-postal-code-and-city__postal-code',\n          postalCodeClassName\n        )}\n        label={postalCodeLabel ?? translations.PostalCode.label}\n        errorMessages={{\n          'Field.errorRequired': translations.PostalCode.errorRequired,\n          'Field.errorPattern': translations.PostalCode.errorPattern,\n          ...postalCodeErrorMessages,\n        }}\n        width={postalCodeWidth ?? false}\n        inputClassName=\"dnb-forms-field-postal-code-and-city__postal-code-input\"\n        inputMode=\"numeric\"\n        autoComplete=\"postal-code\"\n      />\n\n      <StringField\n        help={help}\n        {...city}\n        className={classnames(\n          'dnb-forms-field-postal-code-and-city__city',\n          cityClassName\n        )}\n        label={cityLabel ?? translations.City.label}\n        errorMessages={{\n          'Field.errorRequired': translations.City.errorRequired,\n          'Field.errorPattern': translations.City.errorPattern,\n          ...cityErrorMessages,\n        }}\n        pattern={cityPattern ?? '^[A-Za-zÆØÅæøå -]+$'}\n        trim\n        width={cityWidth ?? 'stretch'}\n        autoComplete=\"address-level2\"\n      />\n    </CompositionField>\n  )\n}\n\nPostalCodeAndCity._supportsSpacingProps = true\nexport default PostalCodeAndCity\n"],"mappings":"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"}

package/es/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCityDocs.js

@@ -1,3 +1,4 @@
+import { FieldProperties } from '../FieldDocs';
 export const PostalCodeAndCityProperties = {
   country: {
     doc: 'Defines which country the postal code and city is for, based on the ISO 3166-1 alpha-2 format i.e. `NO`, `DE` etc. ' + 'Setting it to anything other than `NO` will remove the default norwegian postal code pattern. ' + 'You can also use the value of another field to define the country, by using a path value i.e. `/myCountryPath`. ' + 'Defaults to `NO`',
@@ -14,10 +15,6 @@ export const PostalCodeAndCityProperties = {
     type: 'object',
     status: 'required'
   },
-  help: {
-    doc: 'Provide a help button. Object consisting of `title` and `content`.',
-    type: 'object',
-    status: 'optional'
-  }
+  help: FieldProperties.help
 };
 //# sourceMappingURL=PostalCodeAndCityDocs.js.map

package/es/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCityDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"PostalCodeAndCityDocs.js","names":["PostalCodeAndCityProperties","country","doc","type","status","postalCode","city","help"],"sources":["../../../../../../src/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCityDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const PostalCodeAndCityProperties: PropertiesTableProps = {\n  country: {\n    doc:\n      'Defines which country the postal code and city is for, based on the ISO 3166-1 alpha-2 format i.e. `NO`, `DE` etc. ' +\n      'Setting it to anything other than `NO` will remove the default norwegian postal code pattern. ' +\n      'You can also use the value of another field to define the country, by using a path value i.e. `/myCountryPath`. ' +\n      'Defaults to `NO`',\n    type: ['Path', 'string'],\n    status: 'optional',\n  },\n  postalCode: {\n    doc: 'Properties for the [Field.String](/uilib/extensions/forms/base-fields/String/) component for postcode.',\n    type: 'object',\n    status: 'required',\n  },\n  city: {\n    doc: 'Properties for the [Field.String](/uilib/extensions/forms/base-fields/String/) component for city.',\n    type: 'object',\n    status: 'required',\n  },\n  help: {\n    doc: 'Provide a help button. Object consisting of `title` and `content`.',\n    type: 'object',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,2BAAiD,GAAG;EAC/DC,OAAO,EAAE;IACPC,GAAG,EACD,qHAAqH,GACrH,gGAAgG,GAChG,kHAAkH,GAClH,kBAAkB;IACpBC,IAAI,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC;IACxBC,MAAM,EAAE;EACV,CAAC;EACDC,UAAU,EAAE;IACVH,GAAG,EAAE,wGAAwG;IAC7GC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,IAAI,EAAE;IACJJ,GAAG,EAAE,oGAAoG;IACzGC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,IAAI,EAAE;IACJL,GAAG,EAAE,oEAAoE;IACzEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV;AACF,CAAC"}
+{"version":3,"file":"PostalCodeAndCityDocs.js","names":["FieldProperties","PostalCodeAndCityProperties","country","doc","type","status","postalCode","city","help"],"sources":["../../../../../../src/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCityDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\nimport { FieldProperties } from '../FieldDocs'\n\nexport const PostalCodeAndCityProperties: PropertiesTableProps = {\n  country: {\n    doc:\n      'Defines which country the postal code and city is for, based on the ISO 3166-1 alpha-2 format i.e. `NO`, `DE` etc. ' +\n      'Setting it to anything other than `NO` will remove the default norwegian postal code pattern. ' +\n      'You can also use the value of another field to define the country, by using a path value i.e. `/myCountryPath`. ' +\n      'Defaults to `NO`',\n    type: ['Path', 'string'],\n    status: 'optional',\n  },\n  postalCode: {\n    doc: 'Properties for the [Field.String](/uilib/extensions/forms/base-fields/String/) component for postcode.',\n    type: 'object',\n    status: 'required',\n  },\n  city: {\n    doc: 'Properties for the [Field.String](/uilib/extensions/forms/base-fields/String/) component for city.',\n    type: 'object',\n    status: 'required',\n  },\n  help: FieldProperties.help,\n}\n"],"mappings":"AACA,SAASA,eAAe,QAAQ,cAAc;AAE9C,OAAO,MAAMC,2BAAiD,GAAG;EAC/DC,OAAO,EAAE;IACPC,GAAG,EACD,qHAAqH,GACrH,gGAAgG,GAChG,kHAAkH,GAClH,kBAAkB;IACpBC,IAAI,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC;IACxBC,MAAM,EAAE;EACV,CAAC;EACDC,UAAU,EAAE;IACVH,GAAG,EAAE,wGAAwG;IAC7GC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,IAAI,EAAE;IACJJ,GAAG,EAAE,oGAAoG;IACzGC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,IAAI,EAAER,eAAe,CAACQ;AACxB,CAAC"}

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

@@ -8,7 +8,7 @@ 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?: Error | import("../..").FormError | (Error | import("../..").FormError)[];
         label?: import("react").ReactNode;
         path?: string;
         'aria-hidden'?: boolean | "true" | "false";
@@ -77,6 +77,7 @@ declare function useFieldProvider(props?: Omit<FieldProviderProps, 'children'>):
         onFocus?: (value: unknown) => void;
         onBlur?: (value: unknown) => void;
         onChange?: (value: unknown) => void | import("../../types").EventReturnWithStateObjectAndSuccess | Promise<void | import("../../types").EventReturnWithStateObjectAndSuccess>;
+        help?: import("../../../../components/help-button/HelpButtonInline").HelpProps;
         locale?: string;
         autoComplete?: AutoFill;
         disabled?: boolean;

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

@@ -1,8 +1,8 @@
 import { type CountryType, type CountryLang } from '../../constants/countries';
-import { FieldHelpProps, FieldPropsWithExtraValue } from '../../types';
+import { FieldPropsWithExtraValue } from '../../types';
 import { FieldBlockWidth } from '../../FieldBlock';
 export type CountryFilterSet = 'Scandinavia' | 'Nordic' | 'Europe' | 'Prioritized';
-export type Props = FieldHelpProps & FieldPropsWithExtraValue<string, CountryType, undefined | string> & {
+export type Props = FieldPropsWithExtraValue<string, CountryType, undefined | string> & {
     /**
      * Lists only the countries you want to show. Can be `Scandinavia`, `Nordic`, `Europe` or `Prioritized`.
      * Defaults to `Prioritized`.

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

@@ -9,7 +9,7 @@ import classnames from 'classnames';
 import SharedContext from '../../../../shared/Context';
 import FieldBlockContext from '../../FieldBlock/FieldBlockContext';
 import { LOCALE } from '../../../../shared/defaults';
-import { Autocomplete, HelpButton } from '../../../../components';
+import { Autocomplete } from '../../../../components';
 import { pickSpacingProps } from '../../../../components/flex/utils';
 import countries, { prioritizedCountries } from '../../constants/countries';
 import { useFieldProps } from '../../hooks';
@@ -59,7 +59,6 @@ function SelectCountry(props) {
     disabled,
     value,
     width,
-    help,
     htmlAttributes,
     handleFocus,
     handleBlur,
@@ -163,9 +162,6 @@ function SelectCountry(props) {
     status: hasError ? 'error' : undefined,
     show_submit_button: true,
     keep_selection: true,
-    suffix: help ? React.createElement(HelpButton, {
-      title: help.title
-    }, help.content) : undefined,
     autoComplete: "country-name",
     no_animation: props.noAnimation
   }, htmlAttributes)));

package/es/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","HelpButton","pickSpacingProps","countries","prioritizedCountries","useFieldProps","FieldBlock","useTranslation","SelectCountry","props","_props$width","sharedContext","fieldBlockContext","label","defaultLabel","placeholder","defaultPlaceholder","errorRequired","lang","locale","split","getCountryObjectByIso","value","country","find","iso","i18n","provideAdditionalArgs","errorMessages","required","preparedProps","_objectSpread","width","composition","id","className","ccFilter","hasError","disabled","help","htmlAttributes","handleFocus","handleBlur","handleChange","updateValue","setDisplayValue","forceUpdate","filterCountries","dataRef","langRef","wasFilled","filter","countryFilter","isLangChange","current","getCountryData","sort","window","requestAnimationFrame","handleCountryChange","data","newValue","selectedKey","fillData","onFocusHandler","updateData","onTypeHandler","currentValue","setHidden","event","_event$nativeEvent","nativeEvent","search","toLowerCase","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","suffix","title","content","autoComplete","no_animation","noAnimation","makeObject","_country$i18n$lang","en","a","b","_String","_String$localeCompare","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, HelpButton } 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 { FieldHelpProps, 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'\n\nexport type Props = FieldHelpProps &\n  FieldPropsWithExtraValue<string, CountryType, undefined | string> & {\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    help,\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        suffix={\n          help ? (\n            <HelpButton title={help.title}>{help.content}</HelpButton>\n          ) : undefined\n        }\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","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","data","newValue","selectedKey","fillData","onFocusHandler","updateData","onTypeHandler","currentValue","setHidden","event","_event$nativeEvent","nativeEvent","search","toLowerCase","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","a","b","_String","_String$localeCompare","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'\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":";;;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AACvE,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,aAAa,MAAM,4BAA4B;AACtD,OAAOC,iBAAiB,MAAM,oCAAoC;AAClE,SAASC,MAAM,QAAQ,6BAA6B;AACpD,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,gBAAgB,QAAQ,mCAAmC;AACpE,OAAOC,SAAS,IACdC,oBAAoB,QAGf,2BAA2B;AAClC,SAASC,aAAa,QAAQ,aAAa;AAE3C,OAAOC,UAAU,MAGV,kBAAkB;AACzB,OAAOC,cAAc,MAAM,4BAA4B;AAmCvD,SAASC,aAAaA,CAACC,KAAY,EAAE;EAAA,IAAAC,YAAA;EACnC,MAAMC,aAAa,GAAGjB,UAAU,CAACI,aAAa,CAAC;EAC/C,MAAMc,iBAAiB,GAAGlB,UAAU,CAACK,iBAAiB,CAAC;EACvD,MAAM;IACJc,KAAK,EAAEC,YAAY;IACnBC,WAAW,EAAEC,kBAAkB;IAC/BC;EACF,CAAC,GAAGV,cAAc,CAAC,CAAC,CAACC,aAAa;EAClC,MAAMU,IAAI,GAAG,CAACP,aAAa,CAACQ,MAAM,IAAInB,MAAM,EAAEoB,KAAK,CACjD,GACF,CAAC,CAAC,CAAC,CAAgB;EAEnB,MAAMC,qBAAqB,GAAG5B,WAAW,CACtC6B,KAAyB,IAAK;IAC7B,MAAMC,OAAO,GAAGpB,SAAS,CAACqB,IAAI,CAAC,CAAC;MAAEC;IAAI,CAAC,KAAKH,KAAK,KAAKG,GAAG,CAAC;IAC1D,IAAIF,OAAO,aAAPA,OAAO,eAAPA,OAAO,CAAEG,IAAI,EAAE;MACjBH,OAAO,CAAC,MAAM,CAAC,GAAGA,OAAO,CAACG,IAAI,CAACR,IAAI,CAAC;IACtC;IACA,OAAOK,OAAO;EAChB,CAAC,EACD,CAACL,IAAI,CACP,CAAC;EAED,MAAMS,qBAAqB,GAAGlC,WAAW,CACtC6B,KAAyB,IAAK;IAC7B,MAAMC,OAAO,GAAGF,qBAAqB,CAACC,KAAK,CAAC;IAE5C,IAAIC,OAAO,aAAPA,OAAO,eAAPA,OAAO,CAAEE,GAAG,EAAE;MAChB,OAAOF,OAAO;IAChB;EACF,CAAC,EACD,CAACF,qBAAqB,CACxB,CAAC;EAED,MAAMO,aAAa,GAAGjC,OAAO,CAC3B,OAAO;IACLkC,QAAQ,EAAEZ;EACZ,CAAC,CAAC,EACF,CAACA,aAAa,CAChB,CAAC;EAED,MAAMa,aAAoB,GAAAC,aAAA,CAAAA,aAAA;IACxBH;EAAa,GACVnB,KAAK;IACRuB,KAAK,GAAAtB,YAAA,GACHD,KAAK,CAACuB,KAAK,cAAAtB,YAAA,cAAAA,YAAA,GACVE,iBAAiB,aAAjBA,iBAAiB,eAAjBA,iBAAiB,CAAEqB,WAAW,GAAG,SAAS,GAAG,OAAQ;IACxDN;EAAqB,EACtB;EAED,MAAM;IACJO,EAAE;IACFC,SAAS;IACTpB,WAAW,GAAGC,kBAAkB;IAChCH,KAAK,GAAGC,YAAY;IACpBX,SAAS,EAAEiC,QAAQ,GAAG,aAAa;IACnCC,QAAQ;IACRC,QAAQ;IACRhB,KAAK;IACLU,KAAK;IACLO,cAAc;IACdC,WAAW;IACXC,UAAU;IACVC,YAAY;IACZC,WAAW;IACXC,eAAe;IACfC,WAAW;IACXC;EACF,CAAC,GAAGzC,aAAa,CAACyB,aAAa,CAAC;EAEhC,MAAMiB,OAAO,GAAGnD,MAAM,CAAC,IAAI,CAAC;EAC5B,MAAMoD,OAAO,GAAGpD,MAAM,CAACsB,IAAI,CAAC;EAC5B,MAAM+B,SAAS,GAAGrD,MAAM,CAAC,KAAK,CAAC;EAE/B,MAAMsD,MAAM,GAAGzD,WAAW,CACvB8B,OAAoB,IAAK;IACxB,OAAO4B,aAAa,CAAC5B,OAAO,EAAEuB,eAAe,EAAEV,QAAQ,CAAC;EAC1D,CAAC,EACD,CAACA,QAAQ,EAAEU,eAAe,CAC5B,CAAC;EAUDnD,OAAO,CAAC,MAAM;IACZ,MAAMyD,YAAY,GAAGlC,IAAI,KAAK8B,OAAO,CAACK,OAAO;IAE7C,IAAID,YAAY,IAAI,CAACH,SAAS,CAACI,OAAO,EAAE;MACtCL,OAAO,CAACK,OAAO,GAAGnC,IAAI;MACtB6B,OAAO,CAACM,OAAO,GAAGC,cAAc,CAAC;QAC/BpC,IAAI;QACJgC,MAAM,EAAE,CAACD,SAAS,CAACI,OAAO,GACrB9B,OAAO,IAAKA,OAAO,CAACE,GAAG,KAAKH,KAAK,GAClC4B,MAAM;QACVK,IAAI,EAAEnB;MACR,CAAC,CAAC;MAGF,IAAIgB,YAAY,IAAI9B,KAAK,IAAI,OAAOkC,MAAM,KAAK,WAAW,EAAE;QAC1Db,WAAW,CAAC,IAAI,CAAC;QACjBa,MAAM,CAACC,qBAAqB,CAAC,MAAM;UACjCd,WAAW,CAACrB,KAAK,CAAC;QACpB,CAAC,CAAC;MACJ;IACF;EACF,CAAC,EAAE,CAACJ,IAAI,EAAEgC,MAAM,EAAEd,QAAQ,EAAEO,WAAW,EAAErB,KAAK,CAAC,CAAC;EAEhD,MAAMoC,mBAAmB,GAAGjE,WAAW,CACrC,CAAC;IAAEkE;EAAwC,CAAC,KAAK;IAC/C,MAAMC,QAAQ,GAAGD,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEE,WAAW;IAClC,MAAMtC,OAAO,GAAGF,qBAAqB,CAACuC,QAAQ,CAAC;IAC/C,IAAIrC,OAAO,aAAPA,OAAO,eAAPA,OAAO,CAAEE,GAAG,EAAE;MAChBiB,YAAY,CAACnB,OAAO,CAACE,GAAG,EAAEF,OAAO,CAAC;IACpC;EACF,CAAC,EACD,CAACF,qBAAqB,EAAEqB,YAAY,CACtC,CAAC;EAED,MAAMoB,QAAQ,GAAGrE,WAAW,CAAC,MAAM;IACjC,IAAI,CAACwD,SAAS,CAACI,OAAO,EAAE;MACtBJ,SAAS,CAACI,OAAO,GAAG,IAAI;MACxBN,OAAO,CAACM,OAAO,GAAGC,cAAc,CAAC;QAC/BpC,IAAI,EAAE8B,OAAO,CAACK,OAAO;QACrBH,MAAM;QACNK,IAAI,EAAEnB;MACR,CAAC,CAAC;MACFS,WAAW,CAAC,CAAC;IACf;EACF,CAAC,EAAE,CAACT,QAAQ,EAAEc,MAAM,EAAEL,WAAW,CAAC,CAAC;EAEnC,MAAMkB,cAAc,GAAGtE,WAAW,CAChC,CAAC;IAAEuE;EAAW,CAAC,KAAK;IAClBF,QAAQ,CAAC,CAAC;IACVE,UAAU,CAACjB,OAAO,CAACM,OAAO,CAAC;IAC3Bb,WAAW,CAAC,CAAC;EACf,CAAC,EACD,CAACsB,QAAQ,EAAEtB,WAAW,CACxB,CAAC;EAED,MAAMyB,aAAa,GAAGxE,WAAW,CAC/B,CAAC;IAAE6B,KAAK,EAAE4C,YAAY;IAAEC,SAAS;IAAEC;EAAM,CAAC,KAAK;IAAA,IAAAC,kBAAA;IAE7C,IAAI,QAAOD,KAAK,aAALA,KAAK,wBAAAC,kBAAA,GAALD,KAAK,CAAEE,WAAW,cAAAD,kBAAA,uBAAlBA,kBAAA,CAAoBV,IAAI,MAAK,WAAW,EAAE;MACnD,MAAMY,MAAM,GAAGL,YAAY,CAACM,WAAW,CAAC,CAAC;MACzC,MAAMjD,OAAO,GAAGpB,SAAS,CAACqB,IAAI,CAAC,CAAC;QAAEE;MAAK,CAAC,KACtC+C,MAAM,CAACC,MAAM,CAAChD,IAAI,CAAC,CAACiD,IAAI,CAAEC,CAAC,IAAKA,CAAC,CAACJ,WAAW,CAAC,CAAC,CAACK,QAAQ,CAACN,MAAM,CAAC,CAClE,CAAC;MACD,IAAIhD,OAAO,aAAPA,OAAO,eAAPA,OAAO,CAAEE,GAAG,EAAE;QAChB0C,SAAS,CAAC,CAAC;QACXzB,YAAY,CAACnB,OAAO,CAACE,GAAG,CAAC;MAC3B;IACF;EACF,CAAC,EACD,CAACiB,YAAY,CACf,CAAC;EAED/C,OAAO,CAAC,MAAM;IAAA,IAAAmF,qBAAA,EAAAC,sBAAA;IACZnC,eAAe,CACbnC,KAAK,CAACuE,IAAI,GAAAF,qBAAA,GACVzD,qBAAqB,CAACC,KAAK,CAAC,cAAAwD,qBAAA,wBAAAC,sBAAA,GAA5BD,qBAAA,CAA8BpD,IAAI,cAAAqD,sBAAA,uBAAlCA,sBAAA,CAAqC/B,OAAO,CAACK,OAAO,CACtD,CAAC;EACH,CAAC,EAAE,CAAChC,qBAAqB,EAAEZ,KAAK,CAACuE,IAAI,EAAEpC,eAAe,EAAEtB,KAAK,CAAC,CAAC;EAE/D,MAAM2D,eAAgC,GAAAlD,aAAA;IACpCmD,KAAK,EAAEhD,EAAE;IACTC,SAAS,EAAEtC,UAAU,CAAC,gCAAgC,EAAEsC,SAAS,CAAC;IAClEtB,KAAK;IACLmB,KAAK,EACHA,KAAK,KAAK,SAAS,IAAIpB,iBAAiB,aAAjBA,iBAAiB,eAAjBA,iBAAiB,CAAEqB,WAAW,GACjDD,KAAK,GACLmD,SAAS;IACfC,YAAY,EAAEpD,KAAK,KAAK,KAAK,GAAGA,KAAK,GAAGmD;EAAS,GAC9CjF,gBAAgB,CAACO,KAAK,CAAC,CAC3B;EAED,OACEjB,KAAA,CAAA6F,aAAA,CAAC/E,UAAU,EAAK2E,eAAe,EAC7BzF,KAAA,CAAA6F,aAAA,CAACpF,YAAY,EAAAqF,QAAA;IACXpD,EAAE,EAAEA,EAAG;IACPnB,WAAW,EAAEA,WAAY;IACzBwE,UAAU,EAAE,KAAM;IAClB5B,IAAI,EAAEZ,OAAO,CAACM,OAAQ;IACtB/B,KAAK,EAAE,OAAOA,KAAK,KAAK,QAAQ,GAAGA,KAAK,GAAG,IAAK;IAChDgB,QAAQ,EAAEA,QAAS;IACnBkD,OAAO,EAAE1B,QAAS;IAClB2B,QAAQ,EAAE1B,cAAe;IACzB2B,OAAO,EAAEjD,UAAW;IACpBkD,SAAS,EAAEjC,mBAAoB;IAC/BkC,OAAO,EAAE3B,aAAc;IACvB4B,OAAO;IACPC,MAAM,EAAEzD,QAAQ,GAAG,OAAO,GAAG8C,SAAU;IACvCY,kBAAkB;IAClBC,cAAc;IACdC,YAAY,EAAC,cAAc;IAC3BC,YAAY,EAAEzF,KAAK,CAAC0F;EAAY,GAC5B5D,cAAc,CACnB,CACS,CAAC;AAEjB;AAgBA,OAAO,SAASe,cAAcA,CAAC;EAC7BpC,IAAI,GAAG,IAAI;EACXgC,MAAM,GAAG,IAAI;EACbK,IAAI,GAAG,IAAI;EACX6C,UAAU,GAAGA,CAAC7E,OAAoB,EAAEL,IAAY,KAAK;IAAA,IAAAmF,kBAAA;IACnD,MAAMC,OAAO,IAAAD,kBAAA,GAAG9E,OAAO,CAACG,IAAI,CAACR,IAAI,CAAC,cAAAmF,kBAAA,cAAAA,kBAAA,GAAI9E,OAAO,CAACG,IAAI,CAAC6E,EAAE;IACrD,OAAO;MACL1C,WAAW,EAAEtC,OAAO,CAACE,GAAG;MACxB6E;IACF,CAAC;EACH;AACc,CAAC,GAAG,CAAC,CAAC,EAAE;EACtB,OAAOnG,SAAS,CACb+C,MAAM,CAAE3B,OAAO,IAAK;IACnB,IAAI,OAAO2B,MAAM,KAAK,UAAU,EAAE;MAChC,OAAOA,MAAM,CAAC3B,OAAO,CAAC;IACxB;IAEA,OAAO,CAAC2B,MAAM;EAChB,CAAC,CAAC,CACDK,IAAI,CAAC,CAAC;IAAE7B,IAAI,EAAE8E;EAAE,CAAC,EAAE;IAAE9E,IAAI,EAAE+E;EAAE,CAAC,KAAK;IAAA,IAAAC,OAAA,EAAAC,qBAAA;IAClC,IAAIpD,IAAI,KAAK,aAAa,EAAE;MAC1B,MAAMqD,MAAM,GAAGxG,oBAAoB,CAACyG,OAAO,CAACL,CAAC,CAAC,IAAI,CAAC,CAAC;MACpD,MAAMM,MAAM,GAAG1G,oBAAoB,CAACyG,OAAO,CAACJ,CAAC,CAAC,IAAI,CAAC,CAAC;MAEpD,MAAMM,SAAS,GAAGH,MAAM,KAAK,CAAC,CAAC;MAC/B,MAAMI,SAAS,GAAGF,MAAM,KAAK,CAAC,CAAC;MAE/B,IAAIC,SAAS,IAAIC,SAAS,EAAE;QAC1B,OAAOJ,MAAM,GAAGE,MAAM;MACxB,CAAC,MAAM,IAAIC,SAAS,EAAE;QACpB,OAAO,CAAC,CAAC;MACX,CAAC,MAAM,IAAIC,SAAS,EAAE;QACpB,OAAO,CAAC;MACV;IACF;IAEA,QAAAN,OAAA,GAAOO,MAAM,CAACT,CAAC,CAACtF,IAAI,CAAC,CAAC,cAAAwF,OAAA,wBAAAC,qBAAA,GAAfD,OAAA,CAAiBQ,aAAa,cAAAP,qBAAA,uBAA9BA,qBAAA,CAAAQ,IAAA,CAAAT,OAAA,EAAiCD,CAAC,CAACvF,IAAI,CAAC,EAAE,IAAI,CAAC;EACxD,CAAC,CAAC,CACDkG,GAAG,CAAE7F,OAAO,IAAK6E,UAAU,CAAC7E,OAAO,EAAEL,IAAI,CAAC,CAAC;AAChD;AAEA,OAAO,SAASiC,aAAaA,CAC3B5B,OAAoB,EACpBuB,eAAkD,EAClDV,QAA0B,EAC1B;EACA,IAAIiF,MAAM,GAAG,IAAI;EAEjB,IAAIjF,QAAQ,KAAK,aAAa,EAAE;IAC9B,QAAQA,QAAQ;MACd,KAAK,aAAa;MAClB,KAAK,QAAQ;QAAE;UAAA,IAAAkF,gBAAA;UACbD,MAAM,IAAAC,gBAAA,GAAG/F,OAAO,CAACgG,OAAO,cAAAD,gBAAA,uBAAfA,gBAAA,CAAiBzC,QAAQ,CAACzC,QAAQ,CAAC;UAC5C;QACF;MACA,KAAK,QAAQ;QAAE;UACbiF,MAAM,GAAG9F,OAAO,CAACiG,SAAS,CAAC3C,QAAQ,CAACzC,QAAQ,CAAC;UAC7C;QACF;IACF;EACF;EAEA,IAAIiF,MAAM,IAAIvE,eAAe,EAAE;IAC7BuE,MAAM,GAAGvE,eAAe,CAACvB,OAAO,CAAC;EACnC;EAEA,OAAO8F,MAAM;AACf;AAEA,OAAO,SAASI,oBAAoBA,CAACrF,QAA0B,EAAE;EAC/D,OAAQb,OAAoB,IAAK;IAAA,IAAAmG,iBAAA;IAC/B,QAAQtF,QAAQ;MACd,KAAK,aAAa;MAClB,KAAK,QAAQ;QACX,QAAAsF,iBAAA,GAAOnG,OAAO,CAACgG,OAAO,cAAAG,iBAAA,uBAAfA,iBAAA,CAAiB7C,QAAQ,CAACzC,QAAQ,CAAC;MAC5C,KAAK,QAAQ;QACX,OAAOb,OAAO,CAACiG,SAAS,CAAC3C,QAAQ,CAACzC,QAAQ,CAAC;IAC/C;IACA,OAAO,IAAI;EACb,CAAC;AACH;AAEA5B,aAAa,CAACmH,qBAAqB,GAAG,IAAI;AAC1C,eAAenH,aAAa"}

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

@@ -1,12 +1,11 @@
 import React from 'react';
 import { FieldBlockWidth } from '../../FieldBlock';
-import { FieldProps, FieldHelpProps, Path } from '../../types';
+import { FieldProps, Path } from '../../types';
 import type { FormStatusText } from '../../../../components/FormStatus';
 import type { AutocompleteAllProps } from '../../../../components/Autocomplete';
 import type { DropdownAllProps } from '../../../../components/Dropdown';
 import { DrawerListProps } from '../../../../fragments/DrawerList';
 import { ToCamelCase } from '../../../../shared/helpers/withCamelCaseProps';
-import { FormError } from '../../utils';
 type IOption = {
     title: string | React.ReactNode;
     value: number | string;
@@ -17,7 +16,7 @@ export type Data = Array<{
     title: React.ReactNode;
     text?: React.ReactNode;
 }>;
-export type Props = FieldHelpProps & FieldProps<IOption['value']> & {
+export type Props = FieldProps<IOption['value']> & {
     /**
      * Defines the variant of the component.
      * Default: dropdown
@@ -59,7 +58,6 @@ declare function Selection(props: Props): import("react/jsx-runtime").JSX.Elemen
 declare namespace Selection {
     var _supportsSpacingProps: boolean;
 }
-export declare function getStatus(error: Error | FormError | undefined, info: React.ReactNode, warning: React.ReactNode): string;
 export declare function mapOptions(children: React.ReactNode, { createOption }: {
     createOption: any;
 }): any;

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

@@ -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,
@@ -72,7 +72,7 @@ function Selection(props) {
   }) => {
     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,
@@ -117,7 +117,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);
@@ -127,28 +126,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({
   id,
   value: valueProp,
@@ -173,10 +170,9 @@ function renderRadioItems({
       } = 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,
@@ -189,7 +185,7 @@ function renderRadioItems({
       label: variant === 'radio' ? label : undefined,
       text: variant === 'button' ? label : undefined,
       value: String((_ref = value !== null && value !== void 0 ? value : valueProp) !== null && _ref !== void 0 ? _ref : ''),
-      status: (hasError || status) && 'error',
+      status: (hasError || checkForError([error, info, warning])) && 'error',
       suffix: suffix
     }, htmlAttributes, rest));
   };

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

@@ -1 +1 @@
-{"version":3,"file":"Selection.js","names":["React","useMemo","useCallback","classnames","makeUniqueId","ToggleButton","Dropdown","Radio","HelpButton","Autocomplete","OptionField","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","selectedKey","onChangeHandler","undefined","handleShow","handleHide","cn","fieldBlockProps","_objectSpread","forId","disableStatusSummary","Component","items","renderRadioItems","iterateOverItems","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","valueProp","optionsCount","length","createOption","i","_ref","rest","_objectWithoutProperties","_excluded","size","key","text","map","mapOptions","child","isValidElement","type","nestedChildren","cloneElement","_child","_child$props","_child$props$children","_ref2","_props$children","_props$value","_em","_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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"}
+{"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","selectedKey","onChangeHandler","undefined","handleShow","handleHide","cn","fieldBlockProps","_objectSpread","forId","disableStatusSummary","Component","items","renderRadioItems","iterateOverItems","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","valueProp","optionsCount","length","createOption","i","_ref","help","rest","_objectWithoutProperties","_excluded","suffix","size","key","text","map","mapOptions","child","isValidElement","type","nestedChildren","cloneElement","_child","_child$props","_child$props$children","_ref2","_props$children","_props$value","_em","_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/es/extensions/forms/Field/Selection/SelectionDocs.js

@@ -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/es/extensions/forms/Field/Selection/SelectionDocs.js.map

@@ -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"}
+{"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/es/extensions/forms/Field/Selection/style/dnb-selection.css

@@ -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/es/extensions/forms/Field/Selection/style/dnb-selection.min.css

@@ -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%}
+.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/es/extensions/forms/Field/Selection/style/dnb-selection.scss

@@ -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/es/extensions/forms/Field/Slider/Slider.d.ts

@@ -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/es/extensions/forms/Field/Slider/Slider.js

@@ -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,
@@ -88,9 +86,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,