@teselagen/ui 0.9.3 → 0.9.5

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 (15) hide show
  1. package/index.cjs.js +11 -3
  2. package/index.es.js +11 -3
  3. package/package.json +3 -1
  4. package/src/AdvancedOptions.spec.js +40 -11
  5. package/src/DataTable/defaultValidators.js +4 -0
  6. package/src/DataTable/defaultValidators.test.js +108 -0
  7. package/src/DataTable/index.js +9 -3
  8. package/DataTable/EditabelCell.d.ts +0 -10
  9. package/DataTable/defaultProps.d.ts +0 -43
  10. package/DataTable/utils/computePresets.d.ts +0 -1
  11. package/src/DataTable/EditabelCell.js +0 -55
  12. package/src/DataTable/defaultProps.js +0 -45
  13. package/src/DataTable/utils/computePresets.js +0 -42
  14. package/src/ExcelCell.js +0 -38
  15. package/style.css +0 -10537
package/index.cjs.js CHANGED
@@ -37093,6 +37093,9 @@ const defaultValidators = {
37093
37093
  }, "dropdownMulti"),
37094
37094
  number: /* @__PURE__ */ __name((newVal, field) => {
37095
37095
  if (isValueEmpty(newVal) && !field.isRequired) return;
37096
+ if (field.allowNaN && Number.isNaN(newVal)) {
37097
+ return;
37098
+ }
37096
37099
  if (isNaN(newVal) || !isNumber$1(newVal)) {
37097
37100
  return "Must be a number";
37098
37101
  }
@@ -57255,9 +57258,14 @@ const DataTable = /* @__PURE__ */ __name((_I) => {
57255
57258
  acc[e.id || e.code] = i2;
57256
57259
  return acc;
57257
57260
  }, {});
57258
- const rowNumbersToCopy = Array.from(
57259
- new Set(selectedRecords.map((rec) => idToIndex[rec.id || rec.code] + 1))
57260
- ).sort();
57261
+ const rowNumbersToCopy = [];
57262
+ selectedRecords.forEach((rec) => {
57263
+ const rowIndex = idToIndex[rec.id || rec.code] + 1;
57264
+ if (!rowNumbersToCopy.includes(rowIndex)) {
57265
+ rowNumbersToCopy.push(rowIndex);
57266
+ }
57267
+ });
57268
+ rowNumbersToCopy.sort();
57261
57269
  if (!rowNumbersToCopy.length) return;
57262
57270
  rowNumbersToCopy.unshift(0);
57263
57271
  try {
package/index.es.js CHANGED
@@ -37075,6 +37075,9 @@ const defaultValidators = {
37075
37075
  }, "dropdownMulti"),
37076
37076
  number: /* @__PURE__ */ __name((newVal, field) => {
37077
37077
  if (isValueEmpty(newVal) && !field.isRequired) return;
37078
+ if (field.allowNaN && Number.isNaN(newVal)) {
37079
+ return;
37080
+ }
37078
37081
  if (isNaN(newVal) || !isNumber$1(newVal)) {
37079
37082
  return "Must be a number";
37080
37083
  }
@@ -57237,9 +57240,14 @@ const DataTable = /* @__PURE__ */ __name((_I) => {
57237
57240
  acc[e.id || e.code] = i2;
57238
57241
  return acc;
57239
57242
  }, {});
57240
- const rowNumbersToCopy = Array.from(
57241
- new Set(selectedRecords.map((rec) => idToIndex[rec.id || rec.code] + 1))
57242
- ).sort();
57243
+ const rowNumbersToCopy = [];
57244
+ selectedRecords.forEach((rec) => {
57245
+ const rowIndex = idToIndex[rec.id || rec.code] + 1;
57246
+ if (!rowNumbersToCopy.includes(rowIndex)) {
57247
+ rowNumbersToCopy.push(rowIndex);
57248
+ }
57249
+ });
57250
+ rowNumbersToCopy.sort();
57243
57251
  if (!rowNumbersToCopy.length) return;
57244
57252
  rowNumbersToCopy.unshift(0);
57245
57253
  try {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@teselagen/ui",
3
- "version": "0.9.3",
3
+ "version": "0.9.5",
4
4
  "main": "./src/index.js",
5
5
  "type": "module",
6
6
  "exports": {
@@ -10,6 +10,7 @@
10
10
  },
11
11
  "./style.css": "./style.css"
12
12
  },
13
+ "devDependencies": {},
13
14
  "dependencies": {
14
15
  "@blueprintjs/core": "3.54.0",
15
16
  "@blueprintjs/datetime": "^3.24.1",
@@ -18,6 +19,7 @@
18
19
  "@dnd-kit/modifiers": "^7.0.0",
19
20
  "@dnd-kit/sortable": "^8.0.0",
20
21
  "@teselagen/react-table": "6.10.18",
22
+ "chance": "1.1.11",
21
23
  "classnames": "^2.3.2",
22
24
  "color": "^3.2.1",
23
25
  "copy-to-clipboard": "^3.3.1",
package/src/AdvancedOptions.spec.js CHANGED
@@ -1,26 +1,55 @@
1
1
  import React from "react";
2
- import { render, fireEvent } from "@testing-library/react";
2
+ import { JSDOM } from "jsdom";
3
+ import { render, fireEvent, cleanup } from "@testing-library/react";
4
+ import { expect, describe, test, afterEach } from "bun:test";
5
+
3
6
  import AdvancedOptions from "./AdvancedOptions";
4
7
 
8
+ // Set up DOM environment once for this test file
9
+ const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>', {
10
+ url: 'http://localhost',
11
+ });
12
+
13
+ global.window = dom.window;
14
+ global.document = dom.window.document;
15
+ global.navigator = dom.window.navigator;
16
+ global.HTMLElement = dom.window.HTMLElement;
17
+ global.DocumentFragment = dom.window.DocumentFragment;
18
+ global.KeyboardEvent = dom.window.KeyboardEvent;
19
+ global.MouseEvent = dom.window.MouseEvent;
20
+
5
21
  describe("AdvancedOptions", () => {
22
+ afterEach(() => {
23
+ cleanup();
24
+ });
25
+
6
26
  test("renders correctly with given props and default state", () => {
7
27
  const { queryByText, container } = render(
8
28
  <AdvancedOptions label="Test Label" content="Test Content" />
9
29
  );
10
- expect(queryByText("Test Label")).toBeInTheDocument();
11
- expect(queryByText("Test Content")).not.toBeInTheDocument();
30
+ // Check if label is rendered
31
+ expect(queryByText("Test Label")).not.toBeNull();
32
+ // Check if content is NOT rendered initially (collapsed state)
33
+ expect(queryByText("Test Content")).toBeNull();
12
34
 
13
- expect(
14
- container.querySelector(".bp3-icon-caret-right")
15
- ).toBeInTheDocument();
35
+ // Check if right caret icon is present (collapsed state)
36
+ expect(container.querySelector(".bp3-icon-caret-right")).not.toBeNull();
16
37
  });
17
38
 
18
39
  test("toggles content when clicked", () => {
19
- const { getByText, queryByText, container } = render(
20
- <AdvancedOptions label="Test Label" content="Test Content" />
40
+ const { container, queryByText } = render(
41
+ <AdvancedOptions label="Test Label 2" content="Test Content 2" />
21
42
  );
22
- fireEvent.click(getByText("Test Label"));
23
- expect(queryByText("Test Content")).toBeInTheDocument();
24
- expect(container.querySelector(".bp3-icon-caret-down")).toBeInTheDocument();
43
+
44
+ // Find and click the toggle button
45
+ const toggleButton = container.querySelector(".tg-toggle-advanced-options");
46
+ expect(toggleButton).not.toBeNull();
47
+
48
+ fireEvent.click(toggleButton);
49
+
50
+ // After click, content should be visible
51
+ expect(queryByText("Test Content 2")).not.toBeNull();
52
+ // After click, down caret icon should be present (expanded state)
53
+ expect(container.querySelector(".bp3-icon-caret-down")).not.toBeNull();
25
54
  });
26
55
  });
package/src/DataTable/defaultValidators.js CHANGED
@@ -29,6 +29,10 @@ export const defaultValidators = {
29
29
  },
30
30
  number: (newVal, field) => {
31
31
  if (isValueEmpty(newVal) && !field.isRequired) return;
32
+ if (field.allowNaN && Number.isNaN(newVal)) {
33
+ // Allow actual NaN when explicitly permitted
34
+ return;
35
+ }
32
36
  if (isNaN(newVal) || !isNumber(newVal)) {
33
37
  return "Must be a number";
34
38
  }
package/src/DataTable/defaultValidators.test.js ADDED
@@ -0,0 +1,108 @@
1
+ // Basic unit tests without jest-dom setup
2
+ import { describe, test, expect } from "bun:test";
3
+ import { defaultValidators } from "./defaultValidators";
4
+
5
+ describe("defaultValidators", () => {
6
+ describe("number validator", () => {
7
+ const numberValidator = defaultValidators.number;
8
+
9
+ test("should validate valid numbers", () => {
10
+ expect(numberValidator(123, {})).toBeUndefined();
11
+ expect(numberValidator(0, {})).toBeUndefined();
12
+ expect(numberValidator(-123, {})).toBeUndefined();
13
+ expect(numberValidator(123.45, {})).toBeUndefined();
14
+ });
15
+
16
+ test("should reject non-numeric strings", () => {
17
+ expect(numberValidator("hello", {})).toBe("Must be a number");
18
+ expect(numberValidator("abc123", {})).toBe("Must be a number");
19
+ expect(numberValidator("", {})).toBeUndefined(); // empty values are allowed when not required
20
+ });
21
+
22
+ test("should reject NaN by default", () => {
23
+ expect(numberValidator(NaN, {})).toBe("Must be a number");
24
+ });
25
+
26
+ test("should allow NaN when allowNaN is true", () => {
27
+ expect(numberValidator(NaN, { allowNaN: true })).toBeUndefined();
28
+ });
29
+
30
+ test("should still reject non-numeric strings even with allowNaN", () => {
31
+ expect(numberValidator("hello", { allowNaN: true })).toBe("Must be a number");
32
+ expect(numberValidator("not a number", { allowNaN: true })).toBe("Must be a number");
33
+ });
34
+
35
+ test("should handle required field validation", () => {
36
+ expect(numberValidator("", { isRequired: true })).toBe("Must be a number");
37
+ expect(numberValidator(null, { isRequired: true })).toBe("Must be a number");
38
+ expect(numberValidator(undefined, { isRequired: true })).toBe("Must be a number");
39
+ });
40
+
41
+ test("should allow empty values for non-required fields", () => {
42
+ expect(numberValidator("", {})).toBeUndefined();
43
+ expect(numberValidator(null, {})).toBeUndefined();
44
+ expect(numberValidator(undefined, {})).toBeUndefined();
45
+ });
46
+
47
+ test("should reject numeric strings (only actual numbers allowed)", () => {
48
+ expect(numberValidator("123", {})).toBe("Must be a number");
49
+ expect(numberValidator("123.45", {})).toBe("Must be a number");
50
+ expect(numberValidator("-123", {})).toBe("Must be a number");
51
+ });
52
+
53
+ test("should combine allowNaN with required field validation", () => {
54
+ // Required field with allowNaN should still reject empty values
55
+ expect(numberValidator("", { isRequired: true, allowNaN: true })).toBe("Must be a number");
56
+ expect(numberValidator(null, { isRequired: true, allowNaN: true })).toBe("Must be a number");
57
+
58
+ // But should allow NaN
59
+ expect(numberValidator(NaN, { isRequired: true, allowNaN: true })).toBeUndefined();
60
+ });
61
+ });
62
+
63
+ describe("string validator", () => {
64
+ const stringValidator = defaultValidators.string;
65
+
66
+ test("should allow any string for non-required fields", () => {
67
+ expect(stringValidator("hello", {})).toBe(false);
68
+ expect(stringValidator("", {})).toBe(false);
69
+ });
70
+
71
+ test("should reject empty strings for required fields", () => {
72
+ expect(stringValidator("", { isRequired: true })).toBe("Please enter a value here");
73
+ expect(stringValidator(null, { isRequired: true })).toBe("Please enter a value here");
74
+ expect(stringValidator(undefined, { isRequired: true })).toBe("Please enter a value here");
75
+ });
76
+
77
+ test("should accept non-empty strings for required fields", () => {
78
+ expect(stringValidator("hello", { isRequired: true })).toBeUndefined();
79
+ expect(stringValidator("test", { isRequired: true })).toBeUndefined();
80
+ });
81
+ });
82
+
83
+ describe("dropdown validator", () => {
84
+ const dropdownValidator = defaultValidators.dropdown;
85
+ const field = { values: ["option1", "option2", "option3"] };
86
+
87
+ test("should accept valid dropdown values", () => {
88
+ expect(dropdownValidator("option1", field)).toBeUndefined();
89
+ expect(dropdownValidator("option2", field)).toBeUndefined();
90
+ expect(dropdownValidator("option3", field)).toBeUndefined();
91
+ });
92
+
93
+ test("should reject invalid dropdown values", () => {
94
+ expect(dropdownValidator("invalid", field)).toBe("Please choose one of the accepted values");
95
+ expect(dropdownValidator("option4", field)).toBe("Please choose one of the accepted values");
96
+ });
97
+
98
+ test("should handle required dropdown fields", () => {
99
+ expect(dropdownValidator("", { ...field, isRequired: true })).toBe("Please choose one of the accepted values");
100
+ expect(dropdownValidator(null, { ...field, isRequired: true })).toBe("Please choose one of the accepted values");
101
+ });
102
+
103
+ test("should allow empty values for non-required dropdown fields", () => {
104
+ expect(dropdownValidator("", field)).toBeUndefined();
105
+ expect(dropdownValidator(null, field)).toBeUndefined();
106
+ });
107
+ });
108
+ });
package/src/DataTable/index.js CHANGED
@@ -1242,9 +1242,15 @@ const DataTable = ({
1242
1242
 
1243
1243
  //index 0 of the table is the column titles
1244
1244
  //must add 1 to rowNum
1245
- const rowNumbersToCopy = Array.from(
1246
- new Set(selectedRecords.map(rec => idToIndex[rec.id || rec.code] + 1))
1247
- ).sort();
1245
+ // Dedupe rows by row index, not by Set (which dedupes by value)
1246
+ const rowNumbersToCopy = [];
1247
+ selectedRecords.forEach(rec => {
1248
+ const rowIndex = idToIndex[rec.id || rec.code] + 1;
1249
+ if (!rowNumbersToCopy.includes(rowIndex)) {
1250
+ rowNumbersToCopy.push(rowIndex);
1251
+ }
1252
+ });
1253
+ rowNumbersToCopy.sort();
1248
1254
 
1249
1255
  if (!rowNumbersToCopy.length) return;
1250
1256
  rowNumbersToCopy.unshift(0); //add in the header row
package/DataTable/EditabelCell.d.ts DELETED
@@ -1,10 +0,0 @@
1
- export function EditableCell({ cancelEdit, dataTest, finishEdit, initialValue, isEditableCellInitialValue, isNumeric, shouldSelectAll, stopSelectAll }: {
2
- cancelEdit: any;
3
- dataTest: any;
4
- finishEdit: any;
5
- initialValue: any;
6
- isEditableCellInitialValue: any;
7
- isNumeric: any;
8
- shouldSelectAll: any;
9
- stopSelectAll: any;
10
- }): import("react/jsx-runtime").JSX.Element;
package/DataTable/defaultProps.d.ts DELETED
@@ -1,43 +0,0 @@
1
- import { noop } from 'lodash-es';
2
- declare namespace _default {
3
- export { noop as addFilters };
4
- export let className: string;
5
- export { noop as clearFilters };
6
- export { noop as contextMenu };
7
- export let disabled: boolean;
8
- export let entities: never[];
9
- export let extraClasses: string;
10
- export let filters: never[];
11
- export let isCopyable: boolean;
12
- export { noop as isEntityDisabled };
13
- export let isLoading: boolean;
14
- export let isSimple: boolean;
15
- export let isSingleSelect: boolean;
16
- export let maxHeight: number;
17
- export let noHeader: boolean;
18
- export let noSelect: boolean;
19
- export let noUserSelect: boolean;
20
- export { noop as onDeselect };
21
- export { noop as onMultiRowSelect };
22
- export { noop as onRowClick };
23
- export { noop as onRowSelect };
24
- export { noop as onSingleRowSelect };
25
- export let page: number;
26
- export let pageSize: number;
27
- export let reduxFormExpandedEntityIdMap: {};
28
- export let reduxFormSearchInput: string;
29
- export let reduxFormSelectedEntityIdMap: {};
30
- export { noop as removeSingleFilter };
31
- export let resized: never[];
32
- export { noop as resizePersist };
33
- export { noop as setFilter };
34
- export { noop as setOrder };
35
- export { noop as setPage };
36
- export { noop as setPageSize };
37
- export { noop as setSearchTerm };
38
- export let showCount: boolean;
39
- export let style: {};
40
- export let withCheckboxes: boolean;
41
- export let withSort: boolean;
42
- }
43
- export default _default;
package/DataTable/utils/computePresets.d.ts DELETED
@@ -1 +0,0 @@
1
- export default function computePresets(props?: {}): import('lodash').Dictionary<any>;
package/src/DataTable/EditabelCell.js DELETED
@@ -1,55 +0,0 @@
1
- import React, { useEffect, useRef, useState } from "react";
2
-
3
- export const EditableCell = ({
4
- cancelEdit,
5
- dataTest,
6
- finishEdit,
7
- initialValue,
8
- isEditableCellInitialValue,
9
- isNumeric,
10
- shouldSelectAll,
11
- stopSelectAll
12
- }) => {
13
- const [value, setValue] = useState(initialValue);
14
- const inputRef = useRef(null);
15
-
16
- useEffect(() => {
17
- if (inputRef.current) {
18
- inputRef.current.focus();
19
- if (isEditableCellInitialValue && !isNumeric) {
20
- inputRef.current.selectionStart = inputRef.current.value.length;
21
- inputRef.current.selectionEnd = inputRef.current.value.length;
22
- } else if (shouldSelectAll) {
23
- inputRef.current.select();
24
- stopSelectAll();
25
- }
26
- }
27
- }, [isEditableCellInitialValue, isNumeric, shouldSelectAll, stopSelectAll]);
28
-
29
- return (
30
- <input
31
- style={{
32
- border: 0,
33
- width: "95%",
34
- fontSize: 12,
35
- background: "none"
36
- }}
37
- ref={inputRef}
38
- {...dataTest}
39
- autoFocus
40
- onKeyDown={e => {
41
- if (e.key === "Enter") {
42
- finishEdit(value);
43
- e.stopPropagation();
44
- } else if (e.key === "Escape") {
45
- e.stopPropagation();
46
- cancelEdit();
47
- }
48
- }}
49
- onBlur={() => finishEdit(value)}
50
- onChange={e => setValue(e.target.value)}
51
- type={isNumeric ? "number" : undefined}
52
- value={value}
53
- />
54
- );
55
- };
package/src/DataTable/defaultProps.js DELETED
@@ -1,45 +0,0 @@
1
- import { noop } from "lodash-es";
2
-
3
- // eslint-disable-next-line import/no-anonymous-default-export
4
- export default {
5
- //NOTE: DO NOT SET DEFAULTS HERE FOR PROPS THAT GET COMPUTED AS PART OF PRESET GROUPS IN computePresets
6
- addFilters: noop,
7
- className: "",
8
- clearFilters: noop,
9
- contextMenu: noop,
10
- disabled: false,
11
- entities: [],
12
- extraClasses: "",
13
- filters: [],
14
- isCopyable: true,
15
- isEntityDisabled: noop,
16
- isLoading: false,
17
- isSimple: false,
18
- isSingleSelect: false,
19
- maxHeight: 600,
20
- noHeader: false,
21
- noSelect: false,
22
- noUserSelect: false,
23
- onDeselect: noop,
24
- onMultiRowSelect: noop,
25
- onRowClick: noop,
26
- onRowSelect: noop,
27
- onSingleRowSelect: noop,
28
- page: 1,
29
- pageSize: 10,
30
- reduxFormExpandedEntityIdMap: {},
31
- reduxFormSearchInput: "",
32
- reduxFormSelectedEntityIdMap: {},
33
- removeSingleFilter: noop,
34
- resized: [],
35
- resizePersist: noop,
36
- setFilter: noop,
37
- setOrder: noop,
38
- setPage: noop,
39
- setPageSize: noop,
40
- setSearchTerm: noop,
41
- showCount: false,
42
- style: {},
43
- withCheckboxes: false,
44
- withSort: true
45
- };
package/src/DataTable/utils/computePresets.js DELETED
@@ -1,42 +0,0 @@
1
- import { omitBy, isNil } from "lodash-es";
2
- //we use this to make adding preset prop groups simpler
3
- export default function computePresets(props = {}) {
4
- const { isSimple } = props;
5
- let toReturn = omitBy(props, isNil);
6
- toReturn.pageSize = toReturn.controlled_pageSize || toReturn.pageSize;
7
- if (isSimple) {
8
- //isSimplePreset
9
- toReturn = {
10
- noHeader: true,
11
- noFooter: !props.withPaging,
12
- noPadding: true,
13
- noFullscreenButton: true,
14
- hidePageSizeWhenPossible: !props.withPaging,
15
- isInfinite: !props.withPaging,
16
- hideSelectedCount: true,
17
- withTitle: false,
18
- withSearch: false,
19
- compact: true,
20
- withPaging: false,
21
- withFilter: false,
22
- ...toReturn
23
- };
24
- } else {
25
- toReturn = {
26
- // the usual defaults:
27
- noFooter: false,
28
- noPadding: false,
29
- compact: true,
30
- noFullscreenButton: false,
31
- hidePageSizeWhenPossible: false,
32
- isInfinite: false,
33
- hideSelectedCount: false,
34
- withTitle: true,
35
- withSearch: true,
36
- withPaging: true,
37
- withFilter: true,
38
- ...toReturn
39
- };
40
- }
41
- return toReturn || {};
42
- }
package/src/ExcelCell.js DELETED
@@ -1,38 +0,0 @@
1
- /* eslint react/jsx-no-bind: 0 */
2
- import { Popover } from "@blueprintjs/core";
3
- import React, { useState } from "react";
4
-
5
- export default function ExcelCell() {
6
- const [v, setV] = useState("");
7
- const [isPopoverOpen, setIsPopoverOpen] = useState(false);
8
- return (
9
- <Popover
10
- onClose={() => {
11
- setIsPopoverOpen(false);
12
- }}
13
- isOpen={isPopoverOpen}
14
- content={<div>Sum</div>}
15
- >
16
- <div
17
- style={{
18
- border: "1px solid #ccc",
19
- padding: 5,
20
- width: 100,
21
- height: 30
22
- }}
23
- contentEditable
24
- onInput={e => {
25
- const text = e.currentTarget.textContent;
26
-
27
- if (text === "=") {
28
- // open a popover
29
- setIsPopoverOpen(true);
30
- }
31
- setV(text);
32
- }}
33
- >
34
- {v}
35
- </div>
36
- </Popover>
37
- );
38
- }