se-design 1.0.21 → 1.0.22

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

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

package/dist/index17.js

@@ -1,5 +1,5 @@
-import R, { forwardRef as J, useState as E, useRef as V, useEffect as C, useImperativeHandle as Q } from "react";
-import Y from "react-dom";
+import R, { forwardRef as Q, useState as E, useRef as V, useEffect as C, useImperativeHandle as Y } from "react";
+import Z from "react-dom";
 function H() {
   return H = Object.assign ? Object.assign.bind() : function(v) {
     for (var g = 1; g < arguments.length; g++) {
@@ -9,7 +9,7 @@ function H() {
     return v;
   }, H.apply(null, arguments);
 }
-const te = /* @__PURE__ */ J(({
+const oe = /* @__PURE__ */ Q(({
   className: v = "",
   automationId: g = "",
   position: f = "bottom-center",
@@ -21,9 +21,10 @@ const te = /* @__PURE__ */ J(({
   isPopoverOpen: B,
   disabled: h = !1,
   isWithPortal: b = !1,
+  ariaLabel: N,
   ...T
-}, N) => {
-  const [c, u] = E(!1), [w, z] = E(f), [W, O] = E(!1), a = V(null), l = V(null), [$, y] = E({
+}, W) => {
+  const [c, u] = E(!1), [w, z] = E(f), [_, O] = E(!1), a = V(null), l = V(null), [$, y] = E({
     top: 0,
     left: 0
   }), k = (e = "bottom-center") => {
@@ -59,8 +60,8 @@ const te = /* @__PURE__ */ J(({
     }
     const p = l.current?.getBoundingClientRect(), A = p?.width || 0, d = p?.height || 0;
     if (i + A > n && (i = Math.max(0, n - A)), i < 0 && (i = 0), r + d > s) {
-      const U = t.top, G = s - t.bottom;
-      U >= d || U > G ? (r = t.top - d, r < 0 && (r = 0)) : r = Math.max(0, s - d);
+      const U = t.top, J = s - t.bottom;
+      U >= d || U > J ? (r = t.top - d, r < 0 && (r = 0)) : r = Math.max(0, s - d);
     }
     return r < 0 && (r = t.bottom, r + d > s && (r = Math.max(0, s - d))), {
       top: r,
@@ -69,7 +70,7 @@ const te = /* @__PURE__ */ J(({
   };
   C(() => {
     if (j && j(c), c && !b)
-      return document.body.addEventListener("click", q, !0), _(), () => document.body.removeEventListener("click", q, !0);
+      return document.body.addEventListener("click", q, !0), X(), () => 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(() => {
@@ -100,7 +101,7 @@ const te = /* @__PURE__ */ J(({
       o && document.activeElement === a.current && o.focus();
     }, 0);
   }, [c]);
-  const _ = () => {
+  const X = () => {
     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");
@@ -137,10 +138,10 @@ const te = /* @__PURE__ */ J(({
     let r = -1;
     e.key === "ArrowDown" ? (e.preventDefault(), e.stopPropagation(), r = s < n.length - 1 ? s + 1 : 0) : e.key === "ArrowUp" ? (e.preventDefault(), e.stopPropagation(), r = s > 0 ? s - 1 : n.length - 1) : e.key === "Home" ? (e.preventDefault(), e.stopPropagation(), r = 0) : e.key === "End" && (e.preventDefault(), e.stopPropagation(), r = n.length - 1), r >= 0 && n[r] ? n[r].focus() : s === -1 && n.length > 0 && n[0].focus();
   };
-  Q(N, () => ({
+  Y(W, () => ({
     togglePopover: x
   }), []);
-  const X = {
+  const G = {
     "bottom-left": {
       left: "0",
       top: "100%"
@@ -204,6 +205,7 @@ const te = /* @__PURE__ */ J(({
     "aria-haspopup": "true",
     tabIndex: h ? -1 : 0,
     "aria-disabled": h,
+    "aria-label": N,
     "data-automation-id": g
   }, T), F({
     displayPopover: c,
@@ -214,7 +216,7 @@ const te = /* @__PURE__ */ J(({
       borderColor: "var(--color-gray-200)",
       color: "var(--color-gray-900)",
       backgroundColor: "var(--color-white)",
-      ...X[w]
+      ...G[w]
     },
     onClick: (e) => e.stopPropagation(),
     onKeyDown: (e) => {
@@ -226,7 +228,7 @@ const te = /* @__PURE__ */ J(({
     "data-automation-id": m
   }, I({
     closePopoverCb: () => u(!1)
-  })), b && c && W && /* @__PURE__ */ Y.createPortal(/* @__PURE__ */ R.createElement("div", {
+  })), b && c && _ && /* @__PURE__ */ Z.createPortal(/* @__PURE__ */ R.createElement("div", {
     className: `popover-content-with-portal ${M} ${L == "full" ? "w-full" : "w-max"}`,
     style: {
       position: "fixed",
@@ -250,6 +252,6 @@ const te = /* @__PURE__ */ J(({
   })), document.body));
 });
 export {
-  te as Popover
+  oe as Popover
 };
 //# sourceMappingURL=index17.js.map

package/dist/index17.js.map

@@ -1 +1 @@
-{"version":3,"file":"index17.js","sources":["../src/components/Popover/index.tsx"],"sourcesContent":["import React, { useState, useRef, ReactNode, useEffect, forwardRef, ForwardedRef, useImperativeHandle } from 'react';\nimport ReactDOM from 'react-dom';\n\nexport interface PopoverHandle {\n  togglePopover: () => void;\n}\n\nexport interface PopoverProps {\n  className?: string;\n  automationId?: string;\n  popoverContentAutomationId?: string;\n  renderPopoverContents: (props: { closePopoverCb: () => void }) => ReactNode;\n  renderPopoverSrcElement: (props: { displayPopover: boolean; togglePopover: () => void }) => ReactNode;\n  position?: 'bottom-center' | 'bottom-left' | 'bottom-right' | 'top-center' | 'top-left' | 'top-right';\n  onPopoverToggle?: (displayPopover: boolean) => void;\n  contentWidth?: 'full' | 'max';\n  isPopoverOpen?: boolean;\n  disabled?: boolean;\n  isWithPortal?: boolean;\n  noBorder?: boolean;\n}\n\nexport const Popover = forwardRef<PopoverHandle, PopoverProps>(\n  (\n    {\n      className = '',\n      automationId = '',\n      position = 'bottom-center',\n      popoverContentAutomationId = '',\n      contentWidth = 'max',\n      renderPopoverContents,\n      renderPopoverSrcElement,\n      onPopoverToggle,\n      isPopoverOpen,\n      disabled = false,\n      isWithPortal = false,\n      ...props\n    },\n    ref: ForwardedRef<PopoverHandle>\n  ) => {\n    const [displayPopover, setDisplayPopover] = useState(false);\n    const [popoverPosition, setPopoverPosition] = useState(position);\n    const [isSrcElementVisible, setIsSrcElementVisible] = useState(false);\n    const srcElementRef = useRef<HTMLDivElement>(null);\n    const popoverContentRef = useRef<HTMLDivElement>(null);\n\n    const [portalPosition, setPortalPosition] = useState({ top: 0, left: 0 });\n\n    const calculatePositionOfPopover = (position: string = 'bottom-center') => {\n      if (!srcElementRef.current) return { top: 0, left: 0 };\n\n      let localPosition = position;\n\n      const srcRect = srcElementRef.current.getBoundingClientRect();\n      const viewportWidth = window.innerWidth;\n      const viewportHeight = window.innerHeight;\n\n      // Calculate position for portal\n      let top = 0;\n      let left = 0;\n\n      switch (localPosition) {\n        case 'bottom-left':\n          top = srcRect.bottom;\n          left = srcRect.left;\n          break;\n        case 'bottom-right':\n          top = srcRect.bottom;\n          left = srcRect.right - srcRect.width * 0.5;\n          break;\n        case 'bottom-center':\n          top = srcRect.bottom;\n          left = srcRect.left + srcRect.width * 0.15;\n          break;\n        case 'top-left':\n          top = srcRect.top - srcRect.height * 1.9;\n          left = srcRect.left;\n          break;\n        case 'top-right':\n          top = srcRect.top - srcRect.height * 1.9;\n          left = srcRect.right - srcRect.width * 0.5;\n          break;\n        case 'top-center':\n          top = srcRect.top - srcRect.height * 1.9;\n          left = srcRect.left + srcRect.width * 0.15;\n          break;\n        default:\n          top = srcRect.bottom;\n          left = srcRect.left;\n          break;\n      }\n\n      // Get popover dimensions if available\n      const popoverRect = popoverContentRef.current?.getBoundingClientRect();\n      const popoverWidth = popoverRect?.width || 0;\n      const popoverHeight = popoverRect?.height || 0;\n\n      // Adjust position to keep popover within viewport bounds\n      // Horizontal adjustments\n      if (left + popoverWidth > viewportWidth) {\n        // Popover extends beyond right edge, shift it left\n        left = Math.max(0, viewportWidth - popoverWidth);\n      }\n      if (left < 0) {\n        // Popover extends beyond left edge, shift it right\n        left = 0;\n      }\n\n      // Vertical adjustments\n      if (top + popoverHeight > viewportHeight) {\n        // Popover extends beyond bottom edge\n        // Try to position it above the source element\n        const spaceAbove = srcRect.top;\n        const spaceBelow = viewportHeight - srcRect.bottom;\n        \n        if (spaceAbove >= popoverHeight || spaceAbove > spaceBelow) {\n          // Position above if there's enough space or more space above\n          top = srcRect.top - popoverHeight;\n          // Ensure it doesn't go above viewport\n          if (top < 0) {\n            top = 0;\n          }\n        } else {\n          // Keep at bottom but adjust to fit within viewport\n          top = Math.max(0, viewportHeight - popoverHeight);\n        }\n      }\n      if (top < 0) {\n        // Popover extends beyond top edge, position it below the source element\n        top = srcRect.bottom;\n        // Ensure it doesn't go below viewport\n        if (top + popoverHeight > viewportHeight) {\n          top = Math.max(0, viewportHeight - popoverHeight);\n        }\n      }\n\n      return { top, left };\n    };\n  \n    useEffect(() => {\n      if (onPopoverToggle) {\n        onPopoverToggle(displayPopover);\n      }\n\n      if (displayPopover && !isWithPortal) {\n        document.body.addEventListener('click', clickListener, true);\n        checkPopoverPosition();\n        return () => document.body.removeEventListener('click', clickListener, true);\n      } else if (displayPopover && isWithPortal) {\n        document.body.addEventListener('click', clickAndScrollListenerWithPortal, true);\n        window.addEventListener('scroll', clickAndScrollListenerWithPortal);\n        window.addEventListener('resize', resizeListenerWithPortal);\n\n        // Initial position calculation\n        const timeout1 = setTimeout(() => {\n          const position = calculatePositionOfPopover(popoverPosition);\n          checkSourceVisibility();\n          \n          if (position) {\n            setPortalPosition(position);\n          }\n        }, 0);\n\n        // Recalculate after popover is rendered to get accurate dimensions\n        const timeout2 = setTimeout(() => {\n          const position = calculatePositionOfPopover(popoverPosition);\n          if (position) {\n            setPortalPosition(position);\n          }\n        }, 10);\n\n        return () => {\n          document.body.removeEventListener('click', clickAndScrollListenerWithPortal, true);\n          window.removeEventListener('scroll', clickAndScrollListenerWithPortal);\n          window.removeEventListener('resize', resizeListenerWithPortal);\n          clearTimeout(timeout1);\n          clearTimeout(timeout2);\n        };\n      }\n    }, [displayPopover, isWithPortal]);\n\n    const checkSourceVisibility = () => {\n      if (!srcElementRef.current) {\n        setIsSrcElementVisible(false);\n        return;\n      }\n\n      const rec = srcElementRef.current.getBoundingClientRect();\n      const viewportHeight = window.innerHeight;\n      const viewportWidth = window.innerWidth;\n\n      const isVisible = rec.top < viewportHeight && rec.bottom > 0 && rec.left < viewportWidth && rec.right > 0;\n\n      setIsSrcElementVisible(isVisible);\n    };\n\n    useEffect(() => {\n      setDisplayPopover(isPopoverOpen ?? false);\n    }, [isPopoverOpen]);\n\n    useEffect(() => {\n      // Focus first focusable element when popover opens\n      if (displayPopover && popoverContentRef.current) {\n        setTimeout(() => {\n          const focusableSelectors = [\n            '[role=\"menuitem\"]',\n            '[role=\"option\"]',\n            '[role=\"menuitemcheckbox\"]',\n            '[role=\"menuitemradio\"]',\n            'button:not([disabled])',\n            'a[href]',\n            '[tabindex]:not([tabindex=\"-1\"])'\n          ].join(', ');\n          const firstFocusable = popoverContentRef.current?.querySelector<HTMLElement>(focusableSelectors);\n          if (firstFocusable && document.activeElement === srcElementRef.current) {\n            firstFocusable.focus();\n          }\n        }, 0);\n      }\n    }, [displayPopover]);\n\n    //Function to check popover position\n    const checkPopoverPosition = () => {\n      if (!popoverContentRef.current) return;\n\n      const popoverRect = popoverContentRef.current.getBoundingClientRect();\n      const viewportHeight = window.innerHeight;\n\n      if (popoverRect?.bottom > viewportHeight) {\n        setPopoverPosition(\n          position.includes('left') ? 'top-left' : position.includes('right') ? 'top-right' : 'top-center'\n        );\n      } else if (popoverRect?.top < 0) {\n        // If popover extends beyond top of viewport, switch to bottom position\n        setPopoverPosition(\n          position.includes('left') ? 'bottom-left' : position.includes('right') ? 'bottom-right' : 'bottom-center'\n        );\n      }\n    };\n\n    const clickListener = (event: MouseEvent) => {\n      const currentDropRef = srcElementRef.current;\n      if (!currentDropRef) return;\n\n      const target = event.target as Node;\n      const isSourcePopover = currentDropRef.contains(target);\n      const isPopoverContent = popoverContentRef.current?.contains(target);\n      \n      // Check if click is on another popover's source element\n      const clickedElement = target as HTMLElement;\n      const closestPopoverWrapper = clickedElement.closest?.('.se-design-popover-wrapper');\n      const isAnotherPopoverSource = closestPopoverWrapper && closestPopoverWrapper !== currentDropRef;\n      \n      // if clicked source is parent or the popover-content, do not toggle dropdown.\n      // Also close if clicking on another popover's source element\n      if ((!isSourcePopover && !isPopoverContent) || isAnotherPopoverSource) {\n        setDisplayPopover(false);\n      }\n    };\n\n    const clickAndScrollListenerWithPortal = (event: Event) => {\n      const currentDropRef = srcElementRef.current;\n      const currentPopoverRef = popoverContentRef.current;\n      if (!currentDropRef) return;\n      checkSourceVisibility();\n\n      // Recalculate position on scroll\n      if (event.type === 'scroll' && displayPopover) {\n        const position = calculatePositionOfPopover(popoverPosition);\n        if (position) {\n          setPortalPosition(position);\n        }\n      }\n\n      const target = event.target as Node;\n      const isSourcePopover = currentDropRef.contains(target);\n      const isPopoverContent = currentPopoverRef?.contains(target);\n      \n      // Check if click is on another popover's source element\n      const clickedElement = target as HTMLElement;\n      const closestPopoverWrapper = clickedElement.closest?.('.se-design-popover-wrapper');\n      const isAnotherPopoverSource = closestPopoverWrapper && closestPopoverWrapper !== currentDropRef;\n\n      // if clicked source is parent or the popover-content, do not toggle dropdown.\n      // Also close if clicking on another popover's source element\n      if ((!isSourcePopover && !isPopoverContent) || isAnotherPopoverSource) {\n        setDisplayPopover(false);\n      }\n    };\n\n    const resizeListenerWithPortal = () => {\n      if (displayPopover && isWithPortal && srcElementRef.current) {\n        checkSourceVisibility();\n        const position = calculatePositionOfPopover(popoverPosition);\n        if (position) {\n          setPortalPosition(position);\n        }\n      }\n    };\n\n    const togglePopover = () => {\n      setDisplayPopover((displayPopover) => !displayPopover);\n    };\n\n    const handleArrowKeyNavigation = (e: React.KeyboardEvent, container: HTMLDivElement | null) => {\n      if (!container) return;\n\n      // Find all focusable elements within the popover content\n      // This includes elements with role=\"menuitem\", role=\"option\", tabIndex >= 0, etc.\n      const focusableSelectors = [\n        '[role=\"menuitem\"]',\n        '[role=\"option\"]',\n        '[role=\"menuitemcheckbox\"]',\n        '[role=\"menuitemradio\"]',\n        'button:not([disabled])',\n        'a[href]',\n        'input:not([disabled])',\n        'select:not([disabled])',\n        'textarea:not([disabled])',\n        '[tabindex]:not([tabindex=\"-1\"])'\n      ].join(', ');\n\n      const focusableElements = Array.from(\n        container.querySelectorAll<HTMLElement>(focusableSelectors)\n      ).filter((el) => {\n        // Filter out disabled and hidden elements\n        const style = window.getComputedStyle(el);\n        return (\n          !el.hasAttribute('disabled') &&\n          !el.hasAttribute('aria-disabled') &&\n          style.display !== 'none' &&\n          style.visibility !== 'hidden' &&\n          (el.tabIndex >= 0 || el.hasAttribute('role'))\n        );\n      });\n\n      if (focusableElements.length === 0) return;\n\n      const currentIndex = focusableElements.findIndex((el) => el === document.activeElement);\n      let nextIndex = -1;\n\n      if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        e.stopPropagation();\n        nextIndex = currentIndex < focusableElements.length - 1 ? currentIndex + 1 : 0;\n      } else if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        e.stopPropagation();\n        nextIndex = currentIndex > 0 ? currentIndex - 1 : focusableElements.length - 1;\n      } else if (e.key === 'Home') {\n        e.preventDefault();\n        e.stopPropagation();\n        nextIndex = 0;\n      } else if (e.key === 'End') {\n        e.preventDefault();\n        e.stopPropagation();\n        nextIndex = focusableElements.length - 1;\n      }\n\n      if (nextIndex >= 0 && focusableElements[nextIndex]) {\n        focusableElements[nextIndex].focus();\n      } else if (currentIndex === -1 && focusableElements.length > 0) {\n        // If no element is currently focused, focus the first one\n        focusableElements[0].focus();\n      }\n    };\n\n    useImperativeHandle(ref, () => ({ togglePopover }), []);\n\n    const popoverContentStyle = {\n      'bottom-left': { left: '0', top: '100%' },\n      'bottom-right': { right: '0', top: '100%' },\n      'bottom-center': { left: '50%', transform: 'translateX(-50%)', top: '100%' },\n      'top-left': { left: '0', bottom: '100%' },\n      'top-right': { right: '0', bottom: '100%' },\n      'top-center': { left: '50%', transform: 'translateX(-50%)', bottom: '100%' }\n    };\n    const popoverContentClasses = props?.noBorder ? '' : 'shadow-md border rounded-md';\n\n    return (\n      <div\n        className={\n          'se-design-popover-wrapper cursor-pointer relative' +\n          (className.length > 0 ? ` ${className}` : '') +\n          (displayPopover ? ' open' : '') +\n          (disabled ? ' opacity-50 cursor-not-allowed pointer-events-none' : '')\n        }\n        ref={srcElementRef}\n        onClick={(e) => {\n          if (disabled) return;\n          e.stopPropagation();\n          togglePopover();\n        }}\n        onKeyDown={(e) => {\n          if (disabled) return;\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            e.stopPropagation();\n            const wasOpen = displayPopover;\n            togglePopover();\n            // Focus first focusable element when opening\n            if (!wasOpen) {\n              setTimeout(() => {\n                const currentRef = popoverContentRef.current;\n                if (currentRef) {\n                  const focusableSelectors = [\n                    '[role=\"menuitem\"]',\n                    '[role=\"option\"]',\n                    '[role=\"menuitemcheckbox\"]',\n                    '[role=\"menuitemradio\"]',\n                    'button:not([disabled])',\n                    'a[href]',\n                    '[tabindex]:not([tabindex=\"-1\"])'\n                  ].join(', ');\n                  const firstFocusable = currentRef.querySelector<HTMLElement>(focusableSelectors);\n                  if (firstFocusable) {\n                    firstFocusable.focus();\n                  }\n                }\n              }, 0);\n            }\n          } else if (e.key === 'Escape' && displayPopover) {\n            e.preventDefault();\n            e.stopPropagation();\n            setDisplayPopover(false);\n          } else if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && displayPopover) {\n            // Handle arrow keys when popover is open\n            const currentRef = popoverContentRef.current;\n            if (currentRef) {\n              handleArrowKeyNavigation(e, currentRef);\n            }\n          } else if (e.key === 'ArrowDown' && !displayPopover) {\n            // Open popover and focus first item when ArrowDown is pressed\n            e.preventDefault();\n            e.stopPropagation();\n            setDisplayPopover(true);\n            setTimeout(() => {\n              const currentRef = popoverContentRef.current;\n              if (currentRef) {\n                const focusableSelectors = [\n                  '[role=\"menuitem\"]',\n                  '[role=\"option\"]',\n                  '[role=\"menuitemcheckbox\"]',\n                  '[role=\"menuitemradio\"]',\n                  'button:not([disabled])',\n                  'a[href]',\n                  '[tabindex]:not([tabindex=\"-1\"])'\n                ].join(', ');\n                const firstFocusable = currentRef.querySelector<HTMLElement>(focusableSelectors);\n                if (firstFocusable) {\n                  firstFocusable.focus();\n                }\n              }\n            }, 0);\n          }\n        }}\n        role=\"button\"\n        aria-expanded={displayPopover}\n        aria-haspopup=\"true\"\n        tabIndex={disabled ? -1 : 0}\n        aria-disabled={disabled}\n        data-automation-id={automationId}\n        {...props}\n      >\n        {renderPopoverSrcElement({ displayPopover, togglePopover })}\n\n        {displayPopover && !isWithPortal && (\n          <div\n            className={`popover-content absolute ${popoverContentClasses} z-[1000] ${contentWidth == 'full' ? 'w-full' : 'w-max'}`}\n            style={{\n              borderColor: 'var(--color-gray-200)',\n              color: 'var(--color-gray-900)',\n              backgroundColor: 'var(--color-white)',\n              ...popoverContentStyle[popoverPosition]\n            }}\n            onClick={(e) => e.stopPropagation()}\n            onKeyDown={(e) => {\n              // Allow Escape key to close popover when focus is on content\n              if (e.key === 'Escape') {\n                e.preventDefault();\n                e.stopPropagation();\n                setDisplayPopover(false);\n                srcElementRef.current?.focus();\n              } else if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Home' || e.key === 'End') {\n                // Handle arrow key navigation for focusable elements inside popover\n                handleArrowKeyNavigation(e, popoverContentRef.current);\n              }\n            }}\n            role=\"dialog\"\n            aria-modal=\"false\"\n            ref={popoverContentRef}\n            data-automation-id={popoverContentAutomationId}\n          >\n            {renderPopoverContents({ closePopoverCb: () => setDisplayPopover(false) })}\n          </div>\n        )}\n        {isWithPortal &&\n          displayPopover &&\n          isSrcElementVisible &&\n          ReactDOM.createPortal(\n            <div\n              className={`popover-content-with-portal ${popoverContentClasses} ${contentWidth == 'full' ? 'w-full' : 'w-max'}`}\n              style={{\n                position: 'fixed',\n                top: portalPosition.top,\n                left: portalPosition.left,\n                zIndex: 1000,\n                borderColor: 'var(--color-gray-200)',\n                color: 'var(--color-gray-900)',\n                backgroundColor: 'var(--color-white)'\n              }}\n              onClick={(e) => e.stopPropagation()}\n              onKeyDown={(e) => {\n                // Allow Escape key to close popover when focus is on content\n                if (e.key === 'Escape') {\n                  e.preventDefault();\n                  e.stopPropagation();\n                  setDisplayPopover(false);\n                  srcElementRef.current?.focus();\n                } else if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Home' || e.key === 'End') {\n                  // Handle arrow key navigation for focusable elements inside popover\n                  handleArrowKeyNavigation(e, popoverContentRef.current);\n                }\n              }}\n              role=\"dialog\"\n              aria-modal=\"false\"\n              ref={popoverContentRef}\n              data-automation-id={popoverContentAutomationId}\n            >\n              {renderPopoverContents({ closePopoverCb: () => setDisplayPopover(false) })}\n            </div>,\n            document.body\n          )}\n      </div>\n    );\n  }\n);\n\n"],"names":["Popover","className","automationId","position","popoverContentAutomationId","contentWidth","renderPopoverContents","renderPopoverSrcElement","onPopoverToggle","isPopoverOpen","disabled","isWithPortal","props","ref","displayPopover","setDisplayPopover","useState","popoverPosition","setPopoverPosition","isSrcElementVisible","setIsSrcElementVisible","srcElementRef","useRef","popoverContentRef","portalPosition","setPortalPosition","top","left","calculatePositionOfPopover","current","localPosition","srcRect","getBoundingClientRect","viewportWidth","window","innerWidth","viewportHeight","innerHeight","bottom","right","width","height","popoverRect","popoverWidth","popoverHeight","Math","max","spaceAbove","spaceBelow","useEffect","document","body","addEventListener","clickListener","checkPopoverPosition","removeEventListener","clickAndScrollListenerWithPortal","resizeListenerWithPortal","timeout1","setTimeout","checkSourceVisibility","timeout2","clearTimeout","rec","isVisible","focusableSelectors","join","firstFocusable","querySelector","activeElement","focus","includes","event","currentDropRef","target","isSourcePopover","contains","isPopoverContent","closestPopoverWrapper","closest","currentPopoverRef","type","togglePopover","handleArrowKeyNavigation","e","container","focusableElements","Array","from","querySelectorAll","filter","el","style","getComputedStyle","hasAttribute","display","visibility","tabIndex","length","currentIndex","findIndex","nextIndex","key","preventDefault","stopPropagation","useImperativeHandle","popoverContentStyle","transform","popoverContentClasses","noBorder","React","createElement","_extends","onClick","onKeyDown","wasOpen","currentRef","role","borderColor","color","backgroundColor","closePopoverCb","ReactDOM","createPortal","zIndex"],"mappings":"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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}\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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"}

package/dist/index23.js

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

package/dist/index23.js.map

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

package/dist/index5.js

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

package/dist/index5.js.map

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

package/package.json

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