@flytedan/flytebot-design-system 0.51.0 → 0.51.2

package/dist/index.d.cts

@@ -1366,7 +1366,7 @@ interface FilterBarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "on
      *  drop below the chips on a row of their own, still right-aligned, when the bar is too
      *  narrow to hold them all on one line. */
     actions?: React.ReactNode;
-    /** Shows a "Clear all" button, ahead of the chips, while any filter is applied; it never
+    /** Shows a "Clear all" button, right after the Filter button (under it on a bar too narrow to hold both), while any filter is applied; it never
      *  shows without one. Fires once, with no arguments: the host clears every filter in a
      *  single update (applied synchronously, like onFilterChange/onFilterRemove), so FilterBar
      *  never fans one click out into a removal per filter. */

package/dist/index.d.ts

@@ -1366,7 +1366,7 @@ interface FilterBarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "on
      *  drop below the chips on a row of their own, still right-aligned, when the bar is too
      *  narrow to hold them all on one line. */
     actions?: React.ReactNode;
-    /** Shows a "Clear all" button, ahead of the chips, while any filter is applied; it never
+    /** Shows a "Clear all" button, right after the Filter button (under it on a bar too narrow to hold both), while any filter is applied; it never
      *  shows without one. Fires once, with no arguments: the host clears every filter in a
      *  single update (applied synchronously, like onFilterChange/onFilterRemove), so FilterBar
      *  never fans one click out into a removal per filter. */

package/dist/index.js

@@ -4374,14 +4374,16 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
   const activeCount = activeFilterCount(fields, filters);
   const canAdd = addableFields.length > 0;
   const showCount = showActiveCount && activeCount > 0;
