@jenesei-software/jenesei-kit-react 1.3.29 → 1.3.31

package/build/{context.constants-ByIVCRij.js → context.constants-D8UVM6GL.js}

@@ -3729,13 +3729,34 @@ function useFloating(options) {
     elements
   }), [position, refs, elements, context]);
 }
+const getFocusableElements = (container) => {
+  const focusableSelectors = [
+    "a[href]",
+    "button:not([disabled])",
+    "textarea:not([disabled])",
+    "input:not([disabled])",
+    "select:not([disabled])",
+    '[tabindex]:not([tabindex="-1"])',
+    '[contenteditable="true"]'
+  ].join(",");
+  return Array.from(container.querySelectorAll(focusableSelectors));
+};
+const getNextFocusableElement = (currentElement, backward = false) => {
+  const allFocusableElements = getFocusableElements(document.body);
+  const currentIndex = allFocusableElements.indexOf(currentElement);
+  if (currentIndex === -1) return null;
+  if (backward) {
+    return currentIndex > 0 ? allFocusableElements[currentIndex - 1] : null;
+  } else {
+    return currentIndex < allFocusableElements.length - 1 ? allFocusableElements[currentIndex + 1] : null;
+  }
+};
 const Popover = (props) => {
   var _a, _b;
   return ReactDOM__default.createPortal(
     /* @__PURE__ */ jsxRuntimeExports.jsx(AnimatePresence, { children: props.isOpen && /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
-        tabIndex: -1,
         ref: props.ref,
         style: {
           position: "absolute",
@@ -3743,7 +3764,9 @@ const Popover = (props) => {
           left: 0,
           ...props.floatingStyles,
           transform: props.floatingStyles.transform,
-          zIndex: 9999
+          zIndex: 9998,
+          outline: "0px transparent solid !important",
+          border: "0px transparent solid !important"
         },
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           PopoverWrapper,
@@ -3779,6 +3802,7 @@ const usePopover = (props) => {
   const [isOpen, setIsOpen] = useState(false);
   const [minWidth, setMinWidth] = useState(void 0);
   const [wasEverOpen, setWasEverOpen] = useState(false);
+  const previousActiveElement = useRef(null);
   const {
     refs,
     floatingStyles,
@@ -3967,6 +3991,65 @@ const usePopover = (props) => {
       if (refEl instanceof HTMLElement) refEl.removeEventListener("blur", handleBlur, true);
     };
   }, [refs.reference, props.isDisabled, onBlurReference, props.refsExcludeBlur]);
+  useEffect(() => {
+    if (!props.isFocusTrap) return;
+    if (!isOpen || !refs.floating.current) return;
+    const floatingEl = refs.floating.current;
+    const refEl = refs.reference.current;
+    previousActiveElement.current = document.activeElement;
+    const focusFirstInPopover = () => {
+      const elements = getFocusableElements(floatingEl);
+      if (elements.length > 0) {
+        elements[0].focus();
+        return true;
+      }
+      return false;
+    };
+    let mutationObserver = null;
+    const hasFocusedInitial = focusFirstInPopover();
+    if (!hasFocusedInitial) {
+      mutationObserver = new MutationObserver(() => {
+        if (focusFirstInPopover()) {
+          mutationObserver == null ? void 0 : mutationObserver.disconnect();
+          mutationObserver = null;
+        }
+      });
+      mutationObserver.observe(floatingEl, { childList: true, subtree: true });
+    }
+    const handleKeyDown = (e) => {
+      if (e.key !== "Tab") return;
+      const focusableElements = getFocusableElements(floatingEl);
+      if (focusableElements.length === 0) return;
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+      if (e.shiftKey) {
+        if (document.activeElement === firstElement) {
+          e.preventDefault();
+          const prevElement = getNextFocusableElement(refEl, true);
+          if (prevElement) {
+            prevElement.focus();
+          }
+          return;
+        }
+        return;
+      }
+      if (document.activeElement === lastElement) {
+        e.preventDefault();
+        const nextElement = getNextFocusableElement(refEl, false);
+        if (nextElement) {
+          nextElement.focus();
+        }
+        return;
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      if (mutationObserver) {
+        mutationObserver.disconnect();
+      }
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen, refs.floating, refs.reference.current, props.isFocusTrap]);
   const getIsInside = useCallback(
     (target) => {
       if (!target) return false;
@@ -4290,6 +4373,7 @@ const Button = (props) => {
   };
   const refDefault = useRef(null);
   const ref = useMergeRefs([refDefault, props.ref]);
+  const isInteractive = !props.isDisabled && props.isWhileTapEffect;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     StyledButton,
     {
@@ -4299,7 +4383,8 @@ const Button = (props) => {
         weight: ((_b = props.font) == null ? void 0 : _b.weight) ?? 700
       },
       $isNotHoverEffect: props.isNotHoverEffect,
-      whileTap: props.isWhileTapEffect ? { scale: 0.9, transition: { duration: 0.01 } } : {},
+      whileTap: isInteractive ? { scale: 1.1, transition: { duration: 0.08, ease: "easeOut" } } : void 0,
+      whileHover: isInteractive ? { scale: 0.97, transition: { duration: 0.2, ease: "easeOut" } } : void 0,
       id: props.id,
       tabIndex: props.tabIndex ?? 0,
       $isFullSize: props.isFullSize,
@@ -4558,6 +4643,7 @@ const Select = (props) => {
     floatingStyles,
     toggle
   } = usePopover({
+    isFocusTrap: true,
     placement: "bottom-start",
     offset: sizePadding,
     mode: "independence",
@@ -4748,12 +4834,16 @@ const Select = (props) => {
         $sx: props.sx,
         $isOpen: isOpen,
         ref: refReference,
-        onClick: () => {
-          open();
+        onMouseDown: (e) => {
+          e.preventDefault();
+          toggle();
           onChangeShowSearch(true);
         },
         onFocus: () => {
-          open();
+          if (!isOpen) {
+            open();
+            onChangeShowSearch(true);
+          }
         },
         children: [
           isShowSearch && /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -4769,6 +4859,9 @@ const Select = (props) => {
                 var _a2;
                 (_a2 = props == null ? void 0 : props.onChangeSearch) == null ? void 0 : _a2.call(props, value);
               },
+              onMouseDown: (e) => {
+                e.stopPropagation();
+              },
               value: props.valueSearch,
               placeholder: labelPlaceholder
             }
@@ -4781,6 +4874,7 @@ const Select = (props) => {
               $isWrapSelectOption: props.isWrapSelectOption,
               onMouseDown: (e) => {
                 e.preventDefault();
+                e.stopPropagation();
               },
               onClick: (e) => {
                 e.preventDefault();
@@ -4847,6 +4941,7 @@ const Select = (props) => {
               $size: props.size,
               onMouseDown: (e) => {
                 e.preventDefault();
+                e.stopPropagation();
               },
               children: [
                 isShowIconSearchClear && /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -5123,8 +5218,11 @@ const SelectLanguage = (props) => {
   const option = LIST_LANGUAGE;
   const [viewOption] = useState(option);
   const handleSelectChange = (value2) => {
-    if (value2.length === 0) onChange(null);
-    onChange(value2[0].value.toString());
+    if (value2.length === 0) {
+      onChange(null);
+    } else {
+      onChange(value2[0].value.toString());
+    }
   };
   const valueLocal = useMemo(() => {
     const findOption = option.find((e) => e.value === value);
@@ -5387,6 +5485,8 @@ const TextArea = (props) => {
             onBlur: props.onBlur,
             onFocus: props.onFocus,
             onKeyDown: props.onKeyDown,
+            onMouseDown: props.onMouseDown,
+            onClick: props.onClick,
             name: props.name,
             "aria-label": props.ariaLabel ?? props.name,
             autoComplete: props.autoComplete,
@@ -5548,6 +5648,7 @@ const addSelectWrapperSize = css`
   min-height: ${(props) => KEY_SIZE_DATA[props.$size].height}px;
   border-radius: ${(props) => KEY_SIZE_DATA[props.$size].radius}px;
   justify-content: ${(props) => props.$isCenter ? "center" : "flex-start"};
+  
   ${(props) => props.$isOpen && css`
       outline: 2px ${(props2) => props2.theme.states.focus} solid;
       outline-offset: 1px;
@@ -5663,12 +5764,12 @@ const DropdownListOption = styled.li`
 `;
 const addDropdownOptionIconSize = css`
   right: ${(props) => KEY_SIZE_DATA[props.$size].padding - 6}px;
-  height: ${(props) => KEY_SIZE_DATA[props.$size].height}px;
+  /* height: ${(props) => KEY_SIZE_DATA[props.$size].height}px;
+  width: ${(props) => KEY_SIZE_DATA[props.$size].height}px; */
 `;
 const DropdownListOptionIcon = styled(Icon)`
   position: absolute;
   right: 0;
-  height: 100%;
   align-items: center;
   ${addDropdownOptionIconSize};
   ${addRemoveOutline};
@@ -7300,6 +7401,16 @@ const DateInputButton = styled(Button)`
     height: max-content !important;
     ${addDateInputButtonSize};
 `;
+const addDateInputButtonClearSize = css`
+  ${(props) => css`
+    right:${KEY_SIZE_DATA[props.size].padding * 2 + KEY_SIZE_DATA[props.size].height}px;
+  `}
+`;
+const DateInputButtonClear = styled(Button)`
+    position: absolute;
+    height: max-content !important;
+    ${addDateInputButtonClearSize};
+`;
 const ImageIMG = styled.img`
   position: absolute;
   width: 100%;
@@ -8383,140 +8494,142 @@ const DEFAULT_PROVIDER_SONNER_BUTTON = {
   }
 };
 export {
-  InputSizeConstructor as $,
+  addInputPlaceholderNiceNumber as $,
   AccordionWrapper as A,
   Button as B,
   CheckboxSize as C,
   DateWrapper as D,
   addDateInputButtonSize as E,
   DateInputButton as F,
-  getIconComponents as G,
-  useInjectSprites as H,
+  addDateInputButtonClearSize as G,
+  DateInputButtonClear as H,
   Icon as I,
-  useLazyInjectSprite as J,
-  StyledIcon as K,
-  StyledIconSkeleton as L,
-  ImageIMG as M,
-  ImageSelectListSize as N,
-  ImageSelectListSizeConstructor as O,
+  getIconComponents as J,
+  useInjectSprites as K,
+  useLazyInjectSprite as L,
+  StyledIcon as M,
+  StyledIconSkeleton as N,
+  ImageIMG as O,
   Preview as P,
-  ImageSelectSize as Q,
-  ImageSelectSizeConstructor as R,
+  ImageSelectListSize as Q,
+  ImageSelectListSizeConstructor as R,
   StyledSkeleton as S,
-  ImageSelectWrapper as T,
-  ImageSelectListWrapper as U,
-  SliderImage as V,
-  SliderDot as W,
-  StyledInputWrapper as X,
-  addInputPlaceholder as Y,
-  addInputPlaceholderNiceNumber as Z,
-  InputSize as _,
+  ImageSelectSize as T,
+  ImageSelectSizeConstructor as U,
+  ImageSelectWrapper as V,
+  ImageSelectListWrapper as W,
+  SliderImage as X,
+  SliderDot as Y,
+  StyledInputWrapper as Z,
+  addInputPlaceholder as _,
   Skeleton as a,
-  ProviderAppOutlet as a$,
-  addInputIsInputEffect as a0,
-  StyledInputCSS as a1,
-  StyledInput as a2,
-  StyledMotionInput as a3,
-  StyledInputPattern as a4,
-  StyledInputNumeric as a5,
-  InputPrefixChildren as a6,
-  InputPostfixChildren as a7,
-  InputOTPSize as a8,
-  InputOTPSizeConstructor as a9,
-  SelectTextArea as aA,
-  TextArea as aB,
-  TextAreaWrapper as aC,
-  addTextArea as aD,
-  StyledTextArea as aE,
-  ToggleWrapper as aF,
-  ToggleCenter as aG,
-  TooltipContainer as aH,
-  addTooltipBoxSize as aI,
-  addTooltipBoxSizeConstructor as aJ,
-  TooltipBox as aK,
-  Tooltip as aL,
-  TooltipContent as aM,
-  DEFAULT_TOOLTIP_PLACEMENT_FALLBACK as aN,
-  DEFAULT_TOOLTIP_OFFSET_FALLBACK as aO,
-  addSXTypography as aP,
-  Title as aQ,
-  Typography as aR,
-  TypographyLink as aS,
-  TypographyTooltip as aT,
-  AppContext as aU,
-  ProviderApp as aV,
-  useBgColor as aW,
-  useStatusBarColor as aX,
-  useBgImage as aY,
-  useDescription as aZ,
-  ProviderAppWrapper as a_,
-  InputOTPWrapper as aa,
-  DEFAULT_MAP_MAX_ZOOM as ab,
-  DEFAULT_MAP_MIN_ZOOM as ac,
-  DEFAULT_MAP_ZOOM as ad,
-  DEFAULT_MAP_CENTER as ae,
-  DEFAULT_MAP_THEME as af,
-  MapWrapper as ag,
-  RangeWrapper as ah,
-  RangeTrack as ai,
-  RangeThumb as aj,
-  Select as ak,
-  ContainerDropdownListOption as al,
-  ContainerSelectListOption as am,
-  SelectLanguage as an,
-  SelectMonth as ao,
-  SelectMonths as ap,
-  SelectYear as aq,
-  SelectMapTheme as ar,
-  SelectWrapper as as,
-  DropdownListParent as at,
-  DropdownList as au,
-  DropdownListOption as av,
-  DropdownListOptionIcon as aw,
-  SelectList as ax,
-  ButtonList as ay,
-  SelectListOption as az,
+  useDescription as a$,
+  InputSize as a0,
+  InputSizeConstructor as a1,
+  addInputIsInputEffect as a2,
+  StyledInputCSS as a3,
+  StyledInput as a4,
+  StyledMotionInput as a5,
+  StyledInputPattern as a6,
+  StyledInputNumeric as a7,
+  InputPrefixChildren as a8,
+  InputPostfixChildren as a9,
+  ButtonList as aA,
+  SelectListOption as aB,
+  SelectTextArea as aC,
+  TextArea as aD,
+  TextAreaWrapper as aE,
+  addTextArea as aF,
+  StyledTextArea as aG,
+  ToggleWrapper as aH,
+  ToggleCenter as aI,
+  TooltipContainer as aJ,
+  addTooltipBoxSize as aK,
+  addTooltipBoxSizeConstructor as aL,
+  TooltipBox as aM,
+  Tooltip as aN,
+  TooltipContent as aO,
+  DEFAULT_TOOLTIP_PLACEMENT_FALLBACK as aP,
+  DEFAULT_TOOLTIP_OFFSET_FALLBACK as aQ,
+  addSXTypography as aR,
+  Title as aS,
+  Typography as aT,
+  TypographyLink as aU,
+  TypographyTooltip as aV,
+  AppContext as aW,
+  ProviderApp as aX,
+  useBgColor as aY,
+  useStatusBarColor as aZ,
+  useBgImage as a_,
+  InputOTPSize as aa,
+  InputOTPSizeConstructor as ab,
+  InputOTPWrapper as ac,
+  DEFAULT_MAP_MAX_ZOOM as ad,
+  DEFAULT_MAP_MIN_ZOOM as ae,
+  DEFAULT_MAP_ZOOM as af,
+  DEFAULT_MAP_CENTER as ag,
+  DEFAULT_MAP_THEME as ah,
+  MapWrapper as ai,
+  RangeWrapper as aj,
+  RangeTrack as ak,
+  RangeThumb as al,
+  Select as am,
+  ContainerDropdownListOption as an,
+  ContainerSelectListOption as ao,
+  SelectLanguage as ap,
+  SelectMonth as aq,
+  SelectMonths as ar,
+  SelectYear as as,
+  SelectMapTheme as at,
+  SelectWrapper as au,
+  DropdownListParent as av,
+  DropdownList as aw,
+  DropdownListOption as ax,
+  DropdownListOptionIcon as ay,
+  SelectList as az,
   AccordionSummary as b,
-  ProviderAppOutletChildren as b0,
-  ProviderAppOutletNotification as b1,
-  ProviderAppOutletHeader as b2,
-  ProviderAppOutletFooter as b3,
-  ProviderAppOutletNav as b4,
-  ProviderAppOutletLeftAside as b5,
-  ProviderAppOutletRightAside as b6,
-  SonnerContext as b7,
-  ProviderSonner as b8,
-  SonnerLayout as b9,
-  ThemeMapLogo as bA,
-  ThemeMapBustmarket as bB,
-  usePopover as bC,
-  Popover as bD,
-  SonnerElementWrapper as ba,
-  SonnerContent as bb,
-  SonnerIcon as bc,
-  SonnerContentTitle as bd,
-  SonnerContentDescription as be,
-  SonnerButtonWrapper as bf,
-  DEFAULT_PROVIDER_SONNER_Z_INDEX as bg,
-  DEFAULT_PROVIDER_SONNER_SCALE as bh,
-  DEFAULT_PROVIDER_SONNER_Y as bi,
-  DEFAULT_PROVIDER_SONNER_DURATION as bj,
-  DEFAULT_PROVIDER_SONNER_GENRE as bk,
-  DEFAULT_PROVIDER_SONNER_MARGIN_BOTTOM as bl,
-  DEFAULT_PROVIDER_SONNER_BUTTON as bm,
-  ErrorMessageComponent as bn,
-  addError as bo,
-  ErrorMessage as bp,
-  JeneseiPalette as bq,
-  ThemeLight as br,
-  ThemeBlack as bs,
-  KEY_SIZE_DATA as bt,
-  KEY_SIZE_DATA_TOGGLE as bu,
-  JeneseiGlobalStyles as bv,
-  ThemeMapId as bw,
-  ThemeMapCheckbox as bx,
-  ThemeMapLoading as by,
-  ThemeMapRealebail as bz,
+  ProviderAppWrapper as b0,
+  ProviderAppOutlet as b1,
+  ProviderAppOutletChildren as b2,
+  ProviderAppOutletNotification as b3,
+  ProviderAppOutletHeader as b4,
+  ProviderAppOutletFooter as b5,
+  ProviderAppOutletNav as b6,
+  ProviderAppOutletLeftAside as b7,
+  ProviderAppOutletRightAside as b8,
+  SonnerContext as b9,
+  ThemeMapLoading as bA,
+  ThemeMapRealebail as bB,
+  ThemeMapLogo as bC,
+  ThemeMapBustmarket as bD,
+  usePopover as bE,
+  Popover as bF,
+  ProviderSonner as ba,
+  SonnerLayout as bb,
+  SonnerElementWrapper as bc,
+  SonnerContent as bd,
+  SonnerIcon as be,
+  SonnerContentTitle as bf,
+  SonnerContentDescription as bg,
+  SonnerButtonWrapper as bh,
+  DEFAULT_PROVIDER_SONNER_Z_INDEX as bi,
+  DEFAULT_PROVIDER_SONNER_SCALE as bj,
+  DEFAULT_PROVIDER_SONNER_Y as bk,
+  DEFAULT_PROVIDER_SONNER_DURATION as bl,
+  DEFAULT_PROVIDER_SONNER_GENRE as bm,
+  DEFAULT_PROVIDER_SONNER_MARGIN_BOTTOM as bn,
+  DEFAULT_PROVIDER_SONNER_BUTTON as bo,
+  ErrorMessageComponent as bp,
+  addError as bq,
+  ErrorMessage as br,
+  JeneseiPalette as bs,
+  ThemeLight as bt,
+  ThemeBlack as bu,
+  KEY_SIZE_DATA as bv,
+  KEY_SIZE_DATA_TOGGLE as bw,
+  JeneseiGlobalStyles as bx,
+  ThemeMapId as by,
+  ThemeMapCheckbox as bz,
   AccordionSummaryContent as c,
   AccordionDetails as d,
   AccordionStyledIcon as e,
@@ -8542,4 +8655,4 @@ export {
   addDateInputWrapperSize as y,
   DateInputWrapper as z
 };
-//# sourceMappingURL=context.constants-ByIVCRij.js.map
+//# sourceMappingURL=context.constants-D8UVM6GL.js.map