@hexure/ui 1.6.7 → 1.6.8
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 +30 -15
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/components/DatePicker/DatePicker.d.ts +5 -0
- package/dist/cjs/types/components/Input/Input.d.ts +4 -0
- package/dist/cjs/types/components/MultiSelect/MultiSelect.d.ts +4 -0
- package/dist/cjs/types/components/Select/Select.d.ts +2 -4
- package/dist/esm/index.js +30 -15
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/DatePicker/DatePicker.d.ts +5 -0
- package/dist/esm/types/components/Input/Input.d.ts +4 -0
- package/dist/esm/types/components/MultiSelect/MultiSelect.d.ts +4 -0
- package/dist/esm/types/components/Select/Select.d.ts +2 -4
- package/dist/index.d.ts +19 -4
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
|
@@ -2593,12 +2593,15 @@ var dayjs_min = {exports: {}};
|
|
|
2593
2593
|
var dayjs_minExports = dayjs_min.exports;
|
|
2594
2594
|
var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
|
|
2595
2595
|
|
|
2596
|
-
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) {
|
|
2596
|
+
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 width: ", ";\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 width: ", ";\n"])), function (props) { return (props.$readOnly ? '#f5f5f5' : '#ffffff'); }, function (props) { return (props.$invalid ? Colors.RED.Hex : '#cccccc'); }, function (_a) {
|
|
2597
2597
|
var $style = _a.$style;
|
|
2598
2598
|
return ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px';
|
|
2599
2599
|
}, function (_a) {
|
|
2600
2600
|
var $style = _a.$style;
|
|
2601
2601
|
return ($style === null || $style === void 0 ? void 0 : $style.flexGrow) || 0;
|
|
2602
|
+
}, function (_a) {
|
|
2603
|
+
var $style = _a.$style;
|
|
2604
|
+
return ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto';
|
|
2602
2605
|
});
|
|
2603
2606
|
var Trigger$1 = styled.select(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n appearance: none;\n box-shadow: none;\n outline: none;\n border: none;\n color: ", ";\n font-size: ", ";\n font-weight: 400;\n font-family: ", ";\n line-height: 2.9em;\n background-color: transparent;\n background-image: none;\n cursor: pointer;\n width: 100%;\n box-sizing: border-box;\n padding: 0px 30px 0px 10px;\n box-sizing: border-box;\n position: relative;\n z-index: 2;\n"], ["\n appearance: none;\n box-shadow: none;\n outline: none;\n border: none;\n color: ", ";\n font-size: ", ";\n font-weight: 400;\n font-family: ", ";\n line-height: 2.9em;\n background-color: transparent;\n background-image: none;\n cursor: pointer;\n width: 100%;\n box-sizing: border-box;\n padding: 0px 30px 0px 10px;\n box-sizing: border-box;\n position: relative;\n z-index: 2;\n"])), Colors.BLACK.Hex, FontSizes.DEFAULT, FontStyles.DEFAULT);
|
|
2604
2607
|
var IconWrapper$2 = styled(Icon)(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n position: absolute;\n right: 9px;\n z-index: 1;\n"], ["\n position: absolute;\n right: 9px;\n z-index: 1;\n"])));
|
|
@@ -2621,10 +2624,13 @@ var Select = function (_a) {
|
|
|
2621
2624
|
};
|
|
2622
2625
|
var templateObject_1$g, templateObject_2$e, templateObject_3$c;
|
|
2623
2626
|
|
|
2624
|
-
var DatePickerWrapper = styled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])))
|
|
2625
|
-
var
|
|
2627
|
+
var DatePickerWrapper = styled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n display: flex;\n width: ", ";\n"], ["\n display: flex;\n width: ", ";\n"])), function (_a) {
|
|
2628
|
+
var $style = _a.$style;
|
|
2629
|
+
return ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto';
|
|
2630
|
+
});
|
|
2631
|
+
var Middle = styled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n margin: 0px -1px;\n flex-grow: 1;\n"], ["\n margin: 0px -1px;\n flex-grow: 1;\n"])));
|
|
2626
2632
|
var DatePicker = function (_a) {
|
|
2627
|
-
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;
|
|
2633
|
+
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, style = _a.style;
|
|
2628
2634
|
var dMaxDate = maxDate ? dayjs(maxDate) : dayjs();
|
|
2629
2635
|
var dMinDate = minDate ? dayjs(minDate) : dMaxDate.subtract(100, 'year');
|
|
2630
2636
|
var _f = React.useState(dayjs(date)), dDate = _f[0], setDate = _f[1];
|
|
@@ -2676,11 +2682,11 @@ var DatePicker = function (_a) {
|
|
|
2676
2682
|
setDate(new_date);
|
|
2677
2683
|
};
|
|
2678
2684
|
return (React.createElement(React.Fragment, null,
|
|
2679
|
-
React.createElement(DatePickerWrapper,
|
|
2680
|
-
React.createElement(Select, { invalid: invalid, onChange: handleMonthChange, options: months, readOnly: readOnly, style: { borderRadius: '4px 0px 0px 4px' }, value: dDate.format('M') }),
|
|
2685
|
+
React.createElement(DatePickerWrapper, { "$style": style },
|
|
2686
|
+
React.createElement(Select, { invalid: invalid, onChange: handleMonthChange, options: months, readOnly: readOnly, style: { borderRadius: '4px 0px 0px 4px', flexGrow: 3 }, value: dDate.format('M') }),
|
|
2681
2687
|
React.createElement(Middle, null,
|
|
2682
2688
|
React.createElement(Select, { invalid: invalid, onChange: handleDayChange, options: dayOptions, readOnly: readOnly, style: { borderRadius: '0px' }, value: dDate.format('D') })),
|
|
2683
|
-
React.createElement(Select, { invalid: invalid, onChange: handleYearChange, options: years, readOnly: readOnly, style: { borderRadius: '0px 4px 4px 0px' }, value: dDate.format('YYYY') }))));
|
|
2689
|
+
React.createElement(Select, { invalid: invalid, onChange: handleYearChange, options: years, readOnly: readOnly, style: { borderRadius: '0px 4px 4px 0px', flexGrow: 2 }, value: dDate.format('YYYY') }))));
|
|
2684
2690
|
};
|
|
2685
2691
|
var templateObject_1$f, templateObject_2$d;
|
|
2686
2692
|
|
|
@@ -2886,10 +2892,16 @@ var formatAsSsn = function (number) {
|
|
|
2886
2892
|
|
|
2887
2893
|
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); });
|
|
2888
2894
|
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);
|
|
2889
|
-
var StyledWrapper = styled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])))
|
|
2890
|
-
var
|
|
2895
|
+
var StyledWrapper = styled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n display: flex;\n width: ", ";\n"], ["\n display: flex;\n width: ", ";\n"])), function (_a) {
|
|
2896
|
+
var $style = _a.$style;
|
|
2897
|
+
return ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto';
|
|
2898
|
+
});
|
|
2899
|
+
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: ", ";\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: ", ";\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 (_a) {
|
|
2900
|
+
var $style = _a.$style;
|
|
2901
|
+
return ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto';
|
|
2902
|
+
}, function (props) { return (props.$readOnly ? '#cccccc' : Colors.PRIMARY.Hex); });
|
|
2891
2903
|
var Input$1 = function (_a) {
|
|
2892
|
-
var format = _a.format, suffix = _a.suffix, height = _a.height, invalid = _a.invalid, max = _a.max, maxLength = _a.maxLength, min = _a.min, onBlur = _a.onBlur, onChange = _a.onChange, onKeyDown = _a.onKeyDown, placeholder = _a.placeholder, readOnly = _a.readOnly, step = _a.step, _b = _a.type, type = _b === void 0 ? 'text' : _b, _c = _a.value, value = _c === void 0 ? '' : _c, accessibleProps = __rest(_a, ["format", "suffix", "height", "invalid", "max", "maxLength", "min", "onBlur", "onChange", "onKeyDown", "placeholder", "readOnly", "step", "type", "value"]);
|
|
2904
|
+
var format = _a.format, suffix = _a.suffix, height = _a.height, invalid = _a.invalid, max = _a.max, maxLength = _a.maxLength, min = _a.min, onBlur = _a.onBlur, onChange = _a.onChange, onKeyDown = _a.onKeyDown, placeholder = _a.placeholder, readOnly = _a.readOnly, step = _a.step, style = _a.style, _b = _a.type, type = _b === void 0 ? 'text' : _b, _c = _a.value, value = _c === void 0 ? '' : _c, accessibleProps = __rest(_a, ["format", "suffix", "height", "invalid", "max", "maxLength", "min", "onBlur", "onChange", "onKeyDown", "placeholder", "readOnly", "step", "style", "type", "value"]);
|
|
2893
2905
|
var handleInputChange = function (e) {
|
|
2894
2906
|
if (format === 'currency' || format === 'currency_decimal') {
|
|
2895
2907
|
e.target.value = e.target.value.replace(/[^0-9.]/g, '');
|
|
@@ -2928,7 +2940,7 @@ var Input$1 = function (_a) {
|
|
|
2928
2940
|
if (format === 'ssn' && type !== 'password') {
|
|
2929
2941
|
formatted_value = formatAsSsn(value);
|
|
2930
2942
|
}
|
|
2931
|
-
return type === 'textarea' ? (React.createElement(StyledTextarea, __assign({ "$height": height, "$invalid": invalid, "$readOnly": readOnly, maxLength: maxLength, onBlur: onBlur, onChange: handleTextareaChange, placeholder: placeholder, value: value }, accessibleProps))) : (React.createElement(StyledWrapper,
|
|
2943
|
+
return type === 'textarea' ? (React.createElement(StyledTextarea, __assign({ "$height": height, "$invalid": invalid, "$readOnly": readOnly, "$style": style, maxLength: maxLength, onBlur: onBlur, onChange: handleTextareaChange, placeholder: placeholder, value: value }, accessibleProps))) : (React.createElement(StyledWrapper, { "$style": style },
|
|
2932
2944
|
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)),
|
|
2933
2945
|
suffix && React.createElement(StyledSuffix, null, suffix)));
|
|
2934
2946
|
};
|
|
@@ -3036,8 +3048,11 @@ var MoreMenu = function (_a) {
|
|
|
3036
3048
|
};
|
|
3037
3049
|
var templateObject_1$8, templateObject_2$7, templateObject_3$6;
|
|
3038
3050
|
|
|
3039
|
-
var Wrapper$5 = styled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])))
|
|
3040
|
-
var
|
|
3051
|
+
var Wrapper$5 = styled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n position: relative;\n width: ", ";\n"], ["\n position: relative;\n width: ", ";\n"])), function (_a) {
|
|
3052
|
+
var $style = _a.$style;
|
|
3053
|
+
return ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto';
|
|
3054
|
+
});
|
|
3055
|
+
var Trigger = styled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: ", ";\n height: 40px;\n padding: 0 10px;\n position: relative;\n cursor: pointer;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n background-color: ", ";\n background-image: none;\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: space-between;\n z-index: 1;\n"], ["\n box-sizing: border-box;\n border-radius: ", ";\n height: 40px;\n padding: 0 10px;\n position: relative;\n cursor: pointer;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n background-color: ", ";\n background-image: none;\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: space-between;\n z-index: 1;\n"])), function (props) { return (props.$showOptions ? '4px 4px 0px 0px' : '4px'); }, function (props) {
|
|
3041
3056
|
if (props.$invalid) {
|
|
3042
3057
|
return Colors.RED.Hex;
|
|
3043
3058
|
}
|
|
@@ -3052,10 +3067,10 @@ var Value = styled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplat
|
|
|
3052
3067
|
var Options = styled.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n background: #fff;\n box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);\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 max-height: 220px;\n overflow: auto;\n"], ["\n background: #fff;\n box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);\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 max-height: 220px;\n overflow: auto;\n"])), Colors.PRIMARY.Hex);
|
|
3053
3068
|
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"])));
|
|
3054
3069
|
var MultiSelect = function (_a) {
|
|
3055
|
-
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"]);
|
|
3070
|
+
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, style = _a.style, accessibleProps = __rest(_a, ["readOnly", "displayCount", "invalid", "onChange", "options", "selected", "showSelectAll", "style"]);
|
|
3056
3071
|
var _e = React.useState(false), showOptions = _e[0], setShowOptions = _e[1];
|
|
3057
3072
|
var selected_options = options.filter(function (o) { return selected.includes(o.value); });
|
|
3058
|
-
return (React.createElement(Wrapper$5,
|
|
3073
|
+
return (React.createElement(Wrapper$5, { "$style": style },
|
|
3059
3074
|
React.createElement(Trigger, __assign({ "$invalid": invalid, "$readOnly": readOnly, "$showOptions": showOptions, onClick: readOnly ? undefined : setShowOptions.bind(null, !showOptions) }, accessibleProps),
|
|
3060
3075
|
React.createElement(Value, null, selected.length > 0 && selected.length <= displayCount
|
|
3061
3076
|
? selected_options.map(function (o) { return o.label || o.value; }).join(', ')
|