@jenesei-software/jenesei-kit-react 1.3.30 → 1.3.32

package/build/{context.constants-Dop398a2.js → context.constants-YlWOZAd7.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();
@@ -4792,7 +4886,14 @@ const Select = (props) => {
                   ContainerSelectListOption,
                   {
                     isChecked,
-                    onClick: () => props.isClearWhenClickSelectListOption && onClick(value),
+                    onClick: () => {
+                      if (props.isClearWhenClickSelectListOption) {
+                        onClick(value);
+                      }
+                      if (props.isToggleWhenClickSelectListOption) {
+                        toggle();
+                      }
+                    },
                     item: value,
                     genre: props.genre,
                     size: props.size,
@@ -4847,6 +4948,7 @@ const Select = (props) => {
               $size: props.size,
               onMouseDown: (e) => {
                 e.preventDefault();
+                e.stopPropagation();
               },
               children: [
                 isShowIconSearchClear && /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -5123,8 +5225,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 +5492,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 +5655,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 +5771,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};
@@ -8554,4 +8662,4 @@ export {
   addDateInputWrapperSize as y,
   DateInputWrapper as z
 };
-//# sourceMappingURL=context.constants-Dop398a2.js.map
+//# sourceMappingURL=context.constants-YlWOZAd7.js.map