@galaxy-ds/core 2.1.5 → 2.1.7
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/Input/Input.stories.d.ts +356 -0
- package/dist/Input/Input.types.d.ts +5 -0
- package/dist/index.esm.js +51 -16
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +51 -16
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -875,7 +875,7 @@ var autocompleteOverrides$1 = {
|
|
|
875
875
|
marginBottom: 0,
|
|
876
876
|
},
|
|
877
877
|
'& .MuiAutocomplete-input:first-of-type.MuiInputBase-input': {
|
|
878
|
-
padding: '0
|
|
878
|
+
padding: '0 8px',
|
|
879
879
|
},
|
|
880
880
|
},
|
|
881
881
|
inputRoot: {
|
|
@@ -1195,6 +1195,23 @@ var dropdownOverrides$1 = {
|
|
|
1195
1195
|
fontSize: 12,
|
|
1196
1196
|
display: 'none',
|
|
1197
1197
|
},
|
|
1198
|
+
root: function () { return ({
|
|
1199
|
+
'&.MuiInputBase-adornedStart': {
|
|
1200
|
+
'.MuiSvgIcon-root': {
|
|
1201
|
+
fontSize: 16,
|
|
1202
|
+
left: 8,
|
|
1203
|
+
position: 'absolute',
|
|
1204
|
+
margin: 0,
|
|
1205
|
+
},
|
|
1206
|
+
},
|
|
1207
|
+
'&.customSelectInputBackground': {
|
|
1208
|
+
select: {
|
|
1209
|
+
'&.MuiOutlinedInput-input': {
|
|
1210
|
+
padding: 0,
|
|
1211
|
+
},
|
|
1212
|
+
},
|
|
1213
|
+
},
|
|
1214
|
+
}); },
|
|
1198
1215
|
select: function (_a) {
|
|
1199
1216
|
var theme = _a.theme;
|
|
1200
1217
|
return (__assign(__assign({}, theme.typography.body1), { lineHeight: '1.375rem', background: "url(\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.0625 3.66666L9.9375 4.54166L6 8.47916L2.0625 4.54166L2.9375 3.66666L6 6.72916L9.0625 3.66666Z' fill='%23444444'/%3E%3C/svg%3E\") center right 3px no-repeat", cursor: 'default', '&.MuiInputBase-input': {
|
|
@@ -1204,12 +1221,16 @@ var dropdownOverrides$1 = {
|
|
|
1204
1221
|
}, '.customLargeSize &': {
|
|
1205
1222
|
height: 30,
|
|
1206
1223
|
lineHeight: '30px',
|
|
1224
|
+
}, '&.MuiOutlinedInput-input': {
|
|
1225
|
+
zIndex: '1001',
|
|
1226
|
+
paddingLeft: 8,
|
|
1227
|
+
}, '&.MuiInputBase-inputAdornedStart.MuiOutlinedInput-input': {
|
|
1228
|
+
padding: '0 24px 0 32px',
|
|
1229
|
+
zIndex: '1001',
|
|
1207
1230
|
}, '& .customSelectInputBackground': {
|
|
1208
1231
|
borderColor: theme.palette.grey[500],
|
|
1209
1232
|
cursor: 'default',
|
|
1210
1233
|
'&:hover': {
|
|
1211
|
-
// backgroundColor: pallettes.brand.background.accent.lighter,
|
|
1212
|
-
// borderColor: pallettes.brand.utility.accent.dark,
|
|
1213
1234
|
cursor: 'default',
|
|
1214
1235
|
},
|
|
1215
1236
|
} }));
|
|
@@ -1345,17 +1366,16 @@ var inputBaseOverrides$1 = {
|
|
|
1345
1366
|
},
|
|
1346
1367
|
},
|
|
1347
1368
|
'&.customSelectInputBackground.MuiInputBase-adornedStart > .MuiSvgIcon-root': {
|
|
1348
|
-
position: 'absolute',
|
|
1349
1369
|
fontSize: 16,
|
|
1350
1370
|
},
|
|
1351
1371
|
'&.customSelectInputBackground .MuiInputBase-inputAdornedStart': {
|
|
1352
|
-
paddingLeft:
|
|
1372
|
+
paddingLeft: 12,
|
|
1353
1373
|
},
|
|
1354
1374
|
});
|
|
1355
1375
|
},
|
|
1356
1376
|
adornedStart: {
|
|
1357
1377
|
'& svg:first-of-type': {
|
|
1358
|
-
marginLeft:
|
|
1378
|
+
marginLeft: 12,
|
|
1359
1379
|
},
|
|
1360
1380
|
},
|
|
1361
1381
|
input: {
|
|
@@ -1478,8 +1498,8 @@ var listSubheaderOverrides$1 = {
|
|
|
1478
1498
|
}, '&.MuiListSubheader-gutters': {
|
|
1479
1499
|
paddingTop: 0,
|
|
1480
1500
|
paddingBottom: 0,
|
|
1481
|
-
paddingLeft:
|
|
1482
|
-
paddingRight:
|
|
1501
|
+
paddingLeft: 8,
|
|
1502
|
+
paddingRight: 8,
|
|
1483
1503
|
} }));
|
|
1484
1504
|
},
|
|
1485
1505
|
},
|
|
@@ -1544,7 +1564,7 @@ var menuItemOverrides$1 = {
|
|
|
1544
1564
|
var _b;
|
|
1545
1565
|
var theme = _a.theme;
|
|
1546
1566
|
return ({
|
|
1547
|
-
'&.MuiMenuItem-root': __assign(__assign({}, theme.typography.body1), (_b = { lineHeight: '1.25rem',
|
|
1567
|
+
'&.MuiMenuItem-root': __assign(__assign({}, theme.typography.body1), (_b = { lineHeight: '1.25rem', paddingLeft: 8, paddingTop: 0, paddingBottom: 0, backgroundColor: theme.palette.grey[50], transition: 'none' }, _b[theme.breakpoints.down('sm')] = {
|
|
1548
1568
|
minHeight: 40,
|
|
1549
1569
|
}, _b['@media (hover: none)'] = {
|
|
1550
1570
|
minHeight: 40,
|
|
@@ -1570,7 +1590,7 @@ var menuItemOverrides$1 = {
|
|
|
1570
1590
|
lineHeight: '1.25rem',
|
|
1571
1591
|
},
|
|
1572
1592
|
}, _b['& .MuiFormControlLabel-root'] = {
|
|
1573
|
-
marginRight:
|
|
1593
|
+
marginRight: 4,
|
|
1574
1594
|
}, _b['&.gds-drawer-menu-item-dark'] = {
|
|
1575
1595
|
backgroundColor: theme.palette.primary.main,
|
|
1576
1596
|
color: theme.palette.grey[200],
|
|
@@ -2769,10 +2789,17 @@ var dropdownOverrides = {
|
|
|
2769
2789
|
'.MuiSvgIcon-root': {
|
|
2770
2790
|
fontSize: 16,
|
|
2771
2791
|
left: 16,
|
|
2772
|
-
position: '
|
|
2792
|
+
position: 'absolute',
|
|
2773
2793
|
margin: 0,
|
|
2774
2794
|
},
|
|
2775
2795
|
},
|
|
2796
|
+
'&.customSelectInputBackground': {
|
|
2797
|
+
select: {
|
|
2798
|
+
'&.MuiOutlinedInput-input': {
|
|
2799
|
+
padding: 0,
|
|
2800
|
+
},
|
|
2801
|
+
},
|
|
2802
|
+
},
|
|
2776
2803
|
'&:hover': {
|
|
2777
2804
|
backgroundColor: theme.palette.primary.transparent,
|
|
2778
2805
|
borderColor: theme.palette.primary.main,
|
|
@@ -2820,7 +2847,11 @@ var dropdownOverrides = {
|
|
|
2820
2847
|
fontWeight: 600,
|
|
2821
2848
|
letterSpacing: '.02em',
|
|
2822
2849
|
'&.MuiOutlinedInput-input': {
|
|
2823
|
-
|
|
2850
|
+
zIndex: '1001',
|
|
2851
|
+
},
|
|
2852
|
+
'&.MuiInputBase-inputAdornedStart.MuiOutlinedInput-input': {
|
|
2853
|
+
padding: '8px 36px 8px 46px',
|
|
2854
|
+
zIndex: '1001',
|
|
2824
2855
|
},
|
|
2825
2856
|
},
|
|
2826
2857
|
},
|
|
@@ -3756,7 +3787,7 @@ function BrowseIcon(props) {
|
|
|
3756
3787
|
}
|
|
3757
3788
|
|
|
3758
3789
|
function Browse2Icon(props) {
|
|
3759
|
-
return (jsxs(SvgIcon, __assign({}, props, { viewBox: "0 0 19 19", children: [jsx("rect", { width: "19", height: "19", fill: "
|
|
3790
|
+
return (jsxs(SvgIcon, __assign({}, props, { viewBox: "0 0 19 19", children: [jsx("rect", { width: "19", height: "19", fill: "none" }), jsx("path", { opacity: "0.5", d: "M3.875 1.625H17.375V3.875H3.875V1.625Z", fill: "currentColor" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.03509 1.76897C3.95385 1.83625 3.875 1.95187 3.875 2.1875V14.5625C3.875 14.8381 3.95235 14.9531 4.00674 15.0042C4.06736 15.0612 4.19206 15.125 4.4375 15.125H16.8109C16.8736 15.125 17.0116 15.0787 17.1561 14.9083C17.2948 14.7447 17.375 14.5376 17.375 14.358V2.39205C17.375 2.17967 17.3014 1.97158 17.1868 1.82652C17.0773 1.68777 16.9491 1.625 16.8125 1.625H4.53533C4.29827 1.625 4.13159 1.68904 4.03509 1.76897ZM3.31749 0.902556C3.66732 0.612805 4.11206 0.5 4.53533 0.5H16.8125C17.3515 0.5 17.7858 0.769619 18.0699 1.12944C18.3489 1.48296 18.5 1.93964 18.5 2.39205V14.358C18.5 14.8431 18.2982 15.3008 18.0142 15.6358C17.736 15.9639 17.3107 16.25 16.8109 16.25H4.4375C4.00733 16.25 3.56953 16.137 3.23655 15.8243C2.89734 15.5057 2.75 15.0582 2.75 14.5625V2.1875C2.75 1.65182 2.9524 1.20494 3.31749 0.902556Z", fill: "currentColor" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.75 4.4375C2.75 4.12684 3.00184 3.875 3.3125 3.875H17.9375C18.2482 3.875 18.5 4.12684 18.5 4.4375C18.5 4.74816 18.2482 5 17.9375 5H3.3125C3.00184 5 2.75 4.74816 2.75 4.4375Z", fill: "currentColor" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.0625 3.3125C1.37316 3.3125 1.625 3.56434 1.625 3.875V16.25C1.625 16.7258 1.74357 16.9793 1.88212 17.1179C2.02068 17.2564 2.27421 17.375 2.75 17.375H15.125C15.4357 17.375 15.6875 17.6268 15.6875 17.9375C15.6875 18.2482 15.4357 18.5 15.125 18.5H2.75C2.10079 18.5 1.51057 18.3373 1.08663 17.9134C0.662683 17.4894 0.5 16.8992 0.5 16.25V3.875C0.5 3.56434 0.75184 3.3125 1.0625 3.3125Z", fill: "currentColor" })] })));
|
|
3760
3791
|
}
|
|
3761
3792
|
|
|
3762
3793
|
function ButtonCaretIcon(props) {
|
|
@@ -16468,7 +16499,7 @@ styleInject(css_248z);
|
|
|
16468
16499
|
|
|
16469
16500
|
var StyledDateRangePicker = styled$1(dist.DateRangePicker)(function (_a) {
|
|
16470
16501
|
var theme = _a.theme;
|
|
16471
|
-
return "\n .rdrDateRangeWrapper {\n border: none;\n }\n\n /* Defined Ranges */\n .rdrDefinedRangesWrapper {\n width: 120px;\n border-color: ".concat(theme.palette.divider, ";\n }\n\n .rdrInputRanges {\n display: none;\n }\n\n .rdrStaticRange {\n font-family: ").concat(theme.typography.body1.fontFamily, ";\n }\n\n .rdrDefinedRangesWrapper .rdrStaticRangeSelected {\n color: ").concat(theme.palette.primary.main, ";\n background-color: #dceef9;\n }\n\n .rdrStaticRangeLabel {\n line-height:
|
|
16502
|
+
return "\n .rdrDateRangeWrapper {\n border: none;\n }\n\n /* Defined Ranges */\n .rdrDefinedRangesWrapper {\n width: 120px;\n border-color: ".concat(theme.palette.divider, ";\n }\n\n .rdrInputRanges {\n display: none;\n }\n\n .rdrStaticRange {\n font-family: ").concat(theme.typography.body1.fontFamily, ";\n border-bottom: 1px solid #d8d8d8;\n }\n\n .rdrStaticRange:last-child {\n border-bottom: 0;\n }\n\n .rdrDefinedRangesWrapper .rdrStaticRangeSelected {\n color: ").concat(theme.palette.primary.main, ";\n background-color: #dceef9;\n }\n\n .rdrStaticRangeLabel {\n line-height: 1.5rem;\n padding: 0.625rem 1.5rem;\n color: ").concat(theme.palette.primary.main, ";\n }\n\n /* Calendar */\n .rdrDateDisplayWrapper {\n background-color: ").concat(theme.palette.background.default, ";\n height: 44px;\n min-width: 282px;\n }\n\n .rdrDateDisplayItem {\n border-radius: ").concat(theme.shapes.button, ";\n }\n\n .rdrDateDisplayItem input {\n height: 1.5rem;\n line-height: 1.5rem;\n }\n\n .rdrDateDisplayItemActive {\n border-color: #32abe2;\n }\n\n .rdrMonthAndYearWrapper {\n height: 46px;\n padding-top: 0;\n border-top: 1px solid ").concat(theme.palette.divider, ";\n border-bottom: 1px solid ").concat(theme.palette.divider, ";\n }\n\n .leap-4d-calendar .rdrMonthAndYearWrapper {\n border-top: none;\n }\n\n .rdrMonthAndYearPickers select {\n padding: 8px 24px 8px 4px;\n font-size: 13px;\n color: ").concat(theme.palette.primary.main, ";\n border-radius: 0;\n }\n\n .rdrMonthAndYearPickers select:hover {\n background-color: #dceef9;\n }\n\n .rdrMonthAndYearPickers select option {\n background-color: white;\n }\n\n .rdrMonthName {\n padding: 0;\n text-align: center;\n color: ").concat(theme.palette.text.secondary, ";\n }\n\n .rdrMonth:only-child .rdrMonthName {\n display: none;\n }\n\n .rdrMonth {\n padding: 16px 32px 0;\n }\n\n .rdrMonths.rdrMonthsHorizontal .rdrMonth:only-child {\n padding: 10px 26px 25px;\n width: 100%;\n }\n\n .rdrMonths.rdrMonthsHorizontal > div {\n padding: 1em 1em 0;\n width: 225px;\n }\n\n .rdrMonth:only-child {\n margin: 0 auto;\n width: 100%;\n }\n\n .rdrMonth:only-child .rdrStartEdge {\n left: 4px;\n }\n\n .rdrMonth:only-child .rdrEndEdge {\n right: 4px;\n }\n \n .rdrDay {\n height: 2em;\n line-height: 2em;\n }\n\n .rdrDayStartPreview,\n .rdrDayInPreview,\n .rdrDayEndPreview,\n .rdrSelected,\n .rdrInRange,\n .rdrStartEdge,\n .rdrEndEdge {\n top: 0.5px;\n bottom: 0.5px;\n }\n\n .rdrWeekDay {\n color: #aab0b8;\n font-weight: 600;\n line-height: 2em;\n }\n\n .rdrDayNumber span {\n color: ").concat(theme.palette.text.primary, ";\n }\n\n .rdrDay:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span,\n .rdrDay:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span,\n .rdrDay:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span,\n .rdrDay:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span {\n color: ").concat(theme.palette.primary.main, ";\n }\n\n .rdrDayToday .rdrDayNumber span {\n font-weight: 600;\n }\n\n .rdrDayToday:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span:after,\n .rdrDayToday:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span:after,\n .rdrDayToday:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span:after,\n .rdrDayToday:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span:after {\n background-color: ").concat(theme.palette.primary.main, ";\n }\n\n .rdrDayToday .rdrDayNumber span:after {\n background-color: ").concat(theme.palette.primary.main, ";\n bottom: -1px;\n width: 15px;\n height: 1px;\n }\n\n .rdrNextPrevButton {\n margin: 0 1em;\n background: none;\n }\n\n .rdrNextPrevButton:hover {\n background-color: #E1E7F0;\n }\n\n .rdrNextPrevButton i {\n width: 24px;\n height: 24px;\n background-image: url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.3964 7.14645C12.5917 6.95118 12.9083 6.95118 13.1036 7.14645L17.6036 11.6464C17.7988 11.8417 17.7988 12.1583 17.6036 12.3536L13.1036 16.8536C12.9083 17.0488 12.5917 17.0488 12.3964 16.8536C12.2012 16.6583 12.2012 16.3417 12.3964 16.1464L16.0429 12.5H6.75C6.47386 12.5 6.25 12.2761 6.25 12C6.25 11.7239 6.47386 11.5 6.75 11.5H16.0429L12.3964 7.85355C12.2012 7.65829 12.2012 7.34171 12.3964 7.14645Z' fill='%231E365E'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 21.5C17.2467 21.5 21.5 17.2467 21.5 12C21.5 6.75329 17.2467 2.5 12 2.5C6.75329 2.5 2.5 6.75329 2.5 12C2.5 17.2467 6.75329 21.5 12 21.5ZM12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.5 17.799 6.20101 22.5 12 22.5Z' fill='%231E365E'/%3E%3C/svg%3E%0A\");\n background-repeat: no-repeat;\n padding: 0;\n margin: 0;\n }\n\n .rdrPprevButton i {\n border: none;\n transform: rotate(-180deg);\n }\n\n .rdrNextButton i {\n border: none;\n transform: none;\n }\n\n &.leap-4d-date-picker .rdrMonths .rdrMonth:only-child .rdrDayHovered .rdrDayNumber:after {\n border-radius: 100%;\n top: -4px;\n bottom: -4px;\n left: 4px;\n right: 4px;\n }\n\n &.leap-4d-date-picker .rdrMonths .rdrMonth:only-child .rdrDayStartPreview,\n &.leap-4d-date-picker .rdrMonths .rdrMonth:only-child .rdrDayActive.rdrDayStartOfWeek .rdrDayNumber:after {\n left: 4px;\n }\n\n &.leap-4d-date-picker .rdrMonths .rdrMonth:only-child .rdrDayEndPreview,\n &.leap-4d-date-picker .rdrMonths .rdrMonth:only-child .rdrDayActive.rdrDayEndOfWeek .rdrDayNumber:after {\n right: 4px;\n }\n\n\n .rdrStaticRange:hover .rdrStaticRangeLabel,\n .rdrStaticRange:focus .rdrStaticRangeLabel {\n background-color: #dceef9;\n }\n\n .rdrDayStartPreview,\n .rdrStartEdge,\n .rdrDayStartOfWeek .rdrDayEndPreview,\n .rdrDayStartOfWeek .rdrDayInPreview {\n left: 3px;\n }\n\n .rdrDayEndPreview,\n .rdrEndEdge,\n .rdrDayEndOfWeek .rdrDayStartPreview,\n .rdrDayEndOfWeek .rdrDayInPreview {\n right: 3px;\n }\n\n .rdrDayPassive .rdrDayNumber span {\n color: #d8d8d8;\n }\n");
|
|
16472
16503
|
});
|
|
16473
16504
|
|
|
16474
16505
|
var DateRangePicker = function (props) {
|
|
@@ -18716,8 +18747,12 @@ var StyledFormHelperText = styled(FormHelperText)(function (_a) {
|
|
|
18716
18747
|
});
|
|
18717
18748
|
|
|
18718
18749
|
var Input = React.forwardRef(function Input(props, ref) {
|
|
18719
|
-
var _a = props.error, error = _a === void 0 ? false : _a, helperText = props.helperText, _b = props.textAlignRight, textAlignRight = _b === void 0 ? false : _b, label = props.label, _c = props.size, size = _c === void 0 ? 'medium' : _c, _d = props.background, background = _d === void 0 ? 'default' : _d, className = props.className, rest = __rest(props, ["error", "helperText", "textAlignRight", "label", "size", "background", "className"]);
|
|
18720
|
-
return (jsxs(Fragment$1, { children: [label && jsx(FormLabelBlock, { children: label }), jsx(StyledInputBase, __assign({ ref: ref, error: error, textAlignRight: textAlignRight, className: clsx(size === 'large' && 'customLargeSize', background === 'light' && 'customLightColor', className)
|
|
18750
|
+
var _a = props.error, error = _a === void 0 ? false : _a, helperText = props.helperText, _b = props.textAlignRight, textAlignRight = _b === void 0 ? false : _b, label = props.label, _c = props.size, size = _c === void 0 ? 'medium' : _c, _d = props.background, background = _d === void 0 ? 'default' : _d, className = props.className, inputPropStyles = props.inputPropStyles, rest = __rest(props, ["error", "helperText", "textAlignRight", "label", "size", "background", "className", "inputPropStyles"]);
|
|
18751
|
+
return (jsxs(Fragment$1, { children: [label && jsx(FormLabelBlock, { children: label }), jsx(StyledInputBase, __assign({ ref: ref, error: error, textAlignRight: textAlignRight, className: clsx(size === 'large' && 'customLargeSize', background === 'light' && 'customLightColor', className), inputProps: {
|
|
18752
|
+
style: __assign({
|
|
18753
|
+
// EDGECASE: When we use multiline and set minRows, maxRows, rows we need to define the width of the input. By default we set this to 162.
|
|
18754
|
+
width: inputPropStyles ? inputPropStyles.width : 162 }, inputPropStyles),
|
|
18755
|
+
} }, rest)), helperText && (jsx(StyledFormHelperText, { error: error, children: helperText }))] }));
|
|
18721
18756
|
});
|
|
18722
18757
|
|
|
18723
18758
|
var ListItemAvatar = function (props) {
|