@helsenorge/designsystem-react 12.7.0 → 12.9.0

package/components/Dropdown/styles.module.scss

@@ -1,189 +1,123 @@
 @use 'sass:map';
-@use '../../scss/spacers' as spacers;
-@use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
-@use '../../scss/screen-reader' as *;
 @use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/supernova/styles/colors.css';
+@import '../../scss/supernova/styles/spacers.css';
 
 .dropdown {
   position: relative;
-  width: fit-content;
-
-  &__label {
-    @include sr-only;
-  }
 
   &__toggle {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    padding: 0.188rem var(--core-space-3xs) 0.188rem var(--core-space-s);
     cursor: pointer;
     border-radius: 0;
     border-width: 2px;
     border-style: solid;
-    padding: 0 spacers.getSpacer(3xs) 0 spacers.getSpacer(s);
     font-family: inherit;
     font-size: font-settings.$font-size-sm;
     line-height: 1.3rem; // Custom fordi teksten skal henge bedre sammen om den går over to linjer
+    border-color: var(--color-base-border-onlight-emphasized);
+    background-color: var(--core-color-white);
+
+    &:hover {
+      background-color: var(--color-base-background-neutral);
+    }
+
+    &:active {
+      background-color: var(--core-color-neutral-100);
+    }
 
     @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      padding: spacers.getSpacer(3xs) spacers.getSpacer(3xs) spacers.getSpacer(3xs) spacers.getSpacer(s);
+      padding: 0.313rem var(--core-space-3xs) 0.313rem var(--core-space-s);
       font-size: font-settings.$font-size-md;
       line-height: 1.5rem;
     }
 
-    &:focus {
+    &:focus-visible {
       outline: none;
+      border-color: var(--color-action-border-onlight-focus);
+      box-shadow: 0 0 0 1px var(--color-action-border-onlight-focus);
     }
 
     &:disabled {
       cursor: initial;
-      color: palette.$neutral700;
+      color: var(--color-disabled-text);
       background-color: transparent;
-      border-color: palette.$neutral600;
+      border-color: var(--color-disabled-border);
       border-style: dashed;
     }
 
-    &--on-white,
-    &--on-grey {
-      border-color: palette.$neutral700;
-      background-color: palette.$white;
-
-      &:hover {
-        background-color: palette.$neutral50;
-        box-shadow: 0 0 0 1px palette.$neutral700;
-      }
-
-      &:focus {
-        border-color: palette.$black;
-        box-shadow: 0 0 0 1px palette.$black;
-      }
+    &--with-icon {
+      padding-left: var(--core-space-2xs);
     }
 
-    &--on-blueberry {
-      border-color: palette.$blueberry500;
-      background-color: palette.$white;
-
-      &:hover {
-        background-color: palette.$blueberry50;
-        box-shadow: 0 0 0 1px palette.$blueberry500;
-      }
-
-      &:focus {
-        border-color: palette.$black;
-        box-shadow: 0 0 0 1px palette.$black;
-      }
-    }
-
-    &--on-cherry {
-      border-color: palette.$cherry500;
-      background-color: palette.$white;
-
-      &:hover {
-        background-color: palette.$cherry50;
-        box-shadow: 0 0 0 1px palette.$cherry500;
-      }
-
-      &:focus {
-        border-color: palette.$black;
-        box-shadow: 0 0 0 1px palette.$black;
-      }
-    }
-
-    &--open#{&}--on-white,
-    &--open#{&}--on-grey {
-      background-color: palette.$neutral50;
-
-      &:hover {
-        background-color: palette.$white;
-      }
-    }
-
-    &--open#{&}--on-blueberry {
-      background-color: palette.$blueberry50;
-
-      &:hover {
-        background-color: palette.$white;
-      }
-    }
-
-    &--open#{&}--on-cherry {
-      background-color: palette.$cherry50;
-
-      &:hover {
-        background-color: palette.$white;
-      }
+    &--borderless {
+      min-width: none;
+      border-color: transparent;
     }
 
-    &--transparent {
+    &--transparent,
+    &--borderless {
       background-color: transparent;
-    }
 
-    &--transparent#{&}--on-grey {
       &:hover {
-        background-color: palette.$neutral100;
+        background-color: var(--core-color-neutral-100);
       }
-    }
 
-    &--transparent#{&}--on-blueberry {
-      &:hover {
-        background-color: palette.$blueberry100;
+      &:active {
+        background-color: var(--core-color-neutral-200);
       }
     }
 
-    &--transparent#{&}--on-cherry {
-      &:hover {
-        background-color: palette.$cherry100;
-      }
+    &--borderless:disabled {
+      border-color: transparent;
     }
 
-    &--transparent#{&}--open#{&}--on-grey {
-      background-color: palette.$neutral100;
-
-      &:hover {
-        background-color: transparent;
-      }
+    &--borderless#{&}--open {
+      border-color: var(--color-base-border-onlight-emphasized);
     }
 
