@hexure/ui 1.6.8 → 1.6.10
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/dist/cjs/index.js +20 -11
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/components/Modal/Modal.d.ts +8 -1
- package/dist/cjs/types/components/MoreMenu/MoreMenu.d.ts +1 -1
- package/dist/esm/index.js +20 -11
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/Modal/Modal.d.ts +8 -1
- package/dist/esm/types/components/MoreMenu/MoreMenu.d.ts +1 -1
- package/dist/index.d.ts +9 -2
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
|
@@ -2207,7 +2207,7 @@ var Selected = styled.span(templateObject_4$8 || (templateObject_4$8 = __makeTem
|
|
|
2207
2207
|
var Clear = styled.span(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 400;\n font-family: ", ";\n color: ", ";\n line-height: 1;\n cursor: pointer;\n padding-left: 10px;\n margin-left: 10px;\n border-left: 1px solid #ccc;\n"], ["\n font-size: 14px;\n font-weight: 400;\n font-family: ", ";\n color: ", ";\n line-height: 1;\n cursor: pointer;\n padding-left: 10px;\n margin-left: 10px;\n border-left: 1px solid #ccc;\n"])), FontStyles.DEFAULT, Colors.PRIMARY.Hex);
|
|
2208
2208
|
var Actions = styled.div(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n column-gap: 10px;\n"], ["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n column-gap: 10px;\n"])));
|
|
2209
2209
|
var Error$1 = styled.div(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n background: rgba(", ", 0.1);\n border-radius: 4px;\n padding: 6px 8px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n margin-left: 30px;\n"], ["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n background: rgba(", ", 0.1);\n border-radius: 4px;\n padding: 6px 8px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n margin-left: 30px;\n"])), Colors.RED.Rgb);
|
|
2210
|
-
var ErrorMsg = styled.span(templateObject_8$
|
|
2210
|
+
var ErrorMsg = styled.span(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 500;\n font-family: ", ";\n line-height: 1em;\n color: ", ";\n margin-left: 8px;\n"], ["\n font-size: 14px;\n font-weight: 500;\n font-family: ", ";\n line-height: 1em;\n color: ", ";\n margin-left: 8px;\n"])), FontStyles.DEFAULT, Colors.RED.Hex);
|
|
2211
2211
|
var BulkActionBar = function (_a) {
|
|
2212
2212
|
var _b = _a.actions, actions = _b === void 0 ? [] : _b, errorMsg = _a.errorMsg, onClear = _a.onClear, _c = _a.selectedCount, selectedCount = _c === void 0 ? 0 : _c, accessibleProps = __rest(_a, ["actions", "errorMsg", "onClear", "selectedCount"]);
|
|
2213
2213
|
return (React.createElement(Wrapper$d, __assign({}, accessibleProps),
|
|
@@ -2222,7 +2222,7 @@ var BulkActionBar = function (_a) {
|
|
|
2222
2222
|
React.createElement(Icon, { color: Colors.RED.Hex, path: js.mdiInformationOutline, size: '20px' }),
|
|
2223
2223
|
React.createElement(ErrorMsg, null, errorMsg))) : null));
|
|
2224
2224
|
};
|
|
2225
|
-
var templateObject_1$j, templateObject_2$h, templateObject_3$e, templateObject_4$8, templateObject_5$6, templateObject_6$4, templateObject_7$2, templateObject_8$
|
|
2225
|
+
var templateObject_1$j, templateObject_2$h, templateObject_3$e, templateObject_4$8, templateObject_5$6, templateObject_6$4, templateObject_7$2, templateObject_8$2;
|
|
2226
2226
|
|
|
2227
2227
|
var Wrapper$c = styled.label(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n padding: 4px 0;\n cursor: ", ";\n display: flex;\n align-items: flex-start;\n font-size: ", ";\n line-height: 1.6em;\n box-sizing: border-box;\n"], ["\n padding: 4px 0;\n cursor: ", ";\n display: flex;\n align-items: flex-start;\n font-size: ", ";\n line-height: 1.6em;\n box-sizing: border-box;\n"])), function (props) { return (props.$disabled ? 'default' : 'pointer'); }, FontSizes.DEFAULT);
|
|
2228
2228
|
var Input$2 = styled.input(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n font-size: 20px;\n margin: 5px 0px 0px 0px;\n line-height: 1.1em;\n box-sizing: border-box;\n"], ["\n font-size: 20px;\n margin: 5px 0px 0px 0px;\n line-height: 1.1em;\n box-sizing: border-box;\n"])));
|
|
@@ -2786,7 +2786,7 @@ var CopyWrapper = styled.div(templateObject_5$3 || (templateObject_5$3 = __makeT
|
|
|
2786
2786
|
});
|
|
2787
2787
|
var IconWrapper$1 = styled.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n cursor: pointer;\n"], ["\n cursor: pointer;\n"])));
|
|
2788
2788
|
var ProgressBar = styled.div(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n width: 100px;\n height: 14px;\n border-radius: 4px;\n background: #f5f5f5;\n overflow-x: hidden;\n"], ["\n width: 100px;\n height: 14px;\n border-radius: 4px;\n background: #f5f5f5;\n overflow-x: hidden;\n"])));
|
|
2789
|
-
var Progress = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n width: ", ";\n height: 100%;\n border-radius: 4px 0px 0px 4px;\n background: ", ";\n"], ["\n width: ", ";\n height: 100%;\n border-radius: 4px 0px 0px 4px;\n background: ", ";\n"])), function (_a) {
|
|
2789
|
+
var Progress = styled.div(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n width: ", ";\n height: 100%;\n border-radius: 4px 0px 0px 4px;\n background: ", ";\n"], ["\n width: ", ";\n height: 100%;\n border-radius: 4px 0px 0px 4px;\n background: ", ";\n"])), function (_a) {
|
|
2790
2790
|
var $width = _a.$width;
|
|
2791
2791
|
return "".concat($width, "%");
|
|
2792
2792
|
}, Colors.GREEN.Hex);
|
|
@@ -2861,7 +2861,7 @@ var FileUpload = function (_a) {
|
|
|
2861
2861
|
React.createElement(Copy, { align: 'center', children: 'Drag & drop files here or click to choose', type: 'bold' }),
|
|
2862
2862
|
React.createElement(Copy, { align: 'center', children: "".concat(maxFileSize, " MB max file size"), color: 'GRAY' }))))));
|
|
2863
2863
|
};
|
|
2864
|
-
var templateObject_1$c, templateObject_2$a, templateObject_3$9, templateObject_4$5, templateObject_5$3, templateObject_6$1, templateObject_7$1, templateObject_8;
|
|
2864
|
+
var templateObject_1$c, templateObject_2$a, templateObject_3$9, templateObject_4$5, templateObject_5$3, templateObject_6$1, templateObject_7$1, templateObject_8$1;
|
|
2865
2865
|
|
|
2866
2866
|
var formatAsPhone = function (number) {
|
|
2867
2867
|
var formatted_value = "".concat(number).replace(/[^0-9.]/g, '');
|
|
@@ -2997,13 +2997,17 @@ var Logo = function (_a) {
|
|
|
2997
2997
|
|
|
2998
2998
|
var Wrapper$7 = styled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 9999;\n background: rgba(0, 0, 0, 0.8);\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 9999;\n background: rgba(0, 0, 0, 0.8);\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
|
|
2999
2999
|
var Container$1 = styled.dialog(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n max-width: ", ";\n width: auto;\n border-radius: 8px;\n overflow: hidden;\n box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n outline: none;\n border: none;\n position: relative;\n padding: 0px;\n box-sizing: border-box;\n"], ["\n max-width: ", ";\n width: auto;\n border-radius: 8px;\n overflow: hidden;\n box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n outline: none;\n border: none;\n position: relative;\n padding: 0px;\n box-sizing: border-box;\n"])), function (props) { return props.$maxWidth || '90vw'; });
|
|
3000
|
-
var Header$1 = styled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n position: sticky;\n top: 0;\n padding: 20px;\n border-bottom: 1px solid #
|
|
3000
|
+
var Header$1 = styled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n position: sticky;\n top: 0;\n padding: 20px;\n border-bottom: 1px solid #e7e6e6;\n display: flex;\n align-items: center;\n background: #ffffff;\n box-sizing: border-box;\n"], ["\n position: sticky;\n top: 0;\n padding: 20px;\n border-bottom: 1px solid #e7e6e6;\n display: flex;\n align-items: center;\n background: #ffffff;\n box-sizing: border-box;\n"])));
|
|
3001
3001
|
var Close = styled.div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n margin-left: auto;\n display: flex;\n align-items: center;\n padding-left: 20px;\n cursor: pointer;\n"], ["\n margin-left: auto;\n display: flex;\n align-items: center;\n padding-left: 20px;\n cursor: pointer;\n"])));
|
|
3002
3002
|
var CloseMsg = styled.span(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 400;\n font-family: ", ";\n line-height: 1em;\n color: ", ";\n"], ["\n font-size: ", ";\n font-weight: 400;\n font-family: ", ";\n line-height: 1em;\n color: ", ";\n"])), FontSizes.SMALL, FontStyles.DEFAULT, Colors.MEDIUM_GRAY.Hex);
|
|
3003
|
-
var
|
|
3004
|
-
var
|
|
3003
|
+
var Steps = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n padding: 20px;\n border-bottom: 1px solid #e7e6e6;\n background: #f5f5f5;\n display: flex;\n gap: 30px;\n align-items: center;\n"], ["\n padding: 20px;\n border-bottom: 1px solid #e7e6e6;\n background: #f5f5f5;\n display: flex;\n gap: 30px;\n align-items: center;\n"])));
|
|
3004
|
+
var Step = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 8px;\n"], ["\n display: flex;\n align-items: center;\n gap: 8px;\n"])));
|
|
3005
|
+
var StepIndicator = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n width: 30px;\n height: 30px;\n border-radius: 15px;\n background: ", ";\n color: ", ";\n font-family: 'Roboto', Helvetica, Arial, sans-serif;\n font-size: 14px;\n font-weight: 500;\n line-height: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n"], ["\n width: 30px;\n height: 30px;\n border-radius: 15px;\n background: ", ";\n color: ", ";\n font-family: 'Roboto', Helvetica, Arial, sans-serif;\n font-size: 14px;\n font-weight: 500;\n line-height: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n"])), function (props) { return (props.$active ? Colors.PRIMARY.Hex : Colors.LIGHT_GRAY.Hex); }, function (props) { return (props.$active ? '#fff' : Colors.MEDIUM_GRAY.Hex); });
|
|
3006
|
+
var StepLabel = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n color: #000;\n font-family: 'Roboto', Helvetica, Arial, sans-serif;\n font-size: 14px;\n font-weight: 500;\n line-height: 1;\n"], ["\n color: #000;\n font-family: 'Roboto', Helvetica, Arial, sans-serif;\n font-size: 14px;\n font-weight: 500;\n line-height: 1;\n"])));
|
|
3007
|
+
var ContentWrapper = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n overflow-x: hidden;\n overflow-y: auto;\n background: #ffffff;\n max-height: calc(100vh - 260px);\n box-sizing: border-box;\n"], ["\n overflow-x: hidden;\n overflow-y: auto;\n background: #ffffff;\n max-height: calc(100vh - 260px);\n box-sizing: border-box;\n"])));
|
|
3008
|
+
var ButtonBar = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n position: sticky;\n bottom: 0;\n background: #ffffff;\n padding: 20px;\n border-top: 1px solid #e7e6e6;\n display: flex;\n align-items: center;\n justify-self: flex-end;\n box-sizing: border-box;\n"], ["\n position: sticky;\n bottom: 0;\n background: #ffffff;\n padding: 20px;\n border-top: 1px solid #e7e6e6;\n display: flex;\n align-items: center;\n justify-self: flex-end;\n box-sizing: border-box;\n"])));
|
|
3005
3009
|
var Modal = function (_a) {
|
|
3006
|
-
var children = _a.children, title = _a.title, onClose = _a.onClose, maxWidth = _a.maxWidth, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, tertiaryButton = _a.tertiaryButton, accessibleProps = __rest(_a, ["children", "title", "onClose", "maxWidth", "primaryButton", "secondaryButton", "tertiaryButton"]);
|
|
3010
|
+
var children = _a.children, title = _a.title, onClose = _a.onClose, maxWidth = _a.maxWidth, steps = _a.steps, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, tertiaryButton = _a.tertiaryButton, accessibleProps = __rest(_a, ["children", "title", "onClose", "maxWidth", "steps", "primaryButton", "secondaryButton", "tertiaryButton"]);
|
|
3007
3011
|
React.useEffect(function () {
|
|
3008
3012
|
document.onkeydown = function (e) {
|
|
3009
3013
|
if (e.key === 'Escape') {
|
|
@@ -3021,6 +3025,11 @@ var Modal = function (_a) {
|
|
|
3021
3025
|
React.createElement(Close, { onClick: onClose },
|
|
3022
3026
|
React.createElement(CloseMsg, null, "(Esc)"),
|
|
3023
3027
|
React.createElement(Icon, { color: Colors.BLACK.Hex, path: js.mdiClose, size: '24px' }))),
|
|
3028
|
+
steps ? (React.createElement(Steps, null, steps.map(function (step, i) {
|
|
3029
|
+
return (React.createElement(Step, { key: i },
|
|
3030
|
+
step.complete ? (React.createElement(Icon, { color: Colors.PRIMARY.Hex, path: js.mdiCheckboxMarkedCircleOutline, size: '32px' })) : (React.createElement(StepIndicator, { "$active": step.active }, i + 1)),
|
|
3031
|
+
React.createElement(StepLabel, null, step.label)));
|
|
3032
|
+
}))) : null,
|
|
3024
3033
|
React.createElement(ContentWrapper, null, children),
|
|
3025
3034
|
primaryButton || secondaryButton || tertiaryButton ? (React.createElement(ButtonBar, null,
|
|
3026
3035
|
tertiaryButton ? React.createElement(Button, __assign({}, tertiaryButton, { format: 'secondary' })) : null,
|
|
@@ -3033,15 +3042,15 @@ var Modal = function (_a) {
|
|
|
3033
3042
|
secondaryButton ? React.createElement(Button, __assign({}, secondaryButton, { format: 'secondary' })) : null,
|
|
3034
3043
|
primaryButton ? (React.createElement(Button, __assign({}, primaryButton, { format: 'primary', margin: '0px 0px 0px 10px' }))) : null)) : null)) : null)));
|
|
3035
3044
|
};
|
|
3036
|
-
var templateObject_1$9, templateObject_2$8, templateObject_3$7, templateObject_4$3, templateObject_5$2, templateObject_6, templateObject_7;
|
|
3045
|
+
var templateObject_1$9, templateObject_2$8, templateObject_3$7, templateObject_4$3, templateObject_5$2, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
|
3037
3046
|
|
|
3038
3047
|
var Wrapper$6 = styled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n background: #fff;\n border-radius: 8px;\n box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n display: flex;\n flex-direction: column;\n gap: 4px;\n max-height: ", ";\n padding: 10px;\n width: 200px;\n"], ["\n background: #fff;\n border-radius: 8px;\n box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n display: flex;\n flex-direction: column;\n gap: 4px;\n max-height: ", ";\n padding: 10px;\n width: 200px;\n"])), function (props) { return props.$maxHeight || '312px'; });
|
|
3039
|
-
var MenuItem = styled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n align-items: center;\n border-radius: 8px;\n border: 1px solid transparent;\n display: flex;\n gap: 8px;\n height: 38px;\n padding: 8px;\n &:hover {\n background: rgba(1, 147, 215, 0.1);\n cursor: pointer;\n }\n"], ["\n align-items: center;\n border-radius: 8px;\n border: 1px solid transparent;\n display: flex;\n gap: 8px;\n height: 38px;\n padding: 8px;\n &:hover {\n background: rgba(1, 147, 215, 0.1);\n cursor: pointer;\n }\n"])));
|
|
3048
|
+
var MenuItem = styled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n align-items: center;\n border-radius: 8px;\n border: 1px solid transparent;\n display: flex;\n gap: 8px;\n height: 38px;\n padding: 8px;\n &:hover {\n background: rgba(1, 147, 215, 0.1);\n cursor: pointer;\n\n svg,\n path {\n fill: ", " !important;\n }\n }\n"], ["\n align-items: center;\n border-radius: 8px;\n border: 1px solid transparent;\n display: flex;\n gap: 8px;\n height: 38px;\n padding: 8px;\n &:hover {\n background: rgba(1, 147, 215, 0.1);\n cursor: pointer;\n\n svg,\n path {\n fill: ", " !important;\n }\n }\n"])), Colors.PRIMARY.Hex);
|
|
3040
3049
|
var Title = styled.span(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n font-family: Roboto;\n font-size: 14px;\n font-weight: 400;\n height: auto;\n letter-spacing: 0px;\n line-height: 22px;\n text-align: left;\n"], ["\n font-family: Roboto;\n font-size: 14px;\n font-weight: 400;\n height: auto;\n letter-spacing: 0px;\n line-height: 22px;\n text-align: left;\n"])));
|
|
3041
3050
|
var MoreMenu = function (_a) {
|
|
3042
3051
|
var maxHeight = _a.maxHeight, _b = _a.menuItems, menuItems = _b === void 0 ? [] : _b, accessibleProps = __rest(_a, ["maxHeight", "menuItems"]);
|
|
3043
3052
|
return (React.createElement(Wrapper$6, __assign({ "$maxHeight": maxHeight }, accessibleProps), menuItems.map(function (item) {
|
|
3044
|
-
return (React.createElement(MenuItem,
|
|
3053
|
+
return (React.createElement(MenuItem, { onClick: item.onClick },
|
|
3045
3054
|
item.icon ? (React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: item.icon, size: '20px' })) : null,
|
|
3046
3055
|
React.createElement(Title, null, item.label)));
|
|
3047
3056
|
})));
|