@rojaostudio/ds 2.0.0-next.20 → 2.0.0-next.21

package/dist/components/data-table-header.d.ts

@@ -35,6 +35,12 @@ type DataTableHeaderProps = {
      * Checkbox "Agrupar por produto". In view in the compact arrangement too.
      */
     view?: ReactNode;
+    /**
+     * The list's action (Figma: `showActions`, off by default, + the `actions` instance): an IconButton, neutral outline
+     * md, with its Tooltip, such as a gear "Organizar categorias" or exporting. It sits outside the tools, always at the
+     * end of the FIRST line, on the right; the tools wrap, the action never goes down.
+     * Creating is NOT an action of the bar: creating is the FAB. The component does not enforce this; it documents it.
+     */
     actions?: ReactNode;
     className?: string;
     /** In the compact arrangement (bar below 1024), moves the filters and the actions into a Drawer. The quick filters stay in view. */
@@ -47,8 +53,10 @@ declare function FilterDropdown({ f, placement }: {
 }): react.JSX.Element;
 /**
  * DataTableHeader — a composition of the Input (search), FilterChips, Buttons, the DropdownMenu, the Popover and
- * the Drawer: the bar above a table. The search is always on the left and takes the free width (at least 320); the
- * filters are always on the right; what does not fit wraps. Quick filters go in the `quickFilters` slot; one filter
+ * the Drawer: the bar above a table. A row that never wraps: the tools (the search, the quick filters, the filters,
+ * the view control) wrap inside their own group; the action stays outside it, at the end of the first line, on the
+ * right. The search is always on the left and takes the free width (at least 320); the filters are always on the
+ * right; what does not fit wraps. Quick filters go in the `quickFilters` slot; one filter
  * is a dropdown, two or more collapse into "Filtros" (the active ones stay in view as removable Chips); the `view`
  * control comes after the filters, before the actions. "Filtros · N" counts the active `filters`, the ones that
  * button opens.

package/dist/components/data-table-header.js

@@ -155,85 +155,87 @@ function DataTableHeader({
   const singleFilter = filters.length === 1 ? filters[0] : null;
   const lead = Boolean(search || quickFilters);
   return /* @__PURE__ */ jsxs("div", { className: ["rds-data-table-header", className].filter(Boolean).join(" "), children: [
-    search && /* @__PURE__ */ jsx(
-      Input,
-      {
-        className: "rds-data-table-header__search",
-        type: "search",
-        "aria-label": (_a = search.placeholder) != null ? _a : "Buscar\u2026",
-        placeholder: (_b = search.placeholder) != null ? _b : "Buscar\u2026",
-        leadingIcon: /* @__PURE__ */ jsx(SearchIcon, {}),
-        clearable: true,
-        clearLabel: "Limpar busca",
-        value: search.value,
-        onChange: (e) => search.onChange(e.target.value)
-      }
-    ),
-    quickFilters && /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__quick", children: quickFilters }),
-    filters.length > 0 && /* @__PURE__ */ jsxs("div", { className: "rds-data-table-header__wide", children: [
-      lead && /* @__PURE__ */ jsx(Separator, { orientation: "vertical" }),
-      collapseDesktop ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        activeFilters.map((f) => /* @__PURE__ */ jsx(Chip, { onRemove: () => f.onChange(""), removeLabel: `Remover filtro ${f.label}`, children: optionLabel(f) }, f.key)),
-        /* @__PURE__ */ jsx(
-          FiltersPopover,
-          {
-            filters,
-            onClear,
-            showClear: activeFilterCount > 0,
-            trigger: /* @__PURE__ */ jsx(FiltersButton, { count: activeFilterCount })
-          }
-        )
-      ] }) : filters.map((f) => /* @__PURE__ */ jsx(FilterDropdown, { f }, f.key)),
-      onClear && activeFilterCount > 0 && !collapseDesktop && /* @__PURE__ */ jsx(Tooltip, { text: "Limpar filtros", children: /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(CloseIcon, {}), label: "Limpar filtros", variant: "ghost", tone: "neutral", onClick: onClear }) })
-    ] }),
-    singleFilter && !(mobileCollapse && actions) && /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__narrow", children: /* @__PURE__ */ jsx(MobileSingleFilter, { f: singleFilter }) }),
-    !mobileCollapse && filters.length >= 2 && /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__narrow", children: /* @__PURE__ */ jsx(
-      FiltersPopover,
-      {
-        filters,
-        onClear,
-        showClear: activeFilterCount > 0,
-        trigger: /* @__PURE__ */ jsx(
-          CompactFilterTrigger,
-          {
-            label: "Filtros",
-            state: activeState(activeFilterCount),
-            indicator: activeFilterCount > 0 ? activeFilterCount : void 0
-          }
-        )
-      }
-    ) }),
-    mobileCollapse && (filters.length >= 2 || actions) && /* @__PURE__ */ jsxs("div", { className: "rds-data-table-header__narrow", children: [
-      /* @__PURE__ */ jsx(
-        CompactFilterTrigger,
+    /* @__PURE__ */ jsxs("div", { className: "rds-data-table-header__tools", children: [
+      search && /* @__PURE__ */ jsx(
+        Input,
         {
-          label: "Filtros",
-          state: activeState(activeFilterCount),
-          indicator: activeFilterCount === 0 ? void 0 : filters.length === 1 ? "dot" : activeFilterCount,
-          onClick: () => setSheetOpen(true)
+          className: "rds-data-table-header__search",
+          type: "search",
+          "aria-label": (_a = search.placeholder) != null ? _a : "Buscar\u2026",
+          placeholder: (_b = search.placeholder) != null ? _b : "Buscar\u2026",
+          leadingIcon: /* @__PURE__ */ jsx(SearchIcon, {}),
+          clearable: true,
+          clearLabel: "Limpar busca",
+          value: search.value,
+          onChange: (e) => search.onChange(e.target.value)
         }
       ),
-      /* @__PURE__ */ jsx(Drawer, { open: sheetOpen, onOpenChange: setSheetOpen, title: "Filtros", children: /* @__PURE__ */ jsxs("div", { className: "rds-data-table-header__groups", children: [
+      quickFilters && /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__quick", children: quickFilters }),
+      filters.length > 0 && /* @__PURE__ */ jsxs("div", { className: "rds-data-table-header__wide", children: [
+        lead && /* @__PURE__ */ jsx(Separator, { orientation: "vertical" }),
+        collapseDesktop ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          activeFilters.map((f) => /* @__PURE__ */ jsx(Chip, { onRemove: () => f.onChange(""), removeLabel: `Remover filtro ${f.label}`, children: optionLabel(f) }, f.key)),
+          /* @__PURE__ */ jsx(
+            FiltersPopover,
+            {
+              filters,
+              onClear,
+              showClear: activeFilterCount > 0,
+              trigger: /* @__PURE__ */ jsx(FiltersButton, { count: activeFilterCount })
+            }
+          )
+        ] }) : filters.map((f) => /* @__PURE__ */ jsx(FilterDropdown, { f }, f.key)),
+        onClear && activeFilterCount > 0 && !collapseDesktop && /* @__PURE__ */ jsx(Tooltip, { text: "Limpar filtros", children: /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(CloseIcon, {}), label: "Limpar filtros", variant: "ghost", tone: "neutral", onClick: onClear }) })
+      ] }),
+      singleFilter && !(mobileCollapse && actions) && /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__narrow", children: /* @__PURE__ */ jsx(MobileSingleFilter, { f: singleFilter }) }),
+      !mobileCollapse && filters.length >= 2 && /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__narrow", children: /* @__PURE__ */ jsx(
+        FiltersPopover,
+        {
+          filters,
+          onClear,
+          showClear: activeFilterCount > 0,
+          trigger: /* @__PURE__ */ jsx(
+            CompactFilterTrigger,
+            {
+              label: "Filtros",
+              state: activeState(activeFilterCount),
+              indicator: activeFilterCount > 0 ? activeFilterCount : void 0
+            }
+          )
+        }
+      ) }),
+      mobileCollapse && (filters.length >= 2 || actions) && /* @__PURE__ */ jsxs("div", { className: "rds-data-table-header__narrow", children: [
         /* @__PURE__ */ jsx(
-          FilterGroups,
+          CompactFilterTrigger,
           {
-            filters,
-            onPick: (f, v) => {
-              f.onChange(v);
-              setSheetOpen(false);
-            },
-            onClear: onClear ? () => {
-              onClear();
-              setSheetOpen(false);
-            } : void 0,
-            showClear: activeFilterCount > 0
+            label: "Filtros",
+            state: activeState(activeFilterCount),
+            indicator: activeFilterCount === 0 ? void 0 : filters.length === 1 ? "dot" : activeFilterCount,
+            onClick: () => setSheetOpen(true)
           }
         ),
-        actions && /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__drawer-actions", children: actions })
-      ] }) })
+        /* @__PURE__ */ jsx(Drawer, { open: sheetOpen, onOpenChange: setSheetOpen, title: "Filtros", children: /* @__PURE__ */ jsxs("div", { className: "rds-data-table-header__groups", children: [
+          /* @__PURE__ */ jsx(
+            FilterGroups,
+            {
+              filters,
+              onPick: (f, v) => {
+                f.onChange(v);
+                setSheetOpen(false);
+              },
+              onClear: onClear ? () => {
+                onClear();
+                setSheetOpen(false);
+              } : void 0,
+              showClear: activeFilterCount > 0
+            }
+          ),
+          actions && /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__drawer-actions", children: actions })
+        ] }) })
+      ] }),
+      view && /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__view", children: view })
     ] }),