-    &--transparent#{&}--open#{&}--on-blueberry {
-      background-color: palette.$blueberry100;
+    &__text {
+      padding: 0.34rem 0;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
 
-      &:hover {
-        background-color: transparent;
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+        padding: 0.375rem 0;
       }
     }
+  }
 
-    &--transparent#{&}--open#{&}--on-cherry {
-      background-color: palette.$cherry100;
-
-      &:hover {
-        background-color: transparent;
-      }
-    }
+  &__left-icon {
+    margin-right: var(--core-space-3xs);
+  }
 
-    &--fluid {
-      width: 100%;
-    }
+  &__right-icon {
+    margin-left: var(--core-space-3xs);
+  }
 
-    &__label {
-      padding: spacers.getSpacer(3xs) 0;
+  &__left-icon,
+  &__right-icon {
+    fill: var(--color-action-graphics-onlight);
 
-      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-        padding: spacers.getSpacer(2xs) 0;
-      }
+    :hover > & {
+      fill: var(--color-action-graphics-onlight-hover);
     }
-  }
 
-  &__icon {
-    margin-left: spacers.getSpacer(2xs);
+    :disabled > & {
+      fill: var(--color-disabled-graphics);
+    }
   }
 
   &__content {
     display: none;
-    position: absolute;
-    background-color: palette.$white;
-    margin-top: spacers.getSpacer(2xs);
-    box-shadow: 0 0 0 2px palette.$blueberry500;
+    width: 100%;
+    background-color: var(--core-color-white);
+    border: 2px solid var(--core-color-blueberry-500);
     z-index: 1;
 
     &--open {
@@ -204,27 +138,47 @@
   }
 
   &__close {
-    padding: spacers.getSpacer(s);
+    padding: var(--core-space-s);
   }
 
-  &__input {
-    border-bottom: 1px solid palette.$neutral300;
-    padding: 0 spacers.getSpacer(s);
+  &__multiselect-item {
+    padding-left: var(--core-space-m);
+    padding-right: var(--core-space-m);
+  }
 
-    &[role='menuitemradio'] {
-      padding: 0 spacers.getSpacer(s);
+  &__list-item {
+    min-height: 44px;
+    border-bottom: 1px solid var(--color-base-border-neutral-emphasized);
+
+    &:last-child {
+      border-bottom: none;
     }
 
-    &[role='menuitemcheckbox'] {
-      padding: 1px spacers.getSpacer(s) spacers.getSpacer(2xs) spacers.getSpacer(s);
+    &:hover {
+      background-color: var(--core-color-neutral-50);
     }
 
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      padding: spacers.getSpacer(s);
+    &:active {
+      background-color: var(--core-color-neutral-100);
     }
 
-    &:last-child {
-      border-bottom: none;
+    &:has(:checked),
+    &:has([aria-current='true']) {
+      background-color: var(--core-color-blueberry-50);
+
+      &:hover {
+        background-color: var(--core-color-blueberry-100);
+      }
+
+      &:active {
+        background-color: var(--core-color-blueberry-200);
+      }
+    }
+
+    &--single-select:has(:focus-visible) {
+      border-color: var(--color-action-border-onlight-focus);
+      outline: 4px solid var(--color-action-border-onlight-focus);
+      outline-offset: -4px;
     }
   }
 }

package/components/Dropdown/styles.module.scss.d.ts

@@ -3,19 +3,18 @@ export type Styles = {
   dropdown__close: string;
   dropdown__content: string;
   'dropdown__content--open': string;
-  dropdown__icon: string;
-  dropdown__input: string;
-  dropdown__label: string;
+  'dropdown__left-icon': string;
+  'dropdown__list-item': string;
+  'dropdown__list-item--single-select': string;
+  'dropdown__multiselect-item': string;
   dropdown__options: string;
+  'dropdown__right-icon': string;
   dropdown__toggle: string;
-  dropdown__toggle__label: string;
-  'dropdown__toggle--fluid': string;
-  'dropdown__toggle--on-blueberry': string;
-  'dropdown__toggle--on-cherry': string;
-  'dropdown__toggle--on-grey': string;
-  'dropdown__toggle--on-white': string;
+  dropdown__toggle__text: string;
+  'dropdown__toggle--borderless': string;
   'dropdown__toggle--open': string;
   'dropdown__toggle--transparent': string;
+  'dropdown__toggle--with-icon': string;
 };
 
 export type ClassNames = keyof Styles;

package/components/DropdownOld/DropdownOld.d.ts

@@ -0,0 +1,42 @@
+import { default as React } from 'react';
+import { HNDesignsystemDropdown } from '../../resources/Resources';
+export declare enum DropdownOldOnColor {
+    onwhite = "onwhite",
+    ongrey = "ongrey",
+    onblueberry = "onblueberry",
+    oncherry = "oncherry"
+}
+export interface DropdownOldProps {
+    /** Label for dropdown. Visible for screen readers  */
+    label: string;
+    /** Text on the trigger button that opens the dropdown */
+    placeholder: string;
+    /** Sets the dropdown content */
+    children: React.ReactNode;
+    /** @deprecated Close button text */
+    closeText?: string;
+    /** Minimum width for the dropdown in pixels. Does not affect trigger button */
+    dropdownMinWidth?: number;
+    /** No close button */
+    noCloseButton?: boolean;
+    /** Called when dropdown is open/closed */
+    onToggle?: (isOpen: boolean) => void;
+    /** Whether the dropdown is open or not */
+    open?: boolean;
+    /** Changes the visuals of the dropdown */
+    onColor?: keyof typeof DropdownOldOnColor;
+    /** Makes the background of the trigger transparent */
+    transparent?: boolean;
+    /** Makes the width of the full component adjust to its parent */
+    fluid?: boolean;
+    /** Makes the dropdown disabled */
+    disabled?: boolean;
+    /** Sets the data-testid attribute on the dropdown button */
+    testId?: string;
+    /** Overrides the default z-index of the DropDownContent */
+    zIndex?: number;
+    /** Resources for component */
+    resources?: Partial<HNDesignsystemDropdown>;
+}
+declare const DropdownOld: React.FC<DropdownOldProps>;
+export default DropdownOld;

package/components/DropdownOld/index.d.ts

@@ -0,0 +1,3 @@
+import { default as DropdownOld } from './DropdownOld';
+export * from './DropdownOld';
+export default DropdownOld;

package/components/DropdownOld/index.js

@@ -0,0 +1,194 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default, { useRef, useId, useEffect } from "react";
+import classNames from "classnames";
+import { theme } from "../../theme/index.js";
+import "../../hooks/useBreakpoint.js";
+import { useHover } from "../../hooks/useHover.js";
+import { useToggle } from "../../hooks/useToggle.js";
+import { useKeyboardEvent } from "../../hooks/useKeyboardEvent.js";
+import { useOutsideEvent } from "../../hooks/useOutsideEvent.js";
+import { LanguageLocales, ZIndex, KeyboardEventKey, AnalyticsId, IconSize } from "../../constants.js";
+import { n as nbNO, e as enGB } from "../../HN.Designsystem.Dropdown.nb-NO.js";
+import { useLanguage } from "../../utils/language.js";
+import { mergeRefs } from "../../utils/refs.js";
+import { B as Button } from "../../Button.js";
+import { I as Icon } from "../../Icon.js";
+import PlusSmall from "../Icons/PlusSmall.js";
+import styles from "./styles.module.scss";
+const getResources = (language) => {
+  switch (language) {
+    case LanguageLocales.ENGLISH:
+      return enGB;
+    case LanguageLocales.NORWEGIAN:
+    default:
+      return nbNO;
+  }
+};
+var DropdownOldOnColor = /* @__PURE__ */ ((DropdownOldOnColor2) => {
+  DropdownOldOnColor2["onwhite"] = "onwhite";
+  DropdownOldOnColor2["ongrey"] = "ongrey";
+  DropdownOldOnColor2["onblueberry"] = "onblueberry";
+  DropdownOldOnColor2["oncherry"] = "oncherry";
+  return DropdownOldOnColor2;
+})(DropdownOldOnColor || {});
+const DropdownOld = (props) => {
+  const {
+    label,
+    placeholder,
+    noCloseButton = false,
+    onToggle,
+    dropdownMinWidth,
+    open = false,
+    children,
+    onColor = "onwhite",
+    transparent = false,
+    fluid = false,
+    testId,
+    disabled,
+    zIndex = ZIndex.PopOver,
+    resources
+  } = props;
+  const dropdownRef = useRef(null);
+  const optionsRef = useRef(null);
+  const { hoverRef: buttonRef, isHovered } = useHover();
+  const openedByKeyboard = useRef(false);
+  const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);
+  const inputRefList = useRef(React__default.Children.map(children, () => React__default.createRef()));
+  const labelId = useId();
+  const toggleLabelId = useId();
+  const optionIdPrefix = useId();
+  const contentId = useId();
+  const { language } = useLanguage(LanguageLocales.NORWEGIAN);
+  const defaultResources = getResources(language);
+  const mergedResources = {
+    ...defaultResources,
+    ...resources,
+    closeText: props.closeText ?? (resources == null ? void 0 : resources.closeText) ?? defaultResources.closeText
+  };
+  const handleOpen = (isKeyboard) => {
+    openedByKeyboard.current = isKeyboard;
+    toggleIsOpen();
+  };
+  const handleClose = () => {
+    var _a;
+    toggleIsOpen();
+    (_a = buttonRef.current) == null ? void 0 : _a.focus();
+  };
+  useEffect(() => {
+    var _a, _b;
+    if (isOpen && openedByKeyboard.current) {
+      const firstEnabled = (_a = inputRefList.current) == null ? void 0 : _a.find((r) => r.current && !r.current.hasAttribute("disabled"));
+      (_b = firstEnabled == null ? void 0 : firstEnabled.current) == null ? void 0 : _b.focus();
+      openedByKeyboard.current = false;
+    }
+  }, [isOpen]);
+  const handleKeyboardNavigation = (event) => {
+    var _a;
+    if (!inputRefList.current) {
+      return;
+    }
+    if (event.key === KeyboardEventKey.Escape) {
+      if (isOpen) handleClose();
+      return;
+    }
+    if (!isOpen) {
+      handleOpen(true);
+      event.preventDefault();
+      return;
+    }
+    const index = inputRefList.current.findIndex((x) => x.current === event.target);
+    let nextIndex = index;
+    if (event.key === KeyboardEventKey.Home) {
+      nextIndex = 0;
+    } else if (event.key === KeyboardEventKey.End) {
+      nextIndex = inputRefList.current.length - 1;
+    } else if (event.key === KeyboardEventKey.ArrowDown && index < inputRefList.current.length - 1) {
+      nextIndex = index + 1;
+    } else if (event.key === KeyboardEventKey.ArrowUp && index > 0) {
+      nextIndex = index - 1;
+    } else if (event.key === KeyboardEventKey.Enter && index !== -1) {
+      nextIndex = index;
+    }
+    if (nextIndex !== -1 && event.key !== KeyboardEventKey.Space) {
+      event.preventDefault();
+      (_a = inputRefList.current[nextIndex].current) == null ? void 0 : _a.focus();
+    }
+  };
+  useKeyboardEvent(dropdownRef, handleKeyboardNavigation, [
+    KeyboardEventKey.ArrowDown,
+    KeyboardEventKey.ArrowUp,
+    KeyboardEventKey.End,
+    KeyboardEventKey.Enter,
+    KeyboardEventKey.Escape,
+    KeyboardEventKey.Home,
+    KeyboardEventKey.Space
+  ]);
+  useOutsideEvent(dropdownRef, () => isOpen && handleClose());
+  const toggleClasses = classNames(
+    styles.dropdown__toggle,
+    !disabled && {
+      [styles["dropdown__toggle--on-white"]]: onColor === "onwhite",
+      [styles["dropdown__toggle--on-grey"]]: onColor === "ongrey",
+      [styles["dropdown__toggle--on-blueberry"]]: onColor === "onblueberry",
+      [styles["dropdown__toggle--on-cherry"]]: onColor === "oncherry",
+      [styles["dropdown__toggle--transparent"]]: transparent,
+      [styles["dropdown__toggle--fluid"]]: fluid,
+      [styles["dropdown__toggle--open"]]: isOpen
+    }
+  );
+  const contentClasses = classNames(styles.dropdown__content, isOpen && styles["dropdown__content--open"]);
+  const renderChildren = React__default.Children.map(children, (child, index) => {
+    return /* @__PURE__ */ jsx("li", { className: styles.dropdown__input, id: `${optionIdPrefix}-${index}`, children: React__default.isValidElement(child) && inputRefList.current && inputRefList.current[index] ? React__default.cloneElement(child, {
+      ref: mergeRefs([child.props.ref, inputRefList.current[index]])
+    }) : child });
+  });
+  return /* @__PURE__ */ jsxs("div", { className: styles.dropdown, ref: dropdownRef, children: [
+    /* @__PURE__ */ jsx("span", { id: labelId, className: styles.dropdown__label, children: label }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => handleOpen(false),
+        className: toggleClasses,
+        ref: buttonRef,
+        "data-testid": testId,
+        "data-analyticsid": AnalyticsId.Dropdown,
+        disabled,
+        "aria-labelledby": toggleLabelId,
+        "aria-haspopup": true,
+        "aria-controls": contentId,
+        "aria-expanded": isOpen,
+        children: [
+          /* @__PURE__ */ jsx("span", { id: toggleLabelId, className: styles.dropdown__toggle__label, children: placeholder }),
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              color: disabled ? theme.palette.neutral700 : theme.palette.blueberry600,
+              svgIcon: PlusSmall,
+              className: styles.dropdown__icon,
+              isHovered: !disabled && isHovered,
+              size: IconSize.XSmall
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        id: contentId,
+        className: contentClasses,
+        style: { width: fluid ? "100%" : `auto`, minWidth: dropdownMinWidth ?? "auto", zIndex },
+        children: [
+          /* @__PURE__ */ jsx("ul", { className: styles.dropdown__options, role: "group", "aria-labelledby": labelId, tabIndex: -1, ref: optionsRef, children: renderChildren }),
+          !noCloseButton && /* @__PURE__ */ jsx("div", { className: styles.dropdown__close, children: /* @__PURE__ */ jsx(Button, { onClick: handleClose, children: mergedResources.closeText }) })
+        ]
+      }
+    )
+  ] });
+};
+export {
+  DropdownOldOnColor,
+  DropdownOld as default
+};
+//# sourceMappingURL=index.js.map

package/components/DropdownOld/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/DropdownOld/resourceHelper.ts","../../../src/components/DropdownOld/DropdownOld.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 } from 'react';\n\nimport classNames from 'classnames';\n\nimport {\n  AnalyticsId,\n  IconSize,\n  KeyboardEventKey,\n  LanguageLocales,\n  ZIndex,\n  theme,\n  useHover,\n  useKeyboardEvent,\n  useOutsideEvent,\n  useToggle,\n} from '../..';\nimport { getResources } from './resourceHelper';\nimport { HNDesignsystemDropdown } from '../../resources/Resources';\nimport { useLanguage } from '../../utils/language';\nimport { mergeRefs } from '../../utils/refs';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport PlusSmall from '../Icons/PlusSmall';\n\nimport styles from './styles.module.scss';\n\nexport enum DropdownOldOnColor {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  oncherry = 'oncherry',\n}\n\nexport interface DropdownOldProps {\n  /** Label for dropdown. Visible for screen readers  */\n  label: string;\n  /** Text on the trigger button that opens the dropdown */\n  placeholder: string;\n  /** Sets the dropdown content */\n  children: React.ReactNode;\n  /** @deprecated Close button text */\n  closeText?: string;\n  /** Minimum width for the dropdown in pixels. Does not affect trigger button */\n  dropdownMinWidth?: number;\n  /** No close button */\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  /** Changes the visuals of the dropdown */\n  onColor?: keyof typeof DropdownOldOnColor;\n  /** Makes the background of the trigger transparent */\n  transparent?: boolean;\n  /** Makes the width of the full component adjust to its parent */\n  fluid?: 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}\n\nconst DropdownOld: React.FC<DropdownOldProps> = props => {\n  const {\n    label,\n    placeholder,\n    noCloseButton = false,\n    onToggle,\n    dropdownMinWidth,\n    open = false,\n    children,\n    onColor = DropdownOldOnColor.onwhite,\n    transparent = false,\n    fluid = false,\n    testId,\n    disabled,\n    zIndex = ZIndex.PopOver,\n    resources,\n  } = props;\n\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const optionsRef = useRef<HTMLUListElement>(null);\n  const { hoverRef: buttonRef, isHovered } = useHover<HTMLButtonElement>();\n  const openedByKeyboard = useRef<boolean>(false);\n  const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);\n  const inputRefList = useRef(React.Children.map(children, () => React.createRef<HTMLElement>()));\n  const labelId = useId();\n  const toggleLabelId = useId();\n  const optionIdPrefix = useId();\n  const contentId = useId();\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemDropdown = {\n    ...defaultResources,\n    ...resources,\n    closeText: props.closeText ?? resources?.closeText ?? defaultResources.closeText,\n  };\n\n  const handleOpen = (isKeyboard: boolean): void => {\n    openedByKeyboard.current = isKeyboard;\n    toggleIsOpen();\n  };\n\n  const handleClose = (): void => {\n    toggleIsOpen();\n    buttonRef.current?.focus();\n  };\n\n  useEffect(() => {\n    if (isOpen && openedByKeyboard.current) {\n      const firstEnabled = inputRefList.current?.find(r => r.current && !r.current.hasAttribute('disabled'));\n      firstEnabled?.current?.focus();\n      openedByKeyboard.current = false;\n    }\n  }, [isOpen]);\n\n  const handleKeyboardNavigation = (event: KeyboardEvent): void => {\n    if (!inputRefList.current) {\n      return;\n    }\n\n    if (event.key === KeyboardEventKey.Escape) {\n      if (isOpen) handleClose();\n      return;\n    }\n\n    if (!isOpen) {\n      handleOpen(true);\n      event.preventDefault();\n      return;\n    }\n\n    const index = inputRefList.current.findIndex(x => x.current === event.target);\n    let nextIndex = index;\n\n    if (event.key === KeyboardEventKey.Home) {\n      nextIndex = 0;\n    } else if (event.key === KeyboardEventKey.End) {\n      nextIndex = inputRefList.current.length - 1;\n    } else if (event.key === KeyboardEventKey.ArrowDown && index < inputRefList.current.length - 1) {\n      nextIndex = index + 1;\n    } else if (event.key === KeyboardEventKey.ArrowUp && index > 0) {\n      nextIndex = index - 1;\n    } else if (event.key === KeyboardEventKey.Enter && index !== -1) {\n      nextIndex = index;\n    }\n\n    if (nextIndex !== -1 && event.key !== KeyboardEventKey.Space) {\n      event.preventDefault();\n\n      inputRefList.current[nextIndex].current?.focus();\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 toggleClasses = classNames(\n    styles.dropdown__toggle,\n    !disabled && {\n      [styles['dropdown__toggle--on-white']]: onColor === DropdownOldOnColor.onwhite,\n      [styles['dropdown__toggle--on-grey']]: onColor === DropdownOldOnColor.ongrey,\n      [styles['dropdown__toggle--on-blueberry']]: onColor === DropdownOldOnColor.onblueberry,\n      [styles['dropdown__toggle--on-cherry']]: onColor === DropdownOldOnColor.oncherry,\n      [styles['dropdown__toggle--transparent']]: transparent,\n      [styles['dropdown__toggle--fluid']]: fluid,\n      [styles['dropdown__toggle--open']]: isOpen,\n    }\n  );\n\n  const contentClasses = classNames(styles.dropdown__content, isOpen && styles['dropdown__content--open']);\n\n  const renderChildren = React.Children.map(children, (child, index) => {\n    return (\n      <li className={styles.dropdown__input} id={`${optionIdPrefix}-${index}`}>\n        {React.isValidElement(child) && inputRefList.current && inputRefList.current[index]\n          ? React.cloneElement(child as React.ReactElement, {\n              ref: mergeRefs([child.props.ref, inputRefList.current[index]]),\n            })\n          : child}\n      </li>\n    );\n  });\n\n  return (\n    <div className={styles.dropdown} ref={dropdownRef}>\n      <span id={labelId} className={styles.dropdown__label}>\n        {label}\n      </span>\n      <button\n        type=\"button\"\n        onClick={(): false | void => handleOpen(false)}\n        className={toggleClasses}\n        ref={buttonRef}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Dropdown}\n        disabled={disabled}\n        aria-labelledby={toggleLabelId}\n        aria-haspopup={true}\n        aria-controls={contentId}\n        aria-expanded={isOpen}\n      >\n        <span id={toggleLabelId} className={styles.dropdown__toggle__label}>\n          {placeholder}\n        </span>\n        <Icon\n          color={disabled ? theme.palette.neutral700 : theme.palette.blueberry600}\n          svgIcon={PlusSmall}\n          className={styles.dropdown__icon}\n          isHovered={!disabled && isHovered}\n          size={IconSize.XSmall}\n        />\n      </button>\n      <div\n        id={contentId}\n        className={contentClasses}\n        style={{ width: fluid ? '100%' : `auto`, minWidth: dropdownMinWidth ?? 'auto', zIndex: zIndex }}\n      >\n        <ul className={styles.dropdown__options} role=\"group\" aria-labelledby={labelId} tabIndex={-1} ref={optionsRef}>\n          {renderChildren}\n        </ul>\n        {!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 default DropdownOld;\n"],"names":["DropdownOldOnColor","React"],"mappings":"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"}

package/components/DropdownOld/resourceHelper.d.ts

@@ -0,0 +1,3 @@
+import { LanguageLocales } from '../../constants';
+import { HNDesignsystemDropdown } from '../../resources/Resources';
+export declare const getResources: (language: LanguageLocales) => HNDesignsystemDropdown;