@duskmoon-dev/components 0.5.3 → 0.5.4

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

@@ -855,7 +855,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
@@ -1986,7 +1986,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";
@@ -2140,6 +2148,7 @@ var SelectRoot = forwardRef6(({
   "aria-required": ariaRequired,
   children,
   className,
+  defaultOpen = false,
   defaultValue,
   disabled,
   filterOption,
@@ -2147,6 +2156,9 @@ var SelectRoot = forwardRef6(({
   loading,
   mode,
   onChange,
+  onDropdownVisibleChange,
+  onOpenChange,
+  open: openProp,
   options,
   placeholder,
   showSearch,
@@ -2155,10 +2167,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;
@@ -2193,7 +2255,7 @@ var SelectRoot = forwardRef6(({
       emitChange(nextValues);
     } else {
       emitChange(option.value);
-      setOpen(false);
+      setOpenState(false);
     }
     setSearchValue("");
   }
@@ -2249,15 +2311,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,
@@ -2266,7 +2336,7 @@ var SelectRoot = forwardRef6(({
     children: [
       /* @__PURE__ */ jsxs7("button", {
         type: "button",
-        id,
+        id: triggerId,
         className: getSelectClasses({ size, status, disabled }),
         disabled: disabled || loading,
         "aria-describedby": ariaDescribedBy,
@@ -2276,8 +2346,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,
@@ -2325,10 +2401,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,
@@ -2462,7 +2550,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]);

package/dist/components/json-schema-form/index.js

@@ -1,7 +1,7 @@
 "use client";
 
 // src/components/json-schema-form/JsonSchemaForm.tsx
-import { useId as useId5, useMemo as useMemo11, useRef as useRef9, useState as useState20 } from "react";
+import { useId as useId6, useMemo as useMemo11, useRef as useRef10, useState as useState20 } from "react";
 
 // src/components/button/Button.tsx
 import React from "react";
@@ -4061,7 +4061,15 @@ var Segmented = forwardRef15(({
 });
 Segmented.displayName = "Segmented";
 // src/components/select/Select.tsx
-import React15, { forwardRef as forwardRef16, useMemo as useMemo7, useState as useState14 } from "react";
+import React15, {
+  forwardRef as forwardRef16,
+  useCallback as useCallback3,
+  useEffect as useEffect5,
+  useId as useId5,
+  useMemo as useMemo7,
+  useRef as useRef7,
+  useState as useState14
+} from "react";
 
 // src/classes/select.ts
 var selectContainerClass = "select-container";
@@ -4215,6 +4223,7 @@ var SelectRoot = forwardRef16(({
   "aria-required": ariaRequired,
   children,
   className,
+  defaultOpen = false,
   defaultValue,
   disabled,
   filterOption,
@@ -4222,6 +4231,9 @@ var SelectRoot = forwardRef16(({
   loading,
   mode,
   onChange,
+  onDropdownVisibleChange,
+  onOpenChange,
+  open: openProp,
   options,
   placeholder,
   showSearch,
@@ -4230,10 +4242,60 @@ var SelectRoot = forwardRef16(({
   value,
   ...props
 }, ref) => {
+  const generatedId = useId5();
+  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] = useState14(Boolean(defaultOpen));
+  const isControlled = openProp !== undefined;
+  const isOpen = isControlled ? Boolean(openProp) : internalOpen;
+  const containerRef = useRef7(null);
+  const dropdownRef = useRef7(null);
+  const setOpenState = useCallback3((nextOpen) => {
+    if (!isControlled) {
+      setInternalOpen(nextOpen);
+    }
+    onDropdownVisibleChange?.(nextOpen);
+    onOpenChange?.(nextOpen);
+  }, [isControlled, onDropdownVisibleChange, onOpenChange]);
+  useEffect5(() => {
+    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]);
+  useEffect5(() => {
+    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 = useMemo7(() => options ?? optionsFromChildren2(children), [children, options]);
   const flatOptions = useMemo7(() => flattenOptions(sourceOptions), [sourceOptions]);
-  const [open, setOpen] = useState14(false);
   const [searchValue, setSearchValue] = useState14("");
   const [internalValue, setInternalValue] = useState14(multiple ? normalizeMultiValue(defaultValue) : normalizeSingleValue2(defaultValue));
   const controlled = value !== undefined;
@@ -4268,7 +4330,7 @@ var SelectRoot = forwardRef16(({
       emitChange(nextValues);
     } else {
       emitChange(option.value);
-      setOpen(false);
+      setOpenState(false);
     }
     setSearchValue("");
   }
@@ -4324,15 +4386,23 @@ var SelectRoot = forwardRef16(({
       }, `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__ */ jsx17("span", {
     className: selectTagClass,
     children: renderValue(option)
   }, valueKey2(option.value))) : renderValue(selectedOptions[0]);
   return /* @__PURE__ */ jsxs15("div", {
     ...props,
-    ref,
+    ref: setRefs,
     className: getSelectContainerClasses({
-      open,
+      open: isOpen,
       loading,
       disabled,
       full: true,
@@ -4341,7 +4411,7 @@ var SelectRoot = forwardRef16(({
     children: [
       /* @__PURE__ */ jsxs15("button", {
         type: "button",
-        id,
+        id: triggerId,
         className: getSelectClasses({ size, status, disabled }),
         disabled: disabled || loading,
         "aria-describedby": ariaDescribedBy,
@@ -4351,8 +4421,14 @@ var SelectRoot = forwardRef16(({
         "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__ */ jsx17("span", {
             className: selectSelectionClass,
@@ -4400,10 +4476,22 @@ var SelectRoot = forwardRef16(({
           })
         })
       }) : null,
-      open ? /* @__PURE__ */ jsxs15("div", {
-        className: selectDropdownClass,
+      isOpen ? /* @__PURE__ */ jsxs15("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__ */ jsx17("input", {
             className: selectSearchClass,
@@ -4433,9 +4521,9 @@ Select.OptGroup = OptGroup;
 // src/components/slider/Slider.tsx
 import React16, {
   forwardRef as forwardRef17,
-  useEffect as useEffect5,
+  useEffect as useEffect6,
   useMemo as useMemo8,
-  useRef as useRef7,
+  useRef as useRef8,
   useState as useState15
 } from "react";
 
@@ -4675,8 +4763,8 @@ var Slider = forwardRef17(({
     step,
     range: isRange
   });
-  const lastCommittedValue = useRef7(currentValue);
-  useEffect5(() => {
+  const lastCommittedValue = useRef8(currentValue);
+  useEffect6(() => {
     lastCommittedValue.current = currentValue;
   }, [currentValue]);
   function commitValue(nextValue) {
@@ -6079,7 +6167,7 @@ TreeSelect.SHOW_ALL = SHOW_ALL;
 TreeSelect.SHOW_PARENT = SHOW_PARENT;
 TreeSelect.SHOW_CHILD = SHOW_CHILD;
 // src/components/upload/Upload.tsx
-import React20, { forwardRef as forwardRef21, useLayoutEffect as useLayoutEffect2, useRef as useRef8, useState as useState19 } from "react";
+import React20, { forwardRef as forwardRef21, useLayoutEffect as useLayoutEffect2, useRef as useRef9, useState as useState19 } from "react";
 
 // src/classes/upload.ts
 var uploadBaseClass = "file-upload";
@@ -6179,12 +6267,12 @@ function UploadRoot({
   dragger,
   ...props
 }, ref) {
-  const inputRef = useRef8(null);
+  const inputRef = useRef9(null);
   const [dragover, setDragover] = useState19(false);
   const [internalFileList, setInternalFileList] = useState19(() => defaultFileList.map(ensureUid));
   const controlled = fileList !== undefined;
   const mergedFileList = (controlled ? fileList : internalFileList).map(ensureUid);
-  const currentFileListRef = useRef8(mergedFileList);
+  const currentFileListRef = useRef9(mergedFileList);
   useLayoutEffect2(() => {
     currentFileListRef.current = mergedFileList;
   }, [mergedFileList]);
@@ -7307,8 +7395,8 @@ function JsonSchemaForm({
   const [resetRevision, setResetRevision] = useState20(0);
   const [internalErrors, setErrors] = useState20({});
   const errors = { ...internalErrors, ...suppliedErrors };
-  const formRef = useRef9(null);
-  const idPrefix = useId5().replaceAll(":", "");
+  const formRef = useRef10(null);
+  const idPrefix = useId6().replaceAll(":", "");
   function changeErrors(next) {
     setErrors(next);
     onErrorsChange?.({ ...next });

package/dist/components/select/Select.types.d.ts

@@ -19,12 +19,16 @@ export type SelectChangeValue = SelectValue | SelectValue[] | undefined;
 export interface SelectProps extends Omit<ComponentProps<"div">, "children" | "defaultValue" | "onChange"> {
     allowClear?: boolean;
     children?: ReactNode;
+    defaultOpen?: boolean;
     defaultValue?: SelectChangeValue;
     disabled?: boolean;
     filterOption?: boolean | ((inputValue: string, option: SelectOptionType) => boolean);
     loading?: boolean;
     mode?: SelectMode;
     onChange?: (value: SelectChangeValue, option?: SelectOptionType | SelectOptionType[]) => void;
+    onDropdownVisibleChange?: (open: boolean) => void;
+    onOpenChange?: (open: boolean) => void;
+    open?: boolean;
     options?: SelectOptionInput[];
     placeholder?: ReactNode;
     showSearch?: boolean;

package/dist/components/select/index.js

@@ -1,7 +1,15 @@
 "use client";
 
 // src/components/select/Select.tsx
-import React, { forwardRef, useMemo, useState } from "react";
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
 
 // ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -180,6 +188,7 @@ var SelectRoot = forwardRef(({
   "aria-required": ariaRequired,
   children,
   className,
+  defaultOpen = false,
   defaultValue,
   disabled,
   filterOption,
@@ -187,6 +196,9 @@ var SelectRoot = forwardRef(({
   loading,
   mode,
   onChange,
+  onDropdownVisibleChange,
+  onOpenChange,
+  open: openProp,
   options,
   placeholder,
   showSearch,
@@ -195,10 +207,60 @@ var SelectRoot = forwardRef(({
   value,
   ...props
 }, ref) => {
+  const generatedId = useId();
+  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] = useState(Boolean(defaultOpen));
+  const isControlled = openProp !== undefined;
+  const isOpen = isControlled ? Boolean(openProp) : internalOpen;
+  const containerRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const setOpenState = useCallback((nextOpen) => {
+    if (!isControlled) {
+      setInternalOpen(nextOpen);
+    }
+    onDropdownVisibleChange?.(nextOpen);
+    onOpenChange?.(nextOpen);
+  }, [isControlled, onDropdownVisibleChange, onOpenChange]);
+  useEffect(() => {
+    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]);
+  useEffect(() => {
+    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 = useMemo(() => options ?? optionsFromChildren(children), [children, options]);
   const flatOptions = useMemo(() => flattenOptions(sourceOptions), [sourceOptions]);
-  const [open, setOpen] = useState(false);
   const [searchValue, setSearchValue] = useState("");
   const [internalValue, setInternalValue] = useState(multiple ? normalizeMultiValue(defaultValue) : normalizeSingleValue(defaultValue));
   const controlled = value !== undefined;
@@ -233,7 +295,7 @@ var SelectRoot = forwardRef(({
       emitChange(nextValues);
     } else {
       emitChange(option.value);
-      setOpen(false);
+      setOpenState(false);
     }
     setSearchValue("");
   }
@@ -289,15 +351,23 @@ var SelectRoot = forwardRef(({
       }, `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__ */ jsx("span", {
     className: selectTagClass,
     children: renderValue(option)
   }, valueKey(option.value))) : renderValue(selectedOptions[0]);
   return /* @__PURE__ */ jsxs("div", {
     ...props,
-    ref,
+    ref: setRefs,
     className: getSelectContainerClasses({
-      open,
+      open: isOpen,
       loading,
       disabled,
       full: true,
@@ -306,7 +376,7 @@ var SelectRoot = forwardRef(({
     children: [
       /* @__PURE__ */ jsxs("button", {
         type: "button",
-        id,
+        id: triggerId,
         className: getSelectClasses({ size, status, disabled }),
         disabled: disabled || loading,
         "aria-describedby": ariaDescribedBy,
@@ -316,8 +386,14 @@ var SelectRoot = forwardRef(({
         "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__ */ jsx("span", {
             className: selectSelectionClass,
@@ -365,10 +441,22 @@ var SelectRoot = forwardRef(({
           })
         })
       }) : null,
-      open ? /* @__PURE__ */ jsxs("div", {
-        className: selectDropdownClass,
+      isOpen ? /* @__PURE__ */ jsxs("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__ */ jsx("input", {
             className: selectSearchClass,

package/dist/generated/version.d.ts

@@ -1 +1 @@
-export declare const version = "0.5.3";
+export declare const version = "0.5.4";