-    view && /* @__PURE__ */ jsx("div", { className: "rds-data-table-header__view", children: view }),
-    actions && /* @__PURE__ */ jsx("div", { className: mobileCollapse ? "rds-data-table-header__wide" : "rds-data-table-header__actions", children: actions })
+    actions && /* @__PURE__ */ jsx("div", { className: ["rds-data-table-header__actions", mobileCollapse && "rds-data-table-header__wide"].filter(Boolean).join(" "), children: actions })
   ] });
 }
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rojaostudio/ds",
-  "version": "2.0.0-next.20",
+  "version": "2.0.0-next.21",
   "type": "module",
   "description": "Rojão Design System — componentes React, estilos e alvo React Native. O motor vive em @rojaostudio/ds-core.",
   "license": "MIT",

package/styles/rds/components-styles.css

@@ -3583,9 +3583,10 @@ input:focus-visible + .rds-checkbox__box {
 /* @tokens data-table-header */
 /*
  * DataTableHeader: no tokens of its own; the Input, FilterChip, Chip, Button, Separator, Checkbox, DropdownMenu,
- * Popover and Drawer bring theirs. One row, 8 apart, 12 above the table, packed to the right: the search on the left
- * takes the free width, at least 320 (never wider than the bar); the quick filters, the filters, the view control
- * and the actions follow it on the right, and what does not fit wraps.
+ * Popover and Drawer bring theirs. The bar is one row that never wraps, aligned to the top, 8 apart, 12 above the
+ * table: the `tools` group (the search, the quick filters, the filters, the view control) takes the free width and
+ * is what wraps, packed to the right, the search on the left taking the free width, at least 320 (never wider than
+ * the group); the action sits outside it, fixed at the end of the FIRST line, on the right, and never goes down.
  * Two arrangements, by the screen width, as the Figma viewport mode (layout/compact below lg 1024; the SavingBar's cut):
  * expanded from 1024 (the __wide parts: Separator, Buttons with labels); compact below it (the __narrow parts: the
  * filter as an IconButton of 44), where the search accepts 200. On the IconButton, while a filter is on, a dot of 8
@@ -3596,11 +3597,27 @@ input:focus-visible + .rds-checkbox__box {
   box-sizing: border-box;
   width: 100%;
   display: flex;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  gap: var(--space-8);
+  margin-bottom: var(--space-12);
+}
+
+/* Figma `tools`: horizontal, wrap, fill. */
+.rds-data-table-header__tools {
+  flex: 1 1 0;
+  min-width: 0;
+  display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: flex-end;
   gap: var(--space-8);
-  margin-bottom: var(--space-12);
+}
+
+/* Figma `actions`: outside `tools`, at the end of the first line. */
+.rds-data-table-header__actions {
+  flex: none;
+  align-self: flex-start;
 }
 
 /* Scoped to the bar: the field's own `min-width: 0` (internal/field.css) comes later in the bundle. */