@linzjs/lui 17.52.0 → 17.52.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 +7 -0
- package/dist/components/LuiSideToolbar/LuiSideToolbar.d.ts +1 -11
- package/dist/index.d.ts +3 -0
- package/dist/index.js +85 -22
- package/dist/index.js.map +1 -1
- package/dist/lui.esm.js +82 -23
- package/dist/lui.esm.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
## [17.52.1](https://github.com/linz/lui/compare/v17.52.0...v17.52.1) (2023-04-23)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* release toolbar bug fix ([#932](https://github.com/linz/lui/issues/932)) ([4785395](https://github.com/linz/lui/commit/4785395da8571f138ad2fbe18363a06eda872537))
|
|
7
|
+
|
|
1
8
|
# [17.52.0](https://github.com/linz/lui/compare/v17.51.0...v17.52.0) (2023-04-21)
|
|
2
9
|
|
|
3
10
|
|
|
@@ -1,21 +1,11 @@
|
|
|
1
1
|
import './LuiSideToolbar.scss';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
|
-
export declare type ToolbarConfig<T> = {
|
|
4
|
-
icon: string;
|
|
5
|
-
iconImage?: string;
|
|
6
|
-
isDisabled?: boolean;
|
|
7
|
-
isFetching?: boolean;
|
|
8
|
-
isToggled?: boolean;
|
|
9
|
-
key: T;
|
|
10
|
-
title: string;
|
|
11
|
-
tooltipMessage?: string;
|
|
12
|
-
};
|
|
13
3
|
export declare enum ToolbarDirection {
|
|
14
4
|
LEFT = "Left",
|
|
15
5
|
RIGHT = "Right"
|
|
16
6
|
}
|
|
17
7
|
export interface ToolbarProps {
|
|
18
8
|
direction: ToolbarDirection;
|
|
19
|
-
children: ReactNode
|
|
9
|
+
children: ReactNode;
|
|
20
10
|
}
|
|
21
11
|
export declare function LuiSideToolbar(props: ToolbarProps): JSX.Element;
|
package/dist/index.d.ts
CHANGED
|
@@ -70,5 +70,8 @@ export { RadioItemRenderer } from './components/LuiListBox/Renderers/RadioItemRe
|
|
|
70
70
|
export { CheckboxItemRenderer } from './components/LuiListBox/Renderers/CheckboxItemRenderer';
|
|
71
71
|
export { LuiSideMenu, ILuiSideMenuProps, } from './components/LuiSideMenu/LuiSideMenu';
|
|
72
72
|
export { LuiSideMenuItem, ILuiSideMenuItemProps, LuiMenuItemClickHandler, } from './components/LuiSideMenu/LuiSideMenuItem';
|
|
73
|
+
export { LuiSideToolbar, ToolbarDirection, } from './components/LuiSideToolbar/LuiSideToolbar';
|
|
74
|
+
export { ToolbarButton, ToolbarButtonProps, } from './components/LuiSideToolbar/ToolbarButton';
|
|
75
|
+
export { ToolbarItem, ToolbarItemProps, ToolbarItemSeparator, } from './components/LuiSideToolbar/ToolbarItem';
|
|
73
76
|
export { Breakpoint, breakpoints, breakpointQuery, useMediaQuery, } from './components/common/UseMediaQuery';
|
|
74
77
|
export { useEscapeFunction, usePageClickFunction, } from './components/common/Hooks';
|
package/dist/index.js
CHANGED
|
@@ -25426,8 +25426,8 @@ function styleInject(css, ref) {
|
|
|
25426
25426
|
}
|
|
25427
25427
|
}
|
|
25428
25428
|
|
|
25429
|
-
var css_248z$
|
|
25430
|
-
styleInject(css_248z$
|
|
25429
|
+
var css_248z$a = ".LuiFloatingWindow-buttons {\n display: flex;\n align-items: center;\n}\n\n.LuiFloatingWindow-extra-buttons-divider {\n margin-right: 4px;\n margin-left: 8px;\n margin-top: -6px;\n font-size: x-large;\n opacity: 0.7;\n}\n\n.FloatingWindow-window {\n box-shadow: 0px 1px 6px 0px #00000026, 0px 6px 10px 0px #00000040;\n position: absolute;\n background-color: #ffffff;\n top: 10%;\n left: 5%;\n display: flex;\n flex-direction: column;\n border-radius: 9px;\n}\n\n.FloatingWindow-container {\n display: flex;\n height: calc(100% - 50px);\n width: 100%;\n overflow: auto;\n}\n\n.FloatingWindow-header-element {\n flex: 0;\n}\n\n.FloatingWindow-header {\n height: 48px;\n line-height: 48px;\n color: #2a292c;\n padding: 0 8px;\n display: flex;\n overflow: hidden;\n justify-content: space-between;\n border-bottom: 2px #eaeaea solid;\n font-size: 1em;\n font-weight: 600;\n}\n\n.FloatingWindow-header-title-text {\n font-size: 1em;\n font-weight: 600;\n overflow: hidden;\n}\n\n.FloatingWindow-buttons {\n display: flex;\n align-items: center;\n}\n\n.FloatingWindow-extra-buttons-divider {\n margin-right: 4px;\n margin-left: 8px;\n margin-top: -6px;\n font-size: x-large;\n opacity: 0.7;\n}\n\n.FloatingWindowHeaderButton-button {\n padding: 0 0 0 8px;\n border: none;\n outline: none;\n border-radius: 50%;\n background-color: transparent;\n color: #6b6966;\n display: flex;\n}\n\n.FloatingWindowHeaderButton-icon {\n fill: #6b6966;\n}\n\n.floating-window-icon {\n display: inline-block;\n height: 24px;\n max-height: 24px;\n max-width: 24px;\n width: 24px;\n fill: #6b6966;\n}";
|
|
25430
|
+
styleInject(css_248z$a);
|
|
25431
25431
|
|
|
25432
25432
|
/**
|
|
25433
25433
|
* Overwrite the common buttons for floating window to
|
|
@@ -27676,8 +27676,8 @@ ReactSplitGrid.defaultProps = {
|
|
|
27676
27676
|
onDrag: undefined,
|
|
27677
27677
|
};
|
|
27678
27678
|
|
|
27679
|
-
var css_248z$
|
|
27680
|
-
styleInject(css_248z$
|
|
27679
|
+
var css_248z$9 = ".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;\n /*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}";
|
|
27680
|
+
styleInject(css_248z$9);
|
|
27681
27681
|
|
|
27682
27682
|
var GutterComponent = function (props) {
|
|
27683
27683
|
var leftIcon = (React__default["default"].createElement(LuiIcon, { name: "ic_double_arrow_left", alt: "", status: "interactive" }));
|
|
@@ -27995,8 +27995,8 @@ function LuiFormikForm(props) {
|
|
|
27995
27995
|
" "))));
|
|
27996
27996
|
}
|
|
27997
27997
|
|
|
27998
|
-
var css_248z$
|
|
27999
|
-
styleInject(css_248z$
|
|
27998
|
+
var css_248z$8 = "/**\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}";
|
|
27999
|
+
styleInject(css_248z$8);
|
|
28000
28000
|
|
|
28001
28001
|
var LuiError = function (_a) {
|
|
28002
28002
|
var error = _a.error, className = _a.className;
|
|
@@ -52497,8 +52497,8 @@ function isChromatic() {
|
|
|
52497
52497
|
(window === null || window === void 0 ? void 0 : window.location.href.match(/chromatic=true/)));
|
|
52498
52498
|
}
|
|
52499
52499
|
|
|
52500
|
-
var css_248z$
|
|
52501
|
-
styleInject(css_248z$
|
|
52500
|
+
var css_248z$7 = ":export {\n charcoal: #2a292c;\n fuscous: #6b6966;\n gray: #989189;\n silver: #beb9b4;\n lily: #eaeaea;\n dew: #DAD7D6;\n hint: #f9f9f9;\n snow: #ffffff;\n white: #ffffff;\n teal: #00425d;\n sea: #007198;\n electric: #0096cc;\n spray: #73c8e1;\n polar: #e2f3f7;\n memesia: #1F69C3;\n sherpa: #004b50;\n surfie: #017a76;\n persian: #00a599;\n downy: #73cdc8;\n iceberg: #dcf5f0;\n sacramento: #004e32;\n salem: #08814d;\n pigment: #0aa245;\n granny: #9bd79b;\n panache: #e9fae7;\n brand-primary: #004b50;\n brand-secondary: #017a76;\n engine: #cc0000;\n carrot: #EA6A2E;\n kendall: #F5CCCC;\n elizabeth: #FBDED0;\n andrea: #3A7CDF;\n celestial: #D7E5F9;\n golf: #0AA345;\n error: #cc0000;\n error-bg: #F5CCCC;\n error-focus: #5a0000;\n warning: #EA6A2E;\n warning-bg: #fbdfd2;\n warning-focus: #b33a01;\n success: #0aa245;\n success-bg: #e9fae7;\n info: #3A7CDF;\n info-bg: #d8e5f9;\n visited: #00425d;\n green-hover: #107c3a;\n green-active: #094a22;\n green-btn: #0aa245;\n txt-link: #1F69C3;\n primary-hover-btn: #005678;\n selection: #c7e9f3;\n heading-color: #017a76;\n heading-color--secondary: #2a292c;\n base-type-color: #2a292c;\n input-text: #2a292c;\n input-placeholder: #6b6966;\n input-placeholder-when-disabled: #989189;\n base-icon-color: #007198;\n disabled-color: #989189;\n disabled-color-dark: #6b6966;\n linz-color-primary: #023d48;\n linz-color-primary-hover: #01818a;\n linz-color-tertiary: #e1e44a;\n linz-color-tertiary-hover: #cdcf59;\n color-test-pink: #f09;\n linz-linear-gradient-blue: linear-gradient(70deg, #00425d 12%, #007198 100%);\n linz-linear-gradient-teal: linear-gradient(270deg, #00a599 1%, #73cdc8 100%);\n}";
|
|
52501
|
+
styleInject(css_248z$7);
|
|
52502
52502
|
|
|
52503
52503
|
var _excluded = ["allowCreateWhileLoading", "createOptionPosition", "formatCreateLabel", "isValidNewOption", "getNewOptionData", "onCreateOption", "options", "onChange"];
|
|
52504
52504
|
|
|
@@ -52619,13 +52619,13 @@ function LuiComboSelectActual(givenProps, ref) {
|
|
|
52619
52619
|
// box-shadow: "-8px 0px 0 0 #cc0000";
|
|
52620
52620
|
// border-radius: "4px";
|
|
52621
52621
|
var id = useGenerateOrDefaultId(props === null || props === void 0 ? void 0 : props.id);
|
|
52622
|
-
var selectProp = __assign(__assign({ inputId: id }, props), { classNamePrefix: 'LuiComboSelect', theme: function (theme) { return (__assign(__assign({}, theme), { colors: __assign(__assign({}, theme.colors), { primary: css_248z$
|
|
52622
|
+
var selectProp = __assign(__assign({ inputId: id }, props), { classNamePrefix: 'LuiComboSelect', theme: function (theme) { return (__assign(__assign({}, theme), { colors: __assign(__assign({}, theme.colors), { primary: css_248z$7['sea'], primary75: css_248z$7['electric'], primary50: css_248z$7['spray'], primary25: css_248z$7['polar'], neutral90: css_248z$7['charcoal'], neutral80: css_248z$7['charcoal'], neutral70: css_248z$7['charcoal'], neutral60: css_248z$7['fuscous'], neutral50: css_248z$7['fuscous'], neutral40: css_248z$7['gray'], neutral30: css_248z$7['gray'], neutral20: css_248z$7['silver'], neutral10: css_248z$7['lily'], neutral5: css_248z$7['hint'], danger: css_248z$7['error'], dangerLight: css_248z$7['error-bg'] }) })); }, styles: {
|
|
52623
52623
|
control: function (provided, state) { return (__assign(__assign({}, provided), {
|
|
52624
52624
|
/* matches style of .LuiTextInput-input */
|
|
52625
52625
|
boxShadow: 'none', border: state.isFocused ? '1px solid #053d52' : '1px solid #b2b2b2', '&:hover, &:active': {
|
|
52626
52626
|
borderColor: '#053d52'
|
|
52627
52627
|
} })); },
|
|
52628
|
-
dropdownIndicator: function (provided) { return (__assign(__assign({}, provided), { color: css_248z$
|
|
52628
|
+
dropdownIndicator: function (provided) { return (__assign(__assign({}, provided), { color: css_248z$7['fuscous'] })); },
|
|
52629
52629
|
indicatorSeparator: function (provided) { return (__assign(__assign({}, provided), { width: 0 })); },
|
|
52630
52630
|
input: function (provided) { return (__assign(__assign({}, provided), { height: '40px', minHeight: '40px', fontWeight: 400, input: {
|
|
52631
52631
|
height: '38px !important'
|
|
@@ -52633,10 +52633,10 @@ function LuiComboSelectActual(givenProps, ref) {
|
|
|
52633
52633
|
singleValue: function (provided) { return (__assign(__assign({}, provided), { color: '#414042', fontWeight: 400 })); },
|
|
52634
52634
|
placeholder: function (provided) { return (__assign(__assign({}, provided), {
|
|
52635
52635
|
/* please keep this in sync with FormVars.scss/mixin.formPlaceholder */
|
|
52636
|
-
fontWeight: 'normal', fontStyle: 'italic', color: css_248z$
|
|
52636
|
+
fontWeight: 'normal', fontStyle: 'italic', color: css_248z$7['input-placeholder'] })); },
|
|
52637
52637
|
option: function (provided, _a) {
|
|
52638
52638
|
var isSelected = _a.isSelected;
|
|
52639
|
-
return (__assign(__assign({}, provided), { color: css_248z$
|
|
52639
|
+
return (__assign(__assign({}, provided), { color: css_248z$7['input-text'], backgroundColor: isSelected ? css_248z$7['selection'] : css_248z$7['white'] }));
|
|
52640
52640
|
}
|
|
52641
52641
|
} });
|
|
52642
52642
|
return (React__default["default"].createElement("label", { htmlFor: id, className: clsx('LuiComboSelect-label', props.error && 'hasError') },
|
|
@@ -55008,8 +55008,8 @@ var LuiModalHeader = function (props) {
|
|
|
55008
55008
|
React__default["default"].createElement(LuiIcon, { name: "ic_clear", alt: "Help", size: "lg" }))))))));
|
|
55009
55009
|
};
|
|
55010
55010
|
|
|
55011
|
-
var css_248z$
|
|
55012
|
-
styleInject(css_248z$
|
|
55011
|
+
var css_248z$6 = "@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 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";
|
|
55012
|
+
styleInject(css_248z$6);
|
|
55013
55013
|
|
|
55014
55014
|
/**
|
|
55015
55015
|
* @internal
|
|
@@ -60270,8 +60270,8 @@ var LuiSidePanelProvider = function (_a) {
|
|
|
60270
60270
|
React__default["default"].createElement(LuiSidePanelContainer, __assign({}, props))));
|
|
60271
60271
|
};
|
|
60272
60272
|
|
|
60273
|
-
var css_248z$
|
|
60274
|
-
styleInject(css_248z$
|
|
60273
|
+
var css_248z$5 = ".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 justify-content: space-between;\n cursor: pointer;\n width: 40px;\n height: 20px;\n background: grey;\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: absolute;\n top: 2px;\n left: 2px;\n width: 18px;\n height: 16px;\n border-radius: 18px;\n transition: 0.2s;\n background: #fff;\n box-shadow: 0 0 2px 0 rgba(10, 10, 10, 0.29);\n}\n\n.lui-switch-checkbox:checked + .lui-switch-label .lui-switch-button {\n left: calc(100% - 2px);\n transform: translateX(-100%);\n}\n\n.lui-switch-label:active .lui-switch-button {\n width: 20px;\n}";
|
|
60274
|
+
styleInject(css_248z$5);
|
|
60275
60275
|
|
|
60276
60276
|
var LuiSwitchButton = function (props) {
|
|
60277
60277
|
var generatedId = useGenerateOrDefaultId();
|
|
@@ -67902,8 +67902,8 @@ var LuiAccordicardStatic = function (props) {
|
|
|
67902
67902
|
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" }))));
|
|
67903
67903
|
};
|
|
67904
67904
|
|
|
67905
|
-
var css_248z$
|
|
67906
|
-
styleInject(css_248z$
|
|
67905
|
+
var css_248z$4 = "/**\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: #d6eef4;\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}";
|
|
67906
|
+
styleInject(css_248z$4);
|
|
67907
67907
|
|
|
67908
67908
|
function $c1d7fb2ec91bae71$var$Item(props) {
|
|
67909
67909
|
return null;
|
|
@@ -71403,16 +71403,16 @@ function DefaultEmptyIndicator() {
|
|
|
71403
71403
|
return React__default["default"].createElement("li", { className: "LuiListBox-emptyIndicator" }, "Nothing to Display");
|
|
71404
71404
|
}
|
|
71405
71405
|
|
|
71406
|
-
var css_248z$
|
|
71407
|
-
styleInject(css_248z$
|
|
71406
|
+
var css_248z$3 = "/**\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}";
|
|
71407
|
+
styleInject(css_248z$3);
|
|
71408
71408
|
|
|
71409
71409
|
function RadioItemRenderer(_a) {
|
|
71410
71410
|
var item = _a.item, isSelected = _a.isSelected;
|
|
71411
71411
|
return (React__default["default"].createElement("div", { className: "RadioItemRenderer ".concat(isSelected ? 'RadioItemRenderer-isSelected' : '') }, item.label));
|
|
71412
71412
|
}
|
|
71413
71413
|
|
|
71414
|
-
var css_248z = ".CheckboxRenderer {\n display: flex;\n align-items: center;\n}";
|
|
71415
|
-
styleInject(css_248z);
|
|
71414
|
+
var css_248z$2 = ".CheckboxRenderer {\n display: flex;\n align-items: center;\n}";
|
|
71415
|
+
styleInject(css_248z$2);
|
|
71416
71416
|
|
|
71417
71417
|
function CheckboxItemRenderer(_a) {
|
|
71418
71418
|
var item = _a.item, isSelected = _a.isSelected;
|
|
@@ -71436,6 +71436,65 @@ function LuiSideMenuItem(_a) {
|
|
|
71436
71436
|
React__default["default"].createElement("span", { className: "navText" }, label))));
|
|
71437
71437
|
}
|
|
71438
71438
|
|
|
71439
|
+
var css_248z$1 = "/**\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 #00000040, 0px 0px 3px 0px #00000026;\n}\n\n.Left {\n justify-self: start;\n}\n\n.Right {\n justify-self: end;\n}";
|
|
71440
|
+
styleInject(css_248z$1);
|
|
71441
|
+
|
|
71442
|
+
exports.ToolbarDirection = void 0;
|
|
71443
|
+
(function (ToolbarDirection) {
|
|
71444
|
+
ToolbarDirection["LEFT"] = "Left";
|
|
71445
|
+
ToolbarDirection["RIGHT"] = "Right";
|
|
71446
|
+
})(exports.ToolbarDirection || (exports.ToolbarDirection = {}));
|
|
71447
|
+
function LuiSideToolbar(props) {
|
|
71448
|
+
return (React__default["default"].createElement("div", { className: clsx(['Toolbar', 'app--shadow-sm', props.direction]), "data-testid": "toolbar" }, props.children));
|
|
71449
|
+
}
|
|
71450
|
+
|
|
71451
|
+
/**
|
|
71452
|
+
* Show LuiIcon or Image.
|
|
71453
|
+
*
|
|
71454
|
+
* @param param
|
|
71455
|
+
* @returns
|
|
71456
|
+
*/
|
|
71457
|
+
var ToolbarIcon = function (_a) {
|
|
71458
|
+
var iconImage = _a.iconImage, iconName = _a.iconName;
|
|
71459
|
+
return iconImage ? (React__default["default"].createElement("img", { className: "LuiIcon--lg", alt: iconName, src: iconImage })) : (React__default["default"].createElement(LuiIcon, { name: iconName, alt: iconName, size: 'md' }));
|
|
71460
|
+
};
|
|
71461
|
+
|
|
71462
|
+
var css_248z = "/**\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 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 margin: 6px -4px;\n height: 2px;\n background-color: #eaeaea;\n width: 100%;\n}";
|
|
71463
|
+
styleInject(css_248z);
|
|
71464
|
+
|
|
71465
|
+
/**
|
|
71466
|
+
* Create button for using either LuiIcon or Image.
|
|
71467
|
+
*
|
|
71468
|
+
* @param props
|
|
71469
|
+
* @returns
|
|
71470
|
+
*/
|
|
71471
|
+
var ToolbarButton = function (_a) {
|
|
71472
|
+
var disabled = _a.disabled, highlighted = _a.highlighted, iconImage = _a.iconImage, iconName = _a.iconName, loading = _a.loading, onClick = _a.onClick, panelTitle = _a.panelTitle, panelKey = _a.panelKey, tooltip = _a.tooltip;
|
|
71473
|
+
if (loading) {
|
|
71474
|
+
return React__default["default"].createElement(Skeleton, { className: "ToolbarButton", height: 40, width: 40 });
|
|
71475
|
+
}
|
|
71476
|
+
var button = (React__default["default"].createElement("button", { className: "".concat(highlighted ? 'lui-button-primary' : 'lui-button-secondary', " ToolbarButton"), "data-testid": "ToolbarButton-".concat(panelKey), disabled: disabled, onClick: onClick, title: panelTitle, type: "button" },
|
|
71477
|
+
React__default["default"].createElement(ToolbarIcon, { iconImage: iconImage, iconName: iconName })));
|
|
71478
|
+
return tooltip ? (React__default["default"].createElement(LuiTooltip, { placement: "auto", message: tooltip }, button)) : (React__default["default"].createElement(React__default["default"].Fragment, null, button));
|
|
71479
|
+
};
|
|
71480
|
+
|
|
71481
|
+
/**
|
|
71482
|
+
* Allows any item to be added into the toolbar (with appropriate styles and size)
|
|
71483
|
+
*
|
|
71484
|
+
* @param props
|
|
71485
|
+
* @returns
|
|
71486
|
+
*/
|
|
71487
|
+
var ToolbarItem = function (props) {
|
|
71488
|
+
if (props.loading) {
|
|
71489
|
+
return React__default["default"].createElement(Skeleton, { className: "ToolbarButton", height: 40, width: 40 });
|
|
71490
|
+
}
|
|
71491
|
+
var item = (React__default["default"].createElement("div", { className: "ToolbarButton", onClick: props.onClick, "data-testid": props.dataTestId }, props.children));
|
|
71492
|
+
return props.tooltip ? (React__default["default"].createElement(LuiTooltip, { placement: "auto", message: props.tooltip }, item)) : (React__default["default"].createElement(React__default["default"].Fragment, null, item));
|
|
71493
|
+
};
|
|
71494
|
+
var ToolbarItemSeparator = function () {
|
|
71495
|
+
return React__default["default"].createElement("div", { className: 'ToolbarItem-separator' });
|
|
71496
|
+
};
|
|
71497
|
+
|
|
71439
71498
|
var breakpoints = {
|
|
71440
71499
|
sm: 480,
|
|
71441
71500
|
md: 768,
|
|
@@ -71560,6 +71619,7 @@ exports.LuiSideMenu = LuiSideMenu;
|
|
|
71560
71619
|
exports.LuiSideMenuItem = LuiSideMenuItem;
|
|
71561
71620
|
exports.LuiSidePanel = LuiSidePanel;
|
|
71562
71621
|
exports.LuiSidePanelProvider = LuiSidePanelProvider;
|
|
71622
|
+
exports.LuiSideToolbar = LuiSideToolbar;
|
|
71563
71623
|
exports.LuiStaticMessage = LuiStaticMessage;
|
|
71564
71624
|
exports.LuiStatusSpinner = LuiStatusSpinner;
|
|
71565
71625
|
exports.LuiSwitchButton = LuiSwitchButton;
|
|
@@ -71575,6 +71635,9 @@ exports.LuiToastMessage = LuiToastMessage;
|
|
|
71575
71635
|
exports.LuiTooltip = LuiTooltip;
|
|
71576
71636
|
exports.LuiUpdatesSplashModal = LuiUpdatesSplashModal;
|
|
71577
71637
|
exports.RadioItemRenderer = RadioItemRenderer;
|
|
71638
|
+
exports.ToolbarButton = ToolbarButton;
|
|
71639
|
+
exports.ToolbarItem = ToolbarItem;
|
|
71640
|
+
exports.ToolbarItemSeparator = ToolbarItemSeparator;
|
|
71578
71641
|
exports.breakpointQuery = breakpointQuery;
|
|
71579
71642
|
exports.breakpoints = breakpoints;
|
|
71580
71643
|
exports.getDefaultSearchMenuOptions = getDefaultSearchMenuOptions;
|