@worknice/whiteboard 0.37.0 → 0.38.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/dist/controls/Action.stories.d.ts +2 -2
  2. package/dist/controls/Button.d.ts +1 -1
  3. package/dist/controls/Button.js +1 -0
  4. package/dist/controls/Button.module.js +1 -0
  5. package/dist/controls/Button.stories.d.ts +2 -2
  6. package/dist/controls/ButtonCard.stories.d.ts +1 -1
  7. package/dist/controls/Button_module.css +5 -0
  8. package/dist/controls/Disclosure.stories.d.ts +1 -1
  9. package/dist/controls/MenuButton.d.ts +8 -2
  10. package/dist/controls/MenuButton.js +50 -11
  11. package/dist/controls/MenuButton.module.js +8 -0
  12. package/dist/controls/MenuButton.stories.d.ts +8 -5
  13. package/dist/controls/MenuButton_module.css +47 -1
  14. package/dist/controls/Sortable.stories.d.ts +1 -1
  15. package/dist/controls/TabSet.stories.d.ts +1 -1
  16. package/dist/fields/CheckboxSetField.stories.d.ts +1 -1
  17. package/dist/fields/ColorPickerField.stories.d.ts +1 -1
  18. package/dist/fields/OrgLogoField.stories.d.ts +1 -1
  19. package/dist/fields/PaletteColorPickerField.stories.d.ts +1 -1
  20. package/dist/fields/TimezoneField.stories.d.ts +1 -1
  21. package/dist/icons/BookOpenLinesIcon.d.ts +3 -0
  22. package/dist/icons/BookOpenLinesIcon.js +11 -0
  23. package/dist/icons/BugIcon.d.ts +3 -0
  24. package/dist/icons/BugIcon.js +11 -0
  25. package/dist/icons/CommentIcon.d.ts +3 -0
  26. package/dist/icons/CommentIcon.js +11 -0
  27. package/dist/icons/LightbulbIcon.d.ts +3 -0
  28. package/dist/icons/LightbulbIcon.js +11 -0
  29. package/dist/icons/NewspaperIcon.d.ts +3 -0
  30. package/dist/icons/NewspaperIcon.js +11 -0
  31. package/dist/icons/index.d.ts +5 -0
  32. package/dist/icons/index.js +6 -1
  33. package/dist/inputs/ColorInput.stories.d.ts +1 -1
  34. package/dist/inputs/PaletteColorInput.stories.d.ts +1 -1
  35. package/dist/layouts/FullLayout.js +5 -1
  36. package/dist/presentation/HeadlineStatisticCard.d.ts +2 -1
  37. package/dist/presentation/HeadlineStatisticCard.js +6 -1
  38. package/dist/presentation/Table.d.ts +23 -8
  39. package/dist/presentation/Table.js +569 -260
  40. package/dist/presentation/Table.module.js +14 -0
  41. package/dist/presentation/Table_module.css +91 -21
  42. package/dist/utils/useNextContext.d.ts +1 -1
  43. package/package.json +4 -4
  44. package/dist/presentation/Table_v2.d.ts +0 -87
  45. package/dist/presentation/Table_v2.js +0 -831
  46. package/dist/presentation/Table_v2.module.js +0 -33
  47. package/dist/presentation/Table_v2_module.css +0 -196
@@ -17,7 +17,21 @@ const Table_module_rslib_entry_ = {
17
17
  bulkSelectionModalContent: "bulkSelectionModalContent-LMqKi5",
18
18
  bulkSelectionActions: "bulkSelectionActions-n3W1ey",
19
19
  filterBar: "filterBar-nnTu8b",
20
+ filterBarSearch: "filterBarSearch-uo6LSS",
20
21
  filterSelectMenus: "filterSelectMenus-rQe_dQ",
22
+ filterBarSearchReset: "filterBarSearchReset-zMZpkF",
23
+ filterBarSearchResetContent: "filterBarSearchResetContent-h8b3qb",
24
+ filterExpandersContainer: "filterExpandersContainer-yRLNvU",
25
+ filterExpanderRow: "filterExpanderRow-_O4wQh",
26
+ filterExpanderHighlight: "filterExpanderHighlight-HU8LI2",
27
+ filterExpanderLabel: "filterExpanderLabel-z0kGvW",
28
+ filterExpanderIcon: "filterExpanderIcon-XmmWLH",
29
+ filterExpander: "filterExpander-AzrkVe",
30
+ filterExpanderWrapper: "filterExpanderWrapper-wfxkbS",
31
+ filterBooleanFieldWrapper: "filterBooleanFieldWrapper-UkqZhF",
32
+ filterOptions: "filterOptions-c2gDM9",
33
+ listBoxFilterContainer: "listBoxFilterContainer-QNIp5R",
34
+ filterButton: "filterButton-K5yTnY",
21
35
  downloadLink: "downloadLink-DxebfL"
22
36
  };
23
37
  export { Table_module_rslib_entry_ as default };
