@helsenorge/designsystem-react 12.11.0 → 12.11.1
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.
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
## [12.11.1](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv12.11.0&targetVersion=GTv12.11.1) (2025-11-04)
|
|
2
|
+
|
|
3
|
+
### Bug Fixes
|
|
4
|
+
|
|
5
|
+
- **dropdown:** krymper med høyden igjen
|
|
6
|
+
([07d9baf](https://github.com/helsenorge/designsystem/commit/07d9baf51824dff93a5c45766f59a2fdf9285caa)), closes
|
|
7
|
+
[#363493](https://github.com/helsenorge/designsystem/issues/363493)
|
|
8
|
+
- **dropdown:** listen flyttes ikke i y aksen av viewport
|
|
9
|
+
([357ea4f](https://github.com/helsenorge/designsystem/commit/357ea4ff08fc405bc8004c83ab5c0f9cb2b56145)), closes
|
|
10
|
+
[#363493](https://github.com/helsenorge/designsystem/issues/363493)
|
|
11
|
+
|
|
1
12
|
## [12.11.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv12.10.0&targetVersion=GTv12.11.0) (2025-11-03)
|
|
2
13
|
|
|
3
14
|
### Features
|
|
@@ -60,7 +60,7 @@ const DropdownBase = (props) => {
|
|
|
60
60
|
const isMobile = useIsMobileBreakpoint();
|
|
61
61
|
const triggerActualMinWidth = variant !== "borderless" && typeof triggerMinWidth != "undefined" ? `${triggerMinWidth}px` : "auto";
|
|
62
62
|
const triggerMinWidthLimit = isMobile ? 96 : 112;
|
|
63
|
-
const dropdownFloatingPadding =
|
|
63
|
+
const dropdownFloatingPadding = 15;
|
|
64
64
|
const maxWidth = isMobile ? 384 : 400;
|
|
65
65
|
const toggleTextId = useId();
|
|
66
66
|
const optionIdPrefix = useId();
|
|
@@ -96,9 +96,9 @@ const DropdownBase = (props) => {
|
|
|
96
96
|
middleware: [
|
|
97
97
|
offset(8),
|
|
98
98
|
// Hvis det ikke er plass på høyre side flipper vi dropdownlisten fra bottom-start til bottom-end
|
|
99
|
-
flip({ mainAxis: false,
|
|
99
|
+
flip({ mainAxis: false, fallbackPlacements: ["bottom-end"], padding: dropdownFloatingPadding }),
|
|
100
100
|
// Shift fungerer som en fallback for flip og unngår at availableWidth ikke oppdaterer seg ved skjermbreddeendring
|
|
101
|
-
shift({ padding: dropdownFloatingPadding
|
|
101
|
+
shift({ padding: dropdownFloatingPadding }),
|
|
102
102
|
// Hvis det ikke er plass på noen av sidene krymper vi bredden på listen med size
|
|
103
103
|
size({
|
|
104
104
|
padding: dropdownFloatingPadding,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/Dropdown/resourceHelper.ts","../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Dropdown.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Dropdown.nb-NO.json';\nimport { HNDesignsystemDropdown } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDropdown => {\n switch (language) {\n case LanguageLocales.ENGLISH:\n return enGB;\n case LanguageLocales.NORWEGIAN:\n default:\n return nbNO;\n }\n};\n","import React, { useEffect, useRef, useId, ComponentType } from 'react';\n\nimport { autoUpdate, offset, shift, size, useFloating, flip } from '@floating-ui/react';\nimport classNames from 'classnames';\nimport { clamp } from 'motion/react';\n\nimport {\n AnalyticsId,\n IconSize,\n KeyboardEventKey,\n LanguageLocales,\n ZIndex,\n usePseudoClasses,\n useKeyboardEvent,\n useOutsideEvent,\n useToggle,\n} from '../..';\nimport { getResources } from './resourceHelper';\nimport { SingleSelectItem, SingleSelectItemProps } from './SingleSelect/SingleSelectItem';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { HNDesignsystemDropdown } from '../../resources/Resources';\nimport { isComponent } from '../../utils/component';\nimport { useLanguage } from '../../utils/language';\nimport { mergeRefs } from '../../utils/refs';\nimport Button from '../Button';\nimport Checkbox, { CheckboxProps } from '../Checkbox';\nimport Icon, { SvgIcon } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport { IconName } from '../Icons/IconNames';\nimport PlusSmall from '../Icons/PlusSmall';\nimport Label, { LabelProps } from '../Label';\nimport LazyIcon from '../LazyIcon';\nimport { SingleSelect } from './SingleSelect/SingleSelect';\n\nimport styles from './styles.module.scss';\n\ntype DropdownVariants = 'fill' | 'transparent' | 'borderless';\n\nexport interface DropdownProps {\n /** Text on the trigger button that opens the dropdown */\n triggerText: string;\n /** Sets the dropdown content */\n children: React.ReactNode;\n /** Minimum width for the dropdown in pixels. Does not affect trigger button. */\n dropdownMinWidth?: number;\n /** Minimum width for the trigger in pixels. Does not apply for borderless variant */\n triggerMinWidth?: number;\n /** Disables rendring of the close button in the list */\n noCloseButton?: boolean;\n /** Called when dropdown is open/closed */\n onToggle?: (isOpen: boolean) => void;\n /** Whether the dropdown is open or not */\n open?: boolean;\n /** Makes the dropdown disabled */\n disabled?: boolean;\n /** Sets the data-testid attribute on the dropdown button */\n testId?: string;\n /** Overrides the default z-index of the DropDownContent */\n zIndex?: number;\n /** Resources for component */\n resources?: Partial<HNDesignsystemDropdown>;\n /** Adds an icon to the trigger */\n svgIcon?: SvgIcon | IconName;\n /** Sets the visual variant of the Dropdown */\n variant?: DropdownVariants;\n}\n\nexport const DropdownBase: React.FC<DropdownProps> = props => {\n const {\n triggerText,\n noCloseButton = false,\n onToggle,\n dropdownMinWidth,\n triggerMinWidth,\n open = false,\n children,\n testId,\n disabled,\n zIndex = ZIndex.PopOver,\n resources,\n svgIcon,\n variant = 'fill',\n } = props;\n\n const dropdownRef = useRef<HTMLDivElement>(null);\n const optionsRef = useRef<HTMLUListElement>(null);\n const childrenRefList = useRef(React.Children.map(children, () => React.createRef<HTMLElement>()));\n const buttonRef = React.useRef<HTMLButtonElement>(null);\n const { isHovered } = usePseudoClasses<HTMLButtonElement>(buttonRef);\n const openedByKeyboard = useRef<boolean>(false);\n const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);\n const isMobile = useIsMobileBreakpoint();\n const triggerActualMinWidth = variant !== 'borderless' && typeof triggerMinWidth != 'undefined' ? `${triggerMinWidth}px` : 'auto';\n const triggerMinWidthLimit = isMobile ? 96 : 112;\n const dropdownFloatingPadding = 16;\n const maxWidth = isMobile ? 384 : 400;\n const toggleTextId = useId();\n const optionIdPrefix = useId();\n const contentId = useId();\n const leftIconProps = {\n className: styles['dropdown__left-icon'],\n size: IconSize.XSmall,\n isHovered: !disabled && isHovered,\n };\n\n const isSingleSelect = React.Children.toArray(children).every(\n child => React.isValidElement(child) && isComponent<SingleSelectItemProps>(child, SingleSelectItem)\n );\n const isMultiSelect = React.Children.toArray(children).every(\n child => React.isValidElement(child) && isComponent<CheckboxProps>(child, Checkbox)\n );\n\n const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n const defaultResources = getResources(language);\n const mergedResources: HNDesignsystemDropdown = {\n ...defaultResources,\n ...resources,\n };\n\n const toggleClasses = classNames(styles.dropdown__toggle, {\n [styles['dropdown__toggle--open']]: isOpen && !disabled,\n [styles['dropdown__toggle--with-icon']]: typeof svgIcon !== 'undefined',\n [styles['dropdown__toggle--transparent']]: variant === 'transparent',\n [styles['dropdown__toggle--borderless']]: variant === 'borderless',\n });\n const contentClasses = classNames(styles.dropdown__content, isOpen && styles['dropdown__content--open']);\n const listItemClasses = classNames(styles['dropdown__list-item'], { [styles['dropdown__list-item--single-select']]: isSingleSelect });\n\n const { refs, floatingStyles } = useFloating({\n strategy: 'fixed',\n placement: 'bottom-start',\n middleware: [\n offset(8),\n // Hvis det ikke er plass på høyre side flipper vi dropdownlisten fra bottom-start til bottom-end\n flip({ mainAxis: false, crossAxis: true, fallbackPlacements: ['bottom-end'], padding: dropdownFloatingPadding }),\n // Shift fungerer som en fallback for flip og unngår at availableWidth ikke oppdaterer seg ved skjermbreddeendring\n shift({ padding: dropdownFloatingPadding, crossAxis: true }),\n // Hvis det ikke er plass på noen av sidene krymper vi bredden på listen med size\n size({\n padding: dropdownFloatingPadding,\n apply({ availableWidth, availableHeight, elements, rects }) {\n const triggerW = rects.reference.width;\n const minProp = typeof dropdownMinWidth !== 'undefined' ? clamp(0, maxWidth, dropdownMinWidth) : 0;\n const targetW = Math.max(triggerW, minProp);\n\n Object.assign(elements.floating.style, {\n maxWidth: `${Math.min(targetW, availableWidth)}px`,\n maxHeight: `${availableHeight}px`,\n overflowY: 'auto',\n overflowX: 'hidden',\n });\n },\n }),\n ],\n whileElementsMounted: isOpen ? autoUpdate : undefined,\n });\n\n const handleOpen = (isKeyboard: boolean): void => {\n openedByKeyboard.current = isKeyboard;\n toggleIsOpen();\n };\n\n const handleClose = (): void => {\n if (!isOpen) return;\n\n toggleIsOpen();\n buttonRef.current?.focus();\n };\n\n useEffect(() => {\n if (isOpen && openedByKeyboard.current) {\n const firstEnabled = childrenRefList.current?.find(r => r.current && !r.current.hasAttribute('disabled'));\n firstEnabled?.current?.focus();\n openedByKeyboard.current = false;\n }\n }, [isOpen]);\n\n const focusByIndex = (nextIndex: number): void => {\n childrenRefList.current?.[nextIndex]?.current?.focus();\n };\n\n const isListNavKey = (key: string): boolean =>\n key === KeyboardEventKey.ArrowDown || key === KeyboardEventKey.ArrowUp || key === KeyboardEventKey.Home || key === KeyboardEventKey.End;\n\n const handleKeyboardNavigation = (event: KeyboardEvent): void => {\n if (!childrenRefList.current) return;\n\n const key = event.key as KeyboardEventKey;\n\n if (key === KeyboardEventKey.Escape) {\n if (isOpen) {\n event.preventDefault();\n handleClose();\n }\n return;\n }\n\n if (!isOpen) {\n if (isListNavKey(key)) {\n event.preventDefault();\n handleOpen(true);\n }\n return;\n }\n\n if (!isListNavKey(key)) {\n return;\n }\n\n const index = childrenRefList.current.findIndex(x => x.current === (event.target as HTMLElement));\n let nextIndex = index;\n\n if (key === KeyboardEventKey.Home) {\n nextIndex = 0;\n } else if (key === KeyboardEventKey.End) {\n nextIndex = childrenRefList.current.length - 1;\n } else if (key === KeyboardEventKey.ArrowDown && index < childrenRefList.current.length - 1) {\n nextIndex = index + 1;\n } else if (key === KeyboardEventKey.ArrowUp && index > 0) {\n nextIndex = index - 1;\n }\n\n if (nextIndex !== -1) {\n event.preventDefault();\n focusByIndex(nextIndex);\n }\n };\n\n useKeyboardEvent(dropdownRef, handleKeyboardNavigation, [\n KeyboardEventKey.ArrowDown,\n KeyboardEventKey.ArrowUp,\n KeyboardEventKey.End,\n KeyboardEventKey.Enter,\n KeyboardEventKey.Escape,\n KeyboardEventKey.Home,\n KeyboardEventKey.Space,\n ]);\n\n useOutsideEvent(dropdownRef, () => isOpen && handleClose());\n\n const renderChildren = React.Children.map(children, (child, index) => {\n return (\n <li className={listItemClasses} id={`${optionIdPrefix}-${index}`}>\n {React.isValidElement(child) && childrenRefList.current && childrenRefList.current[index]\n ? ((): React.ReactElement => {\n const baseProps: { ref: React.Ref<HTMLElement> } = {\n ref: mergeRefs([child.props.ref, childrenRefList.current[index]]),\n };\n\n if (isMultiSelect) {\n const label = (child.props as CheckboxProps).label as React.ReactNode;\n if (React.isValidElement(label) && isComponent<LabelProps>(label, Label)) {\n return React.cloneElement(child as React.ReactElement<CheckboxProps>, {\n ...baseProps,\n label: React.cloneElement(label, {\n labelClassName: classNames((label.props as LabelProps)?.labelClassName, styles['dropdown__multiselect-item']),\n }),\n });\n }\n }\n\n return React.cloneElement(child as React.ReactElement<Record<string, unknown>>, baseProps);\n })()\n : child}\n </li>\n );\n });\n\n return (\n <div className={styles.dropdown} ref={dropdownRef}>\n <button\n type=\"button\"\n onClick={(): false | void => handleOpen(false)}\n className={toggleClasses}\n ref={mergeRefs([buttonRef, refs.setReference])}\n data-testid={testId}\n data-analyticsid={AnalyticsId.Dropdown}\n disabled={disabled}\n aria-labelledby={toggleTextId}\n aria-haspopup={true}\n aria-controls={contentId}\n aria-expanded={isOpen}\n style={{\n width: triggerActualMinWidth,\n maxWidth: '100%',\n minWidth: `${triggerMinWidthLimit}px`,\n }}\n >\n {svgIcon && (\n <>\n {typeof svgIcon === 'string' ? (\n <LazyIcon {...leftIconProps} iconName={svgIcon} />\n ) : (\n <Icon {...leftIconProps} svgIcon={svgIcon} />\n )}\n </>\n )}\n <span id={toggleTextId} className={styles.dropdown__toggle__text}>\n {triggerText}\n </span>\n <Icon\n svgIcon={!isSingleSelect ? PlusSmall : isOpen ? ChevronUp : ChevronDown}\n className={styles['dropdown__right-icon']}\n isHovered={!disabled && isHovered}\n size={IconSize.XSmall}\n />\n </button>\n <div\n key={dropdownMinWidth ?? 'auto'}\n id={contentId}\n className={contentClasses}\n ref={refs.setFloating}\n style={{\n ...floatingStyles,\n zIndex: zIndex,\n }}\n >\n <ul className={styles.dropdown__options} role=\"group\" aria-labelledby={toggleTextId} tabIndex={-1} ref={optionsRef}>\n {isSingleSelect && <SingleSelect onValueChange={() => handleClose()}>{renderChildren}</SingleSelect>}\n {isMultiSelect && renderChildren}\n </ul>\n {!isSingleSelect && !noCloseButton && (\n <div className={styles.dropdown__close}>\n <Button onClick={handleClose}>{mergedResources.closeText}</Button>\n </div>\n )}\n </div>\n </div>\n );\n};\n\nexport interface DropdownCompound extends React.FC<DropdownProps> {\n SingleSelectItem: ComponentType<SingleSelectItemProps>;\n}\nconst Dropdown = DropdownBase as DropdownCompound;\nDropdown.SingleSelectItem = SingleSelectItem;\nDropdownBase.displayName = 'Dropdown';\n\nexport default Dropdown;\n"],"names":["React"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/Dropdown/resourceHelper.ts","../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Dropdown.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Dropdown.nb-NO.json';\nimport { HNDesignsystemDropdown } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDropdown => {\n switch (language) {\n case LanguageLocales.ENGLISH:\n return enGB;\n case LanguageLocales.NORWEGIAN:\n default:\n return nbNO;\n }\n};\n","import React, { useEffect, useRef, useId, ComponentType } from 'react';\n\nimport { autoUpdate, offset, shift, size, useFloating, flip } from '@floating-ui/react';\nimport classNames from 'classnames';\nimport { clamp } from 'motion/react';\n\nimport {\n AnalyticsId,\n IconSize,\n KeyboardEventKey,\n LanguageLocales,\n ZIndex,\n usePseudoClasses,\n useKeyboardEvent,\n useOutsideEvent,\n useToggle,\n} from '../..';\nimport { getResources } from './resourceHelper';\nimport { SingleSelectItem, SingleSelectItemProps } from './SingleSelect/SingleSelectItem';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { HNDesignsystemDropdown } from '../../resources/Resources';\nimport { isComponent } from '../../utils/component';\nimport { useLanguage } from '../../utils/language';\nimport { mergeRefs } from '../../utils/refs';\nimport Button from '../Button';\nimport Checkbox, { CheckboxProps } from '../Checkbox';\nimport Icon, { SvgIcon } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport { IconName } from '../Icons/IconNames';\nimport PlusSmall from '../Icons/PlusSmall';\nimport Label, { LabelProps } from '../Label';\nimport LazyIcon from '../LazyIcon';\nimport { SingleSelect } from './SingleSelect/SingleSelect';\n\nimport styles from './styles.module.scss';\n\ntype DropdownVariants = 'fill' | 'transparent' | 'borderless';\n\nexport interface DropdownProps {\n /** Text on the trigger button that opens the dropdown */\n triggerText: string;\n /** Sets the dropdown content */\n children: React.ReactNode;\n /** Minimum width for the dropdown in pixels. Does not affect trigger button. */\n dropdownMinWidth?: number;\n /** Minimum width for the trigger in pixels. Does not apply for borderless variant */\n triggerMinWidth?: number;\n /** Disables rendring of the close button in the list */\n noCloseButton?: boolean;\n /** Called when dropdown is open/closed */\n onToggle?: (isOpen: boolean) => void;\n /** Whether the dropdown is open or not */\n open?: boolean;\n /** Makes the dropdown disabled */\n disabled?: boolean;\n /** Sets the data-testid attribute on the dropdown button */\n testId?: string;\n /** Overrides the default z-index of the DropDownContent */\n zIndex?: number;\n /** Resources for component */\n resources?: Partial<HNDesignsystemDropdown>;\n /** Adds an icon to the trigger */\n svgIcon?: SvgIcon | IconName;\n /** Sets the visual variant of the Dropdown */\n variant?: DropdownVariants;\n}\n\nexport const DropdownBase: React.FC<DropdownProps> = props => {\n const {\n triggerText,\n noCloseButton = false,\n onToggle,\n dropdownMinWidth,\n triggerMinWidth,\n open = false,\n children,\n testId,\n disabled,\n zIndex = ZIndex.PopOver,\n resources,\n svgIcon,\n variant = 'fill',\n } = props;\n\n const dropdownRef = useRef<HTMLDivElement>(null);\n const optionsRef = useRef<HTMLUListElement>(null);\n const childrenRefList = useRef(React.Children.map(children, () => React.createRef<HTMLElement>()));\n const buttonRef = React.useRef<HTMLButtonElement>(null);\n const { isHovered } = usePseudoClasses<HTMLButtonElement>(buttonRef);\n const openedByKeyboard = useRef<boolean>(false);\n const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);\n const isMobile = useIsMobileBreakpoint();\n const triggerActualMinWidth = variant !== 'borderless' && typeof triggerMinWidth != 'undefined' ? `${triggerMinWidth}px` : 'auto';\n const triggerMinWidthLimit = isMobile ? 96 : 112;\n const dropdownFloatingPadding = 15;\n const maxWidth = isMobile ? 384 : 400;\n const toggleTextId = useId();\n const optionIdPrefix = useId();\n const contentId = useId();\n const leftIconProps = {\n className: styles['dropdown__left-icon'],\n size: IconSize.XSmall,\n isHovered: !disabled && isHovered,\n };\n\n const isSingleSelect = React.Children.toArray(children).every(\n child => React.isValidElement(child) && isComponent<SingleSelectItemProps>(child, SingleSelectItem)\n );\n const isMultiSelect = React.Children.toArray(children).every(\n child => React.isValidElement(child) && isComponent<CheckboxProps>(child, Checkbox)\n );\n\n const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n const defaultResources = getResources(language);\n const mergedResources: HNDesignsystemDropdown = {\n ...defaultResources,\n ...resources,\n };\n\n const toggleClasses = classNames(styles.dropdown__toggle, {\n [styles['dropdown__toggle--open']]: isOpen && !disabled,\n [styles['dropdown__toggle--with-icon']]: typeof svgIcon !== 'undefined',\n [styles['dropdown__toggle--transparent']]: variant === 'transparent',\n [styles['dropdown__toggle--borderless']]: variant === 'borderless',\n });\n const contentClasses = classNames(styles.dropdown__content, isOpen && styles['dropdown__content--open']);\n const listItemClasses = classNames(styles['dropdown__list-item'], { [styles['dropdown__list-item--single-select']]: isSingleSelect });\n\n const { refs, floatingStyles } = useFloating({\n strategy: 'fixed',\n placement: 'bottom-start',\n middleware: [\n offset(8),\n // Hvis det ikke er plass på høyre side flipper vi dropdownlisten fra bottom-start til bottom-end\n flip({ mainAxis: false, fallbackPlacements: ['bottom-end'], padding: dropdownFloatingPadding }),\n // Shift fungerer som en fallback for flip og unngår at availableWidth ikke oppdaterer seg ved skjermbreddeendring\n shift({ padding: dropdownFloatingPadding }),\n // Hvis det ikke er plass på noen av sidene krymper vi bredden på listen med size\n size({\n padding: dropdownFloatingPadding,\n apply({ availableWidth, availableHeight, elements, rects }) {\n const triggerW = rects.reference.width;\n const minProp = typeof dropdownMinWidth !== 'undefined' ? clamp(0, maxWidth, dropdownMinWidth) : 0;\n const targetW = Math.max(triggerW, minProp);\n\n Object.assign(elements.floating.style, {\n maxWidth: `${Math.min(targetW, availableWidth)}px`,\n maxHeight: `${availableHeight}px`,\n overflowY: 'auto',\n overflowX: 'hidden',\n });\n },\n }),\n ],\n whileElementsMounted: isOpen ? autoUpdate : undefined,\n });\n\n const handleOpen = (isKeyboard: boolean): void => {\n openedByKeyboard.current = isKeyboard;\n toggleIsOpen();\n };\n\n const handleClose = (): void => {\n if (!isOpen) return;\n\n toggleIsOpen();\n buttonRef.current?.focus();\n };\n\n useEffect(() => {\n if (isOpen && openedByKeyboard.current) {\n const firstEnabled = childrenRefList.current?.find(r => r.current && !r.current.hasAttribute('disabled'));\n firstEnabled?.current?.focus();\n openedByKeyboard.current = false;\n }\n }, [isOpen]);\n\n const focusByIndex = (nextIndex: number): void => {\n childrenRefList.current?.[nextIndex]?.current?.focus();\n };\n\n const isListNavKey = (key: string): boolean =>\n key === KeyboardEventKey.ArrowDown || key === KeyboardEventKey.ArrowUp || key === KeyboardEventKey.Home || key === KeyboardEventKey.End;\n\n const handleKeyboardNavigation = (event: KeyboardEvent): void => {\n if (!childrenRefList.current) return;\n\n const key = event.key as KeyboardEventKey;\n\n if (key === KeyboardEventKey.Escape) {\n if (isOpen) {\n event.preventDefault();\n handleClose();\n }\n return;\n }\n\n if (!isOpen) {\n if (isListNavKey(key)) {\n event.preventDefault();\n handleOpen(true);\n }\n return;\n }\n\n if (!isListNavKey(key)) {\n return;\n }\n\n const index = childrenRefList.current.findIndex(x => x.current === (event.target as HTMLElement));\n let nextIndex = index;\n\n if (key === KeyboardEventKey.Home) {\n nextIndex = 0;\n } else if (key === KeyboardEventKey.End) {\n nextIndex = childrenRefList.current.length - 1;\n } else if (key === KeyboardEventKey.ArrowDown && index < childrenRefList.current.length - 1) {\n nextIndex = index + 1;\n } else if (key === KeyboardEventKey.ArrowUp && index > 0) {\n nextIndex = index - 1;\n }\n\n if (nextIndex !== -1) {\n event.preventDefault();\n focusByIndex(nextIndex);\n }\n };\n\n useKeyboardEvent(dropdownRef, handleKeyboardNavigation, [\n KeyboardEventKey.ArrowDown,\n KeyboardEventKey.ArrowUp,\n KeyboardEventKey.End,\n KeyboardEventKey.Enter,\n KeyboardEventKey.Escape,\n KeyboardEventKey.Home,\n KeyboardEventKey.Space,\n ]);\n\n useOutsideEvent(dropdownRef, () => isOpen && handleClose());\n\n const renderChildren = React.Children.map(children, (child, index) => {\n return (\n <li className={listItemClasses} id={`${optionIdPrefix}-${index}`}>\n {React.isValidElement(child) && childrenRefList.current && childrenRefList.current[index]\n ? ((): React.ReactElement => {\n const baseProps: { ref: React.Ref<HTMLElement> } = {\n ref: mergeRefs([child.props.ref, childrenRefList.current[index]]),\n };\n\n if (isMultiSelect) {\n const label = (child.props as CheckboxProps).label as React.ReactNode;\n if (React.isValidElement(label) && isComponent<LabelProps>(label, Label)) {\n return React.cloneElement(child as React.ReactElement<CheckboxProps>, {\n ...baseProps,\n label: React.cloneElement(label, {\n labelClassName: classNames((label.props as LabelProps)?.labelClassName, styles['dropdown__multiselect-item']),\n }),\n });\n }\n }\n\n return React.cloneElement(child as React.ReactElement<Record<string, unknown>>, baseProps);\n })()\n : child}\n </li>\n );\n });\n\n return (\n <div className={styles.dropdown} ref={dropdownRef}>\n <button\n type=\"button\"\n onClick={(): false | void => handleOpen(false)}\n className={toggleClasses}\n ref={mergeRefs([buttonRef, refs.setReference])}\n data-testid={testId}\n data-analyticsid={AnalyticsId.Dropdown}\n disabled={disabled}\n aria-labelledby={toggleTextId}\n aria-haspopup={true}\n aria-controls={contentId}\n aria-expanded={isOpen}\n style={{\n width: triggerActualMinWidth,\n maxWidth: '100%',\n minWidth: `${triggerMinWidthLimit}px`,\n }}\n >\n {svgIcon && (\n <>\n {typeof svgIcon === 'string' ? (\n <LazyIcon {...leftIconProps} iconName={svgIcon} />\n ) : (\n <Icon {...leftIconProps} svgIcon={svgIcon} />\n )}\n </>\n )}\n <span id={toggleTextId} className={styles.dropdown__toggle__text}>\n {triggerText}\n </span>\n <Icon\n svgIcon={!isSingleSelect ? PlusSmall : isOpen ? ChevronUp : ChevronDown}\n className={styles['dropdown__right-icon']}\n isHovered={!disabled && isHovered}\n size={IconSize.XSmall}\n />\n </button>\n <div\n key={dropdownMinWidth ?? 'auto'}\n id={contentId}\n className={contentClasses}\n ref={refs.setFloating}\n style={{\n ...floatingStyles,\n zIndex: zIndex,\n }}\n >\n <ul className={styles.dropdown__options} role=\"group\" aria-labelledby={toggleTextId} tabIndex={-1} ref={optionsRef}>\n {isSingleSelect && <SingleSelect onValueChange={() => handleClose()}>{renderChildren}</SingleSelect>}\n {isMultiSelect && renderChildren}\n </ul>\n {!isSingleSelect && !noCloseButton && (\n <div className={styles.dropdown__close}>\n <Button onClick={handleClose}>{mergedResources.closeText}</Button>\n </div>\n )}\n </div>\n </div>\n );\n};\n\nexport interface DropdownCompound extends React.FC<DropdownProps> {\n SingleSelectItem: ComponentType<SingleSelectItemProps>;\n}\nconst Dropdown = DropdownBase as DropdownCompound;\nDropdown.SingleSelectItem = SingleSelectItem;\nDropdownBase.displayName = 'Dropdown';\n\nexport default Dropdown;\n"],"names":["React"],"mappings":"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"}
|