@linzjs/lui 23.7.0 → 23.7.2
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/CHANGELOG.md +14 -0
- package/dist/components/Drawer/Drawer.d.ts +2 -2
- package/dist/components/Drawer/DrawerGlobal.d.ts +2 -3
- package/dist/index.d.ts +3 -0
- package/dist/index.js +183 -50
- package/dist/index.js.map +1 -1
- package/dist/lui.esm.js +179 -51
- package/dist/lui.esm.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -3097,8 +3097,8 @@ function styleInject(css, ref) {
|
|
|
3097
3097
|
}
|
|
3098
3098
|
}
|
|
3099
3099
|
|
|
3100
|
-
var css_248z$
|
|
3101
|
-
styleInject(css_248z$
|
|
3100
|
+
var css_248z$p = ".LuiResizableLayout-leftPanel {\n display: flex;\n flex-direction: column;\n /* this overflow and the one below (LuiResizableLayout-leftPanelBody) are need to make only\n the search result div scroll (instead of the whole page) */\n overflow: auto;\n}\n\n.LuiResizableLayout-rightPanel {\n display: flex;\n flex-direction: column;\n /* this overflow and the one below (LuiResizableLayout-leftPanelBody) are need to make only\n the search result div scroll (instead of the whole page) */\n overflow: auto;\n}\n\n.LuiResizableLayout-leftPanelBody {\n overflow-y: auto;\n}\n\n.LuiResizableLayout-gutterParentControl {\n display: flex;\n /* use visibility and opacity instead of display: none as we want to be able to fade in on hover */\n visibility: hidden;\n opacity: 0;\n position: fixed;\n top: 50%;\n z-index: 500;\n margin-left: -30px; /*half total control width, minus half the gutter width*/\n transition: 0.3s all 2s ease-in;\n}\n\n.LuiResizableLayout-gutterControlLeft, .LuiResizableLayout-gutterControlRight {\n background-color: #eaeaea;\n width: 32px;\n height: 80px;\n text-align: center;\n display: flex;\n align-items: center;\n}\n\n.LuiResizableLayout-gutterControlLeft {\n border-radius: 3px 0 0 3px;\n}\n\n.LuiResizableLayout-gutterControlRight {\n border-radius: 0 3px 3px 0;\n}\n\n.LuiResizableLayout-gutterControlLeft > .LuiIcon, .LuiResizableLayout-gutterControlRight > .LuiIcon {\n height: auto;\n}\n\n.LuiResizableLayout-gutterControlLeft:hover, .LuiResizableLayout-gutterControlRight:hover {\n background-color: #73c8e1;\n cursor: pointer;\n}\n\n.LuiResizableLayout-gutterControl-collapsed {\n visibility: hidden;\n}\n\n/* TODO: move the expand gutter button so it doesn't show over the scroll bar */\n.LuiResizableLayout-gutterParentControlVisible {\n visibility: visible;\n opacity: 1;\n}\n\n.LuiResizableLayout-grid {\n display: grid;\n height: 100%;\n}\n\n.LuiResizableLayout-gutterCol {\n grid-row: 1/-1;\n cursor: col-resize;\n width: 16px;\n z-index: 1;\n}\n\n.LuiResizableLayout-gutterCol-collapsed {\n width: 4px;\n}\n\n.LuiResizableLayout-gutterCol1 {\n grid-column: 2;\n}\n\n.LuiResizableLayout-gutterCol:hover > .LuiResizableLayout-gutterParentControl {\n visibility: visible;\n opacity: 1;\n transition: 0s all 0s ease-in;\n}\n\n.LuiResizableLayout-gutterSlider {\n width: 4px;\n height: 100%;\n background-color: #eaeaea;\n pointer-events: none;\n}\n\n.LuiResizableLayout-gutterCol:hover .LuiResizableLayout-gutterSlider, .LuiResizableLayout-gutterCol:active .LuiResizableLayout-gutterSlider {\n background-color: #73c8e1;\n}";
|
|
3101
|
+
styleInject(css_248z$p);
|
|
3102
3102
|
|
|
3103
3103
|
var GutterComponent = function (props) {
|
|
3104
3104
|
var leftIcon = (React__default["default"].createElement(LuiIcon, { name: "ic_double_arrow_left", alt: "", status: "interactive" }));
|
|
@@ -6859,8 +6859,8 @@ var LuiTabsPanelSwitch = function (props) {
|
|
|
6859
6859
|
} }, tabProps), children));
|
|
6860
6860
|
};
|
|
6861
6861
|
|
|
6862
|
-
var css_248z$
|
|
6863
|
-
styleInject(css_248z$
|
|
6862
|
+
var css_248z$o = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.LuiError {\n font-family: \"Open Sans\", system-ui, sans-serif;\n font-style: normal;\n font-weight: 600;\n margin-bottom: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.5rem;\n color: #2a292c;\n}\n.LuiError-errorIcon {\n vertical-align: middle;\n display: inline-block;\n}\n.LuiError-errorText {\n margin-left: 0.5rem;\n}";
|
|
6863
|
+
styleInject(css_248z$o);
|
|
6864
6864
|
|
|
6865
6865
|
var LuiError = function (_a) {
|
|
6866
6866
|
var error = _a.error, className = _a.className;
|
|
@@ -7259,8 +7259,8 @@ var LuiDateInput = React__default["default"].forwardRef(function (_a, ref) {
|
|
|
7259
7259
|
return React__default["default"].createElement(LuiTextInput, __assign({}, mapped, { ref: ref }));
|
|
7260
7260
|
});
|
|
7261
7261
|
|
|
7262
|
-
var css_248z$
|
|
7263
|
-
styleInject(css_248z$
|
|
7262
|
+
var css_248z$n = ".LuiTextInput.money input {\n background-image: url(\"data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'> <text x='4' y='31' font-size='15' font-family='Open Sans, system-ui, sans-seri' text-anchor='middle'>$</text> </svg>\");\n background-position: 10px center;\n background-repeat: no-repeat;\n padding-left: 22px;\n line-height: unset;\n}";
|
|
7263
|
+
styleInject(css_248z$n);
|
|
7264
7264
|
|
|
7265
7265
|
var MoneyParser = /** @class */ (function () {
|
|
7266
7266
|
function MoneyParser(init, options) {
|
|
@@ -14924,9 +14924,9 @@ var StateManagedSelect = /*#__PURE__*/React__default["default"].forwardRef(funct
|
|
|
14924
14924
|
|
|
14925
14925
|
var Select = StateManagedSelect;
|
|
14926
14926
|
|
|
14927
|
-
var css_248z$
|
|
14927
|
+
var css_248z$m = "";
|
|
14928
14928
|
var colors = {"charcoal":"#2a292c","fuscous":"#6b6966","gray":"#989189","silver":"#beb9b4","lily":"#eaeaea","dew":"#DAD7D6","hint":"#f9f9f9","snow":"#ffffff","white":"#ffffff","teal":"#00425d","sea":"#007198","electric":"#0096cc","spray":"#73c8e1","polar":"#e2f3f7","memesia":"#1F69C3","sherpa":"#004b50","surfie":"#017a76","persian":"#00a599","downy":"#73cdc8","iceberg":"#dcf5f0","sacramento":"#004e32","salem":"#08814d","pigment":"#0aa245","granny":"#9bd79b","panache":"#e9fae7","brand-primary":"#004b50","brand-secondary":"#017a76","engine":"#cc0000","carrot":"#EA6A2E","kendall":"#F5CCCC","elizabeth":"#FBDED0","andrea":"#3A7CDF","celestial":"#D7E5F9","golf":"#0AA345","error":"#cc0000","error-bg":"#F5CCCC","error-focus":"#5a0000","warning":"#EA6A2E","warning-bg":"#fbdfd2","warning-focus":"#b33a01","success":"#0aa245","success-bg":"#e9fae7","info":"#3A7CDF","info-bg":"#d8e5f9","visited":"#00425d","green-hover":"#107c3a","green-active":"#094a22","green-btn":"#0aa245","txt-link":"#1F69C3","primary-hover-btn":"#005678","selection":"#c7e9f3","heading-color":"#017a76","heading-color--secondary":"#2a292c","base-type-color":"#2a292c","input-text":"#2a292c","input-placeholder":"#6b6966","input-placeholder-when-disabled":"#989189","base-icon-color":"#007198","disabled-color":"#989189","disabled-color-dark":"#6b6966","linz-color-primary":"#023d48","linz-color-primary-hover":"#01818a","linz-color-tertiary":"#e1e44a","linz-color-tertiary-hover":"#cdcf59","color-test-pink":"#f09","linz-linear-gradient-blue":"linear-gradient(70deg, #00425d 12%, #007198 100%)","linz-linear-gradient-teal":"linear-gradient(270deg, #00a599 1%, #73cdc8 100%)"};
|
|
14929
|
-
styleInject(css_248z$
|
|
14929
|
+
styleInject(css_248z$m);
|
|
14930
14930
|
|
|
14931
14931
|
var _excluded = ["allowCreateWhileLoading", "createOptionPosition", "formatCreateLabel", "isValidNewOption", "getNewOptionData", "onCreateOption", "options", "onChange"];
|
|
14932
14932
|
|
|
@@ -15146,6 +15146,21 @@ var usePageClickFunction = function (onClickInsideArg, onClickOutsideArg) {
|
|
|
15146
15146
|
}, [elementRef, onClickInside, onClickOutside]);
|
|
15147
15147
|
return elementRef;
|
|
15148
15148
|
};
|
|
15149
|
+
/** Disables scrolling on an specified element */
|
|
15150
|
+
var useDisableScroll = function (el, shouldDisable) {
|
|
15151
|
+
if (shouldDisable === void 0) { shouldDisable = true; }
|
|
15152
|
+
return React.useEffect(function () {
|
|
15153
|
+
if (!shouldDisable || !el)
|
|
15154
|
+
return;
|
|
15155
|
+
el.setAttribute('data-previous-overflow', el.style.overflow);
|
|
15156
|
+
el.style.overflow = 'hidden';
|
|
15157
|
+
return function () {
|
|
15158
|
+
var _a;
|
|
15159
|
+
el.style.overflow = (_a = el.getAttribute('data-previous-overflow')) !== null && _a !== void 0 ? _a : 'unset';
|
|
15160
|
+
el.removeAttribute('data-previous-overflow');
|
|
15161
|
+
};
|
|
15162
|
+
}, [shouldDisable, el]);
|
|
15163
|
+
};
|
|
15149
15164
|
/**
|
|
15150
15165
|
* Provides a stable ID across renders, can be replaced in react 18+ by native implementation
|
|
15151
15166
|
*/
|
|
@@ -17622,8 +17637,8 @@ var LuiAlertModalV2 = function (props) {
|
|
|
17622
17637
|
} }), children));
|
|
17623
17638
|
};
|
|
17624
17639
|
|
|
17625
|
-
var css_248z$
|
|
17626
|
-
styleInject(css_248z$
|
|
17640
|
+
var css_248z$l = "@keyframes react-loading-skeleton {\n 100% {\n transform: translateX(100%);\n }\n}\n\n.react-loading-skeleton {\n --base-color: #ebebeb;\n --highlight-color: #f5f5f5;\n --animation-duration: 1.5s;\n --animation-direction: normal;\n --pseudo-element-display: block; /* Enable animation */\n\n background-color: var(--base-color);\n\n width: 100%;\n border-radius: 0.25rem;\n display: inline-flex;\n line-height: 1;\n\n position: relative;\n user-select: none;\n overflow: hidden;\n z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */\n}\n\n.react-loading-skeleton::after {\n content: ' ';\n display: var(--pseudo-element-display);\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 100%;\n background-repeat: no-repeat;\n background-image: linear-gradient(\n 90deg,\n var(--base-color),\n var(--highlight-color),\n var(--base-color)\n );\n transform: translateX(-100%);\n\n animation-name: react-loading-skeleton;\n animation-direction: var(--animation-direction);\n animation-duration: var(--animation-duration);\n animation-timing-function: ease-in-out;\n animation-iteration-count: infinite;\n}\n\n@media (prefers-reduced-motion) {\n .react-loading-skeleton {\n --pseudo-element-display: none; /* Disable animation */\n }\n}\n";
|
|
17641
|
+
styleInject(css_248z$l);
|
|
17627
17642
|
|
|
17628
17643
|
/**
|
|
17629
17644
|
* @internal
|
|
@@ -22412,8 +22427,8 @@ var LuiSidePanelProvider = function (_a) {
|
|
|
22412
22427
|
React__default["default"].createElement(LuiSidePanelContainer, __assign({}, props))));
|
|
22413
22428
|
};
|
|
22414
22429
|
|
|
22415
|
-
var css_248z$
|
|
22416
|
-
styleInject(css_248z$
|
|
22430
|
+
var css_248z$k = ".lui-switch-checkbox {\n height: 0;\n width: 0;\n visibility: hidden;\n}\n\n.lui-switch-label {\n display: flex;\n align-items: center;\n cursor: pointer;\n width: 40px;\n padding: 2px;\n background: #ffffff;\n border: 1px solid #007198;\n border-radius: 40px;\n position: relative;\n transition: background-color 0.2s;\n}\n\n.lui-switch-label .lui-switch-button {\n content: \"\";\n position: relative;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n transition: 0.2s;\n background: #007198;\n box-shadow: 0 0 2px 0 rgba(10, 10, 10, 0.29);\n}\n\n.lui-switch-label-checked {\n background: #007198;\n}\n.lui-switch-label-checked .lui-switch-button {\n transform: translateX(20px);\n background: #ffffff;\n}\n\n.lui-switch-checkbox:disabled + .lui-switch-label {\n background: #eaeaea;\n border: 1px solid #989189;\n}\n.lui-switch-checkbox:disabled + .lui-switch-label .lui-switch-button {\n background: #989189;\n}\n.lui-switch-checkbox:disabled + .lui-switch-label-checked {\n background: #989189;\n}\n.lui-switch-checkbox:disabled + .lui-switch-label-checked .lui-switch-button {\n background: #eaeaea;\n}";
|
|
22431
|
+
styleInject(css_248z$k);
|
|
22417
22432
|
|
|
22418
22433
|
var LuiSwitchButton = function (props) {
|
|
22419
22434
|
var generatedId = useGenerateOrDefaultId();
|
|
@@ -30044,8 +30059,8 @@ var LuiAccordicardStatic = function (props) {
|
|
|
30044
30059
|
React__default["default"].createElement(LuiIcon, { className: clsx('LuiAccordicardStatic-chevron', isOpen ? 'LuiAccordicardStatic-chevron--isOpen' : null), name: 'ic_expand_more', alt: "expand", title: "Expand and collapse panel", size: "md" }))));
|
|
30045
30060
|
};
|
|
30046
30061
|
|
|
30047
|
-
var css_248z$
|
|
30048
|
-
styleInject(css_248z$
|
|
30062
|
+
var css_248z$j = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.lui-accordion {\n padding: 8px;\n border-radius: 5px;\n box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2509803922), 0px 0px 3px 0px rgba(0, 0, 0, 0.1490196078);\n}\n.lui-accordion .chevron {\n transition: all 0.3s ease-in-out;\n transform: rotate(0);\n}\n.lui-accordion .chevron--isOpen {\n transform: rotate(180deg);\n}\n.lui-accordion .accordion-heading {\n padding: 4px;\n}\n.lui-accordion h4 {\n padding: 4px;\n}\n.lui-accordion > summary {\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n.lui-accordion > summary h4 {\n margin-top: 0;\n display: inline-block;\n}\n.lui-accordion > summary::marker, .lui-accordion > summary::-webkit-details-marker {\n display: none;\n}";
|
|
30063
|
+
styleInject(css_248z$j);
|
|
30049
30064
|
|
|
30050
30065
|
var LuiAccordion = function (props) {
|
|
30051
30066
|
var _a = props.expanded, expanded = _a === void 0 ? false : _a, heading = props.heading, children = props.children, _b = props.iconColor, iconColor = _b === void 0 ? '#017A76' : _b, className = props.className, _c = props.style, style = _c === void 0 ? {} : _c;
|
|
@@ -30156,8 +30171,8 @@ var LuiMultiSwitch = function (_a) {
|
|
|
30156
30171
|
React__default["default"].createElement("div", { className: clsx('LuiMultiSwitch-labels', disabled && 'LuiMultiSwitch-disabled') }, options === null || options === void 0 ? void 0 : options.map(function (option, i) { return (React__default["default"].createElement("label", { role: 'radio', key: i, htmlFor: id.current, "aria-disabled": option.disabled || disabled, "aria-checked": selectedIndex === i, className: option.className, onClick: function () { return select(i); }, onTouchStart: function () { return select(i); } }, option.text)); }))));
|
|
30157
30172
|
};
|
|
30158
30173
|
|
|
30159
|
-
var css_248z$
|
|
30160
|
-
styleInject(css_248z$
|
|
30174
|
+
var css_248z$i = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.LuiListBox {\n padding: 0;\n list-style: none;\n}\n.LuiListBox .LuiListBoxItem {\n font-family: \"Open Sans\", system-ui, sans-serif;\n font-style: normal;\n font-weight: normal;\n user-select: none;\n color: #2a292c;\n line-height: 24px;\n outline: none;\n padding: 0.5rem 0.75rem;\n border: 2px solid transparent;\n}\n.LuiListBox .LuiListBoxItem:focus-visible {\n border-color: #007198;\n}\n.LuiListBox .LuiListBoxItem.LuiListBoxItem-selected {\n background: #e2f3f7;\n}\n.LuiListBox .LuiListBoxItem:hover, .LuiListBox .LuiListBoxItem.LuiListBoxItem-selected:hover {\n background: rgb(214.0081081081, 238.0378378378, 243.6918918919);\n}\n.LuiListBox .LuiListBoxItem.LuiListBoxItem-disabled {\n background: #eaeaea;\n}\n.LuiListBox .LuiListBox-emptyIndicator, .LuiListBox .LuiListBox-loadingIndicator {\n padding: 0.5rem 0.75rem;\n}\n.LuiListBox .LuiListBoxGroup .LuiListBoxGroup-heading {\n font-family: \"Open Sans\", system-ui, sans-serif;\n font-style: normal;\n font-weight: normal;\n font-size: 14px;\n user-select: none;\n color: #6b6966;\n line-height: 16px;\n padding: 0.5rem 0.5rem;\n}";
|
|
30175
|
+
styleInject(css_248z$i);
|
|
30161
30176
|
|
|
30162
30177
|
function $c1d7fb2ec91bae71$var$Item(props) {
|
|
30163
30178
|
return null;
|
|
@@ -33686,16 +33701,16 @@ function DefaultEmptyIndicator() {
|
|
|
33686
33701
|
return React__default["default"].createElement("li", { className: "LuiListBox-emptyIndicator" }, "Nothing to Display");
|
|
33687
33702
|
}
|
|
33688
33703
|
|
|
33689
|
-
var css_248z$
|
|
33690
|
-
styleInject(css_248z$
|
|
33704
|
+
var css_248z$h = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.RadioItemRenderer {\n display: flex;\n align-items: center;\n position: relative;\n padding: 0 0 0 2rem;\n}\n.RadioItemRenderer::before {\n content: \"\";\n height: 1.5rem;\n min-width: 1.5rem;\n width: 1.5rem;\n border: 2px solid #007198;\n border-radius: 50%;\n background-color: transparent;\n position: absolute;\n left: 0;\n top: 0;\n margin-right: 0.75rem;\n}\n.RadioItemRenderer:after {\n content: \"\";\n position: absolute;\n left: 5px;\n top: 5px;\n background-color: #007198;\n height: 14px;\n min-width: 14px;\n width: 14px;\n border-radius: 50%;\n opacity: 0;\n transition: opacity 0.3s ease-in-out;\n}\n.RadioItemRenderer-isSelected:after {\n opacity: 1;\n}";
|
|
33705
|
+
styleInject(css_248z$h);
|
|
33691
33706
|
|
|
33692
33707
|
function RadioItemRenderer(_a) {
|
|
33693
33708
|
var item = _a.item, isSelected = _a.isSelected;
|
|
33694
33709
|
return (React__default["default"].createElement("div", { className: "RadioItemRenderer ".concat(isSelected ? 'RadioItemRenderer-isSelected' : '') }, item.label));
|
|
33695
33710
|
}
|
|
33696
33711
|
|
|
33697
|
-
var css_248z$
|
|
33698
|
-
styleInject(css_248z$
|
|
33712
|
+
var css_248z$g = ".CheckboxRenderer {\n display: flex;\n align-items: center;\n}";
|
|
33713
|
+
styleInject(css_248z$g);
|
|
33699
33714
|
|
|
33700
33715
|
function CheckboxItemRenderer(_a) {
|
|
33701
33716
|
var item = _a.item, isSelected = _a.isSelected;
|
|
@@ -33721,8 +33736,8 @@ function LuiSideMenuItem(_a) {
|
|
|
33721
33736
|
React__default["default"].createElement("span", { className: "navText" }, label)))));
|
|
33722
33737
|
}
|
|
33723
33738
|
|
|
33724
|
-
var css_248z$
|
|
33725
|
-
styleInject(css_248z$
|
|
33739
|
+
var css_248z$f = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n@keyframes animate-stripes {\n 100% {\n background-position: 100px 0;\n }\n}\n.ProgressBar, .ProgressBar-PROC, .ProgressBar-COMP, .ProgressBar-FAIL {\n height: 5px;\n width: 100%;\n background-color: #eaeaea;\n border-radius: 3px;\n}\n.ProgressBar-FAIL {\n background-color: #cc0000;\n}\n.ProgressBar-COMP {\n background-color: #0aa245;\n}\n.ProgressBar-PROC {\n background-color: #0096cc;\n transition: width 0.3s ease-in-out;\n}\n.ProgressBar-PROC.indeterminate {\n background-image: linear-gradient(-45deg, transparent 25%, rgba(255, 255, 255, 0.75) 25%, rgba(255, 255, 255, 0.75) 75%, transparent 75%);\n background-size: 50px 100%;\n animation: animate-stripes 5s linear infinite;\n}";
|
|
33740
|
+
styleInject(css_248z$f);
|
|
33726
33741
|
|
|
33727
33742
|
var LuiProgressBar = function (_a) {
|
|
33728
33743
|
var value = _a.value, max = _a.max, error = _a.error, _b = _a.barHeight, barHeight = _b === void 0 ? '5px' : _b;
|
|
@@ -33750,8 +33765,8 @@ var LuiProgressBar = function (_a) {
|
|
|
33750
33765
|
React__default["default"].createElement("div", { "data-testid": 'progress-bar-size', className: clsx("ProgressBar-".concat(status), { indeterminate: indeterminate }), style: { width: "".concat(percentage, "%"), height: barHeight } })));
|
|
33751
33766
|
};
|
|
33752
33767
|
|
|
33753
|
-
var css_248z$
|
|
33754
|
-
styleInject(css_248z$
|
|
33768
|
+
var css_248z$e = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.Toolbar {\n position: absolute;\n align-items: center;\n align-self: center;\n background: #ffffff;\n border-radius: 5px;\n display: flex;\n flex-direction: column;\n height: fit-content;\n margin: 0 0.75rem;\n padding: 0;\n width: fit-content;\n z-index: 1000;\n box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2509803922), 0px 0px 3px 0px rgba(0, 0, 0, 0.1490196078);\n}\n\n.Left {\n justify-self: start;\n}\n\n.Right {\n justify-self: end;\n}";
|
|
33769
|
+
styleInject(css_248z$e);
|
|
33755
33770
|
|
|
33756
33771
|
exports.ToolbarDirection = void 0;
|
|
33757
33772
|
(function (ToolbarDirection) {
|
|
@@ -33762,8 +33777,8 @@ function LuiSideToolbar(props) {
|
|
|
33762
33777
|
return (React__default["default"].createElement("div", { className: clsx(['Toolbar', 'app--shadow-sm', props.direction]), "data-testid": "toolbar" }, props.children));
|
|
33763
33778
|
}
|
|
33764
33779
|
|
|
33765
|
-
var css_248z$
|
|
33766
|
-
styleInject(css_248z$
|
|
33780
|
+
var css_248z$d = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.ToolbarButton {\n height: 40px;\n width: 40px;\n line-height: 12px;\n margin: 2px;\n padding: 0.25rem;\n}\n\n.ToolbarButton-placement {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.ToolbarButton img {\n border-radius: 3px;\n margin: -0.25rem;\n}\n\n.ToolbarButton,\n.ToolbarButton:hover,\n.ToolbarButton:disabled,\n.ToolbarButton:active:enabled {\n border-radius: 5px;\n border: 2px #ffffff solid !important;\n}\n\n.ToolbarItem-separator {\n height: 2px;\n background-color: #eaeaea;\n width: 100%;\n}";
|
|
33781
|
+
styleInject(css_248z$d);
|
|
33767
33782
|
|
|
33768
33783
|
/**
|
|
33769
33784
|
* Show LuiIcon or Image.
|
|
@@ -33837,8 +33852,8 @@ var useMediaQuery = function (query) {
|
|
|
33837
33852
|
return matches;
|
|
33838
33853
|
};
|
|
33839
33854
|
|
|
33840
|
-
var css_248z$
|
|
33841
|
-
styleInject(css_248z$
|
|
33855
|
+
var css_248z$c = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.LuiCounter-round {\n background: #007198;\n color: #ffffff;\n text-align: center;\n width: 1.5em;\n height: 1.5em;\n border-radius: 50%;\n display: inline-block;\n font-family: \"Open Sans\", system-ui, sans-serif;\n font-style: normal;\n pointer-events: none;\n}";
|
|
33856
|
+
styleInject(css_248z$c);
|
|
33842
33857
|
|
|
33843
33858
|
var LuiCounter = React__default["default"].forwardRef(function (props, ref) {
|
|
33844
33859
|
var selectedNum = props.selectedNum, totalNum = props.totalNum, _a = props.shape, shape = _a === void 0 ? 'rect' : _a, _b = props.countZero, countZero = _b === void 0 ? true : _b, title = props.title, className = props.className, rest = __rest(props, ["selectedNum", "totalNum", "shape", "countZero", "title", "className"]);
|
|
@@ -33853,8 +33868,8 @@ var LuiCounter = React__default["default"].forwardRef(function (props, ref) {
|
|
|
33853
33868
|
return (React__default["default"].createElement(React__default["default"].Fragment, null, !(selectedNum === 0 && !countZero) && (React__default["default"].createElement("span", __assign({ ref: ref, className: determineCounterClassname(), "data-testid": "lui-counter-number-".concat(shape), title: title !== null && title !== void 0 ? title : "".concat(selectedNum, " of ").concat(totalNum, " rows selected") }, rest), selectedNum.toLocaleString()))));
|
|
33854
33869
|
});
|
|
33855
33870
|
|
|
33856
|
-
var css_248z$
|
|
33857
|
-
styleInject(css_248z$
|
|
33871
|
+
var css_248z$b = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.lui-pagination-override-mobile .lui-pagination-desktop {\n display: none;\n visibility: hidden;\n opacity: 0;\n}\n.lui-pagination-override-mobile .lui-pagination-mobile {\n display: flex;\n}\n\n.lui-pagination-override-desktop .lui-pagination-mobile {\n display: none;\n visibility: hidden;\n opacity: 0;\n}\n.lui-pagination-override-desktop .lui-pagination-desktop {\n display: flex;\n}\n\n.lui-pagination-controller {\n container-type: inline-size;\n}\n@container (min-width: 500px) {\n .lui-pagination-controller .lui-pagination-mobile {\n display: none;\n visibility: hidden;\n opacity: 0;\n }\n .lui-pagination-controller .lui-pagination-desktop {\n display: flex;\n }\n}\n@container (max-width: 499px) {\n .lui-pagination-controller .lui-pagination-desktop {\n display: none;\n visibility: hidden;\n opacity: 0;\n }\n .lui-pagination-controller .lui-pagination-mobile {\n display: flex;\n }\n}\n\n.lui-pagination {\n display: flex;\n user-select: none;\n justify-content: center;\n}\n.lui-pagination-page-counter {\n display: flex;\n align-items: center;\n margin-left: 0.75rem;\n margin-right: 0.75rem;\n}\n.lui-pagination .lui-button {\n color: #2a292c;\n height: 40px;\n padding: 0.5rem 0.75rem;\n vertical-align: top;\n}\n.lui-pagination .lui-button .lui-pagination-navigation-icon {\n padding-top: 1px;\n}\n.lui-pagination .lui-button .lui-pagination-navigation-icon path {\n fill: #2a292c;\n}\n.lui-pagination .lui-button-selected {\n background-color: #007198;\n color: #ffffff;\n}\n.lui-pagination-ellipsis {\n pointer-events: none;\n}\n.lui-pagination-navigate-disabled {\n pointer-events: none;\n}\n.lui-pagination-navigate-disabled .lui-pagination-navigation-icon {\n padding-top: 1px;\n}\n.lui-pagination-navigate-disabled .lui-pagination-navigation-icon path {\n fill: #989189 !important;\n}\n\n.pan-left {\n transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;\n transform: perspective(1000px) rotateY(20deg) translateX(-10px);\n opacity: 0.5;\n}\n\n.pan-right {\n transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;\n transform: perspective(1000px) rotateY(-20deg) translateX(10px);\n opacity: 0.5;\n}";
|
|
33872
|
+
styleInject(css_248z$b);
|
|
33858
33873
|
|
|
33859
33874
|
/**
|
|
33860
33875
|
* @description Pagination component for navigating through a list of items with multiple pages.
|
|
@@ -34000,11 +34015,11 @@ var LuiPagination = React.forwardRef(function (_a, ref) {
|
|
|
34000
34015
|
React__default["default"].createElement("div", { className: "pagination" }, renderPaginationNumbers())))));
|
|
34001
34016
|
});
|
|
34002
34017
|
|
|
34003
|
-
var css_248z$
|
|
34004
|
-
styleInject(css_248z$
|
|
34018
|
+
var css_248z$a = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.Separator {\n background-color: #eaeaea;\n position: absolute;\n display: flex;\n justify-content: space-around;\n transition-property: background-color;\n transition-delay: 750ms;\n transition-duration: 0ms;\n}\n.Separator-arrows {\n align-self: center;\n position: relative;\n opacity: 0;\n transition-property: opacity;\n transition-delay: 750ms;\n transition-duration: 0ms;\n}\n.Separator:focus-within, .Separator:hover, .Separator:focus, .Separator:active {\n background-color: #73c8e1;\n transition-delay: 0ms;\n transition-duration: 0ms;\n}\n.Separator:focus-within .Separator-arrows, .Separator:hover .Separator-arrows, .Separator:focus .Separator-arrows, .Separator:active .Separator-arrows {\n opacity: 1;\n transition-delay: 0ms;\n transition-duration: 0ms;\n display: inline-block;\n}";
|
|
34019
|
+
styleInject(css_248z$a);
|
|
34005
34020
|
|
|
34006
|
-
var css_248z$
|
|
34007
|
-
styleInject(css_248z$
|
|
34021
|
+
var css_248z$9 = ".Control {\n transition: opacity 0.2s ease;\n position: absolute;\n margin-left: 0 !important;\n display: flex;\n justify-content: space-around;\n align-items: center;\n}";
|
|
34022
|
+
styleInject(css_248z$9);
|
|
34008
34023
|
|
|
34009
34024
|
var useForkRef = function (forwardedRef) {
|
|
34010
34025
|
var localRef = React.useRef(null);
|
|
@@ -34733,8 +34748,8 @@ var keyDownHandler = function (e) {
|
|
|
34733
34748
|
return valueNow + delta;
|
|
34734
34749
|
};
|
|
34735
34750
|
|
|
34736
|
-
var css_248z$
|
|
34737
|
-
styleInject(css_248z$
|
|
34751
|
+
var css_248z$8 = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.Splitter {\n display: grid;\n position: relative;\n overflow: hidden;\n opacity: 0;\n}\n.Splitter > :first-child, .Splitter > :nth-child(2) {\n position: relative;\n z-index: 0;\n overflow: auto;\n background: #ffffff;\n}\n.Splitter.resizing * {\n pointer-events: none;\n user-select: none;\n}";
|
|
34752
|
+
styleInject(css_248z$8);
|
|
34738
34753
|
|
|
34739
34754
|
/**
|
|
34740
34755
|
* Container that appends a separator when the children count equals 2.
|
|
@@ -34786,8 +34801,8 @@ var useSplitterRef = function () {
|
|
|
34786
34801
|
return { ref: ref, setRatio: setRatio };
|
|
34787
34802
|
};
|
|
34788
34803
|
|
|
34789
|
-
var css_248z$
|
|
34790
|
-
styleInject(css_248z$
|
|
34804
|
+
var css_248z$7 = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.LuiBannerV2 {\n font-family: \"Open Sans\", system-ui, sans-serif;\n font-style: normal;\n font-weight: normal;\n box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2509803922), 0px 0px 3px 0px rgba(0, 0, 0, 0.1490196078);\n font-size: 16px;\n display: grid;\n align-items: center;\n min-height: 3rem;\n position: relative;\n background-color: #ffffff;\n border-radius: 5px;\n padding-bottom: 0.5rem;\n padding-top: 0.5rem;\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.LuiBannerV2 > :first-child {\n margin-top: 0;\n}\n.LuiBannerV2.has-level {\n padding-left: 3.25rem;\n border-left-width: 0.5rem;\n border-left-style: solid;\n}\n.LuiBannerV2.warning {\n border-left-color: #EA6A2E;\n}\n.LuiBannerV2.error {\n border-left-color: #cc0000;\n}\n.LuiBannerV2.info {\n border-left-color: #3A7CDF;\n}\n.LuiBannerV2.success {\n border-left-color: #0AA345;\n}\n.LuiBannerV2.can-dismiss {\n padding-right: 2.5rem;\n}\n.LuiBannerV2-Icon {\n position: absolute;\n left: 0.5rem;\n top: 0.5rem;\n}\n.LuiBannerV2-Icon.warning {\n color: #EA6A2E;\n}\n.LuiBannerV2-Icon.error {\n color: #cc0000;\n}\n.LuiBannerV2-Icon.info {\n color: #3A7CDF;\n}\n.LuiBannerV2-Icon.success {\n color: #0AA345;\n}\n.LuiBannerV2-Icon svg {\n fill: currentColor;\n}\n.LuiBannerV2-Dismiss {\n display: flex;\n position: absolute;\n right: 0.75rem;\n top: 50%;\n transform: translateY(-50%);\n background-color: transparent;\n padding: 0;\n}\n.LuiBannerV2-Dismiss svg {\n fill: #6b6966;\n}";
|
|
34805
|
+
styleInject(css_248z$7);
|
|
34791
34806
|
|
|
34792
34807
|
var LuiBannerV2 = React.forwardRef(function (_a, ref) {
|
|
34793
34808
|
var _b, _c, _d;
|
|
@@ -34806,16 +34821,16 @@ var LuiBannerV2 = React.forwardRef(function (_a, ref) {
|
|
|
34806
34821
|
onDismiss && (React__default["default"].createElement("button", __assign({}, dismissButtonProps, { className: clsx('LuiBannerV2-Dismiss', dismissButtonProps === null || dismissButtonProps === void 0 ? void 0 : dismissButtonProps.className), "aria-label": (_b = dismissButtonProps === null || dismissButtonProps === void 0 ? void 0 : dismissButtonProps['aria-label']) !== null && _b !== void 0 ? _b : 'Dismiss', type: (_c = dismissButtonProps === null || dismissButtonProps === void 0 ? void 0 : dismissButtonProps.type) !== null && _c !== void 0 ? _c : 'button', onClick: onDismiss }), (_d = dismissButtonProps === null || dismissButtonProps === void 0 ? void 0 : dismissButtonProps.children) !== null && _d !== void 0 ? _d : (React__default["default"].createElement(LuiIcon, { size: "md", name: "ic_clear", spanProps: { 'aria-hidden': true }, alt: "Dismiss" }))))));
|
|
34807
34822
|
});
|
|
34808
34823
|
|
|
34809
|
-
var css_248z$
|
|
34810
|
-
styleInject(css_248z$
|
|
34824
|
+
var css_248z$6 = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.colour-palette-display {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2.25rem;\n height: 1.25rem;\n background: #ffffff;\n border-radius: 1.25rem;\n box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);\n}\n.colour-palette-display-bucket {\n width: 2rem;\n height: 1rem;\n border-radius: 1.25rem;\n}";
|
|
34825
|
+
styleInject(css_248z$6);
|
|
34811
34826
|
|
|
34812
34827
|
var ColorBucket = React.forwardRef(function (props, ref) {
|
|
34813
34828
|
return (React__default["default"].createElement("div", { className: "colour-palette-display", ref: ref },
|
|
34814
34829
|
React__default["default"].createElement("div", { className: "colour-palette-display-bucket", "data-testid": "colour-palette-display-bucket", style: { backgroundColor: props.color } })));
|
|
34815
34830
|
});
|
|
34816
34831
|
|
|
34817
|
-
var css_248z$
|
|
34818
|
-
styleInject(css_248z$
|
|
34832
|
+
var css_248z$5 = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.lui-color-picker,\n.lui-input-color-group {\n display: inline-grid;\n gap: 0.5rem;\n grid-template-columns: repeat(6, 1fr);\n}\n\ninput.lui-input-color-radio {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n white-space: nowrap;\n word-wrap: normal;\n}\ninput.lui-input-color-radio + label {\n width: 1.5rem;\n height: 1.5rem;\n border-radius: 1rem;\n cursor: pointer;\n border: none;\n}\ninput.lui-input-color-radio:checked + label {\n border: 0.125rem solid #ffffff;\n box-shadow: 0 0 0.125rem 0.0625rem rgba(0, 0, 0, 0.2509803922);\n transition: all 0.05s ease;\n}";
|
|
34833
|
+
styleInject(css_248z$5);
|
|
34819
34834
|
|
|
34820
34835
|
var defaultColours = [
|
|
34821
34836
|
{ color: '#CD3433', description: 'Raspberry' },
|
|
@@ -34863,8 +34878,8 @@ var ColorPalette = React.forwardRef(function (_a, ref) {
|
|
|
34863
34878
|
})));
|
|
34864
34879
|
});
|
|
34865
34880
|
|
|
34866
|
-
var css_248z$
|
|
34867
|
-
styleInject(css_248z$
|
|
34881
|
+
var css_248z$4 = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.ToastProvider {\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n display: grid;\n grid-template-columns: repeat(3, auto);\n grid-template-areas: \"left center right\";\n padding: 1.5rem;\n z-index: 1200;\n}\n.ToastProvider .LuiBannerV2 {\n justify-content: flex-start;\n min-height: 4rem;\n min-width: 320px;\n max-width: min(50vw - 2rem, 400px);\n background-color: #f9f9f9;\n}\n.ToastProvider .LuiBannerV2-Icon {\n top: 50%;\n transform: translateY(-50%);\n}\n.ToastProvider .LuiBannerV2-Icon.warning {\n transform: translateY(calc(-50% - 1px));\n}\n.ToastProvider .LuiBannerV2 *:not(strong, .b) {\n font-family: \"Open Sans\", system-ui, sans-serif;\n font-style: normal;\n font-weight: normal;\n font-weight: 400;\n}";
|
|
34882
|
+
styleInject(css_248z$4);
|
|
34868
34883
|
|
|
34869
34884
|
var topRightToastsHeight = function (portal) {
|
|
34870
34885
|
var _a, _b, _c, _d;
|
|
@@ -34935,8 +34950,8 @@ var getToastProviderEl = function () {
|
|
|
34935
34950
|
return portal;
|
|
34936
34951
|
};
|
|
34937
34952
|
|
|
34938
|
-
var css_248z$
|
|
34939
|
-
styleInject(css_248z$
|
|
34953
|
+
var css_248z$3 = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.ToastSection {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n padding: 0.5rem;\n max-height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n /* IE and Edge */\n -ms-overflow-style: none;\n /* Firefox */\n scrollbar-width: none;\n /* Opera Safari Chrome */\n}\n.ToastSection::-webkit-scrollbar {\n display: none;\n}\n.ToastSection > :not(:last-child) {\n margin-bottom: 0.5rem;\n}\n.ToastSection [data-toastId] {\n pointer-events: all;\n}\n.ToastSection.topLeft {\n grid-area: left;\n}\n.ToastSection.topLeft [data-toastId] {\n margin-right: auto;\n max-height: 100vh;\n animation: 0.4s topLeftin forwards;\n}\n@keyframes topLeftin {\n 0% {\n opacity: 0;\n transform: translateX(-40%);\n }\n 100% {\n opacity: 1;\n transform: translate(0%);\n }\n}\n.ToastSection.topLeft [data-toastId].ItemDeleted {\n animation: 0.4s topLeftout forwards;\n}\n@keyframes topLeftout {\n 0% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n transform: translateX(-40%);\n }\n 100% {\n opacity: 0;\n max-height: 0;\n margin-bottom: 0;\n }\n}\n.ToastSection.topCenter {\n grid-area: center;\n}\n.ToastSection.topCenter [data-toastId] {\n margin-left: auto;\n margin-right: auto;\n max-height: 100vh;\n animation: 0.4s topCenterin forwards;\n}\n@keyframes topCenterin {\n 0% {\n opacity: 0;\n transform: translateY(-40%);\n }\n 100% {\n opacity: 1;\n transform: translate(0%);\n }\n}\n.ToastSection.topCenter [data-toastId].ItemDeleted {\n animation: 0.4s topCenterout forwards;\n}\n@keyframes topCenterout {\n 0% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n transform: translateY(-40%);\n }\n 100% {\n opacity: 0;\n max-height: 0;\n margin-bottom: 0;\n }\n}\n.ToastSection.topRight {\n grid-area: right;\n}\n.ToastSection.topRight [data-toastId] {\n margin-left: auto;\n max-height: 100vh;\n animation: 0.4s topRightin forwards;\n}\n@keyframes topRightin {\n 0% {\n opacity: 0;\n transform: translateX(40%);\n }\n 100% {\n opacity: 1;\n transform: translate(0%);\n }\n}\n.ToastSection.topRight [data-toastId].ItemDeleted {\n animation: 0.4s topRightout forwards;\n}\n@keyframes topRightout {\n 0% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n transform: translateX(40%);\n }\n 100% {\n opacity: 0;\n max-height: 0;\n margin-bottom: 0;\n }\n}\n.ToastSection.bottomLeft {\n margin-right: auto;\n grid-area: left;\n margin-top: auto;\n}\n.ToastSection.bottomLeft [data-toastId] {\n animation: 0.4s bottomLeftin forwards;\n}\n@keyframes bottomLeftin {\n 0% {\n opacity: 0;\n max-height: 0;\n }\n 50% {\n max-height: 100vh;\n opacity: 0;\n transform: translateX(-40%);\n }\n 100% {\n opacity: 1;\n transform: translate(0%);\n }\n}\n.ToastSection.bottomLeft [data-toastId].ItemDeleted {\n animation: 0.4s bottomLeftout forwards;\n}\n@keyframes bottomLeftout {\n 0% {\n opacity: 1;\n max-height: 100vh;\n }\n 100% {\n opacity: 0;\n transform: translateX(-40%);\n }\n}\n.ToastSection.bottomCenter {\n grid-area: center;\n margin-top: auto;\n margin-left: auto;\n margin-right: auto;\n}\n.ToastSection.bottomCenter [data-toastId] {\n animation: 0.4s bottomCenterin forwards;\n}\n@keyframes bottomCenterin {\n 0% {\n opacity: 0;\n max-height: 0;\n }\n 50% {\n max-height: 100vh;\n opacity: 0;\n transform: translateY(40%);\n }\n 100% {\n opacity: 1;\n transform: translate(0%);\n }\n}\n.ToastSection.bottomCenter [data-toastId].ItemDeleted {\n animation: 0.4s bottomCenterout forwards;\n}\n@keyframes bottomCenterout {\n 0% {\n opacity: 1;\n max-height: 100vh;\n }\n 100% {\n opacity: 0;\n transform: translateY(-40%);\n }\n}\n.ToastSection.bottomRight {\n grid-area: right;\n margin-top: auto;\n}\n.ToastSection.bottomRight [data-toastId] {\n margin-left: auto;\n animation: 0.4s bottomRightin forwards;\n}\n@keyframes bottomRightin {\n 0% {\n opacity: 0;\n max-height: 0;\n }\n 50% {\n max-height: 100vh;\n opacity: 0;\n transform: translateX(40%);\n }\n 100% {\n opacity: 1;\n transform: translate(0%);\n }\n}\n.ToastSection.bottomRight [data-toastId].ItemDeleted {\n animation: 0.4s bottomRightout forwards;\n}\n@keyframes bottomRightout {\n 0% {\n opacity: 1;\n max-height: 100vh;\n }\n 100% {\n opacity: 0;\n transform: translateX(40%);\n }\n}";
|
|
34954
|
+
styleInject(css_248z$3);
|
|
34940
34955
|
|
|
34941
34956
|
var getToastSectionEl = function (position) {
|
|
34942
34957
|
var portal = getToastProviderEl();
|
|
@@ -35117,8 +35132,8 @@ var ToastProvider = function (_a) {
|
|
|
35117
35132
|
React__namespace.createElement(ToastContext.Provider, { value: dispatch }, children)));
|
|
35118
35133
|
};
|
|
35119
35134
|
|
|
35120
|
-
var css_248z$
|
|
35121
|
-
styleInject(css_248z$
|
|
35135
|
+
var css_248z$2 = ".ToastBanner span[data-testid=toastMessageShow] {\n display: contents;\n}\n.ToastBanner span[data-testid=toastMessageShow] > :first-child {\n margin-top: 0;\n}";
|
|
35136
|
+
styleInject(css_248z$2);
|
|
35122
35137
|
|
|
35123
35138
|
var ToastBanner = function (_a) {
|
|
35124
35139
|
var level = _a.level, onDismiss = _a.onDismiss, children = _a.children;
|
|
@@ -35365,8 +35380,8 @@ var LuiToastMessage = function (props) {
|
|
|
35365
35380
|
return version === 'v2' ? (React__default["default"].createElement(LuiToastMessageCompatibleInterface, __assign({}, props))) : (React__default["default"].createElement(LuiToastMessage$1, __assign({}, props)));
|
|
35366
35381
|
};
|
|
35367
35382
|
|
|
35368
|
-
var css_248z = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.lui-error-panel-container {\n padding: 16px;\n user-select: none;\n}\n.lui-error-panel-container-children {\n padding-top: 1.5rem;\n gap: 0.5rem;\n}\n.lui-error-panel-container-controls {\n padding-top: 1.5rem;\n gap: 0.5rem;\n}\n.lui-error-panel-container-controls-buttons {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n.lui-error-panel-container-controls .lui-button {\n margin-left: 0;\n width: 100%;\n height: 40px;\n}";
|
|
35369
|
-
styleInject(css_248z);
|
|
35383
|
+
var css_248z$1 = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.lui-error-panel-container {\n padding: 16px;\n user-select: none;\n}\n.lui-error-panel-container-children {\n padding-top: 1.5rem;\n gap: 0.5rem;\n}\n.lui-error-panel-container-controls {\n padding-top: 1.5rem;\n gap: 0.5rem;\n}\n.lui-error-panel-container-controls-buttons {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n.lui-error-panel-container-controls .lui-button {\n margin-left: 0;\n width: 100%;\n height: 40px;\n}";
|
|
35384
|
+
styleInject(css_248z$1);
|
|
35370
35385
|
|
|
35371
35386
|
/**
|
|
35372
35387
|
* @description Non-blocking error panel for use with error boundaries.
|
|
@@ -35392,11 +35407,128 @@ var LuiErrorPanel = React.forwardRef(function (props, ref) {
|
|
|
35392
35407
|
props.subtext && (React__default["default"].createElement("div", { className: "lui-error-panel-container-subtext", "data-testid": "lui-error-panel-container-subtext" }, props.subtext)))));
|
|
35393
35408
|
});
|
|
35394
35409
|
|
|
35410
|
+
var DrawerGlobalContext = React.createContext(null);
|
|
35411
|
+
var useDrawerGlobalContext = function () {
|
|
35412
|
+
var drawerGlobalContext = React.useContext(DrawerGlobalContext);
|
|
35413
|
+
if (!drawerGlobalContext)
|
|
35414
|
+
throw Error('useDrawerGlobalContext being used outside a DrawerGlobalContext');
|
|
35415
|
+
return drawerGlobalContext;
|
|
35416
|
+
};
|
|
35417
|
+
var DrawerGlobalProvider = function (_a) {
|
|
35418
|
+
var children = _a.children;
|
|
35419
|
+
var _b = React.useState(), currentOpenId = _b[0], setCurrentOpenId = _b[1];
|
|
35420
|
+
var requestOpen = function (drawerId) {
|
|
35421
|
+
return setCurrentOpenId(drawerId);
|
|
35422
|
+
};
|
|
35423
|
+
var requestClose = function (drawerId, forceClose) {
|
|
35424
|
+
if ((currentOpenId && currentOpenId === drawerId) || forceClose)
|
|
35425
|
+
setCurrentOpenId(undefined);
|
|
35426
|
+
};
|
|
35427
|
+
return (React__default["default"].createElement(DrawerGlobalContext.Provider, { value: {
|
|
35428
|
+
currentOpenId: currentOpenId,
|
|
35429
|
+
requestOpen: requestOpen,
|
|
35430
|
+
requestClose: requestClose
|
|
35431
|
+
} }, children));
|
|
35432
|
+
};
|
|
35433
|
+
|
|
35434
|
+
var css_248z = ".Drawer {\n width: unset;\n text-align: center;\n font-size: 40px;\n pointer-events: none;\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n}\n.Drawer.closed {\n opacity: 0 !important;\n transition: grid-template-columns 300ms, grid-template-rows 300ms, opacity 0.3s 100ms !important;\n pointer-events: none !important;\n overflow: hidden;\n}\n.Drawer.closed * {\n pointer-events: none !important;\n overflow: hidden;\n}\n.Drawer > :not(.passthrough) {\n pointer-events: auto;\n}\n.Drawer .overlay {\n opacity: 0;\n}\n.Drawer .Separator::before {\n content: \"\";\n position: absolute;\n inset: var(--separator-inset);\n height: var(--separator-height);\n width: var(--separator-width);\n box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);\n pointer-events: none;\n}\n.Drawer.top {\n --separator-inset: auto auto 0 auto;\n --separator-height: 100vh;\n --separator-width: 100%;\n}\n.Drawer.right {\n --separator-inset: auto auto auto 0;\n --separator-height: 100%;\n --separator-width: 100vw;\n}\n.Drawer.bottom {\n --separator-inset: 0 auto auto auto;\n --separator-width: 100%;\n --separator-height: 100vh;\n}\n.Drawer.left {\n --separator-inset: auto 0 auto auto;\n --separator-height: 100%;\n --separator-width: 100vw;\n}\n\n.Drawer:not(.resizeable) .Separator {\n pointer-events: none;\n display: none;\n}\n.Drawer:not(.resizeable) .Separator * {\n pointer-events: none;\n}\n.Drawer .children {\n overscroll-behavior: contain;\n}\n.Drawer .children.primary {\n grid-row: 1;\n grid-column: 1;\n}\n.Drawer .children button.close-button {\n position: absolute;\n padding: 0;\n margin: auto;\n inset: auto 0 auto auto;\n height: 2rem;\n width: 2rem;\n display: flex;\n justify-content: center;\n align-items: center;\n}";
|
|
35435
|
+
styleInject(css_248z);
|
|
35436
|
+
|
|
35437
|
+
var DrawerContext = React.createContext(null);
|
|
35438
|
+
|
|
35439
|
+
var useDisableParentScroll = function (_a) {
|
|
35440
|
+
var _b;
|
|
35441
|
+
var _c = _a.shouldDisable, shouldDisable = _c === void 0 ? false : _c, _d = _a.mode, mode = _d === void 0 ? 'body' : _d, parentRef = _a.parentRef;
|
|
35442
|
+
var _e = React.useState(mode === 'body' ? document.body : (_b = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) === null || _b === void 0 ? void 0 : _b.parentElement), el = _e[0], setEl = _e[1];
|
|
35443
|
+
React.useEffect(function () {
|
|
35444
|
+
var _a;
|
|
35445
|
+
var newEl = mode === 'body' ? document.body : (_a = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
|
|
35446
|
+
setEl(newEl);
|
|
35447
|
+
}, [mode, parentRef === null || parentRef === void 0 ? void 0 : parentRef.current]);
|
|
35448
|
+
useDisableScroll(el, shouldDisable);
|
|
35449
|
+
};
|
|
35450
|
+
|
|
35451
|
+
var Drawer = React.forwardRef(function (_a, ref) {
|
|
35452
|
+
var isOpen = _a.isOpen, onRequestClose = _a.onRequestClose, _b = _a.position, position = _b === void 0 ? 'right' : _b, size = _a.size, _c = _a.initialSize, initialSize = _c === void 0 ? 50 : _c, _d = _a.resizeable, resizeable = _d === void 0 ? true : _d, _e = _a.passThroughOverlayClick, passThroughOverlayClick = _e === void 0 ? true : _e, closeOnClickOutside = _a.closeOnClickOutside, closeOnEsc = _a.closeOnEsc, _f = _a.style, style = _f === void 0 ? { position: 'fixed', top: 0, bottom: 0, left: 0, right: 0 } : _f, disableScroll = _a.disableScroll, hideCloseButton = _a.hideCloseButton, _g = _a.mountChildrenOn, mountChildrenOn = _g === void 0 ? 'first-open' : _g, children = _a.children, splitterProps = __rest(_a, ["isOpen", "onRequestClose", "position", "size", "initialSize", "resizeable", "passThroughOverlayClick", "closeOnClickOutside", "closeOnEsc", "style", "disableScroll", "hideCloseButton", "mountChildrenOn", "children"]);
|
|
35453
|
+
var localRef = React.useRef(null);
|
|
35454
|
+
React.useImperativeHandle(ref, function () { return localRef.current; }, [ref]);
|
|
35455
|
+
useDisableParentScroll({
|
|
35456
|
+
shouldDisable: disableScroll && isOpen,
|
|
35457
|
+
mode: disableScroll,
|
|
35458
|
+
parentRef: localRef
|
|
35459
|
+
});
|
|
35460
|
+
useEscapeFunction((closeOnEsc && onRequestClose) || (function () { }), 'keydown', localRef);
|
|
35461
|
+
var sizeRef = React.useRef(size !== null && size !== void 0 ? size : initialSize);
|
|
35462
|
+
sizeRef.current = size !== null && size !== void 0 ? size : sizeRef.current;
|
|
35463
|
+
var currentSize = sizeRef.current;
|
|
35464
|
+
// splitter ratio (size of primary panel in %) always goes from 0 to 100, 0 being all the way towards the primary (top|left) side, 100 being all the way towards the secondary (right|bottom) side
|
|
35465
|
+
var isPrimary = position === 'top' || position === 'left';
|
|
35466
|
+
var openRatio = isPrimary ? currentSize : 100 - currentSize;
|
|
35467
|
+
var closedRatio = isPrimary ? 0 : 100;
|
|
35468
|
+
var ratio = isOpen ? openRatio : closedRatio;
|
|
35469
|
+
var orientation = position === 'top' || position === 'bottom' ? 'horizontal' : 'vertical';
|
|
35470
|
+
var handleResize = isOpen && resizeable
|
|
35471
|
+
? function (ratio) {
|
|
35472
|
+
var _a;
|
|
35473
|
+
var newRatio = isPrimary ? ratio : 100 - ratio;
|
|
35474
|
+
sizeRef.current = newRatio;
|
|
35475
|
+
(_a = splitterProps.onResized) === null || _a === void 0 ? void 0 : _a.call(splitterProps, newRatio);
|
|
35476
|
+
}
|
|
35477
|
+
: undefined;
|
|
35478
|
+
var shouldMountChildren = useChildrenMountState({
|
|
35479
|
+
isOpen: isOpen,
|
|
35480
|
+
mountChildrenOn: mountChildrenOn
|
|
35481
|
+
});
|
|
35482
|
+
// we don't want the children to rerender when other props change
|
|
35483
|
+
var drawerContent = React.useMemo(function () {
|
|
35484
|
+
return shouldMountChildren ? (React__default["default"].createElement("div", { className: "children", key: "children" },
|
|
35485
|
+
!hideCloseButton && (React__default["default"].createElement("button", { tabIndex: 0, title: "Close Panel", type: "button", className: "close-button lui-button lui-button-tertiary", onClick: onRequestClose },
|
|
35486
|
+
React__default["default"].createElement(LuiIcon, { alt: "", name: "ic_clear", size: "sm" }))),
|
|
35487
|
+
children)) : null;
|
|
35488
|
+
}, [shouldMountChildren, children, hideCloseButton, onRequestClose]);
|
|
35489
|
+
var overlay = React.useMemo(function () { return (React__default["default"].createElement("div", { key: "overlay", className: clsx('overlay', passThroughOverlayClick && 'passthrough'), onClick: closeOnClickOutside ? onRequestClose : undefined })); }, [passThroughOverlayClick, closeOnClickOutside, onRequestClose]);
|
|
35490
|
+
// the splitter accepts exactly two children, so we order them according to the drawer position
|
|
35491
|
+
var splitterChildren = React.useMemo(function () { return (isPrimary ? [drawerContent, overlay] : [overlay, drawerContent]); }, [isPrimary, drawerContent, overlay]);
|
|
35492
|
+
return (React__default["default"].createElement(DrawerContext.Provider, { value: { isOpen: isOpen, requestClose: onRequestClose } },
|
|
35493
|
+
React__default["default"].createElement(Splitter, __assign({}, splitterProps, { ref: localRef, ratio: ratio, orientation: orientation, className: clsx('Drawer', position, resizeable && 'resizeable', isOpen ? 'open' : 'closed', splitterProps.className), style: style, onResized: handleResize }), splitterChildren)));
|
|
35494
|
+
});
|
|
35495
|
+
var useChildrenMountState = function (_a) {
|
|
35496
|
+
var mountChildrenOn = _a.mountChildrenOn, isOpen = _a.isOpen;
|
|
35497
|
+
var _b = React.useState(mountChildrenOn === 'mount' || isOpen), shouldMountChildren = _b[0], setShouldMountChildren = _b[1];
|
|
35498
|
+
if (!shouldMountChildren && isOpen)
|
|
35499
|
+
setShouldMountChildren(true);
|
|
35500
|
+
return shouldMountChildren;
|
|
35501
|
+
};
|
|
35502
|
+
|
|
35503
|
+
var DrawerGlobal = React.forwardRef(function (props, ref) {
|
|
35504
|
+
var _a = useDrawerGlobalContext(), currentOpenId = _a.currentOpenId, requestClose = _a.requestClose;
|
|
35505
|
+
var isOpen = currentOpenId === props.id;
|
|
35506
|
+
var onRequestClose = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
35507
|
+
var shouldClose;
|
|
35508
|
+
var _a, _b;
|
|
35509
|
+
return __generator(this, function (_c) {
|
|
35510
|
+
switch (_c.label) {
|
|
35511
|
+
case 0: return [4 /*yield*/, ((_a = props.onBeforeClose) === null || _a === void 0 ? void 0 : _a.call(props))];
|
|
35512
|
+
case 1:
|
|
35513
|
+
shouldClose = (_b = (_c.sent())) !== null && _b !== void 0 ? _b : true;
|
|
35514
|
+
if (shouldClose)
|
|
35515
|
+
requestClose(props.id);
|
|
35516
|
+
return [2 /*return*/];
|
|
35517
|
+
}
|
|
35518
|
+
});
|
|
35519
|
+
}); };
|
|
35520
|
+
return (React__default["default"].createElement(Drawer, __assign({}, props, { ref: ref, isOpen: isOpen, onRequestClose: onRequestClose })));
|
|
35521
|
+
});
|
|
35522
|
+
|
|
35395
35523
|
exports.CheckboxItemRenderer = CheckboxItemRenderer;
|
|
35396
35524
|
exports.ColorBucket = ColorBucket;
|
|
35397
35525
|
exports.ColorInput = ColorInput;
|
|
35398
35526
|
exports.ColorInputGroup = ColorInputGroup;
|
|
35399
35527
|
exports.ColorPalette = ColorPalette;
|
|
35528
|
+
exports.Drawer = Drawer;
|
|
35529
|
+
exports.DrawerGlobal = DrawerGlobal;
|
|
35530
|
+
exports.DrawerGlobalContext = DrawerGlobalContext;
|
|
35531
|
+
exports.DrawerGlobalProvider = DrawerGlobalProvider;
|
|
35400
35532
|
exports.LuiAccordicard = LuiAccordicard;
|
|
35401
35533
|
exports.LuiAccordicardStatic = LuiAccordicardStatic;
|
|
35402
35534
|
exports.LuiAccordion = LuiAccordion;
|
|
@@ -35507,6 +35639,7 @@ exports.breakpoints = breakpoints;
|
|
|
35507
35639
|
exports.defaultColours = defaultColours;
|
|
35508
35640
|
exports.isChromatic = isChromatic;
|
|
35509
35641
|
exports.useClickedOutsideElement = useClickedOutsideElement;
|
|
35642
|
+
exports.useDrawerGlobalContext = useDrawerGlobalContext;
|
|
35510
35643
|
exports.useEscapeFunction = useEscapeFunction;
|
|
35511
35644
|
exports.useLuiCloseableHeaderMenuContextV2 = useLuiCloseableHeaderMenuContextV2;
|
|
35512
35645
|
exports.useMediaQuery = useMediaQuery;
|