@duskmoon-dev/components 0.5.3 → 0.5.4

package/dist/components/dm-pro-table/index.js

@@ -865,7 +865,7 @@ DmPagination.displayName = "DmPagination";
 // src/components/dm-search/DmSearch.tsx
 import {
   forwardRef as forwardRef7,
-  useEffect as useEffect3,
+  useEffect as useEffect4,
   useImperativeHandle as useImperativeHandle3,
   useMemo as useMemo6,
   useState as useState8
@@ -1996,7 +1996,15 @@ var Input = Object.assign(InputRoot, {
   Group
 });
 // src/components/select/Select.tsx
-import React7, { forwardRef as forwardRef6, useMemo as useMemo5, useState as useState7 } from "react";
+import React7, {
+  forwardRef as forwardRef6,
+  useCallback,
+  useEffect as useEffect3,
+  useId as useId2,
+  useMemo as useMemo5,
+  useRef as useRef4,
+  useState as useState7
+} from "react";
 
 // src/classes/select.ts
 var selectContainerClass = "select-container";
@@ -2150,6 +2158,7 @@ var SelectRoot = forwardRef6(({
   "aria-required": ariaRequired,
   children,
   className,
+  defaultOpen = false,
   defaultValue,
   disabled,
   filterOption,
@@ -2157,6 +2166,9 @@ var SelectRoot = forwardRef6(({
   loading,
   mode,
   onChange,
+  onDropdownVisibleChange,
+  onOpenChange,
+  open: openProp,
   options,
   placeholder,
   showSearch,
@@ -2165,10 +2177,60 @@ var SelectRoot = forwardRef6(({
   value,
   ...props
 }, ref) => {
+  const generatedId = useId2();
+  const cleanId = generatedId.replace(/[^a-zA-Z0-9_-]/g, "");
+  const triggerId = id || `select-${cleanId}`;
+  const dropdownId = `select-dropdown-${cleanId}`;
+  const anchorName = `--dm-select-${cleanId}`;
+  const [internalOpen, setInternalOpen] = useState7(Boolean(defaultOpen));
+  const isControlled = openProp !== undefined;
+  const isOpen = isControlled ? Boolean(openProp) : internalOpen;
+  const containerRef = useRef4(null);
+  const dropdownRef = useRef4(null);
+  const setOpenState = useCallback((nextOpen) => {
+    if (!isControlled) {
+      setInternalOpen(nextOpen);
+    }
+    onDropdownVisibleChange?.(nextOpen);
+    onOpenChange?.(nextOpen);
+  }, [isControlled, onDropdownVisibleChange, onOpenChange]);
+  useEffect3(() => {
+    const dropdown = dropdownRef.current;
+    if (!dropdown || typeof dropdown.showPopover !== "function")
+      return;
+    if (isOpen && !dropdown.matches(":popover-open")) {
+      try {
+        dropdown.showPopover();
+      } catch {}
+    } else if (!isOpen && dropdown.matches(":popover-open")) {
+      try {
+        dropdown.hidePopover();
+      } catch {}
+    }
+  }, [isOpen]);
+  useEffect3(() => {
+    if (!isOpen)
+      return;
+    const handlePointerDown = (event) => {
+      const target = event.target;
+      if (!target)
+        return;
+      if (containerRef.current?.contains(target))
+        return;
+      if (dropdownRef.current?.contains(target))
+        return;
+      setOpenState(false);
+    };
+    document.addEventListener("mousedown", handlePointerDown);
+    document.addEventListener("touchstart", handlePointerDown);
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      document.removeEventListener("touchstart", handlePointerDown);
+    };
+  }, [isOpen, setOpenState]);
   const multiple = mode === "multiple" || mode === "tags";
   const sourceOptions = useMemo5(() => options ?? optionsFromChildren(children), [children, options]);
   const flatOptions = useMemo5(() => flattenOptions(sourceOptions), [sourceOptions]);
-  const [open, setOpen] = useState7(false);
   const [searchValue, setSearchValue] = useState7("");
   const [internalValue, setInternalValue] = useState7(multiple ? normalizeMultiValue(defaultValue) : normalizeSingleValue(defaultValue));
   const controlled = value !== undefined;
@@ -2203,7 +2265,7 @@ var SelectRoot = forwardRef6(({
       emitChange(nextValues);
     } else {
       emitChange(option.value);
-      setOpen(false);
+      setOpenState(false);
     }
     setSearchValue("");
   }
@@ -2259,15 +2321,23 @@ var SelectRoot = forwardRef6(({
       }, `group-${index}`);
     });
   }
+  const setRefs = (node) => {
+    containerRef.current = node;
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  };
   const selection = multiple ? selectedOptions.map((option) => /* @__PURE__ */ jsx8("span", {
     className: selectTagClass,
     children: renderValue(option)
   }, valueKey(option.value))) : renderValue(selectedOptions[0]);
   return /* @__PURE__ */ jsxs7("div", {
     ...props,
-    ref,
+    ref: setRefs,
     className: getSelectContainerClasses({
-      open,
+      open: isOpen,
       loading,
       disabled,
       full: true,
@@ -2276,7 +2346,7 @@ var SelectRoot = forwardRef6(({
     children: [
       /* @__PURE__ */ jsxs7("button", {
         type: "button",
-        id,
+        id: triggerId,
         className: getSelectClasses({ size, status, disabled }),
         disabled: disabled || loading,
         "aria-describedby": ariaDescribedBy,
@@ -2286,8 +2356,14 @@ var SelectRoot = forwardRef6(({
         "aria-labelledby": ariaLabelledBy,
         "aria-required": ariaRequired,
         "aria-haspopup": "listbox",
-        "aria-expanded": open,
-        onClick: () => setOpen((current) => !current),
+        "aria-expanded": isOpen,
+        "aria-controls": dropdownId,
+        style: { anchorName },
+        onClick: () => {
+          if (disabled || loading)
+            return;
+          setOpenState(!isOpen);
+        },
         children: [
           /* @__PURE__ */ jsx8("span", {
             className: selectSelectionClass,
@@ -2335,10 +2411,22 @@ var SelectRoot = forwardRef6(({
           })
         })
       }) : null,
-      open ? /* @__PURE__ */ jsxs7("div", {
-        className: selectDropdownClass,
+      isOpen ? /* @__PURE__ */ jsxs7("div", {
+        id: dropdownId,
+        ref: dropdownRef,
+        popover: "auto",
         role: "listbox",
         "aria-multiselectable": multiple || undefined,
+        className: selectDropdownClass,
+        style: { positionAnchor: anchorName },
+        onToggle: (event) => {
+          if (event.target !== event.currentTarget)
+            return;
+          const nextOpen = event.nativeEvent?.newState === "open";
+          if (nextOpen !== isOpen) {
+            setOpenState(nextOpen);
+          }
+        },
         children: [
           searchable ? /* @__PURE__ */ jsx8("input", {
             className: selectSearchClass,
@@ -2472,7 +2560,7 @@ var DmSearch = forwardRef7(({
   const controlled = controlledValues !== undefined;
   const values = controlled ? controlledValues : internalValues;
   const visibleItems = collapsed ? allItems.slice(0, 1) : allItems;
-  useEffect3(() => {
+  useEffect4(() => {
     if (!controlled)
       setValues(initialValues(allItems, searchParams));
   }, [allItems, searchParams, controlled]);
@@ -3433,9 +3521,9 @@ import {
   cloneElement,
   forwardRef as forwardRef9,
   isValidElement,
-  useEffect as useEffect4,
-  useId as useId2,
-  useRef as useRef4,
+  useEffect as useEffect5,
+  useId as useId3,
+  useRef as useRef5,
   useState as useState11
 } from "react";
 
@@ -3564,11 +3652,11 @@ var DropdownRoot = forwardRef9(({
   const [internalOpen, setInternalOpen] = useState11(Boolean(defaultOpen));
   const [nativeOpen, setNativeOpen] = useState11(Boolean(open ?? defaultOpen));
   const visible = open ?? internalOpen;
-  const popupRef = useRef4(null);
-  const popupId = useId2();
+  const popupRef = useRef5(null);
+  const popupId = useId3();
   const anchorName = `--dm-dropdown-${popupId.replace(/[^a-zA-Z0-9_-]/g, "")}`;
   const clickTrigger = trigger.includes("click") || trigger.includes("hover");
-  useEffect4(() => {
+  useEffect5(() => {
     const popup = popupRef.current;
     if (!popup?.showPopover || !popup?.hidePopover)
       return;

package/dist/components/dm-query/index.js

@@ -4,14 +4,14 @@
 import {
   forwardRef as forwardRef6,
   useImperativeHandle as useImperativeHandle4,
-  useRef as useRef3,
+  useRef as useRef4,
   useState as useState7
 } from "react";
 
 // src/components/dm-search/DmSearch.tsx
 import {
   forwardRef as forwardRef5,
-  useEffect as useEffect2,
+  useEffect as useEffect3,
   useImperativeHandle as useImperativeHandle3,
   useMemo as useMemo4,
   useState as useState6
@@ -1494,7 +1494,15 @@ var Input = Object.assign(InputRoot, {
   Group
 });
 // src/components/select/Select.tsx
-import React5, { forwardRef as forwardRef4, useMemo as useMemo3, useState as useState5 } from "react";
+import React5, {
+  forwardRef as forwardRef4,
+  useCallback,
+  useEffect as useEffect2,
+  useId as useId2,
+  useMemo as useMemo3,
+  useRef as useRef3,
+  useState as useState5
+} from "react";
 
 // src/classes/select.ts
 var selectContainerClass = "select-container";
@@ -1648,6 +1656,7 @@ var SelectRoot = forwardRef4(({
   "aria-required": ariaRequired,
   children,
   className,
+  defaultOpen = false,
   defaultValue,
   disabled,
   filterOption,
@@ -1655,6 +1664,9 @@ var SelectRoot = forwardRef4(({
   loading,
   mode,
   onChange,
+  onDropdownVisibleChange,
+  onOpenChange,
+  open: openProp,
   options,
   placeholder,
   showSearch,
@@ -1663,10 +1675,60 @@ var SelectRoot = forwardRef4(({
   value,
   ...props
 }, ref) => {
+  const generatedId = useId2();
+  const cleanId = generatedId.replace(/[^a-zA-Z0-9_-]/g, "");
+  const triggerId = id || `select-${cleanId}`;
+  const dropdownId = `select-dropdown-${cleanId}`;
+  const anchorName = `--dm-select-${cleanId}`;
+  const [internalOpen, setInternalOpen] = useState5(Boolean(defaultOpen));
+  const isControlled = openProp !== undefined;
+  const isOpen = isControlled ? Boolean(openProp) : internalOpen;
+  const containerRef = useRef3(null);
+  const dropdownRef = useRef3(null);
+  const setOpenState = useCallback((nextOpen) => {
+    if (!isControlled) {
+      setInternalOpen(nextOpen);
+    }
+    onDropdownVisibleChange?.(nextOpen);
+    onOpenChange?.(nextOpen);
+  }, [isControlled, onDropdownVisibleChange, onOpenChange]);
+  useEffect2(() => {
+    const dropdown = dropdownRef.current;
+    if (!dropdown || typeof dropdown.showPopover !== "function")
+      return;
+    if (isOpen && !dropdown.matches(":popover-open")) {
+      try {
+        dropdown.showPopover();
+      } catch {}
+    } else if (!isOpen && dropdown.matches(":popover-open")) {
+      try {
+        dropdown.hidePopover();
+      } catch {}
+    }
+  }, [isOpen]);
+  useEffect2(() => {
+    if (!isOpen)
+      return;
+    const handlePointerDown = (event) => {
+      const target = event.target;
+      if (!target)
+        return;
+      if (containerRef.current?.contains(target))
+        return;
+      if (dropdownRef.current?.contains(target))
+        return;
+      setOpenState(false);
+    };
+    document.addEventListener("mousedown", handlePointerDown);
+    document.addEventListener("touchstart", handlePointerDown);
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      document.removeEventListener("touchstart", handlePointerDown);
+    };
+  }, [isOpen, setOpenState]);
   const multiple = mode === "multiple" || mode === "tags";
   const sourceOptions = useMemo3(() => options ?? optionsFromChildren(children), [children, options]);
   const flatOptions = useMemo3(() => flattenOptions(sourceOptions), [sourceOptions]);
-  const [open, setOpen] = useState5(false);
   const [searchValue, setSearchValue] = useState5("");
   const [internalValue, setInternalValue] = useState5(multiple ? normalizeMultiValue(defaultValue) : normalizeSingleValue(defaultValue));
   const controlled = value !== undefined;
@@ -1701,7 +1763,7 @@ var SelectRoot = forwardRef4(({
       emitChange(nextValues);
     } else {
       emitChange(option.value);
-      setOpen(false);
+      setOpenState(false);
     }
     setSearchValue("");
   }
@@ -1757,15 +1819,23 @@ var SelectRoot = forwardRef4(({
       }, `group-${index}`);
     });
   }
+  const setRefs = (node) => {
+    containerRef.current = node;
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  };
   const selection = multiple ? selectedOptions.map((option) => /* @__PURE__ */ jsx5("span", {
     className: selectTagClass,
     children: renderValue(option)
   }, valueKey(option.value))) : renderValue(selectedOptions[0]);
   return /* @__PURE__ */ jsxs5("div", {
     ...props,
-    ref,
+    ref: setRefs,
     className: getSelectContainerClasses({
-      open,
+      open: isOpen,
       loading,
       disabled,
       full: true,
@@ -1774,7 +1844,7 @@ var SelectRoot = forwardRef4(({
     children: [
       /* @__PURE__ */ jsxs5("button", {
         type: "button",
-        id,
+        id: triggerId,
         className: getSelectClasses({ size, status, disabled }),
         disabled: disabled || loading,
         "aria-describedby": ariaDescribedBy,
@@ -1784,8 +1854,14 @@ var SelectRoot = forwardRef4(({
         "aria-labelledby": ariaLabelledBy,
         "aria-required": ariaRequired,
         "aria-haspopup": "listbox",
-        "aria-expanded": open,
-        onClick: () => setOpen((current) => !current),
+        "aria-expanded": isOpen,
+        "aria-controls": dropdownId,
+        style: { anchorName },
+        onClick: () => {
+          if (disabled || loading)
+            return;
+          setOpenState(!isOpen);
+        },
         children: [
           /* @__PURE__ */ jsx5("span", {
             className: selectSelectionClass,
@@ -1833,10 +1909,22 @@ var SelectRoot = forwardRef4(({
           })
         })
       }) : null,
-      open ? /* @__PURE__ */ jsxs5("div", {
-        className: selectDropdownClass,
+      isOpen ? /* @__PURE__ */ jsxs5("div", {
+        id: dropdownId,
+        ref: dropdownRef,
+        popover: "auto",
         role: "listbox",
         "aria-multiselectable": multiple || undefined,
+        className: selectDropdownClass,
+        style: { positionAnchor: anchorName },
+        onToggle: (event) => {
+          if (event.target !== event.currentTarget)
+            return;
+          const nextOpen = event.nativeEvent?.newState === "open";
+          if (nextOpen !== isOpen) {
+            setOpenState(nextOpen);
+          }
+        },
         children: [
           searchable ? /* @__PURE__ */ jsx5("input", {
             className: selectSearchClass,
@@ -1970,7 +2058,7 @@ var DmSearch = forwardRef5(({
   const controlled = controlledValues !== undefined;
   const values = controlled ? controlledValues : internalValues;
   const visibleItems = collapsed ? allItems.slice(0, 1) : allItems;
-  useEffect2(() => {
+  useEffect3(() => {
     if (!controlled)
       setValues(initialValues(allItems, searchParams));
   }, [allItems, searchParams, controlled]);
@@ -2088,7 +2176,7 @@ var DmQuery = forwardRef6(({
   onSearch,
   ...props
 }, ref) => {
-  const searchRef = useRef3(null);
+  const searchRef = useRef4(null);
   const [selectedItem, setSelectedItem] = useState7(queryItem[0]);
   const items = selectedItem ? [toSearchItem(selectedItem)] : queryItem.map(toSearchItem);
   useImperativeHandle4(ref, () => ({

package/dist/components/dm-search/index.js

@@ -3,7 +3,7 @@
 // src/components/dm-search/DmSearch.tsx
 import {
   forwardRef as forwardRef5,
-  useEffect as useEffect2,
+  useEffect as useEffect3,
   useImperativeHandle as useImperativeHandle3,
   useMemo as useMemo4,
   useState as useState6
@@ -1486,7 +1486,15 @@ var Input = Object.assign(InputRoot, {
   Group
 });
 // src/components/select/Select.tsx
-import React5, { forwardRef as forwardRef4, useMemo as useMemo3, useState as useState5 } from "react";
+import React5, {
+  forwardRef as forwardRef4,
+  useCallback,
+  useEffect as useEffect2,
+  useId as useId2,
+  useMemo as useMemo3,
+  useRef as useRef3,
+  useState as useState5
+} from "react";
 
 // src/classes/select.ts
 var selectContainerClass = "select-container";
@@ -1640,6 +1648,7 @@ var SelectRoot = forwardRef4(({
   "aria-required": ariaRequired,
   children,
   className,
+  defaultOpen = false,
   defaultValue,
   disabled,
   filterOption,
@@ -1647,6 +1656,9 @@ var SelectRoot = forwardRef4(({
   loading,
   mode,
   onChange,
+  onDropdownVisibleChange,
+  onOpenChange,
+  open: openProp,
   options,
   placeholder,
   showSearch,
@@ -1655,10 +1667,60 @@ var SelectRoot = forwardRef4(({
   value,
   ...props
 }, ref) => {
+  const generatedId = useId2();
+  const cleanId = generatedId.replace(/[^a-zA-Z0-9_-]/g, "");
+  const triggerId = id || `select-${cleanId}`;
+  const dropdownId = `select-dropdown-${cleanId}`;
+  const anchorName = `--dm-select-${cleanId}`;
+  const [internalOpen, setInternalOpen] = useState5(Boolean(defaultOpen));
+  const isControlled = openProp !== undefined;
+  const isOpen = isControlled ? Boolean(openProp) : internalOpen;
+  const containerRef = useRef3(null);
+  const dropdownRef = useRef3(null);
+  const setOpenState = useCallback((nextOpen) => {
+    if (!isControlled) {
+      setInternalOpen(nextOpen);
+    }
+    onDropdownVisibleChange?.(nextOpen);
+    onOpenChange?.(nextOpen);
+  }, [isControlled, onDropdownVisibleChange, onOpenChange]);
+  useEffect2(() => {
+    const dropdown = dropdownRef.current;
+    if (!dropdown || typeof dropdown.showPopover !== "function")
+      return;
+    if (isOpen && !dropdown.matches(":popover-open")) {
+      try {
+        dropdown.showPopover();
+      } catch {}
+    } else if (!isOpen && dropdown.matches(":popover-open")) {
+      try {
+        dropdown.hidePopover();
+      } catch {}
+    }
+  }, [isOpen]);
+  useEffect2(() => {
+    if (!isOpen)
+      return;
+    const handlePointerDown = (event) => {
+      const target = event.target;
+      if (!target)
+        return;
+      if (containerRef.current?.contains(target))
+        return;
+      if (dropdownRef.current?.contains(target))
+        return;
+      setOpenState(false);
+    };
+    document.addEventListener("mousedown", handlePointerDown);
+    document.addEventListener("touchstart", handlePointerDown);
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      document.removeEventListener("touchstart", handlePointerDown);
+    };
+  }, [isOpen, setOpenState]);
   const multiple = mode === "multiple" || mode === "tags";
   const sourceOptions = useMemo3(() => options ?? optionsFromChildren(children), [children, options]);
   const flatOptions = useMemo3(() => flattenOptions(sourceOptions), [sourceOptions]);
-  const [open, setOpen] = useState5(false);
   const [searchValue, setSearchValue] = useState5("");
   const [internalValue, setInternalValue] = useState5(multiple ? normalizeMultiValue(defaultValue) : normalizeSingleValue(defaultValue));
   const controlled = value !== undefined;
@@ -1693,7 +1755,7 @@ var SelectRoot = forwardRef4(({
       emitChange(nextValues);
     } else {
       emitChange(option.value);
-      setOpen(false);
+      setOpenState(false);
     }
     setSearchValue("");
   }
@@ -1749,15 +1811,23 @@ var SelectRoot = forwardRef4(({
       }, `group-${index}`);
     });
   }
+  const setRefs = (node) => {
+    containerRef.current = node;
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  };
   const selection = multiple ? selectedOptions.map((option) => /* @__PURE__ */ jsx5("span", {
     className: selectTagClass,
     children: renderValue(option)
   }, valueKey(option.value))) : renderValue(selectedOptions[0]);
   return /* @__PURE__ */ jsxs5("div", {
     ...props,
-    ref,
+    ref: setRefs,
     className: getSelectContainerClasses({
-      open,
+      open: isOpen,
       loading,
       disabled,
       full: true,
@@ -1766,7 +1836,7 @@ var SelectRoot = forwardRef4(({
     children: [
       /* @__PURE__ */ jsxs5("button", {
         type: "button",
-        id,
+        id: triggerId,
         className: getSelectClasses({ size, status, disabled }),
         disabled: disabled || loading,
         "aria-describedby": ariaDescribedBy,
@@ -1776,8 +1846,14 @@ var SelectRoot = forwardRef4(({
         "aria-labelledby": ariaLabelledBy,
         "aria-required": ariaRequired,
         "aria-haspopup": "listbox",
-        "aria-expanded": open,
-        onClick: () => setOpen((current) => !current),
+        "aria-expanded": isOpen,
+        "aria-controls": dropdownId,
+        style: { anchorName },
+        onClick: () => {
+          if (disabled || loading)
+            return;
+          setOpenState(!isOpen);
+        },
         children: [
           /* @__PURE__ */ jsx5("span", {
             className: selectSelectionClass,
@@ -1825,10 +1901,22 @@ var SelectRoot = forwardRef4(({
           })
         })
       }) : null,
-      open ? /* @__PURE__ */ jsxs5("div", {
-        className: selectDropdownClass,
+      isOpen ? /* @__PURE__ */ jsxs5("div", {
+        id: dropdownId,
+        ref: dropdownRef,
+        popover: "auto",
         role: "listbox",
         "aria-multiselectable": multiple || undefined,
+        className: selectDropdownClass,
+        style: { positionAnchor: anchorName },
+        onToggle: (event) => {
+          if (event.target !== event.currentTarget)
+            return;
+          const nextOpen = event.nativeEvent?.newState === "open";
+          if (nextOpen !== isOpen) {
+            setOpenState(nextOpen);
+          }
+        },
         children: [
           searchable ? /* @__PURE__ */ jsx5("input", {
             className: selectSearchClass,
@@ -1962,7 +2050,7 @@ var DmSearch = forwardRef5(({
   const controlled = controlledValues !== undefined;
   const values = controlled ? controlledValues : internalValues;
   const visibleItems = collapsed ? allItems.slice(0, 1) : allItems;
-  useEffect2(() => {
+  useEffect3(() => {
     if (!controlled)
       setValues(initialValues(allItems, searchParams));
   }, [allItems, searchParams, controlled]);