@@ -94,45 +94,115 @@
94
94
 
95
95
  .filterBar-nnTu8b {
96
96
  gap: var(--size-00);
97
- grid-template-rows: auto auto;
98
- grid-template-columns: 1fr;
99
- display: grid;
97
+ flex-wrap: wrap;
98
+ align-items: center;
99
+ display: flex;
100
100
  }
101
101
 
102
- .filterBar-nnTu8b:has( > :only-child) {
103
- gap: 0;
102
+ .filterBarSearch-uo6LSS {
103
+ width: 100%;
104
+ max-width: 480px;
104
105
  }
105
106
 
106
- @media (min-width: 1920px) {
107
- .filterBar-nnTu8b {
108
- grid-template-rows: auto;
109
- grid-template-columns: 1fr max-content;
107
+ @media (max-width: 768px) {
108
+ .filterBarSearch-uo6LSS {
109
+ max-width: 100%;
110
110
  }
111
111
  }
112
112
 
113
113
  .filterSelectMenus-rQe_dQ {
114
114
  gap: var(--size-00);
115
- grid-auto-columns: 1fr;
116
- display: grid;
115
+ align-items: center;
116
+ display: flex;
117
117
  }
118
118
 
119
- .filterSelectMenus-rQe_dQ:has( > :only-child) {
120
- gap: 0;
119
+ .filterBarSearchReset-zMZpkF {
120
+ width: 100%;
121
+ margin-left: auto;
121
122
  }
122
123
 
123
- @media (min-width: 1024px) {
124
- .filterSelectMenus-rQe_dQ {
125
- grid-auto-flow: column;
126
- }
124
+ .filterBarSearchResetContent-h8b3qb {
125
+ gap: var(--size-00);
126
+ justify-content: space-between;
127
+ align-items: center;
128
+ display: flex;
127
129
  }
128
130
 
129
- @media (min-width: 1920px) {
130
- .filterSelectMenus-rQe_dQ {
131
- grid-auto-columns: max-content;
131
+ @media (min-width: 768px) {
132
+ .filterBarSearchReset-zMZpkF {
133
+ width: auto;
132
134
  }
135
+
136
+ .filterBarSearchResetContent-h8b3qb {
137
+ justify-content: flex-end;
138
+ }
139
+ }
140
+
141
+ .filterExpandersContainer-yRLNvU {
142
+ flex-direction: column;
143
+ width: 100%;
144
+ display: flex;
145
+ }
146
+
147
+ .filterExpandersContainer-yRLNvU > :not(:first-child) {
148
+ border-top: solid var(--size-n5) var(--color-grey-t08);
149
+ }
150
+
151
+ .filterExpanderRow-_O4wQh {
152
+ width: 100%;
153
+ padding: var(--size-00);
154
+ align-items: center;
155
+ gap: var(--size-n2);
156
+ cursor: pointer;
157
+ text-align: left;
158
+ background: none;
159
+ border: none;
160
+ outline: none;
161
+ display: flex;
162
+ }
163
+
164
+ .filterExpanderHighlight-HU8LI2 .filterExpanderLabel-z0kGvW {
165
+ font: var(--font-regular-bold);
166
+ }
167
+
168
+ .filterExpanderLabel-z0kGvW {
169
+ min-width: 0;
170
+ font: var(--font-label);
171
+ flex: 1;
172
+ }
173
+
174
+ .filterExpanderIcon-XmmWLH {
175
+ transition: transform .15s;
176
+ }
177
+
178
+ .filterExpander-AzrkVe[open] .filterExpanderRow-_O4wQh {
179
+ padding-bottom: var(--size-n2);
180
+ }
181
+
182
+ .filterExpander-AzrkVe[open] .filterExpanderIcon-XmmWLH {
183
+ transform: rotate(90deg);
184
+ }
185
+
186
+ .filterExpanderWrapper-wfxkbS {
187
+ padding: 0 var(--size-00) var(--size-p1);
188
+ padding-inline-start: calc(var(--size-p1) + 15px + var(--size-n2));
189
+ }
190
+
191
+ .filterBooleanFieldWrapper-UkqZhF {
192
+ padding: var(--size-00) var(--size-00) var(--size-p1);
193
+ }
194
+
195
+ .filterOptions-c2gDM9 {
196
+ gap: var(--size-n2);
197
+ flex-direction: column;
198
+ display: flex;
199
+ }
200
+
201
+ .listBoxFilterContainer-QNIp5R {
202
+ height: 360px;
133
203
  }
134
204
 
135
- .downloadLink-DxebfL {
205
+ .filterButton-K5yTnY, .downloadLink-DxebfL {
136
206
  justify-content: flex-end;
137
207
  gap: var(--size-00);
138
208
  align-items: center;
@@ -1,7 +1,7 @@
1
1
  declare const useNextContext: () => {
2
2
  Image: typeof import("next/image").default;
3
3
  Link: import("react").ForwardRefExoticComponent<Omit<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, keyof import("next/link").LinkProps<any>> & import("next/link").LinkProps<any> & {
4
- children?: import("react").ReactNode | undefined;
4
+ children?: React.ReactNode | undefined;
5
5
  } & import("react").RefAttributes<HTMLAnchorElement>>;
6
6
  pathname: string | null;
7
7
  router: import("next/router").NextRouter | null;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@worknice/whiteboard",
3
3
  "description": "",
4
- "version": "0.37.0",
4
+ "version": "0.38.0",
5
5
  "license": "MIT",
6
6
  "private": false,
7
7
  "files": [
@@ -39,7 +39,7 @@
39
39
  "react-markdown": "^10.1.0",
40
40
  "utf8": "^3.0.0",
41
41
  "zod": "^4.1.13",
42
- "@worknice/utils": "^0.20.0"
42
+ "@worknice/utils": "^0.21.0"
43
43
  },
44
44
  "devDependencies": {
45
45
  "@anolilab/semantic-release-pnpm": "^3.2.2",
@@ -74,9 +74,9 @@
74
74
  "semantic-release": "^24.2.2",
75
75
  "storybook": "^10.1.2",
76
76
  "temporal-polyfill": "^0.2.5",
77
- "typescript": "~5.5.0",
77
+ "typescript": "^5.9.3",
78
78
  "uuid": "^11.0.5",
79
- "vitest": "^2.1.0"
79
+ "vitest": "^3.2.4"
80
80
  },
81
81
  "peerDependencies": {
82
82
  "@react-email/components": "^0.0.7",
@@ -1,87 +0,0 @@
1
- import type { SortingColumnDef } from "@tanstack/react-table";
2
- import { type ReactNode } from "react";
3
- import { type ZodTypeAny } from "zod";
4
- import { type MenuButtonOption } from "../controls/MenuButton";
5
- type PrimitiveValue = boolean | string | undefined | number;
6
- type SingleFilterOption<Type> = {
7
- id: string;
8
- label: string;
9
- /**
10
- * If omitted true will always be returned and no filtering will be applied (e.g. "Any" option).
11
- */
12
- predicate?: (row: Type) => boolean;
13
- };
14
- type MultiFilterOption<Type> = {
15
- id: string;
16
- label: string;
17
- predicate: (row: Type) => boolean;
18
- };
19
- /**
20
- * When using single select filters (isMulti: false), the first option is the default value.
21
- * Multi select filters (isMulti: true) have no default value.
22
- */
23
- type Filter<Type> = {
24
- isMulti?: false;
25
- label: string;
26
- options: Array<SingleFilterOption<Type>>;
27
- } | {
28
- isMulti: true;
29
- label: string;
30
- options: Array<MultiFilterOption<Type>>;
31
- /**
32
- * Use ListBox instead of checkboxes.
33
- * For when the list of options is large
34
- * */
35
- useListBox?: boolean;
36
- };
37
- type Grouping<Type> = {
38
- fn: (row: Type) => string;
39
- header: (row: Type) => ReactNode;
40
- label: string;
41
- size: number;
42
- };
43
- type BulkAction<Type> = {
44
- key: string;
45
- label: string;
46
- render: (props: {
47
- rows: Array<Type>;
48
- resetRowSelection: () => void;
49
- onClose: () => void;
50
- }) => ReactNode;
51
- predicate?: (row: Type) => boolean;
52
- };
53
- type Props<Type> = {
54
- data: Array<Type>;
55
- columns: Array<{
56
- cell?: (row: Type) => ReactNode;
57
- filter?: Filter<Type>;
58
- grouping?: Grouping<Type>;
59
- hiddenByDefault?: boolean;
60
- id: string;
61
- csvExport?: boolean;
62
- globalFiltering?: boolean;
63
- size?: number;
64
- enableSorting?: boolean;
65
- sortUndefined?: SortingColumnDef<Type>["sortUndefined"];
66
- } & ({
67
- type?: "accessor";
68
- value: (row: Type) => PrimitiveValue;
69
- header: string;
70
- } | {
71
- /** @deprecated Use row actions instead. */
72
- type: "display";
73
- header?: string;
74
- })>;
75
- rowActions?: (row: Type) => Array<MenuButtonOption | null>;
76
- csvFilename?: string;
77
- bulkActions?: BulkAction<Type>[];
78
- secondaryBulkActions?: BulkAction<Type>[];
79
- estimatedRowSize?: number;
80
- emptyState?: ReactNode;
81
- id?: string;
82
- pathName?: string;
83
- localStorageSchema?: ZodTypeAny;
84
- getRowId: (row: Type) => string;
85
- };
86
- declare const Table: <Type>({ data, columns, bulkActions, secondaryBulkActions, csvFilename, estimatedRowSize, emptyState, pathName, id, localStorageSchema, getRowId, rowActions, }: Props<Type>) => import("react/jsx-runtime").JSX.Element;
87
- export default Table;