@linzjs/lui 23.6.2 → 23.7.1
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 +44 -0
- package/dist/components/Drawer/DrawerContext.d.ts +7 -0
- package/dist/components/Drawer/DrawerGlobal.d.ts +12 -0
- package/dist/components/Drawer/DrawerGlobalContext.d.ts +14 -0
- package/dist/components/Drawer/utils.d.ts +7 -0
- package/dist/components/common/Hooks.d.ts +5 -2
- package/dist/index.d.ts +3 -0
- package/dist/index.js +197 -55
- package/dist/index.js.map +1 -1
- package/dist/lui.esm.js +193 -56
- package/dist/lui.esm.js.map +1 -1
- package/package.json +1 -1
package/dist/lui.esm.js
CHANGED
|
@@ -3068,8 +3068,8 @@ function styleInject(css, ref) {
|
|
|
3068
3068
|
}
|
|
3069
3069
|
}
|
|
3070
3070
|
|
|
3071
|
-
var css_248z$
|
|
3072
|
-
styleInject(css_248z$
|
|
3071
|
+
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}";
|
|
3072
|
+
styleInject(css_248z$p);
|
|
3073
3073
|
|
|
3074
3074
|
var GutterComponent = function (props) {
|
|
3075
3075
|
var leftIcon = (React__default.createElement(LuiIcon, { name: "ic_double_arrow_left", alt: "", status: "interactive" }));
|
|
@@ -6830,8 +6830,8 @@ var LuiTabsPanelSwitch = function (props) {
|
|
|
6830
6830
|
} }, tabProps), children));
|
|
6831
6831
|
};
|
|
6832
6832
|
|
|
6833
|
-
var css_248z$
|
|
6834
|
-
styleInject(css_248z$
|
|
6833
|
+
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}";
|
|
6834
|
+
styleInject(css_248z$o);
|
|
6835
6835
|
|
|
6836
6836
|
var LuiError = function (_a) {
|
|
6837
6837
|
var error = _a.error, className = _a.className;
|
|
@@ -7230,8 +7230,8 @@ var LuiDateInput = React__default.forwardRef(function (_a, ref) {
|
|
|
7230
7230
|
return React__default.createElement(LuiTextInput, __assign({}, mapped, { ref: ref }));
|
|
7231
7231
|
});
|
|
7232
7232
|
|
|
7233
|
-
var css_248z$
|
|
7234
|
-
styleInject(css_248z$
|
|
7233
|
+
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}";
|
|
7234
|
+
styleInject(css_248z$n);
|
|
7235
7235
|
|
|
7236
7236
|
var MoneyParser = /** @class */ (function () {
|
|
7237
7237
|
function MoneyParser(init, options) {
|
|
@@ -14895,9 +14895,9 @@ var StateManagedSelect = /*#__PURE__*/React__default.forwardRef(function (props,
|
|
|
14895
14895
|
|
|
14896
14896
|
var Select = StateManagedSelect;
|
|
14897
14897
|
|
|
14898
|
-
var css_248z$
|
|
14898
|
+
var css_248z$m = "";
|
|
14899
14899
|
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%)"};
|
|
14900
|
-
styleInject(css_248z$
|
|
14900
|
+
styleInject(css_248z$m);
|
|
14901
14901
|
|
|
14902
14902
|
var _excluded = ["allowCreateWhileLoading", "createOptionPosition", "formatCreateLabel", "isValidNewOption", "getNewOptionData", "onCreateOption", "options", "onChange"];
|
|
14903
14903
|
|
|
@@ -15068,14 +15068,23 @@ var motif = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0id
|
|
|
15068
15068
|
* A hook which allows you to register a handler when the escape key is pressed
|
|
15069
15069
|
*
|
|
15070
15070
|
* @param onEscape the handler function
|
|
15071
|
+
* @param elRef a react ref to the element that should listen to the key event. If this argument is `undefined` it means the consumer wants to attach the listener to `document`. If this argument is a ref to `null` no event listener will be added.
|
|
15071
15072
|
*/
|
|
15072
|
-
var useEscapeFunction = function (onEscape, trigger) {
|
|
15073
|
+
var useEscapeFunction = function (onEscape, trigger, elRef) {
|
|
15073
15074
|
if (trigger === void 0) { trigger = 'keydown'; }
|
|
15074
|
-
var escFunction = useCallback(function (event) {
|
|
15075
|
+
var escFunction = useCallback(function (event) {
|
|
15076
|
+
if (event.keyCode === 27) {
|
|
15077
|
+
onEscape(event);
|
|
15078
|
+
}
|
|
15079
|
+
}, [onEscape]);
|
|
15075
15080
|
useEffect(function () {
|
|
15076
|
-
|
|
15077
|
-
|
|
15078
|
-
|
|
15081
|
+
var _a;
|
|
15082
|
+
if ((elRef === null || elRef === void 0 ? void 0 : elRef.current) === null)
|
|
15083
|
+
return;
|
|
15084
|
+
var el = (_a = elRef === null || elRef === void 0 ? void 0 : elRef.current) !== null && _a !== void 0 ? _a : document;
|
|
15085
|
+
el.addEventListener(trigger, escFunction, false);
|
|
15086
|
+
return function () { return el.removeEventListener(trigger, escFunction, false); };
|
|
15087
|
+
}, [escFunction, elRef === null || elRef === void 0 ? void 0 : elRef.current]);
|
|
15079
15088
|
};
|
|
15080
15089
|
/**
|
|
15081
15090
|
* A hook which allows handling of click event anywhere on the page.
|
|
@@ -15108,6 +15117,21 @@ var usePageClickFunction = function (onClickInsideArg, onClickOutsideArg) {
|
|
|
15108
15117
|
}, [elementRef, onClickInside, onClickOutside]);
|
|
15109
15118
|
return elementRef;
|
|
15110
15119
|
};
|
|
15120
|
+
/** Disables scrolling on an specified element */
|
|
15121
|
+
var useDisableScroll = function (el, shouldDisable) {
|
|
15122
|
+
if (shouldDisable === void 0) { shouldDisable = true; }
|
|
15123
|
+
return useEffect(function () {
|
|
15124
|
+
if (!shouldDisable || !el)
|
|
15125
|
+
return;
|
|
15126
|
+
el.setAttribute('data-previous-overflow', el.style.overflow);
|
|
15127
|
+
el.style.overflow = 'hidden';
|
|
15128
|
+
return function () {
|
|
15129
|
+
var _a;
|
|
15130
|
+
el.style.overflow = (_a = el.getAttribute('data-previous-overflow')) !== null && _a !== void 0 ? _a : 'unset';
|
|
15131
|
+
el.removeAttribute('data-previous-overflow');
|
|
15132
|
+
};
|
|
15133
|
+
}, [shouldDisable, el]);
|
|
15134
|
+
};
|
|
15111
15135
|
/**
|
|
15112
15136
|
* Provides a stable ID across renders, can be replaced in react 18+ by native implementation
|
|
15113
15137
|
*/
|
|
@@ -17584,8 +17608,8 @@ var LuiAlertModalV2 = function (props) {
|
|
|
17584
17608
|
} }), children));
|
|
17585
17609
|
};
|
|
17586
17610
|
|
|
17587
|
-
var css_248z$
|
|
17588
|
-
styleInject(css_248z$
|
|
17611
|
+
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";
|
|
17612
|
+
styleInject(css_248z$l);
|
|
17589
17613
|
|
|
17590
17614
|
/**
|
|
17591
17615
|
* @internal
|
|
@@ -22374,8 +22398,8 @@ var LuiSidePanelProvider = function (_a) {
|
|
|
22374
22398
|
React__default.createElement(LuiSidePanelContainer, __assign({}, props))));
|
|
22375
22399
|
};
|
|
22376
22400
|
|
|
22377
|
-
var css_248z$
|
|
22378
|
-
styleInject(css_248z$
|
|
22401
|
+
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}";
|
|
22402
|
+
styleInject(css_248z$k);
|
|
22379
22403
|
|
|
22380
22404
|
var LuiSwitchButton = function (props) {
|
|
22381
22405
|
var generatedId = useGenerateOrDefaultId();
|
|
@@ -30006,8 +30030,8 @@ var LuiAccordicardStatic = function (props) {
|
|
|
30006
30030
|
React__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" }))));
|
|
30007
30031
|
};
|
|
30008
30032
|
|
|
30009
|
-
var css_248z$
|
|
30010
|
-
styleInject(css_248z$
|
|
30033
|
+
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}";
|
|
30034
|
+
styleInject(css_248z$j);
|
|
30011
30035
|
|
|
30012
30036
|
var LuiAccordion = function (props) {
|
|
30013
30037
|
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;
|
|
@@ -30118,8 +30142,8 @@ var LuiMultiSwitch = function (_a) {
|
|
|
30118
30142
|
React__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.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)); }))));
|
|
30119
30143
|
};
|
|
30120
30144
|
|
|
30121
|
-
var css_248z$
|
|
30122
|
-
styleInject(css_248z$
|
|
30145
|
+
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}";
|
|
30146
|
+
styleInject(css_248z$i);
|
|
30123
30147
|
|
|
30124
30148
|
function $c1d7fb2ec91bae71$var$Item(props) {
|
|
30125
30149
|
return null;
|
|
@@ -33648,16 +33672,16 @@ function DefaultEmptyIndicator() {
|
|
|
33648
33672
|
return React__default.createElement("li", { className: "LuiListBox-emptyIndicator" }, "Nothing to Display");
|
|
33649
33673
|
}
|
|
33650
33674
|
|
|
33651
|
-
var css_248z$
|
|
33652
|
-
styleInject(css_248z$
|
|
33675
|
+
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}";
|
|
33676
|
+
styleInject(css_248z$h);
|
|
33653
33677
|
|
|
33654
33678
|
function RadioItemRenderer(_a) {
|
|
33655
33679
|
var item = _a.item, isSelected = _a.isSelected;
|
|
33656
33680
|
return (React__default.createElement("div", { className: "RadioItemRenderer ".concat(isSelected ? 'RadioItemRenderer-isSelected' : '') }, item.label));
|
|
33657
33681
|
}
|
|
33658
33682
|
|
|
33659
|
-
var css_248z$
|
|
33660
|
-
styleInject(css_248z$
|
|
33683
|
+
var css_248z$g = ".CheckboxRenderer {\n display: flex;\n align-items: center;\n}";
|
|
33684
|
+
styleInject(css_248z$g);
|
|
33661
33685
|
|
|
33662
33686
|
function CheckboxItemRenderer(_a) {
|
|
33663
33687
|
var item = _a.item, isSelected = _a.isSelected;
|
|
@@ -33683,8 +33707,8 @@ function LuiSideMenuItem(_a) {
|
|
|
33683
33707
|
React__default.createElement("span", { className: "navText" }, label)))));
|
|
33684
33708
|
}
|
|
33685
33709
|
|
|
33686
|
-
var css_248z$
|
|
33687
|
-
styleInject(css_248z$
|
|
33710
|
+
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}";
|
|
33711
|
+
styleInject(css_248z$f);
|
|
33688
33712
|
|
|
33689
33713
|
var LuiProgressBar = function (_a) {
|
|
33690
33714
|
var value = _a.value, max = _a.max, error = _a.error, _b = _a.barHeight, barHeight = _b === void 0 ? '5px' : _b;
|
|
@@ -33712,8 +33736,8 @@ var LuiProgressBar = function (_a) {
|
|
|
33712
33736
|
React__default.createElement("div", { "data-testid": 'progress-bar-size', className: clsx("ProgressBar-".concat(status), { indeterminate: indeterminate }), style: { width: "".concat(percentage, "%"), height: barHeight } })));
|
|
33713
33737
|
};
|
|
33714
33738
|
|
|
33715
|
-
var css_248z$
|
|
33716
|
-
styleInject(css_248z$
|
|
33739
|
+
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}";
|
|
33740
|
+
styleInject(css_248z$e);
|
|
33717
33741
|
|
|
33718
33742
|
var ToolbarDirection;
|
|
33719
33743
|
(function (ToolbarDirection) {
|
|
@@ -33724,8 +33748,8 @@ function LuiSideToolbar(props) {
|
|
|
33724
33748
|
return (React__default.createElement("div", { className: clsx(['Toolbar', 'app--shadow-sm', props.direction]), "data-testid": "toolbar" }, props.children));
|
|
33725
33749
|
}
|
|
33726
33750
|
|
|
33727
|
-
var css_248z$
|
|
33728
|
-
styleInject(css_248z$
|
|
33751
|
+
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}";
|
|
33752
|
+
styleInject(css_248z$d);
|
|
33729
33753
|
|
|
33730
33754
|
/**
|
|
33731
33755
|
* Show LuiIcon or Image.
|
|
@@ -33799,8 +33823,8 @@ var useMediaQuery = function (query) {
|
|
|
33799
33823
|
return matches;
|
|
33800
33824
|
};
|
|
33801
33825
|
|
|
33802
|
-
var css_248z$
|
|
33803
|
-
styleInject(css_248z$
|
|
33826
|
+
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}";
|
|
33827
|
+
styleInject(css_248z$c);
|
|
33804
33828
|
|
|
33805
33829
|
var LuiCounter = React__default.forwardRef(function (props, ref) {
|
|
33806
33830
|
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"]);
|
|
@@ -33815,8 +33839,8 @@ var LuiCounter = React__default.forwardRef(function (props, ref) {
|
|
|
33815
33839
|
return (React__default.createElement(React__default.Fragment, null, !(selectedNum === 0 && !countZero) && (React__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()))));
|
|
33816
33840
|
});
|
|
33817
33841
|
|
|
33818
|
-
var css_248z$
|
|
33819
|
-
styleInject(css_248z$
|
|
33842
|
+
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}";
|
|
33843
|
+
styleInject(css_248z$b);
|
|
33820
33844
|
|
|
33821
33845
|
/**
|
|
33822
33846
|
* @description Pagination component for navigating through a list of items with multiple pages.
|
|
@@ -33962,11 +33986,11 @@ var LuiPagination = forwardRef$1(function (_a, ref) {
|
|
|
33962
33986
|
React__default.createElement("div", { className: "pagination" }, renderPaginationNumbers())))));
|
|
33963
33987
|
});
|
|
33964
33988
|
|
|
33965
|
-
var css_248z$
|
|
33966
|
-
styleInject(css_248z$
|
|
33989
|
+
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}";
|
|
33990
|
+
styleInject(css_248z$a);
|
|
33967
33991
|
|
|
33968
|
-
var css_248z$
|
|
33969
|
-
styleInject(css_248z$
|
|
33992
|
+
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}";
|
|
33993
|
+
styleInject(css_248z$9);
|
|
33970
33994
|
|
|
33971
33995
|
var useForkRef = function (forwardedRef) {
|
|
33972
33996
|
var localRef = useRef(null);
|
|
@@ -34695,8 +34719,8 @@ var keyDownHandler = function (e) {
|
|
|
34695
34719
|
return valueNow + delta;
|
|
34696
34720
|
};
|
|
34697
34721
|
|
|
34698
|
-
var css_248z$
|
|
34699
|
-
styleInject(css_248z$
|
|
34722
|
+
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}";
|
|
34723
|
+
styleInject(css_248z$8);
|
|
34700
34724
|
|
|
34701
34725
|
/**
|
|
34702
34726
|
* Container that appends a separator when the children count equals 2.
|
|
@@ -34748,8 +34772,8 @@ var useSplitterRef = function () {
|
|
|
34748
34772
|
return { ref: ref, setRatio: setRatio };
|
|
34749
34773
|
};
|
|
34750
34774
|
|
|
34751
|
-
var css_248z$
|
|
34752
|
-
styleInject(css_248z$
|
|
34775
|
+
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}";
|
|
34776
|
+
styleInject(css_248z$7);
|
|
34753
34777
|
|
|
34754
34778
|
var LuiBannerV2 = forwardRef$1(function (_a, ref) {
|
|
34755
34779
|
var _b, _c, _d;
|
|
@@ -34768,16 +34792,16 @@ var LuiBannerV2 = forwardRef$1(function (_a, ref) {
|
|
|
34768
34792
|
onDismiss && (React__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.createElement(LuiIcon, { size: "md", name: "ic_clear", spanProps: { 'aria-hidden': true }, alt: "Dismiss" }))))));
|
|
34769
34793
|
});
|
|
34770
34794
|
|
|
34771
|
-
var css_248z$
|
|
34772
|
-
styleInject(css_248z$
|
|
34795
|
+
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}";
|
|
34796
|
+
styleInject(css_248z$6);
|
|
34773
34797
|
|
|
34774
34798
|
var ColorBucket = forwardRef$1(function (props, ref) {
|
|
34775
34799
|
return (React__default.createElement("div", { className: "colour-palette-display", ref: ref },
|
|
34776
34800
|
React__default.createElement("div", { className: "colour-palette-display-bucket", "data-testid": "colour-palette-display-bucket", style: { backgroundColor: props.color } })));
|
|
34777
34801
|
});
|
|
34778
34802
|
|
|
34779
|
-
var css_248z$
|
|
34780
|
-
styleInject(css_248z$
|
|
34803
|
+
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}";
|
|
34804
|
+
styleInject(css_248z$5);
|
|
34781
34805
|
|
|
34782
34806
|
var defaultColours = [
|
|
34783
34807
|
{ color: '#CD3433', description: 'Raspberry' },
|
|
@@ -34825,8 +34849,8 @@ var ColorPalette = forwardRef$1(function (_a, ref) {
|
|
|
34825
34849
|
})));
|
|
34826
34850
|
});
|
|
34827
34851
|
|
|
34828
|
-
var css_248z$
|
|
34829
|
-
styleInject(css_248z$
|
|
34852
|
+
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}";
|
|
34853
|
+
styleInject(css_248z$4);
|
|
34830
34854
|
|
|
34831
34855
|
var topRightToastsHeight = function (portal) {
|
|
34832
34856
|
var _a, _b, _c, _d;
|
|
@@ -34897,8 +34921,8 @@ var getToastProviderEl = function () {
|
|
|
34897
34921
|
return portal;
|
|
34898
34922
|
};
|
|
34899
34923
|
|
|
34900
|
-
var css_248z$
|
|
34901
|
-
styleInject(css_248z$
|
|
34924
|
+
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}";
|
|
34925
|
+
styleInject(css_248z$3);
|
|
34902
34926
|
|
|
34903
34927
|
var getToastSectionEl = function (position) {
|
|
34904
34928
|
var portal = getToastProviderEl();
|
|
@@ -35079,8 +35103,8 @@ var ToastProvider = function (_a) {
|
|
|
35079
35103
|
React.createElement(ToastContext.Provider, { value: dispatch }, children)));
|
|
35080
35104
|
};
|
|
35081
35105
|
|
|
35082
|
-
var css_248z$
|
|
35083
|
-
styleInject(css_248z$
|
|
35106
|
+
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}";
|
|
35107
|
+
styleInject(css_248z$2);
|
|
35084
35108
|
|
|
35085
35109
|
var ToastBanner = function (_a) {
|
|
35086
35110
|
var level = _a.level, onDismiss = _a.onDismiss, children = _a.children;
|
|
@@ -35327,8 +35351,8 @@ var LuiToastMessage = function (props) {
|
|
|
35327
35351
|
return version === 'v2' ? (React__default.createElement(LuiToastMessageCompatibleInterface, __assign({}, props))) : (React__default.createElement(LuiToastMessage$1, __assign({}, props)));
|
|
35328
35352
|
};
|
|
35329
35353
|
|
|
35330
|
-
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}";
|
|
35331
|
-
styleInject(css_248z);
|
|
35354
|
+
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}";
|
|
35355
|
+
styleInject(css_248z$1);
|
|
35332
35356
|
|
|
35333
35357
|
/**
|
|
35334
35358
|
* @description Non-blocking error panel for use with error boundaries.
|
|
@@ -35354,5 +35378,118 @@ var LuiErrorPanel = forwardRef$1(function (props, ref) {
|
|
|
35354
35378
|
props.subtext && (React__default.createElement("div", { className: "lui-error-panel-container-subtext", "data-testid": "lui-error-panel-container-subtext" }, props.subtext)))));
|
|
35355
35379
|
});
|
|
35356
35380
|
|
|
35357
|
-
|
|
35381
|
+
var DrawerGlobalContext = createContext(null);
|
|
35382
|
+
var useDrawerGlobalContext = function () {
|
|
35383
|
+
var drawerGlobalContext = useContext(DrawerGlobalContext);
|
|
35384
|
+
if (!drawerGlobalContext)
|
|
35385
|
+
throw Error('useDrawerGlobalContext being used outside a DrawerGlobalContext');
|
|
35386
|
+
return drawerGlobalContext;
|
|
35387
|
+
};
|
|
35388
|
+
var DrawerGlobalProvider = function (_a) {
|
|
35389
|
+
var children = _a.children;
|
|
35390
|
+
var _b = useState(), currentOpenId = _b[0], setCurrentOpenId = _b[1];
|
|
35391
|
+
var requestOpen = function (drawerId) {
|
|
35392
|
+
return setCurrentOpenId(drawerId);
|
|
35393
|
+
};
|
|
35394
|
+
var requestClose = function (drawerId, forceClose) {
|
|
35395
|
+
if ((currentOpenId && currentOpenId === drawerId) || forceClose)
|
|
35396
|
+
setCurrentOpenId(undefined);
|
|
35397
|
+
};
|
|
35398
|
+
return (React__default.createElement(DrawerGlobalContext.Provider, { value: {
|
|
35399
|
+
currentOpenId: currentOpenId,
|
|
35400
|
+
requestOpen: requestOpen,
|
|
35401
|
+
requestClose: requestClose
|
|
35402
|
+
} }, children));
|
|
35403
|
+
};
|
|
35404
|
+
|
|
35405
|
+
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}";
|
|
35406
|
+
styleInject(css_248z);
|
|
35407
|
+
|
|
35408
|
+
var DrawerContext = createContext(null);
|
|
35409
|
+
|
|
35410
|
+
var useDisableParentScroll = function (_a) {
|
|
35411
|
+
var _b;
|
|
35412
|
+
var _c = _a.shouldDisable, shouldDisable = _c === void 0 ? false : _c, _d = _a.mode, mode = _d === void 0 ? 'body' : _d, parentRef = _a.parentRef;
|
|
35413
|
+
var _e = 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];
|
|
35414
|
+
useEffect(function () {
|
|
35415
|
+
var _a;
|
|
35416
|
+
var newEl = mode === 'body' ? document.body : (_a = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
|
|
35417
|
+
setEl(newEl);
|
|
35418
|
+
}, [mode, parentRef === null || parentRef === void 0 ? void 0 : parentRef.current]);
|
|
35419
|
+
useDisableScroll(el, shouldDisable);
|
|
35420
|
+
};
|
|
35421
|
+
|
|
35422
|
+
var Drawer = forwardRef$1(function (_a, ref) {
|
|
35423
|
+
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"]);
|
|
35424
|
+
var localRef = useRef(null);
|
|
35425
|
+
useImperativeHandle(ref, function () { return localRef.current; }, [ref]);
|
|
35426
|
+
useDisableParentScroll({
|
|
35427
|
+
shouldDisable: disableScroll && isOpen,
|
|
35428
|
+
mode: disableScroll,
|
|
35429
|
+
parentRef: localRef
|
|
35430
|
+
});
|
|
35431
|
+
useEscapeFunction((closeOnEsc && onRequestClose) || (function () { }), 'keydown', localRef);
|
|
35432
|
+
var sizeRef = useRef(size !== null && size !== void 0 ? size : initialSize);
|
|
35433
|
+
sizeRef.current = size !== null && size !== void 0 ? size : sizeRef.current;
|
|
35434
|
+
var currentSize = sizeRef.current;
|
|
35435
|
+
// 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
|
|
35436
|
+
var isPrimary = position === 'top' || position === 'left';
|
|
35437
|
+
var openRatio = isPrimary ? currentSize : 100 - currentSize;
|
|
35438
|
+
var closedRatio = isPrimary ? 0 : 100;
|
|
35439
|
+
var ratio = isOpen ? openRatio : closedRatio;
|
|
35440
|
+
var orientation = position === 'top' || position === 'bottom' ? 'horizontal' : 'vertical';
|
|
35441
|
+
var handleResize = isOpen && resizeable
|
|
35442
|
+
? function (ratio) {
|
|
35443
|
+
var _a;
|
|
35444
|
+
var newRatio = isPrimary ? ratio : 100 - ratio;
|
|
35445
|
+
sizeRef.current = newRatio;
|
|
35446
|
+
(_a = splitterProps.onResized) === null || _a === void 0 ? void 0 : _a.call(splitterProps, newRatio);
|
|
35447
|
+
}
|
|
35448
|
+
: undefined;
|
|
35449
|
+
var shouldMountChildren = useChildrenMountState({
|
|
35450
|
+
isOpen: isOpen,
|
|
35451
|
+
mountChildrenOn: mountChildrenOn
|
|
35452
|
+
});
|
|
35453
|
+
// we don't want the children to rerender when other props change
|
|
35454
|
+
var drawerContent = useMemo(function () {
|
|
35455
|
+
return shouldMountChildren ? (React__default.createElement("div", { className: "children", key: "children" },
|
|
35456
|
+
!hideCloseButton && (React__default.createElement("button", { tabIndex: 0, title: "Close Panel", className: "close-button lui-button lui-button-tertiary", onClick: onRequestClose },
|
|
35457
|
+
React__default.createElement(LuiIcon, { alt: "", name: "ic_clear", size: "sm" }))),
|
|
35458
|
+
children)) : null;
|
|
35459
|
+
}, [shouldMountChildren, children, hideCloseButton, onRequestClose]);
|
|
35460
|
+
var overlay = useMemo(function () { return (React__default.createElement("div", { key: "overlay", className: clsx('overlay', passThroughOverlayClick && 'passthrough'), onClick: closeOnClickOutside ? onRequestClose : undefined })); }, [passThroughOverlayClick, closeOnClickOutside, onRequestClose]);
|
|
35461
|
+
// the splitter accepts exactly two children, so we order them according to the drawer position
|
|
35462
|
+
var splitterChildren = useMemo(function () { return (isPrimary ? [drawerContent, overlay] : [overlay, drawerContent]); }, [isPrimary, drawerContent, overlay]);
|
|
35463
|
+
return (React__default.createElement(DrawerContext.Provider, { value: { isOpen: isOpen, requestClose: onRequestClose } },
|
|
35464
|
+
React__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)));
|
|
35465
|
+
});
|
|
35466
|
+
var useChildrenMountState = function (_a) {
|
|
35467
|
+
var mountChildrenOn = _a.mountChildrenOn, isOpen = _a.isOpen;
|
|
35468
|
+
var _b = useState(mountChildrenOn === 'mount' || isOpen), shouldMountChildren = _b[0], setShouldMountChildren = _b[1];
|
|
35469
|
+
if (!shouldMountChildren && isOpen)
|
|
35470
|
+
setShouldMountChildren(true);
|
|
35471
|
+
return shouldMountChildren;
|
|
35472
|
+
};
|
|
35473
|
+
|
|
35474
|
+
var DrawerGlobal = forwardRef$1(function (props, ref) {
|
|
35475
|
+
var _a = useDrawerGlobalContext(), currentOpenId = _a.currentOpenId, requestClose = _a.requestClose;
|
|
35476
|
+
var isOpen = currentOpenId === props.id;
|
|
35477
|
+
var onRequestClose = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
35478
|
+
var shouldClose;
|
|
35479
|
+
var _a, _b;
|
|
35480
|
+
return __generator(this, function (_c) {
|
|
35481
|
+
switch (_c.label) {
|
|
35482
|
+
case 0: return [4 /*yield*/, ((_a = props.onBeforeClose) === null || _a === void 0 ? void 0 : _a.call(props))];
|
|
35483
|
+
case 1:
|
|
35484
|
+
shouldClose = (_b = (_c.sent())) !== null && _b !== void 0 ? _b : true;
|
|
35485
|
+
if (shouldClose)
|
|
35486
|
+
requestClose(props.id);
|
|
35487
|
+
return [2 /*return*/];
|
|
35488
|
+
}
|
|
35489
|
+
});
|
|
35490
|
+
}); };
|
|
35491
|
+
return (React__default.createElement(Drawer, __assign({}, props, { ref: ref, isOpen: isOpen, onRequestClose: onRequestClose })));
|
|
35492
|
+
});
|
|
35493
|
+
|
|
35494
|
+
export { CheckboxItemRenderer, ColorBucket, ColorInput, ColorInputGroup, ColorPalette, Drawer, DrawerGlobal, DrawerGlobalContext, DrawerGlobalProvider, LuiAccordicard, LuiAccordicardStatic, LuiAccordion, LuiAlertModal, LuiAlertModalButtons, LuiAlertModalV2, LuiAppFooterSml, LuiAutoExpandTextAreaInput, LuiBadge, LuiBanner, LuiBannerContent, LuiBannerV2, LuiBearingInput, LuiButton, LuiButtonGroup, LuiCheckboxInput, LuiCloseableHeaderMenuContext, LuiCloseableHeaderMenuContextV2, LuiCloseableHeaderMenuItem, LuiCloseableHeaderMenuItemV2, LuiComboSelect, LuiControlledMenu, LuiCounter, LuiDateInput, LuiDrawerMenu, LuiDrawerMenuDivider, LuiDrawerMenuDividerV2, LuiDrawerMenuOption, LuiDrawerMenuOptionV2, LuiDrawerMenuOptions, LuiDrawerMenuOptionsV2, LuiDrawerMenuSection, LuiDrawerMenuSectionV2, LuiDrawerMenuV2, LuiDropdownMenu, LuiDropdownMenuV2, LuiDropdownMenuV2DropContent, LuiErrorIllustration, LuiErrorPage, LuiErrorPanel, LuiExpandableBanner, LuiFileInputBox, LuiFilterContainer, LuiFilterMenu, LuiFooter, LuiFormSectionHeader, LuiHeader, LuiHeaderMenuItem, LuiHeaderMenuItemV2, LuiHeaderV2, LuiIcon, LuiListBox, LuiLoadingSpinner, LuiMenu, LuiMenuCloseButton, LuiMenuCloseButtonV2, LuiMessagingContextProvider, LuiMiniSpinner, LuiModal, LuiModalV2, LuiMoneyInput, LuiMultiSwitch, LuiMultiSwitchYesNo, LuiPagination, LuiPassiveSearchInput, LuiProgressBar, LuiRadioInput, LuiResizableLayout, LuiSearchBox, LuiSearchInput, LuiSelectDataMenu, LuiSelectInput, LuiSelectMenu, LuiSelectMenuDivider, LuiSelectMenuHeader, LuiSelectMenuItem, LuiSelectMenuItemSwitch, LuiSelectSubMenuItem, LuiShadow, LuiSideMenu, LuiSideMenuItem, LuiSidePanel, LuiSidePanelProvider, LuiSideToolbar, LuiSplitButton, LuiSplitButtonMenuItem, LuiSplitButtonPosition, LuiStaticMessage, LuiStatusSpinner, LuiSwitchButton, LuiTab, LuiTabs, LuiTabsContext, LuiTabsGroup, LuiTabsPanel, LuiTabsPanelSwitch, LuiTextAreaInput, LuiTextInput, LuiToastMessage, LuiTooltip, LuiUpdatesSplashModal, RadioItemRenderer, SplitPanelState, Splitter, ToolbarButton, ToolbarDirection, ToolbarItem, ToolbarItemSeparator, breakpointQuery, breakpoints, defaultColours, isChromatic, useClickedOutsideElement, useDrawerGlobalContext, useEscapeFunction, useLuiCloseableHeaderMenuContextV2, useMediaQuery, usePageClickFunction, useShowLUIMessage, useSplitterRef, useToast };
|
|
35358
35495
|
//# sourceMappingURL=lui.esm.js.map
|