@quillsql/react 1.6.9 → 1.7.1
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.
- package/lib/AddToDashboardModal.js +249 -369
- package/lib/AddToDashboardModal.js.map +1 -1
- package/lib/BarList.js +92 -109
- package/lib/BarList.js.map +1 -1
- package/lib/Chart.js +378 -491
- package/lib/Chart.js.map +1 -1
- package/lib/Context.d.ts +3 -3
- package/lib/Context.js +94 -96
- package/lib/Context.js.map +1 -1
- package/lib/Dashboard.js +200 -217
- package/lib/Dashboard.js.map +1 -1
- package/lib/DateRangePicker/Calendar.js +87 -91
- package/lib/DateRangePicker/Calendar.js.map +1 -1
- package/lib/DateRangePicker/DateRangePicker.js +70 -68
- package/lib/DateRangePicker/DateRangePicker.js.map +1 -1
- package/lib/DateRangePicker/DateRangePickerButton.js +46 -57
- package/lib/DateRangePicker/DateRangePickerButton.js.map +1 -1
- package/lib/DateRangePicker/dateRangePickerUtils.js +105 -99
- package/lib/DateRangePicker/dateRangePickerUtils.js.map +1 -1
- package/lib/DateRangePicker/index.js +8 -1
- package/lib/DateRangePicker/index.js.map +1 -1
- package/lib/PieChart.js +221 -225
- package/lib/PieChart.js.map +1 -1
- package/lib/QuillProvider.d.ts +2 -1
- package/lib/QuillProvider.js +8 -18
- package/lib/QuillProvider.js.map +1 -1
- package/lib/ReportBuilder.d.ts +1 -1
- package/lib/ReportBuilder.js +430 -526
- package/lib/ReportBuilder.js.map +1 -1
- package/lib/SQLEditor.js +183 -268
- package/lib/SQLEditor.js.map +1 -1
- package/lib/Table.js +213 -256
- package/lib/Table.js.map +1 -1
- package/lib/TableChart.js +76 -75
- package/lib/TableChart.js.map +1 -1
- package/lib/assets/ArrowDownHeadIcon.js +5 -28
- package/lib/assets/ArrowDownHeadIcon.js.map +1 -1
- package/lib/assets/ArrowDownIcon.js +5 -28
- package/lib/assets/ArrowDownIcon.js.map +1 -1
- package/lib/assets/ArrowDownRightIcon.js +5 -28
- package/lib/assets/ArrowDownRightIcon.js.map +1 -1
- package/lib/assets/ArrowLeftHeadIcon.js +5 -28
- package/lib/assets/ArrowLeftHeadIcon.js.map +1 -1
- package/lib/assets/ArrowRightHeadIcon.js +5 -28
- package/lib/assets/ArrowRightHeadIcon.js.map +1 -1
- package/lib/assets/ArrowRightIcon.js +5 -28
- package/lib/assets/ArrowRightIcon.js.map +1 -1
- package/lib/assets/ArrowUpHeadIcon.js +5 -28
- package/lib/assets/ArrowUpHeadIcon.js.map +1 -1
- package/lib/assets/ArrowUpIcon.js +5 -28
- package/lib/assets/ArrowUpIcon.js.map +1 -1
- package/lib/assets/ArrowUpRightIcon.js +5 -28
- package/lib/assets/ArrowUpRightIcon.js.map +1 -1
- package/lib/assets/CalendarIcon.js +5 -28
- package/lib/assets/CalendarIcon.js.map +1 -1
- package/lib/assets/DoubleArrowLeftHeadIcon.js +5 -28
- package/lib/assets/DoubleArrowLeftHeadIcon.js.map +1 -1
- package/lib/assets/DoubleArrowRightHeadIcon.js +5 -28
- package/lib/assets/DoubleArrowRightHeadIcon.js.map +1 -1
- package/lib/assets/ExclamationFilledIcon.js +5 -28
- package/lib/assets/ExclamationFilledIcon.js.map +1 -1
- package/lib/assets/LoadingSpinner.js +5 -28
- package/lib/assets/LoadingSpinner.js.map +1 -1
- package/lib/assets/SearchIcon.js +5 -28
- package/lib/assets/SearchIcon.js.map +1 -1
- package/lib/assets/XCircleIcon.js +5 -28
- package/lib/assets/XCircleIcon.js.map +1 -1
- package/lib/assets/index.js +38 -16
- package/lib/assets/index.js.map +1 -1
- package/lib/components/BigModal/BigModal.js +45 -43
- package/lib/components/BigModal/BigModal.js.map +1 -1
- package/lib/components/Dropdown/Dropdown.js +57 -53
- package/lib/components/Dropdown/Dropdown.js.map +1 -1
- package/lib/components/Dropdown/DropdownItem.js +43 -40
- package/lib/components/Dropdown/DropdownItem.js.map +1 -1
- package/lib/components/Dropdown/index.js +10 -2
- package/lib/components/Dropdown/index.js.map +1 -1
- package/lib/components/Modal/Modal.js +45 -43
- package/lib/components/Modal/Modal.js.map +1 -1
- package/lib/components/Modal/index.js +8 -1
- package/lib/components/Modal/index.js.map +1 -1
- package/lib/components/selectUtils.js +20 -15
- package/lib/components/selectUtils.js.map +1 -1
- package/lib/contexts/BaseColorContext.js +5 -3
- package/lib/contexts/BaseColorContext.js.map +1 -1
- package/lib/contexts/HoveredValueContext.js +5 -3
- package/lib/contexts/HoveredValueContext.js.map +1 -1
- package/lib/contexts/RootStylesContext.js +5 -3
- package/lib/contexts/RootStylesContext.js.map +1 -1
- package/lib/contexts/SelectedValueContext.js +5 -3
- package/lib/contexts/SelectedValueContext.js.map +1 -1
- package/lib/contexts/index.js +14 -4
- package/lib/contexts/index.js.map +1 -1
- package/lib/hooks/index.js +14 -4
- package/lib/hooks/index.js.map +1 -1
- package/lib/hooks/useInternalState.js +9 -7
- package/lib/hooks/useInternalState.js.map +1 -1
- package/lib/hooks/useOnClickOutside.js +8 -6
- package/lib/hooks/useOnClickOutside.js.map +1 -1
- package/lib/hooks/useOnWindowResize.js +9 -7
- package/lib/hooks/useOnWindowResize.js.map +1 -1
- package/lib/hooks/useQuill.js +60 -111
- package/lib/hooks/useQuill.js.map +1 -1
- package/lib/hooks/useSelectOnKeyDown.js +17 -15
- package/lib/hooks/useSelectOnKeyDown.js.map +1 -1
- package/lib/index.js +22 -8
- package/lib/index.js.map +1 -1
- package/package.json +9 -2
- package/rollup.config.ts +21 -0
- package/src/AddToDashboardModal.tsx +10 -3
- package/src/Chart.tsx +66 -195
- package/src/Context.tsx +10 -27
- package/src/Dashboard.tsx +40 -23
- package/src/QuillProvider.tsx +3 -0
- package/src/ReportBuilder.tsx +10 -5
- package/src/SQLEditor.tsx +9 -4
- package/src/Table.tsx +0 -1
- package/src/hooks/useQuill.ts +2 -1
- package/lib/AddToDashboardButton.d.ts +0 -1
- package/lib/AddToDashboardButton.js +0 -2
- package/lib/AddToDashboardButton.js.map +0 -1
- package/lib/AppContext.d.ts +0 -29
- package/lib/AppContext.js +0 -94
- package/lib/AppContext.js.map +0 -1
- package/lib/Button.d.ts +0 -26
- package/lib/Button.js +0 -151
- package/lib/Button.js.map +0 -1
- package/lib/ContextProvider.d.ts +0 -28
- package/lib/ContextProvider.js +0 -93
- package/lib/ContextProvider.js.map +0 -1
- package/lib/DateRangePicker.d.ts +0 -32
- package/lib/DateRangePicker.js +0 -105
- package/lib/DateRangePicker.js.map +0 -1
- package/lib/Dialog.d.ts +0 -68
- package/lib/Dialog.js +0 -407
- package/lib/Dialog.js.map +0 -1
- package/lib/Portal.d.ts +0 -32
- package/lib/Portal.js +0 -171
- package/lib/Portal.js.map +0 -1
- package/lib/Props.d.ts +0 -0
- package/lib/Props.js +0 -2
- package/lib/Props.js.map +0 -1
- package/lib/components/BigModal/Modal.d.ts +0 -14
- package/lib/components/BigModal/Modal.js +0 -109
- package/lib/components/BigModal/Modal.js.map +0 -1
- package/lib/components/Modal/Dropdown/Dropdown.d.ts +0 -12
- package/lib/components/Modal/Dropdown/Dropdown.js +0 -52
- package/lib/components/Modal/Dropdown/Dropdown.js.map +0 -1
- package/lib/components/Modal/Dropdown/DropdownItem.d.ts +0 -8
- package/lib/components/Modal/Dropdown/DropdownItem.js +0 -51
- package/lib/components/Modal/Dropdown/DropdownItem.js.map +0 -1
- package/lib/components/Modal/Dropdown/index.d.ts +0 -2
- package/lib/components/Modal/Dropdown/index.js +0 -3
- package/lib/components/Modal/Dropdown/index.js.map +0 -1
- package/lib/hooks/useSyncRefs.d.ts +0 -5
- package/lib/hooks/useSyncRefs.js +0 -38
- package/lib/hooks/useSyncRefs.js.map +0 -1
- package/lib/lib/colorClassNames.d.ts +0 -19
- package/lib/lib/colorClassNames.js +0 -3175
- package/lib/lib/colorClassNames.js.map +0 -1
- package/lib/lib/constants.d.ts +0 -16
- package/lib/lib/constants.js +0 -47
- package/lib/lib/constants.js.map +0 -1
- package/lib/lib/font.d.ts +0 -13
- package/lib/lib/font.js +0 -14
- package/lib/lib/font.js.map +0 -1
- package/lib/lib/hexColors.d.ts +0 -3
- package/lib/lib/hexColors.js +0 -29
- package/lib/lib/hexColors.js.map +0 -1
- package/lib/lib/index.d.ts +0 -3
- package/lib/lib/index.js +0 -4
- package/lib/lib/index.js.map +0 -1
- package/lib/lib/inputTypes.d.ts +0 -20
- package/lib/lib/inputTypes.js +0 -56
- package/lib/lib/inputTypes.js.map +0 -1
- package/lib/lib/shape.d.ts +0 -73
- package/lib/lib/shape.js +0 -74
- package/lib/lib/shape.js.map +0 -1
- package/lib/lib/sizing.d.ts +0 -46
- package/lib/lib/sizing.js +0 -43
- package/lib/lib/sizing.js.map +0 -1
- package/lib/lib/spacing.d.ts +0 -264
- package/lib/lib/spacing.js +0 -265
- package/lib/lib/spacing.js.map +0 -1
- package/lib/lib/theme.d.ts +0 -22
- package/lib/lib/theme.js +0 -46
- package/lib/lib/theme.js.map +0 -1
- package/lib/lib/utils.d.ts +0 -9
- package/lib/lib/utils.js +0 -40
- package/lib/lib/utils.js.map +0 -1
- package/lib/styles.css +0 -15795
- package/lib/types/Props.d.ts +0 -0
- package/lib/types/Props.js +0 -2
- package/lib/types/Props.js.map +0 -1
- package/lib/types.d.ts +0 -27
- package/lib/types.js +0 -6
- package/lib/types.js.map +0 -1
- package/src/lib/font.ts +0 -14
- package/src/lib/index.ts +0 -3
- package/src/lib/inputTypes.ts +0 -81
- package/src/lib/utils.tsx +0 -46
|
@@ -1,71 +1,73 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
22
24
|
};
|
|
23
|
-
|
|
25
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
24
27
|
/* eslint-disable react/display-name */
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
28
|
+
const react_1 = __importStar(require("react"));
|
|
29
|
+
const hooks_1 = require("../../hooks");
|
|
30
|
+
const lib_1 = require("../../lib");
|
|
31
|
+
const BigModal = react_1.default.forwardRef((props, ref) => {
|
|
32
|
+
const { showModal, setShowModal, parentRef, width, maxHeight = '18rem', children, className, theme, ...other } = props;
|
|
33
|
+
const [modalExceedsWindow, setModalExceedsWindow] = (0, react_1.useState)(false);
|
|
34
|
+
const modalRef = (0, react_1.useRef)(null);
|
|
35
|
+
const checkModalExceedsWindow = (0, react_1.useCallback)((modalWidth, windowWidth) => {
|
|
33
36
|
if (!parentRef.current) {
|
|
34
37
|
return false;
|
|
35
38
|
}
|
|
36
|
-
|
|
39
|
+
const modalBoundingRight = parentRef.current.getBoundingClientRect().left + modalWidth;
|
|
37
40
|
return windowWidth - modalBoundingRight < 0;
|
|
38
41
|
}, [parentRef]);
|
|
39
|
-
|
|
42
|
+
const getAbsoluteSpacing = () => {
|
|
40
43
|
return modalExceedsWindow ? '0' : '0';
|
|
41
44
|
};
|
|
42
|
-
useOnClickOutside(modalRef,
|
|
43
|
-
var _a;
|
|
45
|
+
(0, hooks_1.useOnClickOutside)(modalRef, e => {
|
|
44
46
|
// Exclude click on trigger button (e.g. Dropdown Button) from outside click handler
|
|
45
|
-
|
|
46
|
-
?
|
|
47
|
+
const isTriggerElem = parentRef
|
|
48
|
+
? parentRef.current?.contains(e.target)
|
|
47
49
|
: false;
|
|
48
50
|
if (!isTriggerElem) {
|
|
49
51
|
setShowModal(false);
|
|
50
52
|
}
|
|
51
53
|
});
|
|
52
54
|
// Execute only when modal is of absolute size
|
|
53
|
-
|
|
55
|
+
(0, react_1.useEffect)(() => {
|
|
54
56
|
if (width) {
|
|
55
57
|
setModalExceedsWindow(checkModalExceedsWindow(width, window.innerWidth));
|
|
56
58
|
}
|
|
57
59
|
}, [checkModalExceedsWindow, parentRef, width]);
|
|
58
|
-
|
|
60
|
+
(0, hooks_1.useOnWindowResize)(() => {
|
|
59
61
|
if (width) {
|
|
60
62
|
setModalExceedsWindow(checkModalExceedsWindow(width, window.innerWidth));
|
|
61
63
|
}
|
|
62
64
|
});
|
|
63
|
-
return showModal ? (
|
|
65
|
+
return showModal ? ((0, jsx_runtime_1.jsx)("div", { ref: (0, lib_1.mergeRefs)([modalRef, ref]), style: {
|
|
64
66
|
position: 'absolute',
|
|
65
67
|
zIndex: 10,
|
|
66
68
|
overflowY: 'auto',
|
|
67
|
-
backgroundColor:
|
|
68
|
-
borderColor:
|
|
69
|
+
backgroundColor: theme?.backgroundColor || 'white',
|
|
70
|
+
borderColor: theme?.borderColor || '#E5E7EB',
|
|
69
71
|
borderTopStyle: 'solid',
|
|
70
72
|
borderBottomStyle: 'solid',
|
|
71
73
|
borderLeftStyle: 'solid',
|
|
@@ -79,7 +81,7 @@ var BigModal = React.forwardRef(function (props, ref) {
|
|
|
79
81
|
top: '50%',
|
|
80
82
|
left: '50%',
|
|
81
83
|
transform: 'translate(-50%, -50%)',
|
|
82
|
-
}
|
|
84
|
+
}, ...other, children: children })) : null;
|
|
83
85
|
});
|
|
84
|
-
|
|
86
|
+
exports.default = BigModal;
|
|
85
87
|
//# sourceMappingURL=BigModal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BigModal.js","sourceRoot":"","sources":["../../../src/components/BigModal/BigModal.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"BigModal.js","sourceRoot":"","sources":["../../../src/components/BigModal/BigModal.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,54 +1,60 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
11
24
|
};
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
25
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
22
27
|
};
|
|
23
|
-
|
|
28
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
24
30
|
/* eslint-disable react/display-name */
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
31
|
+
const react_1 = __importStar(require("react"));
|
|
32
|
+
const contexts_1 = require("../../contexts");
|
|
33
|
+
const hooks_1 = require("../../hooks");
|
|
34
|
+
const assets_1 = require("../../assets");
|
|
35
|
+
const lib_1 = require("../../lib");
|
|
36
|
+
const selectUtils_1 = require("../selectUtils");
|
|
37
|
+
const Modal_1 = __importDefault(require("../Modal"));
|
|
38
|
+
const Dropdown = react_1.default.forwardRef((props, ref) => {
|
|
39
|
+
const { defaultValue, value, onValueChange, placeholder = 'Select...', disabled = false, icon, children, className, theme, ...other } = props;
|
|
40
|
+
const [selectedValue, setSelectedValue] = (0, hooks_1.useInternalState)(defaultValue, value);
|
|
41
|
+
const [isFocused, setIsFocused] = (0, react_1.useState)(false);
|
|
42
|
+
const dropdownRef = (0, react_1.useRef)(null);
|
|
43
|
+
const Icon = icon;
|
|
44
|
+
const valueToNameMapping = (0, selectUtils_1.constructValueToNameMapping)(children);
|
|
45
|
+
const optionValues = react_1.default.Children.map(children, (child) => child.props.value);
|
|
46
|
+
const handleValueChange = (value) => {
|
|
41
47
|
setSelectedValue(value);
|
|
42
48
|
setIsFocused(false);
|
|
43
|
-
onValueChange
|
|
49
|
+
onValueChange?.(value);
|
|
44
50
|
};
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
return (
|
|
51
|
+
const [hoveredValue, handleKeyDown] = (0, hooks_1.useSelectOnKeyDown)(handleValueChange, optionValues, isFocused, setIsFocused, selectedValue);
|
|
52
|
+
const hasSelection = (0, selectUtils_1.hasValue)(selectedValue);
|
|
53
|
+
return ((0, jsx_runtime_1.jsxs)("div", { ref: (0, lib_1.mergeRefs)([dropdownRef, ref]), onKeyDown: handleKeyDown, style: {
|
|
48
54
|
position: 'relative',
|
|
49
55
|
width: '100%',
|
|
50
56
|
minWidth: '10rem',
|
|
51
|
-
}
|
|
57
|
+
}, ...other, children: [(0, jsx_runtime_1.jsxs)("button", { style: {
|
|
52
58
|
display: 'flex',
|
|
53
59
|
justifyContent: 'space-between',
|
|
54
60
|
alignItems: 'center',
|
|
@@ -60,37 +66,35 @@ var Dropdown = React.forwardRef(function (props, ref) {
|
|
|
60
66
|
boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
|
|
61
67
|
cursor: 'pointer',
|
|
62
68
|
background: 'white',
|
|
63
|
-
}, type: "button", onClick:
|
|
69
|
+
}, type: "button", onClick: () => setIsFocused(!isFocused), disabled: disabled, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
|
|
64
70
|
display: 'flex',
|
|
65
71
|
justifyContent: 'start',
|
|
66
72
|
alignItems: 'center',
|
|
67
73
|
whiteSpace: 'nowrap',
|
|
68
74
|
overflow: 'hidden',
|
|
69
75
|
textOverflow: 'ellipsis',
|
|
70
|
-
}
|
|
76
|
+
}, children: [Icon ? ((0, jsx_runtime_1.jsx)(Icon, { style: {
|
|
71
77
|
flexShrink: 0,
|
|
72
78
|
height: '1.5rem',
|
|
73
79
|
width: '1.5rem',
|
|
74
|
-
color:
|
|
80
|
+
color: theme?.secondaryTextColor || '#6C727F',
|
|
75
81
|
marginRight: '1.5rem',
|
|
76
|
-
}, "aria-hidden": "true" })) : null,
|
|
82
|
+
}, "aria-hidden": "true" })) : null, (0, jsx_runtime_1.jsx)("p", { style: {
|
|
77
83
|
margin: 0,
|
|
78
84
|
fontSize: '0.875rem',
|
|
79
85
|
fontWeight: '500',
|
|
80
86
|
whiteSpace: 'nowrap',
|
|
81
87
|
overflow: 'hidden',
|
|
82
88
|
textOverflow: 'ellipsis',
|
|
83
|
-
}
|
|
89
|
+
}, children: selectedValue
|
|
84
90
|
? valueToNameMapping.get(selectedValue)
|
|
85
|
-
: placeholder })
|
|
91
|
+
: placeholder })] }), (0, jsx_runtime_1.jsx)(assets_1.ArrowDownHeadIcon, { style: {
|
|
86
92
|
flexShrink: 0,
|
|
87
93
|
height: '1.5rem',
|
|
88
94
|
width: '1.5rem',
|
|
89
95
|
marginRight: '-0.25rem',
|
|
90
|
-
color:
|
|
91
|
-
}, "aria-hidden": "true" })] })
|
|
92
|
-
return React.cloneElement(child);
|
|
93
|
-
}) })) })) }))] })));
|
|
96
|
+
color: theme?.secondaryTextColor || '#6C727F',
|
|
97
|
+
}, "aria-hidden": "true" })] }), (0, jsx_runtime_1.jsx)(Modal_1.default, { theme: theme, showModal: isFocused, setShowModal: setIsFocused, parentRef: dropdownRef, children: (0, jsx_runtime_1.jsx)(contexts_1.SelectedValueContext.Provider, { value: { selectedValue, handleValueChange }, children: (0, jsx_runtime_1.jsx)(contexts_1.HoveredValueContext.Provider, { value: { hoveredValue }, children: react_1.default.Children.map(children, (child) => react_1.default.cloneElement(child)) }) }) })] }));
|
|
94
98
|
});
|
|
95
|
-
|
|
99
|
+
exports.default = Dropdown;
|
|
96
100
|
//# sourceMappingURL=Dropdown.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,37 +1,40 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
22
24
|
};
|
|
23
|
-
|
|
25
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
24
27
|
/* eslint-disable react/display-name */
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
return (
|
|
28
|
+
const react_1 = __importStar(require("react"));
|
|
29
|
+
const contexts_1 = require("../../contexts");
|
|
30
|
+
const DropdownItem = react_1.default.forwardRef((props, ref) => {
|
|
31
|
+
const { value, text, icon, className, theme, lastItem, ...other } = props;
|
|
32
|
+
const { selectedValue, handleValueChange } = (0, react_1.useContext)(contexts_1.SelectedValueContext);
|
|
33
|
+
const { hoveredValue } = (0, react_1.useContext)(contexts_1.HoveredValueContext);
|
|
34
|
+
const isActive = selectedValue === value;
|
|
35
|
+
const isHovered = hoveredValue === value;
|
|
36
|
+
const Icon = icon ? icon : null;
|
|
37
|
+
return ((0, jsx_runtime_1.jsx)("button", { ref: ref, style: {
|
|
35
38
|
display: 'flex',
|
|
36
39
|
alignItems: 'center',
|
|
37
40
|
justifyContent: 'start',
|
|
@@ -42,21 +45,21 @@ var DropdownItem = React.forwardRef(function (props, ref) {
|
|
|
42
45
|
fontSize: '0.875rem',
|
|
43
46
|
borderStyle: 'solid',
|
|
44
47
|
borderBottomWidth: lastItem ? '0px' : '1px',
|
|
45
|
-
borderBottomColor:
|
|
46
|
-
background:
|
|
48
|
+
borderBottomColor: theme?.borderColor || '#E5E7EB',
|
|
49
|
+
background: theme?.backgroundColor || 'white',
|
|
47
50
|
borderTop: 'none',
|
|
48
51
|
borderRight: 'none',
|
|
49
52
|
borderLeft: 'none',
|
|
50
53
|
cursor: 'pointer',
|
|
51
|
-
color:
|
|
52
|
-
}, type: "button", onClick:
|
|
54
|
+
color: theme?.primaryTextColor || '#364153',
|
|
55
|
+
}, type: "button", onClick: () => handleValueChange?.(value), ...other, children: (0, jsx_runtime_1.jsx)("p", { style: {
|
|
53
56
|
margin: 0,
|
|
54
|
-
fontFamily: theme
|
|
55
|
-
color: theme
|
|
57
|
+
fontFamily: theme?.fontFamily,
|
|
58
|
+
color: theme?.primaryTextColor,
|
|
56
59
|
whiteSpace: 'nowrap',
|
|
57
60
|
overflow: 'hidden',
|
|
58
61
|
textOverflow: 'ellipsis',
|
|
59
|
-
}
|
|
62
|
+
}, children: text ?? value }) }));
|
|
60
63
|
});
|
|
61
|
-
|
|
64
|
+
exports.default = DropdownItem;
|
|
62
65
|
//# sourceMappingURL=DropdownItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownItem.js","sourceRoot":"","sources":["../../../src/components/Dropdown/DropdownItem.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DropdownItem.js","sourceRoot":"","sources":["../../../src/components/Dropdown/DropdownItem.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,uCAAuC;AACvC,+CAA0C;AAE1C,6CAA2E;AAW3E,MAAM,YAAY,GAAG,eAAK,CAAC,UAAU,CACnC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACb,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;IAC1E,MAAM,EAAE,aAAa,EAAE,iBAAiB,EAAE,GACxC,IAAA,kBAAU,EAAC,+BAAoB,CAAC,CAAC;IACnC,MAAM,EAAE,YAAY,EAAE,GAAG,IAAA,kBAAU,EAAC,8BAAmB,CAAC,CAAC;IACzD,MAAM,QAAQ,GAAG,aAAa,KAAK,KAAK,CAAC;IACzC,MAAM,SAAS,GAAG,YAAY,KAAK,KAAK,CAAC;IAEzC,MAAM,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IAChC,OAAO,CACL,mCACE,GAAG,EAAE,GAAG,EACR,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,OAAO;YACvB,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,QAAQ;YAClB,YAAY,EAAE,UAAU;YACxB,OAAO,EAAE,iBAAiB;YAC1B,QAAQ,EAAE,UAAU;YACpB,WAAW,EAAE,OAAO;YACpB,iBAAiB,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK;YAC3C,iBAAiB,EAAE,KAAK,EAAE,WAAW,IAAI,SAAS;YAClD,UAAU,EAAE,KAAK,EAAE,eAAe,IAAI,OAAO;YAC7C,SAAS,EAAE,MAAM;YACjB,WAAW,EAAE,MAAM;YACnB,UAAU,EAAE,MAAM;YAClB,MAAM,EAAE,SAAS;YACjB,KAAK,EAAE,KAAK,EAAE,gBAAgB,IAAI,SAAS;SAC5C,EACD,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,EAAE,CAAC,KAAK,CAAC,KACrC,KAAK,YAET,8BACE,KAAK,EAAE;gBACL,MAAM,EAAE,CAAC;gBACT,UAAU,EAAE,KAAK,EAAE,UAAU;gBAC7B,KAAK,EAAE,KAAK,EAAE,gBAAgB;gBAC9B,UAAU,EAAE,QAAQ;gBACpB,QAAQ,EAAE,QAAQ;gBAClB,YAAY,EAAE,UAAU;aACzB,YAEA,IAAI,IAAI,KAAK,GACZ,GACG,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAe,YAAY,CAAC"}
|
|
@@ -1,3 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
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.DropdownItem = exports.Dropdown = void 0;
|
|
7
|
+
var Dropdown_1 = require("./Dropdown");
|
|
8
|
+
Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return __importDefault(Dropdown_1).default; } });
|
|
9
|
+
var DropdownItem_1 = require("./DropdownItem");
|
|
10
|
+
Object.defineProperty(exports, "DropdownItem", { enumerable: true, get: function () { return __importDefault(DropdownItem_1).default; } });
|
|
3
11
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Dropdown/index.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Dropdown/index.ts"],"names":[],"mappings":";;;;;;AAAA,uCAAiD;AAAxC,qHAAA,OAAO,OAAY;AAC5B,+CAAyD;AAAhD,6HAAA,OAAO,OAAgB"}
|
|
@@ -1,66 +1,68 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
22
24
|
};
|
|
23
|
-
|
|
25
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
24
27
|
/* eslint-disable react/display-name */
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
28
|
+
const react_1 = __importStar(require("react"));
|
|
29
|
+
const hooks_1 = require("../../hooks");
|
|
30
|
+
const lib_1 = require("../../lib");
|
|
31
|
+
const Modal = react_1.default.forwardRef((props, ref) => {
|
|
32
|
+
const { showModal, setShowModal, parentRef, width, maxHeight = '18rem', children, className, theme, ...other } = props;
|
|
33
|
+
const [modalExceedsWindow, setModalExceedsWindow] = (0, react_1.useState)(false);
|
|
34
|
+
const modalRef = (0, react_1.useRef)(null);
|
|
35
|
+
const checkModalExceedsWindow = (0, react_1.useCallback)((modalWidth, windowWidth) => {
|
|
33
36
|
if (!parentRef.current) {
|
|
34
37
|
return false;
|
|
35
38
|
}
|
|
36
|
-
|
|
39
|
+
const modalBoundingRight = parentRef.current.getBoundingClientRect().left + modalWidth;
|
|
37
40
|
return windowWidth - modalBoundingRight < 0;
|
|
38
41
|
}, [parentRef]);
|
|
39
|
-
|
|
42
|
+
const getAbsoluteSpacing = () => {
|
|
40
43
|
return modalExceedsWindow ? '0' : '0';
|
|
41
44
|
};
|
|
42
|
-
useOnClickOutside(modalRef,
|
|
43
|
-
var _a;
|
|
45
|
+
(0, hooks_1.useOnClickOutside)(modalRef, e => {
|
|
44
46
|
// Exclude click on trigger button (e.g. Dropdown Button) from outside click handler
|
|
45
|
-
|
|
46
|
-
?
|
|
47
|
+
const isTriggerElem = parentRef
|
|
48
|
+
? parentRef.current?.contains(e.target)
|
|
47
49
|
: false;
|
|
48
50
|
if (!isTriggerElem) {
|
|
49
51
|
setShowModal(false);
|
|
50
52
|
}
|
|
51
53
|
});
|
|
52
54
|
// Execute only when modal is of absolute size
|
|
53
|
-
|
|
55
|
+
(0, react_1.useEffect)(() => {
|
|
54
56
|
if (width) {
|
|
55
57
|
setModalExceedsWindow(checkModalExceedsWindow(width, window.innerWidth));
|
|
56
58
|
}
|
|
57
59
|
}, [checkModalExceedsWindow, parentRef, width]);
|
|
58
|
-
|
|
60
|
+
(0, hooks_1.useOnWindowResize)(() => {
|
|
59
61
|
if (width) {
|
|
60
62
|
setModalExceedsWindow(checkModalExceedsWindow(width, window.innerWidth));
|
|
61
63
|
}
|
|
62
64
|
});
|
|
63
|
-
return showModal ? (
|
|
65
|
+
return showModal ? ((0, jsx_runtime_1.jsx)("div", { ref: (0, lib_1.mergeRefs)([modalRef, ref]), style: {
|
|
64
66
|
position: 'absolute',
|
|
65
67
|
zIndex: 10,
|
|
66
68
|
overflowY: 'auto',
|
|
@@ -68,8 +70,8 @@ var Modal = React.forwardRef(function (props, ref) {
|
|
|
68
70
|
left: getAbsoluteSpacing(),
|
|
69
71
|
right: getAbsoluteSpacing(),
|
|
70
72
|
maxHeight: maxHeight,
|
|
71
|
-
backgroundColor:
|
|
72
|
-
borderColor:
|
|
73
|
+
backgroundColor: theme?.backgroundColor || 'white',
|
|
74
|
+
borderColor: theme?.borderColor || '#E5E7EB',
|
|
73
75
|
// borderTopColor: getColorClassNames(
|
|
74
76
|
// DEFAULT_COLOR,
|
|
75
77
|
// colorPalette.lightBorder
|
|
@@ -103,7 +105,7 @@ var Modal = React.forwardRef(function (props, ref) {
|
|
|
103
105
|
// borderBottomWidth: '2px',
|
|
104
106
|
// borderLeftWidth: '2px',
|
|
105
107
|
// borderRightWidth: '2px',
|
|
106
|
-
}
|
|
108
|
+
}, ...other, children: children })) : null;
|
|
107
109
|
});
|
|
108
|
-
|
|
110
|
+
exports.default = Modal;
|
|
109
111
|
//# sourceMappingURL=Modal.js.map
|