@worknice/whiteboard 0.37.1 → 0.38.0

package/dist/presentation/Table.module.js

@@ -17,7 +17,21 @@ const Table_module_rslib_entry_ = {
     bulkSelectionModalContent: "bulkSelectionModalContent-LMqKi5",
     bulkSelectionActions: "bulkSelectionActions-n3W1ey",
     filterBar: "filterBar-nnTu8b",
+    filterBarSearch: "filterBarSearch-uo6LSS",
     filterSelectMenus: "filterSelectMenus-rQe_dQ",
+    filterBarSearchReset: "filterBarSearchReset-zMZpkF",
+    filterBarSearchResetContent: "filterBarSearchResetContent-h8b3qb",
+    filterExpandersContainer: "filterExpandersContainer-yRLNvU",
+    filterExpanderRow: "filterExpanderRow-_O4wQh",
+    filterExpanderHighlight: "filterExpanderHighlight-HU8LI2",
+    filterExpanderLabel: "filterExpanderLabel-z0kGvW",
+    filterExpanderIcon: "filterExpanderIcon-XmmWLH",
+    filterExpander: "filterExpander-AzrkVe",
+    filterExpanderWrapper: "filterExpanderWrapper-wfxkbS",
+    filterBooleanFieldWrapper: "filterBooleanFieldWrapper-UkqZhF",
+    filterOptions: "filterOptions-c2gDM9",
+    listBoxFilterContainer: "listBoxFilterContainer-QNIp5R",
+    filterButton: "filterButton-K5yTnY",
     downloadLink: "downloadLink-DxebfL"
 };
 export { Table_module_rslib_entry_ as default };

package/dist/presentation/Table_module.css

@@ -94,45 +94,115 @@
 
 .filterBar-nnTu8b {
   gap: var(--size-00);
-  grid-template-rows: auto auto;
-  grid-template-columns: 1fr;
-  display: grid;
+  flex-wrap: wrap;
+  align-items: center;
+  display: flex;
 }
 
