boreal-ui 0.0.72 → 0.0.74

package/dist/next/Dropdown-B7PgWHlY.js

@@ -0,0 +1,390 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useId, useCallback, useEffect, useMemo } from "react";
+import { c as combineClassNames } from "./classNames-AS8QjFq7.js";
+import { c as capitalize } from "./capitalize-C0TSQSPh.js";
+import { d as getDefaultTheme, a as getDefaultRounding, b as getDefaultShadow } from "./boreal-style-config-DsaRlxmw.js";
+/* empty css                 */
+import { I as IconButton } from "./IconButton-BWw3WPaS.js";
+const MenuIcon = (props) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "24px",
+    height: "24px",
+    strokeWidth: "1.5",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    color: "currentColor",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M3 5H21",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M3 12H21",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M3 19H21",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    ]
+  }
+);
+const BaseDropdown = ({
+  triggerIcon,
+  items,
+  align = "right",
+  className = "",
+  menuClassName = "",
+  "aria-label": ariaLabel = "Dropdown menu",
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  menuAriaLabel,
+  menuAriaLabelledby,
+  menuAriaDescribedby,
+  menuId: menuIdProp,
+  triggerId,
+  focusFirstItemOnOpen = true,
+  closeOnSelect = true,
+  theme = getDefaultTheme(),
+  toggleRounding = getDefaultRounding(),
+  menuRounding = getDefaultRounding(),
+  toggleShadow = getDefaultShadow(),
+  menuShadow = getDefaultShadow(),
+  toggleOutline = false,
+  state = "",
+  title,
+  triggerProps,
+  menuProps,
+  "data-testid": testId = "dropdown",
+  IconButton: IconButton2,
+  classMap,
+  ...rest
+}) => {
+  const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const dropdownRef = useRef(null);
+  const menuRef = useRef(null);
+  const triggerRef = useRef(null);
+  const generatedMenuId = useId();
+  const resolvedMenuId = menuIdProp ?? generatedMenuId;
+  const Icon = triggerIcon ?? MenuIcon;
+  const getEnabledItemIndexes = useCallback(() => {
+    return items.reduce((acc, item2, index) => {
+      if (!item2.disabled) {
+        acc.push(index);
+      }
+      return acc;
+    }, []);
+  }, [items]);
+  const focusItemAtIndex = useCallback((index) => {
+    var _a;
+    const menuItems = (_a = menuRef.current) == null ? void 0 : _a.querySelectorAll("a, button");
+    const target = menuItems == null ? void 0 : menuItems[index];
+    if (target instanceof HTMLButtonElement && target.disabled) {
+      return;
+    }
+    target == null ? void 0 : target.focus();
+  }, []);
+  const toggleDropdown = () => {
+    setOpen((prev) => !prev);
+  };
+  const closeDropdown = useCallback(() => {
+    var _a, _b;
+    setOpen(false);
+    setActiveIndex(-1);
+    (_b = (_a = triggerRef.current) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
+  }, []);
+  const handleItemSelect = useCallback(
+    (item2) => {
+      var _a;
+      if (item2.disabled) return;
+      (_a = item2.onClick) == null ? void 0 : _a.call(item2);
+      if (closeOnSelect) {
+        closeDropdown();
+      }
+    },
+    [closeDropdown, closeOnSelect]
+  );
+  useEffect(() => {
+    if (!open) return;
+    const enabledIndexes = getEnabledItemIndexes();
+    if (!focusFirstItemOnOpen || enabledIndexes.length === 0) {
+      setActiveIndex(-1);
+      return;
+    }
+    setActiveIndex(enabledIndexes[0] ?? -1);
+  }, [open, focusFirstItemOnOpen, getEnabledItemIndexes]);
+  useEffect(() => {
+    if (!open || activeIndex < 0) return;
+    focusItemAtIndex(activeIndex);
+  }, [activeIndex, open, focusItemAtIndex]);
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+        closeDropdown();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    if (open && menuRef.current) {
+      const rect = menuRef.current.getBoundingClientRect();
+      const right = rect.right > window.innerWidth;
+      const left = rect.left < 0;
+      if (right) {
+        menuRef.current.setAttribute("data-overflow-right", "true");
+        menuRef.current.removeAttribute("data-overflow-left");
+      } else if (left) {
+        menuRef.current.setAttribute("data-overflow-left", "true");
+        menuRef.current.removeAttribute("data-overflow-right");
+      } else {
+        menuRef.current.removeAttribute("data-overflow-right");
+        menuRef.current.removeAttribute("data-overflow-left");
+      }
+    }
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [open, closeDropdown]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (!open) return;
+      const enabledIndexes = getEnabledItemIndexes();
+      const hasItems = enabledIndexes.length > 0;
+      if (e.key === "Escape") {
+        e.preventDefault();
+        closeDropdown();
+        return;
+      }
+      if (e.key === "Tab") {
+        closeDropdown();
+        return;
+      }
+      if (!hasItems) return;
+      const currentEnabledPosition = enabledIndexes.indexOf(activeIndex);
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        if (currentEnabledPosition < 0) {
+          setActiveIndex(enabledIndexes[0] ?? -1);
+        } else {
+          const nextPosition = (currentEnabledPosition + 1) % enabledIndexes.length;
+          setActiveIndex(enabledIndexes[nextPosition] ?? -1);
+        }
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        if (currentEnabledPosition < 0) {
+          setActiveIndex(enabledIndexes[enabledIndexes.length - 1] ?? -1);
+        } else {
+          const prevPosition = (currentEnabledPosition - 1 + enabledIndexes.length) % enabledIndexes.length;
+          setActiveIndex(enabledIndexes[prevPosition] ?? -1);
+        }
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        setActiveIndex(enabledIndexes[0] ?? -1);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        setActiveIndex(enabledIndexes[enabledIndexes.length - 1] ?? -1);
+      } else if ((e.key === "Enter" || e.key === " ") && activeIndex >= 0) {
+        e.preventDefault();
+        const item2 = items[activeIndex];
+        if (item2 && !item2.disabled) {
+          handleItemSelect(item2);
+        }
+      }
+    },
+    [
+      open,
+      items,
+      activeIndex,
+      getEnabledItemIndexes,
+      closeDropdown,
+      handleItemSelect
+    ]
+  );
+  const menuClassNames = useMemo(
+    () => combineClassNames(
+      classMap.menu,
+      align === "right" ? classMap.alignRight : classMap.alignLeft,
+      menuShadow && classMap[`shadow${capitalize(menuShadow)}`],
+      menuRounding && classMap[`round${capitalize(menuRounding)}`],
+      menuClassName,
+      menuProps == null ? void 0 : menuProps.className
+    ),
+    [
+      classMap,
+      align,
+      menuShadow,
+      menuRounding,
+      menuClassName,
+      menuProps == null ? void 0 : menuProps.className
+    ]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: dropdownRef,
+      className: combineClassNames(classMap.wrapper, className),
+      onKeyDown: handleKeyDown,
+      "data-testid": testId,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          IconButton2,
+          {
+            ref: triggerRef,
+            id: triggerId,
+            icon: Icon,
+            "aria-label": ariaLabelledBy ? void 0 : ariaLabel,
+            "aria-labelledby": ariaLabelledBy,
+            "aria-describedby": ariaDescribedBy,
+            "aria-haspopup": "menu",
+            "aria-expanded": open,
+            "aria-controls": resolvedMenuId,
+            rounding: toggleRounding,
+            shadow: toggleShadow,
+            outline: toggleOutline,
+            theme,
+            state,
+            onClick: toggleDropdown,
+            title,
+            "data-testid": `${testId}-trigger`,
+            ...triggerProps
+          }
+        ),
+        open && /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: resolvedMenuId,
+            ref: menuRef,
+            "aria-label": menuAriaLabelledby ? void 0 : menuAriaLabel ?? ariaLabel,
+            "aria-labelledby": menuAriaLabelledby,
+            "aria-describedby": menuAriaDescribedby,
+            className: menuClassNames,
+            "data-testid": `${testId}-menu`,
+            ...menuProps,
+            children: items.map((item2, index) => {
+              const commonProps = {
+                id: item2.id,
+                className: combineClassNames(
+                  classMap.item,
+                  item2.disabled ? classMap.disabled : ""
+                ),
+                "aria-label": item2["aria-label"],
+                "aria-describedby": item2["aria-describedby"],
+                "aria-current": item2["aria-current"],
+                "aria-disabled": item2.disabled || void 0,
+                title: item2.title,
+                "data-testid": item2["data-testid"],
+                onClick: () => handleItemSelect(item2)
+              };
+              if (item2.href) {
+                return /* @__PURE__ */ jsxs(
+                  "a",
+                  {
+                    href: item2.disabled ? void 0 : item2.href,
+                    ...commonProps,
+                    onClick: (e) => {
+                      var _a;
+                      if (item2.disabled) {
+                        e.preventDefault();
+                        return;
+                      }
+                      (_a = item2.onClick) == null ? void 0 : _a.call(item2);
+                      if (closeOnSelect) {
+                        closeDropdown();
+                      }
+                    },
+                    children: [
+                      item2.icon && /* @__PURE__ */ jsx("span", { className: classMap.icon, "aria-hidden": "true", children: item2.icon }),
+                      item2.label
+                    ]
+                  },
+                  item2.id ?? index
+                );
+              }
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  disabled: item2.disabled,
+                  ...commonProps,
+                  children: [
+                    item2.icon && /* @__PURE__ */ jsx("span", { className: classMap.icon, "aria-hidden": "true", children: item2.icon }),
+                    item2.label
+                  ]
+                },
+                item2.id ?? index
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+};
+BaseDropdown.displayName = "BaseDropdown";
+const wrapper = "_wrapper_1bnne_85";
+const trigger = "_trigger_1bnne_92";
+const alignRight = "_alignRight_1bnne_103";
+const alignLeft = "_alignLeft_1bnne_108";
+const menu = "_menu_1bnne_113";
+const item = "_item_1bnne_158";
+const icon = "_icon_1bnne_202";
+const isDisabled = "_isDisabled_1bnne_219";
+const roundNone = "_roundNone_1bnne_229";
+const roundSmall = "_roundSmall_1bnne_237";
+const roundMedium = "_roundMedium_1bnne_245";
+const roundLarge = "_roundLarge_1bnne_253";
+const roundFull = "_roundFull_1bnne_261";
+const shadowNone = "_shadowNone_1bnne_269";
+const shadowLight = "_shadowLight_1bnne_273";
+const shadowMedium = "_shadowMedium_1bnne_277";
+const shadowStrong = "_shadowStrong_1bnne_281";
+const shadowIntense = "_shadowIntense_1bnne_285";
+const styles = {
+  wrapper,
+  trigger,
+  alignRight,
+  alignLeft,
+  menu,
+  "fade-in": "_fade-in_1bnne_1",
+  "slide-up": "_slide-up_1bnne_1",
+  item,
+  icon,
+  isDisabled,
+  roundNone,
+  roundSmall,
+  roundMedium,
+  roundLarge,
+  roundFull,
+  shadowNone,
+  shadowLight,
+  shadowMedium,
+  shadowStrong,
+  shadowIntense
+};
+const Dropdown = (props) => {
+  return /* @__PURE__ */ jsx(BaseDropdown, { ...props, IconButton, classMap: styles });
+};
+Dropdown.displayName = "Dropdown";
+export {
+  Dropdown as D
+};
+//# sourceMappingURL=Dropdown-B7PgWHlY.js.map

