@vendorflow/components 2.1.1 → 3.0.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 (149) hide show
  1. package/lib/components/index.d.ts +1 -1
  2. package/lib/components/material-ui/Button/Button.d.ts +1 -1
  3. package/lib/components/material-ui/ButtonMenu/ButtonMenu.d.ts +2 -2
  4. package/lib/components/material-ui/ColorPicker/ColorPicker.d.ts +1 -1
  5. package/lib/components/material-ui/DataTable/Data.d.ts +1 -1
  6. package/lib/components/material-ui/DataTable/DataTable.d.ts +10 -77
  7. package/lib/components/material-ui/DataTable/FilterTool/Filters/MultiSelectFilter.d.ts +1 -1
  8. package/lib/components/material-ui/DataTable/FilterTool/Filters/RangeFilter.d.ts +1 -1
  9. package/lib/components/material-ui/DataTable/FilterTool/Filters/SingleSelectFilter.d.ts +1 -1
  10. package/lib/components/material-ui/DataTable/FilterTool/Filters/TextFilter.d.ts +1 -1
  11. package/lib/components/material-ui/DataTable/FilterTool/index.d.ts +2 -2
  12. package/lib/components/material-ui/DataTable/TablePieces/BodyRow.d.ts +1 -1
  13. package/lib/components/material-ui/DataTable/TablePieces/HeaderCell.d.ts +1 -1
  14. package/lib/components/material-ui/DataTable/TablePieces/Toolbar.d.ts +1 -1
  15. package/lib/components/material-ui/DataTable/index.d.ts +1 -1
  16. package/lib/components/material-ui/InputDate/InputDate.d.ts +2 -2
  17. package/lib/components/material-ui/InputDateTime/InputDateTime.d.ts +2 -2
  18. package/lib/components/material-ui/InputGroup/InputGroup.d.ts +1 -1
  19. package/lib/components/material-ui/InputSearchDropdown/InputSearchDropdown.d.ts +2 -2
  20. package/lib/components/material-ui/InputTime/InputTime.d.ts +2 -2
  21. package/lib/components/material-ui/Modal/Modal.d.ts +1 -1
  22. package/lib/index.js +3 -14
  23. package/lib/index.js.LICENSE.txt +29 -0
  24. package/lib/index.js.map +1 -0
  25. package/lib/types/Component.types.d.ts +9 -9
  26. package/lib/types/DataTable.types.d.ts +69 -0
  27. package/lib/types/index.d.ts +1 -0
  28. package/package.json +24 -103
  29. package/lib/TempHooks.d.ts +0 -9
  30. package/lib/TempHooks.js +0 -25
  31. package/lib/components/InfiniteScroll/InfiniteScroll.d.ts +0 -16
  32. package/lib/components/InfiniteScroll/InfiniteScroll.js +0 -159
  33. package/lib/components/InfiniteScroll/index.d.ts +0 -1
  34. package/lib/components/InfiniteScroll/index.js +0 -8
  35. package/lib/components/blueprint/InputGroup/InputGroup.d.ts +0 -20
  36. package/lib/components/blueprint/InputGroup/InputGroup.js +0 -13
  37. package/lib/components/blueprint/InputGroup/InputGroup.story.d.ts +0 -2
  38. package/lib/components/blueprint/InputGroup/InputGroup.story.js +0 -11
  39. package/lib/components/blueprint/InputGroup/index.d.ts +0 -1
  40. package/lib/components/blueprint/InputGroup/index.js +0 -4
  41. package/lib/components/blueprint/InputSelect/InputSelect.d.ts +0 -51
  42. package/lib/components/blueprint/InputSelect/InputSelect.js +0 -98
  43. package/lib/components/blueprint/InputSelect/InputSelect.story.d.ts +0 -3
  44. package/lib/components/blueprint/InputSelect/InputSelect.story.js +0 -19
  45. package/lib/components/blueprint/InputSelect/index.d.ts +0 -1
  46. package/lib/components/blueprint/InputSelect/index.js +0 -4
  47. package/lib/components/blueprint/InputTime/InputTime.d.ts +0 -24
  48. package/lib/components/blueprint/InputTime/InputTime.js +0 -28
  49. package/lib/components/blueprint/InputTime/InputTime.story.d.ts +0 -2
  50. package/lib/components/blueprint/InputTime/InputTime.story.js +0 -11
  51. package/lib/components/blueprint/InputTime/index.d.ts +0 -1
  52. package/lib/components/blueprint/InputTime/index.js +0 -4
  53. package/lib/components/index.js +0 -32
  54. package/lib/components/material-ui/AudioPlayer/AudioPlayer.js +0 -111
  55. package/lib/components/material-ui/AudioPlayer/AudioPlayer.story.js +0 -9
  56. package/lib/components/material-ui/AudioPlayer/index.js +0 -8
  57. package/lib/components/material-ui/Button/Button.js +0 -38
  58. package/lib/components/material-ui/Button/Button.story.js +0 -9
  59. package/lib/components/material-ui/Button/index.js +0 -8
  60. package/lib/components/material-ui/ButtonMenu/ButtonMenu.js +0 -115
  61. package/lib/components/material-ui/ButtonMenu/ButtonMenu.story.js +0 -79
  62. package/lib/components/material-ui/ButtonMenu/index.js +0 -8
  63. package/lib/components/material-ui/ChatInterface/ActionsMenu.d.ts +0 -4
  64. package/lib/components/material-ui/ChatInterface/ActionsMenu.js +0 -37
  65. package/lib/components/material-ui/ChatInterface/ChatInterface.d.ts +0 -33
  66. package/lib/components/material-ui/ChatInterface/ChatInterface.js +0 -109
  67. package/lib/components/material-ui/ChatInterface/ChatInterface.story.d.ts +0 -1
  68. package/lib/components/material-ui/ChatInterface/ChatInterface.story.js +0 -134
  69. package/lib/components/material-ui/ChatInterface/MessageInput.d.ts +0 -9
  70. package/lib/components/material-ui/ChatInterface/MessageInput.js +0 -53
  71. package/lib/components/material-ui/ChatInterface/MessageItem.d.ts +0 -8
  72. package/lib/components/material-ui/ChatInterface/MessageItem.js +0 -71
  73. package/lib/components/material-ui/ChatInterface/MessageThread.d.ts +0 -6
  74. package/lib/components/material-ui/ChatInterface/MessageThread.js +0 -119
  75. package/lib/components/material-ui/ChatInterface/index.d.ts +0 -1
  76. package/lib/components/material-ui/ChatInterface/index.js +0 -8
  77. package/lib/components/material-ui/ColorPicker/ColorPicker.js +0 -86
  78. package/lib/components/material-ui/ColorPicker/ColorPicker.story.js +0 -47
  79. package/lib/components/material-ui/ColorPicker/index.js +0 -8
  80. package/lib/components/material-ui/ColorPicker/styles.js +0 -24
  81. package/lib/components/material-ui/DataTable/AppliedFilters.d.ts +0 -12
  82. package/lib/components/material-ui/DataTable/AppliedFilters.js +0 -26
  83. package/lib/components/material-ui/DataTable/Data.js +0 -42
  84. package/lib/components/material-ui/DataTable/DataTable.js +0 -363
  85. package/lib/components/material-ui/DataTable/DataTable.story.js +0 -76
  86. package/lib/components/material-ui/DataTable/FilterTool/Filters/MultiSelectFilter.js +0 -63
  87. package/lib/components/material-ui/DataTable/FilterTool/Filters/RangeFilter.js +0 -76
  88. package/lib/components/material-ui/DataTable/FilterTool/Filters/SingleSelectFilter.js +0 -69
  89. package/lib/components/material-ui/DataTable/FilterTool/Filters/TextFilter.js +0 -52
  90. package/lib/components/material-ui/DataTable/FilterTool/index.js +0 -78
  91. package/lib/components/material-ui/DataTable/GlobalSearchFilter.d.ts +0 -10
  92. package/lib/components/material-ui/DataTable/GlobalSearchFilter.js +0 -49
  93. package/lib/components/material-ui/DataTable/IndeterminateCheckbox.d.ts +0 -4
  94. package/lib/components/material-ui/DataTable/IndeterminateCheckbox.js +0 -65
  95. package/lib/components/material-ui/DataTable/SortIndicator.d.ts +0 -10
  96. package/lib/components/material-ui/DataTable/SortIndicator.js +0 -33
  97. package/lib/components/material-ui/DataTable/TablePieces/AppliedFilters.js +0 -26
  98. package/lib/components/material-ui/DataTable/TablePieces/BodyCell.js +0 -50
  99. package/lib/components/material-ui/DataTable/TablePieces/BodyRow.js +0 -88
  100. package/lib/components/material-ui/DataTable/TablePieces/GlobalSearchFilter.js +0 -49
  101. package/lib/components/material-ui/DataTable/TablePieces/HeaderCell.js +0 -57
  102. package/lib/components/material-ui/DataTable/TablePieces/IndeterminateCheckbox.js +0 -65
  103. package/lib/components/material-ui/DataTable/TablePieces/SortIndicator.js +0 -33
  104. package/lib/components/material-ui/DataTable/TablePieces/Table.js +0 -47
  105. package/lib/components/material-ui/DataTable/TablePieces/TableBodyContent.js +0 -89
  106. package/lib/components/material-ui/DataTable/TablePieces/Toolbar.js +0 -59
  107. package/lib/components/material-ui/DataTable/TablePieces/ViewColumnTool.js +0 -77
  108. package/lib/components/material-ui/DataTable/Toolbar.d.ts +0 -24
  109. package/lib/components/material-ui/DataTable/Toolbar.js +0 -63
  110. package/lib/components/material-ui/DataTable/Utils.d.ts +0 -25
  111. package/lib/components/material-ui/DataTable/Utils.js +0 -119
  112. package/lib/components/material-ui/DataTable/ViewColumnTool.d.ts +0 -11
  113. package/lib/components/material-ui/DataTable/ViewColumnTool.js +0 -76
  114. package/lib/components/material-ui/DataTable/index.js +0 -8
  115. package/lib/components/material-ui/ErrorBoundary/ErrorBoundary.d.ts +0 -7
  116. package/lib/components/material-ui/ErrorBoundary/ErrorBoundary.js +0 -20
  117. package/lib/components/material-ui/ErrorBoundary/index.d.ts +0 -1
  118. package/lib/components/material-ui/ErrorBoundary/index.js +0 -8
  119. package/lib/components/material-ui/InputCheckboxGroup/InputCheckboxGroup.js +0 -99
  120. package/lib/components/material-ui/InputCheckboxGroup/InputCheckboxGroup.story.js +0 -52
  121. package/lib/components/material-ui/InputCheckboxGroup/index.js +0 -8
  122. package/lib/components/material-ui/InputDate/InputDate.js +0 -93
  123. package/lib/components/material-ui/InputDate/InputDate.story.js +0 -53
  124. package/lib/components/material-ui/InputDate/index.js +0 -8
  125. package/lib/components/material-ui/InputDateTime/InputDateTime.js +0 -82
  126. package/lib/components/material-ui/InputDateTime/InputDateTime.story.js +0 -53
  127. package/lib/components/material-ui/InputDateTime/index.js +0 -8
  128. package/lib/components/material-ui/InputGroup/InputGroup.js +0 -91
  129. package/lib/components/material-ui/InputGroup/InputGroup.story.js +0 -50
  130. package/lib/components/material-ui/InputGroup/index.js +0 -8
  131. package/lib/components/material-ui/InputRadioGroup/InputRadioGroup.js +0 -82
  132. package/lib/components/material-ui/InputRadioGroup/InputRadioGroup.story.js +0 -52
  133. package/lib/components/material-ui/InputRadioGroup/index.js +0 -8
  134. package/lib/components/material-ui/InputSearchDropdown/InputSearchDropdown.js +0 -146
  135. package/lib/components/material-ui/InputSearchDropdown/InputSearchDropdown.story.js +0 -66
  136. package/lib/components/material-ui/InputSearchDropdown/index.js +0 -8
  137. package/lib/components/material-ui/InputTime/InputTime.js +0 -82
  138. package/lib/components/material-ui/InputTime/InputTime.story.js +0 -53
  139. package/lib/components/material-ui/InputTime/index.js +0 -8
  140. package/lib/components/material-ui/Modal/Modal.js +0 -57
  141. package/lib/components/material-ui/Modal/Modal.story.js +0 -83
  142. package/lib/components/material-ui/Modal/index.js +0 -8
  143. package/lib/services/Select.service.d.ts +0 -5
  144. package/lib/services/Select.service.js +0 -67
  145. package/lib/stories/0-Inputs.stories.d.ts +0 -17
  146. package/lib/stories/0-Inputs.stories.js +0 -38
  147. package/lib/types/Component.types.js +0 -2
  148. package/lib/types/Internal.types.js +0 -2
  149. package/lib/types/index.js +0 -13
