@hexure/ui 1.5.0 → 1.6.0
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 +70 -53
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/index.d.ts +1 -0
- package/dist/esm/index.js +70 -54
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/index.d.ts +1 -0
- package/dist/index.d.ts +11 -1
- package/package.json +90 -90
|
@@ -12,6 +12,7 @@ export { default as Field } from './components/Field';
|
|
|
12
12
|
export { default as FileUpload } from './components/FileUpload';
|
|
13
13
|
export { default as Heading } from './components/Heading';
|
|
14
14
|
export { default as Input } from './components/Input';
|
|
15
|
+
export { default as Link } from './components/Link';
|
|
15
16
|
export { default as Logo } from './components/Logo';
|
|
16
17
|
export { default as Modal } from './components/Modal';
|
|
17
18
|
export { default as MoreMenu } from './components/MoreMenu';
|
package/dist/esm/index.js
CHANGED
|
@@ -2034,7 +2034,7 @@ var FontSizes = {
|
|
|
2034
2034
|
SMALL: '13px',
|
|
2035
2035
|
};
|
|
2036
2036
|
|
|
2037
|
-
var Header$3 = styled.div(templateObject_1$
|
|
2037
|
+
var Header$3 = styled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n box-sizing: border-box;\n background: #f5f5f5;\n border: 1px solid #e5e5e5;\n padding: 14px 20px;\n height: 50px;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n box-sizing: border-box;\n background: #f5f5f5;\n border: 1px solid #e5e5e5;\n padding: 14px 20px;\n height: 50px;\n cursor: pointer;\n"])));
|
|
2038
2038
|
var Title$1 = styled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 400;\n color: ", ";\n line-height: 1.6em;\n font-family: ", ";\n box-sizing: border-box;\n"], ["\n font-size: ", ";\n font-weight: 400;\n color: ", ";\n line-height: 1.6em;\n font-family: ", ";\n box-sizing: border-box;\n"])), FontSizes.DEFAULT, Colors.BLACK.Hex, FontStyles.DEFAULT);
|
|
2039
2039
|
var Accordion = function (_a) {
|
|
2040
2040
|
var title = _a.title, children = _a.children, open = _a.open, onClick = _a.onClick, accessibleProps = __rest(_a, ["title", "children", "open", "onClick"]);
|
|
@@ -2044,7 +2044,7 @@ var Accordion = function (_a) {
|
|
|
2044
2044
|
React.createElement(Icon, { color: Colors.BLACK.Hex, path: open ? mdiChevronUp : mdiChevronDown, size: '24px' })),
|
|
2045
2045
|
open ? children : null));
|
|
2046
2046
|
};
|
|
2047
|
-
var templateObject_1$
|
|
2047
|
+
var templateObject_1$p, templateObject_2$m;
|
|
2048
2048
|
|
|
2049
2049
|
var button_type_mapping = {
|
|
2050
2050
|
primary: {
|
|
@@ -2069,7 +2069,7 @@ var button_type_mapping = {
|
|
|
2069
2069
|
badge_content_color: Colors.RED.Hex,
|
|
2070
2070
|
},
|
|
2071
2071
|
};
|
|
2072
|
-
var StyledButton = styled.button(templateObject_1$
|
|
2072
|
+
var StyledButton = styled.button(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n height: ", ";\n line-height: 1em;\n border-radius: ", ";\n margin: ", ";\n padding: ", ";\n outline: none;\n background: ", ";\n width: ", ";\n cursor: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n &:hover {\n opacity: ", ";\n }\n"], ["\n height: ", ";\n line-height: 1em;\n border-radius: ", ";\n margin: ", ";\n padding: ", ";\n outline: none;\n background: ", ";\n width: ", ";\n cursor: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n &:hover {\n opacity: ", ";\n }\n"])), function (props) { return (props.$small ? '30px' : '40px'); }, function (props) { return (props.$small ? '15px' : '20px'); }, function (props) { return props.$margin || '0px'; }, function (props) {
|
|
2073
2073
|
if (props.$hasChildren) {
|
|
2074
2074
|
if (props.$small) {
|
|
2075
2075
|
return '0 10px';
|
|
@@ -2108,9 +2108,9 @@ var Button = function (_a) {
|
|
|
2108
2108
|
React.createElement(Icon, { color: format ? button_type_mapping[format].content_color : '#fff', path: icon, size: small ? '20px' : '24px' }))) : null,
|
|
2109
2109
|
badge && !icon ? (React.createElement(Badge$1, { "$format": format, "$small": small }, badge)) : null));
|
|
2110
2110
|
};
|
|
2111
|
-
var templateObject_1$
|
|
2111
|
+
var templateObject_1$o, templateObject_2$l, templateObject_3$i, templateObject_4$9;
|
|
2112
2112
|
|
|
2113
|
-
var StyledComponent = styled.p(templateObject_1$
|
|
2113
|
+
var StyledComponent = styled.p(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n letter-spacing: ", ";\n font-weight: ", ";\n font-style: ", ";\n text-decoration: ", ";\n font-family: 'Roboto', Helvetica, Arial, sans-serif;\n margin: ", ";\n padding: ", ";\n text-align: ", ";\n box-sizing: border-box;\n"], ["\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n letter-spacing: ", ";\n font-weight: ", ";\n font-style: ", ";\n text-decoration: ", ";\n font-family: 'Roboto', Helvetica, Arial, sans-serif;\n margin: ", ";\n padding: ", ";\n text-align: ", ";\n box-sizing: border-box;\n"])), function (props) { return Colors[props.$color || 'BLACK'].Hex; }, function (props) { return (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT); }, function (props) { return (props.$type === 'small' ? '1.5em' : '1.6em'); }, function (props) { return (props.$type === 'small' ? '1px' : '0px'); }, function (props) { return (props.$type === 'bold' ? '500' : '400'); }, function (props) { return (props.$type === 'italic' ? 'italic' : 'normal'); }, function (props) {
|
|
2114
2114
|
return ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none';
|
|
2115
2115
|
}, function (props) { return props.$margin || '0px'; }, function (props) { return props.$padding || '0px'; }, function (props) { return props.$align || 'left'; });
|
|
2116
2116
|
var Copy = function (_a) {
|
|
@@ -2120,9 +2120,9 @@ var Copy = function (_a) {
|
|
|
2120
2120
|
Copy.defaultProps = {
|
|
2121
2121
|
type: 'default',
|
|
2122
2122
|
};
|
|
2123
|
-
var templateObject_1$
|
|
2123
|
+
var templateObject_1$n;
|
|
2124
2124
|
|
|
2125
|
-
var H1 = styled.h1(templateObject_1$
|
|
2125
|
+
var H1 = styled.h1(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n color: ", ";\n font-size: 30px;\n font-weight: ", ";\n line-height: 1.4em;\n font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n margin: ", ";\n padding: ", ";\n box-sizing: border-box;\n"], ["\n color: ", ";\n font-size: 30px;\n font-weight: ", ";\n line-height: 1.4em;\n font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n margin: ", ";\n padding: ", ";\n box-sizing: border-box;\n"])), Colors.BLACK.Hex, function (props) { return (props.$bold ? '500' : '400'); }, function (props) { return props.$margin || '0px'; }, function (props) { return props.$padding || '0px'; });
|
|
2126
2126
|
var H2 = styled.h2(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n color: ", ";\n font-size: 24px;\n font-weight: ", ";\n line-height: 1.33em;\n font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n margin: ", ";\n padding: ", ";\n box-sizing: border-box;\n"], ["\n color: ", ";\n font-size: 24px;\n font-weight: ", ";\n line-height: 1.33em;\n font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n margin: ", ";\n padding: ", ";\n box-sizing: border-box;\n"])), Colors.BLACK.Hex, function (props) { return (props.$bold ? '500' : '400'); }, function (props) { return props.$margin || '0px'; }, function (props) { return props.$padding || '0px'; });
|
|
2127
2127
|
var H3 = styled.h3(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n color: ", ";\n font-size: 18px;\n font-weight: ", ";\n line-height: 1.33em;\n font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n margin: ", ";\n padding: ", ";\n box-sizing: border-box;\n"], ["\n color: ", ";\n font-size: 18px;\n font-weight: ", ";\n line-height: 1.33em;\n font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n margin: ", ";\n padding: ", ";\n box-sizing: border-box;\n"])), Colors.BLACK.Hex, function (props) { return (props.$bold ? '500' : '400'); }, function (props) { return props.$margin || '0px'; }, function (props) { return props.$padding || '0px'; });
|
|
2128
2128
|
var Heading = function (_a) {
|
|
@@ -2143,9 +2143,9 @@ Heading.defaultProps = {
|
|
|
2143
2143
|
bold: false,
|
|
2144
2144
|
type: 'primary',
|
|
2145
2145
|
};
|
|
2146
|
-
var templateObject_1$
|
|
2146
|
+
var templateObject_1$m, templateObject_2$k, templateObject_3$h;
|
|
2147
2147
|
|
|
2148
|
-
var Wrapper$
|
|
2148
|
+
var Wrapper$f = styled.div(templateObject_1$l || (templateObject_1$l = __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 box-sizing: border-box;\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 box-sizing: border-box;\n"])));
|
|
2149
2149
|
var Container$3 = styled.dialog(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n max-width: 600px;\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: 40px;\n text-align: center;\n box-sizing: border-box;\n"], ["\n max-width: 600px;\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: 40px;\n text-align: center;\n box-sizing: border-box;\n"])));
|
|
2150
2150
|
var Buttons = styled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 30px;\n box-sizing: border-box;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 30px;\n box-sizing: border-box;\n"])));
|
|
2151
2151
|
var ActionDialog = function (_a) {
|
|
@@ -2160,7 +2160,7 @@ var ActionDialog = function (_a) {
|
|
|
2160
2160
|
document.onkeydown = null;
|
|
2161
2161
|
};
|
|
2162
2162
|
}, []);
|
|
2163
|
-
return (React.createElement(Wrapper$
|
|
2163
|
+
return (React.createElement(Wrapper$f, __assign({}, accessibleProps),
|
|
2164
2164
|
React.createElement(Container$3, { open: true },
|
|
2165
2165
|
title ? (React.createElement(Heading, { margin: '0px 0px 20px 0px', type: 'secondary' }, title)) : null,
|
|
2166
2166
|
description ? React.createElement(Copy, { align: 'center' }, description) : null,
|
|
@@ -2168,9 +2168,9 @@ var ActionDialog = function (_a) {
|
|
|
2168
2168
|
secondaryButton ? (React.createElement(Button, __assign({}, secondaryButton, { format: 'secondary', margin: '0px 5px' }))) : null,
|
|
2169
2169
|
primaryButton ? React.createElement(Button, __assign({}, primaryButton, { format: 'primary', margin: '0px 5px' })) : null)) : null)));
|
|
2170
2170
|
};
|
|
2171
|
-
var templateObject_1$
|
|
2171
|
+
var templateObject_1$l, templateObject_2$j, templateObject_3$g;
|
|
2172
2172
|
|
|
2173
|
-
var Wrapper$
|
|
2173
|
+
var Wrapper$e = styled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n border: 1px solid #f1f1f1;\n border-radius: 4px;\n border-left-width: 4px;\n box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);\n display: flex;\n align-items: flex-start;\n padding: 20px;\n box-sizing: border-box;\n"], ["\n border: 1px solid #f1f1f1;\n border-radius: 4px;\n border-left-width: 4px;\n box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);\n display: flex;\n align-items: flex-start;\n padding: 20px;\n box-sizing: border-box;\n"])));
|
|
2174
2174
|
var Content$1 = styled.div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n margin-left: 20px;\n"], ["\n margin-left: 20px;\n"])));
|
|
2175
2175
|
var Action$1 = styled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n font-family: ", ";\n font-weight: 500;\n cursor: pointer;\n margin-top: 6px;\n"], ["\n color: ", ";\n font-size: ", ";\n font-family: ", ";\n font-weight: 500;\n cursor: pointer;\n margin-top: 6px;\n"])), Colors.PRIMARY.Hex, FontSizes.DEFAULT, FontStyles.DEFAULT);
|
|
2176
2176
|
var Alert = function (_a) {
|
|
@@ -2193,7 +2193,7 @@ var Alert = function (_a) {
|
|
|
2193
2193
|
icon: mdiCheckboxMarkedCircleOutline,
|
|
2194
2194
|
},
|
|
2195
2195
|
};
|
|
2196
|
-
return (React.createElement(Wrapper$
|
|
2196
|
+
return (React.createElement(Wrapper$e, __assign({}, accessibleProps, { style: { borderLeftColor: type_mapping[type].color } }),
|
|
2197
2197
|
React.createElement("div", { style: { flexShrink: 0 } },
|
|
2198
2198
|
React.createElement(Icon, { color: type_mapping[type].color, path: type_mapping[type].icon, size: '30px' })),
|
|
2199
2199
|
React.createElement(Content$1, null,
|
|
@@ -2201,9 +2201,9 @@ var Alert = function (_a) {
|
|
|
2201
2201
|
description ? React.createElement(Copy, { margin: '6px 0 0 0 !important' }, description) : null,
|
|
2202
2202
|
action ? React.createElement(Action$1, { onClick: action.onClick }, action.label) : null)));
|
|
2203
2203
|
};
|
|
2204
|
-
var templateObject_1$
|
|
2204
|
+
var templateObject_1$k, templateObject_2$i, templateObject_3$f;
|
|
2205
2205
|
|
|
2206
|
-
var Wrapper$
|
|
2206
|
+
var Wrapper$d = styled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n border: 1px solid ", ";\n border-radius: 8px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n"], ["\n border: 1px solid ", ";\n border-radius: 8px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n"])), Colors.PRIMARY.Hex);
|
|
2207
2207
|
var Left = styled.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-shrink: 0;\n"], ["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-shrink: 0;\n"])));
|
|
2208
2208
|
var Info = styled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n margin-right: 30px;\n"], ["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n margin-right: 30px;\n"])));
|
|
2209
2209
|
var Selected = styled.span(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 400;\n font-family: ", ";\n color: ", ";\n line-height: 1;\n"], ["\n font-size: 14px;\n font-weight: 400;\n font-family: ", ";\n color: ", ";\n line-height: 1;\n"])), FontStyles.DEFAULT, Colors.BLACK.Hex);
|
|
@@ -2213,7 +2213,7 @@ var Error$1 = styled.div(templateObject_7$2 || (templateObject_7$2 = __makeTempl
|
|
|
2213
2213
|
var ErrorMsg = styled.span(templateObject_8$1 || (templateObject_8$1 = __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);
|
|
2214
2214
|
var BulkActionBar = function (_a) {
|
|
2215
2215
|
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"]);
|
|
2216
|
-
return (React.createElement(Wrapper$
|
|
2216
|
+
return (React.createElement(Wrapper$d, __assign({}, accessibleProps),
|
|
2217
2217
|
React.createElement(Left, null,
|
|
2218
2218
|
React.createElement(Info, null,
|
|
2219
2219
|
React.createElement(Selected, null,
|
|
@@ -2225,38 +2225,47 @@ var BulkActionBar = function (_a) {
|
|
|
2225
2225
|
React.createElement(Icon, { color: Colors.RED.Hex, path: mdiInformationOutline, size: '20px' }),
|
|
2226
2226
|
React.createElement(ErrorMsg, null, errorMsg))) : null));
|
|
2227
2227
|
};
|
|
2228
|
-
var templateObject_1$
|
|
2228
|
+
var templateObject_1$j, templateObject_2$h, templateObject_3$e, templateObject_4$8, templateObject_5$6, templateObject_6$4, templateObject_7$2, templateObject_8$1;
|
|
2229
2229
|
|
|
2230
|
-
var Wrapper$
|
|
2231
|
-
var Input$2 = styled.input(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n font-size: 20px;\n margin: 0px 0px
|
|
2230
|
+
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);
|
|
2231
|
+
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"])));
|
|
2232
2232
|
var Label$3 = styled.span(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n line-height: 1.6em;\n color: ", ";\n margin-left: 6px;\n box-sizing: border-box;\n"], ["\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n line-height: 1.6em;\n color: ", ";\n margin-left: 6px;\n box-sizing: border-box;\n"])), FontStyles.DEFAULT, FontSizes.DEFAULT, Colors.BLACK.Hex);
|
|
2233
2233
|
var Checkbox = function (_a) {
|
|
2234
2234
|
var children = _a.children, disabled = _a.disabled, checked = _a.checked, onChange = _a.onChange, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange"]);
|
|
2235
|
-
return (React.createElement(Wrapper$
|
|
2235
|
+
return (React.createElement(Wrapper$c, __assign({}, accessibleProps),
|
|
2236
2236
|
React.createElement(Input$2, { checked: checked, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, type: 'checkbox' }),
|
|
2237
2237
|
children ? React.createElement(Label$3, null, children) : null));
|
|
2238
2238
|
};
|
|
2239
|
-
var templateObject_1$
|
|
2239
|
+
var templateObject_1$i, templateObject_2$g, templateObject_3$d;
|
|
2240
2240
|
|
|
2241
|
-
var SelectAll = styled.div(templateObject_1$
|
|
2241
|
+
var SelectAll = styled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n padding: 8px 12px;\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n"], ["\n padding: 8px 12px;\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n"])), Colors.LIGHT_GRAY.Hex);
|
|
2242
2242
|
var Options$1 = styled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n padding: 12px;\n box-sizing: border-box;\n"], ["\n padding: 12px;\n box-sizing: border-box;\n"])));
|
|
2243
2243
|
var Checklist = function (_a) {
|
|
2244
|
-
var disabled = _a.disabled, onChange = _a.onChange, options = _a.options,
|
|
2244
|
+
var disabled = _a.disabled, onChange = _a.onChange, options = _a.options, _b = _a.selected, selected = _b === void 0 ? [] : _b, showSelectAll = _a.showSelectAll, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "selected", "showSelectAll"]);
|
|
2245
2245
|
var values = options.map(function (option) { return option.value; });
|
|
2246
|
+
var selected_options = options.filter(function (o) { return selected.includes(o.value); });
|
|
2246
2247
|
var handleToggleAll = function () {
|
|
2247
|
-
if (
|
|
2248
|
-
|
|
2248
|
+
if (selected_options.length === options.length) {
|
|
2249
|
+
triggerChange([]);
|
|
2249
2250
|
}
|
|
2250
2251
|
else {
|
|
2251
|
-
|
|
2252
|
+
triggerChange(options.map(function (option) { return option.value; }));
|
|
2252
2253
|
}
|
|
2253
2254
|
};
|
|
2254
2255
|
var handleChange = function (option) {
|
|
2255
|
-
var
|
|
2256
|
+
var new_selected = selected_options.filter(function (o) { return o.value !== option.value; }).map(function (o) { return o.value; });
|
|
2256
2257
|
if (!selected.includes(option.value)) {
|
|
2257
|
-
|
|
2258
|
+
new_selected.push(option.value);
|
|
2258
2259
|
}
|
|
2259
|
-
onChange
|
|
2260
|
+
// Mimic input event so it's easier to share onChange methods
|
|
2261
|
+
triggerChange(new_selected);
|
|
2262
|
+
};
|
|
2263
|
+
var triggerChange = function (value) {
|
|
2264
|
+
onChange({
|
|
2265
|
+
target: {
|
|
2266
|
+
value: value,
|
|
2267
|
+
},
|
|
2268
|
+
});
|
|
2260
2269
|
};
|
|
2261
2270
|
return (React.createElement(React.Fragment, null,
|
|
2262
2271
|
showSelectAll && values.length ? (React.createElement(SelectAll, null,
|
|
@@ -2267,7 +2276,7 @@ var Checklist = function (_a) {
|
|
|
2267
2276
|
return (React.createElement(Checkbox, __assign({ key: i }, accessibleProps, { checked: checked, disabled: disabled, onChange: handleChange.bind(null, option) }), label));
|
|
2268
2277
|
}))));
|
|
2269
2278
|
};
|
|
2270
|
-
var templateObject_1$
|
|
2279
|
+
var templateObject_1$h, templateObject_2$f;
|
|
2271
2280
|
|
|
2272
2281
|
var dayjs_min = {exports: {}};
|
|
2273
2282
|
|
|
@@ -2587,7 +2596,7 @@ var dayjs_min = {exports: {}};
|
|
|
2587
2596
|
var dayjs_minExports = dayjs_min.exports;
|
|
2588
2597
|
var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
|
|
2589
2598
|
|
|
2590
|
-
var Wrapper$
|
|
2599
|
+
var Wrapper$b = styled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n border-radius: 4px;\n height: 40px;\n background-color: ", ";\n position: relative;\n cursor: pointer;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n border-radius: ", ";\n flex-grow: ", ";\n box-sizing: border-box;\n padding: 10px 0px;\n display: flex;\n align-items: center;\n"], ["\n border-radius: 4px;\n height: 40px;\n background-color: ", ";\n position: relative;\n cursor: pointer;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n border-radius: ", ";\n flex-grow: ", ";\n box-sizing: border-box;\n padding: 10px 0px;\n display: flex;\n align-items: center;\n"])), function (props) { return (props.$readOnly ? '#f5f5f5' : '#ffffff'); }, function (props) { return (props.$invalid ? Colors.RED.Hex : '#cccccc'); }, function (_a) {
|
|
2591
2600
|
var $style = _a.$style;
|
|
2592
2601
|
return ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px';
|
|
2593
2602
|
}, function (_a) {
|
|
@@ -2598,7 +2607,7 @@ var Trigger$1 = styled.select(templateObject_2$e || (templateObject_2$e = __make
|
|
|
2598
2607
|
var IconWrapper$2 = styled.span(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n position: absolute;\n right: 4px;\n height: 22px;\n z-index: 1;\n"], ["\n position: absolute;\n right: 4px;\n height: 22px;\n z-index: 1;\n"])));
|
|
2599
2608
|
var Select = function (_a) {
|
|
2600
2609
|
var options = _a.options, optionGroups = _a.optionGroups, placeholder = _a.placeholder, readOnly = _a.readOnly, invalid = _a.invalid, value = _a.value, onChange = _a.onChange, style = _a.style, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "value", "onChange", "style"]);
|
|
2601
|
-
return (React.createElement(Wrapper$
|
|
2610
|
+
return (React.createElement(Wrapper$b, { "$invalid": invalid, "$readOnly": readOnly, "$style": style },
|
|
2602
2611
|
React.createElement(Trigger$1, __assign({ disabled: readOnly, onChange: onChange, placeholder: placeholder, value: value }, accessibleProps),
|
|
2603
2612
|
placeholder ? (React.createElement("option", { disabled: true, value: '' }, placeholder)) : null,
|
|
2604
2613
|
optionGroups &&
|
|
@@ -2614,9 +2623,9 @@ var Select = function (_a) {
|
|
|
2614
2623
|
React.createElement(IconWrapper$2, null,
|
|
2615
2624
|
React.createElement(Icon, { color: Colors.BLACK.Hex, path: mdiChevronDown, size: '22px' }))));
|
|
2616
2625
|
};
|
|
2617
|
-
var templateObject_1$
|
|
2626
|
+
var templateObject_1$g, templateObject_2$e, templateObject_3$c;
|
|
2618
2627
|
|
|
2619
|
-
var DatePickerWrapper = styled.div(templateObject_1$
|
|
2628
|
+
var DatePickerWrapper = styled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
2620
2629
|
var Middle = styled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n margin: 0px -1px;\n"], ["\n margin: 0px -1px;\n"])));
|
|
2621
2630
|
var DatePicker = function (_a) {
|
|
2622
2631
|
var _b = _a.readOnly, readOnly = _b === void 0 ? false : _b, _c = _a.invalid, invalid = _c === void 0 ? false : _c, _d = _a.maxDate, maxDate = _d === void 0 ? null : _d, _e = _a.minDate, minDate = _e === void 0 ? null : _e, date = _a.date, onChange = _a.onChange;
|
|
@@ -2677,9 +2686,9 @@ var DatePicker = function (_a) {
|
|
|
2677
2686
|
React.createElement(Select, { invalid: invalid, onChange: handleDayChange, options: dayOptions, readOnly: readOnly, style: { borderRadius: '0px' }, value: dDate.format('D') })),
|
|
2678
2687
|
React.createElement(Select, { invalid: invalid, onChange: handleYearChange, options: years, readOnly: readOnly, style: { borderRadius: '0px 4px 4px 0px' }, value: dDate.format('YYYY') }))));
|
|
2679
2688
|
};
|
|
2680
|
-
var templateObject_1$
|
|
2689
|
+
var templateObject_1$f, templateObject_2$d;
|
|
2681
2690
|
|
|
2682
|
-
var Scrim$1 = styled.div(templateObject_1$
|
|
2691
|
+
var Scrim$1 = styled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 9998;\n background: ", ";\n"], ["\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 9998;\n background: ", ";\n"])), function (_a) {
|
|
2683
2692
|
var $scrim = _a.$scrim;
|
|
2684
2693
|
return ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent');
|
|
2685
2694
|
});
|
|
@@ -2718,10 +2727,10 @@ var Drawer = function (_a) {
|
|
|
2718
2727
|
primaryButton ? React.createElement(Button, __assign({}, primaryButton, { format: 'primary' })) : null)) : null),
|
|
2719
2728
|
scrim ? React.createElement(Scrim$1, { "$scrim": scrim, onClick: onClose }) : null));
|
|
2720
2729
|
};
|
|
2721
|
-
var templateObject_1$
|
|
2730
|
+
var templateObject_1$e, templateObject_2$c, templateObject_3$b, templateObject_4$7, templateObject_5$5, templateObject_6$3;
|
|
2722
2731
|
|
|
2723
|
-
var Wrapper$
|
|
2724
|
-
var LabelRow = styled.div(templateObject_1$
|
|
2732
|
+
var Wrapper$a = styled.div(function (props) { return (__assign({ margin: '0px 0px 18px 0px' }, props.style)); });
|
|
2733
|
+
var LabelRow = styled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0 0 4px 0;\n box-sizing: border-box;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0 0 4px 0;\n box-sizing: border-box;\n"])));
|
|
2725
2734
|
var Label$2 = styled.label(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 500;\n line-height: 1em;\n font-family: ", ";\n color: ", ";\n"], ["\n font-size: ", ";\n font-weight: 500;\n line-height: 1em;\n font-family: ", ";\n color: ", ";\n"])), FontSizes.DEFAULT, FontStyles.DEFAULT, Colors.BLACK.Hex);
|
|
2726
2735
|
var Required = styled.span(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n color: ", ";\n margin-left: 4px;\n"], ["\n color: ", ";\n margin-left: 4px;\n"])), Colors.RED.Hex);
|
|
2727
2736
|
var Action = styled.span(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 500;\n line-height: 1em;\n font-family: ", ";\n color: ", ";\n cursor: pointer;\n"], ["\n font-size: ", ";\n font-weight: 500;\n line-height: 1em;\n font-family: ", ";\n color: ", ";\n cursor: pointer;\n"])), FontSizes.DEFAULT, FontStyles.DEFAULT, Colors.PRIMARY.Hex);
|
|
@@ -2729,7 +2738,7 @@ var Description = styled.div(templateObject_5$4 || (templateObject_5$4 = __makeT
|
|
|
2729
2738
|
var Validation = styled.div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 400;\n line-height: 1.3em;\n font-family: ", ";\n color: ", ";\n margin: 4px 0 0 0;\n box-sizing: border-box;\n"], ["\n font-size: ", ";\n font-weight: 400;\n line-height: 1.3em;\n font-family: ", ";\n color: ", ";\n margin: 4px 0 0 0;\n box-sizing: border-box;\n"])), FontSizes.SMALL, FontStyles.DEFAULT, Colors.RED.Hex);
|
|
2730
2739
|
var Field = function (_a) {
|
|
2731
2740
|
var action = _a.action, children = _a.children, validationText = _a.validationText, label = _a.label, description = _a.description, required = _a.required, htmlFor = _a.htmlFor, style = _a.style, accessibleProps = __rest(_a, ["action", "children", "validationText", "label", "description", "required", "htmlFor", "style"]);
|
|
2732
|
-
return (React.createElement(Wrapper$
|
|
2741
|
+
return (React.createElement(Wrapper$a, __assign({ style: style }, accessibleProps),
|
|
2733
2742
|
React.createElement(LabelRow, null,
|
|
2734
2743
|
React.createElement(Label$2, { htmlFor: htmlFor },
|
|
2735
2744
|
label,
|
|
@@ -2739,9 +2748,9 @@ var Field = function (_a) {
|
|
|
2739
2748
|
children,
|
|
2740
2749
|
validationText ? React.createElement(Validation, null, validationText) : null));
|
|
2741
2750
|
};
|
|
2742
|
-
var templateObject_1$
|
|
2751
|
+
var templateObject_1$d, templateObject_2$b, templateObject_3$a, templateObject_4$6, templateObject_5$4, templateObject_6$2;
|
|
2743
2752
|
|
|
2744
|
-
var Wrapper$
|
|
2753
|
+
var Wrapper$9 = styled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n display: flex;\n gap: 16px;\n padding: 20px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n border: 1px dashed ", ";\n background-color: ", ";\n"], ["\n display: flex;\n gap: 16px;\n padding: 20px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n border: 1px dashed ", ";\n background-color: ", ";\n"])), function (_a) {
|
|
2745
2754
|
var $isDragOver = _a.$isDragOver;
|
|
2746
2755
|
return ($isDragOver ? "".concat(Colors.PRIMARY.Hex) : '#ccc');
|
|
2747
2756
|
}, function (_a) {
|
|
@@ -2821,7 +2830,7 @@ var FileUpload = function (_a) {
|
|
|
2821
2830
|
onFileDelete(files[index]);
|
|
2822
2831
|
};
|
|
2823
2832
|
return (React.createElement(React.Fragment, null,
|
|
2824
|
-
React.createElement(Wrapper$
|
|
2833
|
+
React.createElement(Wrapper$9, __assign({ "$isDragOver": dragOver, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop }, accessibleProps),
|
|
2825
2834
|
files.length > 0 && (React.createElement(Files, null, Array.from(files).map(function (singleFile, index) {
|
|
2826
2835
|
var _a;
|
|
2827
2836
|
return (React.createElement(File, { key: index },
|
|
@@ -2838,7 +2847,7 @@ var FileUpload = function (_a) {
|
|
|
2838
2847
|
React.createElement(Copy, { align: 'center', children: 'Drag & drop files here or click to choose', type: 'bold' }),
|
|
2839
2848
|
React.createElement(Copy, { align: 'center', children: "".concat(maxFileSize, " MB max file size"), color: 'GRAY' }))))));
|
|
2840
2849
|
};
|
|
2841
|
-
var templateObject_1$
|
|
2850
|
+
var templateObject_1$c, templateObject_2$a, templateObject_3$9, templateObject_4$5, templateObject_5$3, templateObject_6$1, templateObject_7$1, templateObject_8;
|
|
2842
2851
|
|
|
2843
2852
|
var formatAsPhone = function (number) {
|
|
2844
2853
|
var formatted_value = "".concat(number).replace(/[^0-9.]/g, '');
|
|
@@ -2867,7 +2876,7 @@ var formatAsSsn = function (number) {
|
|
|
2867
2876
|
return formatted_value;
|
|
2868
2877
|
};
|
|
2869
2878
|
|
|
2870
|
-
var StyledInput = styled.input(templateObject_1$
|
|
2879
|
+
var StyledInput = styled.input(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n background-color: ", ";\n border-radius: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n font-size: ", ";\n font-weight: 400;\n font-family: ", ";\n line-height: 1.28em;\n color: ", ";\n position: relative;\n height: auto;\n padding: 10px;\n opacity: ", ";\n box-shadow: none;\n outline: none;\n margin: 0px;\n text-indent: 0px;\n --webkit-appearance: none;\n box-sizing: border-box;\n display: block;\n width: 100%;\n &:focus {\n border-color: ", ";\n }\n"], ["\n background-color: ", ";\n border-radius: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n font-size: ", ";\n font-weight: 400;\n font-family: ", ";\n line-height: 1.28em;\n color: ", ";\n position: relative;\n height: auto;\n padding: 10px;\n opacity: ", ";\n box-shadow: none;\n outline: none;\n margin: 0px;\n text-indent: 0px;\n --webkit-appearance: none;\n box-sizing: border-box;\n display: block;\n width: 100%;\n &:focus {\n border-color: ", ";\n }\n"])), function (props) { return (props.$readOnly ? '#f5f5f5' : '#ffffff'); }, function (props) { return (props.$suffix ? '4px 0px 0px 4px' : '4px'); }, function (props) { return (props.$invalid && !props.$readOnly ? Colors.RED.Hex : '#cccccc'); }, FontSizes.DEFAULT, FontStyles.DEFAULT, function (props) { return (props.$invalid && !props.$readOnly ? Colors.RED.Hex : Colors.BLACK.Hex); }, function (props) { return (props.$readOnly ? 0.6 : 1); }, function (props) { return (props.$readOnly ? '#cccccc' : Colors.PRIMARY.Hex); });
|
|
2871
2880
|
var StyledSuffix = styled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 10px;\n height: auto;\n background: #f5f5f5;\n border-width: 1px 1px 1px 0px;\n border-style: solid;\n border-color: #cccccc;\n border-radius: 0px 4px 4px 0px;\n font-family: ", ";\n font-style: normal;\n font-weight: 400;\n font-size: ", ";\n color: Colors.BLACK.Hex;\n"], ["\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 10px;\n height: auto;\n background: #f5f5f5;\n border-width: 1px 1px 1px 0px;\n border-style: solid;\n border-color: #cccccc;\n border-radius: 0px 4px 4px 0px;\n font-family: ", ";\n font-style: normal;\n font-weight: 400;\n font-size: ", ";\n color: Colors.BLACK.Hex;\n"])), FontStyles.DEFAULT, FontSizes.DEFAULT);
|
|
2872
2881
|
var StyledWrapper = styled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
2873
2882
|
var StyledTextarea = styled.textarea(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 4px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n font-size: ", ";\n font-weight: 400;\n font-family: ", ";\n line-height: 1.6em;\n color: ", ";\n position: relative;\n height: ", ";\n padding: 10px;\n opacity: ", ";\n box-shadow: none;\n outline: none;\n padding: 10px,\n margin: 0px,\n text-indent: 0px,\n --webkit-appearance: none;\n box-sizing: border-box;\n display: block;\n width: 100%;\n &:focus {\n border-color: ", ";\n }\n"], ["\n background-color: ", ";\n border-radius: 4px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n font-size: ", ";\n font-weight: 400;\n font-family: ", ";\n line-height: 1.6em;\n color: ", ";\n position: relative;\n height: ", ";\n padding: 10px;\n opacity: ", ";\n box-shadow: none;\n outline: none;\n padding: 10px,\n margin: 0px,\n text-indent: 0px,\n --webkit-appearance: none;\n box-sizing: border-box;\n display: block;\n width: 100%;\n &:focus {\n border-color: ", ";\n }\n"])), function (props) { return (props.$readOnly ? '#f5f5f5' : '#ffffff'); }, function (props) { return (props.$invalid && !props.$readOnly ? Colors.RED.Hex : '#cccccc'); }, FontSizes.DEFAULT, FontStyles.DEFAULT, function (props) { return (props.$invalid && !props.$readOnly ? Colors.RED.Hex : Colors.BLACK.Hex); }, function (props) { return props.$height || '40px'; }, function (props) { return (props.$readOnly ? 0.6 : 1); }, function (props) { return (props.$readOnly ? '#cccccc' : Colors.PRIMARY.Hex); });
|
|
@@ -2915,7 +2924,14 @@ var Input$1 = function (_a) {
|
|
|
2915
2924
|
React.createElement(StyledInput, __assign({ "$invalid": invalid, "$readOnly": readOnly, "$suffix": suffix, max: max, maxLength: maxLength, min: min, onBlur: onBlur, onChange: handleInputChange, onKeyDown: onKeyDown, placeholder: placeholder, step: step, type: type, value: formatted_value }, accessibleProps)),
|
|
2916
2925
|
suffix && React.createElement(StyledSuffix, null, suffix)));
|
|
2917
2926
|
};
|
|
2918
|
-
var templateObject_1$
|
|
2927
|
+
var templateObject_1$b, templateObject_2$9, templateObject_3$8, templateObject_4$4;
|
|
2928
|
+
|
|
2929
|
+
var Wrapper$8 = styled.a(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n letter-spacing: ", ";\n font-weight: 500;\n font-style: normal;\n text-decoration: 'none';\n font-family: 'Roboto', Helvetica, Arial, sans-serif;\n margin: 0px;\n padding: 0px;\n box-sizing: border-box;\n cursor: pointer;\n"], ["\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n letter-spacing: ", ";\n font-weight: 500;\n font-style: normal;\n text-decoration: 'none';\n font-family: 'Roboto', Helvetica, Arial, sans-serif;\n margin: 0px;\n padding: 0px;\n box-sizing: border-box;\n cursor: pointer;\n"])), Colors.PRIMARY.Hex, function (props) { return (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT); }, function (props) { return (props.$small ? '1.5em' : '1.6em'); }, function (props) { return (props.$small ? '1px' : '0px'); });
|
|
2930
|
+
var Link = function (_a) {
|
|
2931
|
+
var children = _a.children, onClick = _a.onClick, small = _a.small, accessibleProps = __rest(_a, ["children", "onClick", "small"]);
|
|
2932
|
+
return (React.createElement(Wrapper$8, __assign({ "$small": small, onClick: onClick }, accessibleProps), children));
|
|
2933
|
+
};
|
|
2934
|
+
var templateObject_1$a;
|
|
2919
2935
|
|
|
2920
2936
|
var colorMapping = {
|
|
2921
2937
|
black: {
|
|
@@ -3025,20 +3041,20 @@ var Trigger = styled.div(templateObject_2$6 || (templateObject_2$6 = __makeTempl
|
|
|
3025
3041
|
}
|
|
3026
3042
|
}, function (props) { return (props.$readOnly ? '#f5f5f5' : '#ffffff'); });
|
|
3027
3043
|
var Value = styled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n line-height: 2.9em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: 100%;\n"], ["\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n line-height: 2.9em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: 100%;\n"])), Colors.BLACK.Hex, FontStyles.DEFAULT, FontSizes.DEFAULT);
|
|
3028
|
-
var Options = styled.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n background: #fff;\n border-color: ", ";\n border-radius: 0px 0px 4px 4px;\n border-style: solid;\n border-top: none;\n border-width: 1px;\n left: 0;\n position: absolute;\n right: 0;\n z-index:
|
|
3029
|
-
var Scrim = styled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n bottom: 0;\n left: 0;\n position: fixed;\n right: 0;\n top: 0;\n z-index:
|
|
3044
|
+
var Options = styled.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n background: #fff;\n border-color: ", ";\n border-radius: 0px 0px 4px 4px;\n border-style: solid;\n border-top: none;\n border-width: 1px;\n left: 0;\n position: absolute;\n right: 0;\n z-index: 10;\n"], ["\n background: #fff;\n border-color: ", ";\n border-radius: 0px 0px 4px 4px;\n border-style: solid;\n border-top: none;\n border-width: 1px;\n left: 0;\n position: absolute;\n right: 0;\n z-index: 10;\n"])), Colors.PRIMARY.Hex);
|
|
3045
|
+
var Scrim = styled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n bottom: 0;\n left: 0;\n position: fixed;\n right: 0;\n top: 0;\n z-index: 9;\n"], ["\n bottom: 0;\n left: 0;\n position: fixed;\n right: 0;\n top: 0;\n z-index: 9;\n"])));
|
|
3030
3046
|
var MultiSelect = function (_a) {
|
|
3031
|
-
var readOnly = _a.readOnly, _b = _a.displayCount, displayCount = _b === void 0 ? 3 : _b, invalid = _a.invalid, onChange = _a.onChange, _c = _a.options, options = _c === void 0 ? [] : _c,
|
|
3032
|
-
var
|
|
3047
|
+
var readOnly = _a.readOnly, _b = _a.displayCount, displayCount = _b === void 0 ? 3 : _b, invalid = _a.invalid, onChange = _a.onChange, _c = _a.options, options = _c === void 0 ? [] : _c, _d = _a.selected, selected = _d === void 0 ? [] : _d, showSelectAll = _a.showSelectAll, accessibleProps = __rest(_a, ["readOnly", "displayCount", "invalid", "onChange", "options", "selected", "showSelectAll"]);
|
|
3048
|
+
var _e = useState(false), showOptions = _e[0], setShowOptions = _e[1];
|
|
3033
3049
|
var selected_options = options.filter(function (o) { return selected.includes(o.value); });
|
|
3034
3050
|
return (React.createElement(Wrapper$5, null,
|
|
3035
3051
|
React.createElement(Trigger, __assign({ "$invalid": invalid, "$readOnly": readOnly, "$showOptions": showOptions, onClick: readOnly ? undefined : setShowOptions.bind(null, !showOptions) }, accessibleProps),
|
|
3036
3052
|
React.createElement(Value, null, selected.length > 0 && selected.length <= displayCount
|
|
3037
3053
|
? selected_options.map(function (o) { return o.label || o.value; }).join(', ')
|
|
3038
|
-
: "".concat(
|
|
3039
|
-
React.createElement(Icon, { color: Colors.BLACK.Hex, path: mdiChevronDown, size: '22px' })),
|
|
3054
|
+
: "".concat(selected_options.length, " Selected")),
|
|
3055
|
+
React.createElement(Icon, { color: Colors.BLACK.Hex, path: showOptions ? mdiChevronUp : mdiChevronDown, size: '22px' })),
|
|
3040
3056
|
showOptions ? (React.createElement(Options, null,
|
|
3041
|
-
React.createElement(Checklist, {
|
|
3057
|
+
React.createElement(Checklist, { onChange: onChange, options: options, selected: selected, showSelectAll: showSelectAll }))) : null,
|
|
3042
3058
|
showOptions ? React.createElement(Scrim, { onClick: setShowOptions.bind(null, !showOptions) }) : null));
|
|
3043
3059
|
};
|
|
3044
3060
|
var templateObject_1$7, templateObject_2$6, templateObject_3$5, templateObject_4$2, templateObject_5$1;
|
|
@@ -3174,5 +3190,5 @@ var ZeroState = function (_a) {
|
|
|
3174
3190
|
};
|
|
3175
3191
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
3176
3192
|
|
|
3177
|
-
export { Accordion, ActionDialog, Alert, BulkActionBar, Button, Checkbox, Checklist, Copy, DatePicker, Drawer, Field, FileUpload, Heading, Input$1 as Input, Logo, Modal, MoreMenu, MultiSelect, Pagination, Radio, RadioList, Select, Table, Tabs, Tag, Toggle, ZeroState };
|
|
3193
|
+
export { Accordion, ActionDialog, Alert, BulkActionBar, Button, Checkbox, Checklist, Copy, DatePicker, Drawer, Field, FileUpload, Heading, Input$1 as Input, Link, Logo, Modal, MoreMenu, MultiSelect, Pagination, Radio, RadioList, Select, Table, Tabs, Tag, Toggle, ZeroState };
|
|
3178
3194
|
//# sourceMappingURL=index.js.map
|