@mirror-physics/fractal-ui 0.2.0-next.83 → 0.2.0-next.85

package/dist/index.d.cts

@@ -304,6 +304,8 @@ interface DropdownProps {
     triggerLabel?: string;
     /** Floating field title. Empty selectedValue is the unfilled state. */
     fieldLabel?: string;
+    /** Show a clear action; defaults to true for floating fields. */
+    clearable?: boolean;
     direction?: 'up' | 'down' | 'left' | 'right';
     /** Preferred alignment; shifted as needed to stay inside visible bounds. */
     align?: 'left' | 'right';
@@ -331,7 +333,7 @@ interface DropdownProps {
     closeOnSelect?: boolean;
     disabled?: boolean;
 }
-declare function Dropdown({ items, selectedValue, onSelect, multiple, selectedValues, onSelectionChange, searchable, searchPlaceholder, emptyMessage, triggerLabel, fieldLabel, direction, align, maxHeight, collisionPadding, triggerOrientation, triggerContent, label, iconOnly, noChevron, size: sizeAlias, controlSize, triggerId, triggerVariant, className, triggerClassName, panelClassName, closeOnSelect, disabled, }: DropdownProps): React.JSX.Element | null;
+declare function Dropdown({ items, selectedValue, onSelect, multiple, selectedValues, onSelectionChange, searchable, searchPlaceholder, emptyMessage, triggerLabel, fieldLabel, clearable, direction, align, maxHeight, collisionPadding, triggerOrientation, triggerContent, label, iconOnly, noChevron, size: sizeAlias, controlSize, triggerId, triggerVariant, className, triggerClassName, panelClassName, closeOnSelect, disabled, }: DropdownProps): React.JSX.Element | null;
 
 type LinkTheme = 'default' | 'muted' | 'accent';
 type LinkSize = 'sm' | 'md' | 'lg';

package/dist/index.d.ts

@@ -304,6 +304,8 @@ interface DropdownProps {
     triggerLabel?: string;
     /** Floating field title. Empty selectedValue is the unfilled state. */
     fieldLabel?: string;
+    /** Show a clear action; defaults to true for floating fields. */
+    clearable?: boolean;
     direction?: 'up' | 'down' | 'left' | 'right';
     /** Preferred alignment; shifted as needed to stay inside visible bounds. */
     align?: 'left' | 'right';
@@ -331,7 +333,7 @@ interface DropdownProps {
     closeOnSelect?: boolean;
     disabled?: boolean;
 }
-declare function Dropdown({ items, selectedValue, onSelect, multiple, selectedValues, onSelectionChange, searchable, searchPlaceholder, emptyMessage, triggerLabel, fieldLabel, direction, align, maxHeight, collisionPadding, triggerOrientation, triggerContent, label, iconOnly, noChevron, size: sizeAlias, controlSize, triggerId, triggerVariant, className, triggerClassName, panelClassName, closeOnSelect, disabled, }: DropdownProps): React.JSX.Element | null;
+declare function Dropdown({ items, selectedValue, onSelect, multiple, selectedValues, onSelectionChange, searchable, searchPlaceholder, emptyMessage, triggerLabel, fieldLabel, clearable, direction, align, maxHeight, collisionPadding, triggerOrientation, triggerContent, label, iconOnly, noChevron, size: sizeAlias, controlSize, triggerId, triggerVariant, className, triggerClassName, panelClassName, closeOnSelect, disabled, }: DropdownProps): React.JSX.Element | null;
 
 type LinkTheme = 'default' | 'muted' | 'accent';
 type LinkSize = 'sm' | 'md' | 'lg';

package/dist/index.js

@@ -1424,7 +1424,7 @@ function DataTable({ columns, data, emptyMessage, header, size = "md", className
 
 // src/components/Dropdown/Dropdown.tsx
 import * as React11 from "react";
-import { Check as Check2, MagnifyingGlass as MagnifyingGlass2, ChevronDown, ChevronLeft, ChevronRight as ChevronRight2, ChevronUp } from "@mirror-physics/fractal-icons";
+import { Close as Close2, Check as Check2, MagnifyingGlass as MagnifyingGlass2, ChevronDown, ChevronLeft, ChevronRight as ChevronRight2, ChevronUp } from "@mirror-physics/fractal-icons";
 
 // src/components/Dropdown/position.ts
 function positionDropdown(trigger, panel, bounds, direction, align) {
@@ -1475,6 +1475,7 @@ function Dropdown({
   emptyMessage = "No matching options.",
   triggerLabel,
   fieldLabel,
+  clearable = Boolean(fieldLabel),
   direction = "down",
   align = "left",
   maxHeight = 320,
@@ -1496,8 +1497,12 @@ function Dropdown({
 }) {
   const [query, setQuery] = React11.useState("");
   const searchRef = React11.useRef(null);
+  const searchContainerRef = React11.useRef(null);
+  const optionsRef = React11.useRef(null);
+  const [optionsScrolled, setOptionsScrolled] = React11.useState(false);
   const accessibleLabel = triggerLabel ?? fieldLabel ?? "Options";
   const size = controlSize ?? sizeAlias;
+  const canClear = clearable && !disabled && (multiple ? selectedValues.length > 0 && Boolean(onSelectionChange) : Boolean(selectedValue) && Boolean(onSelect));
   const [open, setOpen] = React11.useState(false);
   React11.useEffect(() => {
     if (!open) setQuery("");
@@ -1526,12 +1531,17 @@ function Dropdown({
     return renderableItems.slice(index + 1, nextHeader < 0 ? void 0 : nextHeader).some((next) => matching.has(next.value));
   });
   const selectableItems = visibleItems.filter((i) => i.kind !== "header");
-  const selected = items.find((i) => i.value === selectedValue && i.kind !== "header") ?? selectableItems[0] ?? visibleItems[0];
+  const selected = items.find((i) => i.value === selectedValue && i.kind !== "header") ?? (fieldLabel && !selectedValue && !multiple ? void 0 : selectableItems[0] ?? visibleItems[0]);
   const ChevronIcon = direction === "up" ? ChevronUp : direction === "left" ? ChevronLeft : direction === "right" ? ChevronRight2 : ChevronDown;
   useEscapeDismiss(100, () => {
     setOpen(false);
     triggerRef.current?.focus();
   }, open);
+  React11.useLayoutEffect(() => {
+    if (!open) return;
+    if (optionsRef.current) optionsRef.current.scrollTop = 0;
+    setOptionsScrolled(false);
+  }, [open, query]);
   React11.useLayoutEffect(() => {
     const root = rootRef.current;
     const trigger = triggerRef.current;
@@ -1569,7 +1579,7 @@ function Dropdown({
       panel.style.maxWidth = `${availableWidth}px`;
       panel.style.minWidth = `${Math.min(triggerRect.width, availableWidth)}px`;
       const panelRect = panel.getBoundingClientRect();
-      const desiredHeight = Math.min(heightLimit, panel.scrollHeight + panel.offsetHeight - panel.clientHeight);
+      const desiredHeight = Math.min(heightLimit, (optionsRef.current?.scrollHeight ?? 0) + (searchContainerRef.current?.offsetHeight ?? 0) + parseFloat(getComputedStyle(panel).paddingTop) + parseFloat(getComputedStyle(panel).paddingBottom) + panel.offsetHeight - panel.clientHeight);
       const position = positionDropdown(triggerRect, { width: panelRect.width, height: desiredHeight }, bounds, direction, align);
       const nextStyle = {
         left: position.left - rootRect.left - root.clientLeft + root.scrollLeft,
@@ -1594,6 +1604,7 @@ function Dropdown({
     const resize = new ResizeObserver(updatePosition);
     resize.observe(root);
     resize.observe(panel);
+    if (optionsRef.current) resize.observe(optionsRef.current);
     for (let ancestor = root.parentElement; ancestor; ancestor = ancestor.parentElement) {
       resize.observe(ancestor);
     }
@@ -1620,7 +1631,7 @@ function Dropdown({
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [open]);
   if (renderableItems.length === 0) return null;
-  return /* @__PURE__ */ jsxs17("div", { ref: rootRef, "data-control-size": size, "data-filled": multiple ? selectedValues.length > 0 : Boolean(selectedValue), "data-open": open, className: cn("fractal-dropdown", fieldLabel && "fractal-floating-field fractal-floating-field--dropdown", className), children: [
+  return /* @__PURE__ */ jsxs17("div", { ref: rootRef, "data-control-size": size, "data-filled": multiple ? selectedValues.length > 0 : Boolean(selectedValue), "data-open": open, "data-clearable": canClear || void 0, className: cn("fractal-dropdown", fieldLabel && "fractal-floating-field fractal-floating-field--dropdown", className), children: [
     /* @__PURE__ */ jsxs17(
       "button",
       {
@@ -1665,6 +1676,13 @@ function Dropdown({
         ]
       }
     ),
+    canClear && /* @__PURE__ */ jsx19("button", { type: "button", className: "fractal-dropdown-clear", "aria-label": `Clear ${accessibleLabel}`, onClick: () => {
+      if (multiple) onSelectionChange?.([]);
+      else onSelect?.("");
+      setOpen(false);
+      setQuery("");
+      triggerRef.current?.focus();
+    }, children: /* @__PURE__ */ jsx19(Close2, { "aria-hidden": "true" }) }),
     fieldLabel ? /* @__PURE__ */ jsx19("label", { className: "fractal-floating-field__label", htmlFor: triggerId ?? `${menuId}-trigger`, children: fieldLabel }) : null,
     open && /* @__PURE__ */ jsxs17(
       "div",
@@ -1686,11 +1704,11 @@ function Dropdown({
         className: cn("fractal-dropdown-panel", `fractal-dropdown-panel--${size}`, panelClassName),
         style: panelStyle,
         children: [
-          searchable && /* @__PURE__ */ jsxs17("div", { className: "fractal-dropdown-search", children: [
+          searchable && /* @__PURE__ */ jsx19("div", { ref: searchContainerRef, className: "fractal-dropdown-search-container", "data-scrolled": optionsScrolled, children: /* @__PURE__ */ jsxs17("div", { className: "fractal-dropdown-search", children: [
             /* @__PURE__ */ jsx19(MagnifyingGlass2, { "aria-hidden": "true" }),
             /* @__PURE__ */ jsx19("input", { ref: searchRef, type: "search", "aria-label": searchPlaceholder, placeholder: searchPlaceholder, value: query, onChange: (event) => setQuery(event.target.value) })
-          ] }),
-          /* @__PURE__ */ jsxs17("div", { role: "listbox", id: `${menuId}-options`, "aria-label": accessibleLabel, "aria-multiselectable": multiple || void 0, children: [
+          ] }) }),
+          /* @__PURE__ */ jsxs17("div", { ref: optionsRef, className: "fractal-dropdown-options", onScroll: (event) => setOptionsScrolled(event.currentTarget.scrollTop > 0), role: "listbox", id: `${menuId}-options`, "aria-label": accessibleLabel, "aria-multiselectable": multiple || void 0, children: [
             label != null && /* @__PURE__ */ jsx19("div", { className: "fractal-dropdown-label", children: label }),
             visibleItems.map((item, index) => {
               const topDivider = item.border === "top" ? /* @__PURE__ */ jsx19("div", { className: "fractal-dropdown-separator" }) : null;
@@ -1730,9 +1748,9 @@ function Dropdown({
                 ),
                 bottomDivider
               ] }, item.value);
-            })
-          ] }),
-          !selectableItems.length && /* @__PURE__ */ jsx19("p", { role: "status", className: "fractal-dropdown-label", children: emptyMessage })
+            }),
+            !selectableItems.length && /* @__PURE__ */ jsx19("p", { role: "status", className: "fractal-dropdown-label", children: emptyMessage })
+          ] })
         ]
       }
     )
@@ -2695,7 +2713,7 @@ SidebarFooter.displayName = "SidebarFooter";
 // src/components/SidePanel/SidePanel.tsx
 import * as React16 from "react";
 import { createPortal as createPortal4 } from "react-dom";
-import { Close as Close2 } from "@mirror-physics/fractal-icons";
+import { Close as Close3 } from "@mirror-physics/fractal-icons";
 import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
 function SidePanel({ open, onClose, title, description, children, footer, size = "md", loading = false, loadingLabel = "Loading", className }) {
   useEscapeDismiss(80, onClose, open);
@@ -2746,7 +2764,7 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
               typeof title === "string" ? /* @__PURE__ */ jsx31("h2", { className: "fractal-side-panel__title", children: title }) : /* @__PURE__ */ jsx31("div", { className: "fractal-side-panel__title", children: title }),
               description && /* @__PURE__ */ jsx31("p", { className: "fractal-side-panel__description", children: description })
             ] }),
-            /* @__PURE__ */ jsx31("button", { type: "button", className: "fractal-side-panel__close", "aria-label": "Close panel", onClick: onClose, children: /* @__PURE__ */ jsx31(Close2, { size: 18 }) })
+            /* @__PURE__ */ jsx31("button", { type: "button", className: "fractal-side-panel__close", "aria-label": "Close panel", onClick: onClose, children: /* @__PURE__ */ jsx31(Close3, { size: 18 }) })
           ] }),
           /* @__PURE__ */ jsx31("div", { ref: bodyRef, "aria-busy": loading || void 0, className: cn("fractal-side-panel__body", loading && "fractal-side-panel__body--loading"), children: loading ? /* @__PURE__ */ jsx31(UILoader, { label: loadingLabel }) : children }),
           footer && /* @__PURE__ */ jsx31("footer", { className: "fractal-side-panel__footer", "data-scroll-divider": scrollEdges.below, children: footer })
@@ -2806,7 +2824,7 @@ TextButton.displayName = "TextButton";
 
 // src/components/FileDropzone/FileDropzone.tsx
 import * as React19 from "react";
-import { Close as Close3, FileArrowUp } from "@mirror-physics/fractal-icons";
+import { Close as Close4, FileArrowUp } from "@mirror-physics/fractal-icons";
 import { jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
 function FileDropzone({
   files,
@@ -2886,7 +2904,7 @@ function FileDropzone({
           "aria-label": `Remove ${file.name}`,
           disabled,
           onClick: () => onFilesChange(files.filter((_, fileIndex) => fileIndex !== index)),
-          children: /* @__PURE__ */ jsx34(Close3, { "aria-hidden": "true", size: 14 })
+          children: /* @__PURE__ */ jsx34(Close4, { "aria-hidden": "true", size: 14 })
         }
       )
     ] }, `${file.name}-${file.size}-${index}`)) })