npm - @dnb/eufemia - Versions diffs - 10.64.0 → 10.65.0 - Mend

@dnb/eufemia 10.64.0 → 10.65.0

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

Files changed (408) hide show

package/es/extensions/forms/Field/SelectCountry/SelectCountry.js.map CHANGED Viewed

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

package/es/extensions/forms/Field/SelectCountry/SelectCountryDocs.js CHANGED Viewed

@@ -1,4 +1,8 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { getFieldEventsWithTypes } from '../FieldDocs';
+import { autocompleteProperties } from '../../../../components/autocomplete/AutocompleteDocs';
 export const SelectCountryProperties = {
   countries: {
     doc: 'List only a certain set of countries: `Scandinavia`, `Nordic`, `Europe` or `Prioritized`(all countries [sorted by priority](/uilib/extensions/forms/feature-fields/SelectCountry/#filter-or-prioritize-country-listing)). Defaults to `Prioritized`.',
@@ -9,7 +13,10 @@ export const SelectCountryProperties = {
     doc: '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.',
     type: 'function',
     status: 'optional'
-  }
+  },
+  size: _objectSpread(_objectSpread({}, autocompleteProperties.size), {}, {
+    doc: `${autocompleteProperties.size.doc} Consider rather setting field sizes with [Form.Appearance](/uilib/extensions/forms/Form/Appearance/).`
+  })
 };
 export const SelectCountryGeneralEvents = getFieldEventsWithTypes({
   type: 'string',

package/es/extensions/forms/Field/SelectCountry/SelectCountryDocs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectCountryDocs.js","names":["getFieldEventsWithTypes","SelectCountryProperties","countries","doc","type","status","filterCountries","SelectCountryGeneralEvents","optional"],"sources":["../../../../../../src/extensions/forms/Field/SelectCountry/SelectCountryDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\nimport { getFieldEventsWithTypes } from '../FieldDocs'\n\nexport const SelectCountryProperties: PropertiesTableProps = {\n countries: {\n doc: 'List only a certain set of countries: `Scandinavia`, `Nordic`, `Europe` or `Prioritized`(all countries [sorted by priority](/uilib/extensions/forms/feature-fields/SelectCountry/#filter-or-prioritize-country-listing)). Defaults to `Prioritized`.',\n type: 'string',\n status: 'optional',\n },\n filterCountries: {\n doc: '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 type: 'function',\n status: 'optional',\n },\n}\n\nexport const SelectCountryGeneralEvents = getFieldEventsWithTypes(\n { type: 'string', optional: true },\n { type: 'object', optional: true }\n)\n"],"mappings":"AACA,SAASA,uBAAuB,QAAQ,cAAc;~~AAEtD~~,OAAO,MAAMC,uBAA6C,GAAG;EAC3DC,SAAS,EAAE;IACTC,GAAG,EAAE,sPAAsP;IAC3PC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,eAAe,EAAE;IACfH,GAAG,EAAE,+JAA+J;IACpKC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV;~~AACF~~,CAAC;AAED,OAAO,~~MAAME~~,0BAA0B,~~GAAGP~~,uBAAuB,CAC/D;~~EAAEI~~,IAAI,EAAE,QAAQ;~~EAAEI~~,QAAQ,EAAE;AAAK,CAAC,EAClC;~~EAAEJ~~,IAAI,EAAE,QAAQ;~~EAAEI~~,QAAQ,EAAE;AAAK,CACnC,CAAC"}
1	+ {"version":3,"file":"SelectCountryDocs.js","names":["getFieldEventsWithTypes","autocompleteProperties","SelectCountryProperties","countries","doc","type","status","filterCountries","size","_objectSpread","SelectCountryGeneralEvents","optional"],"sources":["../../../../../../src/extensions/forms/Field/SelectCountry/SelectCountryDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\nimport { getFieldEventsWithTypes } from '../FieldDocs'\nimport { autocompleteProperties } from '../../../../components/autocomplete/AutocompleteDocs'\n\nexport const SelectCountryProperties: PropertiesTableProps = {\n countries: {\n doc: 'List only a certain set of countries: `Scandinavia`, `Nordic`, `Europe` or `Prioritized`(all countries [sorted by priority](/uilib/extensions/forms/feature-fields/SelectCountry/#filter-or-prioritize-country-listing)). Defaults to `Prioritized`.',\n type: 'string',\n status: 'optional',\n },\n filterCountries: {\n doc: '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 type: 'function',\n status: 'optional',\n },\n size: {\n ...autocompleteProperties.size,\n doc: `${autocompleteProperties.size.doc} Consider rather setting field sizes with [Form.Appearance](/uilib/extensions/forms/Form/Appearance/).`,\n },\n}\n\nexport const SelectCountryGeneralEvents = getFieldEventsWithTypes(\n { type: 'string', optional: true },\n { type: 'object', optional: true }\n)\n"],"mappings":";;;AACA,SAASA,uBAAuB,QAAQ,cAAc;AACtD,SAASC,sBAAsB,QAAQ,sDAAsD;AAE7F,OAAO,MAAMC,uBAA6C,GAAG;EAC3DC,SAAS,EAAE;IACTC,GAAG,EAAE,sPAAsP;IAC3PC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,eAAe,EAAE;IACfH,GAAG,EAAE,+JAA+J;IACpKC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDE,IAAI,EAAAC,aAAA,CAAAA,aAAA,KACCR,sBAAsB,CAACO,IAAI;IAC9BJ,GAAG,EAAG,GAAEH,sBAAsB,CAACO,IAAI,CAACJ,GAAI;EAAuG;AAEnJ,CAAC;AAED,OAAO,MAAMM,0BAA0B,GAAGV,uBAAuB,CAC/D;EAAEK,IAAI,EAAE,QAAQ;EAAEM,QAAQ,EAAE;AAAK,CAAC,EAClC;EAAEN,IAAI,EAAE,QAAQ;EAAEM,QAAQ,EAAE;AAAK,CACnC,CAAC"}

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

@@ -9,6 +9,10 @@ import { HelpProps } from '../../../../components/help-button/HelpButtonInline';
 import { DrawerListProps } from '../../../../fragments/DrawerList';
 import { ToCamelCase } from '../../../../shared/helpers/withCamelCaseProps';
 import { FormError } from '../../utils';
+import type { RadioProps } from '../../../../components/Radio';
+import type { ToggleButtonProps } from '../../../../components/ToggleButton';
+import type { RadioGroupProps } from '../../../../components/radio/RadioGroup';
+import type { ToggleButtonGroupProps } from '../../../../components/toggle-button/ToggleButtonGroup';
 type IOption = {
     title: string | React.ReactNode;
     value: number | string;
@@ -59,6 +63,10 @@ export type Props = FieldProps<IOption['value']> & {
      * Dropdown specific props
      */
     dropdownProps?: ToCamelCase<DropdownAllProps>;
+    /**
+     * The size of the component.
+     */
+    size?: ToggleButtonGroupProps['size'] | RadioGroupProps['size'] | AutocompleteAllProps['size'] | DropdownAllProps['size'];
     /**
      * The content of the component.
      */
@@ -74,6 +82,7 @@ type OptionProps = React.ComponentProps<React.FC<{
     help: HelpProps;
     title: React.ReactNode;
     children: React.ReactNode;
+    size?: ToggleButtonProps['size'] | RadioProps['size'];
 }>>;
 export declare function mapOptions(children: React.ReactNode, { createOption, }: {
     createOption: (props: OptionProps, i: number) => React.ReactNode;

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

@@ -2,7 +2,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _em, _em2;
-const _excluded = ["value", "title", "children", "error", "help"];
+const _excluded = ["value", "title", "children", "error", "help", "size"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useMemo, useCallback } from 'react';
@@ -31,6 +31,7 @@ function Selection(props) {
     error,
     hasError,
     disabled,
+    size,
     emptyValue,
     width = 'large',
     htmlAttributes,
@@ -102,15 +103,19 @@ function Selection(props) {
             }
           }
         });
-        return React.createElement(FieldBlock, _extends({}, fieldBlockProps, {
-          labelHeight: "small",
+        const additionalFieldBlockProps = {
           asFieldset: React.Children.count(items) > 1
-        }), React.createElement(Component.Group, {
+        };
+        if (!size) {
+          additionalFieldBlockProps.labelHeight = 'small';
+        }
+        return React.createElement(FieldBlock, _extends({}, fieldBlockProps, additionalFieldBlockProps), React.createElement(Component.Group, {
+          size: size,
           className: cn,
           layout_direction: optionsLayout === 'horizontal' ? 'row' : 'column',
           disabled: disabled,
           on_change: onChangeHandler,
-          value: String(value !== null && value !== void 0 ? value : '')
+          value: String(value !== null && value !== void 0 ? value : '') || undefined
         }, items));
       }
     case 'autocomplete':
@@ -130,6 +135,7 @@ function Selection(props) {
           disabled
         }, htmlAttributes), {}, {
           data,
+          size,
           on_change: handleDropdownChange,
           on_show: handleShow,
           on_hide: handleHide,
@@ -160,13 +166,13 @@ function renderRadioItems({
 }) {
   const optionsCount = React.Children.count(children) + ((dataList === null || dataList === void 0 ? void 0 : dataList.length) || 0);
   const createOption = (props, i) => {
-    var _ref;
     const {
         value,
         title,
         children,
         error,
-        help
+        help,
+        size
       } = props,
       rest = _objectWithoutProperties(props, _excluded);
     const label = title !== null && title !== void 0 ? title : children;
@@ -184,9 +190,10 @@ function renderRadioItems({
       key: `option-${i}-${id}`,
       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 : ''),
+      value: String(value !== null && value !== void 0 ? value : valueProp) || undefined,
       status: (hasError || checkForError([error, info, warning])) && 'error',
-      suffix: suffix
+      suffix: suffix,
+      size: size
     }, htmlAttributes, rest));
   };
   return [...(dataList || []).map((props, i) => {
@@ -220,9 +227,9 @@ export function makeOptions(children, transformSelection) {
       child = child['props'].children;
     }
     if (React.isValidElement(child) && child.type === OptionField) {
-      var _ref2, _props$title, _props$value;
+      var _ref, _props$title, _props$value;
       const props = child.props;
-      const title = (_ref2 = (_props$title = props.title) !== null && _props$title !== void 0 ? _props$title : props.children) !== null && _ref2 !== void 0 ? _ref2 : _em || (_em = React.createElement("em", null, "Untitled"));
+      const title = (_ref = (_props$title = props.title) !== null && _props$title !== void 0 ? _props$title : props.children) !== null && _ref !== void 0 ? _ref : _em || (_em = React.createElement("em", null, "Untitled"));
       const content = props.text ? [title, props.text] : title;
       const selected_value = transformSelection ? transformSelection(props) : undefined;
       const selectedKey = String((_props$value = props.value) !== null && _props$value !== void 0 ? _props$value : '');

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Selection.js","names":["React","useMemo","useCallback","classnames","convertJsxToString","makeUniqueId","ToggleButton","Dropdown","Radio","Autocomplete","HelpButton","OptionField","useFieldProps","checkForError","pickSpacingProps","FieldBlock","convertCamelCaseProps","useDataValue","Selection","props","clearValue","id","className","variant","layout","optionsLayout","placeholder","value","info","warning","error","hasError","disabled","emptyValue","width","htmlAttributes","setHasFocus","handleChange","setDisplayValue","transformSelection","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$title","_props$value","_em","selected_value","style","_em2","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Selection/Selection.tsx"],"sourcesContent":["import React, { useMemo, useCallback } from 'react'\nimport classnames from 'classnames'\nimport {\n convertJsxToString,\n makeUniqueId,\n} from '../../../../shared/component-helper'\nimport {\n ToggleButton,\n Dropdown,\n Radio,\n Autocomplete,\n HelpButton,\n} from '../../../../components'\nimport OptionField, { Props as OptionFieldProps } from '../Option'\nimport { useFieldProps } from '../../hooks'\nimport { checkForError, ReturnAdditional } from '../../hooks/useFieldProps'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport FieldBlock, {\n Props as FieldBlockProps,\n FieldBlockWidth,\n} from '../../FieldBlock'\nimport { FieldProps, Path } from '../../types'\nimport type { FormStatusText } from '../../../../components/FormStatus'\nimport type { AutocompleteAllProps } from '../../../../components/Autocomplete'\nimport type { DropdownAllProps } from '../../../../components/Dropdown'\nimport { HelpProps } from '../../../../components/help-button/HelpButtonInline'\nimport { DrawerListProps } from '../../../../fragments/DrawerList'\nimport {\n convertCamelCaseProps,\n ToCamelCase,\n} from '../../../../shared/helpers/withCamelCaseProps'\nimport useDataValue from '../../hooks/useDataValue'\nimport { FormError } from '../../utils'\n\ntype IOption = {\n title: string \| React.ReactNode\n value: number \| string\n status: FormStatusText\n}\nexport type Data = Array<{\n value: string\n title: React.ReactNode\n text?: React.ReactNode\n disabled?: boolean\n style?: React.CSSProperties\n}>\n\nexport type Props = FieldProps<IOption['value']> & {\n /*\n Defines the variant of the component.\n * Default: dropdown\n /\n variant?: 'dropdown' \| 'autocomplete' \| 'radio' \| 'button'\n\n /\n The width of the component.\n * Default: large\n /\n width?: FieldBlockWidth\n\n /\n Defines the layout of the options for radio and button variants.\n /\n optionsLayout?: 'horizontal' \| 'vertical'\n\n /\n Transform the displayed selection for Dropdown and Autocomplete variant.\n * Use it to display a different value than the one in the data set.\n /\n transformSelection?: (props: OptionFieldProps) => React.ReactNode\n\n /\n The path to the context data (Form.Handler).\n * The context data object needs to have a `value` and a `title` property.\n /\n dataPath?: Path\n\n /\n Data to be used for the component. The object needs to have a `value` and a `title` property.\n * The generated options will be placed above given JSX based children.\n /\n data?: Data\n\n /\n Autocomplete specific props\n /\n autocompleteProps?: ToCamelCase<AutocompleteAllProps>\n\n /\n Dropdown specific props\n /\n dropdownProps?: ToCamelCase<DropdownAllProps>\n\n /\n The content of the component.\n */\n children?: React.ReactNode\n}\n\nfunction Selection(props: Props) {\n const clearValue = useMemo(() => `clear-option-${makeUniqueId()}`, [])\n\n const {\n id,\n className,\n variant = 'dropdown',\n layout = 'vertical',\n optionsLayout = 'vertical',\n placeholder,\n value,\n info,\n warning,\n error,\n hasError,\n disabled,\n emptyValue,\n width = 'large',\n htmlAttributes,\n setHasFocus,\n handleChange,\n setDisplayValue,\n transformSelection,\n data,\n dataPath,\n children,\n\n // - Autocomplete and Dropdown specific props\n autocompleteProps,\n dropdownProps,\n } = useFieldProps(props)\n\n const { getValueByPath } = useDataValue()\n let dataList = data\n if (dataPath) {\n dataList = getValueByPath(dataPath)\n }\n\n const handleDropdownChange = useCallback(\n ({ data }) => {\n const selectedKey = data?.selectedKey\n handleChange?.(\n !selectedKey \|\| selectedKey === clearValue\n ? emptyValue\n : selectedKey\n )\n },\n [handleChange, emptyValue, clearValue]\n )\n\n const onChangeHandler = useCallback(\n ({ value }) => {\n handleChange?.(value === undefined ? emptyValue : value)\n },\n [handleChange, emptyValue]\n )\n\n // Specific handleShow and handleHide because Dropdown preserve the initially received callbacks, so changes\n // due to `useCallback` usage will have no effect, leading to useFieldPropss handleFocus and handleBlur sending out old\n // copies of value as arguments.\n const handleShow = useCallback(\n ({ data }) => {\n setHasFocus(true, data?.selectedKey)\n },\n [setHasFocus]\n )\n\n const handleHide = useCallback(\n ({ data }) => {\n setHasFocus(false, data?.selectedKey)\n },\n [setHasFocus]\n )\n\n const cn = classnames(\n 'dnb-forms-field-selection',\n `dnb-forms-field-selection__variant--${variant}`,\n `dnb-forms-field-selection--layout-${layout}`,\n `dnb-forms-field-selection--options-layout--${optionsLayout}`,\n className\n )\n\n const fieldBlockProps: FieldBlockProps = {\n forId: id,\n className: cn,\n disableStatusSummary: true,\n ...pickSpacingProps(props),\n }\n\n switch (variant) {\n case 'radio':\n case 'button': {\n const Component = (\n variant === 'radio' ? Radio : ToggleButton\n ) as typeof Radio & typeof ToggleButton\n\n const items = renderRadioItems({\n id,\n value,\n variant,\n info,\n warning,\n htmlAttributes,\n children,\n dataList,\n hasError,\n iterateOverItems: ({ value: v, label }) => {\n if (v === value) {\n setDisplayValue(label)\n }\n },\n })\n\n return (\n <FieldBlock\n {...fieldBlockProps}\n labelHeight=\"small\"\n asFieldset={React.Children.count(items) > 1}\n >\n <Component.Group\n className={cn}\n layout_direction={\n optionsLayout === 'horizontal' ? 'row' : 'column'\n }\n disabled={disabled}\n on_change={onChangeHandler}\n value={String(value ?? '')}\n >\n {items}\n </Component.Group>\n </FieldBlock>\n )\n }\n\n case 'autocomplete':\n case 'dropdown': {\n const data = renderDropdownItems(dataList, transformSelection)\n .concat(makeOptions(children, transformSelection))\n .filter(Boolean)\n const displayValue = data.find((item) => item.selectedKey === value)\n ?.content\n setDisplayValue(displayValue)\n\n const sharedProps: AutocompleteAllProps & DropdownAllProps = {\n id,\n list_class: 'dnb-forms-field-selection__list',\n portal_class: 'dnb-forms-field-selection__portal',\n title: placeholder,\n value: String(value ?? ''),\n status:\n (hasError \|\| checkForError([error, info, warning])) && 'error',\n disabled,\n ...htmlAttributes,\n data,\n on_change: handleDropdownChange,\n on_show: handleShow,\n on_hide: handleHide,\n stretch: true,\n }\n\n const specificFieldBlockProps: FieldBlockProps = {\n width,\n }\n if (layout === 'horizontal') {\n specificFieldBlockProps.width = undefined\n specificFieldBlockProps.contentWidth = width\n }\n\n return (\n <FieldBlock {...fieldBlockProps} {...specificFieldBlockProps}>\n {variant === 'autocomplete' ? (\n <Autocomplete\n {...sharedProps}\n {...(autocompleteProps\n ? (convertCamelCaseProps(\n autocompleteProps\n ) as AutocompleteAllProps)\n : null)}\n />\n ) : (\n <Dropdown\n {...sharedProps}\n {...(dropdownProps\n ? (convertCamelCaseProps(\n dropdownProps\n ) as DropdownAllProps)\n : null)}\n />\n )}\n </FieldBlock>\n )\n }\n }\n}\n\ntype OptionProps = React.ComponentProps<\n React.FC<{\n value: Props['value']\n error: Error \| FormError \| undefined\n help: HelpProps\n title: React.ReactNode\n children: React.ReactNode\n }>\n>\n\nfunction renderRadioItems({\n id,\n value: valueProp,\n variant,\n info,\n warning,\n htmlAttributes,\n children,\n dataList,\n hasError,\n iterateOverItems,\n}: {\n id: string\n value: Props['value']\n variant: Props['variant']\n info: Props['info']\n warning: Props['warning']\n htmlAttributes: Props['htmlAttributes']\n children: Props['children']\n dataList: Data\n hasError: ReturnAdditional<Props['value']>['hasError']\n iterateOverItems?: (item: {\n value: Props['value']\n label: Props['children']\n }) => void\n}) {\n const optionsCount =\n React.Children.count(children) + (dataList?.length \|\| 0)\n\n const createOption = (props: OptionProps, i: number) => {\n const { value, title, children, error, help, ...rest } = props\n\n const label = title ?? children\n const suffix = help ? (\n <HelpButton size=\"small\" title={convertJsxToString(help.title)}>\n {help.content}\n </HelpButton>\n ) : undefined\n\n iterateOverItems?.({ value, label })\n\n const Component = (\n variant === 'radio' ? Radio : ToggleButton\n ) as typeof Radio & typeof ToggleButton\n\n return (\n <Component\n id={optionsCount === 1 ? id : undefined}\n key={`option-${i}-${id}`}\n label={variant === 'radio' ? label : undefined}\n text={variant === 'button' ? label : undefined}\n value={String(value ?? valueProp ?? '')}\n status={\n (hasError \|\| checkForError([error, info, warning])) && 'error'\n }\n suffix={suffix}\n {...htmlAttributes}\n {...rest}\n />\n )\n }\n\n return [\n ...(dataList \|\| []).map((props, i) => {\n return createOption(props as OptionProps, i)\n }),\n ...(mapOptions(children, { createOption }) \|\| []),\n ].filter(Boolean)\n}\n\nexport function mapOptions(\n children: React.ReactNode,\n {\n createOption,\n }: { createOption: (props: OptionProps, i: number) => React.ReactNode }\n) {\n return React.Children.map(\n children,\n (child: React.ReactElement<OptionProps>, i) => {\n if (React.isValidElement(child)) {\n if (child.type === OptionField) {\n return createOption(child.props, i)\n }\n\n if (child.props.children) {\n const nestedChildren = mapOptions(child.props.children, {\n createOption,\n })\n return React.cloneElement(child, child.props, nestedChildren)\n }\n }\n\n return child\n }\n )\n}\n\nexport function makeOptions<T = DrawerListProps['data']>(\n children: React.ReactNode,\n transformSelection?: Props['transformSelection']\n): T {\n return React.Children.map(children, (child) => {\n if (child?.['props']?.children?.type === OptionField) {\n child = child['props'].children\n }\n\n if (React.isValidElement(child) && child.type === OptionField) {\n const props = child.props as OptionFieldProps\n const title = props.title ?? props.children ?? <em>Untitled</em>\n const content = props.text ? [title, props.text] : title\n const selected_value = transformSelection\n ? transformSelection(props)\n : undefined\n const selectedKey = String(props.value ?? '')\n const disabled = props.disabled\n const style = props.style\n\n return { selectedKey, selected_value, content, disabled, style }\n }\n\n // For other children, just show them as content\n if (child) {\n return {\n content: child,\n }\n }\n }) as T\n}\n\nfunction renderDropdownItems(\n data: Data,\n transformSelection?: Props['transformSelection']\n) {\n return (\n data?.map((props) => {\n const { value, title, text, disabled, style } = props\n return {\n selectedKey: value,\n content: (text ? [title, text] : title) \|\| <em>Untitled</em>,\n selected_value: transformSelection\n ? transformSelection(props)\n : undefined,\n disabled,\n style,\n }\n }) \|\| []\n )\n}\n\nSelection._supportsSpacingProps = true\nexport default Selection\n"],"mappings":"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"}
1	+ {"version":3,"file":"Selection.js","names":["React","useMemo","useCallback","classnames","convertJsxToString","makeUniqueId","ToggleButton","Dropdown","Radio","Autocomplete","HelpButton","OptionField","useFieldProps","checkForError","pickSpacingProps","FieldBlock","convertCamelCaseProps","useDataValue","Selection","props","clearValue","id","className","variant","layout","optionsLayout","placeholder","value","info","warning","error","hasError","disabled","size","emptyValue","width","htmlAttributes","setHasFocus","handleChange","setDisplayValue","transformSelection","data","dataPath","children","autocompleteProps","dropdownProps","getValueByPath","dataList","handleDropdownChange","selectedKey","onChangeHandler","undefined","handleShow","handleHide","cn","fieldBlockProps","_objectSpread","forId","disableStatusSummary","Component","items","renderRadioItems","iterateOverItems","v","label","additionalFieldBlockProps","asFieldset","Children","count","labelHeight","createElement","_extends","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","help","rest","_objectWithoutProperties","_excluded","suffix","key","text","map","mapOptions","child","isValidElement","type","nestedChildren","cloneElement","_child","_child$props","_child$props$children","_ref","_props$title","_props$value","_em","selected_value","style","_em2","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Selection/Selection.tsx"],"sourcesContent":["import React, { useMemo, useCallback } from 'react'\nimport classnames from 'classnames'\nimport {\n convertJsxToString,\n makeUniqueId,\n} from '../../../../shared/component-helper'\nimport {\n ToggleButton,\n Dropdown,\n Radio,\n Autocomplete,\n HelpButton,\n} from '../../../../components'\nimport OptionField, { Props as OptionFieldProps } from '../Option'\nimport { useFieldProps } from '../../hooks'\nimport { checkForError, ReturnAdditional } from '../../hooks/useFieldProps'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport FieldBlock, {\n Props as FieldBlockProps,\n FieldBlockWidth,\n} from '../../FieldBlock'\nimport { FieldProps, Path } from '../../types'\nimport type { FormStatusText } from '../../../../components/FormStatus'\nimport type { AutocompleteAllProps } from '../../../../components/Autocomplete'\nimport type { DropdownAllProps } from '../../../../components/Dropdown'\nimport { HelpProps } from '../../../../components/help-button/HelpButtonInline'\nimport { DrawerListProps } from '../../../../fragments/DrawerList'\nimport {\n convertCamelCaseProps,\n ToCamelCase,\n} from '../../../../shared/helpers/withCamelCaseProps'\nimport useDataValue from '../../hooks/useDataValue'\nimport { FormError } from '../../utils'\nimport type { RadioProps } from '../../../../components/Radio'\nimport type { ToggleButtonProps } from '../../../../components/ToggleButton'\nimport type { RadioGroupProps } from '../../../../components/radio/RadioGroup'\nimport type { ToggleButtonGroupProps } from '../../../../components/toggle-button/ToggleButtonGroup'\n\ntype IOption = {\n title: string \| React.ReactNode\n value: number \| string\n status: FormStatusText\n}\nexport type Data = Array<{\n value: string\n title: React.ReactNode\n text?: React.ReactNode\n disabled?: boolean\n style?: React.CSSProperties\n}>\n\nexport type Props = FieldProps<IOption['value']> & {\n /*\n Defines the variant of the component.\n * Default: dropdown\n /\n variant?: 'dropdown' \| 'autocomplete' \| 'radio' \| 'button'\n\n /\n The width of the component.\n * Default: large\n /\n width?: FieldBlockWidth\n\n /\n Defines the layout of the options for radio and button variants.\n /\n optionsLayout?: 'horizontal' \| 'vertical'\n\n /\n Transform the displayed selection for Dropdown and Autocomplete variant.\n * Use it to display a different value than the one in the data set.\n /\n transformSelection?: (props: OptionFieldProps) => React.ReactNode\n\n /\n The path to the context data (Form.Handler).\n * The context data object needs to have a `value` and a `title` property.\n /\n dataPath?: Path\n\n /\n Data to be used for the component. The object needs to have a `value` and a `title` property.\n * The generated options will be placed above given JSX based children.\n /\n data?: Data\n\n /\n Autocomplete specific props\n /\n autocompleteProps?: ToCamelCase<AutocompleteAllProps>\n\n /\n Dropdown specific props\n /\n dropdownProps?: ToCamelCase<DropdownAllProps>\n\n /\n The size of the component.\n /\n size?:\n \| ToggleButtonGroupProps['size']\n \| RadioGroupProps['size']\n \| AutocompleteAllProps['size']\n \| DropdownAllProps['size']\n\n /\n The content of the component.\n */\n children?: React.ReactNode\n}\n\nfunction Selection(props: Props) {\n const clearValue = useMemo(() => `clear-option-${makeUniqueId()}`, [])\n\n const {\n id,\n className,\n variant = 'dropdown',\n layout = 'vertical',\n optionsLayout = 'vertical',\n placeholder,\n value,\n info,\n warning,\n error,\n hasError,\n disabled,\n size,\n emptyValue,\n width = 'large',\n htmlAttributes,\n setHasFocus,\n handleChange,\n setDisplayValue,\n transformSelection,\n data,\n dataPath,\n children,\n\n // - Autocomplete and Dropdown specific props\n autocompleteProps,\n dropdownProps,\n } = useFieldProps(props)\n\n const { getValueByPath } = useDataValue()\n let dataList = data\n if (dataPath) {\n dataList = getValueByPath(dataPath)\n }\n\n const handleDropdownChange = useCallback(\n ({ data }) => {\n const selectedKey = data?.selectedKey\n handleChange?.(\n !selectedKey \|\| selectedKey === clearValue\n ? emptyValue\n : selectedKey\n )\n },\n [handleChange, emptyValue, clearValue]\n )\n\n const onChangeHandler = useCallback(\n ({ value }) => {\n handleChange?.(value === undefined ? emptyValue : value)\n },\n [handleChange, emptyValue]\n )\n\n // Specific handleShow and handleHide because Dropdown preserve the initially received callbacks, so changes\n // due to `useCallback` usage will have no effect, leading to useFieldPropss handleFocus and handleBlur sending out old\n // copies of value as arguments.\n const handleShow = useCallback(\n ({ data }) => {\n setHasFocus(true, data?.selectedKey)\n },\n [setHasFocus]\n )\n\n const handleHide = useCallback(\n ({ data }) => {\n setHasFocus(false, data?.selectedKey)\n },\n [setHasFocus]\n )\n\n const cn = classnames(\n 'dnb-forms-field-selection',\n `dnb-forms-field-selection__variant--${variant}`,\n `dnb-forms-field-selection--layout-${layout}`,\n `dnb-forms-field-selection--options-layout--${optionsLayout}`,\n className\n )\n\n const fieldBlockProps: FieldBlockProps = {\n forId: id,\n className: cn,\n disableStatusSummary: true,\n ...pickSpacingProps(props),\n }\n\n switch (variant) {\n case 'radio':\n case 'button': {\n const Component = (\n variant === 'radio' ? Radio : ToggleButton\n ) as typeof Radio & typeof ToggleButton\n\n const items = renderRadioItems({\n id,\n value,\n variant,\n info,\n warning,\n htmlAttributes,\n children,\n dataList,\n hasError,\n iterateOverItems: ({ value: v, label }) => {\n if (v === value) {\n setDisplayValue(label)\n }\n },\n })\n\n const additionalFieldBlockProps: FieldBlockProps = {\n asFieldset: React.Children.count(items) > 1,\n }\n if (!size) {\n additionalFieldBlockProps.labelHeight = 'small'\n }\n\n return (\n <FieldBlock {...fieldBlockProps} {...additionalFieldBlockProps}>\n <Component.Group\n size={size}\n className={cn}\n layout_direction={\n optionsLayout === 'horizontal' ? 'row' : 'column'\n }\n disabled={disabled}\n on_change={onChangeHandler}\n value={String(value ?? '') \|\| undefined}\n >\n {items}\n </Component.Group>\n </FieldBlock>\n )\n }\n\n case 'autocomplete':\n case 'dropdown': {\n const data = renderDropdownItems(dataList, transformSelection)\n .concat(makeOptions(children, transformSelection))\n .filter(Boolean)\n const displayValue = data.find((item) => item.selectedKey === value)\n ?.content\n setDisplayValue(displayValue)\n\n const sharedProps: AutocompleteAllProps & DropdownAllProps = {\n id,\n list_class: 'dnb-forms-field-selection__list',\n portal_class: 'dnb-forms-field-selection__portal',\n title: placeholder,\n value: String(value ?? ''),\n status:\n (hasError \|\| checkForError([error, info, warning])) && 'error',\n disabled,\n ...htmlAttributes,\n data,\n size,\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 size?: ToggleButtonProps['size'] \| RadioProps['size']\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, size, ...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) \|\| undefined}\n status={\n (hasError \|\| checkForError([error, info, warning])) && 'error'\n }\n suffix={suffix}\n size={size}\n {...htmlAttributes}\n {...rest}\n />\n )\n }\n\n return [\n ...(dataList \|\| []).map((props, i) => {\n return createOption(props as OptionProps, i)\n }),\n ...(mapOptions(children, { createOption }) \|\| []),\n ].filter(Boolean)\n}\n\nexport function mapOptions(\n children: React.ReactNode,\n {\n createOption,\n }: { createOption: (props: OptionProps, i: number) => React.ReactNode }\n) {\n return React.Children.map(\n children,\n (child: React.ReactElement<OptionProps>, i) => {\n if (React.isValidElement(child)) {\n if (child.type === OptionField) {\n return createOption(child.props, i)\n }\n\n if (child.props.children) {\n const nestedChildren = mapOptions(child.props.children, {\n createOption,\n })\n return React.cloneElement(child, child.props, nestedChildren)\n }\n }\n\n return child\n }\n )\n}\n\nexport function makeOptions<T = DrawerListProps['data']>(\n children: React.ReactNode,\n transformSelection?: Props['transformSelection']\n): T {\n return React.Children.map(children, (child) => {\n if (child?.['props']?.children?.type === OptionField) {\n child = child['props'].children\n }\n\n if (React.isValidElement(child) && child.type === OptionField) {\n const props = child.props as OptionFieldProps\n const title = props.title ?? props.children ?? <em>Untitled</em>\n const content = props.text ? [title, props.text] : title\n const selected_value = transformSelection\n ? transformSelection(props)\n : undefined\n const selectedKey = String(props.value ?? '')\n const disabled = props.disabled\n const style = props.style\n\n return { selectedKey, selected_value, content, disabled, style }\n }\n\n // For other children, just show them as content\n if (child) {\n return {\n content: child,\n }\n }\n }) as T\n}\n\nfunction renderDropdownItems(\n data: Data,\n transformSelection?: Props['transformSelection']\n) {\n return (\n data?.map((props) => {\n const { value, title, text, disabled, style } = props\n return {\n selectedKey: value,\n content: (text ? [title, text] : title) \|\| <em>Untitled</em>,\n selected_value: transformSelection\n ? transformSelection(props)\n : undefined,\n disabled,\n style,\n }\n }) \|\| []\n )\n}\n\nSelection._supportsSpacingProps = true\nexport default Selection\n"],"mappings":"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"}

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

@@ -44,6 +44,11 @@ export const SelectionProperties = {
     type: 'object',
     status: 'optional'
   },
+  size: {
+    doc: 'The sizes you can choose is small (1.5rem), default (2rem), medium (2.5rem) and large (3rem) are supported component sizes. Defaults to default / null. Also, if you define a number like size="2" then it will be forwarded as the input element attribute. Consider rather setting field sizes with [Form.Appearance](/uilib/extensions/forms/Form/Appearance/).',
+    type: 'string',
+    status: 'optional'
+  },
   children: {
     doc: 'For providing Option components, and other children.',
     type: 'React.Node',

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectionDocs.js","names":["SelectionProperties","variant","doc","type","status","value","transformSelection","optionsLayout","width","data","dataPath","autocompleteProps","dropdownProps","children"],"sources":["../../../../../../src/extensions/forms/Field/Selection/SelectionDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const SelectionProperties: PropertiesTableProps = {\n variant: {\n doc: 'Choice of UI feature. Can be: `dropdown`, `autocomplete`, `radio` or `button`.',\n type: 'string',\n status: 'optional',\n },\n value: {\n doc: 'Defines the `value`. When using variant `radio` or `button`, value has to be a `string`.',\n type: ['number', 'string'],\n status: 'optional',\n },\n transformSelection: {\n doc: 'Transform the displayed selection for Dropdown and Autocomplete variant. Use it to display a different value than the one in the data set. The first parameter is the props of the Option component or data item. You can return a React.Node that will be displayed in the selection.',\n type: 'function',\n status: 'optional',\n },\n optionsLayout: {\n doc: 'Layout for the list of options. Can be `horizontal` or `vertical`.',\n type: 'string',\n status: 'optional',\n },\n width: {\n doc: '`small`, `medium` or `large` for predefined standard widths, `stretch` for fill available width.',\n type: ['string', 'false'],\n status: 'optional',\n },\n data: {\n doc: 'Data to be used for the component. The object needs to have a `value` and a `title` property. Provide the Dropdown or Autocomplete data in the format documented here: [Dropdown](/uilib/components/dropdown) and [Autocomplete](/uilib/components/autocomplete) documentation.',\n type: 'array',\n status: 'optional',\n },\n dataPath: {\n doc: 'The path to the context data (Form.Handler). The context data object needs to have a `value` and a `title` property. The generated options will be placed above given JSX based children.',\n type: 'string',\n status: 'optional',\n },\n autocompleteProps: {\n doc: 'Forward any additional props (camelCase) to the [Autocomplete](/uilib/components/autocomplete/) component.',\n type: 'object',\n status: 'optional',\n },\n dropdownProps: {\n doc: 'Forward any additional props (camelCase) to the [Dropdown](/uilib/components/dropdown/) component.',\n type: 'object',\n status: 'optional',\n },\n children: {\n doc: 'For providing Option components, and other children.',\n type: 'React.Node',\n status: 'optional',\n },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,mBAAyC,GAAG;EACvDC,OAAO,EAAE;IACPC,GAAG,EAAE,gFAAgF;IACrFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,KAAK,EAAE;IACLH,GAAG,EAAE,0FAA0F;IAC/FC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV,CAAC;EACDE,kBAAkB,EAAE;IAClBJ,GAAG,EAAE,wRAAwR;IAC7RC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDG,aAAa,EAAE;IACbL,GAAG,EAAE,oEAAoE;IACzEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,KAAK,EAAE;IACLN,GAAG,EAAE,kGAAkG;IACvGC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,MAAM,EAAE;EACV,CAAC;EACDK,IAAI,EAAE;IACJP,GAAG,EAAE,iRAAiR;IACtRC,IAAI,EAAE,OAAO;IACbC,MAAM,EAAE;EACV,CAAC;EACDM,QAAQ,EAAE;IACRR,GAAG,EAAE,2LAA2L;IAChMC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDO,iBAAiB,EAAE;IACjBT,GAAG,EAAE,4GAA4G;IACjHC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDQ,aAAa,EAAE;IACbV,GAAG,EAAE,oGAAoG;IACzGC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDS,QAAQ,EAAE;~~IACRX~~,GAAG,EAAE,sDAAsD;IAC3DC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV;AACF,CAAC"}
1	+ {"version":3,"file":"SelectionDocs.js","names":["SelectionProperties","variant","doc","type","status","value","transformSelection","optionsLayout","width","data","dataPath","autocompleteProps","dropdownProps","size","children"],"sources":["../../../../../../src/extensions/forms/Field/Selection/SelectionDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const SelectionProperties: PropertiesTableProps = {\n variant: {\n doc: 'Choice of UI feature. Can be: `dropdown`, `autocomplete`, `radio` or `button`.',\n type: 'string',\n status: 'optional',\n },\n value: {\n doc: 'Defines the `value`. When using variant `radio` or `button`, value has to be a `string`.',\n type: ['number', 'string'],\n status: 'optional',\n },\n transformSelection: {\n doc: 'Transform the displayed selection for Dropdown and Autocomplete variant. Use it to display a different value than the one in the data set. The first parameter is the props of the Option component or data item. You can return a React.Node that will be displayed in the selection.',\n type: 'function',\n status: 'optional',\n },\n optionsLayout: {\n doc: 'Layout for the list of options. Can be `horizontal` or `vertical`.',\n type: 'string',\n status: 'optional',\n },\n width: {\n doc: '`small`, `medium` or `large` for predefined standard widths, `stretch` for fill available width.',\n type: ['string', 'false'],\n status: 'optional',\n },\n data: {\n doc: 'Data to be used for the component. The object needs to have a `value` and a `title` property. Provide the Dropdown or Autocomplete data in the format documented here: [Dropdown](/uilib/components/dropdown) and [Autocomplete](/uilib/components/autocomplete) documentation.',\n type: 'array',\n status: 'optional',\n },\n dataPath: {\n doc: 'The path to the context data (Form.Handler). The context data object needs to have a `value` and a `title` property. The generated options will be placed above given JSX based children.',\n type: 'string',\n status: 'optional',\n },\n autocompleteProps: {\n doc: 'Forward any additional props (camelCase) to the [Autocomplete](/uilib/components/autocomplete/) component.',\n type: 'object',\n status: 'optional',\n },\n dropdownProps: {\n doc: 'Forward any additional props (camelCase) to the [Dropdown](/uilib/components/dropdown/) component.',\n type: 'object',\n status: 'optional',\n },\n size: {\n doc: 'The sizes you can choose is small (1.5rem), default (2rem), medium (2.5rem) and large (3rem) are supported component sizes. Defaults to default / null. Also, if you define a number like size=\"2\" then it will be forwarded as the input element attribute. Consider rather setting field sizes with [Form.Appearance](/uilib/extensions/forms/Form/Appearance/).',\n type: 'string',\n status: 'optional',\n },\n children: {\n doc: 'For providing Option components, and other children.',\n type: 'React.Node',\n status: 'optional',\n },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,mBAAyC,GAAG;EACvDC,OAAO,EAAE;IACPC,GAAG,EAAE,gFAAgF;IACrFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,KAAK,EAAE;IACLH,GAAG,EAAE,0FAA0F;IAC/FC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV,CAAC;EACDE,kBAAkB,EAAE;IAClBJ,GAAG,EAAE,wRAAwR;IAC7RC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDG,aAAa,EAAE;IACbL,GAAG,EAAE,oEAAoE;IACzEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,KAAK,EAAE;IACLN,GAAG,EAAE,kGAAkG;IACvGC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,MAAM,EAAE;EACV,CAAC;EACDK,IAAI,EAAE;IACJP,GAAG,EAAE,iRAAiR;IACtRC,IAAI,EAAE,OAAO;IACbC,MAAM,EAAE;EACV,CAAC;EACDM,QAAQ,EAAE;IACRR,GAAG,EAAE,2LAA2L;IAChMC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDO,iBAAiB,EAAE;IACjBT,GAAG,EAAE,4GAA4G;IACjHC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDQ,aAAa,EAAE;IACbV,GAAG,EAAE,oGAAoG;IACzGC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDS,IAAI,EAAE;IACJX,GAAG,EAAE,oWAAoW;IACzWC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDU,QAAQ,EAAE;IACRZ,GAAG,EAAE,sDAAsD;IAC3DC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV;AACF,CAAC"}

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

@@ -1,3 +1,6 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { inputProperties } from '../../../../components/input/InputDocs';
 export const stringProperties = {
   multiline: {
@@ -55,7 +58,9 @@ export const stringProperties = {
     type: ['string', 'false'],
     status: 'optional'
   },
-  size: inputProperties.size,
+  size: _objectSpread(_objectSpread({}, inputProperties.size), {}, {
+    doc: `${inputProperties.size.doc} Consider rather setting field sizes with [Form.Appearance](/uilib/extensions/forms/Form/Appearance/).`
+  }),
   align: inputProperties.align,
   selectall: inputProperties.selectall,
   clear: inputProperties.clear,

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

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

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

@@ -1,10 +1,13 @@
 import { FieldProps } from '../../types';
+import type { CheckboxProps } from '../../../../components/Checkbox';
+import type { ToggleButtonProps } from '../../../../components/ToggleButton';
 export type ToggleProps = {
     valueOn: unknown;
     valueOff: unknown;
     variant?: 'checkbox' | 'checkbox-button' | 'button' | 'buttons';
     textOn?: string;
     textOff?: string;
+    size?: ToggleButtonProps['size'] | CheckboxProps['size'];
 };
 export type Props = Omit<FieldProps<unknown>, 'layout' | 'layoutOptions'> & ToggleProps;
 declare function Toggle(props: Props): import("react/jsx-runtime").JSX.Element;

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

@@ -27,6 +27,7 @@ function Toggle(props) {
     textOn,
     textOff,
     value,
+    size,
     hasError,
     htmlAttributes,
     handleChange,
@@ -77,6 +78,7 @@ function Toggle(props) {
         label: labelWithItemNo !== null && labelWithItemNo !== void 0 ? labelWithItemNo : isOn ? textOn !== null && textOn !== void 0 ? textOn : translations.yes : textOff !== null && textOff !== void 0 ? textOff : translations.no,
         checked: isOn,
         disabled: disabled,
+        size: size !== 'small' ? size : undefined,
         status: hasError ? 'error' : undefined,
         onChange: handleCheckboxChange
       }, htmlAttributes)));
@@ -88,6 +90,7 @@ function Toggle(props) {
         disabled: disabled,
         status: hasError ? 'error' : undefined,
         value: value ? 'true' : 'false',
+        size: size,
         on_change: handleCheckboxChange
       }, htmlAttributes)));
     case 'buttons':
@@ -100,7 +103,8 @@ function Toggle(props) {
           value: isOn ? 'on' : isOff ? 'off' : null,
           onChange: handleToggleChange,
           status: hasError ? 'error' : undefined,
-          disabled
+          disabled,
+          size
         }
       }, React.createElement(ToggleButton, _extends({
         text: textOn !== null && textOn !== void 0 ? textOn : translations.yes,
@@ -118,6 +122,7 @@ function Toggle(props) {
         disabled: disabled,
         status: hasError ? 'error' : undefined,
         value: value ? 'true' : 'false',
+        size: size,
         on_change: handleCheckboxChange
       }, htmlAttributes)));
   }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Toggle.js","names":["React","useCallback","useMemo","classnames","Checkbox","ToggleButton","ButtonRow","FieldBlock","useFieldProps","pickSpacingProps","ToggleButtonGroupContext","useTranslation","useIterateItemNo","Toggle","props","translations","ToggleField","preparedProps","_objectSpread","errorMessages","id","className","valueOn","valueOff","variant","disabled","textOn","textOff","value","hasError","htmlAttributes","handleChange","setDisplayValue","handleCheckboxChange","checked","handleToggleChange","cn","fieldBlockProps","forId","isOn","isOff","text","label","labelSuffix","required","labelWithItemNo","createElement","_extends","undefined","yes","no","status","onChange","on_change","asFieldset","bottom","Provider","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Toggle/Toggle.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react'\nimport classnames from 'classnames'\nimport { Checkbox, ToggleButton } from '../../../../components'\nimport ButtonRow from '../../Form/ButtonRow'\nimport FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\nimport useTranslation from '../../hooks/useTranslation'\nimport { useIterateItemNo } from '../../Iterate/ItemNo/useIItemNo'\n\nexport type ToggleProps = {\n valueOn: unknown\n valueOff: unknown\n variant?: 'checkbox' \| 'checkbox-button' \| 'button' \| 'buttons'\n textOn?: string\n textOff?: string\n}\n\nexport type Props = Omit<FieldProps<unknown>, 'layout' \| 'layoutOptions'> &\n ToggleProps\n\nfunction Toggle(props: Props) {\n const translations = useTranslation().ToggleField\n\n const preparedProps: Props = {\n ...props,\n errorMessages: props.errorMessages,\n }\n\n const {\n id,\n className,\n valueOn,\n valueOff,\n variant,\n disabled,\n textOn,\n textOff,\n value,\n hasError,\n htmlAttributes,\n handleChange,\n setDisplayValue,\n } = useFieldProps(preparedProps)\n\n const handleCheckboxChange = useCallback(\n ({ checked }) => {\n handleChange?.(checked ? valueOn : valueOff)\n },\n [handleChange, valueOn, valueOff]\n )\n const handleToggleChange = useCallback(\n ({ value }) => {\n handleChange?.(value === 'on' ? valueOn : valueOff)\n },\n [handleChange, valueOn, valueOff]\n )\n\n const cn = classnames('dnb-forms-field-toggle', className)\n\n const fieldBlockProps: FieldBlockProps = {\n forId: id,\n className: cn,\n disabled,\n ...pickSpacingProps(props),\n }\n\n const isOn = value === valueOn\n const isOff = value === valueOff\n\n useMemo(() => {\n const text = isOn ? textOn : textOff\n if (text) {\n setDisplayValue(text)\n }\n }, [isOn, setDisplayValue, textOff, textOn])\n\n const { label, labelSuffix, required } = props\n const labelWithItemNo = useIterateItemNo({\n label,\n labelSuffix,\n required,\n })\n\n switch (variant) {\n default:\n case 'checkbox':\n return (\n <FieldBlock {...fieldBlockProps} label={undefined}>\n <Checkbox\n id={id}\n className={cn}\n label={\n labelWithItemNo ??\n (isOn\n ? textOn ?? translations.yes\n : textOff ?? translations.no)\n }\n checked={isOn}\n disabled={disabled}\n status={hasError ? 'error' : undefined}\n onChange={handleCheckboxChange}\n {...htmlAttributes}\n />\n </FieldBlock>\n )\n case 'button':\n return (\n <FieldBlock {...fieldBlockProps}>\n <ToggleButton\n id={id}\n text={\n isOn\n ? textOn ?? translations.yes\n : textOff ?? translations.no\n }\n checked={isOn}\n disabled={disabled}\n status={hasError ? 'error' : undefined}\n value={value ? 'true' : 'false'}\n on_change={handleCheckboxChange}\n {...htmlAttributes}\n />\n </FieldBlock>\n )\n case 'buttons':\n return (\n <FieldBlock {...fieldBlockProps} asFieldset>\n <ButtonRow bottom=\"x-small\">\n <ToggleButtonGroupContext.Provider\n value={{\n value: isOn ? 'on' : isOff ? 'off' : null, // use \"null\" to reset the value\n onChange: handleToggleChange,\n status: hasError ? 'error' : undefined,\n disabled,\n }}\n >\n <ToggleButton\n text={textOn ?? translations.yes}\n value=\"on\"\n {...htmlAttributes}\n />\n <ToggleButton\n text={textOff ?? translations.no}\n value=\"off\"\n {...htmlAttributes}\n />\n </ToggleButtonGroupContext.Provider>\n </ButtonRow>\n </FieldBlock>\n )\n case 'checkbox-button':\n return (\n <FieldBlock {...fieldBlockProps}>\n <ToggleButton\n id={id}\n variant=\"checkbox\"\n text={\n isOn\n ? textOn ?? translations.yes\n : textOff ?? translations.no\n }\n checked={isOn}\n disabled={disabled}\n status={hasError ? 'error' : undefined}\n value={value ? 'true' : 'false'}\n on_change={handleCheckboxChange}\n {...htmlAttributes}\n />\n </FieldBlock>\n )\n }\n}\n\nToggle._supportsSpacingProps = true\nexport default Toggle\n"],"mappings":"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"}
1	+ {"version":3,"file":"Toggle.js","names":["React","useCallback","useMemo","classnames","Checkbox","ToggleButton","ButtonRow","FieldBlock","useFieldProps","pickSpacingProps","ToggleButtonGroupContext","useTranslation","useIterateItemNo","Toggle","props","translations","ToggleField","preparedProps","_objectSpread","errorMessages","id","className","valueOn","valueOff","variant","disabled","textOn","textOff","value","size","hasError","htmlAttributes","handleChange","setDisplayValue","handleCheckboxChange","checked","handleToggleChange","cn","fieldBlockProps","forId","isOn","isOff","text","label","labelSuffix","required","labelWithItemNo","createElement","_extends","undefined","yes","no","status","onChange","on_change","asFieldset","bottom","Provider","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Toggle/Toggle.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react'\nimport classnames from 'classnames'\nimport { Checkbox, ToggleButton } from '../../../../components'\nimport ButtonRow from '../../Form/ButtonRow'\nimport FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\nimport useTranslation from '../../hooks/useTranslation'\nimport { useIterateItemNo } from '../../Iterate/ItemNo/useIItemNo'\nimport type { CheckboxProps } from '../../../../components/Checkbox'\nimport type { ToggleButtonProps } from '../../../../components/ToggleButton'\n\nexport type ToggleProps = {\n valueOn: unknown\n valueOff: unknown\n variant?: 'checkbox' \| 'checkbox-button' \| 'button' \| 'buttons'\n textOn?: string\n textOff?: string\n size?: ToggleButtonProps['size'] \| CheckboxProps['size']\n}\n\nexport type Props = Omit<FieldProps<unknown>, 'layout' \| 'layoutOptions'> &\n ToggleProps\n\nfunction Toggle(props: Props) {\n const translations = useTranslation().ToggleField\n\n const preparedProps: Props = {\n ...props,\n errorMessages: props.errorMessages,\n }\n\n const {\n id,\n className,\n valueOn,\n valueOff,\n variant,\n disabled,\n textOn,\n textOff,\n value,\n size,\n hasError,\n htmlAttributes,\n handleChange,\n setDisplayValue,\n } = useFieldProps(preparedProps)\n\n const handleCheckboxChange = useCallback(\n ({ checked }) => {\n handleChange?.(checked ? valueOn : valueOff)\n },\n [handleChange, valueOn, valueOff]\n )\n const handleToggleChange = useCallback(\n ({ value }) => {\n handleChange?.(value === 'on' ? valueOn : valueOff)\n },\n [handleChange, valueOn, valueOff]\n )\n\n const cn = classnames('dnb-forms-field-toggle', className)\n\n const fieldBlockProps: FieldBlockProps = {\n forId: id,\n className: cn,\n disabled,\n ...pickSpacingProps(props),\n }\n\n const isOn = value === valueOn\n const isOff = value === valueOff\n\n useMemo(() => {\n const text = isOn ? textOn : textOff\n if (text) {\n setDisplayValue(text)\n }\n }, [isOn, setDisplayValue, textOff, textOn])\n\n const { label, labelSuffix, required } = props\n const labelWithItemNo = useIterateItemNo({\n label,\n labelSuffix,\n required,\n })\n\n switch (variant) {\n default:\n case 'checkbox':\n return (\n <FieldBlock {...fieldBlockProps} label={undefined}>\n <Checkbox\n id={id}\n className={cn}\n label={\n labelWithItemNo ??\n (isOn\n ? textOn ?? translations.yes\n : textOff ?? translations.no)\n }\n checked={isOn}\n disabled={disabled}\n size={size !== 'small' ? size : undefined}\n status={hasError ? 'error' : undefined}\n onChange={handleCheckboxChange}\n {...htmlAttributes}\n />\n </FieldBlock>\n )\n case 'button':\n return (\n <FieldBlock {...fieldBlockProps}>\n <ToggleButton\n id={id}\n text={\n isOn\n ? textOn ?? translations.yes\n : textOff ?? translations.no\n }\n checked={isOn}\n disabled={disabled}\n status={hasError ? 'error' : undefined}\n value={value ? 'true' : 'false'}\n size={size}\n on_change={handleCheckboxChange}\n {...htmlAttributes}\n />\n </FieldBlock>\n )\n case 'buttons':\n return (\n <FieldBlock {...fieldBlockProps} asFieldset>\n <ButtonRow bottom=\"x-small\">\n <ToggleButtonGroupContext.Provider\n value={{\n value: isOn ? 'on' : isOff ? 'off' : null, // use \"null\" to reset the value\n onChange: handleToggleChange,\n status: hasError ? 'error' : undefined,\n disabled,\n size,\n }}\n >\n <ToggleButton\n text={textOn ?? translations.yes}\n value=\"on\"\n {...htmlAttributes}\n />\n <ToggleButton\n text={textOff ?? translations.no}\n value=\"off\"\n {...htmlAttributes}\n />\n </ToggleButtonGroupContext.Provider>\n </ButtonRow>\n </FieldBlock>\n )\n case 'checkbox-button':\n return (\n <FieldBlock {...fieldBlockProps}>\n <ToggleButton\n id={id}\n variant=\"checkbox\"\n text={\n isOn\n ? textOn ?? translations.yes\n : textOff ?? translations.no\n }\n checked={isOn}\n disabled={disabled}\n status={hasError ? 'error' : undefined}\n value={value ? 'true' : 'false'}\n size={size}\n on_change={handleCheckboxChange}\n {...htmlAttributes}\n />\n </FieldBlock>\n )\n }\n}\n\nToggle._supportsSpacingProps = true\nexport default Toggle\n"],"mappings":"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"}

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

@@ -19,6 +19,11 @@ export const ToggleProperties = {
     type: 'string',
     status: 'optional'
   },
+  size: {
+    doc: 'The sizes you can choose is small (1.5rem), default (2rem), medium (2.5rem) and large (3rem) are supported component sizes. Defaults to default / null. Also, if you define a number like size="2" then it will be forwarded as the input element attribute. Consider rather setting field sizes with [Form.Appearance](/uilib/extensions/forms/Form/Appearance/).',
+    type: 'string',
+    status: 'optional'
+  },
   variant: {
     doc: 'Choice of input feature. Can be: `checkbox`, `button`, `checkbox-button` or `buttons`.',
     type: 'string',