package/dist/next/Dropdown-B7PgWHlY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown-B7PgWHlY.js","sources":["../../src/Icons/MenuIcon.tsx","../../src/components/Dropdown/DropdownBase.tsx","../../src/components/Dropdown/next/Dropdown.tsx"],"sourcesContent":["const MenuIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (\r\n  <svg\r\n    width=\"24px\"\r\n    height=\"24px\"\r\n    strokeWidth=\"1.5\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"none\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    color=\"currentColor\"\r\n    {...props}\r\n  >\r\n    <path\r\n      d=\"M3 5H21\"\r\n      stroke=\"currentColor\"\r\n      strokeWidth=\"1.5\"\r\n      strokeLinecap=\"round\"\r\n      strokeLinejoin=\"round\"\r\n    ></path>\r\n    <path\r\n      d=\"M3 12H21\"\r\n      stroke=\"currentColor\"\r\n      strokeWidth=\"1.5\"\r\n      strokeLinecap=\"round\"\r\n      strokeLinejoin=\"round\"\r\n    ></path>\r\n    <path\r\n      d=\"M3 19H21\"\r\n      stroke=\"currentColor\"\r\n      strokeWidth=\"1.5\"\r\n      strokeLinecap=\"round\"\r\n      strokeLinejoin=\"round\"\r\n    ></path>\r\n  </svg>\r\n);\r\n\r\nexport default MenuIcon;\r\n","import React, {\r\n  useState,\r\n  useRef,\r\n  useEffect,\r\n  useCallback,\r\n  KeyboardEvent,\r\n  useId,\r\n  JSX,\r\n  useMemo,\r\n} from \"react\";\r\nimport { BaseDropdownProps, IconButtonLikeRef } from \"./Dropdown.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport MenuIcon from \"../../Icons/MenuIcon\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n  getDefaultRounding,\r\n  getDefaultShadow,\r\n  getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst BaseDropdown: React.FC<BaseDropdownProps> = ({\r\n  triggerIcon,\r\n  items,\r\n  align = \"right\",\r\n  className = \"\",\r\n  menuClassName = \"\",\r\n  \"aria-label\": ariaLabel = \"Dropdown menu\",\r\n  \"aria-labelledby\": ariaLabelledBy,\r\n  \"aria-describedby\": ariaDescribedBy,\r\n  menuAriaLabel,\r\n  menuAriaLabelledby,\r\n  menuAriaDescribedby,\r\n  menuId: menuIdProp,\r\n  triggerId,\r\n  focusFirstItemOnOpen = true,\r\n  closeOnSelect = true,\r\n  theme = getDefaultTheme(),\r\n  toggleRounding = getDefaultRounding(),\r\n  menuRounding = getDefaultRounding(),\r\n  toggleShadow = getDefaultShadow(),\r\n  menuShadow = getDefaultShadow(),\r\n  toggleOutline = false,\r\n  state = \"\",\r\n  title,\r\n  triggerProps,\r\n  menuProps,\r\n  \"data-testid\": testId = \"dropdown\",\r\n  IconButton,\r\n  classMap,\r\n  ...rest\r\n}: BaseDropdownProps): JSX.Element => {\r\n  const [open, setOpen] = useState(false);\r\n  const [activeIndex, setActiveIndex] = useState<number>(-1);\r\n\r\n  const dropdownRef = useRef<HTMLDivElement>(null);\r\n  const menuRef = useRef<HTMLDivElement>(null);\r\n  const triggerRef = useRef<IconButtonLikeRef | null>(null);\r\n\r\n  const generatedMenuId = useId();\r\n  const resolvedMenuId = menuIdProp ?? generatedMenuId;\r\n\r\n  const Icon = triggerIcon ?? MenuIcon;\r\n\r\n  const getEnabledItemIndexes = useCallback(() => {\r\n    return items.reduce<number[]>((acc, item, index) => {\r\n      if (!item.disabled) {\r\n        acc.push(index);\r\n      }\r\n      return acc;\r\n    }, []);\r\n  }, [items]);\r\n\r\n  const focusItemAtIndex = useCallback((index: number) => {\r\n    const menuItems =\r\n      menuRef.current?.querySelectorAll<HTMLElement>(\"a, button\");\r\n\r\n    const target = menuItems?.[index];\r\n\r\n    if (target instanceof HTMLButtonElement && target.disabled) {\r\n      return;\r\n    }\r\n\r\n    target?.focus();\r\n  }, []);\r\n\r\n  const toggleDropdown = () => {\r\n    setOpen((prev) => !prev);\r\n  };\r\n\r\n  const closeDropdown = useCallback(() => {\r\n    setOpen(false);\r\n    setActiveIndex(-1);\r\n    triggerRef.current?.focus?.();\r\n  }, []);\r\n\r\n  const handleItemSelect = useCallback(\r\n    (item: BaseDropdownProps[\"items\"][number]) => {\r\n      if (item.disabled) return;\r\n\r\n      item.onClick?.();\r\n\r\n      if (closeOnSelect) {\r\n        closeDropdown();\r\n      }\r\n    },\r\n    [closeDropdown, closeOnSelect],\r\n  );\r\n\r\n  useEffect(() => {\r\n    if (!open) return;\r\n\r\n    const enabledIndexes = getEnabledItemIndexes();\r\n\r\n    if (!focusFirstItemOnOpen || enabledIndexes.length === 0) {\r\n      setActiveIndex(-1);\r\n      return;\r\n    }\r\n\r\n    setActiveIndex(enabledIndexes[0] ?? -1);\r\n  }, [open, focusFirstItemOnOpen, getEnabledItemIndexes]);\r\n\r\n  useEffect(() => {\r\n    if (!open || activeIndex < 0) return;\r\n    focusItemAtIndex(activeIndex);\r\n  }, [activeIndex, open, focusItemAtIndex]);\r\n\r\n  useEffect(() => {\r\n    const handleClickOutside = (e: MouseEvent) => {\r\n      if (\r\n        dropdownRef.current &&\r\n        !dropdownRef.current.contains(e.target as Node)\r\n      ) {\r\n        closeDropdown();\r\n      }\r\n    };\r\n\r\n    document.addEventListener(\"mousedown\", handleClickOutside);\r\n\r\n    if (open && menuRef.current) {\r\n      const rect = menuRef.current.getBoundingClientRect();\r\n      const right = rect.right > window.innerWidth;\r\n      const left = rect.left < 0;\r\n\r\n      if (right) {\r\n        menuRef.current.setAttribute(\"data-overflow-right\", \"true\");\r\n        menuRef.current.removeAttribute(\"data-overflow-left\");\r\n      } else if (left) {\r\n        menuRef.current.setAttribute(\"data-overflow-left\", \"true\");\r\n        menuRef.current.removeAttribute(\"data-overflow-right\");\r\n      } else {\r\n        menuRef.current.removeAttribute(\"data-overflow-right\");\r\n        menuRef.current.removeAttribute(\"data-overflow-left\");\r\n      }\r\n    }\r\n\r\n    return () => document.removeEventListener(\"mousedown\", handleClickOutside);\r\n  }, [open, closeDropdown]);\r\n\r\n  const handleKeyDown = useCallback(\r\n    (e: KeyboardEvent<HTMLDivElement>) => {\r\n      if (!open) return;\r\n\r\n      const enabledIndexes = getEnabledItemIndexes();\r\n      const hasItems = enabledIndexes.length > 0;\r\n\r\n      if (e.key === \"Escape\") {\r\n        e.preventDefault();\r\n        closeDropdown();\r\n        return;\r\n      }\r\n\r\n      if (e.key === \"Tab\") {\r\n        closeDropdown();\r\n        return;\r\n      }\r\n\r\n      if (!hasItems) return;\r\n\r\n      const currentEnabledPosition = enabledIndexes.indexOf(activeIndex);\r\n\r\n      if (e.key === \"ArrowDown\") {\r\n        e.preventDefault();\r\n\r\n        if (currentEnabledPosition < 0) {\r\n          setActiveIndex(enabledIndexes[0] ?? -1);\r\n        } else {\r\n          const nextPosition =\r\n            (currentEnabledPosition + 1) % enabledIndexes.length;\r\n          setActiveIndex(enabledIndexes[nextPosition] ?? -1);\r\n        }\r\n      } else if (e.key === \"ArrowUp\") {\r\n        e.preventDefault();\r\n\r\n        if (currentEnabledPosition < 0) {\r\n          setActiveIndex(enabledIndexes[enabledIndexes.length - 1] ?? -1);\r\n        } else {\r\n          const prevPosition =\r\n            (currentEnabledPosition - 1 + enabledIndexes.length) %\r\n            enabledIndexes.length;\r\n          setActiveIndex(enabledIndexes[prevPosition] ?? -1);\r\n        }\r\n      } else if (e.key === \"Home\") {\r\n        e.preventDefault();\r\n        setActiveIndex(enabledIndexes[0] ?? -1);\r\n      } else if (e.key === \"End\") {\r\n        e.preventDefault();\r\n        setActiveIndex(enabledIndexes[enabledIndexes.length - 1] ?? -1);\r\n      } else if ((e.key === \"Enter\" || e.key === \" \") && activeIndex >= 0) {\r\n        e.preventDefault();\r\n        const item = items[activeIndex];\r\n        if (item && !item.disabled) {\r\n          handleItemSelect(item);\r\n        }\r\n      }\r\n    },\r\n    [\r\n      open,\r\n      items,\r\n      activeIndex,\r\n      getEnabledItemIndexes,\r\n      closeDropdown,\r\n      handleItemSelect,\r\n    ],\r\n  );\r\n\r\n  const menuClassNames = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.menu,\r\n        align === \"right\" ? classMap.alignRight : classMap.alignLeft,\r\n        menuShadow && classMap[`shadow${capitalize(menuShadow)}`],\r\n        menuRounding && classMap[`round${capitalize(menuRounding)}`],\r\n        menuClassName,\r\n        menuProps?.className,\r\n      ),\r\n    [\r\n      classMap,\r\n      align,\r\n      menuShadow,\r\n      menuRounding,\r\n      menuClassName,\r\n      menuProps?.className,\r\n    ],\r\n  );\r\n\r\n  return (\r\n    <div\r\n      ref={dropdownRef}\r\n      className={combineClassNames(classMap.wrapper, className)}\r\n      onKeyDown={handleKeyDown}\r\n      data-testid={testId}\r\n      {...rest}\r\n    >\r\n      <IconButton\r\n        ref={triggerRef}\r\n        id={triggerId}\r\n        icon={Icon}\r\n        aria-label={ariaLabelledBy ? undefined : ariaLabel}\r\n        aria-labelledby={ariaLabelledBy}\r\n        aria-describedby={ariaDescribedBy}\r\n        aria-haspopup=\"menu\"\r\n        aria-expanded={open}\r\n        aria-controls={resolvedMenuId}\r\n        rounding={toggleRounding}\r\n        shadow={toggleShadow}\r\n        outline={toggleOutline}\r\n        theme={theme}\r\n        state={state}\r\n        onClick={toggleDropdown}\r\n        title={title}\r\n        data-testid={`${testId}-trigger`}\r\n        {...triggerProps}\r\n      />\r\n\r\n      {open && (\r\n        <div\r\n          id={resolvedMenuId}\r\n          ref={menuRef}\r\n          aria-label={\r\n            menuAriaLabelledby ? undefined : (menuAriaLabel ?? ariaLabel)\r\n          }\r\n          aria-labelledby={menuAriaLabelledby}\r\n          aria-describedby={menuAriaDescribedby}\r\n          className={menuClassNames}\r\n          data-testid={`${testId}-menu`}\r\n          {...menuProps}\r\n        >\r\n          {items.map((item, index) => {\r\n            const commonProps = {\r\n              id: item.id,\r\n              className: combineClassNames(\r\n                classMap.item,\r\n                item.disabled ? classMap.disabled : \"\",\r\n              ),\r\n              \"aria-label\": item[\"aria-label\"],\r\n              \"aria-describedby\": item[\"aria-describedby\"],\r\n              \"aria-current\": item[\"aria-current\"],\r\n              \"aria-disabled\": item.disabled || undefined,\r\n              title: item.title,\r\n              \"data-testid\": item[\"data-testid\"],\r\n              onClick: () => handleItemSelect(item),\r\n            };\r\n\r\n            if (item.href) {\r\n              return (\r\n                <a\r\n                  key={item.id ?? index}\r\n                  href={item.disabled ? undefined : item.href}\r\n                  {...commonProps}\r\n                  onClick={(e) => {\r\n                    if (item.disabled) {\r\n                      e.preventDefault();\r\n                      return;\r\n                    }\r\n                    item.onClick?.();\r\n                    if (closeOnSelect) {\r\n                      closeDropdown();\r\n                    }\r\n                  }}\r\n                >\r\n                  {item.icon && (\r\n                    <span className={classMap.icon} aria-hidden=\"true\">\r\n                      {item.icon}\r\n                    </span>\r\n                  )}\r\n                  {item.label}\r\n                </a>\r\n              );\r\n            }\r\n\r\n            return (\r\n              <button\r\n                key={item.id ?? index}\r\n                type=\"button\"\r\n                disabled={item.disabled}\r\n                {...commonProps}\r\n              >\r\n                {item.icon && (\r\n                  <span className={classMap.icon} aria-hidden=\"true\">\r\n                    {item.icon}\r\n                  </span>\r\n                )}\r\n                {item.label}\r\n              </button>\r\n            );\r\n          })}\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nBaseDropdown.displayName = \"BaseDropdown\";\r\nexport default BaseDropdown;\r\n","\"use client\";\r\nimport React from \"react\";\r\nimport BaseDropdown from \"../DropdownBase\";\r\nimport { DropdownProps } from \"../Dropdown.types\";\r\nimport { IconButton } from \"@/index.next\";\r\nimport styles from \"./Dropdown.module.scss\";\r\n\r\nconst Dropdown: React.FC<DropdownProps> = (props) => {\r\n  return <BaseDropdown {...props} IconButton={IconButton} classMap={styles} />;\r\n};\r\nDropdown.displayName = \"Dropdown\";\r\nexport default Dropdown;\r\n"],"names":["IconButton","item"],"mappings":"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"}