npm - @entur/dropdown - Versions diffs - 2.1.2 → 2.2.0 - Mend

@entur/dropdown 2.1.2 → 2.2.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 (11) hide show

package/CHANGELOG.md +12 -0
package/dist/DownshiftProvider.d.ts +1 -0
package/dist/SearchableDropdown.d.ts +1 -0
package/dist/dropdown.cjs.development.js +38 -14
package/dist/dropdown.cjs.development.js.map +1 -1
package/dist/dropdown.cjs.production.min.js +1 -1
package/dist/dropdown.cjs.production.min.js.map +1 -1
package/dist/dropdown.esm.js +38 -14
package/dist/dropdown.esm.js.map +1 -1
package/dist/styles.css +74 -65
package/package.json +5 -5

package/dist/dropdown.cjs.production.min.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown.cjs.production.min.js","sources":["../src/DownshiftProvider.tsx","../src/DropdownList.tsx","../src/DropdownToggleButton.tsx","../src/DropdownLoadingDots.tsx","../src/BaseDropdown.tsx","../src/RegularDropdown.tsx","../src/SearchableDropdown.tsx","../src/DropdownInputGroup.tsx","../src/useResolvedItems.ts","../src/useNormalizedItems.ts","../src/MultiSelect.tsx","../src/index.tsx","../src/Dropdown.tsx","../src/NativeDropdown.tsx"],"sourcesContent":["import React from 'react';\nimport Downshift, {\n ControllerStateAndHelpers,\n DownshiftState,\n StateChangeOptions,\n} from 'downshift';\nimport { NormalizedDropdownItemType } from './useNormalizedItems';\nimport classNames from 'classnames';\n\nconst DownshiftContext =\n React.createContext<ControllerStateAndHelpers<NormalizedDropdownItemType> \| null>(\n null,\n );\n\nexport type DownshiftProviderProps = {\n onChange?: (\n selectedItem: NormalizedDropdownItemType,\n stateAndHelpers: ControllerStateAndHelpers<NormalizedDropdownItemType>,\n ) => void;\n onInputValueChange?: (value: string) => void;\n inputValue?: string;\n initialSelectedItem?: NormalizedDropdownItemType;\n highlightFirstItemOnOpen?: boolean;\n className?: string;\n style?: React.CSSProperties;\n [key: string]: any;\n};\nexport const DownshiftProvider: React.FC<DownshiftProviderProps> = ({\n children,\n onChange = () => undefined,\n onInputValueChange = () => undefined,\n highlightFirstItemOnOpen = false,\n className,\n style,\n ...rest\n}) => {\n const handleStateChange = (\n changes: any,\n stateAndHelpers: ControllerStateAndHelpers<NormalizedDropdownItemType>,\n ) => {\n if (\n changes.type ===\n Downshift.stateChangeTypes.controlledPropUpdatedSelectedItem\n ) {\n return;\n }\n if ('selectedItem' in changes) {\n onChange(changes.selectedItem, stateAndHelpers);\n } else if ('inputValue' in changes) {\n onInputValueChange(changes.inputValue);\n }\n };\n\n const stateReducer = (\n _: DownshiftState<NormalizedDropdownItemType>,\n changes: StateChangeOptions<NormalizedDropdownItemType>,\n ): Partial<StateChangeOptions<NormalizedDropdownItemType>> => {\n if (highlightFirstItemOnOpen) {\n const wasJustOpened = 'isOpen' in changes && changes.isOpen;\n if (wasJustOpened) {\n return { ...changes, highlightedIndex: 0 };\n }\n }\n return changes;\n };\n\n return (\n <Downshift\n itemToString={item => (item ? item.label : '')}\n onStateChange={handleStateChange}\n stateReducer={stateReducer}\n {...rest}\n >\n {args => (\n <div className={classNames('eds-input-group', className)} style={style}>\n {/* This div is required by Downshift /}\n <DownshiftContext.Provider value={args}>\n {children}\n </DownshiftContext.Provider>\n </div>\n )}\n </Downshift>\n );\n};\n\nexport const useDownshift: () => ControllerStateAndHelpers<NormalizedDropdownItemType> =\n () => {\n const context = React.useContext(DownshiftContext);\n if (!context) {\n throw new Error('You need to wrap your component in a DownshiftProvider');\n }\n return context;\n };\n","import React from 'react';\nimport classNames from 'classnames';\nimport { NormalizedDropdownItemType } from './useNormalizedItems';\nimport { useDownshift } from './DownshiftProvider';\nimport { CheckIcon } from '@entur/icons';\nimport './DropdownList.scss';\n\nexport type DropdownListProps = {\n items: NormalizedDropdownItemType[];\n [key: string]: any;\n};\n\nexport const DropdownList: React.FC<DropdownListProps> = ({\n items,\n ...rest\n}) => {\n const { highlightedIndex, isOpen, selectedItem, getItemProps, getMenuProps } =\n useDownshift();\n\n return (\n <ul\n className={classNames('eds-dropdown-list', {\n 'eds-dropdown-list--open': isOpen,\n })}\n {...getMenuProps()}\n {...rest}\n >\n {isOpen\n ? items.map((item, index) => (\n // eslint-disable-next-line react/jsx-key\n <li\n className={classNames('eds-dropdown-list__item', {\n 'eds-dropdown-list__item--highlighted':\n highlightedIndex === index,\n 'eds-dropdown-list__item--selected': selectedItem === item,\n })}\n {...getItemProps({ key: `${index}${item.value}`, item, index })}\n >\n <span>{item.label}</span>\n {item.icons && (\n <span>\n {item.icons.map((Icon, index) => (\n <Icon\n key={index}\n inline\n className=\"eds-dropdown-list__item-icon\"\n />\n ))}\n </span>\n )}\n {selectedItem === item && <CheckIcon />}\n </li>\n ))\n : null}\n </ul>\n );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport { DownArrowIcon } from '@entur/icons';\nimport { useDownshift } from './DownshiftProvider';\nimport './DropdownToggleButton.scss';\n\nexport const DropdownToggleButton: () => JSX.Element = () => {\n const { getToggleButtonProps, isOpen } = useDownshift();\n return (\n <button\n {...getToggleButtonProps({\n className: classNames('eds-dropdown__toggle-button', {\n 'eds-dropdown__toggle-button--open': isOpen,\n }),\n })}\n tabIndex=\"-1\"\n type=\"button\"\n >\n <DownArrowIcon />\n </button>\n );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport { VisuallyHidden } from '@entur/a11y';\nimport { LoadingDots } from '@entur/loader';\nimport './InlineSpinner.scss';\n\nexport type InlineSpinnerType = {\n /* Ekstra klassenavn /\n className?: string;\n /* Tekst for skjermlesere /\n children: string;\n [key: string]: any;\n};\nexport const DropdownLoadingDots: React.FC<InlineSpinnerType> = ({\n className,\n children,\n ...rest\n}) => (\n <div className={classNames('eds-inline-spinner', className)} {...rest}>\n <LoadingDots />\n <VisuallyHidden>{children}</VisuallyHidden>\n </div>\n);\n","import React from 'react';\nimport { BaseFormControl } from '@entur/form';\nimport { NormalizedDropdownItemType } from './useNormalizedItems';\nimport { DropdownList } from './DropdownList';\nimport { DropdownToggleButton } from './DropdownToggleButton';\nimport { DropdownLoadingDots } from './DropdownLoadingDots';\nimport { CloseSmallIcon } from '@entur/icons';\nimport './BaseDropdown.scss';\nimport { useDownshift } from './DownshiftProvider';\nimport { space } from '@entur/tokens';\n\ntype BaseDropdownProps = {\n className?: string;\n disabled?: boolean;\n items: NormalizedDropdownItemType[];\n loading?: boolean;\n loadingText?: string;\n placeholder?: string;\n style?: { [key: string]: any };\n listStyle?: { [key: string]: any };\n isFilled?: boolean;\n disableLabelAnimation?: boolean;\n [key: string]: any;\n};\nexport const BaseDropdown: React.FC<BaseDropdownProps> = ({\n children,\n className,\n items,\n loading = false,\n loadingText = 'Loading...',\n //eslint-disable-next-line\n placeholder,\n style,\n listStyle,\n clearable,\n label,\n isFilled = false,\n disableLabelAnimation,\n ...rest\n}) => {\n const { getLabelProps } = useDownshift();\n return (\n <div className=\"eds-dropdown-wrapper\" style={style}>\n {/ eslint-disable-next-line @typescript-eslint/ban-ts-comment /}\n {/ @ts-ignore /}\n <BaseFormControl\n append={\n <Appendix\n clearable={clearable}\n loading={loading}\n loadingText={loadingText}\n readOnly={...rest.readOnly}\n />\n }\n className={className}\n label={label}\n isFilled={isFilled}\n labelProps={getLabelProps()}\n disableLabelAnimation={disableLabelAnimation}\n {...rest}\n >\n {children}\n </BaseFormControl>\n <DropdownList\n items={items}\n style={{\n position: 'absolute',\n top: `${space.extraLarge3 + space.extraSmall}px`,\n ...listStyle,\n }}\n {...rest}\n />\n </div>\n );\n};\n\nconst ClearButton: React.FC<{ [key: string]: any }> = ({ ...props }) => {\n const { clearSelection, selectedItem } = useDownshift();\n return (\n <>\n {selectedItem && (\n <button\n className=\"eds-dropdown__clear-button\"\n type=\"button\"\n tabIndex={-1}\n onClick={() => clearSelection()}\n {...props}\n >\n <CloseSmallIcon />\n </button>\n )}\n {selectedItem && <div className=\"eds-dropdown__divider\"></div>}\n </>\n );\n};\n\nconst Appendix: React.FC<{\n clearable: boolean;\n loading: boolean;\n loadingText: string;\n readOnly: boolean;\n}> = ({ clearable, loading, loadingText, readOnly }) => {\n if (loading) {\n return <DropdownLoadingDots>{loadingText}</DropdownLoadingDots>;\n }\n if (readOnly) {\n return null;\n }\n return clearable ? (\n <>\n <ClearButton></ClearButton> <DropdownToggleButton />\n </>\n ) : (\n <DropdownToggleButton />\n );\n};\n","import React from 'react';\nimport { NormalizedDropdownItemType } from './useNormalizedItems';\nimport { useDownshift } from './DownshiftProvider';\nimport { BaseDropdown } from './BaseDropdown';\n\ntype RegularDropdownProps = {\n items: NormalizedDropdownItemType[];\n disabled?: boolean;\n placeholder?: string;\n loading?: boolean;\n loadingText?: string;\n className?: string;\n selectOnTab?: boolean;\n openOnFocus?: boolean;\n listStyle?: { [key: string]: any };\n disableLabelAnimation?: boolean;\n clearable?: boolean;\n [key: string]: any;\n};\nexport const RegularDropdown: React.FC<RegularDropdownProps> = ({\n disabled,\n placeholder = 'Vennligst velg',\n selectOnTab = false,\n openOnFocus = false,\n listStyle,\n items,\n label,\n disableLabelAnimation,\n loading,\n loadingText,\n className,\n clearable,\n ...rest\n}) => {\n const {\n getToggleButtonProps,\n selectedItem,\n selectHighlightedItem,\n openMenu,\n isOpen,\n highlightedIndex,\n setHighlightedIndex,\n } = useDownshift();\n return (\n <BaseDropdown\n disabled={disabled}\n listStyle={listStyle}\n items={items}\n label={label}\n isFilled={selectedItem ? true : placeholder.length !== 0}\n disableLabelAnimation={disableLabelAnimation}\n loading={loading}\n loadingText={loadingText}\n className={className}\n clearable={clearable}\n {...rest}\n >\n <button\n {...getToggleButtonProps({\n className: 'eds-form-control eds-dropdown__selected-item',\n style: { textAlign: 'left' },\n disabled,\n type: 'button',\n onKeyDown: e => {\n if (selectOnTab && e.key === 'Tab') {\n selectHighlightedItem();\n }\n\n if (isOpen) {\n const keyDownValue = e.key;\n const matchedItems = items\n .map((item, index) => ({ ...item, index }))\n .filter(item => {\n const firstCharacter = item.label\n .trim()\n .charAt(0)\n .toLowerCase();\n return firstCharacter === keyDownValue;\n });\n\n const nextHighlightItem = matchedItems.find(\n item => item.index > (highlightedIndex ?? 0),\n );\n\n if (nextHighlightItem) {\n setHighlightedIndex(nextHighlightItem.index);\n } else if (matchedItems.length > 0) {\n setHighlightedIndex(matchedItems[0].index);\n }\n }\n },\n onFocus: () => {\n if (openOnFocus) {\n !isOpen && openMenu();\n }\n },\n ...rest,\n })}\n >\n {selectedItem ? selectedItem.label : placeholder}\n </button>\n </BaseDropdown>\n );\n};\n","import React from 'react';\nimport { NormalizedDropdownItemType } from './useNormalizedItems';\nimport { BaseDropdown } from './BaseDropdown';\nimport { useDownshift } from './DownshiftProvider';\n\ntype SearchableDropdownProps = {\n className?: string;\n disabled?: boolean;\n items: NormalizedDropdownItemType[];\n loading?: boolean;\n loadingText?: string;\n placeholder?: string;\n prepend?: React.ReactNode;\n readOnly?: boolean;\n selectOnTab?: boolean;\n openOnFocus?: boolean;\n listStyle?: { [key: string]: any };\n clearable: boolean;\n itemFilter?: (item: NormalizedDropdownItemType) => boolean;\n disableLabelAnimation?: boolean;\n [key: string]: any;\n};\n\nfunction LowerCaseFilterTest(\n item: NormalizedDropdownItemType,\n input: string \| null,\n) {\n if (!input) {\n return true;\n }\n const sanitizeEscapeCharacters = input.replace(\n /[-/\\\\^$+?.()\|[\\]{}]/g,\n '\\\\$&',\n );\n const inputRegex = new RegExp(sanitizeEscapeCharacters, 'i');\n return inputRegex.test(item.label);\n}\n\nexport const SearchableDropdown: React.FC<SearchableDropdownProps> = ({\n disabled = false,\n className,\n items,\n loading,\n loadingText,\n readOnly = false,\n prepend,\n selectOnTab = false,\n openOnFocus = false,\n listStyle,\n clearable,\n itemFilter = (item: NormalizedDropdownItemType, inputValue: string \| null) =>\n LowerCaseFilterTest(item, inputValue),\n label,\n disableLabelAnimation,\n ...rest\n}) => {\n const {\n getInputProps,\n inputValue,\n selectHighlightedItem,\n isOpen,\n openMenu,\n selectedItem,\n } = useDownshift();\n\n const filteredItems = React.useMemo(() => {\n return items.filter(item => itemFilter(item, inputValue));\n }, [inputValue, items, itemFilter]);\n\n return (\n <BaseDropdown\n items={filteredItems}\n disabled={disabled}\n readOnly={readOnly}\n className={className}\n loading={loading}\n loadingText={loadingText}\n prepend={prepend}\n listStyle={listStyle}\n clearable={clearable}\n label={label}\n isFilled={selectedItem ? true : false}\n disableLabelAnimation={disableLabelAnimation}\n >\n <input\n {...getInputProps({\n disabled,\n readOnly,\n className: 'eds-form-control eds-dropdown__input',\n onKeyDown: e => {\n if (selectOnTab && e.key === 'Tab') {\n selectHighlightedItem();\n }\n },\n onFocus: () => {\n if (openOnFocus) {\n !isOpen && openMenu();\n }\n },\n ...rest,\n })}\n />\n </BaseDropdown>\n );\n};\n","import { FeedbackText, VariantProvider, VariantType } from '@entur/form';\nimport React from 'react';\n\nexport type DropdownInputGroupProps = {\n feedback?: string;\n variant?: VariantType;\n className?: string;\n style?: { [key: string]: any };\n};\nexport const DropdownInputGroup: React.FC<DropdownInputGroupProps> = ({\n children,\n feedback,\n variant,\n className,\n style,\n}) => {\n return (\n <VariantProvider variant={variant}>\n <div className={className} style={style}>\n {children}\n {feedback && variant && (\n <FeedbackText variant={variant}>{feedback}</FeedbackText>\n )}\n </div>\n </VariantProvider>\n );\n};\n","import React from 'react';\nimport { debounce } from '@entur/utils';\nimport { DropdownItemType, useNormalizedItems } from './useNormalizedItems';\n\nconst useIsMounted = () => {\n const isMountedRef = React.useRef(true);\n React.useEffect(() => {\n return () => {\n isMountedRef.current = false;\n };\n }, []);\n return isMountedRef.current;\n};\n\ntype AsyncDropdownItemType = (inputType: string) => Promise<DropdownItemType[]>;\ntype SyncDropdownItemType = (inputType: string) => DropdownItemType[];\nexport type PotentiallyAsyncDropdownItemType =\n \| DropdownItemType[]\n \| SyncDropdownItemType\n \| AsyncDropdownItemType;\n\ntype ResolverState = {\n items: DropdownItemType[];\n loading: boolean;\n};\n\ntype ResolverAction =\n \| {\n type: 'request results';\n }\n \| {\n type: 'received results';\n payload: DropdownItemType[];\n };\n\nconst reducer = (_state: ResolverState, action: ResolverAction) => {\n switch (action.type) {\n case 'request results':\n return { items: [], loading: true };\n case 'received results':\n return { items: action.payload, loading: false };\n }\n};\n\nexport const useResolvedItems = (\n /** The list of items, or an async function that resolves the list of items /\n itemsOrItemsResolver: PotentiallyAsyncDropdownItemType,\n /* The time to wait after the input changes to the fetchItems method is called /\n debounceTimeout: number = 250,\n) => {\n const isItemsFunction = typeof itemsOrItemsResolver === 'function';\n\n // Here, we normalize the itemsResolver argument to an async function, so we\n // can use it without thinking about the differences later\n const itemsResolver = React.useMemo(\n () =>\n isItemsFunction\n ? (itemsOrItemsResolver as AsyncDropdownItemType)\n : () => Promise.resolve(itemsOrItemsResolver as DropdownItemType[]),\n [itemsOrItemsResolver, isItemsFunction],\n );\n\n const [{ items, loading }, dispatch] = React.useReducer(reducer, {\n items: isItemsFunction ? [] : (itemsOrItemsResolver as DropdownItemType[]),\n loading: false,\n });\n\n // This is a way to check whether or not the dropdown is still in the\n // document. We use it below to make sure we're not updating the state of\n // an unmounted component.\n const isMounted = useIsMounted();\n\n // Next, let's create the fetching function. This should be called whenever\n // the input value changes\n const fetchItems = React.useCallback(\n async (inputValue: string) => {\n if (!isMounted) {\n return;\n }\n dispatch({ type: 'request results' });\n const resolvedItems = await itemsResolver(inputValue);\n if (isMounted) {\n dispatch({ type: 'received results', payload: resolvedItems });\n }\n },\n [itemsResolver, isMounted],\n );\n\n const normalizedItems = useNormalizedItems(items);\n React.useEffect(() => {\n // Let's fetch the list initially if it's specified\n if (isItemsFunction) {\n fetchItems('');\n }\n }, [isItemsFunction, fetchItems]);\n\n return {\n items: normalizedItems,\n loading: isItemsFunction ? loading : false,\n fetchItems: debounce(fetchItems, debounceTimeout),\n };\n};\n","import React from 'react';\n\n/* A dropdown item has a string label and a string value /\nexport type NormalizedDropdownItemType = {\n value: string;\n label: string;\n icons?: React.ComponentType<any>[];\n};\n\nexport type DropdownItemType =\n \| { value?: string; label: string; icons?: React.ComponentType<any>[] }\n \| string;\nexport const useNormalizedItems = (items: DropdownItemType[]) =>\n React.useMemo(\n () =>\n items.map(item => {\n if (typeof item == 'string') {\n return { value: item, label: item };\n }\n\n if (!('value' in item)) {\n return { ...item, value: item.label };\n }\n return item as NormalizedDropdownItemType;\n }),\n [items],\n );\n","import React, { useState } from 'react';\nimport {\n useSelect,\n UseSelectProps,\n // StateChangeOptions,\n // UseSelectStateChangeOptions,\n} from 'downshift';\nimport { NormalizedDropdownItemType } from './useNormalizedItems';\nimport { BaseFormControl, VariantType } from '@entur/form';\nimport {\n PotentiallyAsyncDropdownItemType,\n useResolvedItems,\n} from './useResolvedItems';\nimport { DropdownLoadingDots } from './DropdownLoadingDots';\nimport { useRandomId } from '@entur/utils';\nimport classNames from 'classnames';\nimport { CloseIcon, DownArrowIcon } from '@entur/icons';\nimport { space } from '@entur/tokens';\nimport './MultiSelect.scss';\nimport './DropdownList.scss';\n\nconst MultiSelectContext = React.createContext<{\n isOpen: boolean;\n reset: () => void;\n getToggleButtonProps: any;\n openMenu: () => void;\n openOnFocus?: boolean;\n} \| null>(null);\nconst useMultiSelectContext = () => {\n const context = React.useContext(MultiSelectContext);\n if (!context) {\n throw new Error('You need to wrap your component in a DownshiftProvider');\n }\n return context;\n};\n\nfunction stateReducer(\n state: any, //StateChangeOptions<NormalizedDropdownItemType>,\n actionAndChanges: any, //UseSelectStateChangeOptions<NormalizedDropdownItemType>,\n) {\n const { changes, type } = actionAndChanges;\n switch (type) {\n case useSelect.stateChangeTypes.MenuKeyDownEnter:\n case useSelect.stateChangeTypes.MenuKeyDownSpaceButton:\n case useSelect.stateChangeTypes.ItemClick:\n return {\n ...changes,\n isOpen: true, // keep menu open after selection.\n highlightedIndex: state.highlightedIndex,\n };\n default:\n return changes;\n }\n}\ntype MultiSelectProps = {\n /* Tilgjengelige valg i MultiSelect /\n items: PotentiallyAsyncDropdownItemType;\n /* Tekst som vises i boksen når elementer er valgt /\n itemsSelectedLabel?: (\n selectedItems: NormalizedDropdownItemType[],\n numberOfItems?: number,\n ) => string;\n /* Beskrivende tekst som forklarer feltet /\n label?: string;\n /* Hvilken valideringsvariant som gjelder /\n variant?: VariantType;\n /* Valideringsmelding, brukes sammen med `variant` /\n feedback?: string;\n /* Tekst eller ikon som kommer før MultiSelect /\n prepend?: React.ReactNode;\n /* Deaktiver dropdownen /\n disabled?: boolean;\n /* Setter dropdownen i read-only modus /\n readOnly?: boolean;\n /* Placeholder-tekst når ingenting er satt /\n placeholder?: string;\n /* En tekst som beskriver hva som skjer når man venter på items /\n loadingText?: string;\n /* Callback når brukeren endrer valg /\n onChange?: (e: any) => void;\n /* Om man skal vise items ved fokusering av input-feltet, før man skriver inn noe\n * @default false\n /\n openOnFocus?: boolean;\n /* Ekstra klassenavn /\n className?: string;\n /* Styling som sendes ned til MultiSelect-lista /\n listStyle?: { [key: string]: any };\n /* Antall millisekunder man venter før man kaller en potensiell items-funksjon\n * @default 250\n /\n debounceTimeout?: number;\n /* Om man skal ha muliget for å nullstille Dropdownen\n * @default false\n /\n clearable?: boolean;\n loading?: boolean;\n style?: React.CSSProperties;\n initialSelectedItems?: NormalizedDropdownItemType[];\n} & Omit<UseSelectProps<NormalizedDropdownItemType>, 'initialSelectedItem'>;\n\nexport const MultiSelect: React.FC<MultiSelectProps> = ({\n items: input,\n itemsSelectedLabel = items => SelectedItemsLabel(items),\n label,\n feedback,\n variant,\n disabled,\n readOnly = false,\n onChange = () => undefined,\n className,\n clearable = false,\n loading = false,\n loadingText = '',\n openOnFocus = false,\n style,\n listStyle,\n initialSelectedItems = [],\n debounceTimeout,\n ...rest\n}) => {\n const { items } = useResolvedItems(input, debounceTimeout);\n const [selectedItems, setSelectedItems] =\n useState<NormalizedDropdownItemType[]>(initialSelectedItems);\n\n const reset = React.useCallback(() => {\n setSelectedItems([]);\n }, []);\n const {\n isOpen,\n getToggleButtonProps,\n getLabelProps,\n getMenuProps,\n highlightedIndex,\n getItemProps,\n openMenu,\n } = useSelect<NormalizedDropdownItemType>({\n items,\n stateReducer,\n selectedItem: null,\n onSelectedItemChange: ({ selectedItem }) => {\n if (!selectedItem) {\n return;\n }\n const index = selectedItems.indexOf(selectedItem);\n if (index > 0) {\n const slicedItemList = [\n ...selectedItems.slice(0, index),\n ...selectedItems.slice(index + 1),\n ];\n setSelectedItems(slicedItemList);\n onChange(slicedItemList);\n } else if (index === 0) {\n const slicedItemList = [...selectedItems.slice(1)];\n setSelectedItems(slicedItemList);\n onChange(slicedItemList);\n } else {\n const slicedItemList = [...selectedItems, selectedItem];\n setSelectedItems(slicedItemList);\n onChange(slicedItemList);\n }\n },\n ...rest,\n });\n const buttonText = selectedItems.length\n ? itemsSelectedLabel(selectedItems)\n : '';\n const multiSelectId = useRandomId('eds-multiselect');\n\n return (\n <MultiSelectContext.Provider\n value={{ isOpen, reset, getToggleButtonProps, openMenu, openOnFocus }}\n >\n <div\n className={classNames(\n 'eds-multiselect',\n 'eds-dropdown-wrapper',\n className,\n )}\n style={style}\n >\n <BaseFormControl\n label={label}\n labelId={multiSelectId}\n labelProps={...getLabelProps()}\n feedback={feedback}\n variant={variant}\n isFilled={selectedItems.length > 0 \|\| isOpen}\n disabled={disabled}\n readOnly={readOnly}\n append={\n <Appendix\n hasSelected={clearable && selectedItems.length > 0}\n loading={loading}\n loadingText={loadingText}\n readOnly={readOnly}\n />\n }\n >\n <button\n {...getToggleButtonProps({\n style: {\n textAlign: 'left',\n },\n type: 'button',\n className: 'eds-form-control eds-multiselect__button',\n })}\n >\n {buttonText}\n </button>\n </BaseFormControl>\n <ul\n className={classNames('eds-dropdown-list', {\n 'eds-dropdown-list--open': isOpen,\n })}\n {...getMenuProps({\n style: {\n position: 'absolute',\n top: `${space.extraLarge3 + space.extraSmall}px`,\n ...listStyle,\n },\n })}\n >\n {isOpen &&\n items.map((item, index) => (\n <li\n className={classNames('eds-dropdown-list__item', {\n 'eds-dropdown-list__item--highlighted':\n highlightedIndex === index,\n 'eds-dropdown-list__item--selected':\n selectedItems.includes(item),\n })}\n key={`${item}${index}`}\n {...getItemProps({\n item,\n index,\n })}\n style={{ display: 'flex' }}\n >\n <span style={{ display: 'flex' }}>\n <span\n className={classNames('eds-multiselect-checkbox', {\n 'eds-multiselect-checkbox--checked':\n selectedItems.includes(item),\n })}\n >\n <CheckboxIcon />\n </span>\n <span className=\"eds-multiselect__item-label\">\n {item.label}\n </span>\n </span>\n {item.icons && (\n <span>\n {item.icons.map((Icon, index) => (\n <Icon\n key={index}\n inline\n className=\"eds-dropdown-list__item-icon\"\n />\n ))}\n </span>\n )}\n </li>\n ))}\n </ul>\n </div>\n </MultiSelectContext.Provider>\n );\n};\n\nconst ClearButton: React.FC<{ [key: string]: any }> = ({ ...props }) => {\n const { reset } = useMultiSelectContext();\n return (\n <>\n <button\n className=\"eds-dropdown__clear-button\"\n type=\"button\"\n tabIndex={-1}\n onClick={() => reset()}\n {...props}\n >\n <CloseIcon />\n </button>\n <div className=\"eds-dropdown__divider\"></div>\n </>\n );\n};\n\nconst Appendix: React.FC<{\n loading: boolean;\n loadingText: string;\n readOnly: boolean;\n hasSelected: boolean;\n}> = ({ loading, loadingText, readOnly, hasSelected }) => {\n if (loading) {\n return <DropdownLoadingDots>{loadingText}</DropdownLoadingDots>;\n }\n if (readOnly) {\n return null;\n }\n return hasSelected ? (\n <>\n <ClearButton></ClearButton>\n <DropdownToggleButton />\n </>\n ) : (\n <DropdownToggleButton />\n );\n};\n\nconst DropdownToggleButton = () => {\n const { getToggleButtonProps, isOpen, openMenu, openOnFocus } =\n useMultiSelectContext();\n return (\n <button\n {...getToggleButtonProps({\n className: classNames('eds-dropdown__toggle-button', {\n 'eds-dropdown__toggle-button--open': isOpen,\n }),\n onFocus: () => {\n if (openOnFocus) {\n openMenu();\n }\n },\n })}\n type=\"button\"\n >\n <DownArrowIcon />\n </button>\n );\n};\n\nconst CheckboxIcon: React.FC = () => {\n return (\n <svg\n className=\"eds-checkbox-icon\"\n width=\"11px\"\n height=\"9px\"\n viewBox=\"6 11 37 33\"\n >\n <path\n className=\"eds-checkbox-icon__path\"\n d=\"M14.1 27.2l7.1 7.2 14.6-14.8\"\n fill=\"none\"\n />\n </svg>\n );\n};\n\nfunction SelectedItemsLabel(items: NormalizedDropdownItemType[]) {\n return items.length < 3\n ? items.map(item => item.label).toString()\n : `${items.length} elementer valgt`;\n}\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('dropdown', 'form', 'a11y', 'chip');\n\nexport from './Dropdown';\nexport * from './NativeDropdown';\nexport * from './MultiSelect';\nexport * from './MultiSelect';\n","import React from 'react';\nimport { VariantType } from '@entur/form';\nimport { NormalizedDropdownItemType } from './useNormalizedItems';\nimport { RegularDropdown } from './RegularDropdown';\nimport { DownshiftProvider } from './DownshiftProvider';\nimport { SearchableDropdown } from './SearchableDropdown';\nimport { DropdownInputGroup } from './DropdownInputGroup';\nimport {\n useResolvedItems,\n PotentiallyAsyncDropdownItemType,\n} from './useResolvedItems';\n\nexport type DropdownProps = {\n /** Tilgjengelige valg i dropdownen /\n items: PotentiallyAsyncDropdownItemType;\n /* Valgt verdi. Bruk null for ingen verdi. /\n value?: string \| null;\n /* Om man skal kunne søke i dropdownen eller ikke /\n searchable?: boolean;\n /* Beskrivende tekst som forklarer feltet /\n label?: string;\n /* Tooltip for labelen /\n labelTooltip?: string;\n /* Hvilken valideringsvariant som gjelder /\n variant?: VariantType;\n /* Valideringsmelding, brukes sammen med `variant` /\n feedback?: string;\n /* Tekst eller ikon som kommer før dropdownen /\n prepend?: React.ReactNode;\n /* Deaktiver dropdownen /\n disabled?: boolean;\n /* Setter dropdownen i read-only modus /\n readOnly?: boolean;\n /* Placeholder-tekst når ingenting er satt /\n placeholder?: string;\n /* En tekst som beskriver hva som skjer når man venter på items /\n loadingText?: string;\n /* Callback når brukeren endrer valg /\n onChange?: (selectedItem: NormalizedDropdownItemType \| null) => void;\n /* Lar brukeren velge ved å \"tæbbe\" seg ut av komponenten /\n selectOnTab?: boolean;\n /* Om man skal vise items ved fokusering av input-feltet, før man skriver inn noe /\n openOnFocus?: boolean;\n /* Antall millisekunder man venter før man kaller en potensiell items-funksjon /\n debounceTimeout?: number;\n /* Om man skal ha muliget for å nullstille Dropdownen\n * @default false\n /\n clearable?: boolean;\n /* Ekstra klassenavn /\n className?: string;\n /* Marker første valgmulighet automatisk /\n highlightFirstItemOnOpen?: boolean;\n /* Styling som sendes ned til Dropdown-lista /\n listStyle?: { [key: string]: any };\n /* Filtreringen som blir brukt dersom man har en searchable Dropdown\n * @default Enkel tekstsammenligning\n /\n itemFilter?: (item: NormalizedDropdownItemType) => boolean;\n /* Plasserer labelen statisk på toppen av inputfeltet\n * @default false\n /\n disableLabelAnimation?: boolean;\n /* Alle ekstra props videresendes til Downshift /\n [key: string]: any;\n};\nexport const Dropdown: React.FC<DropdownProps> = ({\n highlightFirstItemOnOpen,\n debounceTimeout,\n disabled,\n feedback,\n items,\n label,\n loadingText,\n onChange = () => undefined,\n placeholder,\n prepend,\n readOnly,\n searchable,\n selectOnTab,\n openOnFocus,\n variant,\n value,\n clearable = false,\n className,\n style,\n listStyle,\n itemFilter,\n disableLabelAnimation,\n ...rest\n}) => {\n const {\n items: normalizedItems,\n loading,\n fetchItems,\n } = useResolvedItems(items, debounceTimeout);\n\n const selectedItem =\n value === undefined\n ? undefined\n : normalizedItems.find(item => value === item.value) \|\| null;\n\n const RenderedDropdown = searchable ? SearchableDropdown : RegularDropdown;\n const searchAbleProps = searchable\n ? { itemFilter: itemFilter, name: rest.name, 'data-cy': rest['data-cy'] }\n : { name: rest.name, 'data-cy': rest['data-cy'] };\n return (\n <DownshiftProvider\n selectedItem={selectedItem}\n onInputValueChange={fetchItems}\n onChange={onChange}\n value={value}\n highlightFirstItemOnOpen={highlightFirstItemOnOpen}\n className={className}\n style={style}\n {...rest}\n >\n <DropdownInputGroup feedback={feedback} variant={variant}>\n <RenderedDropdown\n label={label}\n items={normalizedItems}\n loading={loading}\n loadingText={loadingText}\n disabled={disabled}\n readOnly={readOnly}\n placeholder={placeholder}\n prepend={prepend}\n selectOnTab={selectOnTab}\n openOnFocus={openOnFocus}\n listStyle={listStyle}\n clearable={clearable}\n disableLabelAnimation={disableLabelAnimation}\n {...searchAbleProps}\n />\n </DropdownInputGroup>\n </DownshiftProvider>\n );\n};\n","import { BaseFormControl, VariantType } from '@entur/form';\nimport { DownArrowIcon } from '@entur/icons';\nimport { useRandomId } from '@entur/utils';\nimport React from 'react';\nimport { DropdownLoadingDots } from './DropdownLoadingDots';\nimport './NativeDropdown.scss';\nimport {\n PotentiallyAsyncDropdownItemType,\n useResolvedItems,\n} from './useResolvedItems';\n\nexport type NativeDropdownProps = {\n /* Ekstra klassenavn /\n className?: string;\n /\n For å deaktivere dropdownen\n * @default false\n /\n disabled?: boolean;\n / Valideringsmelding, brukes sammen med `variant` /\n feedback?: string;\n /* Alle valg for dropdownen å ha /\n items: PotentiallyAsyncDropdownItemType;\n /* Beskrivende tekst som forklarer feltet /\n label: string;\n /* En callback for endringer av value /\n onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;\n /* Tekst eller ikon som kommer før dropdownen /\n prepend?: React.ReactNode;\n /\n Setter dropdownen i read-only modus\n * @default false\n /\n readOnly?: boolean;\n / Den valgte verdien /\n value?: string;\n /* Hvilken valideringsvariant som gjelder /\n variant?: VariantType;\n /* Plasserer labelen statisk på toppen av inputfeltet\n * @default false\n */\n disableLabelAnimation?: boolean;\n [key: string]: any;\n};\n\nexport const NativeDropdown: React.FC<NativeDropdownProps> = ({\n className,\n disabled = false,\n readOnly = false,\n items,\n loadingText,\n prepend,\n style,\n label,\n variant,\n feedback,\n disableLabelAnimation,\n ...rest\n}) => {\n const { items: normalizedItems, loading } = useResolvedItems(items);\n\n let rightSideIcon: JSX.Element \| null = <DownArrowIcon inline={true} />;\n if (disabled \|\| readOnly) {\n rightSideIcon = null;\n } else if (loading) {\n rightSideIcon = <DropdownLoadingDots>{loadingText}</DropdownLoadingDots>;\n }\n const nativeDropdownId = useRandomId('eds-native-dropdown');\n return (\n <BaseFormControl\n disabled={disabled}\n readOnly={readOnly}\n prepend={prepend}\n append={rightSideIcon}\n className={className}\n style={style}\n label={label}\n variant={variant}\n feedback={feedback}\n labelId={nativeDropdownId}\n disableLabelAnimation={disableLabelAnimation}\n isFilled={true}\n >\n <select\n aria-invalid={variant === 'error'}\n className=\"eds-form-control eds-dropdown\"\n disabled={disabled \|\| readOnly}\n {...rest}\n >\n {normalizedItems.map(item => (\n <option key={item.value} value={item.value}>\n {item.label}\n </option>\n ))}\n </select>\n </BaseFormControl>\n );\n};\n"],"names":["DownshiftContext","React","createContext","DownshiftProvider","children","onChange","onInputValueChange","highlightFirstItemOnOpen","className","style","rest","Downshift","itemToString","item","label","onStateChange","changes","stateAndHelpers","type","stateChangeTypes","controlledPropUpdatedSelectedItem","selectedItem","inputValue","stateReducer","_","isOpen","highlightedIndex","args","classNames","Provider","value","useDownshift","context","useContext","Error","DropdownList","items","getItemProps","getMenuProps","map","index","key","icons","Icon","inline","CheckIcon","DropdownToggleButton","getToggleButtonProps","tabIndex","DownArrowIcon","DropdownLoadingDots","LoadingDots","VisuallyHidden","BaseDropdown","loading","loadingText","placeholder","listStyle","clearable","isFilled","disableLabelAnimation","getLabelProps","BaseFormControl","append","Appendix","readOnly","labelProps","position","top","space","extraLarge3","extraSmall","ClearButton","props","clearSelection","onClick","CloseSmallIcon","RegularDropdown","disabled","selectOnTab","openOnFocus","selectHighlightedItem","openMenu","setHighlightedIndex","length","textAlign","onKeyDown","e","keyDownValue","matchedItems","filter","trim","charAt","toLowerCase","nextHighlightItem","find","onFocus","SearchableDropdown","prepend","itemFilter","input","sanitizeEscapeCharacters","replace","RegExp","test","LowerCaseFilterTest","getInputProps","filteredItems","useMemo","DropdownInputGroup","feedback","variant","VariantProvider","FeedbackText","reducer","_state","action","payload","useResolvedItems","itemsOrItemsResolver","debounceTimeout","isMountedRef","isItemsFunction","itemsResolver","Promise","resolve","useReducer","dispatch","isMounted","useRef","useEffect","current","fetchItems","useCallback","resolvedItems","normalizedItems","useNormalizedItems","debounce","MultiSelectContext","useMultiSelectContext","state","actionAndChanges","useSelect","MenuKeyDownEnter","MenuKeyDownSpaceButton","ItemClick","reset","CloseIcon","hasSelected","CheckboxIcon","width","height","viewBox","d","fill","searchable","undefined","RenderedDropdown","searchAbleProps","name","itemsSelectedLabel","toString","SelectedItemsLabel","initialSelectedItems","useState","selectedItems","setSelectedItems","onSelectedItemChange","indexOf","slicedItemList","slice","buttonText","multiSelectId","useRandomId","labelId","includes","display","rightSideIcon","nativeDropdownId"],"mappings":"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"}
1	+ {"version":3,"file":"dropdown.cjs.production.min.js","sources":["../src/DownshiftProvider.tsx","../src/DropdownList.tsx","../src/DropdownToggleButton.tsx","../src/DropdownLoadingDots.tsx","../src/BaseDropdown.tsx","../src/RegularDropdown.tsx","../src/SearchableDropdown.tsx","../src/DropdownInputGroup.tsx","../src/useResolvedItems.ts","../src/useNormalizedItems.ts","../src/MultiSelect.tsx","../src/index.tsx","../src/Dropdown.tsx","../src/NativeDropdown.tsx"],"sourcesContent":["import React from 'react';\nimport Downshift, {\n ControllerStateAndHelpers,\n DownshiftState,\n StateChangeOptions,\n} from 'downshift';\nimport { NormalizedDropdownItemType } from './useNormalizedItems';\nimport classNames from 'classnames';\n\nconst DownshiftContext =\n React.createContext<ControllerStateAndHelpers<NormalizedDropdownItemType> \| null>(\n null,\n );\n\nexport type DownshiftProviderProps = {\n onChange?: (\n selectedItem: NormalizedDropdownItemType,\n stateAndHelpers: ControllerStateAndHelpers<NormalizedDropdownItemType>,\n ) => void;\n onInputValueChange?: (value: string) => void;\n inputValue?: string;\n initialSelectedItem?: NormalizedDropdownItemType;\n highlightFirstItemOnOpen?: boolean;\n className?: string;\n style?: React.CSSProperties;\n searchable?: boolean;\n [key: string]: any;\n};\nexport const DownshiftProvider: React.FC<DownshiftProviderProps> = ({\n children,\n onChange = () => undefined,\n onInputValueChange = () => undefined,\n highlightFirstItemOnOpen = false,\n className,\n style,\n searchable = false,\n ...rest\n}) => {\n const handleStateChange = (\n changes: any,\n stateAndHelpers: ControllerStateAndHelpers<NormalizedDropdownItemType>,\n ) => {\n if (\n changes.type ===\n Downshift.stateChangeTypes.controlledPropUpdatedSelectedItem\n ) {\n return;\n }\n if ('selectedItem' in changes) {\n onChange(changes.selectedItem, stateAndHelpers);\n } else if ('inputValue' in changes) {\n onInputValueChange(changes.inputValue);\n }\n };\n\n const stateReducer = (\n _: DownshiftState<NormalizedDropdownItemType>,\n changes: StateChangeOptions<NormalizedDropdownItemType>,\n ): Partial<StateChangeOptions<NormalizedDropdownItemType>> => {\n const highlightFirstOnOpen =\n highlightFirstItemOnOpen && 'isOpen' in changes && changes.isOpen;\n const highlightFirstItemIndex: Partial<\n StateChangeOptions<NormalizedDropdownItemType>\n > = highlightFirstOnOpen ? { highlightedIndex: 0 } : {};\n\n if (searchable) {\n const { type } = changes;\n\n switch (type) {\n case '__autocomplete_change_input__':\n return {\n // return normal changes.\n ...changes,\n ...highlightFirstItemIndex,\n };\n case '__autocomplete_click_item__':\n case '__autocomplete_keydown_enter__':\n case '__autocomplete_blur_input__':\n case '__autocomplete_mouseup__':\n return {\n ...changes,\n // if we had an item highlighted in the previous state.\n // we will reset input field value to blank\n inputValue: '',\n ...highlightFirstItemIndex,\n };\n default:\n return {\n ...changes,\n ...highlightFirstItemIndex,\n };\n }\n } else {\n return { ...changes, ...highlightFirstItemIndex };\n }\n };\n\n return (\n <Downshift\n itemToString={item => (item ? item.label : '')}\n onStateChange={handleStateChange}\n stateReducer={stateReducer}\n {...rest}\n >\n {args => (\n <div className={classNames('eds-input-group', className)} style={style}>\n {/* This div is required by Downshift /}\n <DownshiftContext.Provider value={args}>\n {children}\n </DownshiftContext.Provider>\n </div>\n )}\n </Downshift>\n );\n};\n\nexport const useDownshift: () => ControllerStateAndHelpers<NormalizedDropdownItemType> =\n () => {\n const context = React.useContext(DownshiftContext);\n if (!context) {\n throw new Error('You need to wrap your component in a DownshiftProvider');\n }\n return context;\n };\n","import React from 'react';\nimport classNames from 'classnames';\nimport { NormalizedDropdownItemType } from './useNormalizedItems';\nimport { useDownshift } from './DownshiftProvider';\nimport { CheckIcon } from '@entur/icons';\nimport './DropdownList.scss';\n\nexport type DropdownListProps = {\n items: NormalizedDropdownItemType[];\n [key: string]: any;\n};\n\nexport const DropdownList: React.FC<DropdownListProps> = ({\n items,\n ...rest\n}) => {\n const { highlightedIndex, isOpen, selectedItem, getItemProps, getMenuProps } =\n useDownshift();\n\n return (\n <ul\n className={classNames('eds-dropdown-list', {\n 'eds-dropdown-list--open': isOpen,\n })}\n {...getMenuProps()}\n {...rest}\n >\n {isOpen\n ? items.map((item, index) => (\n // eslint-disable-next-line react/jsx-key\n <li\n className={classNames('eds-dropdown-list__item', {\n 'eds-dropdown-list__item--highlighted':\n highlightedIndex === index,\n 'eds-dropdown-list__item--selected': selectedItem === item,\n })}\n {...getItemProps({ key: `${index}${item.value}`, item, index })}\n >\n <span>{item.label}</span>\n {item.icons && (\n <span>\n {item.icons.map((Icon, index) => (\n <Icon\n key={index}\n inline\n className=\"eds-dropdown-list__item-icon\"\n />\n ))}\n </span>\n )}\n {selectedItem === item && <CheckIcon />}\n </li>\n ))\n : null}\n </ul>\n );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport { DownArrowIcon } from '@entur/icons';\nimport { useDownshift } from './DownshiftProvider';\nimport './DropdownToggleButton.scss';\n\nexport const DropdownToggleButton: () => JSX.Element = () => {\n const { getToggleButtonProps, isOpen } = useDownshift();\n return (\n <button\n {...getToggleButtonProps({\n className: classNames('eds-dropdown__toggle-button', {\n 'eds-dropdown__toggle-button--open': isOpen,\n }),\n })}\n tabIndex=\"-1\"\n type=\"button\"\n >\n <DownArrowIcon />\n </button>\n );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport { VisuallyHidden } from '@entur/a11y';\nimport { LoadingDots } from '@entur/loader';\nimport './InlineSpinner.scss';\n\nexport type InlineSpinnerType = {\n /* Ekstra klassenavn /\n className?: string;\n /* Tekst for skjermlesere /\n children: string;\n [key: string]: any;\n};\nexport const DropdownLoadingDots: React.FC<InlineSpinnerType> = ({\n className,\n children,\n ...rest\n}) => (\n <div className={classNames('eds-inline-spinner', className)} {...rest}>\n <LoadingDots />\n <VisuallyHidden>{children}</VisuallyHidden>\n </div>\n);\n","import React from 'react';\nimport { BaseFormControl } from '@entur/form';\nimport { NormalizedDropdownItemType } from './useNormalizedItems';\nimport { DropdownList } from './DropdownList';\nimport { DropdownToggleButton } from './DropdownToggleButton';\nimport { DropdownLoadingDots } from './DropdownLoadingDots';\nimport { CloseSmallIcon } from '@entur/icons';\nimport './BaseDropdown.scss';\nimport { useDownshift } from './DownshiftProvider';\nimport { space } from '@entur/tokens';\n\ntype BaseDropdownProps = {\n className?: string;\n disabled?: boolean;\n items: NormalizedDropdownItemType[];\n loading?: boolean;\n loadingText?: string;\n placeholder?: string;\n style?: { [key: string]: any };\n listStyle?: { [key: string]: any };\n isFilled?: boolean;\n disableLabelAnimation?: boolean;\n [key: string]: any;\n};\nexport const BaseDropdown: React.FC<BaseDropdownProps> = ({\n children,\n className,\n items,\n loading = false,\n loadingText = 'Loading...',\n //eslint-disable-next-line\n placeholder,\n style,\n listStyle,\n clearable,\n label,\n isFilled = false,\n disableLabelAnimation,\n ...rest\n}) => {\n const { getLabelProps } = useDownshift();\n return (\n <div className=\"eds-dropdown-wrapper\" style={style}>\n {/ eslint-disable-next-line @typescript-eslint/ban-ts-comment /}\n {/ @ts-ignore /}\n <BaseFormControl\n append={\n <Appendix\n clearable={clearable}\n loading={loading}\n loadingText={loadingText}\n readOnly={...rest.readOnly}\n />\n }\n className={className}\n label={label}\n isFilled={isFilled}\n labelProps={getLabelProps()}\n disableLabelAnimation={disableLabelAnimation}\n {...rest}\n >\n {children}\n </BaseFormControl>\n <DropdownList\n items={items}\n style={{\n position: 'absolute',\n top: `${space.extraLarge3 + space.extraSmall}px`,\n ...listStyle,\n }}\n {...rest}\n />\n </div>\n );\n};\n\nconst ClearButton: React.FC<{ [key: string]: any }> = ({ ...props }) => {\n const { clearSelection, selectedItem } = useDownshift();\n return (\n <>\n {selectedItem && (\n <button\n className=\"eds-dropdown__clear-button\"\n type=\"button\"\n tabIndex={-1}\n onClick={() => clearSelection()}\n {...props}\n >\n <CloseSmallIcon />\n </button>\n )}\n {selectedItem && <div className=\"eds-dropdown__divider\"></div>}\n </>\n );\n};\n\nconst Appendix: React.FC<{\n clearable: boolean;\n loading: boolean;\n loadingText: string;\n readOnly: boolean;\n}> = ({ clearable, loading, loadingText, readOnly }) => {\n if (loading) {\n return <DropdownLoadingDots>{loadingText}</DropdownLoadingDots>;\n }\n if (readOnly) {\n return null;\n }\n return clearable ? (\n <>\n <ClearButton></ClearButton> <DropdownToggleButton />\n </>\n ) : (\n <DropdownToggleButton />\n );\n};\n","import React from 'react';\nimport { NormalizedDropdownItemType } from './useNormalizedItems';\nimport { useDownshift } from './DownshiftProvider';\nimport { BaseDropdown } from './BaseDropdown';\n\ntype RegularDropdownProps = {\n items: NormalizedDropdownItemType[];\n disabled?: boolean;\n placeholder?: string;\n loading?: boolean;\n loadingText?: string;\n className?: string;\n selectOnTab?: boolean;\n openOnFocus?: boolean;\n listStyle?: { [key: string]: any };\n disableLabelAnimation?: boolean;\n clearable?: boolean;\n [key: string]: any;\n};\nexport const RegularDropdown: React.FC<RegularDropdownProps> = ({\n disabled,\n placeholder = 'Vennligst velg',\n selectOnTab = false,\n openOnFocus = false,\n listStyle,\n items,\n label,\n disableLabelAnimation,\n loading,\n loadingText,\n className,\n clearable,\n ...rest\n}) => {\n const {\n getToggleButtonProps,\n selectedItem,\n selectHighlightedItem,\n openMenu,\n isOpen,\n highlightedIndex,\n setHighlightedIndex,\n } = useDownshift();\n return (\n <BaseDropdown\n disabled={disabled}\n listStyle={listStyle}\n items={items}\n label={label}\n isFilled={selectedItem ? true : placeholder.length !== 0}\n disableLabelAnimation={disableLabelAnimation}\n loading={loading}\n loadingText={loadingText}\n className={className}\n clearable={clearable}\n {...rest}\n >\n <button\n {...getToggleButtonProps({\n className: 'eds-form-control eds-dropdown__selected-item',\n style: { textAlign: 'left' },\n disabled,\n type: 'button',\n onKeyDown: e => {\n if (selectOnTab && e.key === 'Tab') {\n selectHighlightedItem();\n }\n\n if (isOpen) {\n const keyDownValue = e.key;\n const matchedItems = items\n .map((item, index) => ({ ...item, index }))\n .filter(item => {\n const firstCharacter = item.label\n .trim()\n .charAt(0)\n .toLowerCase();\n return firstCharacter === keyDownValue;\n });\n\n const nextHighlightItem = matchedItems.find(\n item => item.index > (highlightedIndex ?? 0),\n );\n\n if (nextHighlightItem) {\n setHighlightedIndex(nextHighlightItem.index);\n } else if (matchedItems.length > 0) {\n setHighlightedIndex(matchedItems[0].index);\n }\n }\n },\n onFocus: () => {\n if (openOnFocus) {\n !isOpen && openMenu();\n }\n },\n ...rest,\n })}\n >\n {selectedItem ? selectedItem.label : placeholder}\n </button>\n </BaseDropdown>\n );\n};\n","import React from 'react';\nimport { NormalizedDropdownItemType } from './useNormalizedItems';\nimport { BaseDropdown } from './BaseDropdown';\nimport { useDownshift } from './DownshiftProvider';\nimport './SearchableDropdown.scss';\n\ntype SearchableDropdownProps = {\n className?: string;\n disabled?: boolean;\n items: NormalizedDropdownItemType[];\n loading?: boolean;\n loadingText?: string;\n placeholder?: string;\n prepend?: React.ReactNode;\n readOnly?: boolean;\n selectOnTab?: boolean;\n openOnFocus?: boolean;\n listStyle?: { [key: string]: any };\n clearable: boolean;\n itemFilter?: (item: NormalizedDropdownItemType) => boolean;\n disableLabelAnimation?: boolean;\n [key: string]: any;\n};\n\nfunction LowerCaseFilterTest(\n item: NormalizedDropdownItemType,\n input: string \| null,\n) {\n if (!input) {\n return true;\n }\n const sanitizeEscapeCharacters = input.replace(\n /[-/\\\\^$+?.()\|[\\]{}]/g,\n '\\\\$&',\n );\n const inputRegex = new RegExp(sanitizeEscapeCharacters, 'i');\n return inputRegex.test(item.label);\n}\n\nexport const SearchableDropdown: React.FC<SearchableDropdownProps> = ({\n disabled = false,\n className,\n items,\n loading,\n loadingText,\n readOnly = false,\n prepend,\n selectOnTab = false,\n openOnFocus = false,\n listStyle,\n clearable,\n itemFilter = (item: NormalizedDropdownItemType, inputValue: string \| null) =>\n LowerCaseFilterTest(item, inputValue),\n label,\n disableLabelAnimation,\n placeholder,\n ...rest\n}) => {\n const {\n getInputProps,\n inputValue,\n selectHighlightedItem,\n isOpen,\n openMenu,\n selectedItem,\n } = useDownshift();\n\n const filteredItems = React.useMemo(() => {\n return items.filter(item => itemFilter(item, inputValue));\n }, [inputValue, items, itemFilter]);\n\n return (\n <BaseDropdown\n items={filteredItems}\n disabled={disabled}\n readOnly={readOnly}\n className={className}\n loading={loading}\n loadingText={loadingText}\n prepend={prepend}\n listStyle={listStyle}\n clearable={clearable}\n label={label}\n isFilled={selectedItem ? true : false}\n disableLabelAnimation={disableLabelAnimation}\n >\n {selectedItem && !inputValue && (\n <span className=\"eds-dropdown__searchable-selected-item\">\n {selectedItem.label}\n </span>\n )}\n <input\n {...getInputProps({\n disabled,\n readOnly,\n className: 'eds-form-control eds-dropdown__input',\n onKeyDown: e => {\n if (selectOnTab && e.key === 'Tab') {\n selectHighlightedItem();\n }\n },\n onFocus: () => {\n if (openOnFocus) {\n !isOpen && openMenu();\n }\n },\n placeholder: selectedItem ? undefined : placeholder,\n ...rest,\n })}\n />\n </BaseDropdown>\n );\n};\n","import { FeedbackText, VariantProvider, VariantType } from '@entur/form';\nimport React from 'react';\n\nexport type DropdownInputGroupProps = {\n feedback?: string;\n variant?: VariantType;\n className?: string;\n style?: { [key: string]: any };\n};\nexport const DropdownInputGroup: React.FC<DropdownInputGroupProps> = ({\n children,\n feedback,\n variant,\n className,\n style,\n}) => {\n return (\n <VariantProvider variant={variant}>\n <div className={className} style={style}>\n {children}\n {feedback && variant && (\n <FeedbackText variant={variant}>{feedback}</FeedbackText>\n )}\n </div>\n </VariantProvider>\n );\n};\n","import React from 'react';\nimport { debounce } from '@entur/utils';\nimport { DropdownItemType, useNormalizedItems } from './useNormalizedItems';\n\nconst useIsMounted = () => {\n const isMountedRef = React.useRef(true);\n React.useEffect(() => {\n return () => {\n isMountedRef.current = false;\n };\n }, []);\n return isMountedRef.current;\n};\n\ntype AsyncDropdownItemType = (inputType: string) => Promise<DropdownItemType[]>;\ntype SyncDropdownItemType = (inputType: string) => DropdownItemType[];\nexport type PotentiallyAsyncDropdownItemType =\n \| DropdownItemType[]\n \| SyncDropdownItemType\n \| AsyncDropdownItemType;\n\ntype ResolverState = {\n items: DropdownItemType[];\n loading: boolean;\n};\n\ntype ResolverAction =\n \| {\n type: 'request results';\n }\n \| {\n type: 'received results';\n payload: DropdownItemType[];\n };\n\nconst reducer = (_state: ResolverState, action: ResolverAction) => {\n switch (action.type) {\n case 'request results':\n return { items: [], loading: true };\n case 'received results':\n return { items: action.payload, loading: false };\n }\n};\n\nexport const useResolvedItems = (\n /** The list of items, or an async function that resolves the list of items /\n itemsOrItemsResolver: PotentiallyAsyncDropdownItemType,\n /* The time to wait after the input changes to the fetchItems method is called /\n debounceTimeout: number = 250,\n) => {\n const isItemsFunction = typeof itemsOrItemsResolver === 'function';\n\n // Here, we normalize the itemsResolver argument to an async function, so we\n // can use it without thinking about the differences later\n const itemsResolver = React.useMemo(\n () =>\n isItemsFunction\n ? (itemsOrItemsResolver as AsyncDropdownItemType)\n : () => Promise.resolve(itemsOrItemsResolver as DropdownItemType[]),\n [itemsOrItemsResolver, isItemsFunction],\n );\n\n const [{ items, loading }, dispatch] = React.useReducer(reducer, {\n items: isItemsFunction ? [] : (itemsOrItemsResolver as DropdownItemType[]),\n loading: false,\n });\n\n // This is a way to check whether or not the dropdown is still in the\n // document. We use it below to make sure we're not updating the state of\n // an unmounted component.\n const isMounted = useIsMounted();\n\n // Next, let's create the fetching function. This should be called whenever\n // the input value changes\n const fetchItems = React.useCallback(\n async (inputValue: string) => {\n if (!isMounted) {\n return;\n }\n dispatch({ type: 'request results' });\n const resolvedItems = await itemsResolver(inputValue);\n if (isMounted) {\n dispatch({ type: 'received results', payload: resolvedItems });\n }\n },\n [itemsResolver, isMounted],\n );\n\n const normalizedItems = useNormalizedItems(items);\n React.useEffect(() => {\n // Let's fetch the list initially if it's specified\n if (isItemsFunction) {\n fetchItems('');\n }\n }, [isItemsFunction, fetchItems]);\n\n return {\n items: normalizedItems,\n loading: isItemsFunction ? loading : false,\n fetchItems: debounce(fetchItems, debounceTimeout),\n };\n};\n","import React from 'react';\n\n/* A dropdown item has a string label and a string value /\nexport type NormalizedDropdownItemType = {\n value: string;\n label: string;\n icons?: React.ComponentType<any>[];\n};\n\nexport type DropdownItemType =\n \| { value?: string; label: string; icons?: React.ComponentType<any>[] }\n \| string;\nexport const useNormalizedItems = (items: DropdownItemType[]) =>\n React.useMemo(\n () =>\n items.map(item => {\n if (typeof item == 'string') {\n return { value: item, label: item };\n }\n\n if (!('value' in item)) {\n return { ...item, value: item.label };\n }\n return item as NormalizedDropdownItemType;\n }),\n [items],\n );\n","import React, { useState } from 'react';\nimport {\n useSelect,\n UseSelectProps,\n // StateChangeOptions,\n // UseSelectStateChangeOptions,\n} from 'downshift';\nimport { NormalizedDropdownItemType } from './useNormalizedItems';\nimport { BaseFormControl, VariantType } from '@entur/form';\nimport {\n PotentiallyAsyncDropdownItemType,\n useResolvedItems,\n} from './useResolvedItems';\nimport { DropdownLoadingDots } from './DropdownLoadingDots';\nimport { useRandomId } from '@entur/utils';\nimport classNames from 'classnames';\nimport { CloseIcon, DownArrowIcon } from '@entur/icons';\nimport { space } from '@entur/tokens';\nimport './MultiSelect.scss';\nimport './DropdownList.scss';\n\nconst MultiSelectContext = React.createContext<{\n isOpen: boolean;\n reset: () => void;\n getToggleButtonProps: any;\n openMenu: () => void;\n openOnFocus?: boolean;\n} \| null>(null);\nconst useMultiSelectContext = () => {\n const context = React.useContext(MultiSelectContext);\n if (!context) {\n throw new Error('You need to wrap your component in a DownshiftProvider');\n }\n return context;\n};\n\nfunction stateReducer(\n state: any, //StateChangeOptions<NormalizedDropdownItemType>,\n actionAndChanges: any, //UseSelectStateChangeOptions<NormalizedDropdownItemType>,\n) {\n const { changes, type } = actionAndChanges;\n switch (type) {\n case useSelect.stateChangeTypes.MenuKeyDownEnter:\n case useSelect.stateChangeTypes.MenuKeyDownSpaceButton:\n case useSelect.stateChangeTypes.ItemClick:\n return {\n ...changes,\n isOpen: true, // keep menu open after selection.\n highlightedIndex: state.highlightedIndex,\n };\n default:\n return changes;\n }\n}\ntype MultiSelectProps = {\n /* Tilgjengelige valg i MultiSelect /\n items: PotentiallyAsyncDropdownItemType;\n /* Tekst som vises i boksen når elementer er valgt /\n itemsSelectedLabel?: (\n selectedItems: NormalizedDropdownItemType[],\n numberOfItems?: number,\n ) => string;\n /* Beskrivende tekst som forklarer feltet /\n label?: string;\n /* Hvilken valideringsvariant som gjelder /\n variant?: VariantType;\n /* Valideringsmelding, brukes sammen med `variant` /\n feedback?: string;\n /* Tekst eller ikon som kommer før MultiSelect /\n prepend?: React.ReactNode;\n /* Deaktiver dropdownen /\n disabled?: boolean;\n /* Setter dropdownen i read-only modus /\n readOnly?: boolean;\n /* Placeholder-tekst når ingenting er satt /\n placeholder?: string;\n /* En tekst som beskriver hva som skjer når man venter på items /\n loadingText?: string;\n /* Callback når brukeren endrer valg /\n onChange?: (e: any) => void;\n /* Om man skal vise items ved fokusering av input-feltet, før man skriver inn noe\n * @default false\n /\n openOnFocus?: boolean;\n /* Ekstra klassenavn /\n className?: string;\n /* Styling som sendes ned til MultiSelect-lista /\n listStyle?: { [key: string]: any };\n /* Antall millisekunder man venter før man kaller en potensiell items-funksjon\n * @default 250\n /\n debounceTimeout?: number;\n /* Om man skal ha muliget for å nullstille Dropdownen\n * @default false\n /\n clearable?: boolean;\n loading?: boolean;\n style?: React.CSSProperties;\n initialSelectedItems?: NormalizedDropdownItemType[];\n} & Omit<UseSelectProps<NormalizedDropdownItemType>, 'initialSelectedItem'>;\n\nexport const MultiSelect: React.FC<MultiSelectProps> = ({\n items: input,\n itemsSelectedLabel = items => SelectedItemsLabel(items),\n label,\n feedback,\n variant,\n disabled,\n readOnly = false,\n onChange = () => undefined,\n className,\n clearable = false,\n loading = false,\n loadingText = '',\n openOnFocus = false,\n style,\n listStyle,\n initialSelectedItems = [],\n debounceTimeout,\n ...rest\n}) => {\n const { items } = useResolvedItems(input, debounceTimeout);\n const [selectedItems, setSelectedItems] =\n useState<NormalizedDropdownItemType[]>(initialSelectedItems);\n\n const reset = React.useCallback(() => {\n setSelectedItems([]);\n }, []);\n const {\n isOpen,\n getToggleButtonProps,\n getLabelProps,\n getMenuProps,\n highlightedIndex,\n getItemProps,\n openMenu,\n } = useSelect<NormalizedDropdownItemType>({\n items,\n stateReducer,\n selectedItem: null,\n onSelectedItemChange: ({ selectedItem }) => {\n if (!selectedItem) {\n return;\n }\n const index = selectedItems.indexOf(selectedItem);\n if (index > 0) {\n const slicedItemList = [\n ...selectedItems.slice(0, index),\n ...selectedItems.slice(index + 1),\n ];\n setSelectedItems(slicedItemList);\n onChange(slicedItemList);\n } else if (index === 0) {\n const slicedItemList = [...selectedItems.slice(1)];\n setSelectedItems(slicedItemList);\n onChange(slicedItemList);\n } else {\n const slicedItemList = [...selectedItems, selectedItem];\n setSelectedItems(slicedItemList);\n onChange(slicedItemList);\n }\n },\n ...rest,\n });\n const buttonText = selectedItems.length\n ? itemsSelectedLabel(selectedItems)\n : '';\n const multiSelectId = useRandomId('eds-multiselect');\n\n return (\n <MultiSelectContext.Provider\n value={{ isOpen, reset, getToggleButtonProps, openMenu, openOnFocus }}\n >\n <div\n className={classNames(\n 'eds-multiselect',\n 'eds-dropdown-wrapper',\n className,\n )}\n style={style}\n >\n <BaseFormControl\n label={label}\n labelId={multiSelectId}\n labelProps={...getLabelProps()}\n feedback={feedback}\n variant={variant}\n isFilled={selectedItems.length > 0 \|\| isOpen}\n disabled={disabled}\n readOnly={readOnly}\n append={\n <Appendix\n hasSelected={clearable && selectedItems.length > 0}\n loading={loading}\n loadingText={loadingText}\n readOnly={readOnly}\n />\n }\n >\n <button\n {...getToggleButtonProps({\n style: {\n textAlign: 'left',\n },\n type: 'button',\n className: 'eds-form-control eds-multiselect__button',\n })}\n >\n {buttonText}\n </button>\n </BaseFormControl>\n <ul\n className={classNames('eds-dropdown-list', {\n 'eds-dropdown-list--open': isOpen,\n })}\n {...getMenuProps({\n style: {\n position: 'absolute',\n top: `${space.extraLarge3 + space.extraSmall}px`,\n ...listStyle,\n },\n })}\n >\n {isOpen &&\n items.map((item, index) => (\n <li\n className={classNames('eds-dropdown-list__item', {\n 'eds-dropdown-list__item--highlighted':\n highlightedIndex === index,\n 'eds-dropdown-list__item--selected':\n selectedItems.includes(item),\n })}\n key={`${item}${index}`}\n {...getItemProps({\n item,\n index,\n })}\n style={{ display: 'flex' }}\n >\n <span style={{ display: 'flex' }}>\n <span\n className={classNames('eds-multiselect-checkbox', {\n 'eds-multiselect-checkbox--checked':\n selectedItems.includes(item),\n })}\n >\n <CheckboxIcon />\n </span>\n <span className=\"eds-multiselect__item-label\">\n {item.label}\n </span>\n </span>\n {item.icons && (\n <span>\n {item.icons.map((Icon, index) => (\n <Icon\n key={index}\n inline\n className=\"eds-dropdown-list__item-icon\"\n />\n ))}\n </span>\n )}\n </li>\n ))}\n </ul>\n </div>\n </MultiSelectContext.Provider>\n );\n};\n\nconst ClearButton: React.FC<{ [key: string]: any }> = ({ ...props }) => {\n const { reset } = useMultiSelectContext();\n return (\n <>\n <button\n className=\"eds-dropdown__clear-button\"\n type=\"button\"\n tabIndex={-1}\n onClick={() => reset()}\n {...props}\n >\n <CloseIcon />\n </button>\n <div className=\"eds-dropdown__divider\"></div>\n </>\n );\n};\n\nconst Appendix: React.FC<{\n loading: boolean;\n loadingText: string;\n readOnly: boolean;\n hasSelected: boolean;\n}> = ({ loading, loadingText, readOnly, hasSelected }) => {\n if (loading) {\n return <DropdownLoadingDots>{loadingText}</DropdownLoadingDots>;\n }\n if (readOnly) {\n return null;\n }\n return hasSelected ? (\n <>\n <ClearButton></ClearButton>\n <DropdownToggleButton />\n </>\n ) : (\n <DropdownToggleButton />\n );\n};\n\nconst DropdownToggleButton = () => {\n const { getToggleButtonProps, isOpen, openMenu, openOnFocus } =\n useMultiSelectContext();\n return (\n <button\n {...getToggleButtonProps({\n className: classNames('eds-dropdown__toggle-button', {\n 'eds-dropdown__toggle-button--open': isOpen,\n }),\n onFocus: () => {\n if (openOnFocus) {\n openMenu();\n }\n },\n })}\n type=\"button\"\n >\n <DownArrowIcon />\n </button>\n );\n};\n\nconst CheckboxIcon: React.FC = () => {\n return (\n <svg\n className=\"eds-checkbox-icon\"\n width=\"11px\"\n height=\"9px\"\n viewBox=\"6 11 37 33\"\n >\n <path\n className=\"eds-checkbox-icon__path\"\n d=\"M14.1 27.2l7.1 7.2 14.6-14.8\"\n fill=\"none\"\n />\n </svg>\n );\n};\n\nfunction SelectedItemsLabel(items: NormalizedDropdownItemType[]) {\n return items.length < 3\n ? items.map(item => item.label).toString()\n : `${items.length} elementer valgt`;\n}\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('dropdown', 'form', 'a11y', 'chip');\n\nexport from './Dropdown';\nexport * from './NativeDropdown';\nexport * from './MultiSelect';\nexport * from './MultiSelect';\n","import React from 'react';\nimport { VariantType } from '@entur/form';\nimport { NormalizedDropdownItemType } from './useNormalizedItems';\nimport { RegularDropdown } from './RegularDropdown';\nimport { DownshiftProvider } from './DownshiftProvider';\nimport { SearchableDropdown } from './SearchableDropdown';\nimport { DropdownInputGroup } from './DropdownInputGroup';\nimport {\n useResolvedItems,\n PotentiallyAsyncDropdownItemType,\n} from './useResolvedItems';\n\nexport type DropdownProps = {\n /** Tilgjengelige valg i dropdownen /\n items: PotentiallyAsyncDropdownItemType;\n /* Valgt verdi. Bruk null for ingen verdi. /\n value?: string \| null;\n /* Om man skal kunne søke i dropdownen eller ikke /\n searchable?: boolean;\n /* Beskrivende tekst som forklarer feltet /\n label?: string;\n /* Tooltip for labelen /\n labelTooltip?: string;\n /* Hvilken valideringsvariant som gjelder /\n variant?: VariantType;\n /* Valideringsmelding, brukes sammen med `variant` /\n feedback?: string;\n /* Tekst eller ikon som kommer før dropdownen /\n prepend?: React.ReactNode;\n /* Deaktiver dropdownen /\n disabled?: boolean;\n /* Setter dropdownen i read-only modus /\n readOnly?: boolean;\n /* Placeholder-tekst når ingenting er satt /\n placeholder?: string;\n /* En tekst som beskriver hva som skjer når man venter på items /\n loadingText?: string;\n /* Callback når brukeren endrer valg /\n onChange?: (selectedItem: NormalizedDropdownItemType \| null) => void;\n /* Lar brukeren velge ved å \"tæbbe\" seg ut av komponenten /\n selectOnTab?: boolean;\n /* Om man skal vise items ved fokusering av input-feltet, før man skriver inn noe /\n openOnFocus?: boolean;\n /* Antall millisekunder man venter før man kaller en potensiell items-funksjon /\n debounceTimeout?: number;\n /* Om man skal ha muliget for å nullstille Dropdownen\n * @default false\n /\n clearable?: boolean;\n /* Ekstra klassenavn /\n className?: string;\n /* Marker første valgmulighet automatisk /\n highlightFirstItemOnOpen?: boolean;\n /* Styling som sendes ned til Dropdown-lista /\n listStyle?: { [key: string]: any };\n /* Filtreringen som blir brukt dersom man har en searchable Dropdown\n * @default Enkel tekstsammenligning\n /\n itemFilter?: (item: NormalizedDropdownItemType) => boolean;\n /* Plasserer labelen statisk på toppen av inputfeltet\n * @default false\n /\n disableLabelAnimation?: boolean;\n /* Alle ekstra props videresendes til Downshift /\n [key: string]: any;\n};\nexport const Dropdown: React.FC<DropdownProps> = ({\n highlightFirstItemOnOpen,\n debounceTimeout,\n disabled,\n feedback,\n items,\n label,\n loadingText,\n onChange = () => undefined,\n placeholder,\n prepend,\n readOnly,\n searchable,\n selectOnTab,\n openOnFocus,\n variant,\n value,\n clearable = false,\n className,\n style,\n listStyle,\n itemFilter,\n disableLabelAnimation,\n ...rest\n}) => {\n const {\n items: normalizedItems,\n loading,\n fetchItems,\n } = useResolvedItems(items, debounceTimeout);\n\n const selectedItem =\n value === undefined\n ? undefined\n : normalizedItems.find(item => value === item.value) \|\| null;\n\n const RenderedDropdown = searchable ? SearchableDropdown : RegularDropdown;\n const searchAbleProps = searchable\n ? { itemFilter: itemFilter, name: rest.name, 'data-cy': rest['data-cy'] }\n : { name: rest.name, 'data-cy': rest['data-cy'] };\n return (\n <DownshiftProvider\n selectedItem={selectedItem}\n onInputValueChange={fetchItems}\n onChange={onChange}\n value={value}\n highlightFirstItemOnOpen={highlightFirstItemOnOpen}\n className={className}\n style={style}\n searchable={searchable}\n {...rest}\n >\n <DropdownInputGroup feedback={feedback} variant={variant}>\n <RenderedDropdown\n label={label}\n items={normalizedItems}\n loading={loading}\n loadingText={loadingText}\n disabled={disabled}\n readOnly={readOnly}\n placeholder={placeholder}\n prepend={prepend}\n selectOnTab={selectOnTab}\n openOnFocus={openOnFocus}\n listStyle={listStyle}\n clearable={clearable}\n disableLabelAnimation={disableLabelAnimation}\n {...searchAbleProps}\n />\n </DropdownInputGroup>\n </DownshiftProvider>\n );\n};\n","import { BaseFormControl, VariantType } from '@entur/form';\nimport { DownArrowIcon } from '@entur/icons';\nimport { useRandomId } from '@entur/utils';\nimport React from 'react';\nimport { DropdownLoadingDots } from './DropdownLoadingDots';\nimport './NativeDropdown.scss';\nimport {\n PotentiallyAsyncDropdownItemType,\n useResolvedItems,\n} from './useResolvedItems';\n\nexport type NativeDropdownProps = {\n /* Ekstra klassenavn /\n className?: string;\n /\n For å deaktivere dropdownen\n * @default false\n /\n disabled?: boolean;\n / Valideringsmelding, brukes sammen med `variant` /\n feedback?: string;\n /* Alle valg for dropdownen å ha /\n items: PotentiallyAsyncDropdownItemType;\n /* Beskrivende tekst som forklarer feltet /\n label: string;\n /* En callback for endringer av value /\n onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;\n /* Tekst eller ikon som kommer før dropdownen /\n prepend?: React.ReactNode;\n /\n Setter dropdownen i read-only modus\n * @default false\n /\n readOnly?: boolean;\n / Den valgte verdien /\n value?: string;\n /* Hvilken valideringsvariant som gjelder /\n variant?: VariantType;\n /* Plasserer labelen statisk på toppen av inputfeltet\n * @default false\n */\n disableLabelAnimation?: boolean;\n [key: string]: any;\n};\n\nexport const NativeDropdown: React.FC<NativeDropdownProps> = ({\n className,\n disabled = false,\n readOnly = false,\n items,\n loadingText,\n prepend,\n style,\n label,\n variant,\n feedback,\n disableLabelAnimation,\n ...rest\n}) => {\n const { items: normalizedItems, loading } = useResolvedItems(items);\n\n let rightSideIcon: JSX.Element \| null = <DownArrowIcon inline={true} />;\n if (disabled \|\| readOnly) {\n rightSideIcon = null;\n } else if (loading) {\n rightSideIcon = <DropdownLoadingDots>{loadingText}</DropdownLoadingDots>;\n }\n const nativeDropdownId = useRandomId('eds-native-dropdown');\n return (\n <BaseFormControl\n disabled={disabled}\n readOnly={readOnly}\n prepend={prepend}\n append={rightSideIcon}\n className={className}\n style={style}\n label={label}\n variant={variant}\n feedback={feedback}\n labelId={nativeDropdownId}\n disableLabelAnimation={disableLabelAnimation}\n isFilled={true}\n >\n <select\n aria-invalid={variant === 'error'}\n className=\"eds-form-control eds-dropdown\"\n disabled={disabled \|\| readOnly}\n {...rest}\n >\n {normalizedItems.map(item => (\n <option key={item.value} value={item.value}>\n {item.label}\n </option>\n ))}\n </select>\n </BaseFormControl>\n );\n};\n"],"names":["DownshiftContext","React","createContext","DownshiftProvider","children","onChange","onInputValueChange","highlightFirstItemOnOpen","className","style","searchable","rest","Downshift","itemToString","item","label","onStateChange","changes","stateAndHelpers","type","stateChangeTypes","controlledPropUpdatedSelectedItem","selectedItem","inputValue","stateReducer","_","highlightFirstItemIndex","isOpen","highlightedIndex","args","classNames","Provider","value","useDownshift","context","useContext","Error","DropdownList","items","getItemProps","getMenuProps","map","index","key","icons","Icon","inline","CheckIcon","DropdownToggleButton","getToggleButtonProps","tabIndex","DownArrowIcon","DropdownLoadingDots","LoadingDots","VisuallyHidden","BaseDropdown","loading","loadingText","placeholder","listStyle","clearable","isFilled","disableLabelAnimation","getLabelProps","BaseFormControl","append","Appendix","readOnly","labelProps","position","top","space","extraLarge3","extraSmall","ClearButton","props","clearSelection","onClick","CloseSmallIcon","RegularDropdown","disabled","selectOnTab","openOnFocus","selectHighlightedItem","openMenu","setHighlightedIndex","length","textAlign","onKeyDown","e","keyDownValue","matchedItems","filter","trim","charAt","toLowerCase","nextHighlightItem","find","onFocus","SearchableDropdown","prepend","itemFilter","input","sanitizeEscapeCharacters","replace","RegExp","test","LowerCaseFilterTest","getInputProps","filteredItems","useMemo","undefined","DropdownInputGroup","feedback","variant","VariantProvider","FeedbackText","reducer","_state","action","payload","useResolvedItems","itemsOrItemsResolver","debounceTimeout","isMountedRef","isItemsFunction","itemsResolver","Promise","resolve","useReducer","dispatch","isMounted","useRef","useEffect","current","fetchItems","useCallback","resolvedItems","normalizedItems","useNormalizedItems","debounce","MultiSelectContext","useMultiSelectContext","state","actionAndChanges","useSelect","MenuKeyDownEnter","MenuKeyDownSpaceButton","ItemClick","reset","CloseIcon","hasSelected","CheckboxIcon","width","height","viewBox","d","fill","RenderedDropdown","searchAbleProps","name","itemsSelectedLabel","toString","SelectedItemsLabel","initialSelectedItems","useState","selectedItems","setSelectedItems","onSelectedItemChange","indexOf","slicedItemList","slice","buttonText","multiSelectId","useRandomId","labelId","includes","display","rightSideIcon","nativeDropdownId"],"mappings":"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"}

package/dist/dropdown.esm.js CHANGED Viewed

@@ -56,7 +56,9 @@ var DownshiftProvider = function DownshiftProvider(_ref) {
       highlightFirstItemOnOpen = _ref$highlightFirstIt === void 0 ? false : _ref$highlightFirstIt,
       className = _ref.className,
       style = _ref.style,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "onChange", "onInputValueChange", "highlightFirstItemOnOpen", "className", "style"]);
+      _ref$searchable = _ref.searchable,
+      searchable = _ref$searchable === void 0 ? false : _ref$searchable,
+      rest = _objectWithoutPropertiesLoose(_ref, ["children", "onChange", "onInputValueChange", "highlightFirstItemOnOpen", "className", "style", "searchable"]);
   var handleStateChange = function handleStateChange(changes, stateAndHelpers) {
     if (changes.type === Downshift.stateChangeTypes.controlledPropUpdatedSelectedItem) {
@@ -71,17 +73,34 @@ var DownshiftProvider = function DownshiftProvider(_ref) {
   };
   var stateReducer = function stateReducer(_, changes) {
-    if (highlightFirstItemOnOpen) {
-      var wasJustOpened = 'isOpen' in changes && changes.isOpen;
-      if (wasJustOpened) {
-        return _extends({}, changes, {
-          highlightedIndex: 0
-        });
+    var highlightFirstOnOpen = highlightFirstItemOnOpen && 'isOpen' in changes && changes.isOpen;
+    var highlightFirstItemIndex = highlightFirstOnOpen ? {
+      highlightedIndex: 0
+    } : {};
+    if (searchable) {
+      var type = changes.type;
+      switch (type) {
+        case '__autocomplete_change_input__':
+          return _extends({}, changes, highlightFirstItemIndex);
+        case '__autocomplete_click_item__':
+        case '__autocomplete_keydown_enter__':
+        case '__autocomplete_blur_input__':
+        case '__autocomplete_mouseup__':
+          return _extends({}, changes, {
+            // if we had an item highlighted in the previous state.
+            // we will reset input field value to blank
+            inputValue: ''
+          }, highlightFirstItemIndex);
+        default:
+          return _extends({}, changes, highlightFirstItemIndex);
       }
+    } else {
+      return _extends({}, changes, highlightFirstItemIndex);
     }
-    return changes;
   };
   return React.createElement(Downshift, Object.assign({
@@ -362,7 +381,8 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
   } : _ref$itemFilter,
       label = _ref.label,
       disableLabelAnimation = _ref.disableLabelAnimation,
-      rest = _objectWithoutPropertiesLoose(_ref, ["disabled", "className", "items", "loading", "loadingText", "readOnly", "prepend", "selectOnTab", "openOnFocus", "listStyle", "clearable", "itemFilter", "label", "disableLabelAnimation"]);
+      placeholder = _ref.placeholder,
+      rest = _objectWithoutPropertiesLoose(_ref, ["disabled", "className", "items", "loading", "loadingText", "readOnly", "prepend", "selectOnTab", "openOnFocus", "listStyle", "clearable", "itemFilter", "label", "disableLabelAnimation", "placeholder"]);
   var _useDownshift = useDownshift(),
       getInputProps = _useDownshift.getInputProps,
@@ -390,7 +410,9 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
     label: label,
     isFilled: selectedItem ? true : false,
     disableLabelAnimation: disableLabelAnimation
-  }, React.createElement("input", Object.assign({}, getInputProps(_extends({
+  }, selectedItem && !inputValue && React.createElement("span", {
+    className: "eds-dropdown__searchable-selected-item"
+  }, selectedItem.label), React.createElement("input", Object.assign({}, getInputProps(_extends({
     disabled: disabled,
     readOnly: readOnly,
     className: 'eds-form-control eds-dropdown__input',
@@ -403,7 +425,8 @@ var SearchableDropdown = function SearchableDropdown(_ref) {
       if (openOnFocus) {
         !isOpen && openMenu();
       }
-    }
+    },
+    placeholder: selectedItem ? undefined : placeholder
   }, rest)))));
 };
@@ -591,7 +614,8 @@ var Dropdown = function Dropdown(_ref) {
     value: value,
     highlightFirstItemOnOpen: highlightFirstItemOnOpen,
     className: className,
-    style: style
+    style: style,
+    searchable: searchable
   }, rest), React.createElement(DropdownInputGroup, {
     feedback: feedback,
     variant: variant