@@ -1,119 +0,0 @@
1
- "use strict";
2
- var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
- if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
- return cooked;
5
- };
6
- var __importDefault = (this && this.__importDefault) || function (mod) {
7
- return (mod && mod.__esModule) ? mod : { "default": mod };
8
- };
9
- Object.defineProperty(exports, "__esModule", { value: true });
10
- /** @jsxRuntime classic */
11
- /** @jsx jsx */
12
- var react_1 = require("@emotion/react");
13
- var react_2 = require("react");
14
- var MessageItem_1 = __importDefault(require("./MessageItem"));
15
- var lodash_1 = require("lodash");
16
- var material_1 = require("@mui/material");
17
- function MessageThread(_a) {
18
- var _b;
19
- var userId = _a.userId, messages = _a.messages, inputHeight = _a.inputHeight, hasNextPage = _a.hasNextPage, fetchNextPage = _a.fetchNextPage, isLoading = _a.isLoading, isFetching = _a.isFetching, isSubmitting = _a.isSubmitting, colors = _a.colors;
20
- var isInitialized = (0, react_2.useRef)(false);
21
- var isScrollLoad = (0, react_2.useRef)(false);
22
- var hasSubmitted = (0, react_2.useRef)(false);
23
- var prevScrollTop = (0, react_2.useRef)(null);
24
- var prevScrollHeight = (0, react_2.useRef)(null);
25
- var shouldScrollToPrevPosition = (0, react_2.useRef)(false);
26
- var scrollParent = (0, react_2.useRef)(null);
27
- var handleScrollEvent = (0, react_2.useCallback)((0, lodash_1.debounce)(function (evt) {
28
- var parent = evt.target;
29
- if (parent.scrollTop === 0 && hasNextPage && fetchNextPage && !isLoading && !isFetching) {
30
- isScrollLoad.current = true;
31
- prevScrollHeight.current = parent.scrollHeight;
32
- fetchNextPage();
33
- }
34
- }, 300), [hasNextPage, fetchNextPage, isLoading, isFetching]);
35
- (0, react_2.useEffect)(function () {
36
- if (isSubmitting) {
37
- hasSubmitted.current = true;
38
- }
39
- }, [isSubmitting]);
40
- // This will handle the initial loading of messages, then scroll to bottom
41
- (0, react_2.useEffect)(function () {
42
- if (!isInitialized.current && !isFetching && scrollParent.current) {
43
- var _a = scrollParent.current, clientHeight = _a.clientHeight, scrollHeight = _a.scrollHeight;
44
- if (clientHeight >= scrollHeight && hasNextPage && fetchNextPage) {
45
- fetchNextPage();
46
- return;
47
- }
48
- isInitialized.current = true;
49
- scrollParent.current.scrollTo(0, scrollHeight - clientHeight);
50
- }
51
- }, [isFetching, isInitialized.current, hasNextPage, fetchNextPage]);
52
- // Sets up the scroll event listener
53
- (0, react_2.useEffect)(function () {
54
- if (scrollParent.current) {
55
- scrollParent.current.addEventListener('scroll', handleScrollEvent);
56
- }
57
- return function () {
58
- if (scrollParent.current) {
59
- scrollParent.current.removeEventListener('scroll', handleScrollEvent);
60
- }
61
- };
62
- }, [scrollParent.current, hasNextPage, fetchNextPage, isLoading, isFetching]);
63
- // Handles the scroll position adjustment after fetching the next page
64
- (0, react_2.useEffect)(function () {
65
- if (!isFetching &&
66
- isInitialized.current &&
67
- scrollParent.current &&
68
- isScrollLoad.current &&
69
- prevScrollHeight.current &&
70
- scrollParent.current.scrollHeight !== prevScrollHeight.current) {
71
- var delta = scrollParent.current.scrollHeight - prevScrollHeight.current;
72
- scrollParent.current.scrollTo(0, delta);
73
- isScrollLoad.current = false;
74
- prevScrollHeight.current = 0;
75
- }
76
- }, [isFetching, prevScrollHeight.current]);
77
- // Manages scroll position for data changes that are triggered from anything other than the scroll event
78
- (0, react_2.useEffect)(function () {
79
- var _a;
80
- if (scrollParent.current && !isScrollLoad.current && isInitialized.current) {
81
- var _b = scrollParent.current, scrollHeight = _b.scrollHeight, scrollTop = _b.scrollTop, clientHeight = _b.clientHeight;
82
- if (isFetching) {
83
- // track the current position
84
- prevScrollHeight.current = scrollHeight;
85
- prevScrollTop.current = scrollTop;
86
- var distanceFromBottom = scrollHeight - scrollTop - clientHeight;
87
- if (!isSubmitting && distanceFromBottom > 200) {
88
- shouldScrollToPrevPosition.current = true;
89
- }
90
- }
91
- else {
92
- // init to scroll to bottom delta
93
- var delta = scrollHeight - clientHeight;
94
- if (hasSubmitted.current) {
95
- // scroll to bottom if this was triggered by the current user's sent message
96
- (_a = scrollParent.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, delta);
97
- }
98
- else if (!isFetching && prevScrollHeight.current !== null && prevScrollTop.current !== null) {
99
- if (shouldScrollToPrevPosition.current) {
100
- delta = prevScrollTop.current;
101
- }
102
- scrollParent.current.scrollTo(0, delta);
103
- }
104
- // clean up
105
- prevScrollHeight.current = null;
106
- prevScrollTop.current = null;
107
- hasSubmitted.current = false;
108
- shouldScrollToPrevPosition.current = false;
109
- }
110
- }
111
- }, [isFetching, (_b = scrollParent.current) === null || _b === void 0 ? void 0 : _b.scrollHeight]);
112
- return ((0, react_1.jsx)("div", { ref: scrollParent, css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n box-sizing: border-box;\n height: calc(100% - ", "px);\n width: 100%;\n padding: 0.5rem 1rem;\n overflow-y: auto;\n "], ["\n box-sizing: border-box;\n height: calc(100% - ", "px);\n width: 100%;\n padding: 0.5rem 1rem;\n overflow-y: auto;\n "])), inputHeight) },
113
- (0, react_1.jsx)("div", { css: (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column-reverse;\n justify-content: flex-start;\n align-items: flex-start;\n "], ["\n display: flex;\n flex-direction: column-reverse;\n justify-content: flex-start;\n align-items: flex-start;\n "]))) },
114
- messages.map(function (message) { return ((0, react_1.jsx)(MessageItem_1.default, { key: "" + message.id, message: message, userId: userId, colors: colors })); }),
115
- hasNextPage && ((0, react_1.jsx)("div", { key: "loader", css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 100%;\n margin: 0.5rem 0;\n height: auto;\n display: flex;\n justify-content: center;\n align-items: center;\n\n && {\n visibility: ", ";\n }\n "], ["\n width: 100%;\n margin: 0.5rem 0;\n height: auto;\n display: flex;\n justify-content: center;\n align-items: center;\n\n && {\n visibility: ", ";\n }\n "])), isFetching && isScrollLoad ? 'visible' : 'hidden') },
116
- (0, react_1.jsx)(material_1.CircularProgress, { size: "1.5rem", disableShrink: true }))))));
117
- }
118
- exports.default = MessageThread;
119
- var templateObject_1, templateObject_2, templateObject_3;
@@ -1 +0,0 @@
1
- export { default } from './ChatInterface';
@@ -1,8 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.default = void 0;
7
- var ChatInterface_1 = require("./ChatInterface");
8
- Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ChatInterface_1).default; } });
@@ -1,86 +0,0 @@
1
- "use strict";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
- var __rest = (this && this.__rest) || function (s, e) {
14
- var t = {};
15
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
16
- t[p] = s[p];
17
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
18
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
19
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
20
- t[p[i]] = s[p[i]];
21
- }
22
- return t;
23
- };
24
- var __read = (this && this.__read) || function (o, n) {
25
- var m = typeof Symbol === "function" && o[Symbol.iterator];
26
- if (!m) return o;
27
- var i = m.call(o), r, ar = [], e;
28
- try {
29
- while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
30
- }
31
- catch (error) { e = { error: error }; }
32
- finally {
33
- try {
34
- if (r && !r.done && (m = i["return"])) m.call(i);
35
- }
36
- finally { if (e) throw e.error; }
37
- }
38
- return ar;
39
- };
40
- var __importDefault = (this && this.__importDefault) || function (mod) {
41
- return (mod && mod.__esModule) ? mod : { "default": mod };
42
- };
43
- Object.defineProperty(exports, "__esModule", { value: true });
44
- /** @jsxRuntime classic */
45
- /** @jsx jsx */
46
- var react_1 = require("@emotion/react");
47
- var lodash_1 = require("lodash");
48
- var react_2 = require("react");
49
- var react_color_palette_1 = require("react-color-palette");
50
- var material_1 = require("@mui/material");
51
- var styles_1 = require("./styles");
52
- var InputGroup_1 = __importDefault(require("../InputGroup/InputGroup"));
53
- function ColorPicker(_a) {
54
- var name = _a.name, value = _a.value, onChange = _a.onChange, restOfProps = __rest(_a, ["name", "value", "onChange"]);
55
- var _b = __read((0, react_2.useState)(null), 2), anchorEl = _b[0], setAnchorEl = _b[1];
56
- var _c = __read((0, react_color_palette_1.useColor)('hex', value || '#000'), 2), color = _c[0], setColor = _c[1];
57
- var id = (0, react_2.useMemo)(function () { return "color-picker-popover-" + (0, lodash_1.random)(0, 9999999); }, []);
58
- var open = !!anchorEl;
59
- (0, react_2.useEffect)(function () {
60
- if (value && value != color.hex) {
61
- setColor((0, react_color_palette_1.toColor)('hex', value));
62
- }
63
- }, [value, setColor]);
64
- var debouncedOnChange = (0, react_2.useCallback)((0, lodash_1.debounce)(function (value) {
65
- if (onChange) {
66
- // @ts-ignore
67
- onChange({ target: { name: name, value: value } });
68
- }
69
- }, 300), [onChange, name]);
70
- function handleColorChange(color) {
71
- setColor(color);
72
- debouncedOnChange(color.hex);
73
- }
74
- return ((0, react_1.jsx)(react_2.Fragment, null,
75
- (0, react_1.jsx)(InputGroup_1.default, __assign({}, restOfProps, { "area-describedby": id, onClick: function (evt) {
76
- setAnchorEl(evt.currentTarget);
77
- }, onFocus: function (evt) {
78
- setAnchorEl(evt.currentTarget);
79
- }, value: color.hex, onChange: onChange })),
80
- (0, react_1.jsx)(material_1.Popover, { id: id, open: open, anchorEl: anchorEl, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, disableAutoFocus: true, disableEnforceFocus: true, onClose: function () { return setAnchorEl(null); } },
81
- (0, react_1.jsx)("div", { css: styles_1.colorPaletteStyles },
82
- (0, react_1.jsx)(react_color_palette_1.ColorPicker, { width: 280, height: 200, color: color,
83
- // @ts-ignore
84
- onChange: handleColorChange, hideHSV: true, hideRGB: true, alpha: false })))));
85
- }
86
- exports.default = ColorPicker;
@@ -1,47 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
5
- }) : (function(o, m, k, k2) {
6
- if (k2 === undefined) k2 = k;
7
- o[k2] = m[k];
8
- }));
9
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
10
- Object.defineProperty(o, "default", { enumerable: true, value: v });
11
- }) : function(o, v) {
12
- o["default"] = v;
13
- });
14
- var __importStar = (this && this.__importStar) || function (mod) {
15
- if (mod && mod.__esModule) return mod;
16
- var result = {};
17
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
18
- __setModuleDefault(result, mod);
19
- return result;
20
- };
21
- var __read = (this && this.__read) || function (o, n) {
22
- var m = typeof Symbol === "function" && o[Symbol.iterator];
23
- if (!m) return o;
24
- var i = m.call(o), r, ar = [], e;
25
- try {
26
- while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
27
- }
28
- catch (error) { e = { error: error }; }
29
- finally {
30
- try {
31
- if (r && !r.done && (m = i["return"])) m.call(i);
32
- }
33
- finally { if (e) throw e.error; }
34
- }
35
- return ar;
36
- };
37
- var __importDefault = (this && this.__importDefault) || function (mod) {
38
- return (mod && mod.__esModule) ? mod : { "default": mod };
39
- };
40
- Object.defineProperty(exports, "__esModule", { value: true });
41
- var react_1 = __importStar(require("react"));
42
- var ColorPicker_1 = __importDefault(require("./ColorPicker"));
43
- function ColorPicker() {
44
- var _a = __read((0, react_1.useState)(null), 2), value = _a[0], setValue = _a[1];
45
- return react_1.default.createElement(ColorPicker_1.default, { label: "Color Picker", value: value, onChange: function (evt) { return setValue(evt.target.value); } });
46
- }
47
- exports.default = ColorPicker;
@@ -1,8 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.default = void 0;
7
- var ColorPicker_1 = require("./ColorPicker");
8
- Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ColorPicker_1).default; } });
@@ -1,24 +0,0 @@
1
- "use strict";
2
- var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
- if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
- return cooked;
5
- };
6
- Object.defineProperty(exports, "__esModule", { value: true });
7
- exports.colorPaletteStyles = void 0;
8
- var react_1 = require("@emotion/react");
9
- var Colors = {
10
- light: {
11
- background: '#ffffff',
12
- inputText: '#111111',
13
- inputBorder: 'rgba(0, 0, 0, 0.1)',
14
- inputLabel: '#717171',
15
- },
16
- dark: {
17
- background: '#181818',
18
- inputText: '#f3f3f3',
19
- inputBorder: 'rgba(255, 255, 255, 0.1)',
20
- inputLabel: '#999999',
21
- },
22
- };
23
- exports.colorPaletteStyles = (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .rcp {\n display: flex;\n flex-direction: column;\n align-items: center;\n border-radius: 10px;\n box-sizing: border-box;\n }\n\n .rcp.rcp-light {\n background-color: ", ";\n }\n\n .rcp.rcp-dark {\n background-color: ", ";\n }\n\n .rcp-body {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 20px;\n width: 100%;\n padding: 20px;\n }\n\n .rcp-saturation {\n position: relative;\n width: 100%;\n background-image: linear-gradient(transparent, black), linear-gradient(to right, white, transparent);\n border-radius: 10px 10px 0 0;\n user-select: none;\n }\n\n .rcp-saturation-cursor {\n position: absolute;\n width: 20px;\n height: 20px;\n border: 2px solid #ffffff;\n border-radius: 50%;\n box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15);\n box-sizing: border-box;\n transform: translate(-10px, -10px);\n }\n\n .rcp-hue {\n position: relative;\n width: 100%;\n height: 12px;\n background-image: linear-gradient(\n to right,\n rgb(255, 0, 0),\n rgb(255, 255, 0),\n rgb(0, 255, 0),\n rgb(0, 255, 255),\n rgb(0, 0, 255),\n rgb(255, 0, 255),\n rgb(255, 0, 0)\n );\n border-radius: 10px;\n user-select: none;\n }\n\n .rcp-hue-cursor {\n position: absolute;\n width: 20px;\n height: 20px;\n border: 2px solid #ffffff;\n border-radius: 50%;\n box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 0.5px;\n box-sizing: border-box;\n transform: translate(-10px, -4px);\n }\n\n .rcp-alpha {\n position: relative;\n width: 100%;\n height: 12px;\n border-radius: 10px;\n user-select: none;\n }\n\n .rcp-alpha-cursor {\n position: absolute;\n width: 20px;\n height: 20px;\n border: 2px solid #ffffff;\n border-radius: 50%;\n box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 0.5px;\n box-sizing: border-box;\n transform: translate(-10px, -4px);\n }\n\n .rcp-fields {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 10px;\n width: 100%;\n }\n\n .rcp-fields-element {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 5px;\n width: 100%;\n }\n\n .hex-element {\n grid-row: 1;\n }\n\n .hex-element:nth-of-type(3n) {\n grid-column: 1 / -1;\n }\n\n .rcp-fields-element-input {\n width: 100%;\n font-size: 14px;\n font-weight: 600;\n text-align: center;\n background: none;\n border: 2px solid;\n border-radius: 5px;\n box-sizing: border-box;\n outline: none;\n padding: 10px;\n }\n\n .rcp-light .rcp-fields-element-input {\n color: ", ";\n border-color: ", ";\n }\n\n .rcp-dark .rcp-fields-element-input {\n color: ", ";\n border-color: ", ";\n }\n\n .rcp-fields-element-label {\n font-size: 14px;\n font-weight: 600;\n text-transform: uppercase;\n }\n\n .rcp-light .rcp-fields-element-label {\n color: ", ";\n }\n\n .rcp-dark .rcp-fields-element-label {\n color: ", ";\n }\n"], ["\n .rcp {\n display: flex;\n flex-direction: column;\n align-items: center;\n border-radius: 10px;\n box-sizing: border-box;\n }\n\n .rcp.rcp-light {\n background-color: ", ";\n }\n\n .rcp.rcp-dark {\n background-color: ", ";\n }\n\n .rcp-body {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 20px;\n width: 100%;\n padding: 20px;\n }\n\n .rcp-saturation {\n position: relative;\n width: 100%;\n background-image: linear-gradient(transparent, black), linear-gradient(to right, white, transparent);\n border-radius: 10px 10px 0 0;\n user-select: none;\n }\n\n .rcp-saturation-cursor {\n position: absolute;\n width: 20px;\n height: 20px;\n border: 2px solid #ffffff;\n border-radius: 50%;\n box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15);\n box-sizing: border-box;\n transform: translate(-10px, -10px);\n }\n\n .rcp-hue {\n position: relative;\n width: 100%;\n height: 12px;\n background-image: linear-gradient(\n to right,\n rgb(255, 0, 0),\n rgb(255, 255, 0),\n rgb(0, 255, 0),\n rgb(0, 255, 255),\n rgb(0, 0, 255),\n rgb(255, 0, 255),\n rgb(255, 0, 0)\n );\n border-radius: 10px;\n user-select: none;\n }\n\n .rcp-hue-cursor {\n position: absolute;\n width: 20px;\n height: 20px;\n border: 2px solid #ffffff;\n border-radius: 50%;\n box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 0.5px;\n box-sizing: border-box;\n transform: translate(-10px, -4px);\n }\n\n .rcp-alpha {\n position: relative;\n width: 100%;\n height: 12px;\n border-radius: 10px;\n user-select: none;\n }\n\n .rcp-alpha-cursor {\n position: absolute;\n width: 20px;\n height: 20px;\n border: 2px solid #ffffff;\n border-radius: 50%;\n box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 0.5px;\n box-sizing: border-box;\n transform: translate(-10px, -4px);\n }\n\n .rcp-fields {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 10px;\n width: 100%;\n }\n\n .rcp-fields-element {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 5px;\n width: 100%;\n }\n\n .hex-element {\n grid-row: 1;\n }\n\n .hex-element:nth-of-type(3n) {\n grid-column: 1 / -1;\n }\n\n .rcp-fields-element-input {\n width: 100%;\n font-size: 14px;\n font-weight: 600;\n text-align: center;\n background: none;\n border: 2px solid;\n border-radius: 5px;\n box-sizing: border-box;\n outline: none;\n padding: 10px;\n }\n\n .rcp-light .rcp-fields-element-input {\n color: ", ";\n border-color: ", ";\n }\n\n .rcp-dark .rcp-fields-element-input {\n color: ", ";\n border-color: ", ";\n }\n\n .rcp-fields-element-label {\n font-size: 14px;\n font-weight: 600;\n text-transform: uppercase;\n }\n\n .rcp-light .rcp-fields-element-label {\n color: ", ";\n }\n\n .rcp-dark .rcp-fields-element-label {\n color: ", ";\n }\n"])), Colors.light.background, Colors.dark.background, Colors.light.inputText, Colors.light.inputBorder, Colors.dark.inputText, Colors.dark.inputBorder, Colors.light.inputLabel, Colors.dark.inputLabel);
24
- var templateObject_1;
@@ -1,12 +0,0 @@
1
- /** @jsxRuntime classic */
2
- /** @jsx jsx */
3
- import { jsx } from '@emotion/react';
4
- import { Filters, UseFiltersInstanceProps } from 'react-table';
5
- import { SimpleMap } from '../../../types/Internal.types';
6
- interface Props<D extends object> {
7
- columnNameById: SimpleMap<string>;
8
- filters: Filters<D>;
9
- setFilter: UseFiltersInstanceProps<D>['setFilter'];
10
- }
11
- export default function AppliedFilters<D extends object>({ columnNameById, filters, setFilter }: Props<D>): jsx.JSX.Element | null;
12
- export {};
@@ -1,26 +0,0 @@
1
- "use strict";
2
- var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
- if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
- return cooked;
5
- };
6
- Object.defineProperty(exports, "__esModule", { value: true });
7
- /** @jsxRuntime classic */
8
- /** @jsx jsx */
9
- var react_1 = require("@emotion/react");
10
- var material_1 = require("@mui/material");
11
- var SingleSelectFilter_1 = require("./FilterTool/Filters/SingleSelectFilter");
12
- var PADDING = 24;
13
- function AppliedFilters(_a) {
14
- var columnNameById = _a.columnNameById, filters = _a.filters, setFilter = _a.setFilter;
15
- if (!filters.length) {
16
- return null;
17
- }
18
- return ((0, react_1.jsx)(material_1.Stack, { direction: "row", overflow: "none", css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: calc(100% - ", "px);\n padding: 8px ", "px;\n flex-wrap: wrap;\n gap: 0.25rem 0.25rem;\n "], ["\n width: calc(100% - ", "px);\n padding: 8px ", "px;\n flex-wrap: wrap;\n gap: 0.25rem 0.25rem;\n "])), PADDING * 2, PADDING) }, filters
19
- .filter(function (filter) {
20
- return (Array.isArray(filter.value) && !!filter.value.length) ||
21
- (!Array.isArray(filter.value) && filter.value != null);
22
- })
23
- .map(function (filter) { return ((0, react_1.jsx)(material_1.Chip, { key: filter.id, label: columnNameById[filter.id] + ": " + (filter.value === '' ? SingleSelectFilter_1.BLANK_VALUE_LABEL : filter.value), onDelete: function () { return setFilter(filter.id, null); } })); })));
24
- }
25
- exports.default = AppliedFilters;
26
- var templateObject_1;
@@ -1,42 +0,0 @@
1
- "use strict";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
- var __importDefault = (this && this.__importDefault) || function (mod) {
14
- return (mod && mod.__esModule) ? mod : { "default": mod };
15
- };
16
- Object.defineProperty(exports, "__esModule", { value: true });
17
- exports.Data = exports.Columns = void 0;
18
- var faker_1 = __importDefault(require("faker"));
19
- var DataTable_1 = require("./DataTable");
20
- exports.Columns = [
21
- {
22
- id: 'fullName',
23
- Header: 'Full Name',
24
- columns: [
25
- __assign({ Header: 'First Name', accessor: 'firstName' }, (0, DataTable_1.getColumnFilterConfig)('text')),
26
- __assign({ Header: 'Last Name', accessor: 'lastName', filterName: 'Custom LN' }, (0, DataTable_1.getColumnFilterConfig)('multi-select')),
27
- ],
28
- },
29
- __assign(__assign({ Header: 'Age', accessor: 'age', sortType: 'number', disableFilters: false }, (0, DataTable_1.getColumnFilterConfig)('range')), { width: 100 }),
30
- __assign({ Header: 'Occupation', accessor: 'occupation', disableFilters: false }, (0, DataTable_1.getColumnFilterConfig)('select')),
31
- __assign({ Header: 'Company', id: 'company', accessor: function (originalRow) { return originalRow.company.name; }, disableFilters: false }, (0, DataTable_1.getColumnFilterConfig)('select')),
32
- ];
33
- exports.Data = new Array(20).fill(null).map(function () { return ({
34
- id: faker_1.default.datatype.uuid(),
35
- firstName: faker_1.default.name.firstName(),
36
- lastName: faker_1.default.name.lastName(),
37
- age: faker_1.default.datatype.number(60),
38
- occupation: faker_1.default.name.jobTitle(),
39
- company: {
40
- name: faker_1.default.company.companyName(),
41
- },
42
- }); });