@lanaco/lnc-react-ui 3.11.8 → 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 CHANGED
@@ -14316,7 +14316,7 @@ Icon.propTypes = {
14316
14316
  };
14317
14317
 
14318
14318
  var _templateObject$1n;
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 padding: 0.375rem;\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: 0.375rem 0.375rem 0.375rem 0.375rem;\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) {
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) {
14320
14320
  return getComponentTypographyCss(props.theme, "DateInput", props.size, "enabled");
14321
14321
  }, function (props) {
14322
14322
  return props.monthsShown > 2 ? 3 * 100 + "%" : props.monthsShown * 100 + "%";
@@ -14328,6 +14328,10 @@ var Styled_DatePickerWrapper = newStyled.div(_templateObject$1n || (_templateObj
14328
14328
  return getColorRgbaValue(props.theme, "DateInput", props.color, "enabled", "background");
14329
14329
  }, function (props) {
14330
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";
14331
14335
  }, function (props) {
14332
14336
  return getColorRgbaValue(props.theme, "DateInput", props.color, "enabled", "today");
14333
14337
  }, function (props) {
@@ -14336,6 +14340,8 @@ var Styled_DatePickerWrapper = newStyled.div(_templateObject$1n || (_templateObj
14336
14340
  return getColorRgbaValue(props.theme, "DateInput", props.color, "enabled", "textWeekDays");
14337
14341
  }, function (props) {
14338
14342
  return getColorRgbaValue(props.theme, "DateInput", props.color, "enabled", "textWeekDays");
14343
+ }, function (p) {
14344
+ return p.withPortal === true ? "0" : "0.3rem";
14339
14345
  }, function (props) {
14340
14346
  return getColorRgbaValue(props.theme, "DateInput", props.color, "hover", "background", "backgroundOpacity");
14341
14347
  }, function (props) {
@@ -43502,7 +43508,8 @@ var DateInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
43502
43508
  return /*#__PURE__*/React__default.createElement(Styled_DatePickerWrapper, _extends$4({}, themeProps, {
43503
43509
  className: className,
43504
43510
  style: style,
43505
- monthsShown: monthsShown
43511
+ monthsShown: monthsShown,
43512
+ withPortal: withPortal
43506
43513
  }), /*#__PURE__*/React__default.createElement(ReactDatePicker, _extends$4({}, rest, {
43507
43514
  onChange: onChange,
43508
43515
  selectsRange: selectsRange,
@@ -71198,8 +71205,10 @@ DropdownMenu.propTypes = {
71198
71205
 
71199
71206
  var _excluded$L = ["active", "icon", "disabled", "isNested", "showNested", "value", "onFocus", "onBlur", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "toggleNested", "onItemSelected", "className", "style", "color", "iconProps", "__TYPE__", "children"];
71200
71207
  var _templateObject$I;
71201
- 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) {
71202
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");
71203
71212
  }, function (props) {
71204
71213
  return getColorRgbaValue(props.theme, "MenuItem", props.color, "hover", "background", "backgroundOpacity");
71205
71214
  }, function (props) {
@@ -71387,7 +71396,9 @@ var DropdownItem = /*#__PURE__*/React__default.forwardRef(function (props, ref)
71387
71396
  }, rest), icon && /*#__PURE__*/React__default.createElement(Icon, _extends$4({
71388
71397
  icon: icon,
71389
71398
  className: "drop-down-icon-lnc"
71390
- }, iconProps)), /*#__PURE__*/React__default.createElement("div", null, children), isNested && /*#__PURE__*/React__default.createElement(Icon, {
71399
+ }, iconProps)), /*#__PURE__*/React__default.createElement("div", {
71400
+ className: "menu-item-text-lnc"
71401
+ }, children), isNested && /*#__PURE__*/React__default.createElement(Icon, {
71391
71402
  icon: "angle-down",
71392
71403
  className: "sub-menu-icon-lnc"
71393
71404
  })));
package/lib/index.js CHANGED
@@ -14365,7 +14365,7 @@ Icon.propTypes = {
14365
14365
  };
14366
14366
 
14367
14367
  var _templateObject$1n;
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 padding: 0.375rem;\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: 0.375rem 0.375rem 0.375rem 0.375rem;\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) {
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) {
14369
14369
  return getComponentTypographyCss(props.theme, "DateInput", props.size, "enabled");
14370
14370
  }, function (props) {
14371
14371
  return props.monthsShown > 2 ? 3 * 100 + "%" : props.monthsShown * 100 + "%";
@@ -14377,6 +14377,10 @@ var Styled_DatePickerWrapper = newStyled.div(_templateObject$1n || (_templateObj
14377
14377
  return getColorRgbaValue(props.theme, "DateInput", props.color, "enabled", "background");
14378
14378
  }, function (props) {
14379
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";
14380
14384
  }, function (props) {
14381
14385
  return getColorRgbaValue(props.theme, "DateInput", props.color, "enabled", "today");
14382
14386
  }, function (props) {
@@ -14385,6 +14389,8 @@ var Styled_DatePickerWrapper = newStyled.div(_templateObject$1n || (_templateObj
14385
14389
  return getColorRgbaValue(props.theme, "DateInput", props.color, "enabled", "textWeekDays");
14386
14390
  }, function (props) {
14387
14391
  return getColorRgbaValue(props.theme, "DateInput", props.color, "enabled", "textWeekDays");
14392
+ }, function (p) {
14393
+ return p.withPortal === true ? "0" : "0.3rem";
14388
14394
  }, function (props) {
14389
14395
  return getColorRgbaValue(props.theme, "DateInput", props.color, "hover", "background", "backgroundOpacity");
14390
14396
  }, function (props) {
@@ -43551,7 +43557,8 @@ var DateInput = /*#__PURE__*/React__default["default"].forwardRef(function (prop
43551
43557
  return /*#__PURE__*/React__default["default"].createElement(Styled_DatePickerWrapper, _extends__default$1["default"]({}, themeProps, {
43552
43558
  className: className,
43553
43559
  style: style,
43554
- monthsShown: monthsShown
43560
+ monthsShown: monthsShown,
43561
+ withPortal: withPortal
43555
43562
  }), /*#__PURE__*/React__default["default"].createElement(ReactDatePicker, _extends__default$1["default"]({}, rest, {
43556
43563
  onChange: onChange,
43557
43564
  selectsRange: selectsRange,
@@ -71247,8 +71254,10 @@ DropdownMenu.propTypes = {
71247
71254
 
71248
71255
  var _excluded$L = ["active", "icon", "disabled", "isNested", "showNested", "value", "onFocus", "onBlur", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "toggleNested", "onItemSelected", "className", "style", "color", "iconProps", "__TYPE__", "children"];
71249
71256
  var _templateObject$I;
71250
- 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) {
71251
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");
71252
71261
  }, function (props) {
71253
71262
  return getColorRgbaValue(props.theme, "MenuItem", props.color, "hover", "background", "backgroundOpacity");
71254
71263
  }, function (props) {
@@ -71436,7 +71445,9 @@ var DropdownItem = /*#__PURE__*/React__default["default"].forwardRef(function (p
71436
71445
  }, rest), icon && /*#__PURE__*/React__default["default"].createElement(Icon, _extends__default$1["default"]({
71437
71446
  icon: icon,
71438
71447
  className: "drop-down-icon-lnc"
71439
- }, iconProps)), /*#__PURE__*/React__default["default"].createElement("div", null, children), isNested && /*#__PURE__*/React__default["default"].createElement(Icon, {
71448
+ }, iconProps)), /*#__PURE__*/React__default["default"].createElement("div", {
71449
+ className: "menu-item-text-lnc"
71450
+ }, children), isNested && /*#__PURE__*/React__default["default"].createElement(Icon, {
71440
71451
  icon: "angle-down",
71441
71452
  className: "sub-menu-icon-lnc"
71442
71453
  })));
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@lanaco/lnc-react-ui",
3
3
  "type": "module",
4
- "version": "3.11.8",
4
+ "version": "3.11.9",
5
5
  "description": "component library",
6
6
  "main": "lib/index.js",
7
7
  "module": "lib/index.esm.js",