@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.js
CHANGED
|
@@ -877,7 +877,7 @@ var autocompleteOverrides$1 = {
|
|
|
877
877
|
marginBottom: 0,
|
|
878
878
|
},
|
|
879
879
|
'& .MuiAutocomplete-input:first-of-type.MuiInputBase-input': {
|
|
880
|
-
padding: '0
|
|
880
|
+
padding: '0 8px',
|
|
881
881
|
},
|
|
882
882
|
},
|
|
883
883
|
inputRoot: {
|
|
@@ -1197,6 +1197,23 @@ var dropdownOverrides$1 = {
|
|
|
1197
1197
|
fontSize: 12,
|
|
1198
1198
|
display: 'none',
|
|
1199
1199
|
},
|
|
1200
|
+
root: function () { return ({
|
|
1201
|
+
'&.MuiInputBase-adornedStart': {
|
|
1202
|
+
'.MuiSvgIcon-root': {
|
|
1203
|
+
fontSize: 16,
|
|
1204
|
+
left: 8,
|
|
1205
|
+
position: 'absolute',
|
|
1206
|
+
margin: 0,
|
|
1207
|
+
},
|
|
1208
|
+
},
|
|
1209
|
+
'&.customSelectInputBackground': {
|
|
1210
|
+
select: {
|
|
1211
|
+
'&.MuiOutlinedInput-input': {
|
|
1212
|
+
padding: 0,
|
|
1213
|
+
},
|
|
1214
|
+
},
|
|
1215
|
+
},
|
|
1216
|
+
}); },
|
|
1200
1217
|
select: function (_a) {
|
|
1201
1218
|
var theme = _a.theme;
|
|
1202
1219
|
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': {
|
|
@@ -1206,12 +1223,16 @@ var dropdownOverrides$1 = {
|
|
|
1206
1223
|
}, '.customLargeSize &': {
|
|
1207
1224
|
height: 30,
|
|
1208
1225
|
lineHeight: '30px',
|
|
1226
|
+
}, '&.MuiOutlinedInput-input': {
|
|
1227
|
+
zIndex: '1001',
|
|
1228
|
+
paddingLeft: 8,
|
|
1229
|
+
}, '&.MuiInputBase-inputAdornedStart.MuiOutlinedInput-input': {
|
|
1230
|
+
padding: '0 24px 0 32px',
|
|
1231
|
+
zIndex: '1001',
|
|
1209
1232
|
}, '& .customSelectInputBackground': {
|
|
1210
1233
|
borderColor: theme.palette.grey[500],
|
|
1211
1234
|
cursor: 'default',
|
|
1212
1235
|
'&:hover': {
|
|
1213
|
-
// backgroundColor: pallettes.brand.background.accent.lighter,
|
|
1214
|
-
// borderColor: pallettes.brand.utility.accent.dark,
|
|
1215
1236
|
cursor: 'default',
|
|
1216
1237
|
},
|
|
1217
1238
|
} }));
|
|
@@ -1347,17 +1368,16 @@ var inputBaseOverrides$1 = {
|
|
|
1347
1368
|
},
|
|
1348
1369
|
},
|
|
1349
1370
|
'&.customSelectInputBackground.MuiInputBase-adornedStart > .MuiSvgIcon-root': {
|
|
1350
|
-
position: 'absolute',
|
|
1351
1371
|
fontSize: 16,
|
|
1352
1372
|
},
|
|
1353
1373
|
'&.customSelectInputBackground .MuiInputBase-inputAdornedStart': {
|
|
1354
|
-
paddingLeft:
|
|
1374
|
+
paddingLeft: 12,
|
|
1355
1375
|
},
|
|
1356
1376
|
});
|
|
1357
1377
|
},
|
|
1358
1378
|
adornedStart: {
|
|
1359
1379
|
'& svg:first-of-type': {
|
|
1360
|
-
marginLeft:
|
|
1380
|
+
marginLeft: 12,
|
|
1361
1381
|
},
|
|
1362
1382
|
},
|
|
1363
1383
|
input: {
|
|
@@ -1480,8 +1500,8 @@ var listSubheaderOverrides$1 = {
|
|
|
1480
1500
|
}, '&.MuiListSubheader-gutters': {
|
|
1481
1501
|
paddingTop: 0,
|
|
1482
1502
|
paddingBottom: 0,
|
|
1483
|
-
paddingLeft:
|
|
1484
|
-
paddingRight:
|
|
1503
|
+
paddingLeft: 8,
|
|
1504
|
+
paddingRight: 8,
|
|
1485
1505
|
} }));
|
|
1486
1506
|
},
|
|
1487
1507
|
},
|
|
@@ -1546,7 +1566,7 @@ var menuItemOverrides$1 = {
|
|
|
1546
1566
|
var _b;
|
|
1547
1567
|
var theme = _a.theme;
|
|
1548
1568
|
return ({
|
|
1549
|
-
'&.MuiMenuItem-root': __assign(__assign({}, theme.typography.body1), (_b = { lineHeight: '1.25rem',
|
|
1569
|
+
'&.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')] = {
|
|
1550
1570
|
minHeight: 40,
|
|
1551
1571
|
}, _b['@media (hover: none)'] = {
|
|
1552
1572
|
minHeight: 40,
|
|
@@ -1572,7 +1592,7 @@ var menuItemOverrides$1 = {
|
|
|
1572
1592
|
lineHeight: '1.25rem',
|
|
1573
1593
|
},
|
|
1574
1594
|
}, _b['& .MuiFormControlLabel-root'] = {
|
|
1575
|
-
marginRight:
|
|
1595
|
+
marginRight: 4,
|
|
1576
1596
|
}, _b['&.gds-drawer-menu-item-dark'] = {
|
|
1577
1597
|
backgroundColor: theme.palette.primary.main,
|
|
1578
1598
|
color: theme.palette.grey[200],
|
|
@@ -2771,10 +2791,17 @@ var dropdownOverrides = {
|
|
|
2771
2791
|
'.MuiSvgIcon-root': {
|
|
2772
2792
|
fontSize: 16,
|
|
2773
2793
|
left: 16,
|
|
2774
|
-
position: '
|
|
2794
|
+
position: 'absolute',
|
|
2775
2795
|
margin: 0,
|
|
2776
2796
|
},
|
|
2777
2797
|
},
|
|
2798
|
+
'&.customSelectInputBackground': {
|
|
2799
|
+
select: {
|
|
2800
|
+
'&.MuiOutlinedInput-input': {
|
|
2801
|
+
padding: 0,
|
|
2802
|
+
},
|
|
2803
|
+
},
|
|
2804
|
+
},
|
|
2778
2805
|
'&:hover': {
|
|
2779
2806
|
backgroundColor: theme.palette.primary.transparent,
|
|
2780
2807
|
borderColor: theme.palette.primary.main,
|
|
@@ -2822,7 +2849,11 @@ var dropdownOverrides = {
|
|
|
2822
2849
|
fontWeight: 600,
|
|
2823
2850
|
letterSpacing: '.02em',
|
|
2824
2851
|
'&.MuiOutlinedInput-input': {
|
|
2825
|
-
|
|
2852
|
+
zIndex: '1001',
|
|
2853
|
+
},
|
|
2854
|
+
'&.MuiInputBase-inputAdornedStart.MuiOutlinedInput-input': {
|
|
2855
|
+
padding: '8px 36px 8px 46px',
|
|
2856
|
+
zIndex: '1001',
|
|
2826
2857
|
},
|
|
2827
2858
|
},
|
|
2828
2859
|
},
|
|
@@ -3758,7 +3789,7 @@ function BrowseIcon(props) {
|
|
|
3758
3789
|
}
|
|
3759
3790
|
|
|
3760
3791
|
function Browse2Icon(props) {
|
|
3761
|
-
return (jsxRuntime.jsxs(SvgIcon, __assign({}, props, { viewBox: "0 0 19 19", children: [jsxRuntime.jsx("rect", { width: "19", height: "19", fill: "
|
|
3792
|
+
return (jsxRuntime.jsxs(SvgIcon, __assign({}, props, { viewBox: "0 0 19 19", children: [jsxRuntime.jsx("rect", { width: "19", height: "19", fill: "none" }), jsxRuntime.jsx("path", { opacity: "0.5", d: "M3.875 1.625H17.375V3.875H3.875V1.625Z", fill: "currentColor" }), jsxRuntime.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" }), jsxRuntime.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" }), jsxRuntime.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" })] })));
|
|
3762
3793
|
}
|
|
3763
3794
|
|
|
3764
3795
|
function ButtonCaretIcon(props) {
|
|
@@ -16470,7 +16501,7 @@ styleInject(css_248z);
|
|
|
16470
16501
|
|
|
16471
16502
|
var StyledDateRangePicker = material.styled(dist.DateRangePicker)(function (_a) {
|
|
16472
16503
|
var theme = _a.theme;
|
|
16473
|
-
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:
|
|
16504
|
+
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");
|
|
16474
16505
|
});
|
|
16475
16506
|
|
|
16476
16507
|
var DateRangePicker = function (props) {
|
|
@@ -18718,8 +18749,12 @@ var StyledFormHelperText = styles$1.styled(FormHelperText)(function (_a) {
|
|
|
18718
18749
|
});
|
|
18719
18750
|
|
|
18720
18751
|
var Input = React.forwardRef(function Input(props, ref) {
|
|
18721
|
-
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"]);
|
|
18722
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && jsxRuntime.jsx(FormLabelBlock, { children: label }), jsxRuntime.jsx(StyledInputBase, __assign({ ref: ref, error: error, textAlignRight: textAlignRight, className: clsx(size === 'large' && 'customLargeSize', background === 'light' && 'customLightColor', className)
|
|
18752
|
+
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"]);
|
|
18753
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && jsxRuntime.jsx(FormLabelBlock, { children: label }), jsxRuntime.jsx(StyledInputBase, __assign({ ref: ref, error: error, textAlignRight: textAlignRight, className: clsx(size === 'large' && 'customLargeSize', background === 'light' && 'customLightColor', className), inputProps: {
|
|
18754
|
+
style: __assign({
|
|
18755
|
+
// 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.
|
|
18756
|
+
width: inputPropStyles ? inputPropStyles.width : 162 }, inputPropStyles),
|
|
18757
|
+
} }, rest)), helperText && (jsxRuntime.jsx(StyledFormHelperText, { error: error, children: helperText }))] }));
|
|
18723
18758
|
});
|
|
18724
18759
|
|
|
18725
18760
|
var ListItemAvatar = function (props) {
|