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

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,
@@ -1498,6 +1499,7 @@ function Dropdown({
   const searchRef = React11.useRef(null);
   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,7 +1528,7 @@ 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);
@@ -1620,7 +1622,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 +1667,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",
@@ -2695,7 +2704,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 +2755,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 +2815,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 +2895,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}`)) })