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

package/dist/index.cjs

@@ -1732,6 +1732,7 @@ function Dropdown({
   emptyMessage = "No matching options.",
   triggerLabel,
   fieldLabel,
+  clearable = Boolean(fieldLabel),
   direction = "down",
   align = "left",
   maxHeight = 320,
@@ -1755,6 +1756,7 @@ function Dropdown({
   const searchRef = React12.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] = React12.useState(false);
   React12.useEffect(() => {
     if (!open) setQuery("");
@@ -1783,7 +1785,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" ? import_fractal_icons10.ChevronUp : direction === "left" ? import_fractal_icons10.ChevronLeft : direction === "right" ? import_fractal_icons10.ChevronRight : import_fractal_icons10.ChevronDown;
   useEscapeDismiss(100, () => {
     setOpen(false);
@@ -1877,7 +1879,7 @@ function Dropdown({
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [open]);
   if (renderableItems.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("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__ */ (0, import_jsx_runtime20.jsxs)("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__ */ (0, import_jsx_runtime20.jsxs)(
       "button",
       {
@@ -1922,6 +1924,13 @@ function Dropdown({
         ]
       }
     ),
+    canClear && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("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__ */ (0, import_jsx_runtime20.jsx)(import_fractal_icons10.Close, { "aria-hidden": "true" }) }),
     fieldLabel ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { className: "fractal-floating-field__label", htmlFor: triggerId ?? `${menuId}-trigger`, children: fieldLabel }) : null,
     open && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       "div",