-.filterBar-nnTu8b:has( > :only-child) {
-  gap: 0;
+.filterBarSearch-uo6LSS {
+  width: 100%;
+  max-width: 480px;
 }
 
-@media (min-width: 1920px) {
-  .filterBar-nnTu8b {
-    grid-template-rows: auto;
-    grid-template-columns: 1fr max-content;
+@media (max-width: 768px) {
+  .filterBarSearch-uo6LSS {
+    max-width: 100%;
   }
 }
 
 .filterSelectMenus-rQe_dQ {
   gap: var(--size-00);
-  grid-auto-columns: 1fr;
-  display: grid;
+  align-items: center;
+  display: flex;
 }
 
-.filterSelectMenus-rQe_dQ:has( > :only-child) {
-  gap: 0;
+.filterBarSearchReset-zMZpkF {
+  width: 100%;
+  margin-left: auto;
 }
 
-@media (min-width: 1024px) {
-  .filterSelectMenus-rQe_dQ {
-    grid-auto-flow: column;
-  }
+.filterBarSearchResetContent-h8b3qb {
+  gap: var(--size-00);
+  justify-content: space-between;
+  align-items: center;
+  display: flex;
 }
 
-@media (min-width: 1920px) {
-  .filterSelectMenus-rQe_dQ {
-    grid-auto-columns: max-content;
+@media (min-width: 768px) {
+  .filterBarSearchReset-zMZpkF {
+    width: auto;
   }
+
+  .filterBarSearchResetContent-h8b3qb {
+    justify-content: flex-end;
+  }
+}
+
+.filterExpandersContainer-yRLNvU {
+  flex-direction: column;
+  width: 100%;
+  display: flex;
+}
+
+.filterExpandersContainer-yRLNvU > :not(:first-child) {
+  border-top: solid var(--size-n5) var(--color-grey-t08);
+}
+
+.filterExpanderRow-_O4wQh {
+  width: 100%;
+  padding: var(--size-00);
+  align-items: center;
+  gap: var(--size-n2);
+  cursor: pointer;
+  text-align: left;
+  background: none;
+  border: none;
+  outline: none;
+  display: flex;
+}
+
+.filterExpanderHighlight-HU8LI2 .filterExpanderLabel-z0kGvW {
+  font: var(--font-regular-bold);
+}
+
+.filterExpanderLabel-z0kGvW {
+  min-width: 0;
+  font: var(--font-label);
+  flex: 1;
+}
+
+.filterExpanderIcon-XmmWLH {
+  transition: transform .15s;
+}
+
+.filterExpander-AzrkVe[open] .filterExpanderRow-_O4wQh {
+  padding-bottom: var(--size-n2);
+}
+
+.filterExpander-AzrkVe[open] .filterExpanderIcon-XmmWLH {
+  transform: rotate(90deg);
+}
+
+.filterExpanderWrapper-wfxkbS {
+  padding: 0 var(--size-00) var(--size-p1);
+  padding-inline-start: calc(var(--size-p1)  + 15px + var(--size-n2));
+}
+
+.filterBooleanFieldWrapper-UkqZhF {
+  padding: var(--size-00) var(--size-00) var(--size-p1);
+}
+
+.filterOptions-c2gDM9 {
+  gap: var(--size-n2);
+  flex-direction: column;
+  display: flex;
+}
+
+.listBoxFilterContainer-QNIp5R {
+  height: 360px;
 }
 
-.downloadLink-DxebfL {
+.filterButton-K5yTnY, .downloadLink-DxebfL {
   justify-content: flex-end;
   gap: var(--size-00);
   align-items: center;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@worknice/whiteboard",
   "description": "",
-  "version": "0.37.1",
+  "version": "0.38.0",
   "license": "MIT",
   "private": false,
   "files": [
@@ -39,7 +39,7 @@
     "react-markdown": "^10.1.0",
     "utf8": "^3.0.0",
     "zod": "^4.1.13",
-    "@worknice/utils": "^0.20.1"
+    "@worknice/utils": "^0.21.0"
   },
   "devDependencies": {
     "@anolilab/semantic-release-pnpm": "^3.2.2",
@@ -76,7 +76,7 @@
     "temporal-polyfill": "^0.2.5",
     "typescript": "^5.9.3",
     "uuid": "^11.0.5",
-    "vitest": "^2.1.0"
+    "vitest": "^3.2.4"
   },
   "peerDependencies": {
     "@react-email/components": "^0.0.7",

package/dist/presentation/Table_v2.d.ts

@@ -1,87 +0,0 @@
-import type { SortingColumnDef } from "@tanstack/react-table";
-import { type ReactNode } from "react";
-import { type ZodTypeAny } from "zod";
-import { type MenuButtonOption } from "../controls/MenuButton";
-type PrimitiveValue = boolean | string | undefined | number;
-type SingleFilterOption<Type> = {
-    id: string;
-    label: string;
-    /**
-     * If omitted true will always be returned and no filtering will be applied (e.g. "Any" option).
-     */
-    predicate?: (row: Type) => boolean;
-};
-type MultiFilterOption<Type> = {
-    id: string;
-    label: string;
-    predicate: (row: Type) => boolean;
-};
-/**
- * When using single select filters (isMulti: false), the first option is the default value.
- * Multi select filters (isMulti: true) have no default value.
- */
-type Filter<Type> = {
-    isMulti?: false;
-    label: string;
-    options: Array<SingleFilterOption<Type>>;
-} | {
-    isMulti: true;
-    label: string;
-    options: Array<MultiFilterOption<Type>>;
-    /**
-     * Use ListBox instead of checkboxes.
-     * For when the list of options is large
-     * */
-    useListBox?: boolean;
-};
-type Grouping<Type> = {
-    fn: (row: Type) => string;
-    header: (row: Type) => ReactNode;
-    label: string;
-    size: number;
-};
-type BulkAction<Type> = {
-    key: string;
-    label: string;
-    render: (props: {
-        rows: Array<Type>;
-        resetRowSelection: () => void;
-        onClose: () => void;
-    }) => ReactNode;
-    predicate?: (row: Type) => boolean;
-};
-type Props<Type> = {
-    data: Array<Type>;
-    columns: Array<{
-        cell?: (row: Type) => ReactNode;
-        filter?: Filter<Type>;
-        grouping?: Grouping<Type>;
-        hiddenByDefault?: boolean;
-        id: string;
-        csvExport?: boolean;
-        globalFiltering?: boolean;
-        size?: number;
-        enableSorting?: boolean;
-        sortUndefined?: SortingColumnDef<Type>["sortUndefined"];
-    } & ({
-        type?: "accessor";
-        value: (row: Type) => PrimitiveValue;
-        header: string;
-    } | {
-        /** @deprecated Use row actions instead. */
-        type: "display";
-        header?: string;
-    })>;
-    rowActions?: (row: Type) => Array<MenuButtonOption | null>;
-    csvFilename?: string;
-    bulkActions?: BulkAction<Type>[];
-    secondaryBulkActions?: BulkAction<Type>[];
-    estimatedRowSize?: number;
-    emptyState?: ReactNode;
-    id?: string;
-    pathName?: string;
-    localStorageSchema?: ZodTypeAny;
-    getRowId: (row: Type) => string;
-};
-declare const Table: <Type>({ data, columns, bulkActions, secondaryBulkActions, csvFilename, estimatedRowSize, emptyState, pathName, id, localStorageSchema, getRowId, rowActions, }: Props<Type>) => import("react/jsx-runtime").JSX.Element;
-export default Table;