+  const clearAll = activeCount > 0 ? onClearAll : void 0;
+  const showClear = clearAll !== void 0;
   const addMenuItems = [
     { kind: "section", label: "Add filter" },
     ...addableFields.map((f) => ({ id: f.key, label: f.label, onSelect: () => startEditing(f.key) }))
   ];
   return /* @__PURE__ */ jsxs41("span", { className: ["fd-filterbar", className].filter(Boolean).join(" "), ...rest, children: [
     /* @__PURE__ */ jsxs41("span", { className: "fd-filterbar-main", children: [
-      canAdd || showCount ? /* @__PURE__ */ jsxs41("span", { className: "fd-filterbar-trigger", children: [
-        /* @__PURE__ */ jsx49("span", { ref: addAnchorRef, children: /* @__PURE__ */ jsxs41(
+      canAdd || showCount || showClear ? /* @__PURE__ */ jsxs41("span", { className: "fd-filterbar-trigger", children: [
+        canAdd || showCount ? /* @__PURE__ */ jsx49("span", { ref: addAnchorRef, children: /* @__PURE__ */ jsxs41(
           Button,
           {
             size: "md",
@@ -4404,7 +4406,8 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
               ] }) : null
             ]
           }
-        ) }),
+        ) }) : null,
+        clearAll ? /* @__PURE__ */ jsx49(Button, { size: "sm", variant: "ghost", onClick: () => clearAll(), children: "Clear all" }) : null,
         canAdd ? /* @__PURE__ */ jsx49(
           Popover,
           {
@@ -4419,144 +4422,141 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
           }
         ) : null
       ] }) : null,
-      /* @__PURE__ */ jsxs41("span", { className: "fd-filterbar-chips", children: [
-        onClearAll && activeCount > 0 ? /* @__PURE__ */ jsx49(Button, { size: "sm", variant: "ghost", onClick: () => onClearAll(), children: "Clear all" }) : null,
-        fields.map((field) => {
-          const value = filters[field.key];
-          const editing = panel?.kind === "edit" && panel.key === field.key;
-          if (editing && field.type === "text") {
-            return /* @__PURE__ */ jsxs41("span", { className: ["fd-tag", "fd-filterbar-text"].join(" "), children: [
-              /* @__PURE__ */ jsx49(
-                "input",
-                {
-                  ref: textInputRef,
-                  className: "fd-filterbar-text-input",
-                  value: value ?? "",
-                  placeholder: field.placeholder || field.label,
-                  "aria-label": field.label,
-                  onChange: (e) => commit(field, e.target.value),
-                  onKeyDown: (e) => {
-                    if (e.key === "Enter") setPanel(null);
-                    else if (e.key === "Escape") {
-                      e.stopPropagation();
-                      setPanel(null);
-                    }
-                  },
-                  onBlur: () => setPanel(null)
-                }
-              ),
-              isSet(value) ? /* @__PURE__ */ jsx49(
-                "span",
-                {
-                  className: "fd-tag-remove",
-                  role: "button",
-                  "aria-label": "Remove " + field.label,
-                  onClick: (e) => {
+      /* @__PURE__ */ jsx49("span", { className: "fd-filterbar-chips", children: fields.map((field) => {
+        const value = filters[field.key];
+        const editing = panel?.kind === "edit" && panel.key === field.key;
+        if (editing && field.type === "text") {
+          return /* @__PURE__ */ jsxs41("span", { className: ["fd-tag", "fd-filterbar-text"].join(" "), children: [
+            /* @__PURE__ */ jsx49(
+              "input",
+              {
+                ref: textInputRef,
+                className: "fd-filterbar-text-input",
+                value: value ?? "",
+                placeholder: field.placeholder || field.label,
+                "aria-label": field.label,
+                onChange: (e) => commit(field, e.target.value),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") setPanel(null);
+                  else if (e.key === "Escape") {
                     e.stopPropagation();
-                    removeField(field);
                     setPanel(null);
-                  },
-                  children: /* @__PURE__ */ jsx49("i", { className: "ph ph-x", "aria-hidden": "true" })
-                }
-              ) : null
-            ] }, field.key);
-          }
-          const set = isFieldSet(field, value);
-          if (!editing && !set) return null;
-          const chipRef = editing ? editAnchorRef : void 0;
-          const toggleOrClose = () => editing ? closeEditing() : startEditing(field.key);
-          const remove = () => {
-            removeField(field);
-            closeEditing();
-          };
-          const chipText = field.label + (set ? ": " + chipLabel(field, value) : "");
-          const chip = /* @__PURE__ */ jsx49(Tag, { icon: field.icon, selected: true, onClick: toggleOrClose, onRemove: remove, title: chipText, "aria-label": chipText, children: /* @__PURE__ */ jsx49(MiddleEllipsis, { text: chipText }) });
-          if (field.type === "text") {
-            return /* @__PURE__ */ jsx49("span", { className: "fd-filterbar-chip", children: chip }, field.key);
-          }
-          if (field.type === "select") {
-            return /* @__PURE__ */ jsxs41("span", { className: "fd-filterbar-chip", children: [
-              /* @__PURE__ */ jsx49("span", { ref: chipRef, children: chip }),
-              editing ? /* @__PURE__ */ jsx49(
-                Popover,
-                {
-                  open: true,
-                  anchorRef: editAnchorRef,
-                  onClose: closeEditing,
-                  placement: align === "right" ? "bottom-end" : "bottom-start",
-                  offset: 6,
-                  minWidth: 200,
-                  label: field.label,
-                  children: /* @__PURE__ */ jsx49("span", { role: "listbox", "aria-label": field.label, ref: optionsRef, className: "fd-pop-list", children: field.options.map((o) => {
-                    const on = o.value === value;
-                    return /* @__PURE__ */ jsx49(
-                      "button",
-                      {
-                        type: "button",
-                        role: "option",
-                        "aria-selected": on,
-                        className: ["fd-opt", on ? "is-selected" : ""].filter(Boolean).join(" "),
-                        onClick: () => {
-                          commit(field, o.value);
-                          setPanel(null);
-                        },
-                        children: /* @__PURE__ */ jsx49("span", { className: "fd-opt-label", children: o.label })
+                  }
+                },
+                onBlur: () => setPanel(null)
+              }
+            ),
+            isSet(value) ? /* @__PURE__ */ jsx49(
+              "span",
+              {
+                className: "fd-tag-remove",
+                role: "button",
+                "aria-label": "Remove " + field.label,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  removeField(field);
+                  setPanel(null);
+                },
+                children: /* @__PURE__ */ jsx49("i", { className: "ph ph-x", "aria-hidden": "true" })
+              }
+            ) : null
+          ] }, field.key);
+        }
+        const set = isFieldSet(field, value);
+        if (!editing && !set) return null;
+        const chipRef = editing ? editAnchorRef : void 0;
+        const toggleOrClose = () => editing ? closeEditing() : startEditing(field.key);
+        const remove = () => {
+          removeField(field);
+          closeEditing();
+        };
+        const chipText = field.label + (set ? ": " + chipLabel(field, value) : "");
+        const chip = /* @__PURE__ */ jsx49(Tag, { icon: field.icon, selected: true, onClick: toggleOrClose, onRemove: remove, title: chipText, "aria-label": chipText, children: /* @__PURE__ */ jsx49(MiddleEllipsis, { text: chipText }) });
+        if (field.type === "text") {
+          return /* @__PURE__ */ jsx49("span", { className: "fd-filterbar-chip", children: chip }, field.key);
+        }
+        if (field.type === "select") {
+          return /* @__PURE__ */ jsxs41("span", { className: "fd-filterbar-chip", children: [
+            /* @__PURE__ */ jsx49("span", { ref: chipRef, children: chip }),
+            editing ? /* @__PURE__ */ jsx49(
+              Popover,
+              {
+                open: true,
+                anchorRef: editAnchorRef,
+                onClose: closeEditing,
+                placement: align === "right" ? "bottom-end" : "bottom-start",
+                offset: 6,
+                minWidth: 200,
+                label: field.label,
+                children: /* @__PURE__ */ jsx49("span", { role: "listbox", "aria-label": field.label, ref: optionsRef, className: "fd-pop-list", children: field.options.map((o) => {
+                  const on = o.value === value;
+                  return /* @__PURE__ */ jsx49(
+                    "button",
+                    {
+                      type: "button",
+                      role: "option",
+                      "aria-selected": on,
+                      className: ["fd-opt", on ? "is-selected" : ""].filter(Boolean).join(" "),
+                      onClick: () => {
+                        commit(field, o.value);
+                        setPanel(null);
                       },
-                      o.value
-                    );
-                  }) })
-                }
-              ) : null
-            ] }, field.key);
-          }
-          if (field.type === "multiSelect") {
-            return /* @__PURE__ */ jsxs41("span", { className: "fd-filterbar-chip", children: [
-              /* @__PURE__ */ jsx49("span", { ref: chipRef, children: chip }),
-              editing ? /* @__PURE__ */ jsx49(
-                MultiSelectPanel,
-                {
-                  field,
-                  value,
-                  anchorRef: editAnchorRef,
-                  onCommit: (v) => commit(field, v),
-                  onClose: closeEditing
-                }
-              ) : null
-            ] }, field.key);
-          }
-          if (field.type === "range") {
-            return /* @__PURE__ */ jsxs41("span", { className: "fd-filterbar-chip", children: [
-              /* @__PURE__ */ jsx49("span", { ref: chipRef, children: chip }),
-              editing ? /* @__PURE__ */ jsx49(
-                RangePanel,
-                {
-                  field,
-                  value,
-                  anchorRef: editAnchorRef,
-                  onCommit: (v) => commit(field, v),
-                  onClose: closeEditing
-                }
-              ) : null
-            ] }, field.key);
-          }
-          if (field.type === "date") {
-            return /* @__PURE__ */ jsxs41("span", { className: "fd-filterbar-chip", children: [
-              /* @__PURE__ */ jsx49("span", { ref: chipRef, children: chip }),
-              editing ? /* @__PURE__ */ jsx49(
-                DatePanel,
-                {
-                  field,
-                  value,
-                  anchorRef: editAnchorRef,
-                  onCommit: (v) => commit(field, v),
-                  onClose: closeEditing
-                }
-              ) : null
-            ] }, field.key);
-          }
-          return null;
-        })
-      ] })
+                      children: /* @__PURE__ */ jsx49("span", { className: "fd-opt-label", children: o.label })
+                    },
+                    o.value
+                  );
+                }) })
+              }
+            ) : null
+          ] }, field.key);
+        }
+        if (field.type === "multiSelect") {
+          return /* @__PURE__ */ jsxs41("span", { className: "fd-filterbar-chip", children: [
+            /* @__PURE__ */ jsx49("span", { ref: chipRef, children: chip }),
+            editing ? /* @__PURE__ */ jsx49(
+              MultiSelectPanel,
+              {
+                field,
+                value,
+                anchorRef: editAnchorRef,
+                onCommit: (v) => commit(field, v),
+                onClose: closeEditing
+              }
+            ) : null
+          ] }, field.key);
+        }
+        if (field.type === "range") {
+          return /* @__PURE__ */ jsxs41("span", { className: "fd-filterbar-chip", children: [
+            /* @__PURE__ */ jsx49("span", { ref: chipRef, children: chip }),
+            editing ? /* @__PURE__ */ jsx49(
+              RangePanel,
+              {
+                field,
+                value,
+                anchorRef: editAnchorRef,
+                onCommit: (v) => commit(field, v),
+                onClose: closeEditing
+              }
+            ) : null
+          ] }, field.key);
+        }
+        if (field.type === "date") {
+          return /* @__PURE__ */ jsxs41("span", { className: "fd-filterbar-chip", children: [
+            /* @__PURE__ */ jsx49("span", { ref: chipRef, children: chip }),
+            editing ? /* @__PURE__ */ jsx49(
+              DatePanel,
+              {
+                field,
+                value,
+                anchorRef: editAnchorRef,
+                onCommit: (v) => commit(field, v),
+                onClose: closeEditing
+              }
+            ) : null
+          ] }, field.key);
+        }
+        return null;
+      }) })
     ] }),
     actions ? /* @__PURE__ */ jsx49("span", { className: "fd-filterbar-actions", children: actions }) : null
   ] });