se-design 1.0.21 → 1.0.23

package/dist/components/Dropdown/index.d.ts

@@ -4,6 +4,7 @@ type DropdownValue = {
 };
 type DropdownProps = {
     label?: string;
+    ariaLabel?: string;
     type: 'select' | 'multi-select';
     dropDownOptions?: DropdownValue[];
     defaultText?: string;

package/dist/components/Popover/index.d.ts

@@ -20,5 +20,7 @@ export interface PopoverProps {
     disabled?: boolean;
     isWithPortal?: boolean;
     noBorder?: boolean;
+    ariaLabel?: string;
+    sourceRole?: 'button' | 'combobox';
 }
 export declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<PopoverHandle>>;

package/dist/index17.js

@@ -1,5 +1,5 @@
-import R, { forwardRef as J, useState as E, useRef as V, useEffect as C, useImperativeHandle as Q } from "react";
-import Y from "react-dom";
+import R, { forwardRef as Y, useState as E, useRef as V, useEffect as C, useImperativeHandle as Z } from "react";
+import ee from "react-dom";
 function H() {
   return H = Object.assign ? Object.assign.bind() : function(v) {
     for (var g = 1; g < arguments.length; g++) {
@@ -9,7 +9,7 @@ function H() {
     return v;
   }, H.apply(null, arguments);
 }
-const te = /* @__PURE__ */ J(({
+const re = /* @__PURE__ */ Y(({
   className: v = "",
   automationId: g = "",
   position: f = "bottom-center",
@@ -19,11 +19,13 @@ const te = /* @__PURE__ */ J(({
   renderPopoverSrcElement: F,
   onPopoverToggle: j,
   isPopoverOpen: B,
-  disabled: h = !1,
+  disabled: w = !1,
   isWithPortal: b = !1,
+  ariaLabel: N,
+  sourceRole: W = "button",
   ...T
-}, N) => {
-  const [c, u] = E(!1), [w, z] = E(f), [W, O] = E(!1), a = V(null), l = V(null), [$, y] = E({
+}, _) => {
+  const [c, u] = E(!1), [h, z] = E(f), [X, O] = E(!1), a = V(null), l = V(null), [$, y] = E({
     top: 0,
     left: 0
   }), k = (e = "bottom-center") => {
@@ -59,8 +61,8 @@ const te = /* @__PURE__ */ J(({
     }
     const p = l.current?.getBoundingClientRect(), A = p?.width || 0, d = p?.height || 0;
     if (i + A > n && (i = Math.max(0, n - A)), i < 0 && (i = 0), r + d > s) {
-      const U = t.top, G = s - t.bottom;
-      U >= d || U > G ? (r = t.top - d, r < 0 && (r = 0)) : r = Math.max(0, s - d);
+      const U = t.top, Q = s - t.bottom;
+      U >= d || U > Q ? (r = t.top - d, r < 0 && (r = 0)) : r = Math.max(0, s - d);
     }
     return r < 0 && (r = t.bottom, r + d > s && (r = Math.max(0, s - d))), {
       top: r,
@@ -69,14 +71,14 @@ const te = /* @__PURE__ */ J(({
   };
   C(() => {
     if (j && j(c), c && !b)
-      return document.body.addEventListener("click", q, !0), _(), () => document.body.removeEventListener("click", q, !0);
+      return document.body.addEventListener("click", q, !0), G(), () => document.body.removeEventListener("click", q, !0);
     if (c && b) {
       document.body.addEventListener("click", P, !0), window.addEventListener("scroll", P), window.addEventListener("resize", K);
       const e = setTimeout(() => {
-        const t = k(w);
+        const t = k(h);
         D(), t && y(t);
       }, 0), o = setTimeout(() => {
-        const t = k(w);
+        const t = k(h);
         t && y(t);
       }, 10);
       return () => {
@@ -100,7 +102,7 @@ const te = /* @__PURE__ */ J(({
       o && document.activeElement === a.current && o.focus();
     }, 0);
   }, [c]);
-  const _ = () => {
+  const G = () => {
     if (!l.current) return;
     const e = l.current.getBoundingClientRect(), o = window.innerHeight;
     e?.bottom > o ? z(f.includes("left") ? "top-left" : f.includes("right") ? "top-right" : "top-center") : e?.top < 0 && z(f.includes("left") ? "bottom-left" : f.includes("right") ? "bottom-right" : "bottom-center");
@@ -113,7 +115,7 @@ const te = /* @__PURE__ */ J(({
     const o = a.current, t = l.current;
     if (!o) return;
     if (D(), e.type === "scroll" && c) {
-      const d = k(w);
+      const d = k(h);
       d && y(d);
     }
     const n = e.target, s = o.contains(n), r = t?.contains(n), p = n.closest?.(".se-design-popover-wrapper");
@@ -121,7 +123,7 @@ const te = /* @__PURE__ */ J(({
   }, K = () => {
     if (c && b && a.current) {
       D();
-      const e = k(w);
+      const e = k(h);
       e && y(e);
     }
   }, x = () => {
@@ -137,10 +139,10 @@ const te = /* @__PURE__ */ J(({
     let r = -1;
     e.key === "ArrowDown" ? (e.preventDefault(), e.stopPropagation(), r = s < n.length - 1 ? s + 1 : 0) : e.key === "ArrowUp" ? (e.preventDefault(), e.stopPropagation(), r = s > 0 ? s - 1 : n.length - 1) : e.key === "Home" ? (e.preventDefault(), e.stopPropagation(), r = 0) : e.key === "End" && (e.preventDefault(), e.stopPropagation(), r = n.length - 1), r >= 0 && n[r] ? n[r].focus() : s === -1 && n.length > 0 && n[0].focus();
   };
-  Q(N, () => ({
+  Z(_, () => ({
     togglePopover: x
   }), []);
-  const X = {
+  const J = {
     "bottom-left": {
       left: "0",
       top: "100%"
@@ -169,13 +171,13 @@ const te = /* @__PURE__ */ J(({
     }
   }, M = T?.noBorder ? "" : "shadow-md border rounded-md";
   return /* @__PURE__ */ R.createElement("div", H({
-    className: "se-design-popover-wrapper cursor-pointer relative" + (v.length > 0 ? ` ${v}` : "") + (c ? " open" : "") + (h ? " opacity-50 cursor-not-allowed pointer-events-none" : ""),
+    className: "se-design-popover-wrapper cursor-pointer relative" + (v.length > 0 ? ` ${v}` : "") + (c ? " open" : "") + (w ? " opacity-50 cursor-not-allowed pointer-events-none" : ""),
     ref: a,
     onClick: (e) => {
-      h || (e.stopPropagation(), x());
+      w || (e.stopPropagation(), x());
     },
     onKeyDown: (e) => {
-      if (!h)
+      if (!w)
         if (e.key === "Enter" || e.key === " ") {
           e.preventDefault(), e.stopPropagation();
           const o = c;
@@ -199,11 +201,12 @@ const te = /* @__PURE__ */ J(({
           }
         }, 0));
     },
-    role: "button",
-    "aria-expanded": c,
+    role: W,
+    "aria-expanded": c ? "true" : "false",
     "aria-haspopup": "true",
-    tabIndex: h ? -1 : 0,
-    "aria-disabled": h,
+    tabIndex: 0,
+    "aria-disabled": w ? "true" : "false",
+    "aria-label": N,
     "data-automation-id": g
   }, T), F({
     displayPopover: c,
@@ -214,7 +217,7 @@ const te = /* @__PURE__ */ J(({
       borderColor: "var(--color-gray-200)",
       color: "var(--color-gray-900)",
       backgroundColor: "var(--color-white)",
-      ...X[w]
+      ...J[h]
     },
     onClick: (e) => e.stopPropagation(),
     onKeyDown: (e) => {
@@ -226,7 +229,7 @@ const te = /* @__PURE__ */ J(({
     "data-automation-id": m
   }, I({
     closePopoverCb: () => u(!1)
-  })), b && c && W && /* @__PURE__ */ Y.createPortal(/* @__PURE__ */ R.createElement("div", {
+  })), b && c && X && /* @__PURE__ */ ee.createPortal(/* @__PURE__ */ R.createElement("div", {
     className: `popover-content-with-portal ${M} ${L == "full" ? "w-full" : "w-max"}`,
     style: {
       position: "fixed",
@@ -250,6 +253,6 @@ const te = /* @__PURE__ */ J(({
   })), document.body));
 });
 export {
-  te as Popover
+  re as Popover
 };
 //# sourceMappingURL=index17.js.map

package/dist/index17.js.map

@@ -1 +1 @@
-{"version":3,"file":"index17.js","sources":["../src/components/Popover/index.tsx"],"sourcesContent":["import React, { useState, useRef, ReactNode, useEffect, forwardRef, ForwardedRef, useImperativeHandle } from 'react';\nimport ReactDOM from 'react-dom';\n\nexport interface PopoverHandle {\n  togglePopover: () => void;\n}\n\nexport interface PopoverProps {\n  className?: string;\n  automationId?: string;\n  popoverContentAutomationId?: string;\n  renderPopoverContents: (props: { closePopoverCb: () => void }) => ReactNode;\n  renderPopoverSrcElement: (props: { displayPopover: boolean; togglePopover: () => void }) => ReactNode;\n  position?: 'bottom-center' | 'bottom-left' | 'bottom-right' | 'top-center' | 'top-left' | 'top-right';\n  onPopoverToggle?: (displayPopover: boolean) => void;\n  contentWidth?: 'full' | 'max';\n  isPopoverOpen?: boolean;\n  disabled?: boolean;\n  isWithPortal?: boolean;\n  noBorder?: boolean;\n}\n\nexport const Popover = forwardRef<PopoverHandle, PopoverProps>(\n  (\n    {\n      className = '',\n      automationId = '',\n      position = 'bottom-center',\n      popoverContentAutomationId = '',\n      contentWidth = 'max',\n      renderPopoverContents,\n      renderPopoverSrcElement,\n      onPopoverToggle,\n      isPopoverOpen,\n      disabled = false,\n      isWithPortal = false,\n      ...props\n    },\n    ref: ForwardedRef<PopoverHandle>\n  ) => {\n    const [displayPopover, setDisplayPopover] = useState(false);\n    const [popoverPosition, setPopoverPosition] = useState(position);\n    const [isSrcElementVisible, setIsSrcElementVisible] = useState(false);\n    const srcElementRef = useRef<HTMLDivElement>(null);\n    const popoverContentRef = useRef<HTMLDivElement>(null);\n\n    const [portalPosition, setPortalPosition] = useState({ top: 0, left: 0 });\n\n    const calculatePositionOfPopover = (position: string = 'bottom-center') => {\n      if (!srcElementRef.current) return { top: 0, left: 0 };\n\n      let localPosition = position;\n\n      const srcRect = srcElementRef.current.getBoundingClientRect();\n      const viewportWidth = window.innerWidth;\n      const viewportHeight = window.innerHeight;\n\n      // Calculate position for portal\n      let top = 0;\n      let left = 0;\n\n      switch (localPosition) {\n        case 'bottom-left':\n          top = srcRect.bottom;\n          left = srcRect.left;\n          break;\n        case 'bottom-right':\n          top = srcRect.bottom;\n          left = srcRect.right - srcRect.width * 0.5;\n          break;\n        case 'bottom-center':\n          top = srcRect.bottom;\n          left = srcRect.left + srcRect.width * 0.15;\n          break;\n        case 'top-left':\n          top = srcRect.top - srcRect.height * 1.9;\n          left = srcRect.left;\n          break;\n        case 'top-right':\n          top = srcRect.top - srcRect.height * 1.9;\n          left = srcRect.right - srcRect.width * 0.5;\n          break;\n        case 'top-center':\n          top = srcRect.top - srcRect.height * 1.9;\n          left = srcRect.left + srcRect.width * 0.15;\n          break;\n        default:\n          top = srcRect.bottom;\n          left = srcRect.left;\n          break;\n      }\n\n      // Get popover dimensions if available\n      const popoverRect = popoverContentRef.current?.getBoundingClientRect();\n      const popoverWidth = popoverRect?.width || 0;\n      const popoverHeight = popoverRect?.height || 0;\n\n      // Adjust position to keep popover within viewport bounds\n      // Horizontal adjustments\n      if (left + popoverWidth > viewportWidth) {\n        // Popover extends beyond right edge, shift it left\n        left = Math.max(0, viewportWidth - popoverWidth);\n      }\n      if (left < 0) {\n        // Popover extends beyond left edge, shift it right\n        left = 0;\n      }\n\n      // Vertical adjustments\n      if (top + popoverHeight > viewportHeight) {\n        // Popover extends beyond bottom edge\n        // Try to position it above the source element\n        const spaceAbove = srcRect.top;\n        const spaceBelow = viewportHeight - srcRect.bottom;\n        \n        if (spaceAbove >= popoverHeight || spaceAbove > spaceBelow) {\n          // Position above if there's enough space or more space above\n          top = srcRect.top - popoverHeight;\n          // Ensure it doesn't go above viewport\n          if (top < 0) {\n            top = 0;\n          }\n        } else {\n          // Keep at bottom but adjust to fit within viewport\n          top = Math.max(0, viewportHeight - popoverHeight);\n        }\n      }\n      if (top < 0) {\n        // Popover extends beyond top edge, position it below the source element\n        top = srcRect.bottom;\n        // Ensure it doesn't go below viewport\n        if (top + popoverHeight > viewportHeight) {\n          top = Math.max(0, viewportHeight - popoverHeight);\n        }\n      }\n\n      return { top, left };\n    };\n  \n    useEffect(() => {\n      if (onPopoverToggle) {\n        onPopoverToggle(displayPopover);\n      }\n\n      if (displayPopover && !isWithPortal) {\n        document.body.addEventListener('click', clickListener, true);\n        checkPopoverPosition();\n        return () => document.body.removeEventListener('click', clickListener, true);\n      } else if (displayPopover && isWithPortal) {\n        document.body.addEventListener('click', clickAndScrollListenerWithPortal, true);\n        window.addEventListener('scroll', clickAndScrollListenerWithPortal);\n        window.addEventListener('resize', resizeListenerWithPortal);\n\n        // Initial position calculation\n        const timeout1 = setTimeout(() => {\n          const position = calculatePositionOfPopover(popoverPosition);\n          checkSourceVisibility();\n          \n          if (position) {\n            setPortalPosition(position);\n          }\n        }, 0);\n\n        // Recalculate after popover is rendered to get accurate dimensions\n        const timeout2 = setTimeout(() => {\n          const position = calculatePositionOfPopover(popoverPosition);\n          if (position) {\n            setPortalPosition(position);\n          }\n        }, 10);\n\n        return () => {\n          document.body.removeEventListener('click', clickAndScrollListenerWithPortal, true);\n          window.removeEventListener('scroll', clickAndScrollListenerWithPortal);\n          window.removeEventListener('resize', resizeListenerWithPortal);\n          clearTimeout(timeout1);\n          clearTimeout(timeout2);\n        };\n      }\n    }, [displayPopover, isWithPortal]);\n\n    const checkSourceVisibility = () => {\n      if (!srcElementRef.current) {\n        setIsSrcElementVisible(false);\n        return;\n      }\n\n      const rec = srcElementRef.current.getBoundingClientRect();\n      const viewportHeight = window.innerHeight;\n      const viewportWidth = window.innerWidth;\n\n      const isVisible = rec.top < viewportHeight && rec.bottom > 0 && rec.left < viewportWidth && rec.right > 0;\n\n      setIsSrcElementVisible(isVisible);\n    };\n\n    useEffect(() => {\n      setDisplayPopover(isPopoverOpen ?? false);\n    }, [isPopoverOpen]);\n\n    useEffect(() => {\n      // Focus first focusable element when popover opens\n      if (displayPopover && popoverContentRef.current) {\n        setTimeout(() => {\n          const focusableSelectors = [\n            '[role=\"menuitem\"]',\n            '[role=\"option\"]',\n            '[role=\"menuitemcheckbox\"]',\n            '[role=\"menuitemradio\"]',\n            'button:not([disabled])',\n            'a[href]',\n            '[tabindex]:not([tabindex=\"-1\"])'\n          ].join(', ');\n          const firstFocusable = popoverContentRef.current?.querySelector<HTMLElement>(focusableSelectors);\n          if (firstFocusable && document.activeElement === srcElementRef.current) {\n            firstFocusable.focus();\n          }\n        }, 0);\n      }\n    }, [displayPopover]);\n\n    //Function to check popover position\n    const checkPopoverPosition = () => {\n      if (!popoverContentRef.current) return;\n\n      const popoverRect = popoverContentRef.current.getBoundingClientRect();\n      const viewportHeight = window.innerHeight;\n\n      if (popoverRect?.bottom > viewportHeight) {\n        setPopoverPosition(\n          position.includes('left') ? 'top-left' : position.includes('right') ? 'top-right' : 'top-center'\n        );\n      } else if (popoverRect?.top < 0) {\n        // If popover extends beyond top of viewport, switch to bottom position\n        setPopoverPosition(\n          position.includes('left') ? 'bottom-left' : position.includes('right') ? 'bottom-right' : 'bottom-center'\n        );\n      }\n    };\n\n    const clickListener = (event: MouseEvent) => {\n      const currentDropRef = srcElementRef.current;\n      if (!currentDropRef) return;\n\n      const target = event.target as Node;\n      const isSourcePopover = currentDropRef.contains(target);\n      const isPopoverContent = popoverContentRef.current?.contains(target);\n      \n      // Check if click is on another popover's source element\n      const clickedElement = target as HTMLElement;\n      const closestPopoverWrapper = clickedElement.closest?.('.se-design-popover-wrapper');\n      const isAnotherPopoverSource = closestPopoverWrapper && closestPopoverWrapper !== currentDropRef;\n      \n      // if clicked source is parent or the popover-content, do not toggle dropdown.\n      // Also close if clicking on another popover's source element\n      if ((!isSourcePopover && !isPopoverContent) || isAnotherPopoverSource) {\n        setDisplayPopover(false);\n      }\n    };\n\n    const clickAndScrollListenerWithPortal = (event: Event) => {\n      const currentDropRef = srcElementRef.current;\n      const currentPopoverRef = popoverContentRef.current;\n      if (!currentDropRef) return;\n      checkSourceVisibility();\n\n      // Recalculate position on scroll\n      if (event.type === 'scroll' && displayPopover) {\n        const position = calculatePositionOfPopover(popoverPosition);\n        if (position) {\n          setPortalPosition(position);\n        }\n      }\n\n      const target = event.target as Node;\n      const isSourcePopover = currentDropRef.contains(target);\n      const isPopoverContent = currentPopoverRef?.contains(target);\n      \n      // Check if click is on another popover's source element\n      const clickedElement = target as HTMLElement;\n      const closestPopoverWrapper = clickedElement.closest?.('.se-design-popover-wrapper');\n      const isAnotherPopoverSource = closestPopoverWrapper && closestPopoverWrapper !== currentDropRef;\n\n      // if clicked source is parent or the popover-content, do not toggle dropdown.\n      // Also close if clicking on another popover's source element\n      if ((!isSourcePopover && !isPopoverContent) || isAnotherPopoverSource) {\n        setDisplayPopover(false);\n      }\n    };\n\n    const resizeListenerWithPortal = () => {\n      if (displayPopover && isWithPortal && srcElementRef.current) {\n        checkSourceVisibility();\n        const position = calculatePositionOfPopover(popoverPosition);\n        if (position) {\n          setPortalPosition(position);\n        }\n      }\n    };\n\n    const togglePopover = () => {\n      setDisplayPopover((displayPopover) => !displayPopover);\n    };\n\n    const handleArrowKeyNavigation = (e: React.KeyboardEvent, container: HTMLDivElement | null) => {\n      if (!container) return;\n\n      // Find all focusable elements within the popover content\n      // This includes elements with role=\"menuitem\", role=\"option\", tabIndex >= 0, etc.\n      const focusableSelectors = [\n        '[role=\"menuitem\"]',\n        '[role=\"option\"]',\n        '[role=\"menuitemcheckbox\"]',\n        '[role=\"menuitemradio\"]',\n        'button:not([disabled])',\n        'a[href]',\n        'input:not([disabled])',\n        'select:not([disabled])',\n        'textarea:not([disabled])',\n        '[tabindex]:not([tabindex=\"-1\"])'\n      ].join(', ');\n\n      const focusableElements = Array.from(\n        container.querySelectorAll<HTMLElement>(focusableSelectors)\n      ).filter((el) => {\n        // Filter out disabled and hidden elements\n        const style = window.getComputedStyle(el);\n        return (\n          !el.hasAttribute('disabled') &&\n          !el.hasAttribute('aria-disabled') &&\n          style.display !== 'none' &&\n          style.visibility !== 'hidden' &&\n          (el.tabIndex >= 0 || el.hasAttribute('role'))\n        );\n      });\n\n      if (focusableElements.length === 0) return;\n\n      const currentIndex = focusableElements.findIndex((el) => el === document.activeElement);\n      let nextIndex = -1;\n\n      if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        e.stopPropagation();\n        nextIndex = currentIndex < focusableElements.length - 1 ? currentIndex + 1 : 0;\n      } else if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        e.stopPropagation();\n        nextIndex = currentIndex > 0 ? currentIndex - 1 : focusableElements.length - 1;\n      } else if (e.key === 'Home') {\n        e.preventDefault();\n        e.stopPropagation();\n        nextIndex = 0;\n      } else if (e.key === 'End') {\n        e.preventDefault();\n        e.stopPropagation();\n        nextIndex = focusableElements.length - 1;\n      }\n\n      if (nextIndex >= 0 && focusableElements[nextIndex]) {\n        focusableElements[nextIndex].focus();\n      } else if (currentIndex === -1 && focusableElements.length > 0) {\n        // If no element is currently focused, focus the first one\n        focusableElements[0].focus();\n      }\n    };\n\n    useImperativeHandle(ref, () => ({ togglePopover }), []);\n\n    const popoverContentStyle = {\n      'bottom-left': { left: '0', top: '100%' },\n      'bottom-right': { right: '0', top: '100%' },\n      'bottom-center': { left: '50%', transform: 'translateX(-50%)', top: '100%' },\n      'top-left': { left: '0', bottom: '100%' },\n      'top-right': { right: '0', bottom: '100%' },\n      'top-center': { left: '50%', transform: 'translateX(-50%)', bottom: '100%' }\n    };\n    const popoverContentClasses = props?.noBorder ? '' : 'shadow-md border rounded-md';\n\n    return (\n      <div\n        className={\n          'se-design-popover-wrapper cursor-pointer relative' +\n          (className.length > 0 ? ` ${className}` : '') +\n          (displayPopover ? ' open' : '') +\n          (disabled ? ' opacity-50 cursor-not-allowed pointer-events-none' : '')\n        }\n        ref={srcElementRef}\n        onClick={(e) => {\n          if (disabled) return;\n          e.stopPropagation();\n          togglePopover();\n        }}\n        onKeyDown={(e) => {\n          if (disabled) return;\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            e.stopPropagation();\n            const wasOpen = displayPopover;\n            togglePopover();\n            // Focus first focusable element when opening\n            if (!wasOpen) {\n              setTimeout(() => {\n                const currentRef = popoverContentRef.current;\n                if (currentRef) {\n                  const focusableSelectors = [\n                    '[role=\"menuitem\"]',\n                    '[role=\"option\"]',\n                    '[role=\"menuitemcheckbox\"]',\n                    '[role=\"menuitemradio\"]',\n                    'button:not([disabled])',\n                    'a[href]',\n                    '[tabindex]:not([tabindex=\"-1\"])'\n                  ].join(', ');\n                  const firstFocusable = currentRef.querySelector<HTMLElement>(focusableSelectors);\n                  if (firstFocusable) {\n                    firstFocusable.focus();\n                  }\n                }\n              }, 0);\n            }\n          } else if (e.key === 'Escape' && displayPopover) {\n            e.preventDefault();\n            e.stopPropagation();\n            setDisplayPopover(false);\n          } else if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && displayPopover) {\n            // Handle arrow keys when popover is open\n            const currentRef = popoverContentRef.current;\n            if (currentRef) {\n              handleArrowKeyNavigation(e, currentRef);\n            }\n          } else if (e.key === 'ArrowDown' && !displayPopover) {\n            // Open popover and focus first item when ArrowDown is pressed\n            e.preventDefault();\n            e.stopPropagation();\n            setDisplayPopover(true);\n            setTimeout(() => {\n              const currentRef = popoverContentRef.current;\n              if (currentRef) {\n                const focusableSelectors = [\n                  '[role=\"menuitem\"]',\n                  '[role=\"option\"]',\n                  '[role=\"menuitemcheckbox\"]',\n                  '[role=\"menuitemradio\"]',\n                  'button:not([disabled])',\n                  'a[href]',\n                  '[tabindex]:not([tabindex=\"-1\"])'\n                ].join(', ');\n                const firstFocusable = currentRef.querySelector<HTMLElement>(focusableSelectors);\n                if (firstFocusable) {\n                  firstFocusable.focus();\n                }\n              }\n            }, 0);\n          }\n        }}\n        role=\"button\"\n        aria-expanded={displayPopover}\n        aria-haspopup=\"true\"\n        tabIndex={disabled ? -1 : 0}\n        aria-disabled={disabled}\n        data-automation-id={automationId}\n        {...props}\n      >\n        {renderPopoverSrcElement({ displayPopover, togglePopover })}\n\n        {displayPopover && !isWithPortal && (\n          <div\n            className={`popover-content absolute ${popoverContentClasses} z-[1000] ${contentWidth == 'full' ? 'w-full' : 'w-max'}`}\n            style={{\n              borderColor: 'var(--color-gray-200)',\n              color: 'var(--color-gray-900)',\n              backgroundColor: 'var(--color-white)',\n              ...popoverContentStyle[popoverPosition]\n            }}\n            onClick={(e) => e.stopPropagation()}\n            onKeyDown={(e) => {\n              // Allow Escape key to close popover when focus is on content\n              if (e.key === 'Escape') {\n                e.preventDefault();\n                e.stopPropagation();\n                setDisplayPopover(false);\n                srcElementRef.current?.focus();\n              } else if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Home' || e.key === 'End') {\n                // Handle arrow key navigation for focusable elements inside popover\n                handleArrowKeyNavigation(e, popoverContentRef.current);\n              }\n            }}\n            role=\"dialog\"\n            aria-modal=\"false\"\n            ref={popoverContentRef}\n            data-automation-id={popoverContentAutomationId}\n          >\n            {renderPopoverContents({ closePopoverCb: () => setDisplayPopover(false) })}\n          </div>\n        )}\n        {isWithPortal &&\n          displayPopover &&\n          isSrcElementVisible &&\n          ReactDOM.createPortal(\n            <div\n              className={`popover-content-with-portal ${popoverContentClasses} ${contentWidth == 'full' ? 'w-full' : 'w-max'}`}\n              style={{\n                position: 'fixed',\n                top: portalPosition.top,\n                left: portalPosition.left,\n                zIndex: 1000,\n                borderColor: 'var(--color-gray-200)',\n                color: 'var(--color-gray-900)',\n                backgroundColor: 'var(--color-white)'\n              }}\n              onClick={(e) => e.stopPropagation()}\n              onKeyDown={(e) => {\n                // Allow Escape key to close popover when focus is on content\n                if (e.key === 'Escape') {\n                  e.preventDefault();\n                  e.stopPropagation();\n                  setDisplayPopover(false);\n                  srcElementRef.current?.focus();\n                } else if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Home' || e.key === 'End') {\n                  // Handle arrow key navigation for focusable elements inside popover\n                  handleArrowKeyNavigation(e, popoverContentRef.current);\n                }\n              }}\n              role=\"dialog\"\n              aria-modal=\"false\"\n              ref={popoverContentRef}\n              data-automation-id={popoverContentAutomationId}\n            >\n              {renderPopoverContents({ closePopoverCb: () => setDisplayPopover(false) })}\n            </div>,\n            document.body\n          )}\n      </div>\n    );\n  }\n);\n\n"],"names":["Popover","className","automationId","position","popoverContentAutomationId","contentWidth","renderPopoverContents","renderPopoverSrcElement","onPopoverToggle","isPopoverOpen","disabled","isWithPortal","props","ref","displayPopover","setDisplayPopover","useState","popoverPosition","setPopoverPosition","isSrcElementVisible","setIsSrcElementVisible","srcElementRef","useRef","popoverContentRef","portalPosition","setPortalPosition","top","left","calculatePositionOfPopover","current","localPosition","srcRect","getBoundingClientRect","viewportWidth","window","innerWidth","viewportHeight","innerHeight","bottom","right","width","height","popoverRect","popoverWidth","popoverHeight","Math","max","spaceAbove","spaceBelow","useEffect","document","body","addEventListener","clickListener","checkPopoverPosition","removeEventListener","clickAndScrollListenerWithPortal","resizeListenerWithPortal","timeout1","setTimeout","checkSourceVisibility","timeout2","clearTimeout","rec","isVisible","focusableSelectors","join","firstFocusable","querySelector","activeElement","focus","includes","event","currentDropRef","target","isSourcePopover","contains","isPopoverContent","closestPopoverWrapper","closest","currentPopoverRef","type","togglePopover","handleArrowKeyNavigation","e","container","focusableElements","Array","from","querySelectorAll","filter","el","style","getComputedStyle","hasAttribute","display","visibility","tabIndex","length","currentIndex","findIndex","nextIndex","key","preventDefault","stopPropagation","useImperativeHandle","popoverContentStyle","transform","popoverContentClasses","noBorder","React","createElement","_extends","onClick","onKeyDown","wasOpen","currentRef","role","borderColor","color","backgroundColor","closePopoverCb","ReactDOM","createPortal","zIndex"],"mappings":";;;;;;;;;;;AAsBO,MAAMA,uBACX,CACE;AAAA,EACEC,WAAAA,IAAY;AAAA,EACZC,cAAAA,IAAe;AAAA,EACfC,UAAAA,IAAW;AAAA,EACXC,4BAAAA,IAA6B;AAAA,EAC7BC,cAAAA,IAAe;AAAA,EACfC,uBAAAA;AAAAA,EACAC,yBAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACAC,UAAAA,IAAW;AAAA,EACXC,cAAAA,IAAe;AAAA,EACf,GAAGC;AACL,GACAC,MACG;AACH,QAAM,CAACC,GAAgBC,CAAiB,IAAIC,EAAS,EAAK,GACpD,CAACC,GAAiBC,CAAkB,IAAIF,EAASb,CAAQ,GACzD,CAACgB,GAAqBC,CAAsB,IAAIJ,EAAS,EAAK,GAC9DK,IAAgBC,EAAuB,IAAI,GAC3CC,IAAoBD,EAAuB,IAAI,GAE/C,CAACE,GAAgBC,CAAiB,IAAIT,EAAS;AAAA,IAAEU,KAAK;AAAA,IAAGC,MAAM;AAAA,EAAA,CAAG,GAElEC,IAA6BA,CAACzB,IAAmB,oBAAoB;AACzE,QAAI,CAACkB,EAAcQ,QAAS,QAAO;AAAA,MAAEH,KAAK;AAAA,MAAGC,MAAM;AAAA,IAAA;AAEnD,QAAIG,IAAgB3B;AAEpB,UAAM4B,IAAUV,EAAcQ,QAAQG,sBAAAA,GAChCC,IAAgBC,OAAOC,YACvBC,IAAiBF,OAAOG;AAG9B,QAAIX,IAAM,GACNC,IAAO;AAEX,YAAQG,GAAAA;AAAAA,MACN,KAAK;AACHJ,QAAAA,IAAMK,EAAQO,QACdX,IAAOI,EAAQJ;AACf;AAAA,MACF,KAAK;AACHD,QAAAA,IAAMK,EAAQO,QACdX,IAAOI,EAAQQ,QAAQR,EAAQS,QAAQ;AACvC;AAAA,MACF,KAAK;AACHd,QAAAA,IAAMK,EAAQO,QACdX,IAAOI,EAAQJ,OAAOI,EAAQS,QAAQ;AACtC;AAAA,MACF,KAAK;AACHd,QAAAA,IAAMK,EAAQL,MAAMK,EAAQU,SAAS,KACrCd,IAAOI,EAAQJ;AACf;AAAA,MACF,KAAK;AACHD,QAAAA,IAAMK,EAAQL,MAAMK,EAAQU,SAAS,KACrCd,IAAOI,EAAQQ,QAAQR,EAAQS,QAAQ;AACvC;AAAA,MACF,KAAK;AACHd,QAAAA,IAAMK,EAAQL,MAAMK,EAAQU,SAAS,KACrCd,IAAOI,EAAQJ,OAAOI,EAAQS,QAAQ;AACtC;AAAA,MACF;AACEd,QAAAA,IAAMK,EAAQO,QACdX,IAAOI,EAAQJ;AACf;AAAA,IAAA;AAIJ,UAAMe,IAAcnB,EAAkBM,SAASG,sBAAAA,GACzCW,IAAeD,GAAaF,SAAS,GACrCI,IAAgBF,GAAaD,UAAU;AAc7C,QAVId,IAAOgB,IAAeV,MAExBN,IAAOkB,KAAKC,IAAI,GAAGb,IAAgBU,CAAY,IAE7ChB,IAAO,MAETA,IAAO,IAILD,IAAMkB,IAAgBR,GAAgB;AAGxC,YAAMW,IAAahB,EAAQL,KACrBsB,IAAaZ,IAAiBL,EAAQO;AAE5C,MAAIS,KAAcH,KAAiBG,IAAaC,KAE9CtB,IAAMK,EAAQL,MAAMkB,GAEhBlB,IAAM,MACRA,IAAM,MAIRA,IAAMmB,KAAKC,IAAI,GAAGV,IAAiBQ,CAAa;AAAA,IAEpD;AACA,WAAIlB,IAAM,MAERA,IAAMK,EAAQO,QAEVZ,IAAMkB,IAAgBR,MACxBV,IAAMmB,KAAKC,IAAI,GAAGV,IAAiBQ,CAAa,KAI7C;AAAA,MAAElB,KAAAA;AAAAA,MAAKC,MAAAA;AAAAA,IAAAA;AAAAA,EAChB;AAEAsB,EAAAA,EAAU,MAAM;AAKd,QAJIzC,KACFA,EAAgBM,CAAc,GAG5BA,KAAkB,CAACH;AACrBuC,sBAASC,KAAKC,iBAAiB,SAASC,GAAe,EAAI,GAC3DC,EAAAA,GACO,MAAMJ,SAASC,KAAKI,oBAAoB,SAASF,GAAe,EAAI;AAC7E,QAAWvC,KAAkBH,GAAc;AACzCuC,eAASC,KAAKC,iBAAiB,SAASI,GAAkC,EAAI,GAC9EtB,OAAOkB,iBAAiB,UAAUI,CAAgC,GAClEtB,OAAOkB,iBAAiB,UAAUK,CAAwB;AAG1D,YAAMC,IAAWC,WAAW,MAAM;AAChC,cAAMxD,IAAWyB,EAA2BX,CAAe;AAC3D2C,QAAAA,EAAAA,GAEIzD,KACFsB,EAAkBtB,CAAQ;AAAA,MAE9B,GAAG,CAAC,GAGE0D,IAAWF,WAAW,MAAM;AAChC,cAAMxD,IAAWyB,EAA2BX,CAAe;AAC3D,QAAId,KACFsB,EAAkBtB,CAAQ;AAAA,MAE9B,GAAG,EAAE;AAEL,aAAO,MAAM;AACX+C,iBAASC,KAAKI,oBAAoB,SAASC,GAAkC,EAAI,GACjFtB,OAAOqB,oBAAoB,UAAUC,CAAgC,GACrEtB,OAAOqB,oBAAoB,UAAUE,CAAwB,GAC7DK,aAAaJ,CAAQ,GACrBI,aAAaD,CAAQ;AAAA,MACvB;AAAA,IACF;AAAA,EACF,GAAG,CAAC/C,GAAgBH,CAAY,CAAC;AAEjC,QAAMiD,IAAwBA,MAAM;AAClC,QAAI,CAACvC,EAAcQ,SAAS;AAC1BT,MAAAA,EAAuB,EAAK;AAC5B;AAAA,IACF;AAEA,UAAM2C,IAAM1C,EAAcQ,QAAQG,sBAAAA,GAC5BI,IAAiBF,OAAOG,aACxBJ,IAAgBC,OAAOC,YAEvB6B,IAAYD,EAAIrC,MAAMU,KAAkB2B,EAAIzB,SAAS,KAAKyB,EAAIpC,OAAOM,KAAiB8B,EAAIxB,QAAQ;AAExGnB,IAAAA,EAAuB4C,CAAS;AAAA,EAClC;AAEAf,EAAAA,EAAU,MAAM;AACdlC,IAAAA,EAAkBN,KAAiB,EAAK;AAAA,EAC1C,GAAG,CAACA,CAAa,CAAC,GAElBwC,EAAU,MAAM;AAEd,IAAInC,KAAkBS,EAAkBM,WACtC8B,WAAW,MAAM;AACf,YAAMM,IAAqB,CACzB,qBACA,mBACA,6BACA,0BACA,0BACA,WACA,iCAAiC,EACjCC,KAAK,IAAI,GACLC,IAAiB5C,EAAkBM,SAASuC,cAA2BH,CAAkB;AAC/F,MAAIE,KAAkBjB,SAASmB,kBAAkBhD,EAAcQ,WAC7DsC,EAAeG,MAAAA;AAAAA,IAEnB,GAAG,CAAC;AAAA,EAER,GAAG,CAACxD,CAAc,CAAC;AAGnB,QAAMwC,IAAuBA,MAAM;AACjC,QAAI,CAAC/B,EAAkBM,QAAS;AAEhC,UAAMa,IAAcnB,EAAkBM,QAAQG,sBAAAA,GACxCI,IAAiBF,OAAOG;AAE9B,IAAIK,GAAaJ,SAASF,IACxBlB,EACEf,EAASoE,SAAS,MAAM,IAAI,aAAapE,EAASoE,SAAS,OAAO,IAAI,cAAc,YACtF,IACS7B,GAAahB,MAAM,KAE5BR,EACEf,EAASoE,SAAS,MAAM,IAAI,gBAAgBpE,EAASoE,SAAS,OAAO,IAAI,iBAAiB,eAC5F;AAAA,EAEJ,GAEMlB,IAAgBA,CAACmB,MAAsB;AAC3C,UAAMC,IAAiBpD,EAAcQ;AACrC,QAAI,CAAC4C,EAAgB;AAErB,UAAMC,IAASF,EAAME,QACfC,IAAkBF,EAAeG,SAASF,CAAM,GAChDG,IAAmBtD,EAAkBM,SAAS+C,SAASF,CAAM,GAI7DI,IADiBJ,EACsBK,UAAU,4BAA4B;AAKnF,KAAK,CAACJ,KAAmB,CAACE,KAJKC,KAAyBA,MAA0BL,MAKhF1D,EAAkB,EAAK;AAAA,EAE3B,GAEMyC,IAAmCA,CAACgB,MAAiB;AACzD,UAAMC,IAAiBpD,EAAcQ,SAC/BmD,IAAoBzD,EAAkBM;AAC5C,QAAI,CAAC4C,EAAgB;AAIrB,QAHAb,EAAAA,GAGIY,EAAMS,SAAS,YAAYnE,GAAgB;AAC7C,YAAMX,IAAWyB,EAA2BX,CAAe;AAC3D,MAAId,KACFsB,EAAkBtB,CAAQ;AAAA,IAE9B;AAEA,UAAMuE,IAASF,EAAME,QACfC,IAAkBF,EAAeG,SAASF,CAAM,GAChDG,IAAmBG,GAAmBJ,SAASF,CAAM,GAIrDI,IADiBJ,EACsBK,UAAU,4BAA4B;AAKnF,KAAK,CAACJ,KAAmB,CAACE,KAJKC,KAAyBA,MAA0BL,MAKhF1D,EAAkB,EAAK;AAAA,EAE3B,GAEM0C,IAA2BA,MAAM;AACrC,QAAI3C,KAAkBH,KAAgBU,EAAcQ,SAAS;AAC3D+B,MAAAA,EAAAA;AACA,YAAMzD,IAAWyB,EAA2BX,CAAe;AAC3D,MAAId,KACFsB,EAAkBtB,CAAQ;AAAA,IAE9B;AAAA,EACF,GAEM+E,IAAgBA,MAAM;AAC1BnE,IAAAA,EAAmBD,CAAAA,MAAmB,CAACA,CAAc;AAAA,EACvD,GAEMqE,IAA2BA,CAACC,GAAwBC,MAAqC;AAC7F,QAAI,CAACA,EAAW;AAIhB,UAAMpB,IAAqB,CACzB,qBACA,mBACA,6BACA,0BACA,0BACA,WACA,yBACA,0BACA,4BACA,iCAAiC,EACjCC,KAAK,IAAI,GAELoB,IAAoBC,MAAMC,KAC9BH,EAAUI,iBAA8BxB,CAAkB,CAC5D,EAAEyB,OAAQC,CAAAA,MAAO;AAEf,YAAMC,IAAQ1D,OAAO2D,iBAAiBF,CAAE;AACxC,aACE,CAACA,EAAGG,aAAa,UAAU,KAC3B,CAACH,EAAGG,aAAa,eAAe,KAChCF,EAAMG,YAAY,UAClBH,EAAMI,eAAe,aACpBL,EAAGM,YAAY,KAAKN,EAAGG,aAAa,MAAM;AAAA,IAE/C,CAAC;AAED,QAAIR,EAAkBY,WAAW,EAAG;AAEpC,UAAMC,IAAeb,EAAkBc,UAAWT,CAAAA,MAAOA,MAAOzC,SAASmB,aAAa;AACtF,QAAIgC,IAAY;AAEhB,IAAIjB,EAAEkB,QAAQ,eACZlB,EAAEmB,eAAAA,GACFnB,EAAEoB,gBAAAA,GACFH,IAAYF,IAAeb,EAAkBY,SAAS,IAAIC,IAAe,IAAI,KACpEf,EAAEkB,QAAQ,aACnBlB,EAAEmB,eAAAA,GACFnB,EAAEoB,gBAAAA,GACFH,IAAYF,IAAe,IAAIA,IAAe,IAAIb,EAAkBY,SAAS,KACpEd,EAAEkB,QAAQ,UACnBlB,EAAEmB,eAAAA,GACFnB,EAAEoB,gBAAAA,GACFH,IAAY,KACHjB,EAAEkB,QAAQ,UACnBlB,EAAEmB,eAAAA,GACFnB,EAAEoB,gBAAAA,GACFH,IAAYf,EAAkBY,SAAS,IAGrCG,KAAa,KAAKf,EAAkBe,CAAS,IAC/Cf,EAAkBe,CAAS,EAAE/B,MAAAA,IACpB6B,MAAiB,MAAMb,EAAkBY,SAAS,KAE3DZ,EAAkB,CAAC,EAAEhB,MAAAA;AAAAA,EAEzB;AAEAmC,EAAAA,EAAoB5F,GAAK,OAAO;AAAA,IAAEqE,eAAAA;AAAAA,EAAAA,IAAkB,CAAA,CAAE;AAEtD,QAAMwB,IAAsB;AAAA,IAC1B,eAAe;AAAA,MAAE/E,MAAM;AAAA,MAAKD,KAAK;AAAA,IAAA;AAAA,IACjC,gBAAgB;AAAA,MAAEa,OAAO;AAAA,MAAKb,KAAK;AAAA,IAAA;AAAA,IACnC,iBAAiB;AAAA,MAAEC,MAAM;AAAA,MAAOgF,WAAW;AAAA,MAAoBjF,KAAK;AAAA,IAAA;AAAA,IACpE,YAAY;AAAA,MAAEC,MAAM;AAAA,MAAKW,QAAQ;AAAA,IAAA;AAAA,IACjC,aAAa;AAAA,MAAEC,OAAO;AAAA,MAAKD,QAAQ;AAAA,IAAA;AAAA,IACnC,cAAc;AAAA,MAAEX,MAAM;AAAA,MAAOgF,WAAW;AAAA,MAAoBrE,QAAQ;AAAA,IAAA;AAAA,EAAO,GAEvEsE,IAAwBhG,GAAOiG,WAAW,KAAK;AAErD,SACEC,gBAAAA,EAAAC,cAAA,OAAAC,EAAA;AAAA,IACE/G,WACE,uDACCA,EAAUiG,SAAS,IAAI,IAAIjG,CAAS,KAAK,OACzCa,IAAiB,UAAU,OAC3BJ,IAAW,uDAAuD;AAAA,IAErEG,KAAKQ;AAAAA,IACL4F,SAAU7B,CAAAA,MAAM;AACd,MAAI1E,MACJ0E,EAAEoB,gBAAAA,GACFtB,EAAAA;AAAAA,IACF;AAAA,IACAgC,WAAY9B,CAAAA,MAAM;AAChB,UAAI1E,CAAAA;AACJ,YAAI0E,EAAEkB,QAAQ,WAAWlB,EAAEkB,QAAQ,KAAK;AACtClB,YAAEmB,eAAAA,GACFnB,EAAEoB,gBAAAA;AACF,gBAAMW,IAAUrG;AAChBoE,UAAAA,EAAAA,GAEKiC,KACHxD,WAAW,MAAM;AACf,kBAAMyD,IAAa7F,EAAkBM;AACrC,gBAAIuF,GAAY;AACd,oBAAMnD,IAAqB,CACzB,qBACA,mBACA,6BACA,0BACA,0BACA,WACA,iCAAiC,EACjCC,KAAK,IAAI,GACLC,IAAiBiD,EAAWhD,cAA2BH,CAAkB;AAC/E,cAAIE,KACFA,EAAeG,MAAAA;AAAAA,YAEnB;AAAA,UACF,GAAG,CAAC;AAAA,QAER,WAAWc,EAAEkB,QAAQ,YAAYxF;AAC/BsE,YAAEmB,eAAAA,GACFnB,EAAEoB,gBAAAA,GACFzF,EAAkB,EAAK;AAAA,kBACbqE,EAAEkB,QAAQ,eAAelB,EAAEkB,QAAQ,cAAcxF,GAAgB;AAE3E,gBAAMsG,IAAa7F,EAAkBM;AACrC,UAAIuF,KACFjC,EAAyBC,GAAGgC,CAAU;AAAA,QAE1C,MAAA,CAAWhC,EAAEkB,QAAQ,eAAe,CAACxF,MAEnCsE,EAAEmB,eAAAA,GACFnB,EAAEoB,gBAAAA,GACFzF,EAAkB,EAAI,GACtB4C,WAAW,MAAM;AACf,gBAAMyD,IAAa7F,EAAkBM;AACrC,cAAIuF,GAAY;AACd,kBAAMnD,IAAqB,CACzB,qBACA,mBACA,6BACA,0BACA,0BACA,WACA,iCAAiC,EACjCC,KAAK,IAAI,GACLC,IAAiBiD,EAAWhD,cAA2BH,CAAkB;AAC/E,YAAIE,KACFA,EAAeG,MAAAA;AAAAA,UAEnB;AAAA,QACF,GAAG,CAAC;AAAA,IAER;AAAA,IACA+C,MAAK;AAAA,IACL,iBAAevG;AAAAA,IACf,iBAAc;AAAA,IACdmF,UAAUvF,IAAW,KAAK;AAAA,IAC1B,iBAAeA;AAAAA,IACf,sBAAoBR;AAAAA,EAAAA,GAChBU,CAAK,GAERL,EAAwB;AAAA,IAAEO,gBAAAA;AAAAA,IAAgBoE,eAAAA;AAAAA,EAAAA,CAAe,GAEzDpE,KAAkB,CAACH,KAClBmG,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACE9G,WAAW,4BAA4B2G,CAAqB,aAAavG,KAAgB,SAAS,WAAW,OAAO;AAAA,IACpHuF,OAAO;AAAA,MACL0B,aAAa;AAAA,MACbC,OAAO;AAAA,MACPC,iBAAiB;AAAA,MACjB,GAAGd,EAAoBzF,CAAe;AAAA,IAAA;AAAA,IAExCgG,SAAU7B,CAAAA,MAAMA,EAAEoB,gBAAAA;AAAAA,IAClBU,WAAY9B,CAAAA,MAAM;AAEhB,MAAIA,EAAEkB,QAAQ,YACZlB,EAAEmB,eAAAA,GACFnB,EAAEoB,gBAAAA,GACFzF,EAAkB,EAAK,GACvBM,EAAcQ,SAASyC,MAAAA,MACdc,EAAEkB,QAAQ,eAAelB,EAAEkB,QAAQ,aAAalB,EAAEkB,QAAQ,UAAUlB,EAAEkB,QAAQ,UAEvFnB,EAAyBC,GAAG7D,EAAkBM,OAAO;AAAA,IAEzD;AAAA,IACAwF,MAAK;AAAA,IACL,cAAW;AAAA,IACXxG,KAAKU;AAAAA,IACL,sBAAoBnB;AAAAA,EAAAA,GAEnBE,EAAsB;AAAA,IAAEmH,gBAAgBA,MAAM1G,EAAkB,EAAK;AAAA,EAAA,CAAG,CACtE,GAENJ,KACCG,KACAK,KACAuG,gBAAAA,EAASC,aACPb,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACE9G,WAAW,+BAA+B2G,CAAqB,IAAIvG,KAAgB,SAAS,WAAW,OAAO;AAAA,IAC9GuF,OAAO;AAAA,MACLzF,UAAU;AAAA,MACVuB,KAAKF,EAAeE;AAAAA,MACpBC,MAAMH,EAAeG;AAAAA,MACrBiG,QAAQ;AAAA,MACRN,aAAa;AAAA,MACbC,OAAO;AAAA,MACPC,iBAAiB;AAAA,IAAA;AAAA,IAEnBP,SAAU7B,CAAAA,MAAMA,EAAEoB,gBAAAA;AAAAA,IAClBU,WAAY9B,CAAAA,MAAM;AAEhB,MAAIA,EAAEkB,QAAQ,YACZlB,EAAEmB,eAAAA,GACFnB,EAAEoB,gBAAAA,GACFzF,EAAkB,EAAK,GACvBM,EAAcQ,SAASyC,MAAAA,MACdc,EAAEkB,QAAQ,eAAelB,EAAEkB,QAAQ,aAAalB,EAAEkB,QAAQ,UAAUlB,EAAEkB,QAAQ,UAEvFnB,EAAyBC,GAAG7D,EAAkBM,OAAO;AAAA,IAEzD;AAAA,IACAwF,MAAK;AAAA,IACL,cAAW;AAAA,IACXxG,KAAKU;AAAAA,IACL,sBAAoBnB;AAAAA,EAAAA,GAEnBE,EAAsB;AAAA,IAAEmH,gBAAgBA,MAAM1G,EAAkB,EAAK;AAAA,EAAA,CAAG,CACtE,GACLmC,SAASC,IACX,CACC;AAET,CACF;"}
+{"version":3,"file":"index17.js","sources":["../src/components/Popover/index.tsx"],"sourcesContent":["import React, { useState, useRef, ReactNode, useEffect, forwardRef, ForwardedRef, useImperativeHandle } from 'react';\nimport ReactDOM from 'react-dom';\n\nexport interface PopoverHandle {\n  togglePopover: () => void;\n}\n\nexport interface PopoverProps {\n  className?: string;\n  automationId?: string;\n  popoverContentAutomationId?: string;\n  renderPopoverContents: (props: { closePopoverCb: () => void }) => ReactNode;\n  renderPopoverSrcElement: (props: { displayPopover: boolean; togglePopover: () => void }) => ReactNode;\n  position?: 'bottom-center' | 'bottom-left' | 'bottom-right' | 'top-center' | 'top-left' | 'top-right';\n  onPopoverToggle?: (displayPopover: boolean) => void;\n  contentWidth?: 'full' | 'max';\n  isPopoverOpen?: boolean;\n  disabled?: boolean;\n  isWithPortal?: boolean;\n  noBorder?: boolean;\n  ariaLabel?: string;\n  sourceRole?: 'button' | 'combobox';\n}\n\nexport const Popover = forwardRef<PopoverHandle, PopoverProps>(\n  (\n    {\n      className = '',\n      automationId = '',\n      position = 'bottom-center',\n      popoverContentAutomationId = '',\n      contentWidth = 'max',\n      renderPopoverContents,\n      renderPopoverSrcElement,\n      onPopoverToggle,\n      isPopoverOpen,\n      disabled = false,\n      isWithPortal = false,\n      ariaLabel,\n      sourceRole = 'button',\n      ...props\n    },\n    ref: ForwardedRef<PopoverHandle>\n  ) => {\n    const [displayPopover, setDisplayPopover] = useState(false);\n    const [popoverPosition, setPopoverPosition] = useState(position);\n    const [isSrcElementVisible, setIsSrcElementVisible] = useState(false);\n    const srcElementRef = useRef<HTMLDivElement>(null);\n    const popoverContentRef = useRef<HTMLDivElement>(null);\n\n    const [portalPosition, setPortalPosition] = useState({ top: 0, left: 0 });\n\n    const calculatePositionOfPopover = (position: string = 'bottom-center') => {\n      if (!srcElementRef.current) return { top: 0, left: 0 };\n\n      let localPosition = position;\n\n      const srcRect = srcElementRef.current.getBoundingClientRect();\n      const viewportWidth = window.innerWidth;\n      const viewportHeight = window.innerHeight;\n\n      // Calculate position for portal\n      let top = 0;\n      let left = 0;\n\n      switch (localPosition) {\n        case 'bottom-left':\n          top = srcRect.bottom;\n          left = srcRect.left;\n          break;\n        case 'bottom-right':\n          top = srcRect.bottom;\n          left = srcRect.right - srcRect.width * 0.5;\n          break;\n        case 'bottom-center':\n          top = srcRect.bottom;\n          left = srcRect.left + srcRect.width * 0.15;\n          break;\n        case 'top-left':\n          top = srcRect.top - srcRect.height * 1.9;\n          left = srcRect.left;\n          break;\n        case 'top-right':\n          top = srcRect.top - srcRect.height * 1.9;\n          left = srcRect.right - srcRect.width * 0.5;\n          break;\n        case 'top-center':\n          top = srcRect.top - srcRect.height * 1.9;\n          left = srcRect.left + srcRect.width * 0.15;\n          break;\n        default:\n          top = srcRect.bottom;\n          left = srcRect.left;\n          break;\n      }\n\n      // Get popover dimensions if available\n      const popoverRect = popoverContentRef.current?.getBoundingClientRect();\n      const popoverWidth = popoverRect?.width || 0;\n      const popoverHeight = popoverRect?.height || 0;\n\n      // Adjust position to keep popover within viewport bounds\n      // Horizontal adjustments\n      if (left + popoverWidth > viewportWidth) {\n        // Popover extends beyond right edge, shift it left\n        left = Math.max(0, viewportWidth - popoverWidth);\n      }\n      if (left < 0) {\n        // Popover extends beyond left edge, shift it right\n        left = 0;\n      }\n\n      // Vertical adjustments\n      if (top + popoverHeight > viewportHeight) {\n        // Popover extends beyond bottom edge\n        // Try to position it above the source element\n        const spaceAbove = srcRect.top;\n        const spaceBelow = viewportHeight - srcRect.bottom;\n        \n        if (spaceAbove >= popoverHeight || spaceAbove > spaceBelow) {\n          // Position above if there's enough space or more space above\n          top = srcRect.top - popoverHeight;\n          // Ensure it doesn't go above viewport\n          if (top < 0) {\n            top = 0;\n          }\n        } else {\n          // Keep at bottom but adjust to fit within viewport\n          top = Math.max(0, viewportHeight - popoverHeight);\n        }\n      }\n      if (top < 0) {\n        // Popover extends beyond top edge, position it below the source element\n        top = srcRect.bottom;\n        // Ensure it doesn't go below viewport\n        if (top + popoverHeight > viewportHeight) {\n          top = Math.max(0, viewportHeight - popoverHeight);\n        }\n      }\n\n      return { top, left };\n    };\n  \n    useEffect(() => {\n      if (onPopoverToggle) {\n        onPopoverToggle(displayPopover);\n      }\n\n      if (displayPopover && !isWithPortal) {\n        document.body.addEventListener('click', clickListener, true);\n        checkPopoverPosition();\n        return () => document.body.removeEventListener('click', clickListener, true);\n      } else if (displayPopover && isWithPortal) {\n        document.body.addEventListener('click', clickAndScrollListenerWithPortal, true);\n        window.addEventListener('scroll', clickAndScrollListenerWithPortal);\n        window.addEventListener('resize', resizeListenerWithPortal);\n\n        // Initial position calculation\n        const timeout1 = setTimeout(() => {\n          const position = calculatePositionOfPopover(popoverPosition);\n          checkSourceVisibility();\n          \n          if (position) {\n            setPortalPosition(position);\n          }\n        }, 0);\n\n        // Recalculate after popover is rendered to get accurate dimensions\n        const timeout2 = setTimeout(() => {\n          const position = calculatePositionOfPopover(popoverPosition);\n          if (position) {\n            setPortalPosition(position);\n          }\n        }, 10);\n\n        return () => {\n          document.body.removeEventListener('click', clickAndScrollListenerWithPortal, true);\n          window.removeEventListener('scroll', clickAndScrollListenerWithPortal);\n          window.removeEventListener('resize', resizeListenerWithPortal);\n          clearTimeout(timeout1);\n          clearTimeout(timeout2);\n        };\n      }\n    }, [displayPopover, isWithPortal]);\n\n    const checkSourceVisibility = () => {\n      if (!srcElementRef.current) {\n        setIsSrcElementVisible(false);\n        return;\n      }\n\n      const rec = srcElementRef.current.getBoundingClientRect();\n      const viewportHeight = window.innerHeight;\n      const viewportWidth = window.innerWidth;\n\n      const isVisible = rec.top < viewportHeight && rec.bottom > 0 && rec.left < viewportWidth && rec.right > 0;\n\n      setIsSrcElementVisible(isVisible);\n    };\n\n    useEffect(() => {\n      setDisplayPopover(isPopoverOpen ?? false);\n    }, [isPopoverOpen]);\n\n    useEffect(() => {\n      // Focus first focusable element when popover opens\n      if (displayPopover && popoverContentRef.current) {\n        setTimeout(() => {\n          const focusableSelectors = [\n            '[role=\"menuitem\"]',\n            '[role=\"option\"]',\n            '[role=\"menuitemcheckbox\"]',\n            '[role=\"menuitemradio\"]',\n            'button:not([disabled])',\n            'a[href]',\n            '[tabindex]:not([tabindex=\"-1\"])'\n          ].join(', ');\n          const firstFocusable = popoverContentRef.current?.querySelector<HTMLElement>(focusableSelectors);\n          if (firstFocusable && document.activeElement === srcElementRef.current) {\n            firstFocusable.focus();\n          }\n        }, 0);\n      }\n    }, [displayPopover]);\n\n    //Function to check popover position\n    const checkPopoverPosition = () => {\n      if (!popoverContentRef.current) return;\n\n      const popoverRect = popoverContentRef.current.getBoundingClientRect();\n      const viewportHeight = window.innerHeight;\n\n      if (popoverRect?.bottom > viewportHeight) {\n        setPopoverPosition(\n          position.includes('left') ? 'top-left' : position.includes('right') ? 'top-right' : 'top-center'\n        );\n      } else if (popoverRect?.top < 0) {\n        // If popover extends beyond top of viewport, switch to bottom position\n        setPopoverPosition(\n          position.includes('left') ? 'bottom-left' : position.includes('right') ? 'bottom-right' : 'bottom-center'\n        );\n      }\n    };\n\n    const clickListener = (event: MouseEvent) => {\n      const currentDropRef = srcElementRef.current;\n      if (!currentDropRef) return;\n\n      const target = event.target as Node;\n      const isSourcePopover = currentDropRef.contains(target);\n      const isPopoverContent = popoverContentRef.current?.contains(target);\n      \n      // Check if click is on another popover's source element\n      const clickedElement = target as HTMLElement;\n      const closestPopoverWrapper = clickedElement.closest?.('.se-design-popover-wrapper');\n      const isAnotherPopoverSource = closestPopoverWrapper && closestPopoverWrapper !== currentDropRef;\n      \n      // if clicked source is parent or the popover-content, do not toggle dropdown.\n      // Also close if clicking on another popover's source element\n      if ((!isSourcePopover && !isPopoverContent) || isAnotherPopoverSource) {\n        setDisplayPopover(false);\n      }\n    };\n\n    const clickAndScrollListenerWithPortal = (event: Event) => {\n      const currentDropRef = srcElementRef.current;\n      const currentPopoverRef = popoverContentRef.current;\n      if (!currentDropRef) return;\n      checkSourceVisibility();\n\n      // Recalculate position on scroll\n      if (event.type === 'scroll' && displayPopover) {\n        const position = calculatePositionOfPopover(popoverPosition);\n        if (position) {\n          setPortalPosition(position);\n        }\n      }\n\n      const target = event.target as Node;\n      const isSourcePopover = currentDropRef.contains(target);\n      const isPopoverContent = currentPopoverRef?.contains(target);\n      \n      // Check if click is on another popover's source element\n      const clickedElement = target as HTMLElement;\n      const closestPopoverWrapper = clickedElement.closest?.('.se-design-popover-wrapper');\n      const isAnotherPopoverSource = closestPopoverWrapper && closestPopoverWrapper !== currentDropRef;\n\n      // if clicked source is parent or the popover-content, do not toggle dropdown.\n      // Also close if clicking on another popover's source element\n      if ((!isSourcePopover && !isPopoverContent) || isAnotherPopoverSource) {\n        setDisplayPopover(false);\n      }\n    };\n\n    const resizeListenerWithPortal = () => {\n      if (displayPopover && isWithPortal && srcElementRef.current) {\n        checkSourceVisibility();\n        const position = calculatePositionOfPopover(popoverPosition);\n        if (position) {\n          setPortalPosition(position);\n        }\n      }\n    };\n\n    const togglePopover = () => {\n      setDisplayPopover((displayPopover) => !displayPopover);\n    };\n\n    const handleArrowKeyNavigation = (e: React.KeyboardEvent, container: HTMLDivElement | null) => {\n      if (!container) return;\n\n      // Find all focusable elements within the popover content\n      // This includes elements with role=\"menuitem\", role=\"option\", tabIndex >= 0, etc.\n      const focusableSelectors = [\n        '[role=\"menuitem\"]',\n        '[role=\"option\"]',\n        '[role=\"menuitemcheckbox\"]',\n        '[role=\"menuitemradio\"]',\n        'button:not([disabled])',\n        'a[href]',\n        'input:not([disabled])',\n        'select:not([disabled])',\n        'textarea:not([disabled])',\n        '[tabindex]:not([tabindex=\"-1\"])'\n      ].join(', ');\n\n      const focusableElements = Array.from(\n        container.querySelectorAll<HTMLElement>(focusableSelectors)\n      ).filter((el) => {\n        // Filter out disabled and hidden elements\n        const style = window.getComputedStyle(el);\n        return (\n          !el.hasAttribute('disabled') &&\n          !el.hasAttribute('aria-disabled') &&\n          style.display !== 'none' &&\n          style.visibility !== 'hidden' &&\n          (el.tabIndex >= 0 || el.hasAttribute('role'))\n        );\n      });\n\n      if (focusableElements.length === 0) return;\n\n      const currentIndex = focusableElements.findIndex((el) => el === document.activeElement);\n      let nextIndex = -1;\n\n      if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        e.stopPropagation();\n        nextIndex = currentIndex < focusableElements.length - 1 ? currentIndex + 1 : 0;\n      } else if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        e.stopPropagation();\n        nextIndex = currentIndex > 0 ? currentIndex - 1 : focusableElements.length - 1;\n      } else if (e.key === 'Home') {\n        e.preventDefault();\n        e.stopPropagation();\n        nextIndex = 0;\n      } else if (e.key === 'End') {\n        e.preventDefault();\n        e.stopPropagation();\n        nextIndex = focusableElements.length - 1;\n      }\n\n      if (nextIndex >= 0 && focusableElements[nextIndex]) {\n        focusableElements[nextIndex].focus();\n      } else if (currentIndex === -1 && focusableElements.length > 0) {\n        // If no element is currently focused, focus the first one\n        focusableElements[0].focus();\n      }\n    };\n\n    useImperativeHandle(ref, () => ({ togglePopover }), []);\n\n    const popoverContentStyle = {\n      'bottom-left': { left: '0', top: '100%' },\n      'bottom-right': { right: '0', top: '100%' },\n      'bottom-center': { left: '50%', transform: 'translateX(-50%)', top: '100%' },\n      'top-left': { left: '0', bottom: '100%' },\n      'top-right': { right: '0', bottom: '100%' },\n      'top-center': { left: '50%', transform: 'translateX(-50%)', bottom: '100%' }\n    };\n    const popoverContentClasses = props?.noBorder ? '' : 'shadow-md border rounded-md';\n\n    return (\n      <div\n        className={\n          'se-design-popover-wrapper cursor-pointer relative' +\n          (className.length > 0 ? ` ${className}` : '') +\n          (displayPopover ? ' open' : '') +\n          (disabled ? ' opacity-50 cursor-not-allowed pointer-events-none' : '')\n        }\n        ref={srcElementRef}\n        onClick={(e) => {\n          if (disabled) return;\n          e.stopPropagation();\n          togglePopover();\n        }}\n        onKeyDown={(e) => {\n          if (disabled) return;\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            e.stopPropagation();\n            const wasOpen = displayPopover;\n            togglePopover();\n            // Focus first focusable element when opening\n            if (!wasOpen) {\n              setTimeout(() => {\n                const currentRef = popoverContentRef.current;\n                if (currentRef) {\n                  const focusableSelectors = [\n                    '[role=\"menuitem\"]',\n                    '[role=\"option\"]',\n                    '[role=\"menuitemcheckbox\"]',\n                    '[role=\"menuitemradio\"]',\n                    'button:not([disabled])',\n                    'a[href]',\n                    '[tabindex]:not([tabindex=\"-1\"])'\n                  ].join(', ');\n                  const firstFocusable = currentRef.querySelector<HTMLElement>(focusableSelectors);\n                  if (firstFocusable) {\n                    firstFocusable.focus();\n                  }\n                }\n              }, 0);\n            }\n          } else if (e.key === 'Escape' && displayPopover) {\n            e.preventDefault();\n            e.stopPropagation();\n            setDisplayPopover(false);\n          } else if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && displayPopover) {\n            // Handle arrow keys when popover is open\n            const currentRef = popoverContentRef.current;\n            if (currentRef) {\n              handleArrowKeyNavigation(e, currentRef);\n            }\n          } else if (e.key === 'ArrowDown' && !displayPopover) {\n            // Open popover and focus first item when ArrowDown is pressed\n            e.preventDefault();\n            e.stopPropagation();\n            setDisplayPopover(true);\n            setTimeout(() => {\n              const currentRef = popoverContentRef.current;\n              if (currentRef) {\n                const focusableSelectors = [\n                  '[role=\"menuitem\"]',\n                  '[role=\"option\"]',\n                  '[role=\"menuitemcheckbox\"]',\n                  '[role=\"menuitemradio\"]',\n                  'button:not([disabled])',\n                  'a[href]',\n                  '[tabindex]:not([tabindex=\"-1\"])'\n                ].join(', ');\n                const firstFocusable = currentRef.querySelector<HTMLElement>(focusableSelectors);\n                if (firstFocusable) {\n                  firstFocusable.focus();\n                }\n              }\n            }, 0);\n          }\n        }}\n        role={sourceRole}\n        aria-expanded={displayPopover ? 'true' : 'false'}\n        aria-haspopup=\"true\"\n        tabIndex={0}\n        aria-disabled={disabled ? 'true' : 'false'}\n        aria-label={ariaLabel}\n        data-automation-id={automationId}\n        {...props}\n      >\n        {renderPopoverSrcElement({ displayPopover, togglePopover })}\n\n        {displayPopover && !isWithPortal && (\n          <div\n            className={`popover-content absolute ${popoverContentClasses} z-[1000] ${contentWidth == 'full' ? 'w-full' : 'w-max'}`}\n            style={{\n              borderColor: 'var(--color-gray-200)',\n              color: 'var(--color-gray-900)',\n              backgroundColor: 'var(--color-white)',\n              ...popoverContentStyle[popoverPosition]\n            }}\n            onClick={(e) => e.stopPropagation()}\n            onKeyDown={(e) => {\n              // Allow Escape key to close popover when focus is on content\n              if (e.key === 'Escape') {\n                e.preventDefault();\n                e.stopPropagation();\n                setDisplayPopover(false);\n                srcElementRef.current?.focus();\n              } else if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Home' || e.key === 'End') {\n                // Handle arrow key navigation for focusable elements inside popover\n                handleArrowKeyNavigation(e, popoverContentRef.current);\n              }\n            }}\n            role=\"dialog\"\n            aria-modal=\"false\"\n            ref={popoverContentRef}\n            data-automation-id={popoverContentAutomationId}\n          >\n            {renderPopoverContents({ closePopoverCb: () => setDisplayPopover(false) })}\n          </div>\n        )}\n        {isWithPortal &&\n          displayPopover &&\n          isSrcElementVisible &&\n          ReactDOM.createPortal(\n            <div\n              className={`popover-content-with-portal ${popoverContentClasses} ${contentWidth == 'full' ? 'w-full' : 'w-max'}`}\n              style={{\n                position: 'fixed',\n                top: portalPosition.top,\n                left: portalPosition.left,\n                zIndex: 1000,\n                borderColor: 'var(--color-gray-200)',\n                color: 'var(--color-gray-900)',\n                backgroundColor: 'var(--color-white)'\n              }}\n              onClick={(e) => e.stopPropagation()}\n              onKeyDown={(e) => {\n                // Allow Escape key to close popover when focus is on content\n                if (e.key === 'Escape') {\n                  e.preventDefault();\n                  e.stopPropagation();\n                  setDisplayPopover(false);\n                  srcElementRef.current?.focus();\n                } else if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Home' || e.key === 'End') {\n                  // Handle arrow key navigation for focusable elements inside popover\n                  handleArrowKeyNavigation(e, popoverContentRef.current);\n                }\n              }}\n              role=\"dialog\"\n              aria-modal=\"false\"\n              ref={popoverContentRef}\n              data-automation-id={popoverContentAutomationId}\n            >\n              {renderPopoverContents({ closePopoverCb: () => setDisplayPopover(false) })}\n            </div>,\n            document.body\n          )}\n      </div>\n    );\n  }\n);\n\n"],"names":["Popover","className","automationId","position","popoverContentAutomationId","contentWidth","renderPopoverContents","renderPopoverSrcElement","onPopoverToggle","isPopoverOpen","disabled","isWithPortal","ariaLabel","sourceRole","props","ref","displayPopover","setDisplayPopover","useState","popoverPosition","setPopoverPosition","isSrcElementVisible","setIsSrcElementVisible","srcElementRef","useRef","popoverContentRef","portalPosition","setPortalPosition","top","left","calculatePositionOfPopover","current","localPosition","srcRect","getBoundingClientRect","viewportWidth","window","innerWidth","viewportHeight","innerHeight","bottom","right","width","height","popoverRect","popoverWidth","popoverHeight","Math","max","spaceAbove","spaceBelow","useEffect","document","body","addEventListener","clickListener","checkPopoverPosition","removeEventListener","clickAndScrollListenerWithPortal","resizeListenerWithPortal","timeout1","setTimeout","checkSourceVisibility","timeout2","clearTimeout","rec","isVisible","focusableSelectors","join","firstFocusable","querySelector","activeElement","focus","includes","event","currentDropRef","target","isSourcePopover","contains","isPopoverContent","closestPopoverWrapper","closest","currentPopoverRef","type","togglePopover","handleArrowKeyNavigation","e","container","focusableElements","Array","from","querySelectorAll","filter","el","style","getComputedStyle","hasAttribute","display","visibility","tabIndex","length","currentIndex","findIndex","nextIndex","key","preventDefault","stopPropagation","useImperativeHandle","popoverContentStyle","transform","popoverContentClasses","noBorder","React","createElement","_extends","onClick","onKeyDown","wasOpen","currentRef","role","borderColor","color","backgroundColor","closePopoverCb","ReactDOM","createPortal","zIndex"],"mappings":";;;;;;;;;;;AAwBO,MAAMA,uBACX,CACE;AAAA,EACEC,WAAAA,IAAY;AAAA,EACZC,cAAAA,IAAe;AAAA,EACfC,UAAAA,IAAW;AAAA,EACXC,4BAAAA,IAA6B;AAAA,EAC7BC,cAAAA,IAAe;AAAA,EACfC,uBAAAA;AAAAA,EACAC,yBAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACAC,UAAAA,IAAW;AAAA,EACXC,cAAAA,IAAe;AAAA,EACfC,WAAAA;AAAAA,EACAC,YAAAA,IAAa;AAAA,EACb,GAAGC;AACL,GACAC,MACG;AACH,QAAM,CAACC,GAAgBC,CAAiB,IAAIC,EAAS,EAAK,GACpD,CAACC,GAAiBC,CAAkB,IAAIF,EAASf,CAAQ,GACzD,CAACkB,GAAqBC,CAAsB,IAAIJ,EAAS,EAAK,GAC9DK,IAAgBC,EAAuB,IAAI,GAC3CC,IAAoBD,EAAuB,IAAI,GAE/C,CAACE,GAAgBC,CAAiB,IAAIT,EAAS;AAAA,IAAEU,KAAK;AAAA,IAAGC,MAAM;AAAA,EAAA,CAAG,GAElEC,IAA6BA,CAAC3B,IAAmB,oBAAoB;AACzE,QAAI,CAACoB,EAAcQ,QAAS,QAAO;AAAA,MAAEH,KAAK;AAAA,MAAGC,MAAM;AAAA,IAAA;AAEnD,QAAIG,IAAgB7B;AAEpB,UAAM8B,IAAUV,EAAcQ,QAAQG,sBAAAA,GAChCC,IAAgBC,OAAOC,YACvBC,IAAiBF,OAAOG;AAG9B,QAAIX,IAAM,GACNC,IAAO;AAEX,YAAQG,GAAAA;AAAAA,MACN,KAAK;AACHJ,QAAAA,IAAMK,EAAQO,QACdX,IAAOI,EAAQJ;AACf;AAAA,MACF,KAAK;AACHD,QAAAA,IAAMK,EAAQO,QACdX,IAAOI,EAAQQ,QAAQR,EAAQS,QAAQ;AACvC;AAAA,MACF,KAAK;AACHd,QAAAA,IAAMK,EAAQO,QACdX,IAAOI,EAAQJ,OAAOI,EAAQS,QAAQ;AACtC;AAAA,MACF,KAAK;AACHd,QAAAA,IAAMK,EAAQL,MAAMK,EAAQU,SAAS,KACrCd,IAAOI,EAAQJ;AACf;AAAA,MACF,KAAK;AACHD,QAAAA,IAAMK,EAAQL,MAAMK,EAAQU,SAAS,KACrCd,IAAOI,EAAQQ,QAAQR,EAAQS,QAAQ;AACvC;AAAA,MACF,KAAK;AACHd,QAAAA,IAAMK,EAAQL,MAAMK,EAAQU,SAAS,KACrCd,IAAOI,EAAQJ,OAAOI,EAAQS,QAAQ;AACtC;AAAA,MACF;AACEd,QAAAA,IAAMK,EAAQO,QACdX,IAAOI,EAAQJ;AACf;AAAA,IAAA;AAIJ,UAAMe,IAAcnB,EAAkBM,SAASG,sBAAAA,GACzCW,IAAeD,GAAaF,SAAS,GACrCI,IAAgBF,GAAaD,UAAU;AAc7C,QAVId,IAAOgB,IAAeV,MAExBN,IAAOkB,KAAKC,IAAI,GAAGb,IAAgBU,CAAY,IAE7ChB,IAAO,MAETA,IAAO,IAILD,IAAMkB,IAAgBR,GAAgB;AAGxC,YAAMW,IAAahB,EAAQL,KACrBsB,IAAaZ,IAAiBL,EAAQO;AAE5C,MAAIS,KAAcH,KAAiBG,IAAaC,KAE9CtB,IAAMK,EAAQL,MAAMkB,GAEhBlB,IAAM,MACRA,IAAM,MAIRA,IAAMmB,KAAKC,IAAI,GAAGV,IAAiBQ,CAAa;AAAA,IAEpD;AACA,WAAIlB,IAAM,MAERA,IAAMK,EAAQO,QAEVZ,IAAMkB,IAAgBR,MACxBV,IAAMmB,KAAKC,IAAI,GAAGV,IAAiBQ,CAAa,KAI7C;AAAA,MAAElB,KAAAA;AAAAA,MAAKC,MAAAA;AAAAA,IAAAA;AAAAA,EAChB;AAEAsB,EAAAA,EAAU,MAAM;AAKd,QAJI3C,KACFA,EAAgBQ,CAAc,GAG5BA,KAAkB,CAACL;AACrByC,sBAASC,KAAKC,iBAAiB,SAASC,GAAe,EAAI,GAC3DC,EAAAA,GACO,MAAMJ,SAASC,KAAKI,oBAAoB,SAASF,GAAe,EAAI;AAC7E,QAAWvC,KAAkBL,GAAc;AACzCyC,eAASC,KAAKC,iBAAiB,SAASI,GAAkC,EAAI,GAC9EtB,OAAOkB,iBAAiB,UAAUI,CAAgC,GAClEtB,OAAOkB,iBAAiB,UAAUK,CAAwB;AAG1D,YAAMC,IAAWC,WAAW,MAAM;AAChC,cAAM1D,IAAW2B,EAA2BX,CAAe;AAC3D2C,QAAAA,EAAAA,GAEI3D,KACFwB,EAAkBxB,CAAQ;AAAA,MAE9B,GAAG,CAAC,GAGE4D,IAAWF,WAAW,MAAM;AAChC,cAAM1D,IAAW2B,EAA2BX,CAAe;AAC3D,QAAIhB,KACFwB,EAAkBxB,CAAQ;AAAA,MAE9B,GAAG,EAAE;AAEL,aAAO,MAAM;AACXiD,iBAASC,KAAKI,oBAAoB,SAASC,GAAkC,EAAI,GACjFtB,OAAOqB,oBAAoB,UAAUC,CAAgC,GACrEtB,OAAOqB,oBAAoB,UAAUE,CAAwB,GAC7DK,aAAaJ,CAAQ,GACrBI,aAAaD,CAAQ;AAAA,MACvB;AAAA,IACF;AAAA,EACF,GAAG,CAAC/C,GAAgBL,CAAY,CAAC;AAEjC,QAAMmD,IAAwBA,MAAM;AAClC,QAAI,CAACvC,EAAcQ,SAAS;AAC1BT,MAAAA,EAAuB,EAAK;AAC5B;AAAA,IACF;AAEA,UAAM2C,IAAM1C,EAAcQ,QAAQG,sBAAAA,GAC5BI,IAAiBF,OAAOG,aACxBJ,IAAgBC,OAAOC,YAEvB6B,IAAYD,EAAIrC,MAAMU,KAAkB2B,EAAIzB,SAAS,KAAKyB,EAAIpC,OAAOM,KAAiB8B,EAAIxB,QAAQ;AAExGnB,IAAAA,EAAuB4C,CAAS;AAAA,EAClC;AAEAf,EAAAA,EAAU,MAAM;AACdlC,IAAAA,EAAkBR,KAAiB,EAAK;AAAA,EAC1C,GAAG,CAACA,CAAa,CAAC,GAElB0C,EAAU,MAAM;AAEd,IAAInC,KAAkBS,EAAkBM,WACtC8B,WAAW,MAAM;AACf,YAAMM,IAAqB,CACzB,qBACA,mBACA,6BACA,0BACA,0BACA,WACA,iCAAiC,EACjCC,KAAK,IAAI,GACLC,IAAiB5C,EAAkBM,SAASuC,cAA2BH,CAAkB;AAC/F,MAAIE,KAAkBjB,SAASmB,kBAAkBhD,EAAcQ,WAC7DsC,EAAeG,MAAAA;AAAAA,IAEnB,GAAG,CAAC;AAAA,EAER,GAAG,CAACxD,CAAc,CAAC;AAGnB,QAAMwC,IAAuBA,MAAM;AACjC,QAAI,CAAC/B,EAAkBM,QAAS;AAEhC,UAAMa,IAAcnB,EAAkBM,QAAQG,sBAAAA,GACxCI,IAAiBF,OAAOG;AAE9B,IAAIK,GAAaJ,SAASF,IACxBlB,EACEjB,EAASsE,SAAS,MAAM,IAAI,aAAatE,EAASsE,SAAS,OAAO,IAAI,cAAc,YACtF,IACS7B,GAAahB,MAAM,KAE5BR,EACEjB,EAASsE,SAAS,MAAM,IAAI,gBAAgBtE,EAASsE,SAAS,OAAO,IAAI,iBAAiB,eAC5F;AAAA,EAEJ,GAEMlB,IAAgBA,CAACmB,MAAsB;AAC3C,UAAMC,IAAiBpD,EAAcQ;AACrC,QAAI,CAAC4C,EAAgB;AAErB,UAAMC,IAASF,EAAME,QACfC,IAAkBF,EAAeG,SAASF,CAAM,GAChDG,IAAmBtD,EAAkBM,SAAS+C,SAASF,CAAM,GAI7DI,IADiBJ,EACsBK,UAAU,4BAA4B;AAKnF,KAAK,CAACJ,KAAmB,CAACE,KAJKC,KAAyBA,MAA0BL,MAKhF1D,EAAkB,EAAK;AAAA,EAE3B,GAEMyC,IAAmCA,CAACgB,MAAiB;AACzD,UAAMC,IAAiBpD,EAAcQ,SAC/BmD,IAAoBzD,EAAkBM;AAC5C,QAAI,CAAC4C,EAAgB;AAIrB,QAHAb,EAAAA,GAGIY,EAAMS,SAAS,YAAYnE,GAAgB;AAC7C,YAAMb,IAAW2B,EAA2BX,CAAe;AAC3D,MAAIhB,KACFwB,EAAkBxB,CAAQ;AAAA,IAE9B;AAEA,UAAMyE,IAASF,EAAME,QACfC,IAAkBF,EAAeG,SAASF,CAAM,GAChDG,IAAmBG,GAAmBJ,SAASF,CAAM,GAIrDI,IADiBJ,EACsBK,UAAU,4BAA4B;AAKnF,KAAK,CAACJ,KAAmB,CAACE,KAJKC,KAAyBA,MAA0BL,MAKhF1D,EAAkB,EAAK;AAAA,EAE3B,GAEM0C,IAA2BA,MAAM;AACrC,QAAI3C,KAAkBL,KAAgBY,EAAcQ,SAAS;AAC3D+B,MAAAA,EAAAA;AACA,YAAM3D,IAAW2B,EAA2BX,CAAe;AAC3D,MAAIhB,KACFwB,EAAkBxB,CAAQ;AAAA,IAE9B;AAAA,EACF,GAEMiF,IAAgBA,MAAM;AAC1BnE,IAAAA,EAAmBD,CAAAA,MAAmB,CAACA,CAAc;AAAA,EACvD,GAEMqE,IAA2BA,CAACC,GAAwBC,MAAqC;AAC7F,QAAI,CAACA,EAAW;AAIhB,UAAMpB,IAAqB,CACzB,qBACA,mBACA,6BACA,0BACA,0BACA,WACA,yBACA,0BACA,4BACA,iCAAiC,EACjCC,KAAK,IAAI,GAELoB,IAAoBC,MAAMC,KAC9BH,EAAUI,iBAA8BxB,CAAkB,CAC5D,EAAEyB,OAAQC,CAAAA,MAAO;AAEf,YAAMC,IAAQ1D,OAAO2D,iBAAiBF,CAAE;AACxC,aACE,CAACA,EAAGG,aAAa,UAAU,KAC3B,CAACH,EAAGG,aAAa,eAAe,KAChCF,EAAMG,YAAY,UAClBH,EAAMI,eAAe,aACpBL,EAAGM,YAAY,KAAKN,EAAGG,aAAa,MAAM;AAAA,IAE/C,CAAC;AAED,QAAIR,EAAkBY,WAAW,EAAG;AAEpC,UAAMC,IAAeb,EAAkBc,UAAWT,CAAAA,MAAOA,MAAOzC,SAASmB,aAAa;AACtF,QAAIgC,IAAY;AAEhB,IAAIjB,EAAEkB,QAAQ,eACZlB,EAAEmB,eAAAA,GACFnB,EAAEoB,gBAAAA,GACFH,IAAYF,IAAeb,EAAkBY,SAAS,IAAIC,IAAe,IAAI,KACpEf,EAAEkB,QAAQ,aACnBlB,EAAEmB,eAAAA,GACFnB,EAAEoB,gBAAAA,GACFH,IAAYF,IAAe,IAAIA,IAAe,IAAIb,EAAkBY,SAAS,KACpEd,EAAEkB,QAAQ,UACnBlB,EAAEmB,eAAAA,GACFnB,EAAEoB,gBAAAA,GACFH,IAAY,KACHjB,EAAEkB,QAAQ,UACnBlB,EAAEmB,eAAAA,GACFnB,EAAEoB,gBAAAA,GACFH,IAAYf,EAAkBY,SAAS,IAGrCG,KAAa,KAAKf,EAAkBe,CAAS,IAC/Cf,EAAkBe,CAAS,EAAE/B,MAAAA,IACpB6B,MAAiB,MAAMb,EAAkBY,SAAS,KAE3DZ,EAAkB,CAAC,EAAEhB,MAAAA;AAAAA,EAEzB;AAEAmC,EAAAA,EAAoB5F,GAAK,OAAO;AAAA,IAAEqE,eAAAA;AAAAA,EAAAA,IAAkB,CAAA,CAAE;AAEtD,QAAMwB,IAAsB;AAAA,IAC1B,eAAe;AAAA,MAAE/E,MAAM;AAAA,MAAKD,KAAK;AAAA,IAAA;AAAA,IACjC,gBAAgB;AAAA,MAAEa,OAAO;AAAA,MAAKb,KAAK;AAAA,IAAA;AAAA,IACnC,iBAAiB;AAAA,MAAEC,MAAM;AAAA,MAAOgF,WAAW;AAAA,MAAoBjF,KAAK;AAAA,IAAA;AAAA,IACpE,YAAY;AAAA,MAAEC,MAAM;AAAA,MAAKW,QAAQ;AAAA,IAAA;AAAA,IACjC,aAAa;AAAA,MAAEC,OAAO;AAAA,MAAKD,QAAQ;AAAA,IAAA;AAAA,IACnC,cAAc;AAAA,MAAEX,MAAM;AAAA,MAAOgF,WAAW;AAAA,MAAoBrE,QAAQ;AAAA,IAAA;AAAA,EAAO,GAEvEsE,IAAwBhG,GAAOiG,WAAW,KAAK;AAErD,SACEC,gBAAAA,EAAAC,cAAA,OAAAC,EAAA;AAAA,IACEjH,WACE,uDACCA,EAAUmG,SAAS,IAAI,IAAInG,CAAS,KAAK,OACzCe,IAAiB,UAAU,OAC3BN,IAAW,uDAAuD;AAAA,IAErEK,KAAKQ;AAAAA,IACL4F,SAAU7B,CAAAA,MAAM;AACd,MAAI5E,MACJ4E,EAAEoB,gBAAAA,GACFtB,EAAAA;AAAAA,IACF;AAAA,IACAgC,WAAY9B,CAAAA,MAAM;AAChB,UAAI5E,CAAAA;AACJ,YAAI4E,EAAEkB,QAAQ,WAAWlB,EAAEkB,QAAQ,KAAK;AACtClB,YAAEmB,eAAAA,GACFnB,EAAEoB,gBAAAA;AACF,gBAAMW,IAAUrG;AAChBoE,UAAAA,EAAAA,GAEKiC,KACHxD,WAAW,MAAM;AACf,kBAAMyD,IAAa7F,EAAkBM;AACrC,gBAAIuF,GAAY;AACd,oBAAMnD,IAAqB,CACzB,qBACA,mBACA,6BACA,0BACA,0BACA,WACA,iCAAiC,EACjCC,KAAK,IAAI,GACLC,IAAiBiD,EAAWhD,cAA2BH,CAAkB;AAC/E,cAAIE,KACFA,EAAeG,MAAAA;AAAAA,YAEnB;AAAA,UACF,GAAG,CAAC;AAAA,QAER,WAAWc,EAAEkB,QAAQ,YAAYxF;AAC/BsE,YAAEmB,eAAAA,GACFnB,EAAEoB,gBAAAA,GACFzF,EAAkB,EAAK;AAAA,kBACbqE,EAAEkB,QAAQ,eAAelB,EAAEkB,QAAQ,cAAcxF,GAAgB;AAE3E,gBAAMsG,IAAa7F,EAAkBM;AACrC,UAAIuF,KACFjC,EAAyBC,GAAGgC,CAAU;AAAA,QAE1C,MAAA,CAAWhC,EAAEkB,QAAQ,eAAe,CAACxF,MAEnCsE,EAAEmB,eAAAA,GACFnB,EAAEoB,gBAAAA,GACFzF,EAAkB,EAAI,GACtB4C,WAAW,MAAM;AACf,gBAAMyD,IAAa7F,EAAkBM;AACrC,cAAIuF,GAAY;AACd,kBAAMnD,IAAqB,CACzB,qBACA,mBACA,6BACA,0BACA,0BACA,WACA,iCAAiC,EACjCC,KAAK,IAAI,GACLC,IAAiBiD,EAAWhD,cAA2BH,CAAkB;AAC/E,YAAIE,KACFA,EAAeG,MAAAA;AAAAA,UAEnB;AAAA,QACF,GAAG,CAAC;AAAA,IAER;AAAA,IACA+C,MAAM1G;AAAAA,IACN,iBAAeG,IAAiB,SAAS;AAAA,IACzC,iBAAc;AAAA,IACdmF,UAAU;AAAA,IACV,iBAAezF,IAAW,SAAS;AAAA,IACnC,cAAYE;AAAAA,IACZ,sBAAoBV;AAAAA,EAAAA,GAChBY,CAAK,GAERP,EAAwB;AAAA,IAAES,gBAAAA;AAAAA,IAAgBoE,eAAAA;AAAAA,EAAAA,CAAe,GAEzDpE,KAAkB,CAACL,KAClBqG,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEhH,WAAW,4BAA4B6G,CAAqB,aAAazG,KAAgB,SAAS,WAAW,OAAO;AAAA,IACpHyF,OAAO;AAAA,MACL0B,aAAa;AAAA,MACbC,OAAO;AAAA,MACPC,iBAAiB;AAAA,MACjB,GAAGd,EAAoBzF,CAAe;AAAA,IAAA;AAAA,IAExCgG,SAAU7B,CAAAA,MAAMA,EAAEoB,gBAAAA;AAAAA,IAClBU,WAAY9B,CAAAA,MAAM;AAEhB,MAAIA,EAAEkB,QAAQ,YACZlB,EAAEmB,eAAAA,GACFnB,EAAEoB,gBAAAA,GACFzF,EAAkB,EAAK,GACvBM,EAAcQ,SAASyC,MAAAA,MACdc,EAAEkB,QAAQ,eAAelB,EAAEkB,QAAQ,aAAalB,EAAEkB,QAAQ,UAAUlB,EAAEkB,QAAQ,UAEvFnB,EAAyBC,GAAG7D,EAAkBM,OAAO;AAAA,IAEzD;AAAA,IACAwF,MAAK;AAAA,IACL,cAAW;AAAA,IACXxG,KAAKU;AAAAA,IACL,sBAAoBrB;AAAAA,EAAAA,GAEnBE,EAAsB;AAAA,IAAEqH,gBAAgBA,MAAM1G,EAAkB,EAAK;AAAA,EAAA,CAAG,CACtE,GAENN,KACCK,KACAK,KACAuG,gBAAAA,GAASC,aACPb,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEhH,WAAW,+BAA+B6G,CAAqB,IAAIzG,KAAgB,SAAS,WAAW,OAAO;AAAA,IAC9GyF,OAAO;AAAA,MACL3F,UAAU;AAAA,MACVyB,KAAKF,EAAeE;AAAAA,MACpBC,MAAMH,EAAeG;AAAAA,MACrBiG,QAAQ;AAAA,MACRN,aAAa;AAAA,MACbC,OAAO;AAAA,MACPC,iBAAiB;AAAA,IAAA;AAAA,IAEnBP,SAAU7B,CAAAA,MAAMA,EAAEoB,gBAAAA;AAAAA,IAClBU,WAAY9B,CAAAA,MAAM;AAEhB,MAAIA,EAAEkB,QAAQ,YACZlB,EAAEmB,eAAAA,GACFnB,EAAEoB,gBAAAA,GACFzF,EAAkB,EAAK,GACvBM,EAAcQ,SAASyC,MAAAA,MACdc,EAAEkB,QAAQ,eAAelB,EAAEkB,QAAQ,aAAalB,EAAEkB,QAAQ,UAAUlB,EAAEkB,QAAQ,UAEvFnB,EAAyBC,GAAG7D,EAAkBM,OAAO;AAAA,IAEzD;AAAA,IACAwF,MAAK;AAAA,IACL,cAAW;AAAA,IACXxG,KAAKU;AAAAA,IACL,sBAAoBrB;AAAAA,EAAAA,GAEnBE,EAAsB;AAAA,IAAEqH,gBAAgBA,MAAM1G,EAAkB,EAAK;AAAA,EAAA,CAAG,CACtE,GACLmC,SAASC,IACX,CACC;AAET,CACF;"}

package/dist/index21.js

@@ -15,7 +15,7 @@ const I = ({
   defaultChecked: c = !1,
   disabled: e = !1,
   onChange: m,
-  checkMarkType: o = "",
+  checkMarkType: r = "",
   label: k = "",
   disabledLabel: h = "",
   containerAutomationId: g = "",
@@ -26,21 +26,21 @@ const I = ({
     l(c);
   }, [c]);
   const p = (t) => {
-    e || (l((r) => !r), m?.(!n, t));
+    e || (l((o) => !o), m?.(!n, t));
   }, E = (t) => {
     if (!e && (t.key === "Enter" || t.key === " ")) {
       t.preventDefault(), t.stopPropagation();
-      const r = !n;
-      l(r);
+      const o = !n;
+      l(o);
       const u = t.currentTarget.closest("label")?.querySelector("input");
-      u && m?.(r, {
+      u && m?.(o, {
         target: u,
         currentTarget: u
       });
     }
   }, v = () => {
     const t = "focus-visible:outline outline-2 outline-[var(--color-blue-400)] outline-offset-2 rounded";
-    return e ? n && o === "tick" ? "disabled-tick" : n && o === "minus-checkbox" ? "disabled-minus-checkbox" : n && !o ? "disabled-tick" : "disabled-default" : o === "minus-checkbox" && n ? `minus-checkbox ${t}` : n ? `checked ${t}` : `unchecked ${t}`;
+    return e ? n && r === "tick" ? "disabled-tick" : n && r === "minus-checkbox" ? "disabled-minus-checkbox" : n && !r ? "disabled-tick" : "disabled-default" : r === "minus-checkbox" && n ? `minus-checkbox ${t}` : n ? `checked ${t}` : `unchecked ${t}`;
   }, y = () => e ? "checkbox-label-disabled" : "checkbox-label", d = () => e && h ? h : k, x = crypto.randomUUID();
   return /* @__PURE__ */ s.createElement("div", {
     className: "se-design-checkbox-ctn"
@@ -49,9 +49,9 @@ const I = ({
     htmlFor: x,
     className: `se-design-checkbox ${i} ${v()}`,
     "data-automation-id": g || "checkbox-container",
-    tabIndex: e ? -1 : 0,
-    "aria-checked": n,
-    "aria-disabled": e
+    tabIndex: 0,
+    "aria-checked": n ? "true" : "false",
+    "aria-disabled": e ? "true" : "false"
   }, f ? {
     "aria-label": f
   } : {

package/dist/index21.js.map

@@ -1 +1 @@
-{"version":3,"file":"index21.js","sources":["../src/components/Checkbox/index.tsx"],"sourcesContent":["import React, { FC, useState, useEffect } from 'react';\nimport './style.scss';\n\nexport interface CheckboxProps {\n  className?: string;\n  automationId?: string;\n  defaultChecked?: boolean;\n  onChange?: (checked: boolean, e: React.ChangeEvent<HTMLInputElement>) => void;\n  disabled?: boolean;\n  checkMarkType?: 'tick' | 'minus-checkbox' | '';\n  label?: string;\n  disabledLabel?: string;\n  containerAutomationId?: string;\n  ariaLabel?: string;\n}\n\nexport const Checkbox: FC<CheckboxProps> = ({\n  className = '',\n  automationId = '',\n  defaultChecked = false,\n  disabled = false,\n  onChange,\n  checkMarkType = '',\n  label = '',\n  disabledLabel = '',\n  containerAutomationId = '',\n  ariaLabel = 'Checkbox'\n}) => {\n  const [isChecked, setIsChecked] = useState(defaultChecked);\n\n  useEffect(() => {\n    setIsChecked(defaultChecked);\n  }, [defaultChecked]);\n\n  const handleClick = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (disabled) return;\n    setIsChecked((prev) => (checkMarkType === 'minus-checkbox' ? !prev : !prev));\n    onChange?.(!isChecked, e);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLLabelElement | HTMLSpanElement>) => {\n    if (disabled) return;\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      e.stopPropagation();\n      const newChecked = !isChecked;\n      setIsChecked(newChecked);\n      \n      // Create a proper synthetic event for the onChange callback\n      const inputElement = e.currentTarget.closest('label')?.querySelector('input');\n      if (inputElement) {\n        const syntheticEvent = {\n          target: inputElement,\n          currentTarget: inputElement,\n        } as React.ChangeEvent<HTMLInputElement>;\n        onChange?.(newChecked, syntheticEvent);\n      }\n    }\n  };\n\n  const getCheckBoxClassName = () => {\n    const focusClass = 'focus-visible:outline outline-2 outline-[var(--color-blue-400)] outline-offset-2 rounded';\n\n    // Handle disabled states with proper checked status\n    if (disabled) {\n      if (isChecked && checkMarkType === 'tick') return 'disabled-tick';\n      if (isChecked && checkMarkType === 'minus-checkbox') return 'disabled-minus-checkbox';\n      if (isChecked && !checkMarkType) return 'disabled-tick'; // Default to tick for checked disabled\n      return 'disabled-default'; // Unchecked disabled\n    }\n\n    // Handle enabled states\n    if (checkMarkType === 'minus-checkbox' && isChecked) return `minus-checkbox ${focusClass}`;\n    return isChecked ? `checked ${focusClass}` : `unchecked ${focusClass}`;\n  };\n\n  const getLabelClassName = () => {\n    return disabled ? 'checkbox-label-disabled' : 'checkbox-label';\n  };\n\n  const getLabelText = () => {\n    if (disabled && disabledLabel) {\n      return disabledLabel;\n    }\n    return label;\n  };\n  const uniqueId = crypto.randomUUID();\n\n  return (\n    <div className=\"se-design-checkbox-ctn\">\n      <label\n        role=\"checkbox\"\n        htmlFor={uniqueId}\n        className={`se-design-checkbox ${className} ${getCheckBoxClassName()}`}\n        data-automation-id={containerAutomationId || 'checkbox-container'}\n        tabIndex={disabled ? -1 : 0}\n        aria-checked={isChecked}\n        aria-disabled={disabled}\n        {...(ariaLabel ? { 'aria-label': ariaLabel } : { 'aria-labelledby': `${automationId}-label` })}\n        onKeyDown={handleKeyDown}\n      >\n        <input\n          id={uniqueId}\n          type=\"checkbox\"\n          checked={isChecked}\n          onChange={handleClick}\n          disabled={disabled}\n          aria-hidden=\"true\"\n        />\n        <span className=\"checkbox-item\" data-automation-id={automationId}></span>\n        {getLabelText()?.length > 0 && <span className={getLabelClassName()} data-automation-id=\"checkbox-label\">{getLabelText()}</span>}\n      </label>\n    </div>\n  );\n};\n"],"names":["Checkbox","className","automationId","defaultChecked","disabled","onChange","checkMarkType","label","disabledLabel","containerAutomationId","ariaLabel","isChecked","setIsChecked","useState","useEffect","handleClick","e","prev","handleKeyDown","key","preventDefault","stopPropagation","newChecked","inputElement","currentTarget","closest","querySelector","target","getCheckBoxClassName","focusClass","getLabelClassName","getLabelText","uniqueId","crypto","randomUUID","React","createElement","_extends","role","htmlFor","tabIndex","onKeyDown","id","type","checked","length"],"mappings":";;;;;;;;;;;AAgBO,MAAMA,IAA8BA,CAAC;AAAA,EAC1CC,WAAAA,IAAY;AAAA,EACZC,cAAAA,IAAe;AAAA,EACfC,gBAAAA,IAAiB;AAAA,EACjBC,UAAAA,IAAW;AAAA,EACXC,UAAAA;AAAAA,EACAC,eAAAA,IAAgB;AAAA,EAChBC,OAAAA,IAAQ;AAAA,EACRC,eAAAA,IAAgB;AAAA,EAChBC,uBAAAA,IAAwB;AAAA,EACxBC,WAAAA,IAAY;AACd,MAAM;AACJ,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAASV,CAAc;AAEzDW,EAAAA,EAAU,MAAM;AACdF,IAAAA,EAAaT,CAAc;AAAA,EAC7B,GAAG,CAACA,CAAc,CAAC;AAEnB,QAAMY,IAAcA,CAACC,MAA2C;AAC9D,IAAIZ,MACJQ,EAAcK,OAA+C,CAACA,CAAa,GAC3EZ,IAAW,CAACM,GAAWK,CAAC;AAAA,EAC1B,GAEME,IAAgBA,CAACF,MAA+D;AACpF,QAAIZ,CAAAA,MACAY,EAAEG,QAAQ,WAAWH,EAAEG,QAAQ,MAAK;AACtCH,MAAAA,EAAEI,eAAAA,GACFJ,EAAEK,gBAAAA;AACF,YAAMC,IAAa,CAACX;AACpBC,MAAAA,EAAaU,CAAU;AAGvB,YAAMC,IAAeP,EAAEQ,cAAcC,QAAQ,OAAO,GAAGC,cAAc,OAAO;AAC5E,MAAIH,KAKFlB,IAAWiB,GAJY;AAAA,QACrBK,QAAQJ;AAAAA,QACRC,eAAeD;AAAAA,MAAAA,CAEoB;AAAA,IAEzC;AAAA,EACF,GAEMK,IAAuBA,MAAM;AACjC,UAAMC,IAAa;AAGnB,WAAIzB,IACEO,KAAaL,MAAkB,SAAe,kBAC9CK,KAAaL,MAAkB,mBAAyB,4BACxDK,KAAa,CAACL,IAAsB,kBACjC,qBAILA,MAAkB,oBAAoBK,IAAkB,kBAAkBkB,CAAU,KACjFlB,IAAY,WAAWkB,CAAU,KAAK,aAAaA,CAAU;AAAA,EACtE,GAEMC,IAAoBA,MACjB1B,IAAW,4BAA4B,kBAG1C2B,IAAeA,MACf3B,KAAYI,IACPA,IAEFD,GAEHyB,IAAWC,OAAOC,WAAAA;AAExB,SACEC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKnC,WAAU;AAAA,EAAA,GACbkC,gBAAAA,EAAAC,cAAA,SAAAC,EAAA;AAAA,IACEC,MAAK;AAAA,IACLC,SAASP;AAAAA,IACT/B,WAAW,sBAAsBA,CAAS,IAAI2B,GAAsB;AAAA,IACpE,sBAAoBnB,KAAyB;AAAA,IAC7C+B,UAAUpC,IAAW,KAAK;AAAA,IAC1B,gBAAcO;AAAAA,IACd,iBAAeP;AAAAA,EAAAA,GACVM,IAAY;AAAA,IAAE,cAAcA;AAAAA,EAAAA,IAAc;AAAA,IAAE,mBAAmB,GAAGR,CAAY;AAAA,EAAA,GAAU;AAAA,IAC7FuC,WAAWvB;AAAAA,EAAAA,CAAc,GAEzBiB,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACEM,IAAIV;AAAAA,IACJW,MAAK;AAAA,IACLC,SAASjC;AAAAA,IACTN,UAAUU;AAAAA,IACVX,UAAAA;AAAAA,IACA,eAAY;AAAA,EAAA,CACb,GACD+B,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMnC,WAAU;AAAA,IAAgB,sBAAoBC;AAAAA,EAAAA,CAAoB,GACvE6B,EAAAA,GAAgBc,SAAS,KAAKV,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMnC,WAAW6B,EAAAA;AAAAA,IAAqB,sBAAmB;AAAA,EAAA,GAAkBC,EAAAA,CAAqB,CAC1H,CACJ;AAET;"}
+{"version":3,"file":"index21.js","sources":["../src/components/Checkbox/index.tsx"],"sourcesContent":["import React, { FC, useState, useEffect } from 'react';\nimport './style.scss';\n\nexport interface CheckboxProps {\n  className?: string;\n  automationId?: string;\n  defaultChecked?: boolean;\n  onChange?: (checked: boolean, e: React.ChangeEvent<HTMLInputElement>) => void;\n  disabled?: boolean;\n  checkMarkType?: 'tick' | 'minus-checkbox' | '';\n  label?: string;\n  disabledLabel?: string;\n  containerAutomationId?: string;\n  ariaLabel?: string;\n}\n\nexport const Checkbox: FC<CheckboxProps> = ({\n  className = '',\n  automationId = '',\n  defaultChecked = false,\n  disabled = false,\n  onChange,\n  checkMarkType = '',\n  label = '',\n  disabledLabel = '',\n  containerAutomationId = '',\n  ariaLabel = 'Checkbox'\n}) => {\n  const [isChecked, setIsChecked] = useState(defaultChecked);\n\n  useEffect(() => {\n    setIsChecked(defaultChecked);\n  }, [defaultChecked]);\n\n  const handleClick = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (disabled) return;\n    setIsChecked((prev) => (checkMarkType === 'minus-checkbox' ? !prev : !prev));\n    onChange?.(!isChecked, e);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLLabelElement | HTMLSpanElement>) => {\n    if (disabled) return;\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      e.stopPropagation();\n      const newChecked = !isChecked;\n      setIsChecked(newChecked);\n      \n      // Create a proper synthetic event for the onChange callback\n      const inputElement = e.currentTarget.closest('label')?.querySelector('input');\n      if (inputElement) {\n        const syntheticEvent = {\n          target: inputElement,\n          currentTarget: inputElement,\n        } as React.ChangeEvent<HTMLInputElement>;\n        onChange?.(newChecked, syntheticEvent);\n      }\n    }\n  };\n\n  const getCheckBoxClassName = () => {\n    const focusClass = 'focus-visible:outline outline-2 outline-[var(--color-blue-400)] outline-offset-2 rounded';\n\n    // Handle disabled states with proper checked status\n    if (disabled) {\n      if (isChecked && checkMarkType === 'tick') return 'disabled-tick';\n      if (isChecked && checkMarkType === 'minus-checkbox') return 'disabled-minus-checkbox';\n      if (isChecked && !checkMarkType) return 'disabled-tick'; // Default to tick for checked disabled\n      return 'disabled-default'; // Unchecked disabled\n    }\n\n    // Handle enabled states\n    if (checkMarkType === 'minus-checkbox' && isChecked) return `minus-checkbox ${focusClass}`;\n    return isChecked ? `checked ${focusClass}` : `unchecked ${focusClass}`;\n  };\n\n  const getLabelClassName = () => {\n    return disabled ? 'checkbox-label-disabled' : 'checkbox-label';\n  };\n\n  const getLabelText = () => {\n    if (disabled && disabledLabel) {\n      return disabledLabel;\n    }\n    return label;\n  };\n  const uniqueId = crypto.randomUUID();\n\n  return (\n    <div className=\"se-design-checkbox-ctn\">\n      <label\n        role=\"checkbox\"\n        htmlFor={uniqueId}\n        className={`se-design-checkbox ${className} ${getCheckBoxClassName()}`}\n        data-automation-id={containerAutomationId || 'checkbox-container'}\n        tabIndex={0}\n        aria-checked={isChecked ? 'true' : 'false'}\n        aria-disabled={disabled ? 'true' : 'false'}\n        {...(ariaLabel ? { 'aria-label': ariaLabel } : { 'aria-labelledby': `${automationId}-label` })}\n        onKeyDown={handleKeyDown}\n      >\n        <input\n          id={uniqueId}\n          type=\"checkbox\"\n          checked={isChecked}\n          onChange={handleClick}\n          disabled={disabled}\n          aria-hidden=\"true\"\n        />\n        <span className=\"checkbox-item\" data-automation-id={automationId}></span>\n        {getLabelText()?.length > 0 && <span className={getLabelClassName()} data-automation-id=\"checkbox-label\">{getLabelText()}</span>}\n      </label>\n    </div>\n  );\n};\n"],"names":["Checkbox","className","automationId","defaultChecked","disabled","onChange","checkMarkType","label","disabledLabel","containerAutomationId","ariaLabel","isChecked","setIsChecked","useState","useEffect","handleClick","e","prev","handleKeyDown","key","preventDefault","stopPropagation","newChecked","inputElement","currentTarget","closest","querySelector","target","getCheckBoxClassName","focusClass","getLabelClassName","getLabelText","uniqueId","crypto","randomUUID","React","createElement","_extends","role","htmlFor","tabIndex","onKeyDown","id","type","checked","length"],"mappings":";;;;;;;;;;;AAgBO,MAAMA,IAA8BA,CAAC;AAAA,EAC1CC,WAAAA,IAAY;AAAA,EACZC,cAAAA,IAAe;AAAA,EACfC,gBAAAA,IAAiB;AAAA,EACjBC,UAAAA,IAAW;AAAA,EACXC,UAAAA;AAAAA,EACAC,eAAAA,IAAgB;AAAA,EAChBC,OAAAA,IAAQ;AAAA,EACRC,eAAAA,IAAgB;AAAA,EAChBC,uBAAAA,IAAwB;AAAA,EACxBC,WAAAA,IAAY;AACd,MAAM;AACJ,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAASV,CAAc;AAEzDW,EAAAA,EAAU,MAAM;AACdF,IAAAA,EAAaT,CAAc;AAAA,EAC7B,GAAG,CAACA,CAAc,CAAC;AAEnB,QAAMY,IAAcA,CAACC,MAA2C;AAC9D,IAAIZ,MACJQ,EAAcK,OAA+C,CAACA,CAAa,GAC3EZ,IAAW,CAACM,GAAWK,CAAC;AAAA,EAC1B,GAEME,IAAgBA,CAACF,MAA+D;AACpF,QAAIZ,CAAAA,MACAY,EAAEG,QAAQ,WAAWH,EAAEG,QAAQ,MAAK;AACtCH,MAAAA,EAAEI,eAAAA,GACFJ,EAAEK,gBAAAA;AACF,YAAMC,IAAa,CAACX;AACpBC,MAAAA,EAAaU,CAAU;AAGvB,YAAMC,IAAeP,EAAEQ,cAAcC,QAAQ,OAAO,GAAGC,cAAc,OAAO;AAC5E,MAAIH,KAKFlB,IAAWiB,GAJY;AAAA,QACrBK,QAAQJ;AAAAA,QACRC,eAAeD;AAAAA,MAAAA,CAEoB;AAAA,IAEzC;AAAA,EACF,GAEMK,IAAuBA,MAAM;AACjC,UAAMC,IAAa;AAGnB,WAAIzB,IACEO,KAAaL,MAAkB,SAAe,kBAC9CK,KAAaL,MAAkB,mBAAyB,4BACxDK,KAAa,CAACL,IAAsB,kBACjC,qBAILA,MAAkB,oBAAoBK,IAAkB,kBAAkBkB,CAAU,KACjFlB,IAAY,WAAWkB,CAAU,KAAK,aAAaA,CAAU;AAAA,EACtE,GAEMC,IAAoBA,MACjB1B,IAAW,4BAA4B,kBAG1C2B,IAAeA,MACf3B,KAAYI,IACPA,IAEFD,GAEHyB,IAAWC,OAAOC,WAAAA;AAExB,SACEC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKnC,WAAU;AAAA,EAAA,GACbkC,gBAAAA,EAAAC,cAAA,SAAAC,EAAA;AAAA,IACEC,MAAK;AAAA,IACLC,SAASP;AAAAA,IACT/B,WAAW,sBAAsBA,CAAS,IAAI2B,GAAsB;AAAA,IACpE,sBAAoBnB,KAAyB;AAAA,IAC7C+B,UAAU;AAAA,IACV,gBAAc7B,IAAY,SAAS;AAAA,IACnC,iBAAeP,IAAW,SAAS;AAAA,EAAA,GAC9BM,IAAY;AAAA,IAAE,cAAcA;AAAAA,EAAAA,IAAc;AAAA,IAAE,mBAAmB,GAAGR,CAAY;AAAA,EAAA,GAAU;AAAA,IAC7FuC,WAAWvB;AAAAA,EAAAA,CAAc,GAEzBiB,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACEM,IAAIV;AAAAA,IACJW,MAAK;AAAA,IACLC,SAASjC;AAAAA,IACTN,UAAUU;AAAAA,IACVX,UAAAA;AAAAA,IACA,eAAY;AAAA,EAAA,CACb,GACD+B,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMnC,WAAU;AAAA,IAAgB,sBAAoBC;AAAAA,EAAAA,CAAoB,GACvE6B,EAAAA,GAAgBc,SAAS,KAAKV,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMnC,WAAW6B,EAAAA;AAAAA,IAAqB,sBAAmB;AAAA,EAAA,GAAkBC,EAAAA,CAAqB,CAC1H,CACJ;AAET;"}

package/dist/index23.js

@@ -1,56 +1,57 @@
-import t, { useState as h, useRef as X, useEffect as A } from "react";
-import { Popover as G } from "./index17.js";
-import { Icon as B } from "./index5.js";
-import { Checkbox as H } from "./index21.js";
-import { Button as P } from "./index3.js";
-import { InputWithIcon as Y } from "./index50.js";
-const ae = (o) => {
-  const [i, M] = h(!1), [p, w] = h(""), [a, m] = h(() => o?.defaultSelectedValue ? Array.isArray(o?.defaultSelectedValue) ? o?.defaultSelectedValue : [o.defaultSelectedValue] : []), y = X(null), {
+import t, { useState as w, useRef as H, useEffect as $ } from "react";
+import { Popover as Y } from "./index17.js";
+import { Icon as A } from "./index5.js";
+import { Checkbox as Z } from "./index21.js";
+import { Button as B } from "./index3.js";
+import { InputWithIcon as ee } from "./index50.js";
+const ce = (o) => {
+  const [i, P] = w(!1), [f, x] = w(""), [a, d] = w(() => o?.defaultSelectedValue ? Array.isArray(o?.defaultSelectedValue) ? o?.defaultSelectedValue : [o.defaultSelectedValue] : []), p = H(null), {
     selectBy: s = "",
-    optionsUniqueBy: c = "",
-    displaySelected: O = !1,
-    dropDownOptions: g,
-    defaultText: d = "Select",
-    iconColor: S = "var(--color-gray-700)",
-    disabled: u = !1,
-    dropdownClassName: U = "",
-    hasError: E = !1,
-    errorMessage: j = "",
-    customDropdownContent: C = null,
-    isBorderless: L = !1,
+    optionsUniqueBy: n = "",
+    displaySelected: L = !1,
+    dropDownOptions: h,
+    defaultText: m = "Select",
+    iconColor: g = "var(--color-gray-700)",
+    disabled: y = !1,
+    dropdownClassName: M = "",
+    hasError: S = !1,
+    errorMessage: O = "",
+    customDropdownContent: E = null,
+    isBorderless: U = !1,
     shouldShowSearch: D = !1,
     searchPlaceholder: R = "Search...",
-    searchResultEmptyMessage: N = "No results found"
+    searchResultEmptyMessage: C = "No results found",
+    ariaLabel: j = ""
   } = o;
-  A(() => {
+  $(() => {
     const e = o?.defaultSelectedValue ? Array.isArray(o?.defaultSelectedValue) ? o?.defaultSelectedValue : [o.defaultSelectedValue] : [];
-    m(e);
-  }, [o?.defaultSelectedValue]), A(() => {
-    i || w("");
+    d(e);
+  }, [o?.defaultSelectedValue]), $(() => {
+    i || x("");
   }, [i]);
-  const v = o?.type === "multi-select", k = () => p.trim() ? (g || []).filter((e) => (e?.[s]?.toString().toLowerCase() || "").includes(p.toLowerCase())) : g || [], V = (e) => {
-    m([e]), y.current?.togglePopover(), o?.onOptionClick?.(e);
-  }, T = (e) => v ? d : e?.[s] || d, q = () => {
-    m([]);
-  }, $ = (e, l = !1) => {
+  const v = o?.type === "multi-select", N = () => f.trim() ? (h || []).filter((e) => (e?.[s]?.toString().toLowerCase() || "").includes(f.toLowerCase())) : h || [], k = (e) => {
+    d([e]), p.current?.togglePopover(), o?.onOptionClick?.(e);
+  }, T = (e) => v ? m : e?.[s] || m, q = () => {
+    d([]);
+  }, V = (e, r = !1) => {
     if (o?.renderOptionChip)
-      return o?.renderOptionChip(e, l);
+      return o?.renderOptionChip(e, r);
     if (v && a?.length > 0) {
-      const r = a[0]?.[s] || "", n = a.length - 1;
+      const l = a[0]?.[s] || "", c = a.length - 1;
       return /* @__PURE__ */ t.createElement("div", {
         className: "option-chip flex items-center w-full"
       }, /* @__PURE__ */ t.createElement("div", {
-        className: `${n > 0 ? "w-full" : "flex-1"} truncate`
-      }, `${d}: ${r}`), n > 0 && /* @__PURE__ */ t.createElement("div", {
+        className: `${c > 0 ? "w-full" : "flex-1"} truncate`
+      }, `${m}: ${l}`), c > 0 && /* @__PURE__ */ t.createElement("div", {
         className: "flex-shrink-0"
-      }, "+", n));
+      }, "+", c));
     }
     return /* @__PURE__ */ t.createElement("p", {
       className: "option-chip flex flex-1 items-center justify-between"
     }, T(e));
   }, I = () => /* @__PURE__ */ t.createElement("div", {
     className: " w-full relative flex items-center border-b border-[var(--color-gray-300)]"
-  }, /* @__PURE__ */ t.createElement(Y, {
+  }, /* @__PURE__ */ t.createElement(ee, {
     leftIcon: {
       name: "search",
       position: "left",
@@ -58,8 +59,8 @@ const ae = (o) => {
         color: "var(--color-gray-500)"
       }
     },
-    value: p,
-    onChange: (e) => w(e),
+    value: f,
+    onChange: (e) => x(e),
     placeholder: R,
     style: {
       margin: 0,
@@ -70,58 +71,58 @@ const ae = (o) => {
       border: "none",
       outline: "none"
     }
-  })), z = (e, l) => {
-    const r = e[s], n = a[0]?.[s] || d, b = c?.length ? e[c] == a[0]?.[c] : !0, f = O && r === n && b;
+  })), z = (e, r) => {
+    const l = e[s], c = a[0]?.[s] || m, G = n?.length ? e[n] == a[0]?.[n] : !0, u = L && l === c && G;
     return /* @__PURE__ */ t.createElement("div", {
       key: `$drop-option-${crypto.randomUUID()}`,
-      className: `option break-words px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between ${f ? "selected" : ""}`,
-      onClick: () => V(e),
-      onKeyDown: (x) => {
-        (x.key === "Enter" || x.key === " ") && (x.preventDefault(), V(e));
+      className: `option break-words px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between ${u ? "selected" : ""}`,
+      onClick: () => k(e),
+      onKeyDown: (b) => {
+        (b.key === "Enter" || b.key === " ") && (b.preventDefault(), k(e));
       },
       role: "option",
-      "aria-selected": f,
+      "aria-selected": u ? "true" : "false",
       tabIndex: 0,
-      "data-automation-id": `dropdown-option-${e?.automationId || l}`
-    }, $({
+      "data-automation-id": `dropdown-option-${e?.automationId || r}`
+    }, V({
       ...e,
-      isOptionSelected: f
-    }, !1), f && /* @__PURE__ */ t.createElement(B, {
+      isOptionSelected: u
+    }, !1), u && /* @__PURE__ */ t.createElement(A, {
       name: "checkmark",
-      stroke: S
+      stroke: g
     }));
   }, J = () => {
-    const e = k();
+    const e = N();
     return /* @__PURE__ */ t.createElement("div", {
       className: "dropdown-content dropdown-options",
       role: "listbox",
       "aria-label": "Dropdown options"
     }, D && I(), /* @__PURE__ */ t.createElement("div", {
       className: "flex flex-col max-h-80 overflow-y-auto"
-    }, e.length > 0 ? e.map((l, r) => z(l, r)) : /* @__PURE__ */ t.createElement("div", {
+    }, e.length > 0 ? e.map((r, l) => z(r, l)) : /* @__PURE__ */ t.createElement("div", {
       className: "px-3 py-4 text-center text-[var(--color-gray-500)] text-sm",
       role: "status",
       "aria-live": "polite"
-    }, N)));
-  }, Q = (e, l) => {
-    let r = [];
-    e ? r = [...a, l] : r = a?.filter((n) => n[c] !== l[c]), m(r);
+    }, C)));
+  }, Q = (e, r) => {
+    let l = [];
+    e ? l = [...a, r] : l = a?.filter((c) => c[n] !== r[n]), d(l);
   }, W = () => {
-    y.current?.togglePopover(), o?.onApply?.(a);
+    p.current?.togglePopover(), o?.onApply?.(a);
   }, _ = (e) => {
-    const l = a.some((r) => r[c] === e[c]);
+    const r = a.some((l) => l[n] === e[n]);
     return /* @__PURE__ */ t.createElement("div", {
       key: `$drop-option-${crypto.randomUUID()}`,
       className: "option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between"
-    }, /* @__PURE__ */ t.createElement(H, {
+    }, /* @__PURE__ */ t.createElement(Z, {
       automationId: "checkbox",
       className: "checkbox",
-      defaultChecked: l,
-      onChange: (r) => Q(r, e),
+      defaultChecked: r,
+      onChange: (l) => Q(l, e),
       label: e?.label
     }));
   }, F = () => {
-    const e = k();
+    const e = N();
     return /* @__PURE__ */ t.createElement("div", {
       className: "dropdown-content dropdown-options",
       role: "listbox",
@@ -129,45 +130,40 @@ const ae = (o) => {
       "aria-multiselectable": "true"
     }, D && I(), /* @__PURE__ */ t.createElement("div", {
       className: "flex flex-col max-h-80 overflow-y-auto"
-    }, e.length > 0 ? e.map((l) => _(l)) : /* @__PURE__ */ t.createElement("div", {
+    }, e.length > 0 ? e.map((r) => _(r)) : /* @__PURE__ */ t.createElement("div", {
       className: "px-3 py-4 text-center text-[var(--color-gray-500)] text-sm",
       role: "status",
       "aria-live": "polite"
-    }, N)), /* @__PURE__ */ t.createElement("div", {
+    }, C)), /* @__PURE__ */ t.createElement("div", {
       className: "flex items-center justify-end gap-4 p-3 border-t border-[var(--color-gray-200)]"
-    }, /* @__PURE__ */ t.createElement(P, {
+    }, /* @__PURE__ */ t.createElement(B, {
       label: "Clear",
       type: "link",
       size: "sm",
       onClick: q
-    }), /* @__PURE__ */ t.createElement(P, {
+    }), /* @__PURE__ */ t.createElement(B, {
       label: "Apply",
       type: "primary",
       size: "sm",
       onClick: W
     })));
   }, K = () => {
-    const e = i ? "border-[var(--color-blue-500)]" : u ? "border-[var(--color-gray-300)]" : "border-[var(--color-gray-600)]", l = E ? "border-[var(--color-red-500)]" : "", r = `dropdown-src-element bg-[var(--color-white)] flex px-3 py-2 ${L ? "border-0" : `border rounded-md ${l || e}`} flex items-center ${U}`, n = a[0]?.[s] || d, b = o?.label ? `${o.label}: ${n}` : `Select option, currently selected: ${n}`;
+    const e = i ? "border-[var(--color-blue-500)]" : y ? "border-[var(--color-gray-300)]" : "border-[var(--color-gray-600)]", r = S ? "border-[var(--color-red-500)]" : "", l = `dropdown-src-element bg-[var(--color-white)] flex px-3 py-2 ${U ? "border-0" : `border rounded-md ${r || e}`} flex items-center ${M}`;
     return /* @__PURE__ */ t.createElement("div", {
-      className: r,
-      role: "combobox",
-      "aria-expanded": i,
-      "aria-haspopup": "listbox",
-      "aria-label": b,
-      "aria-disabled": u
+      className: l
     }, /* @__PURE__ */ t.createElement("div", {
       className: "flex-1 min-w-0",
       "data-automation-id": o?.dropDownSelectAutomationId || "selected-dropdown-value"
-    }, $(a[0], !0)), /* @__PURE__ */ t.createElement("div", {
+    }, V(a[0], !0)), /* @__PURE__ */ t.createElement("div", {
       className: "flex-shrink-0 ml-2",
       "aria-hidden": "true"
-    }, /* @__PURE__ */ t.createElement(B, {
+    }, /* @__PURE__ */ t.createElement(A, {
       name: "chevron",
       rotation: i ? "180" : "0",
       className: "transition-transform",
-      stroke: S
+      stroke: g
     })));
-  };
+  }, X = () => j || "Select option";
   return /* @__PURE__ */ t.createElement("div", {
     className: `se-design-dropdown-container${o?.className ? ` ${o?.className}` : ""}`,
     style: o?.style
@@ -175,21 +171,23 @@ const ae = (o) => {
     className: "se-design-dropdown-label mb-[3px] text-[var(--color-gray-700)] text-sm"
   }, o?.label), /* @__PURE__ */ t.createElement("div", {
     style: o?.style,
-    className: `${u ? "bg-[var(--color-gray-50)] rounded-md cursor-not-allowed" : ""}`
-  }, /* @__PURE__ */ t.createElement(G, {
-    ref: y,
-    renderPopoverContents: C || (v ? F : J),
+    className: `${y ? "bg-[var(--color-gray-50)] rounded-md cursor-not-allowed" : ""}`
+  }, /* @__PURE__ */ t.createElement(Y, {
+    ref: p,
+    renderPopoverContents: E || (v ? F : J),
     contentWidth: "full",
     renderPopoverSrcElement: K,
-    onPopoverToggle: (e) => M(e),
-    disabled: u,
+    onPopoverToggle: (e) => P(e),
+    disabled: y,
     automationId: o?.dropDownSrcAutomationId,
-    popoverContentAutomationId: o?.dropDownContentAutomationId
-  })), E && /* @__PURE__ */ t.createElement("div", {
+    popoverContentAutomationId: o?.dropDownContentAutomationId,
+    ariaLabel: X(),
+    sourceRole: "combobox"
+  })), S && /* @__PURE__ */ t.createElement("div", {
     className: "text-[var(--color-red-500)] text-sm"
-  }, j));
+  }, O));
 };
 export {
-  ae as Dropdown
+  ce as Dropdown
 };
 //# sourceMappingURL=index23.js.map

package/dist/index23.js.map

@@ -1 +1 @@
-{"version":3,"file":"index23.js","sources":["../src/components/Dropdown/index.tsx"],"sourcesContent":["import React, { FC, useState, useRef, useEffect } from 'react';\n\nimport { Popover, PopoverHandle } from 'src/components/Popover';\nimport { Icon } from 'components/Icon';\nimport { Checkbox } from '../Checkbox';\nimport { Button } from '../Button';\nimport { InputWithIcon } from '../InputWithIcon';\n\ntype DropdownValue = {\n  [key: string]: any;\n};\n\ntype DropdownProps = {\n  label?: string;\n  type: 'select' | 'multi-select';\n  dropDownOptions?: DropdownValue[];\n  defaultText?: string;\n  selectBy?: string;\n  optionsUniqueBy?: string;\n  displaySelected?: boolean;\n  defaultSelectedValue?: DropdownValue | DropdownValue[];\n  onOptionClick?: (selectedValue: DropdownValue) => void;\n  style?: React.CSSProperties;\n  renderOptionChip?: (option: DropdownValue, srcOption: boolean) => React.ReactNode;\n  className?: string;\n  iconColor?: string;\n  disabled?: boolean;\n  dropdownClassName?: string;\n  hasError?: boolean;\n  errorMessage?: string;\n  onApply?: (selectedValue: DropdownValue[]) => void;\n  customDropdownContent?: () => React.ReactNode;\n  isBorderless?: boolean;\n  dropDownSrcAutomationId?: string;\n  dropDownSelectAutomationId?: string;\n  dropDownContentAutomationId?: string;\n  shouldShowSearch?: boolean;\n  searchPlaceholder?: string;\n  searchResultEmptyMessage?: string;\n};\n\nexport const Dropdown: FC<DropdownProps> = (props) => {\n  const [isDropDownOpen, setIsDropDownOpen] = useState(false);\n  const [searchQuery, setSearchQuery] = useState('');\n  const [selectedDropDownValues, setSelectedDropDownValues] = useState<DropdownValue[]>(() =>\n    props?.defaultSelectedValue\n      ? Array.isArray(props?.defaultSelectedValue)\n        ? props?.defaultSelectedValue\n        : [props.defaultSelectedValue]\n      : []\n  );\n  const popoverRef = useRef<HTMLDivElement & PopoverHandle>(null);\n\n  const {\n    selectBy = '',\n    optionsUniqueBy = '',\n    displaySelected = false,\n    dropDownOptions,\n    defaultText = 'Select',\n    iconColor = 'var(--color-gray-700)',\n    disabled = false,\n    dropdownClassName = '',\n    hasError = false,\n    errorMessage = '',\n    customDropdownContent = null,\n    isBorderless = false,\n    shouldShowSearch = false,\n    searchPlaceholder = 'Search...',\n    searchResultEmptyMessage = 'No results found'\n  } = props;\n\n  useEffect(() => {\n    const newValues = props?.defaultSelectedValue\n      ? Array.isArray(props?.defaultSelectedValue)\n        ? props?.defaultSelectedValue\n        : [props.defaultSelectedValue]\n      : [];\n    setSelectedDropDownValues(newValues);\n  }, [props?.defaultSelectedValue]);\n\n  useEffect(() => {\n    if (!isDropDownOpen) {\n      setSearchQuery('');\n    }\n  }, [isDropDownOpen]);\n\n  const isMultiSelect = props?.type === 'multi-select';\n\n  const getFilteredOptions = () => {\n    if (!searchQuery.trim()) {\n      return dropDownOptions || [];\n    }\n    return (dropDownOptions || []).filter((option) => {\n      const optionValue = option?.[selectBy]?.toString().toLowerCase() || '';\n      return optionValue.includes(searchQuery.toLowerCase());\n    });\n  };\n\n  const handleDropDownOptionClick = (dropDownOption: any) => {\n    setSelectedDropDownValues([dropDownOption]);\n    popoverRef.current?.togglePopover();\n    props?.onOptionClick?.(dropDownOption);\n  };\n\n  const getSelectedDropDownValue = (option: DropdownValue) => {\n    if (isMultiSelect) {\n      return defaultText;\n    }\n    return option?.[selectBy] || defaultText;\n  };\n\n  const clearSelectedDropDownValues = () => {\n    setSelectedDropDownValues([]);\n  };\n\n  const optionChip = (option: DropdownValue, srcOption: boolean = false) => {\n    if (props?.renderOptionChip) {\n      return props?.renderOptionChip(option, srcOption);\n    }\n\n    if (isMultiSelect && selectedDropDownValues?.length > 0) {\n      const firstSelectedLabel = selectedDropDownValues[0]?.[selectBy] || '';\n      const remainingCount = selectedDropDownValues.length - 1;\n\n      // For multiple selections: text takes remaining space, count takes minimum space needed\n      return (\n        <div className={`option-chip flex items-center w-full`}>\n          <div\n            className={`${remainingCount > 0 ? 'w-full' : 'flex-1'} truncate`}\n          >{`${defaultText}: ${firstSelectedLabel}`}</div>\n          {remainingCount > 0 && <div className=\"flex-shrink-0\">+{remainingCount}</div>}\n        </div>\n      );\n    }\n\n    return <p className={`option-chip flex flex-1 items-center justify-between`}>{getSelectedDropDownValue(option)}</p>;\n  };\n\n  const renderSearchBar = () => {\n    return (\n      <div className=\" w-full relative flex items-center border-b border-[var(--color-gray-300)]\">\n        <InputWithIcon\n          leftIcon={{ name: 'search', position: 'left', style: { color: 'var(--color-gray-500)' } }}\n          value={searchQuery}\n          onChange={(value) => setSearchQuery(value)}\n          placeholder={searchPlaceholder}\n          style={{ margin: 0, gap: 0 }}\n          inputStyle={{ width: '100%', border: 'none', outline: 'none' }}\n        />\n      </div>\n    );\n  };\n\n  const dropDownOptionJsx = (dropDownOption: DropdownValue, index: number) => {\n    const optionTxt = dropDownOption[selectBy];\n    const dropDownSelectedValue = selectedDropDownValues[0]?.[selectBy] || defaultText;\n    const selectByUniqueId = optionsUniqueBy?.length\n      ? dropDownOption[optionsUniqueBy] == selectedDropDownValues[0]?.[optionsUniqueBy]\n      : true;\n    const isOptionSelected = displaySelected && optionTxt === dropDownSelectedValue && selectByUniqueId;\n    return (\n      <div\n        key={`$drop-option-${crypto.randomUUID()}`}\n        className={`option break-words px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between ${\n          isOptionSelected ? 'selected' : ''\n        }`}\n        onClick={() => handleDropDownOptionClick(dropDownOption)}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            handleDropDownOptionClick(dropDownOption);\n          }\n        }}\n        role=\"option\"\n        aria-selected={isOptionSelected}\n        tabIndex={0}\n        data-automation-id={`dropdown-option-${dropDownOption?.automationId || index}`}\n      >\n        {optionChip({ ...dropDownOption, isOptionSelected }, false)}\n        {isOptionSelected && <Icon name=\"checkmark\" stroke={iconColor} />}\n      </div>\n    );\n  };\n\n  const renderDropdownContents = () => {\n    const filteredOptions = getFilteredOptions();\n    return (\n      <div className=\"dropdown-content dropdown-options\" role=\"listbox\" aria-label=\"Dropdown options\">\n        {shouldShowSearch && renderSearchBar()}\n        <div className=\"flex flex-col max-h-80 overflow-y-auto\">\n          {filteredOptions.length > 0 ? (\n            filteredOptions.map((dropDownOption, index) => dropDownOptionJsx(dropDownOption, index))\n          ) : (\n            <div className=\"px-3 py-4 text-center text-[var(--color-gray-500)] text-sm\" role=\"status\" aria-live=\"polite\">{searchResultEmptyMessage}</div>\n          )}\n        </div>\n      </div>\n    );\n  };\n\n  const handleMultiSelectDropdownOptionClick = (isSelected: boolean, dropDownOption: DropdownValue) => {\n    let newSelectedDropDownValues: DropdownValue[] = [];\n    if (isSelected) {\n      newSelectedDropDownValues = [...selectedDropDownValues, dropDownOption];\n    } else {\n      newSelectedDropDownValues = selectedDropDownValues?.filter(\n        (option) => option[optionsUniqueBy] !== dropDownOption[optionsUniqueBy]\n      );\n    }\n    setSelectedDropDownValues(newSelectedDropDownValues);\n  };\n\n  const handleApplySelectedDropDownValues = () => {\n    popoverRef.current?.togglePopover();\n    props?.onApply?.(selectedDropDownValues);\n  };\n\n  const multiSelectDropdownOptionJSX = (dropDownOption: DropdownValue) => {\n    const isOptionSelected = selectedDropDownValues.some(\n      (option) => option[optionsUniqueBy] === dropDownOption[optionsUniqueBy]\n    );\n    return (\n      <div\n        key={`$drop-option-${crypto.randomUUID()}`}\n        className=\"option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between\"\n      >\n        <Checkbox\n          automationId=\"checkbox\"\n          className=\"checkbox\"\n          defaultChecked={isOptionSelected}\n          onChange={(value) => handleMultiSelectDropdownOptionClick(value, dropDownOption)}\n          label={dropDownOption?.label}\n        />\n      </div>\n    );\n  };\n\n  const renderMultiSelectDropdownContents = () => {\n    const filteredOptions = getFilteredOptions();\n    return (\n      <div className=\"dropdown-content dropdown-options\" role=\"listbox\" aria-label=\"Multi-select dropdown options\" aria-multiselectable=\"true\">\n        {shouldShowSearch && renderSearchBar()}\n        <div className=\"flex flex-col max-h-80 overflow-y-auto\">\n          {filteredOptions.length > 0 ? (\n            filteredOptions.map((dropDownOption) => multiSelectDropdownOptionJSX(dropDownOption))\n          ) : (\n            <div className=\"px-3 py-4 text-center text-[var(--color-gray-500)] text-sm\" role=\"status\" aria-live=\"polite\">{searchResultEmptyMessage}</div>\n          )}\n        </div>\n        <div className=\"flex items-center justify-end gap-4 p-3 border-t border-[var(--color-gray-200)]\">\n          <Button label=\"Clear\" type=\"link\" size=\"sm\" onClick={clearSelectedDropDownValues} />\n          <Button label=\"Apply\" type=\"primary\" size=\"sm\" onClick={handleApplySelectedDropDownValues} />\n        </div>\n      </div>\n    );\n  };\n\n  const renderDropdownSelect = () => {\n    const borderColor = isDropDownOpen\n      ? 'border-[var(--color-blue-500)]'\n      : disabled\n      ? 'border-[var(--color-gray-300)]'\n      : 'border-[var(--color-gray-600)]';\n    const errorBorderColor = hasError ? 'border-[var(--color-red-500)]' : '';\n    const dropDownSelectClass = `dropdown-src-element bg-[var(--color-white)] flex px-3 py-2 ${\n      isBorderless ? 'border-0' : `border rounded-md ${errorBorderColor ? errorBorderColor : borderColor}`\n    } flex items-center ${dropdownClassName}`;\n    const selectedValue = selectedDropDownValues[0]?.[selectBy] || defaultText;\n    const ariaLabel = props?.label ? `${props.label}: ${selectedValue}` : `Select option, currently selected: ${selectedValue}`;\n\n    return (\n      <div \n        className={dropDownSelectClass}\n        role=\"combobox\"\n        aria-expanded={isDropDownOpen}\n        aria-haspopup=\"listbox\"\n        aria-label={ariaLabel}\n        aria-disabled={disabled}\n      >\n        <div\n          className=\"flex-1 min-w-0\"\n          data-automation-id={props?.dropDownSelectAutomationId || 'selected-dropdown-value'}\n        >\n          {optionChip(selectedDropDownValues[0], true)}\n        </div>\n        <div className=\"flex-shrink-0 ml-2\" aria-hidden=\"true\">\n          <Icon\n            name={'chevron'}\n            rotation={isDropDownOpen ? '180' : '0'}\n            className={`transition-transform`}\n            stroke={iconColor}\n          />\n        </div>\n      </div>\n    );\n  };\n\n  return (\n    <div\n      className={`se-design-dropdown-container${props?.className ? ` ${props?.className}` : ''}`}\n      style={props?.style}\n    >\n      {props?.label && (\n        <div className=\"se-design-dropdown-label mb-[3px] text-[var(--color-gray-700)] text-sm\">{props?.label}</div>\n      )}\n      <div\n        style={props?.style}\n        className={`${disabled ? 'bg-[var(--color-gray-50)] rounded-md cursor-not-allowed' : ''}`}\n      >\n        <Popover\n          ref={popoverRef}\n          renderPopoverContents={\n            customDropdownContent\n              ? customDropdownContent\n              : isMultiSelect\n              ? renderMultiSelectDropdownContents\n              : renderDropdownContents\n          }\n          contentWidth={'full'}\n          renderPopoverSrcElement={renderDropdownSelect}\n          onPopoverToggle={(value) => setIsDropDownOpen(value)}\n          disabled={disabled}\n          automationId={props?.dropDownSrcAutomationId}\n          popoverContentAutomationId={props?.dropDownContentAutomationId}\n        />\n      </div>\n      {hasError && <div className=\"text-[var(--color-red-500)] text-sm\">{errorMessage}</div>}\n    </div>\n  );\n};\n"],"names":["React__default","useState","useRef","useEffect","Popover","Icon","Checkbox","Button","InputWithIcon","Dropdown","props","isDropDownOpen","setIsDropDownOpen","searchQuery","setSearchQuery","selectedDropDownValues","setSelectedDropDownValues","defaultSelectedValue","Array","isArray","popoverRef","selectBy","optionsUniqueBy","displaySelected","dropDownOptions","defaultText","iconColor","disabled","dropdownClassName","hasError","errorMessage","customDropdownContent","isBorderless","shouldShowSearch","searchPlaceholder","searchResultEmptyMessage","newValues","isMultiSelect","type","getFilteredOptions","trim","filter","option","toString","toLowerCase","includes","handleDropDownOptionClick","dropDownOption","current","togglePopover","onOptionClick","getSelectedDropDownValue","clearSelectedDropDownValues","optionChip","srcOption","renderOptionChip","length","firstSelectedLabel","remainingCount","React","createElement","className","renderSearchBar","leftIcon","name","position","style","color","value","onChange","placeholder","margin","gap","inputStyle","width","border","outline","dropDownOptionJsx","index","optionTxt","dropDownSelectedValue","selectByUniqueId","isOptionSelected","key","crypto","randomUUID","onClick","onKeyDown","e","preventDefault","role","tabIndex","automationId","stroke","renderDropdownContents","filteredOptions","map","handleMultiSelectDropdownOptionClick","isSelected","newSelectedDropDownValues","handleApplySelectedDropDownValues","onApply","multiSelectDropdownOptionJSX","some","defaultChecked","label","renderMultiSelectDropdownContents","size","renderDropdownSelect","borderColor","errorBorderColor","dropDownSelectClass","selectedValue","ariaLabel","dropDownSelectAutomationId","rotation","ref","renderPopoverContents","contentWidth","renderPopoverSrcElement","onPopoverToggle","dropDownSrcAutomationId","popoverContentAutomationId","dropDownContentAutomationId"],"mappings":"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"}
+{"version":3,"file":"index23.js","sources":["../src/components/Dropdown/index.tsx"],"sourcesContent":["import React, { FC, useState, useRef, useEffect } from 'react';\n\nimport { Popover, PopoverHandle } from 'src/components/Popover';\nimport { Icon } from 'components/Icon';\nimport { Checkbox } from '../Checkbox';\nimport { Button } from '../Button';\nimport { InputWithIcon } from '../InputWithIcon';\n\ntype DropdownValue = {\n  [key: string]: any;\n};\n\ntype DropdownProps = {\n  label?: string;\n  ariaLabel?: string;\n  type: 'select' | 'multi-select';\n  dropDownOptions?: DropdownValue[];\n  defaultText?: string;\n  selectBy?: string;\n  optionsUniqueBy?: string;\n  displaySelected?: boolean;\n  defaultSelectedValue?: DropdownValue | DropdownValue[];\n  onOptionClick?: (selectedValue: DropdownValue) => void;\n  style?: React.CSSProperties;\n  renderOptionChip?: (option: DropdownValue, srcOption: boolean) => React.ReactNode;\n  className?: string;\n  iconColor?: string;\n  disabled?: boolean;\n  dropdownClassName?: string;\n  hasError?: boolean;\n  errorMessage?: string;\n  onApply?: (selectedValue: DropdownValue[]) => void;\n  customDropdownContent?: () => React.ReactNode;\n  isBorderless?: boolean;\n  dropDownSrcAutomationId?: string;\n  dropDownSelectAutomationId?: string;\n  dropDownContentAutomationId?: string;\n  shouldShowSearch?: boolean;\n  searchPlaceholder?: string;\n  searchResultEmptyMessage?: string;\n};\n\nexport const Dropdown: FC<DropdownProps> = (props) => {\n  const [isDropDownOpen, setIsDropDownOpen] = useState(false);\n  const [searchQuery, setSearchQuery] = useState('');\n  const [selectedDropDownValues, setSelectedDropDownValues] = useState<DropdownValue[]>(() =>\n    props?.defaultSelectedValue\n      ? Array.isArray(props?.defaultSelectedValue)\n        ? props?.defaultSelectedValue\n        : [props.defaultSelectedValue]\n      : []\n  );\n  const popoverRef = useRef<HTMLDivElement & PopoverHandle>(null);\n\n  const {\n    selectBy = '',\n    optionsUniqueBy = '',\n    displaySelected = false,\n    dropDownOptions,\n    defaultText = 'Select',\n    iconColor = 'var(--color-gray-700)',\n    disabled = false,\n    dropdownClassName = '',\n    hasError = false,\n    errorMessage = '',\n    customDropdownContent = null,\n    isBorderless = false,\n    shouldShowSearch = false,\n    searchPlaceholder = 'Search...',\n    searchResultEmptyMessage = 'No results found',\n    ariaLabel = ''\n  } = props;\n\n  useEffect(() => {\n    const newValues = props?.defaultSelectedValue\n      ? Array.isArray(props?.defaultSelectedValue)\n        ? props?.defaultSelectedValue\n        : [props.defaultSelectedValue]\n      : [];\n    setSelectedDropDownValues(newValues);\n  }, [props?.defaultSelectedValue]);\n\n  useEffect(() => {\n    if (!isDropDownOpen) {\n      setSearchQuery('');\n    }\n  }, [isDropDownOpen]);\n\n  const isMultiSelect = props?.type === 'multi-select';\n\n  const getFilteredOptions = () => {\n    if (!searchQuery.trim()) {\n      return dropDownOptions || [];\n    }\n    return (dropDownOptions || []).filter((option) => {\n      const optionValue = option?.[selectBy]?.toString().toLowerCase() || '';\n      return optionValue.includes(searchQuery.toLowerCase());\n    });\n  };\n\n  const handleDropDownOptionClick = (dropDownOption: any) => {\n    setSelectedDropDownValues([dropDownOption]);\n    popoverRef.current?.togglePopover();\n    props?.onOptionClick?.(dropDownOption);\n  };\n\n  const getSelectedDropDownValue = (option: DropdownValue) => {\n    if (isMultiSelect) {\n      return defaultText;\n    }\n    return option?.[selectBy] || defaultText;\n  };\n\n  const clearSelectedDropDownValues = () => {\n    setSelectedDropDownValues([]);\n  };\n\n  const optionChip = (option: DropdownValue, srcOption: boolean = false) => {\n    if (props?.renderOptionChip) {\n      return props?.renderOptionChip(option, srcOption);\n    }\n\n    if (isMultiSelect && selectedDropDownValues?.length > 0) {\n      const firstSelectedLabel = selectedDropDownValues[0]?.[selectBy] || '';\n      const remainingCount = selectedDropDownValues.length - 1;\n\n      // For multiple selections: text takes remaining space, count takes minimum space needed\n      return (\n        <div className={`option-chip flex items-center w-full`}>\n          <div\n            className={`${remainingCount > 0 ? 'w-full' : 'flex-1'} truncate`}\n          >{`${defaultText}: ${firstSelectedLabel}`}</div>\n          {remainingCount > 0 && <div className=\"flex-shrink-0\">+{remainingCount}</div>}\n        </div>\n      );\n    }\n\n    return <p className={`option-chip flex flex-1 items-center justify-between`}>{getSelectedDropDownValue(option)}</p>;\n  };\n\n  const renderSearchBar = () => {\n    return (\n      <div className=\" w-full relative flex items-center border-b border-[var(--color-gray-300)]\">\n        <InputWithIcon\n          leftIcon={{ name: 'search', position: 'left', style: { color: 'var(--color-gray-500)' } }}\n          value={searchQuery}\n          onChange={(value) => setSearchQuery(value)}\n          placeholder={searchPlaceholder}\n          style={{ margin: 0, gap: 0 }}\n          inputStyle={{ width: '100%', border: 'none', outline: 'none' }}\n        />\n      </div>\n    );\n  };\n\n  const dropDownOptionJsx = (dropDownOption: DropdownValue, index: number) => {\n    const optionTxt = dropDownOption[selectBy];\n    const dropDownSelectedValue = selectedDropDownValues[0]?.[selectBy] || defaultText;\n    const selectByUniqueId = optionsUniqueBy?.length\n      ? dropDownOption[optionsUniqueBy] == selectedDropDownValues[0]?.[optionsUniqueBy]\n      : true;\n    const isOptionSelected = displaySelected && optionTxt === dropDownSelectedValue && selectByUniqueId;\n    return (\n      <div\n        key={`$drop-option-${crypto.randomUUID()}`}\n        className={`option break-words px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between ${\n          isOptionSelected ? 'selected' : ''\n        }`}\n        onClick={() => handleDropDownOptionClick(dropDownOption)}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            handleDropDownOptionClick(dropDownOption);\n          }\n        }}\n        role=\"option\"\n        aria-selected={isOptionSelected ? 'true' : 'false'}\n        tabIndex={0}\n        data-automation-id={`dropdown-option-${dropDownOption?.automationId || index}`}\n      >\n        {optionChip({ ...dropDownOption, isOptionSelected }, false)}\n        {isOptionSelected && <Icon name=\"checkmark\" stroke={iconColor} />}\n      </div>\n    );\n  };\n\n  const renderDropdownContents = () => {\n    const filteredOptions = getFilteredOptions();\n    return (\n      <div className=\"dropdown-content dropdown-options\" role=\"listbox\" aria-label=\"Dropdown options\">\n        {shouldShowSearch && renderSearchBar()}\n        <div className=\"flex flex-col max-h-80 overflow-y-auto\">\n          {filteredOptions.length > 0 ? (\n            filteredOptions.map((dropDownOption, index) => dropDownOptionJsx(dropDownOption, index))\n          ) : (\n            <div className=\"px-3 py-4 text-center text-[var(--color-gray-500)] text-sm\" role=\"status\" aria-live=\"polite\">{searchResultEmptyMessage}</div>\n          )}\n        </div>\n      </div>\n    );\n  };\n\n  const handleMultiSelectDropdownOptionClick = (isSelected: boolean, dropDownOption: DropdownValue) => {\n    let newSelectedDropDownValues: DropdownValue[] = [];\n    if (isSelected) {\n      newSelectedDropDownValues = [...selectedDropDownValues, dropDownOption];\n    } else {\n      newSelectedDropDownValues = selectedDropDownValues?.filter(\n        (option) => option[optionsUniqueBy] !== dropDownOption[optionsUniqueBy]\n      );\n    }\n    setSelectedDropDownValues(newSelectedDropDownValues);\n  };\n\n  const handleApplySelectedDropDownValues = () => {\n    popoverRef.current?.togglePopover();\n    props?.onApply?.(selectedDropDownValues);\n  };\n\n  const multiSelectDropdownOptionJSX = (dropDownOption: DropdownValue) => {\n    const isOptionSelected = selectedDropDownValues.some(\n      (option) => option[optionsUniqueBy] === dropDownOption[optionsUniqueBy]\n    );\n    return (\n      <div\n        key={`$drop-option-${crypto.randomUUID()}`}\n        className=\"option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between\"\n      >\n        <Checkbox\n          automationId=\"checkbox\"\n          className=\"checkbox\"\n          defaultChecked={isOptionSelected}\n          onChange={(value) => handleMultiSelectDropdownOptionClick(value, dropDownOption)}\n          label={dropDownOption?.label}\n        />\n      </div>\n    );\n  };\n\n  const renderMultiSelectDropdownContents = () => {\n    const filteredOptions = getFilteredOptions();\n    return (\n      <div className=\"dropdown-content dropdown-options\" role=\"listbox\" aria-label=\"Multi-select dropdown options\" aria-multiselectable=\"true\">\n        {shouldShowSearch && renderSearchBar()}\n        <div className=\"flex flex-col max-h-80 overflow-y-auto\">\n          {filteredOptions.length > 0 ? (\n            filteredOptions.map((dropDownOption) => multiSelectDropdownOptionJSX(dropDownOption))\n          ) : (\n            <div className=\"px-3 py-4 text-center text-[var(--color-gray-500)] text-sm\" role=\"status\" aria-live=\"polite\">{searchResultEmptyMessage}</div>\n          )}\n        </div>\n        <div className=\"flex items-center justify-end gap-4 p-3 border-t border-[var(--color-gray-200)]\">\n          <Button label=\"Clear\" type=\"link\" size=\"sm\" onClick={clearSelectedDropDownValues} />\n          <Button label=\"Apply\" type=\"primary\" size=\"sm\" onClick={handleApplySelectedDropDownValues} />\n        </div>\n      </div>\n    );\n  };\n\n  const renderDropdownSelect = () => {\n    const borderColor = isDropDownOpen\n      ? 'border-[var(--color-blue-500)]'\n      : disabled\n      ? 'border-[var(--color-gray-300)]'\n      : 'border-[var(--color-gray-600)]';\n    const errorBorderColor = hasError ? 'border-[var(--color-red-500)]' : '';\n    const dropDownSelectClass = `dropdown-src-element bg-[var(--color-white)] flex px-3 py-2 ${\n      isBorderless ? 'border-0' : `border rounded-md ${errorBorderColor ? errorBorderColor : borderColor}`\n    } flex items-center ${dropdownClassName}`;\n\n    return (\n      <div className={dropDownSelectClass}>\n        <div\n          className=\"flex-1 min-w-0\"\n          data-automation-id={props?.dropDownSelectAutomationId || 'selected-dropdown-value'}\n        >\n          {optionChip(selectedDropDownValues[0], true)}\n        </div>\n        <div className=\"flex-shrink-0 ml-2\" aria-hidden=\"true\">\n          <Icon\n            name={'chevron'}\n            rotation={isDropDownOpen ? '180' : '0'}\n            className={`transition-transform`}\n            stroke={iconColor}\n          />\n        </div>\n      </div>\n    );\n  };\n\n  const getDropdownAriaLabel = () => {\n    return ariaLabel || `Select option`;\n  };\n\n  return (\n    <div\n      className={`se-design-dropdown-container${props?.className ? ` ${props?.className}` : ''}`}\n      style={props?.style}\n    >\n      {props?.label && (\n        <div className=\"se-design-dropdown-label mb-[3px] text-[var(--color-gray-700)] text-sm\">{props?.label}</div>\n      )}\n      <div\n        style={props?.style}\n        className={`${disabled ? 'bg-[var(--color-gray-50)] rounded-md cursor-not-allowed' : ''}`}\n      >\n        <Popover\n          ref={popoverRef}\n          renderPopoverContents={\n            customDropdownContent\n              ? customDropdownContent\n              : isMultiSelect\n              ? renderMultiSelectDropdownContents\n              : renderDropdownContents\n          }\n          contentWidth={'full'}\n          renderPopoverSrcElement={renderDropdownSelect}\n          onPopoverToggle={(value) => setIsDropDownOpen(value)}\n          disabled={disabled}\n          automationId={props?.dropDownSrcAutomationId}\n          popoverContentAutomationId={props?.dropDownContentAutomationId}\n          ariaLabel={getDropdownAriaLabel()}\n          sourceRole=\"combobox\"\n        />\n      </div>\n      {hasError && <div className=\"text-[var(--color-red-500)] text-sm\">{errorMessage}</div>}\n    </div>\n  );\n};\n"],"names":["React__default","useState","useRef","useEffect","Popover","Icon","Checkbox","Button","InputWithIcon","Dropdown","props","isDropDownOpen","setIsDropDownOpen","searchQuery","setSearchQuery","selectedDropDownValues","setSelectedDropDownValues","defaultSelectedValue","Array","isArray","popoverRef","selectBy","optionsUniqueBy","displaySelected","dropDownOptions","defaultText","iconColor","disabled","dropdownClassName","hasError","errorMessage","customDropdownContent","isBorderless","shouldShowSearch","searchPlaceholder","searchResultEmptyMessage","ariaLabel","newValues","isMultiSelect","type","getFilteredOptions","trim","filter","option","toString","toLowerCase","includes","handleDropDownOptionClick","dropDownOption","current","togglePopover","onOptionClick","getSelectedDropDownValue","clearSelectedDropDownValues","optionChip","srcOption","renderOptionChip","length","firstSelectedLabel","remainingCount","React","createElement","className","renderSearchBar","leftIcon","name","position","style","color","value","onChange","placeholder","margin","gap","inputStyle","width","border","outline","dropDownOptionJsx","index","optionTxt","dropDownSelectedValue","selectByUniqueId","isOptionSelected","key","crypto","randomUUID","onClick","onKeyDown","e","preventDefault","role","tabIndex","automationId","stroke","renderDropdownContents","filteredOptions","map","handleMultiSelectDropdownOptionClick","isSelected","newSelectedDropDownValues","handleApplySelectedDropDownValues","onApply","multiSelectDropdownOptionJSX","some","defaultChecked","label","renderMultiSelectDropdownContents","size","renderDropdownSelect","borderColor","errorBorderColor","dropDownSelectClass","dropDownSelectAutomationId","rotation","getDropdownAriaLabel","ref","renderPopoverContents","contentWidth","renderPopoverSrcElement","onPopoverToggle","dropDownSrcAutomationId","popoverContentAutomationId","dropDownContentAutomationId","sourceRole"],"mappings":"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"}

package/dist/index5.js

@@ -5,8 +5,8 @@ import d from "./index60.js";
 import h from "./index61.js";
 import u from "./index62.js";
 import k from "./index63.js";
-import x from "./index64.js";
-import A from "./index65.js";
+import A from "./index64.js";
+import x from "./index65.js";
 import w from "./index66.js";
 import I from "./index67.js";
 import y from "./index68.js";
@@ -59,8 +59,8 @@ import ds from "./index114.js";
 import hs from "./index115.js";
 import us from "./index116.js";
 import ks from "./index117.js";
-import xs from "./index118.js";
-import As from "./index119.js";
+import As from "./index118.js";
+import xs from "./index119.js";
 import ws from "./index120.js";
 import Is from "./index121.js";
 import ys from "./index122.js";
@@ -106,8 +106,8 @@ const ro = /* @__PURE__ */ Object.assign({
   "/src/assets/icons/attachment.svg": h,
   "/src/assets/icons/back.svg": u,
   "/src/assets/icons/banner-demo-img.svg": k,
-  "/src/assets/icons/bell-notification.svg": x,
-  "/src/assets/icons/card.svg": A,
+  "/src/assets/icons/bell-notification.svg": A,
+  "/src/assets/icons/card.svg": x,
   "/src/assets/icons/checkbox-disabled-minus.svg": w,
   "/src/assets/icons/checkbox-disabled-tick.svg": I,
   "/src/assets/icons/checkbox-disabled.svg": y,
@@ -160,8 +160,8 @@ const ro = /* @__PURE__ */ Object.assign({
   "/src/assets/icons/outlook.svg": hs,
   "/src/assets/icons/padlock.svg": us,
   "/src/assets/icons/pages.svg": ks,
-  "/src/assets/icons/pdf-file.svg": xs,
-  "/src/assets/icons/people.svg": As,
+  "/src/assets/icons/pdf-file.svg": As,
+  "/src/assets/icons/people.svg": xs,
   "/src/assets/icons/photo.svg": ws,
   "/src/assets/icons/radio-field.svg": Is,
   "/src/assets/icons/radio-filled.svg": ys,
@@ -198,15 +198,15 @@ const ro = /* @__PURE__ */ Object.assign({
   "/src/assets/icons/white-close.svg": _o,
   "/src/assets/icons/widget-demo-image.svg": to
 }), m = (s, _, t, o) => {
-  _ && s.hasAttribute("fill") && s.getAttribute("fill") !== "none" && s.setAttribute("fill", _), t && s.hasAttribute("stroke") && s.setAttribute("stroke", t), o && s.hasAttribute("width") && s.setAttribute("width", o.toString()), o && s.hasAttribute("height") && s.setAttribute("height", o.toString()), Array.from(s.children).forEach((i) => {
-    m(i, _, t);
+  _ && s.hasAttribute("fill") && s.getAttribute("fill") !== "none" && s.setAttribute("fill", _), t && s.hasAttribute("stroke") && s.setAttribute("stroke", t), o && s.hasAttribute("width") && s.setAttribute("width", o.toString()), o && s.hasAttribute("height") && s.setAttribute("height", o.toString()), Array.from(s.children).forEach((r) => {
+    m(r, _, t);
   });
 }, z_ = (s) => {
   const {
     name: _ = "",
     className: t = "",
     onClick: o,
-    fill: i,
+    fill: r,
     stroke: g,
     rotation: v = "0",
     size: a,
@@ -219,15 +219,15 @@ const ro = /* @__PURE__ */ Object.assign({
   }, e = ro[`/src/assets/icons/${_}.svg`];
   return e ? /* @__PURE__ */ c.createElement("div", {
     className: `se-design-svg-wrapper transition-transform duration-250 ease-linear ${o ? "cursor-pointer" : ""} ${t} ${n[v]}`,
-    onClick: (r) => {
-      l && r.stopPropagation(), o?.();
+    onClick: (i) => {
+      l && i.stopPropagation(), o?.();
     },
     "data-automation-id": s?.automationId
   }, /* @__PURE__ */ c.createElement(io, {
     src: e,
     wrapper: "span",
-    beforeInjection: (r) => {
-      m(r, i, g, a);
+    beforeInjection: (i) => {
+      i.setAttribute("aria-hidden", "true"), i.setAttribute("role", "none"), m(i, r, g, a);
     }
   })) : (console.error(`Icon "${_}" not found in ICON_MAP.`), null);
 };

package/dist/index5.js.map

@@ -1 +1 @@
-{"version":3,"file":"index5.js","sources":["../src/components/Icon/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { ReactSVG } from 'react-svg';\n\n// Dynamically import icons using Vite's asset handling\nconst ICON_MAP: Record<string, string> = (import.meta as any).glob('/src/assets/icons/*.svg', {\n  eager: true,\n  query: '?url',\n  import: 'default'\n});\n\nexport type IconProps = {\n  name: string;\n  className?: string;\n  onClick?: () => void;\n  fill?: string;\n  stroke?: string;\n  rotation?: '0' | '90' | '180' | '270';\n  size?: number;\n  shouldStopPropagation?: boolean;\n  automationId?: string;\n};\n\nconst applyAttributesToElement = (element: Element, fill?: string, stroke?: string, size?: number) => {\n  // Only modify existing attributes\n  if (fill && element.hasAttribute('fill')) {\n    const currentFill = element.getAttribute('fill');\n    // Only update if the current fill is not \"none\"\n    if (currentFill !== 'none') {\n      element.setAttribute('fill', fill);\n    }\n  }\n\n  if (stroke && element.hasAttribute('stroke')) {\n    element.setAttribute('stroke', stroke);\n  }\n\n  if (size && element.hasAttribute('width')) {\n    element.setAttribute('width', size.toString());\n  }\n\n  if (size && element.hasAttribute('height')) {\n    element.setAttribute('height', size.toString());\n  }\n\n  // Recursively apply to all child elements\n  Array.from(element.children).forEach((child) => {\n    applyAttributesToElement(child, fill, stroke);\n  });\n};\n\nexport const Icon: FC<IconProps> = (props) => {\n  const {\n    name = '',\n    className = '',\n    onClick,\n    fill,\n    stroke,\n    rotation = '0',\n    size,\n    shouldStopPropagation = false\n  } = props;\n  const iconRotationClasses = {\n    '0': '',\n    '90': 'rotate-90',\n    '180': 'rotate-180',\n    '270': '-rotate-90'\n  };\n  const src = ICON_MAP[`/src/assets/icons/${name}.svg`];\n\n  if (!src) {\n    console.error(`Icon \"${name}\" not found in ICON_MAP.`);\n    return null;\n  }\n\n  return (\n    <div\n      className={`se-design-svg-wrapper transition-transform duration-250 ease-linear ${onClick ? 'cursor-pointer' : ''} ${className} ${iconRotationClasses[rotation]}`}\n      onClick={(e) => {\n        shouldStopPropagation && e.stopPropagation();\n        onClick?.();\n      }}\n      data-automation-id={props?.automationId}\n    >\n      <ReactSVG\n        src={src}\n        wrapper=\"span\"\n        beforeInjection={(svg) => {\n          applyAttributesToElement(svg, fill, stroke, size);\n        }}\n      />\n    </div>\n  );\n};\n"],"names":["ICON_MAP","import","applyAttributesToElement","element","fill","stroke","size","hasAttribute","getAttribute","setAttribute","toString","Array","from","children","forEach","child","Icon","props","name","className","onClick","rotation","shouldStopPropagation","iconRotationClasses","src","React","createElement","e","stopPropagation","automationId","ReactSVG","wrapper","beforeInjection","svg","console","error"],"mappings":"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"}
+{"version":3,"file":"index5.js","sources":["../src/components/Icon/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { ReactSVG } from 'react-svg';\n\n// Dynamically import icons using Vite's asset handling\nconst ICON_MAP: Record<string, string> = (import.meta as any).glob('/src/assets/icons/*.svg', {\n  eager: true,\n  query: '?url',\n  import: 'default'\n});\n\nexport type IconProps = {\n  name: string;\n  className?: string;\n  onClick?: () => void;\n  fill?: string;\n  stroke?: string;\n  rotation?: '0' | '90' | '180' | '270';\n  size?: number;\n  shouldStopPropagation?: boolean;\n  automationId?: string;\n};\n\nconst applyAttributesToElement = (element: Element, fill?: string, stroke?: string, size?: number) => {\n  // Only modify existing attributes\n  if (fill && element.hasAttribute('fill')) {\n    const currentFill = element.getAttribute('fill');\n    // Only update if the current fill is not \"none\"\n    if (currentFill !== 'none') {\n      element.setAttribute('fill', fill);\n    }\n  }\n\n  if (stroke && element.hasAttribute('stroke')) {\n    element.setAttribute('stroke', stroke);\n  }\n\n  if (size && element.hasAttribute('width')) {\n    element.setAttribute('width', size.toString());\n  }\n\n  if (size && element.hasAttribute('height')) {\n    element.setAttribute('height', size.toString());\n  }\n\n  // Recursively apply to all child elements\n  Array.from(element.children).forEach((child) => {\n    applyAttributesToElement(child, fill, stroke);\n  });\n};\n\nexport const Icon: FC<IconProps> = (props) => {\n  const {\n    name = '',\n    className = '',\n    onClick,\n    fill,\n    stroke,\n    rotation = '0',\n    size,\n    shouldStopPropagation = false\n  } = props;\n  const iconRotationClasses = {\n    '0': '',\n    '90': 'rotate-90',\n    '180': 'rotate-180',\n    '270': '-rotate-90'\n  };\n  const src = ICON_MAP[`/src/assets/icons/${name}.svg`];\n\n  if (!src) {\n    console.error(`Icon \"${name}\" not found in ICON_MAP.`);\n    return null;\n  }\n\n  return (\n    <div\n      className={`se-design-svg-wrapper transition-transform duration-250 ease-linear ${onClick ? 'cursor-pointer' : ''} ${className} ${iconRotationClasses[rotation]}`}\n      onClick={(e) => {\n        shouldStopPropagation && e.stopPropagation();\n        onClick?.();\n      }}\n      data-automation-id={props?.automationId}\n    >\n      <ReactSVG\n        src={src}\n        wrapper=\"span\"\n        beforeInjection={(svg) => {\n          svg.setAttribute('aria-hidden', 'true');\n          svg.setAttribute('role', 'none');\n          applyAttributesToElement(svg, fill, stroke, size);\n        }}\n      />\n    </div>\n  );\n};\n"],"names":["ICON_MAP","import","applyAttributesToElement","element","fill","stroke","size","hasAttribute","getAttribute","setAttribute","toString","Array","from","children","forEach","child","Icon","props","name","className","onClick","rotation","shouldStopPropagation","iconRotationClasses","src","React","createElement","e","stopPropagation","automationId","ReactSVG","wrapper","beforeInjection","svg","console","error"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "se-design",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "type": "module",
   "module": "dist/index.js",
   "exports": {