jcicl 0.0.343 → 0.0.345

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 (4) hide show
  1. package/README.md +106 -106
  2. package/Table/Table.d.ts +2 -2
  3. package/Table/Table.js +374 -387
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -1,106 +1,106 @@
1
- # Welcome to the Johnson County Component Library!
2
-
3
- ## Quick Start
4
-
5
- ### Runtime Enviromnent
6
-
7
- 1. Please download and install [NVM for Windows](https://github.com/coreybutler/nvm-windows?tab=readme-ov-file)
8
- 2. `nvm install 22.11.0`
9
- 3. `nvm use 22`
10
-
11
- ### Usage
12
-
13
- `npm install jcicl@latest`
14
-
15
- ```js
16
- import Button, { ButtonProps } from 'jcicl/Button';
17
- import Nav, { NavProps } from 'jcicl/Nav';
18
-
19
- const Component: React.FC<ButtonProps> = ({ ...buttonProps }) => <Button {...buttonProps}>Johnson County Button</Button>;
20
- ```
21
-
22
- ### Adding the fonts and scrollbar styles
23
-
24
- In your project entry point (most likely `main.tsx`), add:
25
-
26
- ```js
27
- import '@fontsource/roboto/300.css';
28
- import '@fontsource/roboto/400.css';
29
- import '@fontsource/roboto/500.css';
30
- import '@fontsource/roboto/700.css';
31
- import '@fontsource/material-icons';
32
- import 'overlayscrollbars/overlayscrollbars.css';
33
- ```
34
-
35
- Alternatively, add to project root `index.html` `<head />`:
36
-
37
- ```html
38
- <link rel="preconnect" href="https://fonts.googleapis.com" />
39
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
40
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />
41
- ```
42
-
43
- #### Viewing Storybook Documentation
44
-
45
- We are using [Storybook](https://storybook.js.org/docs/get-started/frameworks/react-vite?renderer=react) to document our component library
46
-
47
- Please use `npm run storybook` or `npm start` from the root directory to start the storybook application. You can see helpful documentation links under the `Configure your project` section of the Storybook application.
48
-
49
- ## Development
50
-
51
- ### Getting started
52
-
53
- [Please ensure your react development environment is set up](https://devops.jc.net/JCIT/Business%20Solutions%20Delivery/_wiki/wikis/Business-Solutions-Delivery.wiki?wikiVersion=GBwikiMaster&pagePath=%2FSetting%20Up%20React&pageId=219).
54
-
55
- From the root project directory, please run `npm install`
56
-
57
- ### Dependencies
58
-
59
- For this component library, we are extending [Material UI](https://mui.com/material-ui/getting-started/) and customizing with [Emotion/Styled](https://emotion.sh/docs/styled)
60
-
61
- ### Components Directory Structure
62
-
63
- In each components folder, you should see a `[Component].stories.tsx` file. You can copy the established pattern to create stories for new components, or customize as you please according to the above documentation
64
-
65
- #### Base
66
-
67
- Base components are intended to be the foundational building blocks of our web pages here at Johnson County
68
-
69
- #### Composite
70
-
71
- Composite components are intended to be reusable chunks of HTML built from base components and complimentary TSX (TypeScript XML)
72
-
73
- #### Superomposite
74
-
75
- Composite with a higher level of complexity
76
-
77
- #### Templates
78
-
79
- Templates are intended to render the HTML for predefined page layouts comprised of composite components, base components, and complimentary TSX
80
-
81
- #### **All of the above component types are inteded to be importable and reusable throughout the suite of Johnson County web applications** 😊
82
-
83
- ### Process
84
-
85
- 1. Add or update any components you wish. For new components, please create the associated `[NewComponent].stories.tsx` file to allow for documentation. In `.storybook/main.ts`, we are using the default string matching pattern to automatically index `*.stories.*` files 😊
86
- 2. Export any newly created components in the relevant index files: `(base/(super)composite/templates)/[NewComponent]/index.ts` and `components/index.ts`.
87
- 3. Export any newly created types for the component from `(base/(super)composite/templates)/[NewComponent]/index.ts`
88
- 4. Publish the library and update relevant project dependencies
89
-
90
- ### Publishing the library
91
-
92
- The library will automatically publish a new minor version on merges to master. If you need to manually publish a new version:
93
-
94
- `npm run bp`
95
-
96
- - Creates a new minor version (`0.0.x`), builds, and publishes the library to the npm registry
97
-
98
- `npm run bpMinor` for minor versions (`0.x.0`), and `npm run bpMajor` for major versions (`x.0.0`)
99
-
100
- For more details on scripting commands, please see the [npm CLI documentation](https://docs.npmjs.com/cli/v9/commands)
101
-
102
- ### Deploying storybook
103
-
104
- TODO: Automate
105
-
106
- Build the library with `npm run storybook`, then copy all of the files in `storybook-static` into `windu\E:\ComponentLibrary`
1
+ # Welcome to the Johnson County Component Library!
2
+
3
+ ## Quick Start
4
+
5
+ ### Runtime Enviromnent
6
+
7
+ 1. Please download and install [NVM for Windows](https://github.com/coreybutler/nvm-windows?tab=readme-ov-file)
8
+ 2. `nvm install 22.11.0`
9
+ 3. `nvm use 22`
10
+
11
+ ### Usage
12
+
13
+ `npm install jcicl@latest`
14
+
15
+ ```js
16
+ import Button, { ButtonProps } from 'jcicl/Button';
17
+ import Nav, { NavProps } from 'jcicl/Nav';
18
+
19
+ const Component: React.FC<ButtonProps> = ({ ...buttonProps }) => <Button {...buttonProps}>Johnson County Button</Button>;
20
+ ```
21
+
22
+ ### Adding the fonts and scrollbar styles
23
+
24
+ In your project entry point (most likely `main.tsx`), add:
25
+
26
+ ```js
27
+ import '@fontsource/roboto/300.css';
28
+ import '@fontsource/roboto/400.css';
29
+ import '@fontsource/roboto/500.css';
30
+ import '@fontsource/roboto/700.css';
31
+ import '@fontsource/material-icons';
32
+ import 'overlayscrollbars/overlayscrollbars.css';
33
+ ```
34
+
35
+ Alternatively, add to project root `index.html` `<head />`:
36
+
37
+ ```html
38
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
39
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
40
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />
41
+ ```
42
+
43
+ #### Viewing Storybook Documentation
44
+
45
+ We are using [Storybook](https://storybook.js.org/docs/get-started/frameworks/react-vite?renderer=react) to document our component library
46
+
47
+ Please use `npm run storybook` or `npm start` from the root directory to start the storybook application. You can see helpful documentation links under the `Configure your project` section of the Storybook application.
48
+
49
+ ## Development
50
+
51
+ ### Getting started
52
+
53
+ [Please ensure your react development environment is set up](https://devops.jc.net/JCIT/Business%20Solutions%20Delivery/_wiki/wikis/Business-Solutions-Delivery.wiki?wikiVersion=GBwikiMaster&pagePath=%2FSetting%20Up%20React&pageId=219).
54
+
55
+ From the root project directory, please run `npm install`
56
+
57
+ ### Dependencies
58
+
59
+ For this component library, we are extending [Material UI](https://mui.com/material-ui/getting-started/) and customizing with [Emotion/Styled](https://emotion.sh/docs/styled)
60
+
61
+ ### Components Directory Structure
62
+
63
+ In each components folder, you should see a `[Component].stories.tsx` file. You can copy the established pattern to create stories for new components, or customize as you please according to the above documentation
64
+
65
+ #### Base
66
+
67
+ Base components are intended to be the foundational building blocks of our web pages here at Johnson County
68
+
69
+ #### Composite
70
+
71
+ Composite components are intended to be reusable chunks of HTML built from base components and complimentary TSX (TypeScript XML)
72
+
73
+ #### Superomposite
74
+
75
+ Composite with a higher level of complexity
76
+
77
+ #### Templates
78
+
79
+ Templates are intended to render the HTML for predefined page layouts comprised of composite components, base components, and complimentary TSX
80
+
81
+ #### **All of the above component types are inteded to be importable and reusable throughout the suite of Johnson County web applications** 😊
82
+
83
+ ### Process
84
+
85
+ 1. Add or update any components you wish. For new components, please create the associated `[NewComponent].stories.tsx` file to allow for documentation. In `.storybook/main.ts`, we are using the default string matching pattern to automatically index `*.stories.*` files 😊
86
+ 2. Export any newly created components in the relevant index files: `(base/(super)composite/templates)/[NewComponent]/index.ts` and `components/index.ts`.
87
+ 3. Export any newly created types for the component from `(base/(super)composite/templates)/[NewComponent]/index.ts`
88
+ 4. Publish the library and update relevant project dependencies
89
+
90
+ ### Publishing the library
91
+
92
+ The library will automatically publish a new minor version on merges to master. If you need to manually publish a new version:
93
+
94
+ `npm run bp`
95
+
96
+ - Creates a new minor version (`0.0.x`), builds, and publishes the library to the npm registry
97
+
98
+ `npm run bpMinor` for minor versions (`0.x.0`), and `npm run bpMajor` for major versions (`x.0.0`)
99
+
100
+ For more details on scripting commands, please see the [npm CLI documentation](https://docs.npmjs.com/cli/v9/commands)
101
+
102
+ ### Deploying storybook
103
+
104
+ TODO: Automate
105
+
106
+ Build the library with `npm run storybook`, then copy all of the files in `storybook-static` into `windu\E:\ComponentLibrary`
package/Table/Table.d.ts CHANGED
@@ -12,5 +12,5 @@ export interface TableProps {
12
12
  };
13
13
  extraActions?: React.ReactNode;
14
14
  }
15
- declare const Table: React.FC<TableProps>;
16
- export default Table;
15
+ declare const DataTable: React.FC<TableProps>;
16
+ export default DataTable;
package/Table/Table.js CHANGED
@@ -1,32 +1,32 @@
1
1
  import { jsxs as c, jsx as t } from "react/jsx-runtime";
2
- import ve, { useState as x, useMemo as N } from "react";
2
+ import { useState as b, useMemo as N, useEffect as R } from "react";
3
3
  import o from "../theme.js";
4
4
  import { c as r } from "../.chunks/emotion-react.browser.esm.js";
5
5
  import { n as s } from "../.chunks/emotion-styled.browser.esm.js";
6
- import { Button as Ce } from "../Button/Button.js";
7
- import { Flex as Se } from "../Flex/Flex.js";
8
- import { c as C } from "../.chunks/createLucideIcon.js";
6
+ import { Button as ce } from "../Button/Button.js";
7
+ import { Flex as ae } from "../Flex/Flex.js";
8
+ import { c as v } from "../.chunks/createLucideIcon.js";
9
9
  /**
10
10
  * @license lucide-react v0.525.0 - ISC
11
11
  *
12
12
  * This source code is licensed under the ISC license.
13
13
  * See the LICENSE file in the root directory of this source tree.
14
14
  */
15
- const $e = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]], E = C("chevron-down", $e);
15
+ const le = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]], M = v("chevron-down", le);
16
16
  /**
17
17
  * @license lucide-react v0.525.0 - ISC
18
18
  *
19
19
  * This source code is licensed under the ISC license.
20
20
  * See the LICENSE file in the root directory of this source tree.
21
21
  */
22
- const ze = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]], q = C("chevron-up", ze);
22
+ const de = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]], U = v("chevron-up", de);
23
23
  /**
24
24
  * @license lucide-react v0.525.0 - ISC
25
25
  *
26
26
  * This source code is licensed under the ISC license.
27
27
  * See the LICENSE file in the root directory of this source tree.
28
28
  */
29
- const je = [
29
+ const pe = [
30
30
  [
31
31
  "path",
32
32
  {
@@ -43,14 +43,14 @@ const je = [
43
43
  }
44
44
  ],
45
45
  ["path", { d: "m2 2 20 20", key: "1ooewy" }]
46
- ], Te = C("eye-off", je);
46
+ ], he = v("eye-off", pe);
47
47
  /**
48
48
  * @license lucide-react v0.525.0 - ISC
49
49
  *
50
50
  * This source code is licensed under the ISC license.
51
51
  * See the LICENSE file in the root directory of this source tree.
52
52
  */
53
- const Ne = [
53
+ const ge = [
54
54
  [
55
55
  "path",
56
56
  {
@@ -59,24 +59,24 @@ const Ne = [
59
59
  }
60
60
  ],
61
61
  ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
62
- ], Ae = C("eye", Ne);
62
+ ], xe = v("eye", ge);
63
63
  /**
64
64
  * @license lucide-react v0.525.0 - ISC
65
65
  *
66
66
  * This source code is licensed under the ISC license.
67
67
  * See the LICENSE file in the root directory of this source tree.
68
68
  */
69
- const De = [
69
+ const ue = [
70
70
  ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
71
71
  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
72
- ], W = C("search", De);
72
+ ], K = v("search", ue);
73
73
  /**
74
74
  * @license lucide-react v0.525.0 - ISC
75
75
  *
76
76
  * This source code is licensed under the ISC license.
77
77
  * See the LICENSE file in the root directory of this source tree.
78
78
  */
79
- const Be = [
79
+ const be = [
80
80
  [
81
81
  "path",
82
82
  {
@@ -85,376 +85,363 @@ const Be = [
85
85
  }
86
86
  ],
87
87
  ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
88
- ], _e = C("settings", Be);
89
- let v = "";
90
- const He = ({
91
- data: f = [],
92
- columnTitles: z = {},
93
- rowsPerPage: b = 19,
94
- title: K = "Data Table",
88
+ ], fe = v("settings", be), f = {
89
+ thActive: {
90
+ backgroundColor: o.colors.green,
91
+ color: o.colors.white
92
+ },
93
+ paginationButtonActive: {
94
+ backgroundColor: o.colors.green,
95
+ color: o.colors.white,
96
+ borderColor: o.colors.green
97
+ },
98
+ paginationButtonDisabled: {
99
+ opacity: 0.5,
100
+ cursor: "not-allowed"
101
+ },
102
+ info: {
103
+ fontSize: "14px",
104
+ color: o.colors.gray3,
105
+ textAlign: "center",
106
+ marginTop: "10px"
107
+ }
108
+ }, me = s("div")(() => ({
109
+ ...r`
110
+ background-color: ${o.colors.white};
111
+ border-radius: 8px;
112
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
113
+ padding: 20px;
114
+ font-family: Arial, sans-serif;
115
+ width: 100%;
116
+ overflow: auto;
117
+ `
118
+ })), ye = s("div")(() => ({
119
+ ...r`
120
+ display: flex;
121
+ flex-direction: column;
122
+ justify-content: space-between;
123
+ align-items: center;
124
+ margin-bottom: 20px;
125
+ flex-wrap: wrap;
126
+ gap: 9px;
127
+ `
128
+ })), we = s("div")(() => ({
129
+ ...r`
130
+ display: flex;
131
+ justify-content: space-between;
132
+ width: 100%;
133
+ align-items: center;
134
+ `
135
+ })), ke = s("h2")(() => ({
136
+ ...r`
137
+ font-size: 24px;
138
+ font-weight: bold;
139
+ color: ${o.colors.black};
140
+ margin: 0;
141
+ `
142
+ })), ve = s("div")(() => ({
143
+ ...r`
144
+ display: flex;
145
+ justify-content: flex-end;
146
+ width: 100%;
147
+ gap: 15px;
148
+ align-items: center;
149
+ flex-wrap: wrap;
150
+ `
151
+ })), Ce = s("div")(() => ({
152
+ ...r`
153
+ position: relative;
154
+ display: flex;
155
+ align-items: center;
156
+ flex-grow: 1;
157
+ `
158
+ })), Se = s(K)(() => ({
159
+ ...r`
160
+ position: absolute;
161
+ left: 13px;
162
+ top: 10px;
163
+ color: ${o.colors.gray3};
164
+ width: 19px;
165
+ height: 19px;
166
+ transition: all 313ms ease;
167
+ `
168
+ })), $e = s("input")(() => ({
169
+ ...r`
170
+ padding: 10px 15px 10px 40px;
171
+ border: 2px solid ${o.colors.gray4};
172
+ border-radius: 25px;
173
+ font-size: 14px;
174
+ min-width: 270px;
175
+ width: 100%;
176
+ transition: all 313ms ease;
177
+ outline: none;
178
+ background-color: ${o.colors.white};
179
+ :focus,
180
+ :hover,
181
+ :focus-within {
182
+ border-color: ${o.colors.green};
183
+ box-shadow: 0 0 0 3px rgba(0, 146, 0, 0.1);
184
+ }
185
+ `
186
+ })), q = s("button")(() => ({
187
+ ...r`
188
+ padding: 10px 15px;
189
+ border: 2px solid ${o.colors.green};
190
+ border-radius: 6px;
191
+ background-color: ${o.colors.white};
192
+ color: ${o.colors.green};
193
+ cursor: pointer;
194
+ display: flex;
195
+ align-items: center;
196
+ gap: 8px;
197
+ font-size: 14px;
198
+ font-weight: 500;
199
+ transition: all 0.3s ease;
200
+ outline: none;
201
+ :focus,
202
+ :hover,
203
+ :focus-within {
204
+ background-color: ${o.colors.green};
205
+ color: ${o.colors.white};
206
+ transform: translateY(-1px);
207
+ box-shadow: 0 4px 12px rgba(0, 146, 0, 0.3);
208
+ }
209
+ `
210
+ })), W = s("div")(() => ({
211
+ ...r`
212
+ position: absolute;
213
+ top: 100%;
214
+ right: 0;
215
+ margin-top: 5px;
216
+ background-color: ${o.colors.white};
217
+ border: 1px solid ${o.colors.gray4};
218
+ border-radius: 6px;
219
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
220
+ z-index: 1000;
221
+ min-width: 200px;
222
+ max-height: 300px;
223
+ overflow-y: auto;
224
+ `
225
+ })), _ = s("div")(() => ({
226
+ ...r`
227
+ padding: 12px 16px;
228
+ display: flex;
229
+ align-items: center;
230
+ gap: 10px;
231
+ cursor: pointer;
232
+ font-size: 14px;
233
+ color: ${o.colors.slate};
234
+ transition: all 0.2s ease;
235
+ :focus,
236
+ :hover,
237
+ :focus-within {
238
+ background-color: ${o.colors.whiteGreenB};
239
+ color: ${o.colors.darkGreen};
240
+ }
241
+ `
242
+ })), E = s("input")(() => ({
243
+ ...r`
244
+ width: 16px;
245
+ height: 16px;
246
+ accent-color: ${o.colors.green};
247
+ `
248
+ })), ze = s("table")(() => ({
249
+ ...r`
250
+ width: 100%;
251
+ border-collapse: collapse;
252
+ background-color: ${o.colors.white};
253
+ border-radius: 8px;
254
+ overflow: hidden;
255
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
256
+ `
257
+ })), je = s("th")(() => ({
258
+ ...r`
259
+ background-color: ${o.colors.whiteBlue};
260
+ color: ${o.colors.slate};
261
+ padding: 16px 12px;
262
+ text-align: left;
263
+ font-size: 14px;
264
+ font-weight: 600;
265
+ border-bottom: 2px solid ${o.colors.gray4};
266
+ cursor: pointer;
267
+ user-select: none;
268
+ transition: all 0.2s ease;
269
+ position: relative;
270
+ white-space: nowrap;
271
+ :focus,
272
+ :hover,
273
+ :focus-within {
274
+ background-color: ${o.colors.whiteGreenC};
275
+ color: ${o.colors.darkGreen};
276
+ }
277
+ `
278
+ })), Te = s("td")(() => ({
279
+ ...r`
280
+ padding: 14px 12px;
281
+ border-bottom: 1px solid ${o.colors.almostWhite};
282
+ font-size: 14px;
283
+ color: ${o.colors.slate};
284
+ transition: all 0.2s ease;
285
+ `
286
+ })), Ne = s("span")(() => ({
287
+ ...r`
288
+ margin-left: 8px;
289
+ opacity: 0.6;
290
+ `
291
+ })), Y = s("tr")(({ interactableRow: x }) => ({
292
+ ...r`
293
+ transition: all 0.2s ease;
294
+ ${x && r`
295
+ :focus,
296
+ :hover,
297
+ :focus-within {
298
+ background-color: ${o.colors.whiteGreenD};
299
+ cursor: pointer;
300
+ }
301
+ `}
302
+ `
303
+ })), Ae = s("div")(() => ({
304
+ ...r`
305
+ display: flex;
306
+ justify-content: center;
307
+ align-items: center;
308
+ margin-top: 20px;
309
+ gap: 10px;
310
+ `
311
+ })), k = s("button")(() => ({
312
+ ...r`
313
+ padding: 8px 12px;
314
+ border: 1px solid ${o.colors.gray4};
315
+ border-radius: 4px;
316
+ background-color: ${o.colors.white};
317
+ color: ${o.colors.slate};
318
+ cursor: pointer;
319
+ font-size: 14px;
320
+ transition: all 0.2s ease;
321
+ outline: none;
322
+ :focus,
323
+ :hover,
324
+ :focus-within {
325
+ background-color: ${o.colors.green};
326
+ color: ${o.colors.white};
327
+ border-color: ${o.colors.green};
328
+ }
329
+ :disabled {
330
+ opacity: 0.5;
331
+ cursor: not-allowed;
332
+ }
333
+ `
334
+ })), De = s("div")(() => ({
335
+ ...r`
336
+ font-size: 14px;
337
+ color: ${o.colors.gray3};
338
+ text-align: center;
339
+ margin-top: 10px;
340
+ `
341
+ })), J = s("span")(() => ({
342
+ ...r`
343
+ padding: 8px 4px;
344
+ color: ${o.colors.gray3};
345
+ font-size: 14px;
346
+ `
347
+ })), Ge = ({
348
+ data: x = [],
349
+ columnTitles: $ = {},
350
+ rowsPerPage: m = 19,
351
+ title: Q = "Data Table",
95
352
  onRowClick: A,
96
- hiddenColumns: Y = [],
97
- defaultSort: J = { key: "", direction: "asc" },
98
- extraActions: F
353
+ hiddenColumns: X = [],
354
+ defaultSort: F = { key: "", direction: "asc" },
355
+ extraActions: I
99
356
  }) => {
100
- const [i, y] = x(1), [, Q] = x(""), [p, X] = x(J), [m, j] = x(/* @__PURE__ */ new Set()), [D, I] = x(/* @__PURE__ */ new Set()), [V, Z] = x(!1), [L, P] = x(!1), a = N(() => f.length === 0 ? [] : Object.keys(f[0]).filter((e) => !Y.includes(e)), [f]);
101
- ve.useEffect(() => {
102
- a.length > 0 && (I(new Set(a)), j(new Set(a)));
103
- }, [a]);
357
+ const [i, u] = b(1), [z, L] = b(""), [p, V] = b(F), [y, j] = b(/* @__PURE__ */ new Set()), [D, G] = b(/* @__PURE__ */ new Set()), [H, Z] = b(!1), [O, P] = b(!1), l = N(() => x.length === 0 ? [] : Object.keys(x[0]).filter((e) => !X.includes(e)), [x]);
358
+ R(() => {
359
+ l.length > 0 && (G(new Set(l)), j(new Set(l)));
360
+ }, [l]), R(() => {
361
+ L(""), V(F), u(1);
362
+ }, []);
104
363
  const B = N(() => {
105
- if (!v) return f;
106
- const e = m.size > 0 ? m : new Set(a);
107
- return f.filter((n) => Array.from(e).some((l) => {
108
- const h = n[l];
109
- return h && h.toString().toLowerCase().includes(v.toLowerCase());
364
+ if (!z) return x;
365
+ const e = y.size > 0 ? y : new Set(l);
366
+ return x.filter((n) => Array.from(e).some((a) => {
367
+ const h = n[a];
368
+ return h && h.toString().toLowerCase().includes(z.toLowerCase());
110
369
  }));
111
- }, [f, v, m, a]), g = N(() => p.key ? [...B].sort((e, n) => e[p.key] < n[p.key] ? p.direction === "asc" ? -1 : 1 : e[p.key] > n[p.key] ? p.direction === "asc" ? 1 : -1 : 0) : B, [B, p]), T = a.filter((e) => D.has(e)), ee = () => {
370
+ }, [x, z, y, l]), g = N(() => p.key ? [...B].sort((e, n) => e[p.key] < n[p.key] ? p.direction === "asc" ? -1 : 1 : e[p.key] > n[p.key] ? p.direction === "asc" ? 1 : -1 : 0) : B, [B, p]), T = l.filter((e) => D.has(e)), ee = () => {
112
371
  if (!Array.isArray(g) || g.length === 0) return;
113
- const e = T.map((k) => z[k] || k), n = (k) => {
114
- const $ = String(k ?? "");
115
- return /[",\n]/.test($) ? `"${$.replace(/"/g, '""')}"` : $;
372
+ const e = T.map((w) => $[w] || w), n = (w) => {
373
+ const S = String(w ?? "");
374
+ return /[",\n]/.test(S) ? `"${S.replace(/"/g, '""')}"` : S;
116
375
  }, h = [
117
376
  e.join(","),
118
377
  // header row
119
- ...g.map((k) => T.map(($) => n(k[$])).join(","))
378
+ ...g.map((w) => T.map((S) => n(w[S])).join(","))
120
379
  ].join(`
121
- `), ke = new Blob([h], { type: "text/csv;charset=utf-8;" }), S = document.createElement("a");
122
- S.href = URL.createObjectURL(ke), S.download = "data.csv", document.body.appendChild(S), S.click(), document.body.removeChild(S);
380
+ `), ie = new Blob([h], { type: "text/csv;charset=utf-8;" }), C = document.createElement("a");
381
+ C.href = URL.createObjectURL(ie), C.download = "data.csv", document.body.appendChild(C), C.click(), document.body.removeChild(C);
123
382
  }, oe = N(() => {
124
- const e = (i - 1) * b;
125
- return g.slice(e, e + b);
126
- }, [g, i, b]), d = Math.ceil(g.length / b), te = (e) => {
127
- X((n) => ({
383
+ const e = (i - 1) * m;
384
+ return g.slice(e, e + m);
385
+ }, [g, i, m]), d = Math.ceil(g.length / m), te = (e) => {
386
+ V((n) => ({
128
387
  key: e,
129
388
  direction: n.key === e && n.direction === "asc" ? "desc" : "asc"
130
389
  }));
131
390
  }, ne = (e) => {
132
391
  j((n) => {
133
- const l = new Set(n);
134
- return l.has(e) ? l.delete(e) : l.add(e), l;
392
+ const a = new Set(n);
393
+ return a.has(e) ? a.delete(e) : a.add(e), a;
135
394
  });
136
395
  }, re = () => {
137
- m.size === a.length ? j(/* @__PURE__ */ new Set()) : j(new Set(a));
396
+ y.size === l.length ? j(/* @__PURE__ */ new Set()) : j(new Set(l));
138
397
  }, se = (e) => {
139
- I((n) => {
140
- const l = new Set(n);
141
- return l.has(e) ? l.delete(e) : l.add(e), l;
398
+ G((n) => {
399
+ const a = new Set(n);
400
+ return a.has(e) ? a.delete(e) : a.add(e), a;
142
401
  });
143
- }, ie = (e) => {
144
- v = e;
145
- }, G = () => {
146
- Q(v);
147
- }, u = {
148
- thActive: {
149
- backgroundColor: o.colors.green,
150
- color: o.colors.white
151
- },
152
- paginationButtonActive: {
153
- backgroundColor: o.colors.green,
154
- color: o.colors.white,
155
- borderColor: o.colors.green
156
- },
157
- paginationButtonDisabled: {
158
- opacity: 0.5,
159
- cursor: "not-allowed"
160
- },
161
- info: {
162
- fontSize: "14px",
163
- color: o.colors.gray3,
164
- textAlign: "center",
165
- marginTop: "10px"
166
- }
167
- }, ce = s("div")(() => ({
168
- ...r`
169
- background-color: ${o.colors.white};
170
- border-radius: 8px;
171
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
172
- padding: 20px;
173
- font-family: Arial, sans-serif;
174
- width: 100%;
175
- overflow: auto;
176
- `
177
- })), le = s("div")(() => ({
178
- ...r`
179
- display: flex;
180
- flex-direction: column;
181
- justify-content: space-between;
182
- align-items: center;
183
- margin-bottom: 20px;
184
- flex-wrap: wrap;
185
- gap: 9px;
186
- `
187
- })), ae = s("div")(() => ({
188
- ...r`
189
- display: flex;
190
- justify-content: space-between;
191
- width: 100%;
192
- align-items: center;
193
- `
194
- })), de = s("h2")(() => ({
195
- ...r`
196
- font-size: 24px;
197
- font-weight: bold;
198
- color: ${o.colors.black};
199
- margin: 0;
200
- `
201
- })), pe = s("div")(() => ({
202
- ...r`
203
- display: flex;
204
- justify-content: flex-end;
205
- width: 100%;
206
- gap: 15px;
207
- align-items: center;
208
- flex-wrap: wrap;
209
- `
210
- })), he = s("div")(() => ({
211
- ...r`
212
- position: relative;
213
- display: flex;
214
- align-items: center;
215
- flex-grow: 1;
216
- `
217
- })), ge = s(W)(() => ({
218
- ...r`
219
- position: absolute;
220
- left: 13px;
221
- top: 10px;
222
- color: ${o.colors.gray3};
223
- width: 19px;
224
- height: 19px;
225
- transition: all 313ms ease;
226
- :focus,
227
- :hover,
228
- :focus-within {
229
- cursor: pointer;
230
- color: ${o.colors.green};
231
- }
232
- `
233
- })), ue = s("input")(() => ({
234
- ...r`
235
- padding: 10px 15px 10px 40px;
236
- border: 2px solid ${o.colors.gray4};
237
- border-radius: 25px;
238
- font-size: 14px;
239
- min-width: 270px;
240
- width: 100%;
241
- transition: all 313ms ease;
242
- outline: none;
243
- background-color: ${o.colors.white};
244
- :focus,
245
- :hover,
246
- :focus-within {
247
- border-color: ${o.colors.green};
248
- box-shadow: 0 0 0 3px rgba(0, 146, 0, 0.1);
249
- }
250
- `
251
- })), R = s("button")(() => ({
252
- ...r`
253
- padding: 10px 15px;
254
- border: 2px solid ${o.colors.green};
255
- border-radius: 6px;
256
- background-color: ${o.colors.white};
257
- color: ${o.colors.green};
258
- cursor: pointer;
259
- display: flex;
260
- align-items: center;
261
- gap: 8px;
262
- font-size: 14px;
263
- font-weight: 500;
264
- transition: all 0.3s ease;
265
- outline: none;
266
- :focus,
267
- :hover,
268
- :focus-within {
269
- background-color: ${o.colors.green};
270
- color: ${o.colors.white};
271
- transform: translateY(-1px);
272
- box-shadow: 0 4px 12px rgba(0, 146, 0, 0.3);
273
- }
274
- `
275
- })), H = s("div")(() => ({
276
- ...r`
277
- position: absolute;
278
- top: 100%;
279
- right: 0;
280
- margin-top: 5px;
281
- background-color: ${o.colors.white};
282
- border: 1px solid ${o.colors.gray4};
283
- border-radius: 6px;
284
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
285
- z-index: 1000;
286
- min-width: 200px;
287
- max-height: 300px;
288
- overflow-y: auto;
289
- `
290
- })), _ = s("div")(() => ({
291
- ...r`
292
- padding: 12px 16px;
293
- display: flex;
294
- align-items: center;
295
- gap: 10px;
296
- cursor: pointer;
297
- font-size: 14px;
298
- color: ${o.colors.slate};
299
- transition: all 0.2s ease;
300
- :focus,
301
- :hover,
302
- :focus-within {
303
- background-color: ${o.colors.whiteGreenB};
304
- color: ${o.colors.darkGreen};
305
- }
306
- `
307
- })), M = s("input")(() => ({
308
- ...r`
309
- width: 16px;
310
- height: 16px;
311
- accent-color: ${o.colors.green};
312
- `
313
- })), xe = s("table")(() => ({
314
- ...r`
315
- width: 100%;
316
- border-collapse: collapse;
317
- background-color: ${o.colors.white};
318
- border-radius: 8px;
319
- overflow: hidden;
320
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
321
- `
322
- })), fe = s("th")(() => ({
323
- ...r`
324
- background-color: ${o.colors.whiteBlue};
325
- color: ${o.colors.slate};
326
- padding: 16px 12px;
327
- text-align: left;
328
- font-size: 14px;
329
- font-weight: 600;
330
- border-bottom: 2px solid ${o.colors.gray4};
331
- cursor: pointer;
332
- user-select: none;
333
- transition: all 0.2s ease;
334
- position: relative;
335
- white-space: nowrap;
336
- :focus,
337
- :hover,
338
- :focus-within {
339
- background-color: ${o.colors.whiteGreenC};
340
- color: ${o.colors.darkGreen};
341
- }
342
- `
343
- })), be = s("td")(() => ({
344
- ...r`
345
- padding: 14px 12px;
346
- border-bottom: 1px solid ${o.colors.almostWhite};
347
- font-size: 14px;
348
- color: ${o.colors.slate};
349
- transition: all 0.2s ease;
350
- `
351
- })), ye = s("span")(() => ({
352
- ...r`
353
- margin-left: 8px;
354
- opacity: 0.6;
355
- `
356
- })), O = s("tr")(({ interactableRow: e }) => ({
357
- ...r`
358
- transition: all 0.2s ease;
359
- ${e && r`
360
- :focus,
361
- :hover,
362
- :focus-within {
363
- background-color: ${o.colors.whiteGreenD};
364
- cursor: pointer;
365
- }
366
- `}
367
- `
368
- })), me = s("div")(() => ({
369
- ...r`
370
- display: flex;
371
- justify-content: center;
372
- align-items: center;
373
- margin-top: 20px;
374
- gap: 10px;
375
- `
376
- })), w = s("button")(() => ({
377
- ...r`
378
- padding: 8px 12px;
379
- border: 1px solid ${o.colors.gray4};
380
- border-radius: 4px;
381
- background-color: ${o.colors.white};
382
- color: ${o.colors.slate};
383
- cursor: pointer;
384
- font-size: 14px;
385
- transition: all 0.2s ease;
386
- outline: none;
387
- :focus,
388
- :hover,
389
- :focus-within {
390
- background-color: ${o.colors.green};
391
- color: ${o.colors.white};
392
- border-color: ${o.colors.green};
393
- }
394
- :disabled {
395
- opacity: 0.5;
396
- cursor: not-allowed;
397
- }
398
- `
399
- })), we = s("div")(() => ({
400
- ...r`
401
- font-size: 14px;
402
- color: ${o.colors.gray3};
403
- text-align: center;
404
- margin-top: 10px;
405
- `
406
- })), U = s("span")(() => ({
407
- ...r`
408
- padding: 8px 4px;
409
- color: ${o.colors.gray3};
410
- font-size: 14px;
411
- `
412
- }));
413
- return /* @__PURE__ */ c(ce, { className: "jcTableContainer", children: [
414
- /* @__PURE__ */ c(le, { className: "jcTableHeader", children: [
415
- /* @__PURE__ */ c(ae, { className: "jcTableTitleAndActions", children: [
416
- /* @__PURE__ */ t(de, { children: K }),
417
- /* @__PURE__ */ c(Se, { className: "jcTableExtraComponentsBox", gap: "9px", children: [
418
- F && F,
419
- /* @__PURE__ */ t(Ce, { onClick: ee, children: "Export to CSV" })
402
+ };
403
+ return /* @__PURE__ */ c(me, { className: "jcTableContainer", children: [
404
+ /* @__PURE__ */ c(ye, { className: "jcTableHeader", children: [
405
+ /* @__PURE__ */ c(we, { className: "jcTableTitleAndActions", children: [
406
+ /* @__PURE__ */ t(ke, { children: Q }),
407
+ /* @__PURE__ */ c(ae, { className: "jcTableExtraComponentsBox", gap: "9px", children: [
408
+ I && I,
409
+ /* @__PURE__ */ t(ce, { onClick: ee, children: "Export to CSV" })
420
410
  ] })
421
411
  ] }),
422
- /* @__PURE__ */ c(pe, { className: "jcTableControls", children: [
423
- /* @__PURE__ */ c(he, { className: "jcTableSearchContainer", children: [
424
- /* @__PURE__ */ t(ge, { onClick: G }),
412
+ /* @__PURE__ */ c(ve, { className: "jcTableControls", children: [
413
+ /* @__PURE__ */ c(Ce, { className: "jcTableSearchContainer", children: [
414
+ /* @__PURE__ */ t(Se, {}),
425
415
  /* @__PURE__ */ t(
426
- ue,
416
+ $e,
427
417
  {
428
418
  type: "text",
429
419
  placeholder: "Search...",
430
- defaultValue: v,
431
- onChange: (e) => ie(e.target.value),
432
- onKeyDown: (e) => {
433
- e.key === "Enter" && G();
434
- }
420
+ value: z,
421
+ onChange: (e) => L(e.target.value)
435
422
  }
436
423
  )
437
424
  ] }),
438
425
  /* @__PURE__ */ c("div", { style: { position: "relative" }, children: [
439
426
  /* @__PURE__ */ c(
440
- R,
427
+ q,
441
428
  {
442
429
  className: "jcTableSearchFields",
443
- onClick: () => P(!L),
430
+ onClick: () => P(!O),
444
431
  children: [
445
- /* @__PURE__ */ t(W, { size: 16 }),
432
+ /* @__PURE__ */ t(K, { size: 16 }),
446
433
  "Fields",
447
- /* @__PURE__ */ t(E, { size: 16 })
434
+ /* @__PURE__ */ t(M, { size: 16 })
448
435
  ]
449
436
  }
450
437
  ),
451
- L && /* @__PURE__ */ c(H, { className: "jcTableSearchFieldsDropdown", children: [
438
+ O && /* @__PURE__ */ c(W, { className: "jcTableSearchFieldsDropdown", children: [
452
439
  /* @__PURE__ */ c(_, { onClick: re, children: [
453
440
  /* @__PURE__ */ t(
454
- M,
441
+ E,
455
442
  {
456
443
  type: "checkbox",
457
- checked: m.size === a.length,
444
+ checked: y.size === l.length,
458
445
  onChange: () => {
459
446
  }
460
447
  }
@@ -462,56 +449,56 @@ const He = ({
462
449
  /* @__PURE__ */ t("span", { style: { fontWeight: "bold" }, children: "All" })
463
450
  ] }),
464
451
  /* @__PURE__ */ t("div", { style: { height: "1px", backgroundColor: o.colors.gray4, margin: "4px 0" } }),
465
- a.map((e) => /* @__PURE__ */ c(_, { onClick: () => ne(e), children: [
466
- /* @__PURE__ */ t(M, { type: "checkbox", checked: m.has(e), onChange: () => {
452
+ l.map((e) => /* @__PURE__ */ c(_, { onClick: () => ne(e), children: [
453
+ /* @__PURE__ */ t(E, { type: "checkbox", checked: y.has(e), onChange: () => {
467
454
  } }),
468
- /* @__PURE__ */ t("span", { children: z[e] || e })
455
+ /* @__PURE__ */ t("span", { children: $[e] || e })
469
456
  ] }, e))
470
457
  ] })
471
458
  ] }),
472
459
  /* @__PURE__ */ c("div", { style: { position: "relative" }, children: [
473
460
  /* @__PURE__ */ c(
474
- R,
461
+ q,
475
462
  {
476
463
  className: "jcTableColumnSettings",
477
- onClick: () => Z(!V),
464
+ onClick: () => Z(!H),
478
465
  children: [
479
- /* @__PURE__ */ t(_e, { size: 16 }),
466
+ /* @__PURE__ */ t(fe, { size: 16 }),
480
467
  "Columns",
481
- /* @__PURE__ */ t(E, { size: 16 })
468
+ /* @__PURE__ */ t(M, { size: 16 })
482
469
  ]
483
470
  }
484
471
  ),
485
- V && /* @__PURE__ */ t(H, { className: "jcTableColumnSettingsDropdown", children: a.map((e) => /* @__PURE__ */ c(_, { onClick: () => se(e), children: [
486
- /* @__PURE__ */ t(M, { type: "checkbox", checked: D.has(e), onChange: () => {
472
+ H && /* @__PURE__ */ t(W, { className: "jcTableColumnSettingsDropdown", children: l.map((e) => /* @__PURE__ */ c(_, { onClick: () => se(e), children: [
473
+ /* @__PURE__ */ t(E, { type: "checkbox", checked: D.has(e), onChange: () => {
487
474
  } }),
488
- D.has(e) ? /* @__PURE__ */ t(Ae, { size: 16 }) : /* @__PURE__ */ t(Te, { size: 16 }),
489
- /* @__PURE__ */ t("span", { children: z[e] || e })
475
+ D.has(e) ? /* @__PURE__ */ t(xe, { size: 16 }) : /* @__PURE__ */ t(he, { size: 16 }),
476
+ /* @__PURE__ */ t("span", { children: $[e] || e })
490
477
  ] }, e)) })
491
478
  ] })
492
479
  ] })
493
480
  ] }),
494
- /* @__PURE__ */ c(xe, { className: "jcTableContent", children: [
495
- /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ t(O, { interactableRow: !1, children: T.map((e) => /* @__PURE__ */ c(
496
- fe,
481
+ /* @__PURE__ */ c(ze, { className: "jcTableContent", children: [
482
+ /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ t(Y, { interactableRow: !1, children: T.map((e) => /* @__PURE__ */ c(
483
+ je,
497
484
  {
498
- style: p.key === e ? u.thActive : {},
485
+ style: p.key === e ? f.thActive : {},
499
486
  onClick: () => te(e),
500
487
  children: [
501
- z[e] || e,
502
- /* @__PURE__ */ t(ye, { children: p.key === e ? p.direction === "asc" ? /* @__PURE__ */ t(q, { size: 16 }) : /* @__PURE__ */ t(E, { size: 16 }) : /* @__PURE__ */ t(q, { size: 16, style: { opacity: 0.313 } }) })
488
+ $[e] || e,
489
+ /* @__PURE__ */ t(Ne, { children: p.key === e ? p.direction === "asc" ? /* @__PURE__ */ t(U, { size: 16 }) : /* @__PURE__ */ t(M, { size: 16 }) : /* @__PURE__ */ t(U, { size: 16, style: { opacity: 0.313 } }) })
503
490
  ]
504
491
  },
505
492
  e
506
493
  )) }) }),
507
- /* @__PURE__ */ t("tbody", { children: oe.map((e, n) => /* @__PURE__ */ t(O, { onClick: () => A && A(e), interactableRow: !!A, children: T.map((l) => /* @__PURE__ */ t(be, { children: e[l] }, l)) }, n)) })
494
+ /* @__PURE__ */ t("tbody", { children: oe.map((e, n) => /* @__PURE__ */ t(Y, { onClick: () => A && A(e), interactableRow: !!A, children: T.map((a) => /* @__PURE__ */ t(Te, { children: e[a] }, a)) }, n)) })
508
495
  ] }),
509
- /* @__PURE__ */ c(me, { children: [
496
+ /* @__PURE__ */ c(Ae, { children: [
510
497
  /* @__PURE__ */ t(
511
- w,
498
+ k,
512
499
  {
513
- style: i === 1 ? u.paginationButtonDisabled : {},
514
- onClick: () => y(Math.max(1, i - 1)),
500
+ style: i === 1 ? f.paginationButtonDisabled : {},
501
+ onClick: () => u(Math.max(1, i - 1)),
515
502
  disabled: i === 1,
516
503
  children: "Previous"
517
504
  }
@@ -522,10 +509,10 @@ const He = ({
522
509
  for (let n = 1; n <= d; n++)
523
510
  e.push(
524
511
  /* @__PURE__ */ t(
525
- w,
512
+ k,
526
513
  {
527
- style: i === n ? u.paginationButtonActive : {},
528
- onClick: () => y(n),
514
+ style: i === n ? f.paginationButtonActive : {},
515
+ onClick: () => u(n),
529
516
  children: n
530
517
  },
531
518
  n
@@ -534,34 +521,34 @@ const He = ({
534
521
  else {
535
522
  e.push(
536
523
  /* @__PURE__ */ t(
537
- w,
524
+ k,
538
525
  {
539
- style: i === 1 ? u.paginationButtonActive : {},
540
- onClick: () => y(1),
526
+ style: i === 1 ? f.paginationButtonActive : {},
527
+ onClick: () => u(1),
541
528
  children: "1"
542
529
  },
543
530
  1
544
531
  )
545
- ), i > 3 && e.push(/* @__PURE__ */ t(U, { children: "..." }, "ellipsis1"));
546
- const n = Math.max(2, i - 1), l = Math.min(d - 1, i + 1);
547
- for (let h = n; h <= l; h++)
532
+ ), i > 3 && e.push(/* @__PURE__ */ t(J, { children: "..." }, "ellipsis1"));
533
+ const n = Math.max(2, i - 1), a = Math.min(d - 1, i + 1);
534
+ for (let h = n; h <= a; h++)
548
535
  e.push(
549
536
  /* @__PURE__ */ t(
550
- w,
537
+ k,
551
538
  {
552
- style: i === h ? u.paginationButtonActive : {},
553
- onClick: () => y(h),
539
+ style: i === h ? f.paginationButtonActive : {},
540
+ onClick: () => u(h),
554
541
  children: h
555
542
  },
556
543
  h
557
544
  )
558
545
  );
559
- i < d - 2 && e.push(/* @__PURE__ */ t(U, { children: "..." }, "ellipsis2")), d > 1 && e.push(
546
+ i < d - 2 && e.push(/* @__PURE__ */ t(J, { children: "..." }, "ellipsis2")), d > 1 && e.push(
560
547
  /* @__PURE__ */ t(
561
- w,
548
+ k,
562
549
  {
563
- style: i === d ? u.paginationButtonActive : {},
564
- onClick: () => y(d),
550
+ style: i === d ? f.paginationButtonActive : {},
551
+ onClick: () => u(d),
565
552
  children: d
566
553
  },
567
554
  d
@@ -571,21 +558,21 @@ const He = ({
571
558
  return e;
572
559
  })(),
573
560
  /* @__PURE__ */ t(
574
- w,
561
+ k,
575
562
  {
576
- style: i === d ? u.paginationButtonDisabled : {},
577
- onClick: () => y(Math.min(d, i + 1)),
563
+ style: i === d ? f.paginationButtonDisabled : {},
564
+ onClick: () => u(Math.min(d, i + 1)),
578
565
  disabled: i === d,
579
566
  children: "Next"
580
567
  }
581
568
  )
582
569
  ] }),
583
- /* @__PURE__ */ c(we, { children: [
570
+ /* @__PURE__ */ c(De, { children: [
584
571
  "Showing ",
585
- Math.min((i - 1) * b + 1, g.length),
572
+ Math.min((i - 1) * m + 1, g.length),
586
573
  " to",
587
574
  " ",
588
- Math.min(i * b, g.length),
575
+ Math.min(i * m, g.length),
589
576
  " of ",
590
577
  g.length,
591
578
  " entries"
@@ -593,5 +580,5 @@ const He = ({
593
580
  ] });
594
581
  };
595
582
  export {
596
- He as default
583
+ Ge as default
597
584
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "jcicl",
3
3
  "private": false,
4
- "version": "0.0.343",
4
+ "version": "0.0.345",
5
5
  "description": "Component library for the websites of Johnson County Iowa",
6
6
  "license": "MIT",
7
7
  "homepage": "https://devops.jc.net/JCIT/Business%20Solutions%20Delivery/_git/JCComponentLibrary?path=%2FREADME.md&version=GBmaster",