se-design 1.0.22 → 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

@@ -21,5 +21,6 @@ export interface PopoverProps {
     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 Q, useState as E, useRef as V, useEffect as C, useImperativeHandle as Y } from "react";
-import Z 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 oe = /* @__PURE__ */ Q(({
+const re = /* @__PURE__ */ Y(({
   className: v = "",
   automationId: g = "",
   position: f = "bottom-center",
@@ -19,12 +19,13 @@ const oe = /* @__PURE__ */ Q(({
   renderPopoverSrcElement: F,
   onPopoverToggle: j,
   isPopoverOpen: B,
-  disabled: h = !1,
+  disabled: w = !1,
   isWithPortal: b = !1,
   ariaLabel: N,
+  sourceRole: W = "button",
   ...T
-}, W) => {
-  const [c, u] = E(!1), [w, z] = E(f), [_, 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") => {
@@ -60,8 +61,8 @@ const oe = /* @__PURE__ */ Q(({
     }
     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, J = s - t.bottom;
-      U >= d || U > J ? (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,
@@ -70,14 +71,14 @@ const oe = /* @__PURE__ */ Q(({
   };
   C(() => {
     if (j && j(c), c && !b)
-      return document.body.addEventListener("click", q, !0), X(), () => 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 () => {
@@ -101,7 +102,7 @@ const oe = /* @__PURE__ */ Q(({
       o && document.activeElement === a.current && o.focus();
     }, 0);
   }, [c]);
-  const X = () => {
+  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");
@@ -114,7 +115,7 @@ const oe = /* @__PURE__ */ Q(({
     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");
@@ -122,7 +123,7 @@ const oe = /* @__PURE__ */ Q(({
   }, K = () => {
     if (c && b && a.current) {
       D();
-      const e = k(w);
+      const e = k(h);
       e && y(e);
     }
   }, x = () => {
@@ -138,10 +139,10 @@ const oe = /* @__PURE__ */ Q(({
     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();
   };
-  Y(W, () => ({
+  Z(_, () => ({
     togglePopover: x
   }), []);
-  const G = {
+  const J = {
     "bottom-left": {
       left: "0",
       top: "100%"
@@ -170,13 +171,13 @@ const oe = /* @__PURE__ */ Q(({
     }
   }, 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;
@@ -200,11 +201,11 @@ const oe = /* @__PURE__ */ Q(({
           }
         }, 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({
@@ -216,7 +217,7 @@ const oe = /* @__PURE__ */ Q(({
       borderColor: "var(--color-gray-200)",
       color: "var(--color-gray-900)",
       backgroundColor: "var(--color-white)",
-      ...G[w]
+      ...J[h]
     },
     onClick: (e) => e.stopPropagation(),
     onKeyDown: (e) => {
@@ -228,7 +229,7 @@ const oe = /* @__PURE__ */ Q(({
     "data-automation-id": m
   }, I({
     closePopoverCb: () => u(!1)
-  })), b && c && _ && /* @__PURE__ */ Z.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",
@@ -252,6 +253,6 @@ const oe = /* @__PURE__ */ Q(({
   })), document.body));
 });
 export {
-  oe 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  ariaLabel?: string;\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      ...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        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","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":"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"}
+{"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":"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"}

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,37 +1,38 @@
-import t, { useState as b, useRef as G, useEffect as I } from "react";
-import { Popover as H } from "./index17.js";
+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 Y } from "./index21.js";
+import { Checkbox as Z } from "./index21.js";
 import { Button as B } from "./index3.js";
-import { InputWithIcon as Z } from "./index50.js";
-const ne = (o) => {
-  const [d, P] = b(!1), [f, h] = b(""), [a, m] = b(() => o?.defaultSelectedValue ? Array.isArray(o?.defaultSelectedValue) ? o?.defaultSelectedValue : [o.defaultSelectedValue] : []), p = G(null), {
+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: n = "",
-    displaySelected: M = !1,
-    dropDownOptions: x,
-    defaultText: i = "Select",
+    displaySelected: L = !1,
+    dropDownOptions: h,
+    defaultText: m = "Select",
     iconColor: g = "var(--color-gray-700)",
     disabled: y = !1,
-    dropdownClassName: O = "",
+    dropdownClassName: M = "",
     hasError: S = !1,
-    errorMessage: U = "",
+    errorMessage: O = "",
     customDropdownContent: E = null,
-    isBorderless: L = !1,
+    isBorderless: U = !1,
     shouldShowSearch: D = !1,
-    searchPlaceholder: j = "Search...",
-    searchResultEmptyMessage: C = "No results found"
+    searchPlaceholder: R = "Search...",
+    searchResultEmptyMessage: C = "No results found",
+    ariaLabel: j = ""
   } = o;
-  I(() => {
+  $(() => {
     const e = o?.defaultSelectedValue ? Array.isArray(o?.defaultSelectedValue) ? o?.defaultSelectedValue : [o.defaultSelectedValue] : [];
-    m(e);
-  }, [o?.defaultSelectedValue]), I(() => {
-    d || h("");
-  }, [d]);
-  const v = o?.type === "multi-select", N = () => f.trim() ? (x || []).filter((e) => (e?.[s]?.toString().toLowerCase() || "").includes(f.toLowerCase())) : x || [], k = (e) => {
-    m([e]), p.current?.togglePopover(), o?.onOptionClick?.(e);
-  }, R = (e) => v ? i : e?.[s] || i, T = () => {
-    m([]);
+    d(e);
+  }, [o?.defaultSelectedValue]), $(() => {
+    i || x("");
+  }, [i]);
+  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, r);
@@ -41,16 +42,16 @@ const ne = (o) => {
         className: "option-chip flex items-center w-full"
       }, /* @__PURE__ */ t.createElement("div", {
         className: `${c > 0 ? "w-full" : "flex-1"} truncate`
-      }, `${i}: ${l}`), c > 0 && /* @__PURE__ */ t.createElement("div", {
+      }, `${m}: ${l}`), c > 0 && /* @__PURE__ */ t.createElement("div", {
         className: "flex-shrink-0"
       }, "+", c));
     }
     return /* @__PURE__ */ t.createElement("p", {
       className: "option-chip flex flex-1 items-center justify-between"
-    }, R(e));
-  }, $ = () => /* @__PURE__ */ t.createElement("div", {
+    }, T(e));
+  }, I = () => /* @__PURE__ */ t.createElement("div", {
     className: " w-full relative flex items-center border-b border-[var(--color-gray-300)]"
-  }, /* @__PURE__ */ t.createElement(Z, {
+  }, /* @__PURE__ */ t.createElement(ee, {
     leftIcon: {
       name: "search",
       position: "left",
@@ -59,8 +60,8 @@ const ne = (o) => {
       }
     },
     value: f,
-    onChange: (e) => h(e),
-    placeholder: j,
+    onChange: (e) => x(e),
+    placeholder: R,
     style: {
       margin: 0,
       gap: 0
@@ -70,17 +71,17 @@ const ne = (o) => {
       border: "none",
       outline: "none"
     }
-  })), q = (e, r) => {
-    const l = e[s], c = a[0]?.[s] || i, X = n?.length ? e[n] == a[0]?.[n] : !0, u = M && l === c && X;
+  })), 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 ${u ? "selected" : ""}`,
       onClick: () => k(e),
-      onKeyDown: (w) => {
-        (w.key === "Enter" || w.key === " ") && (w.preventDefault(), k(e));
+      onKeyDown: (b) => {
+        (b.key === "Enter" || b.key === " ") && (b.preventDefault(), k(e));
       },
       role: "option",
-      "aria-selected": u,
+      "aria-selected": u ? "true" : "false",
       tabIndex: 0,
       "data-automation-id": `dropdown-option-${e?.automationId || r}`
     }, V({
@@ -90,46 +91,46 @@ const ne = (o) => {
       name: "checkmark",
       stroke: g
     }));
-  }, z = () => {
+  }, J = () => {
     const e = N();
     return /* @__PURE__ */ t.createElement("div", {
       className: "dropdown-content dropdown-options",
       role: "listbox",
       "aria-label": "Dropdown options"
-    }, D && $(), /* @__PURE__ */ t.createElement("div", {
+    }, D && I(), /* @__PURE__ */ t.createElement("div", {
       className: "flex flex-col max-h-80 overflow-y-auto"
-    }, e.length > 0 ? e.map((r, l) => q(r, l)) : /* @__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"
     }, C)));
-  }, J = (e, r) => {
+  }, Q = (e, r) => {
     let l = [];
-    e ? l = [...a, r] : l = a?.filter((c) => c[n] !== r[n]), m(l);
-  }, Q = () => {
+    e ? l = [...a, r] : l = a?.filter((c) => c[n] !== r[n]), d(l);
+  }, W = () => {
     p.current?.togglePopover(), o?.onApply?.(a);
-  }, W = (e) => {
+  }, _ = (e) => {
     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(Y, {
+    }, /* @__PURE__ */ t.createElement(Z, {
       automationId: "checkbox",
       className: "checkbox",
       defaultChecked: r,
-      onChange: (l) => J(l, e),
+      onChange: (l) => Q(l, e),
       label: e?.label
     }));
-  }, _ = () => {
+  }, F = () => {
     const e = N();
     return /* @__PURE__ */ t.createElement("div", {
       className: "dropdown-content dropdown-options",
       role: "listbox",
       "aria-label": "Multi-select dropdown options",
       "aria-multiselectable": "true"
-    }, D && $(), /* @__PURE__ */ t.createElement("div", {
+    }, D && I(), /* @__PURE__ */ t.createElement("div", {
       className: "flex flex-col max-h-80 overflow-y-auto"
-    }, e.length > 0 ? e.map((r) => W(r)) : /* @__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"
@@ -139,15 +140,15 @@ const ne = (o) => {
       label: "Clear",
       type: "link",
       size: "sm",
-      onClick: T
+      onClick: q
     }), /* @__PURE__ */ t.createElement(B, {
       label: "Apply",
       type: "primary",
       size: "sm",
-      onClick: Q
+      onClick: W
     })));
-  }, F = () => {
-    const e = d ? "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 ${L ? "border-0" : `border rounded-md ${r || e}`} flex items-center ${O}`;
+  }, K = () => {
+    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: l
     }, /* @__PURE__ */ t.createElement("div", {
@@ -158,14 +159,11 @@ const ne = (o) => {
       "aria-hidden": "true"
     }, /* @__PURE__ */ t.createElement(A, {
       name: "chevron",
-      rotation: d ? "180" : "0",
+      rotation: i ? "180" : "0",
       className: "transition-transform",
       stroke: g
     })));
-  }, K = () => {
-    const e = a[0]?.[s] || i;
-    return o?.label ? `${o.label}: ${e}` : `Select option, currently selected: ${e}`;
-  };
+  }, X = () => j || "Select option";
   return /* @__PURE__ */ t.createElement("div", {
     className: `se-design-dropdown-container${o?.className ? ` ${o?.className}` : ""}`,
     style: o?.style
@@ -174,21 +172,22 @@ const ne = (o) => {
   }, o?.label), /* @__PURE__ */ t.createElement("div", {
     style: o?.style,
     className: `${y ? "bg-[var(--color-gray-50)] rounded-md cursor-not-allowed" : ""}`
-  }, /* @__PURE__ */ t.createElement(H, {
+  }, /* @__PURE__ */ t.createElement(Y, {
     ref: p,
-    renderPopoverContents: E || (v ? _ : z),
+    renderPopoverContents: E || (v ? F : J),
     contentWidth: "full",
-    renderPopoverSrcElement: F,
+    renderPopoverSrcElement: K,
     onPopoverToggle: (e) => P(e),
     disabled: y,
     automationId: o?.dropDownSrcAutomationId,
     popoverContentAutomationId: o?.dropDownContentAutomationId,
-    ariaLabel: K()
+    ariaLabel: X(),
+    sourceRole: "combobox"
   })), S && /* @__PURE__ */ t.createElement("div", {
     className: "text-[var(--color-red-500)] text-sm"
-  }, U));
+  }, O));
 };
 export {
-  ne 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\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    const selectedValue = selectedDropDownValues[0]?.[selectBy] || defaultText;\n    return props?.label ? `${props.label}: ${selectedValue}` : `Select option, currently selected: ${selectedValue}`;\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        />\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","dropDownSelectAutomationId","rotation","getDropdownAriaLabel","selectedValue","ref","renderPopoverContents","contentWidth","renderPopoverSrcElement","onPopoverToggle","dropDownSrcAutomationId","popoverContentAutomationId","dropDownContentAutomationId","ariaLabel"],"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/package.json

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