@lanaco/lnc-react-ui 3.11.7 → 3.11.9
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/lib/index.esm.js +27 -10
- package/lib/index.js +27 -10
- package/package.json +1 -1
package/lib/index.esm.js
CHANGED
|
@@ -3320,7 +3320,9 @@ var lanaco_light = {
|
|
|
3320
3320
|
backgroundDayOpacity: 200
|
|
3321
3321
|
},
|
|
3322
3322
|
disabled: {
|
|
3323
|
-
border: 200
|
|
3323
|
+
border: 200,
|
|
3324
|
+
text: 400,
|
|
3325
|
+
background: 0
|
|
3324
3326
|
}
|
|
3325
3327
|
},
|
|
3326
3328
|
teal: {
|
|
@@ -14314,7 +14316,7 @@ Icon.propTypes = {
|
|
|
14314
14316
|
};
|
|
14315
14317
|
|
|
14316
14318
|
var _templateObject$1n;
|
|
14317
|
-
var Styled_DatePickerWrapper = newStyled.div(_templateObject$1n || (_templateObject$1n = _taggedTemplateLiteral(["\n ", "\n & .react-datepicker__header__dropdown {\n position: absolute !important;\n z-index: 30;\n width: ", ";\n
|
|
14319
|
+
var Styled_DatePickerWrapper = newStyled.div(_templateObject$1n || (_templateObject$1n = _taggedTemplateLiteral(["\n ", "\n & .react-datepicker__header__dropdown {\n position: absolute !important;\n z-index: 30;\n width: ", ";\n\n top: 1.3rem;\n font-size: 1rem;\n @media (max-width: 725px) {\n width: ", ";\n }\n @media (max-width: 550px) {\n width: 100%;\n }\n }\n & input {\n border: none;\n outline: none;\n ", "\n }\n & .react-datepicker {\n position: relative;\n background-color: ", ";\n color: ", ";\n border: none;\n box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1),\n 0px 2px 4px -1px rgba(0, 0, 0, 0.06);\n border-radius: 16px;\n }\n & .react-datepicker__day {\n min-width: 2rem;\n width: ", ";\n height: ", ";\n }\n & .react-datepicker__month-read-view--down-arrow,\n .react-datepicker__year-read-view--down-arrow {\n display: none;\n }\n & .react-datepicker__day--today {\n border: 1px solid\n ", ";\n color: ", " !important;\n border-radius: 8px;\n }\n & .react-datepicker__current-month,\n & .react-datepicker-time__header,\n & .react-datepicker-year-header {\n display: none;\n }\n & .react-datepicker__day--outside-month {\n color: ", " !important;\n background-color: transparent !important;\n }\n & .react-datepicker__header {\n border-radius: 8px 8px 0 0;\n background-color: transparent;\n border-bottom: 1px solid transparent;\n font-size: 1rem;\n }\n & .react-datepicker__day-names {\n margin-top: 3.5rem;\n color: ", " !important;\n }\n & .react-datepicker__day-name,\n & .react-datepicker__day,\n & .react-datepicker__time-name {\n color: var(--primary);\n font-size: 1rem;\n min-width: 2rem;\n padding: ", ";\n }\n & .react-datepicker__day-name {\n line-height: 0;\n }\n & .react-datepicker__day--keyboard-selected:hover,\n & .react-datepicker__month-text--keyboard-selected:hover,\n & .react-datepicker__quarter-text--keyboard-selected:hover,\n & .react-datepicker__year-text--keyboard-selected:hover,\n & .react-datepicker__day:hover {\n background-color: ", ";\n color: ", ";\n }\n & .react-datepicker__year-dropdown,\n & .react-datepicker__month-dropdown,\n & .react-datepicker__month-year-dropdown {\n font-size: 1rem;\n background-color: ", ";\n }\n\n & .react-datepicker__year-dropdown,\n & .react-datepicker__month-dropdown,\n & .react-datepicker__month-year-dropdown {\n width: 100%;\n left: 0%;\n display: flex;\n flex-wrap: wrap;\n border: 1px solid transparent;\n box-shadow: 0px 0px 20px rgba(65, 43, 118, 0.1);\n border-radius: 8px;\n padding: 4px;\n }\n\n & .react-datepicker__year-option,\n & .react-datepicker__month-year-option {\n width: 33.33%;\n margin-left: 0;\n padding: 0.45rem;\n margin-right: 0;\n }\n & .react-datepicker__month-option {\n width: 50%;\n margin-left: 0;\n padding: 0.45rem;\n margin-right: 0;\n }\n & .react-datepicker__year-option:hover,\n & .react-datepicker__month-option:hover,\n & .react-datepicker__month-year-option:hover {\n border-radius: 8px;\n color: ", ";\n border-radius: 8px;\n background-color: ", ";\n }\n\n & .react-datepicker__year-option:nth-of-type(1),\n & .react-datepicker__month-year-option:nth-of-type(1),\n & .react-datepicker__year-option:last-of-type,\n & .react-datepicker__month-year-option:last-of-type {\n width: 100%;\n }\n\n & .react-datepicker__year-option--selected,\n & .react-datepicker__month-option--selected,\n & .react-datepicker__month-year-option--selected {\n position: unset;\n }\n\n & .react-datepicker__year-option--selected_year {\n color: ", ";\n border-radius: 8px;\n background-color: ", ";\n }\n\n & .react-datepicker__year-option--selected,\n & .react-datepicker__month-option--selected {\n display: none;\n }\n\n &\n .react-datepicker__navigation--years.react-datepicker__navigation--years-upcoming {\n top: -4px;\n border-bottom-color: #ccc;\n }\n & .react-datepicker__year-read-view,\n & .react-datepicker__month-read-view,\n & .react-datepicker__month-year-read-view {\n visibility: visible !important;\n }\n\n &\n .react-datepicker__navigation--years.react-datepicker__navigation--years-previous {\n top: 4px;\n border-top-color: #ccc;\n }\n\n & .react-datepicker__navigation--years {\n background: none;\n line-height: 1.7rem;\n text-align: center;\n cursor: pointer;\n padding: 0;\n border: 0.45rem solid transparent;\n z-index: 1;\n height: 10px;\n width: 10px;\n text-indent: -999em;\n overflow: hidden;\n position: relative;\n display: block;\n margin-left: auto;\n margin-right: auto;\n }\n & .react-datepicker__year-read-view--down-arrow,\n & .react-datepicker__month-read-view--down-arrow,\n & .react-datepicker__month-year-read-view--down-arrow,\n & .react-datepicker__navigation-icon::before {\n border-width: 1px 1px 0 0;\n }\n & .react-datepicker__navigation {\n top: 1rem;\n z-index: 40;\n }\n & .react-datepicker__year-read-view--down-arrow,\n & .react-datepicker__month-read-view--down-arrow,\n & .react-datepicker__month-year-read-view--down-arrow {\n top: 4px;\n border-color: transparent;\n padding: 4px;\n }\n & .react-datepicker__year-read-view--down-arrow,\n & .react-datepicker__month-read-view--down-arrow,\n & .react-datepicker__month-year-read-view--down-arrow,\n & .react-datepicker__navigation-icon::before {\n border-color: ", ";\n }\n & .react-datepicker__header--time {\n border-bottom: none;\n }\n & .react-datepicker__time {\n ", "\n background-color: var(--primary-100) !important;\n font-size: 0.9rem;\n }\n &\n .react-datepicker__time-container\n .react-datepicker__time\n .react-datepicker__time-box\n ul.react-datepicker__time-list\n li.react-datepicker__time-list-item:hover {\n color: ", ";\n border-radius: 8px;\n background-color: ", ";\n }\n &\n .react-datepicker__time-container\n .react-datepicker__time\n .react-datepicker__time-box\n ul.react-datepicker__time-list\n li.react-datepicker__time-list-item--selected {\n color: ", ";\n border-radius: 8px;\n background-color: ", ";\n }\n &\n .react-datepicker__navigation--years.react-datepicker__navigation--years-upcoming {\n border-bottom-color: var(--primary);\n }\n &\n .react-datepicker__navigation--years.react-datepicker__navigation--years-previous {\n border-top-color: var(--primary);\n }\n & .react-datepicker-popper[data-placement^=\"bottom\"] {\n padding-top: 0;\n }\n & .react-datepicker__day--selected,\n & .react-datepicker__day--in-selecting-range,\n & .react-datepicker__day--in-range,\n & .react-datepicker__month-text--selected,\n & .react-datepicker__month-text--in-selecting-range,\n & .react-datepicker__month-text--in-range,\n & .react-datepicker__quarter-text--selected,\n & .react-datepicker__quarter-text--in-selecting-range,\n & .react-datepicker__quarter-text--in-range,\n & .react-datepicker__year-text--selected,\n & .react-datepicker__year-text--in-selecting-range,\n & .react-datepicker__year-text--in-range {\n background-color: ", ";\n color: ", ";\n border: none;\n }\n &\n .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__day--selecting-range-start, .react-datepicker__day--selecting-range-end, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range),\n &\n .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range),\n &\n .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range),\n &\n .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range) {\n border-radius: 8px;\n background-color: ", ";\n color: ", ";\n }\n & .react-datepicker__day--selecting-range-start,\n & .react-datepicker__day--selecting-range-end {\n background-color: ", ";\n color: ", ";\n }\n\n & .react-datepicker__day--keyboard-selected {\n background-color: transparent;\n }\n\n & .react-datepicker__day--disabled {\n background-color: ", ";\n color: ", ";\n\n &:hover {\n background-color: ", ";\n color: ", ";\n }\n }\n"])), function (props) {
|
|
14318
14320
|
return getComponentTypographyCss(props.theme, "DateInput", props.size, "enabled");
|
|
14319
14321
|
}, function (props) {
|
|
14320
14322
|
return props.monthsShown > 2 ? 3 * 100 + "%" : props.monthsShown * 100 + "%";
|
|
@@ -14326,6 +14328,10 @@ var Styled_DatePickerWrapper = newStyled.div(_templateObject$1n || (_templateObj
|
|
|
14326
14328
|
return getColorRgbaValue(props.theme, "DateInput", props.color, "enabled", "background");
|
|
14327
14329
|
}, function (props) {
|
|
14328
14330
|
return getColorRgbaValue(props.theme, "DateInput", props.color, "enabled", "text");
|
|
14331
|
+
}, function (p) {
|
|
14332
|
+
return p.withPortal === true ? "2.75rem" : "2.25rem";
|
|
14333
|
+
}, function (p) {
|
|
14334
|
+
return p.withPortal === true ? "2.75rem" : "2.25rem";
|
|
14329
14335
|
}, function (props) {
|
|
14330
14336
|
return getColorRgbaValue(props.theme, "DateInput", props.color, "enabled", "today");
|
|
14331
14337
|
}, function (props) {
|
|
@@ -14334,6 +14340,8 @@ var Styled_DatePickerWrapper = newStyled.div(_templateObject$1n || (_templateObj
|
|
|
14334
14340
|
return getColorRgbaValue(props.theme, "DateInput", props.color, "enabled", "textWeekDays");
|
|
14335
14341
|
}, function (props) {
|
|
14336
14342
|
return getColorRgbaValue(props.theme, "DateInput", props.color, "enabled", "textWeekDays");
|
|
14343
|
+
}, function (p) {
|
|
14344
|
+
return p.withPortal === true ? "0" : "0.3rem";
|
|
14337
14345
|
}, function (props) {
|
|
14338
14346
|
return getColorRgbaValue(props.theme, "DateInput", props.color, "hover", "background", "backgroundOpacity");
|
|
14339
14347
|
}, function (props) {
|
|
@@ -14372,6 +14380,14 @@ var Styled_DatePickerWrapper = newStyled.div(_templateObject$1n || (_templateObj
|
|
|
14372
14380
|
return getColorRgbaValue(props.theme, "DateInput", props.color, "active", "background");
|
|
14373
14381
|
}, function (props) {
|
|
14374
14382
|
return getColorRgbaValue(props.theme, "DateInput", props.color, "active", "text");
|
|
14383
|
+
}, function (props) {
|
|
14384
|
+
return getColorRgbaValue(props.theme, "DateInput", props.color, "disabled", "background");
|
|
14385
|
+
}, function (props) {
|
|
14386
|
+
return getColorRgbaValue(props.theme, "DateInput", props.color, "disabled", "text");
|
|
14387
|
+
}, function (props) {
|
|
14388
|
+
return getColorRgbaValue(props.theme, "DateInput", props.color, "disabled", "background");
|
|
14389
|
+
}, function (props) {
|
|
14390
|
+
return getColorRgbaValue(props.theme, "DateInput", props.color, "disabled", "text");
|
|
14375
14391
|
});
|
|
14376
14392
|
|
|
14377
14393
|
var reactDatepicker_min = {exports: {}};
|
|
@@ -43457,7 +43473,7 @@ TextInput.propTypes = {
|
|
|
43457
43473
|
};
|
|
43458
43474
|
|
|
43459
43475
|
var _DateInput$defaultPro;
|
|
43460
|
-
var _excluded$1d = ["size", "color", "className", "style", "disabled", "readOnly", "onFocus", "onBlur", "value", "dateFormat", "tabIndex", "
|
|
43476
|
+
var _excluded$1d = ["size", "color", "className", "style", "disabled", "readOnly", "onFocus", "onBlur", "value", "dateFormat", "tabIndex", "monthsShown", "selectsRange", "withPortal", "shouldCloseOnOpen", "showTimeInput", "showTimeSelect", "onChange"];
|
|
43461
43477
|
var DateInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
|
|
43462
43478
|
var size = props.size,
|
|
43463
43479
|
color = props.color,
|
|
@@ -43470,8 +43486,6 @@ var DateInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
|
|
|
43470
43486
|
props.value;
|
|
43471
43487
|
var dateFormat = props.dateFormat;
|
|
43472
43488
|
props.tabIndex;
|
|
43473
|
-
props.minDate;
|
|
43474
|
-
props.maxDate;
|
|
43475
43489
|
var monthsShown = props.monthsShown,
|
|
43476
43490
|
selectsRange = props.selectsRange,
|
|
43477
43491
|
withPortal = props.withPortal,
|
|
@@ -43494,7 +43508,8 @@ var DateInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
|
|
|
43494
43508
|
return /*#__PURE__*/React__default.createElement(Styled_DatePickerWrapper, _extends$4({}, themeProps, {
|
|
43495
43509
|
className: className,
|
|
43496
43510
|
style: style,
|
|
43497
|
-
monthsShown: monthsShown
|
|
43511
|
+
monthsShown: monthsShown,
|
|
43512
|
+
withPortal: withPortal
|
|
43498
43513
|
}), /*#__PURE__*/React__default.createElement(ReactDatePicker, _extends$4({}, rest, {
|
|
43499
43514
|
onChange: onChange,
|
|
43500
43515
|
selectsRange: selectsRange,
|
|
@@ -43534,8 +43549,6 @@ DateInput.propTypes = {
|
|
|
43534
43549
|
disabled: PropTypes.bool,
|
|
43535
43550
|
readOnly: PropTypes.bool,
|
|
43536
43551
|
dateFormat: PropTypes.string,
|
|
43537
|
-
minDate: PropTypes.any,
|
|
43538
|
-
maxDate: PropTypes.any,
|
|
43539
43552
|
tabIndex: PropTypes.number,
|
|
43540
43553
|
monthsShown: PropTypes.number,
|
|
43541
43554
|
withPortal: PropTypes.bool,
|
|
@@ -71192,8 +71205,10 @@ DropdownMenu.propTypes = {
|
|
|
71192
71205
|
|
|
71193
71206
|
var _excluded$L = ["active", "icon", "disabled", "isNested", "showNested", "value", "onFocus", "onBlur", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "toggleNested", "onItemSelected", "className", "style", "color", "iconProps", "__TYPE__", "children"];
|
|
71194
71207
|
var _templateObject$I;
|
|
71195
|
-
var Item$1 = newStyled.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteral(["\n box-sizing: border-box;\n cursor: ", ";\n width: 100%;\n border-radius: 6px;\n display: flex;\n align-items: center;\n min-height: 2.25rem;\n gap: 0.563rem;\n padding: 0.563rem;\n &:hover {\n background-color: ", ";\n color: ", ";\n & .drop-down-icon-lnc {\n color: ", ";\n }\n }\n ", ";\n & .drop-down-icon-lnc {\n color: ", ";\n ", ";\n background: transparent;\n }\n & .sub-menu-icon-lnc {\n margin-left: auto;\n transform: ", ";\n transition: transform 0.25s ease;\n }\n ", "\n outline: none;\n ", ";\n"])), function (props) {
|
|
71208
|
+
var Item$1 = newStyled.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteral(["\n box-sizing: border-box;\n cursor: ", ";\n width: 100%;\n border-radius: 6px;\n display: flex;\n align-items: center;\n min-height: 2.25rem;\n gap: 0.563rem;\n padding: 0.563rem;\n color: ", ";\n &:hover {\n background-color: ", ";\n color: ", ";\n & .drop-down-icon-lnc {\n color: ", ";\n }\n }\n ", ";\n & .drop-down-icon-lnc {\n color: ", ";\n ", ";\n background: transparent;\n }\n & .sub-menu-icon-lnc {\n margin-left: auto;\n transform: ", ";\n transition: transform 0.25s ease;\n }\n ", "\n outline: none;\n ", ";\n"])), function (props) {
|
|
71196
71209
|
return props.disabled == false ? "pointer" : "context-menu";
|
|
71210
|
+
}, function (props) {
|
|
71211
|
+
return getColorRgbaValue(props.theme, "MenuItem", props.color, props.isActive === true ? "active" : "enabled", "text");
|
|
71197
71212
|
}, function (props) {
|
|
71198
71213
|
return getColorRgbaValue(props.theme, "MenuItem", props.color, "hover", "background", "backgroundOpacity");
|
|
71199
71214
|
}, function (props) {
|
|
@@ -71381,7 +71396,9 @@ var DropdownItem = /*#__PURE__*/React__default.forwardRef(function (props, ref)
|
|
|
71381
71396
|
}, rest), icon && /*#__PURE__*/React__default.createElement(Icon, _extends$4({
|
|
71382
71397
|
icon: icon,
|
|
71383
71398
|
className: "drop-down-icon-lnc"
|
|
71384
|
-
}, iconProps)), /*#__PURE__*/React__default.createElement("div",
|
|
71399
|
+
}, iconProps)), /*#__PURE__*/React__default.createElement("div", {
|
|
71400
|
+
className: "menu-item-text-lnc"
|
|
71401
|
+
}, children), isNested && /*#__PURE__*/React__default.createElement(Icon, {
|
|
71385
71402
|
icon: "angle-down",
|
|
71386
71403
|
className: "sub-menu-icon-lnc"
|
|
71387
71404
|
})));
|
package/lib/index.js
CHANGED
|
@@ -3369,7 +3369,9 @@ var lanaco_light = {
|
|
|
3369
3369
|
backgroundDayOpacity: 200
|
|
3370
3370
|
},
|
|
3371
3371
|
disabled: {
|
|
3372
|
-
border: 200
|
|
3372
|
+
border: 200,
|
|
3373
|
+
text: 400,
|
|
3374
|
+
background: 0
|
|
3373
3375
|
}
|
|
3374
3376
|
},
|
|
3375
3377
|
teal: {
|
|
@@ -14363,7 +14365,7 @@ Icon.propTypes = {
|
|
|
14363
14365
|
};
|
|
14364
14366
|
|
|
14365
14367
|
var _templateObject$1n;
|
|
14366
|
-
var Styled_DatePickerWrapper = newStyled.div(_templateObject$1n || (_templateObject$1n = _taggedTemplateLiteral__default["default"](["\n ", "\n & .react-datepicker__header__dropdown {\n position: absolute !important;\n z-index: 30;\n width: ", ";\n
|
|
14368
|
+
var Styled_DatePickerWrapper = newStyled.div(_templateObject$1n || (_templateObject$1n = _taggedTemplateLiteral__default["default"](["\n ", "\n & .react-datepicker__header__dropdown {\n position: absolute !important;\n z-index: 30;\n width: ", ";\n\n top: 1.3rem;\n font-size: 1rem;\n @media (max-width: 725px) {\n width: ", ";\n }\n @media (max-width: 550px) {\n width: 100%;\n }\n }\n & input {\n border: none;\n outline: none;\n ", "\n }\n & .react-datepicker {\n position: relative;\n background-color: ", ";\n color: ", ";\n border: none;\n box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1),\n 0px 2px 4px -1px rgba(0, 0, 0, 0.06);\n border-radius: 16px;\n }\n & .react-datepicker__day {\n min-width: 2rem;\n width: ", ";\n height: ", ";\n }\n & .react-datepicker__month-read-view--down-arrow,\n .react-datepicker__year-read-view--down-arrow {\n display: none;\n }\n & .react-datepicker__day--today {\n border: 1px solid\n ", ";\n color: ", " !important;\n border-radius: 8px;\n }\n & .react-datepicker__current-month,\n & .react-datepicker-time__header,\n & .react-datepicker-year-header {\n display: none;\n }\n & .react-datepicker__day--outside-month {\n color: ", " !important;\n background-color: transparent !important;\n }\n & .react-datepicker__header {\n border-radius: 8px 8px 0 0;\n background-color: transparent;\n border-bottom: 1px solid transparent;\n font-size: 1rem;\n }\n & .react-datepicker__day-names {\n margin-top: 3.5rem;\n color: ", " !important;\n }\n & .react-datepicker__day-name,\n & .react-datepicker__day,\n & .react-datepicker__time-name {\n color: var(--primary);\n font-size: 1rem;\n min-width: 2rem;\n padding: ", ";\n }\n & .react-datepicker__day-name {\n line-height: 0;\n }\n & .react-datepicker__day--keyboard-selected:hover,\n & .react-datepicker__month-text--keyboard-selected:hover,\n & .react-datepicker__quarter-text--keyboard-selected:hover,\n & .react-datepicker__year-text--keyboard-selected:hover,\n & .react-datepicker__day:hover {\n background-color: ", ";\n color: ", ";\n }\n & .react-datepicker__year-dropdown,\n & .react-datepicker__month-dropdown,\n & .react-datepicker__month-year-dropdown {\n font-size: 1rem;\n background-color: ", ";\n }\n\n & .react-datepicker__year-dropdown,\n & .react-datepicker__month-dropdown,\n & .react-datepicker__month-year-dropdown {\n width: 100%;\n left: 0%;\n display: flex;\n flex-wrap: wrap;\n border: 1px solid transparent;\n box-shadow: 0px 0px 20px rgba(65, 43, 118, 0.1);\n border-radius: 8px;\n padding: 4px;\n }\n\n & .react-datepicker__year-option,\n & .react-datepicker__month-year-option {\n width: 33.33%;\n margin-left: 0;\n padding: 0.45rem;\n margin-right: 0;\n }\n & .react-datepicker__month-option {\n width: 50%;\n margin-left: 0;\n padding: 0.45rem;\n margin-right: 0;\n }\n & .react-datepicker__year-option:hover,\n & .react-datepicker__month-option:hover,\n & .react-datepicker__month-year-option:hover {\n border-radius: 8px;\n color: ", ";\n border-radius: 8px;\n background-color: ", ";\n }\n\n & .react-datepicker__year-option:nth-of-type(1),\n & .react-datepicker__month-year-option:nth-of-type(1),\n & .react-datepicker__year-option:last-of-type,\n & .react-datepicker__month-year-option:last-of-type {\n width: 100%;\n }\n\n & .react-datepicker__year-option--selected,\n & .react-datepicker__month-option--selected,\n & .react-datepicker__month-year-option--selected {\n position: unset;\n }\n\n & .react-datepicker__year-option--selected_year {\n color: ", ";\n border-radius: 8px;\n background-color: ", ";\n }\n\n & .react-datepicker__year-option--selected,\n & .react-datepicker__month-option--selected {\n display: none;\n }\n\n &\n .react-datepicker__navigation--years.react-datepicker__navigation--years-upcoming {\n top: -4px;\n border-bottom-color: #ccc;\n }\n & .react-datepicker__year-read-view,\n & .react-datepicker__month-read-view,\n & .react-datepicker__month-year-read-view {\n visibility: visible !important;\n }\n\n &\n .react-datepicker__navigation--years.react-datepicker__navigation--years-previous {\n top: 4px;\n border-top-color: #ccc;\n }\n\n & .react-datepicker__navigation--years {\n background: none;\n line-height: 1.7rem;\n text-align: center;\n cursor: pointer;\n padding: 0;\n border: 0.45rem solid transparent;\n z-index: 1;\n height: 10px;\n width: 10px;\n text-indent: -999em;\n overflow: hidden;\n position: relative;\n display: block;\n margin-left: auto;\n margin-right: auto;\n }\n & .react-datepicker__year-read-view--down-arrow,\n & .react-datepicker__month-read-view--down-arrow,\n & .react-datepicker__month-year-read-view--down-arrow,\n & .react-datepicker__navigation-icon::before {\n border-width: 1px 1px 0 0;\n }\n & .react-datepicker__navigation {\n top: 1rem;\n z-index: 40;\n }\n & .react-datepicker__year-read-view--down-arrow,\n & .react-datepicker__month-read-view--down-arrow,\n & .react-datepicker__month-year-read-view--down-arrow {\n top: 4px;\n border-color: transparent;\n padding: 4px;\n }\n & .react-datepicker__year-read-view--down-arrow,\n & .react-datepicker__month-read-view--down-arrow,\n & .react-datepicker__month-year-read-view--down-arrow,\n & .react-datepicker__navigation-icon::before {\n border-color: ", ";\n }\n & .react-datepicker__header--time {\n border-bottom: none;\n }\n & .react-datepicker__time {\n ", "\n background-color: var(--primary-100) !important;\n font-size: 0.9rem;\n }\n &\n .react-datepicker__time-container\n .react-datepicker__time\n .react-datepicker__time-box\n ul.react-datepicker__time-list\n li.react-datepicker__time-list-item:hover {\n color: ", ";\n border-radius: 8px;\n background-color: ", ";\n }\n &\n .react-datepicker__time-container\n .react-datepicker__time\n .react-datepicker__time-box\n ul.react-datepicker__time-list\n li.react-datepicker__time-list-item--selected {\n color: ", ";\n border-radius: 8px;\n background-color: ", ";\n }\n &\n .react-datepicker__navigation--years.react-datepicker__navigation--years-upcoming {\n border-bottom-color: var(--primary);\n }\n &\n .react-datepicker__navigation--years.react-datepicker__navigation--years-previous {\n border-top-color: var(--primary);\n }\n & .react-datepicker-popper[data-placement^=\"bottom\"] {\n padding-top: 0;\n }\n & .react-datepicker__day--selected,\n & .react-datepicker__day--in-selecting-range,\n & .react-datepicker__day--in-range,\n & .react-datepicker__month-text--selected,\n & .react-datepicker__month-text--in-selecting-range,\n & .react-datepicker__month-text--in-range,\n & .react-datepicker__quarter-text--selected,\n & .react-datepicker__quarter-text--in-selecting-range,\n & .react-datepicker__quarter-text--in-range,\n & .react-datepicker__year-text--selected,\n & .react-datepicker__year-text--in-selecting-range,\n & .react-datepicker__year-text--in-range {\n background-color: ", ";\n color: ", ";\n border: none;\n }\n &\n .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__day--selecting-range-start, .react-datepicker__day--selecting-range-end, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range),\n &\n .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range),\n &\n .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range),\n &\n .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range) {\n border-radius: 8px;\n background-color: ", ";\n color: ", ";\n }\n & .react-datepicker__day--selecting-range-start,\n & .react-datepicker__day--selecting-range-end {\n background-color: ", ";\n color: ", ";\n }\n\n & .react-datepicker__day--keyboard-selected {\n background-color: transparent;\n }\n\n & .react-datepicker__day--disabled {\n background-color: ", ";\n color: ", ";\n\n &:hover {\n background-color: ", ";\n color: ", ";\n }\n }\n"])), function (props) {
|
|
14367
14369
|
return getComponentTypographyCss(props.theme, "DateInput", props.size, "enabled");
|
|
14368
14370
|
}, function (props) {
|
|
14369
14371
|
return props.monthsShown > 2 ? 3 * 100 + "%" : props.monthsShown * 100 + "%";
|
|
@@ -14375,6 +14377,10 @@ var Styled_DatePickerWrapper = newStyled.div(_templateObject$1n || (_templateObj
|
|
|
14375
14377
|
return getColorRgbaValue(props.theme, "DateInput", props.color, "enabled", "background");
|
|
14376
14378
|
}, function (props) {
|
|
14377
14379
|
return getColorRgbaValue(props.theme, "DateInput", props.color, "enabled", "text");
|
|
14380
|
+
}, function (p) {
|
|
14381
|
+
return p.withPortal === true ? "2.75rem" : "2.25rem";
|
|
14382
|
+
}, function (p) {
|
|
14383
|
+
return p.withPortal === true ? "2.75rem" : "2.25rem";
|
|
14378
14384
|
}, function (props) {
|
|
14379
14385
|
return getColorRgbaValue(props.theme, "DateInput", props.color, "enabled", "today");
|
|
14380
14386
|
}, function (props) {
|
|
@@ -14383,6 +14389,8 @@ var Styled_DatePickerWrapper = newStyled.div(_templateObject$1n || (_templateObj
|
|
|
14383
14389
|
return getColorRgbaValue(props.theme, "DateInput", props.color, "enabled", "textWeekDays");
|
|
14384
14390
|
}, function (props) {
|
|
14385
14391
|
return getColorRgbaValue(props.theme, "DateInput", props.color, "enabled", "textWeekDays");
|
|
14392
|
+
}, function (p) {
|
|
14393
|
+
return p.withPortal === true ? "0" : "0.3rem";
|
|
14386
14394
|
}, function (props) {
|
|
14387
14395
|
return getColorRgbaValue(props.theme, "DateInput", props.color, "hover", "background", "backgroundOpacity");
|
|
14388
14396
|
}, function (props) {
|
|
@@ -14421,6 +14429,14 @@ var Styled_DatePickerWrapper = newStyled.div(_templateObject$1n || (_templateObj
|
|
|
14421
14429
|
return getColorRgbaValue(props.theme, "DateInput", props.color, "active", "background");
|
|
14422
14430
|
}, function (props) {
|
|
14423
14431
|
return getColorRgbaValue(props.theme, "DateInput", props.color, "active", "text");
|
|
14432
|
+
}, function (props) {
|
|
14433
|
+
return getColorRgbaValue(props.theme, "DateInput", props.color, "disabled", "background");
|
|
14434
|
+
}, function (props) {
|
|
14435
|
+
return getColorRgbaValue(props.theme, "DateInput", props.color, "disabled", "text");
|
|
14436
|
+
}, function (props) {
|
|
14437
|
+
return getColorRgbaValue(props.theme, "DateInput", props.color, "disabled", "background");
|
|
14438
|
+
}, function (props) {
|
|
14439
|
+
return getColorRgbaValue(props.theme, "DateInput", props.color, "disabled", "text");
|
|
14424
14440
|
});
|
|
14425
14441
|
|
|
14426
14442
|
var reactDatepicker_min = {exports: {}};
|
|
@@ -43506,7 +43522,7 @@ TextInput.propTypes = {
|
|
|
43506
43522
|
};
|
|
43507
43523
|
|
|
43508
43524
|
var _DateInput$defaultPro;
|
|
43509
|
-
var _excluded$1d = ["size", "color", "className", "style", "disabled", "readOnly", "onFocus", "onBlur", "value", "dateFormat", "tabIndex", "
|
|
43525
|
+
var _excluded$1d = ["size", "color", "className", "style", "disabled", "readOnly", "onFocus", "onBlur", "value", "dateFormat", "tabIndex", "monthsShown", "selectsRange", "withPortal", "shouldCloseOnOpen", "showTimeInput", "showTimeSelect", "onChange"];
|
|
43510
43526
|
var DateInput = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
43511
43527
|
var size = props.size,
|
|
43512
43528
|
color = props.color,
|
|
@@ -43519,8 +43535,6 @@ var DateInput = /*#__PURE__*/React__default["default"].forwardRef(function (prop
|
|
|
43519
43535
|
props.value;
|
|
43520
43536
|
var dateFormat = props.dateFormat;
|
|
43521
43537
|
props.tabIndex;
|
|
43522
|
-
props.minDate;
|
|
43523
|
-
props.maxDate;
|
|
43524
43538
|
var monthsShown = props.monthsShown,
|
|
43525
43539
|
selectsRange = props.selectsRange,
|
|
43526
43540
|
withPortal = props.withPortal,
|
|
@@ -43543,7 +43557,8 @@ var DateInput = /*#__PURE__*/React__default["default"].forwardRef(function (prop
|
|
|
43543
43557
|
return /*#__PURE__*/React__default["default"].createElement(Styled_DatePickerWrapper, _extends__default$1["default"]({}, themeProps, {
|
|
43544
43558
|
className: className,
|
|
43545
43559
|
style: style,
|
|
43546
|
-
monthsShown: monthsShown
|
|
43560
|
+
monthsShown: monthsShown,
|
|
43561
|
+
withPortal: withPortal
|
|
43547
43562
|
}), /*#__PURE__*/React__default["default"].createElement(ReactDatePicker, _extends__default$1["default"]({}, rest, {
|
|
43548
43563
|
onChange: onChange,
|
|
43549
43564
|
selectsRange: selectsRange,
|
|
@@ -43583,8 +43598,6 @@ DateInput.propTypes = {
|
|
|
43583
43598
|
disabled: PropTypes__default["default"].bool,
|
|
43584
43599
|
readOnly: PropTypes__default["default"].bool,
|
|
43585
43600
|
dateFormat: PropTypes__default["default"].string,
|
|
43586
|
-
minDate: PropTypes__default["default"].any,
|
|
43587
|
-
maxDate: PropTypes__default["default"].any,
|
|
43588
43601
|
tabIndex: PropTypes__default["default"].number,
|
|
43589
43602
|
monthsShown: PropTypes__default["default"].number,
|
|
43590
43603
|
withPortal: PropTypes__default["default"].bool,
|
|
@@ -71241,8 +71254,10 @@ DropdownMenu.propTypes = {
|
|
|
71241
71254
|
|
|
71242
71255
|
var _excluded$L = ["active", "icon", "disabled", "isNested", "showNested", "value", "onFocus", "onBlur", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "toggleNested", "onItemSelected", "className", "style", "color", "iconProps", "__TYPE__", "children"];
|
|
71243
71256
|
var _templateObject$I;
|
|
71244
|
-
var Item$1 = newStyled.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteral__default["default"](["\n box-sizing: border-box;\n cursor: ", ";\n width: 100%;\n border-radius: 6px;\n display: flex;\n align-items: center;\n min-height: 2.25rem;\n gap: 0.563rem;\n padding: 0.563rem;\n &:hover {\n background-color: ", ";\n color: ", ";\n & .drop-down-icon-lnc {\n color: ", ";\n }\n }\n ", ";\n & .drop-down-icon-lnc {\n color: ", ";\n ", ";\n background: transparent;\n }\n & .sub-menu-icon-lnc {\n margin-left: auto;\n transform: ", ";\n transition: transform 0.25s ease;\n }\n ", "\n outline: none;\n ", ";\n"])), function (props) {
|
|
71257
|
+
var Item$1 = newStyled.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteral__default["default"](["\n box-sizing: border-box;\n cursor: ", ";\n width: 100%;\n border-radius: 6px;\n display: flex;\n align-items: center;\n min-height: 2.25rem;\n gap: 0.563rem;\n padding: 0.563rem;\n color: ", ";\n &:hover {\n background-color: ", ";\n color: ", ";\n & .drop-down-icon-lnc {\n color: ", ";\n }\n }\n ", ";\n & .drop-down-icon-lnc {\n color: ", ";\n ", ";\n background: transparent;\n }\n & .sub-menu-icon-lnc {\n margin-left: auto;\n transform: ", ";\n transition: transform 0.25s ease;\n }\n ", "\n outline: none;\n ", ";\n"])), function (props) {
|
|
71245
71258
|
return props.disabled == false ? "pointer" : "context-menu";
|
|
71259
|
+
}, function (props) {
|
|
71260
|
+
return getColorRgbaValue(props.theme, "MenuItem", props.color, props.isActive === true ? "active" : "enabled", "text");
|
|
71246
71261
|
}, function (props) {
|
|
71247
71262
|
return getColorRgbaValue(props.theme, "MenuItem", props.color, "hover", "background", "backgroundOpacity");
|
|
71248
71263
|
}, function (props) {
|
|
@@ -71430,7 +71445,9 @@ var DropdownItem = /*#__PURE__*/React__default["default"].forwardRef(function (p
|
|
|
71430
71445
|
}, rest), icon && /*#__PURE__*/React__default["default"].createElement(Icon, _extends__default$1["default"]({
|
|
71431
71446
|
icon: icon,
|
|
71432
71447
|
className: "drop-down-icon-lnc"
|
|
71433
|
-
}, iconProps)), /*#__PURE__*/React__default["default"].createElement("div",
|
|
71448
|
+
}, iconProps)), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
71449
|
+
className: "menu-item-text-lnc"
|
|
71450
|
+
}, children), isNested && /*#__PURE__*/React__default["default"].createElement(Icon, {
|
|
71434
71451
|
icon: "angle-down",
|
|
71435
71452
|
className: "sub-menu-icon-lnc"
|
|
71436
71453
|
})));
|