@indico-data/design-system 2.58.2 → 2.59.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/lib/components/index.d.ts +1 -0
- package/lib/components/stepper/Stepper.d.ts +2 -0
- package/lib/components/stepper/Stepper.stories.d.ts +9 -0
- package/lib/components/stepper/__tests__/Stepper.tests.d.ts +1 -0
- package/lib/components/stepper/components/BackNavigation.d.ts +6 -0
- package/lib/components/stepper/components/Legend.d.ts +2 -0
- package/lib/components/stepper/components/NextNavigation.d.ts +8 -0
- package/lib/components/stepper/examples/MixedExample.d.ts +1 -0
- package/lib/components/stepper/examples/OptionalStepsExample.d.ts +1 -0
- package/lib/components/stepper/examples/RequiredStepsExample.d.ts +1 -0
- package/lib/components/stepper/examples/commonExample/CommonExample.d.ts +1 -0
- package/lib/components/stepper/examples/commonExample/steps/StepOne.d.ts +3 -0
- package/lib/components/stepper/examples/commonExample/steps/StepThree.d.ts +3 -0
- package/lib/components/stepper/examples/commonExample/steps/StepTwo.d.ts +3 -0
- package/lib/components/stepper/examples/constants.d.ts +61 -0
- package/lib/components/stepper/index.d.ts +1 -0
- package/lib/components/stepper/types.d.ts +24 -0
- package/lib/components/tanstackTable/TanstackTable.stories.d.ts +1 -1
- package/lib/components/tanstackTable/docs/pinnedColumns/PinnedColumn.stories.d.ts +1 -1
- package/lib/components/tanstackTable/docs/withRowClick/WithRowClick.stories.d.ts +1 -1
- package/lib/components/tanstackTable/index.d.ts +1 -1
- package/lib/index.css +100 -2
- package/lib/index.d.ts +23 -2
- package/lib/index.esm.css +100 -2
- package/lib/index.esm.js +103 -35
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +102 -33
- package/lib/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/index.ts +1 -0
- package/src/components/stepper/Stepper.mdx +140 -0
- package/src/components/stepper/Stepper.stories.tsx +196 -0
- package/src/components/stepper/Stepper.tsx +85 -0
- package/src/components/stepper/__tests__/Stepper.tests.tsx +213 -0
- package/src/components/stepper/components/BackNavigation.tsx +22 -0
- package/src/components/stepper/components/Legend.tsx +66 -0
- package/src/components/stepper/components/NextNavigation.tsx +38 -0
- package/src/components/stepper/examples/MixedExample.tsx +140 -0
- package/src/components/stepper/examples/OptionalStepsExample.tsx +139 -0
- package/src/components/stepper/examples/RequiredStepsExample.tsx +158 -0
- package/src/components/stepper/examples/commonExample/CommonExample.tsx +115 -0
- package/src/components/stepper/examples/commonExample/steps/StepOne.tsx +57 -0
- package/src/components/stepper/examples/commonExample/steps/StepThree.tsx +56 -0
- package/src/components/stepper/examples/commonExample/steps/StepTwo.tsx +52 -0
- package/src/components/stepper/examples/constants.ts +168 -0
- package/src/components/stepper/index.ts +1 -0
- package/src/components/stepper/styles/Stepper.scss +131 -0
- package/src/components/stepper/types.ts +27 -0
- package/src/components/tanstackTable/TanstackTable.stories.tsx +1 -1
- package/src/components/tanstackTable/{TanstakTable.tsx → TanstackTable.tsx} +15 -10
- package/src/components/tanstackTable/__tests__/TanstackTable.test.tsx +1 -1
- package/src/components/tanstackTable/components/TableBody/TableBody.tsx +2 -1
- package/src/components/tanstackTable/docs/pinnedColumns/PinnedColumn.stories.tsx +1 -1
- package/src/components/tanstackTable/docs/withRowClick/WithRowClick.stories.tsx +1 -1
- package/src/components/tanstackTable/index.ts +1 -1
- package/src/components/tanstackTable/styles/table.scss +2 -2
- package/src/components/toast/Toast.mdx +1 -1
- package/src/components/toast/Toast.stories.tsx +1 -1
- package/src/index.ts +4 -2
- package/src/styles/index.scss +1 -0
- /package/lib/components/tanstackTable/{TanstakTable.d.ts → TanstackTable.d.ts} +0 -0
package/lib/index.js
CHANGED
|
@@ -5038,12 +5038,12 @@ var classnames = {exports: {}};
|
|
|
5038
5038
|
} (classnames));
|
|
5039
5039
|
|
|
5040
5040
|
var classnamesExports = classnames.exports;
|
|
5041
|
-
var
|
|
5041
|
+
var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
|
|
5042
5042
|
|
|
5043
5043
|
const Icon = (_a) => {
|
|
5044
5044
|
var { name, size = 'md', className, ariaLabel } = _a, props = __rest(_a, ["name", "size", "className", "ariaLabel"]);
|
|
5045
5045
|
const label = ariaLabel || `${name} Icon`;
|
|
5046
|
-
const iconClasses =
|
|
5046
|
+
const iconClasses = classNames('icon', {
|
|
5047
5047
|
[`icon--${size}`]: size,
|
|
5048
5048
|
}, className);
|
|
5049
5049
|
const faIconName = name.split('fa-')[1];
|
|
@@ -5068,7 +5068,7 @@ const Icon = (_a) => {
|
|
|
5068
5068
|
|
|
5069
5069
|
const Button$1 = React.forwardRef((props, ref) => {
|
|
5070
5070
|
const { ariaLabel, children, isLoading, isDisabled, variant = 'solid', isPill, iconLeft, iconRight, onClick, type = 'button', size = 'md', onMouseEnter, onMouseExit, onKeyDown, className, href } = props, rest = __rest(props, ["ariaLabel", "children", "isLoading", "isDisabled", "variant", "isPill", "iconLeft", "iconRight", "onClick", "type", "size", "onMouseEnter", "onMouseExit", "onKeyDown", "className", "href"]);
|
|
5071
|
-
const buttonClasses =
|
|
5071
|
+
const buttonClasses = classNames('btn', {
|
|
5072
5072
|
[`btn--${variant}`]: variant,
|
|
5073
5073
|
[`btn--${size}`]: size,
|
|
5074
5074
|
'btn--icon-only': !children && (iconLeft || iconRight),
|
|
@@ -5497,7 +5497,7 @@ const Input = React__namespace.default.forwardRef((_a, ref) => {
|
|
|
5497
5497
|
const handleClear = () => {
|
|
5498
5498
|
onChange === null || onChange === void 0 ? void 0 : onChange({ target: { value: '' } });
|
|
5499
5499
|
};
|
|
5500
|
-
const inputClasses =
|
|
5500
|
+
const inputClasses = classNames('input', {
|
|
5501
5501
|
error: hasErrors,
|
|
5502
5502
|
'input--has-icon': iconName,
|
|
5503
5503
|
}, className);
|
|
@@ -5509,7 +5509,7 @@ const Pagination = (_a) => {
|
|
|
5509
5509
|
var { totalPages, currentPage = 1, onChange, className } = _a, rest = __rest(_a, ["totalPages", "currentPage", "onChange", "className"]);
|
|
5510
5510
|
const [inputValue, setInputValue] = React.useState(currentPage.toString());
|
|
5511
5511
|
const totalPagesText = `of ${totalPages}`;
|
|
5512
|
-
const classes =
|
|
5512
|
+
const classes = classNames('pagination', className);
|
|
5513
5513
|
React.useEffect(() => {
|
|
5514
5514
|
setInputValue(currentPage.toString());
|
|
5515
5515
|
}, [currentPage]);
|
|
@@ -5540,7 +5540,7 @@ const Pagination = (_a) => {
|
|
|
5540
5540
|
const isNextButtonDisabled = currentPage === totalPages;
|
|
5541
5541
|
const isPreviousButtonDisabled = currentPage === 1;
|
|
5542
5542
|
const hasError = Number(inputValue) > totalPages || Number(inputValue) < 1;
|
|
5543
|
-
return (jsxRuntime.jsx("div", Object.assign({ className: classes }, rest, { children: jsxRuntime.jsx(Container, { children: jsxRuntime.jsxs(Row, { gutterWidth: 12, align: "center", children: [jsxRuntime.jsx(Col, { xs: "content", children: jsxRuntime.jsx("div", { className: "pagination__previous", children: jsxRuntime.jsx(Button$1, { "data-testid": "pagination-previous-button", ariaLabel: "Previous Page", variant: "link", onClick: handlePreviousPage, iconLeft: "chevron-left", isDisabled: isPreviousButtonDisabled }) }) }), jsxRuntime.jsx(Col, { xs: "content", children: jsxRuntime.jsx("div", { className: "pagination__current-page", children: jsxRuntime.jsx(LabeledInput, { "data-testid": "pagination-current-page-input", className:
|
|
5543
|
+
return (jsxRuntime.jsx("div", Object.assign({ className: classes }, rest, { children: jsxRuntime.jsx(Container, { children: jsxRuntime.jsxs(Row, { gutterWidth: 12, align: "center", children: [jsxRuntime.jsx(Col, { xs: "content", children: jsxRuntime.jsx("div", { className: "pagination__previous", children: jsxRuntime.jsx(Button$1, { "data-testid": "pagination-previous-button", ariaLabel: "Previous Page", variant: "link", onClick: handlePreviousPage, iconLeft: "chevron-left", isDisabled: isPreviousButtonDisabled }) }) }), jsxRuntime.jsx(Col, { xs: "content", children: jsxRuntime.jsx("div", { className: "pagination__current-page", children: jsxRuntime.jsx(LabeledInput, { "data-testid": "pagination-current-page-input", className: classNames('pagination__current-page-input', {
|
|
5544
5544
|
'has-error': hasError,
|
|
5545
5545
|
}), value: inputValue, name: "currentPage", label: "Current Page", hasHiddenLabel: true, onKeyDown: (e) => {
|
|
5546
5546
|
if (e.key === 'Enter') {
|
|
@@ -5788,11 +5788,11 @@ const Table = (props) => {
|
|
|
5788
5788
|
const { responsive = true, direction = 'auto', keyField = 'id', striped = false, noDataComponent = 'built-in', isDisabled, isLoading, isFullHeight = false, subHeaderAlign = 'left', className, paginationTotalRows, totalEntriesText, data, columns: initialColumns, canPinColumns = false, onPinnedColumnsChange } = props, rest = __rest(props, ["responsive", "direction", "keyField", "striped", "noDataComponent", "isDisabled", "isLoading", "isFullHeight", "subHeaderAlign", "className", "paginationTotalRows", "totalEntriesText", "data", "columns", "canPinColumns", "onPinnedColumnsChange"]);
|
|
5789
5789
|
// Turns on/off column pinning.
|
|
5790
5790
|
const { columnsWithPinning } = usePinnedColumnsManager(initialColumns, canPinColumns, onPinnedColumnsChange);
|
|
5791
|
-
const combinedClassName =
|
|
5791
|
+
const combinedClassName = classNames(className, {
|
|
5792
5792
|
'table--striped': striped,
|
|
5793
5793
|
'table-body': true,
|
|
5794
5794
|
});
|
|
5795
|
-
const tableWrapperClassName =
|
|
5795
|
+
const tableWrapperClassName = classNames('table', {
|
|
5796
5796
|
'table--full-height': isFullHeight,
|
|
5797
5797
|
});
|
|
5798
5798
|
return (jsxRuntime.jsx("div", { className: tableWrapperClassName, "data-testid": "table", children: jsxRuntime.jsx(Xe, Object.assign({ data: data, columns: columnsWithPinning, responsive: responsive, direction: direction, subHeaderAlign: subHeaderAlign, keyField: keyField, striped: striped, className: combinedClassName, disabled: isDisabled, noDataComponent: noDataComponent, progressPending: isLoading, progressComponent: jsxRuntime.jsx(LoadingComponent, {}), pagination: true, paginationComponent: (props) => (jsxRuntime.jsx(TablePagination$1, Object.assign({}, props, { totalEntriesText: totalEntriesText }))), paginationTotalRows: paginationTotalRows, highlightOnHover: true, pointerOnHover: true }, rest)) }));
|
|
@@ -5816,7 +5816,7 @@ const Toggle = React__namespace.default.forwardRef((_a, ref) => {
|
|
|
5816
5816
|
const Textarea = React__namespace.default.forwardRef((_a, ref) => {
|
|
5817
5817
|
var { label, name, placeholder, value, onChange, onKeyDown, isRequired, isDisabled, errorMessage, helpText, hasHiddenLabel, rows, cols, readonly, wrap, form, maxLength, autofocus, defaultValue } = _a, rest = __rest(_a, ["label", "name", "placeholder", "value", "onChange", "onKeyDown", "isRequired", "isDisabled", "errorMessage", "helpText", "hasHiddenLabel", "rows", "cols", "readonly", "wrap", "form", "maxLength", "autofocus", "defaultValue"]);
|
|
5818
5818
|
const hasErrors = errorMessage && errorMessage.length > 0;
|
|
5819
|
-
const textareaClasses =
|
|
5819
|
+
const textareaClasses = classNames('textarea', { error: hasErrors });
|
|
5820
5820
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "textarea-wrapper", children: jsxRuntime.jsx("textarea", Object.assign({ ref: ref, rows: rows, cols: cols, autoFocus: autofocus, wrap: wrap, form: form, maxLength: maxLength, readOnly: readonly, "data-testid": `form-textarea-${name}`, name: name, disabled: isDisabled, placeholder: placeholder, onChange: onChange, onKeyDown: onKeyDown, className: textareaClasses, "aria-invalid": hasErrors ? true : undefined, "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired, value: value, defaultValue: defaultValue }, rest)) }), hasErrors && jsxRuntime.jsx(DisplayFormError, { message: errorMessage }), helpText && (jsxRuntime.jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
|
|
5821
5821
|
});
|
|
5822
5822
|
const LabeledTextarea = withLabel(Textarea);
|
|
@@ -5828,7 +5828,7 @@ const PasswordInput = React__namespace.default.forwardRef((_a, ref) => {
|
|
|
5828
5828
|
const handleShowPassword = () => {
|
|
5829
5829
|
setShowPassword((prevShowPassword) => !prevShowPassword);
|
|
5830
5830
|
};
|
|
5831
|
-
const inputClasses =
|
|
5831
|
+
const inputClasses = classNames('password-input', {
|
|
5832
5832
|
error: hasErrors,
|
|
5833
5833
|
}, 'password-input--has-icon');
|
|
5834
5834
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "password-input-wrapper", children: [jsxRuntime.jsx(Icon, { name: "lock", "data-testid": `${name}-embedded-icon`, className: "embedded-icon" }), jsxRuntime.jsx("input", Object.assign({ ref: ref, "data-testid": `form-password-input-${name}`, name: name, type: showPassword ? 'text' : 'password', disabled: isDisabled, placeholder: placeholder, onChange: onChange, onBlur: onBlur, onKeyDown: onKeyDown, className: inputClasses, "aria-invalid": hasErrors ? 'true' : 'false', "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired }, rest)), hasShowPassword && (jsxRuntime.jsx(Icon, { name: showPassword ? 'fa-eye-slash' : 'eye', "data-testid": `${name}-${showPassword ? 'hide' : 'show'}-password-icon`, size: "md", onClick: handleShowPassword, className: "toggle-show-password-icon" }))] }), hasErrors && jsxRuntime.jsx(DisplayFormError, { message: errorMessage }), helpText && (jsxRuntime.jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
|
|
@@ -5846,7 +5846,7 @@ const Select$1 = (_a) => {
|
|
|
5846
5846
|
Option: OptionComponent,
|
|
5847
5847
|
};
|
|
5848
5848
|
const mergedComponents = Object.assign(Object.assign({}, defaultComponents), customComponents);
|
|
5849
|
-
return (jsxRuntime.jsx(ReactSelect__default.default, Object.assign({ classNamePrefix: classNamePrefix, className:
|
|
5849
|
+
return (jsxRuntime.jsx(ReactSelect__default.default, Object.assign({ classNamePrefix: classNamePrefix, className: classNames('select-wrapper', className), components: mergedComponents }, props)));
|
|
5850
5850
|
};
|
|
5851
5851
|
|
|
5852
5852
|
/**
|
|
@@ -19146,22 +19146,22 @@ const Skeleton = (_a) => {
|
|
|
19146
19146
|
|
|
19147
19147
|
const Card = (_a) => {
|
|
19148
19148
|
var { className = '', children, title, subtitle, hasBoxShadow = false } = _a, rest = __rest(_a, ["className", "children", "title", "subtitle", "hasBoxShadow"]);
|
|
19149
|
-
const cardClasses =
|
|
19149
|
+
const cardClasses = classNames('card', { 'card--box-shadow': hasBoxShadow }, className);
|
|
19150
19150
|
return (jsxRuntime.jsxs("div", Object.assign({ className: cardClasses }, rest, { children: [(title || subtitle) && (jsxRuntime.jsxs("div", { className: "card__header", children: [title && jsxRuntime.jsx("h2", { children: title }), subtitle && jsxRuntime.jsx("p", { children: subtitle })] })), jsxRuntime.jsx("div", { className: "card__content", children: children })] })));
|
|
19151
19151
|
};
|
|
19152
19152
|
|
|
19153
19153
|
function Menu(_a) {
|
|
19154
19154
|
var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
|
|
19155
|
-
return (jsxRuntime.jsx("div", Object.assign({ className:
|
|
19155
|
+
return (jsxRuntime.jsx("div", Object.assign({ className: classNames('menu', className) }, rest, { children: React__namespace.default.Children.map(children, (child) => React__namespace.default.isValidElement(child)
|
|
19156
19156
|
? React__namespace.default.cloneElement(child, {
|
|
19157
|
-
className:
|
|
19157
|
+
className: classNames(child.props.className, 'menu-item'),
|
|
19158
19158
|
})
|
|
19159
19159
|
: child) })));
|
|
19160
19160
|
}
|
|
19161
19161
|
|
|
19162
19162
|
const Pill = (_a) => {
|
|
19163
19163
|
var { children, className, color = 'info', size = 'sm' } = _a, rest = __rest(_a, ["children", "className", "color", "size"]);
|
|
19164
|
-
const pillClasses =
|
|
19164
|
+
const pillClasses = classNames('pill', className, {
|
|
19165
19165
|
[`pill--${color}`]: color,
|
|
19166
19166
|
[`pill--${size}`]: size,
|
|
19167
19167
|
});
|
|
@@ -19170,7 +19170,7 @@ const Pill = (_a) => {
|
|
|
19170
19170
|
|
|
19171
19171
|
const Badge = (_a) => {
|
|
19172
19172
|
var { className = '', children, size = 'md', string } = _a, rest = __rest(_a, ["className", "children", "size", "string"]);
|
|
19173
|
-
const badgeClasses =
|
|
19173
|
+
const badgeClasses = classNames('badge', {
|
|
19174
19174
|
[`badge--${size}`]: size,
|
|
19175
19175
|
}, className);
|
|
19176
19176
|
return (jsxRuntime.jsx("div", Object.assign({ className: badgeClasses }, rest, { children: string ? jsxRuntime.jsx("p", { children: string }) : children })));
|
|
@@ -20998,8 +20998,8 @@ const Modal = (_a) => {
|
|
|
20998
20998
|
var { className = '', children, isOpen, onRequestClose, portalClassName, overlayClassName, appElement = document.getElementById('theme-root') ||
|
|
20999
20999
|
document.getElementById('root') ||
|
|
21000
21000
|
document.body, shouldCloseOnOverlayClick, shouldCloseOnEsc, testId, contentElement, overlayElement, position = 'center', parentSelector } = _a, rest = __rest(_a, ["className", "children", "isOpen", "onRequestClose", "portalClassName", "overlayClassName", "appElement", "shouldCloseOnOverlayClick", "shouldCloseOnEsc", "testId", "contentElement", "overlayElement", "position", "parentSelector"]);
|
|
21001
|
-
const modalClasses =
|
|
21002
|
-
const overlayClasses =
|
|
21001
|
+
const modalClasses = classNames('modal', `modal--${position}`, className);
|
|
21002
|
+
const overlayClasses = classNames('modal-overlay', overlayClassName);
|
|
21003
21003
|
return (jsxRuntime.jsx(ReactModal, Object.assign({ style: {}, className: modalClasses, overlayClassName: overlayClasses, testId: testId, isOpen: isOpen, onRequestClose: onRequestClose, portalClassName: portalClassName, appElement: appElement, parentSelector: parentSelector, shouldCloseOnOverlayClick: shouldCloseOnOverlayClick, shouldCloseOnEsc: shouldCloseOnEsc, contentElement: contentElement, overlayElement: overlayElement }, rest, { children: jsxRuntime.jsxs("div", { className: "modal-content", children: [jsxRuntime.jsx(Button$1, { className: "modal-close-button", onClick: onRequestClose, variant: "link", size: "md", iconLeft: "x-close", ariaLabel: "Close" }), jsxRuntime.jsx("div", { className: "modal-body", children: children })] }) })));
|
|
21004
21004
|
};
|
|
21005
21005
|
|
|
@@ -24015,7 +24015,7 @@ function ActionBar({ table, TableActions, className, children, }) {
|
|
|
24015
24015
|
row.toggleSelected(false);
|
|
24016
24016
|
});
|
|
24017
24017
|
};
|
|
24018
|
-
return (jsxRuntime.jsx(Card, { className:
|
|
24018
|
+
return (jsxRuntime.jsx(Card, { className: classNames('tanstack-table__action-bar', className), children: children !== null && children !== void 0 ? children : (jsxRuntime.jsx("div", { className: "tanstack-table__action-bar__container", children: TableActions && (jsxRuntime.jsx("div", { className: "tanstack-table__action-bar__button-container", children: jsxRuntime.jsx(TableActions, { selectedItems: selectedItems, unselectRows: unselectRows }) })) })) }));
|
|
24019
24019
|
}
|
|
24020
24020
|
|
|
24021
24021
|
function NoResults({ clearFilters, hasFilters, message }) {
|
|
@@ -41300,7 +41300,7 @@ const TableHeader = React.forwardRef(({ table }, ref) => {
|
|
|
41300
41300
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: table.getHeaderGroups().map((headerGroup) => (jsxRuntime.jsx("tr", { children: headerGroup.headers.map((header) => {
|
|
41301
41301
|
var _a, _b, _c;
|
|
41302
41302
|
const { column } = header;
|
|
41303
|
-
return (jsxRuntime.jsx("th", { className:
|
|
41303
|
+
return (jsxRuntime.jsx("th", { className: classNames('tanstack-table__thead__th', {
|
|
41304
41304
|
'pa-0': !!((_c = (_b = (_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.styles) === null || _b === void 0 ? void 0 : _b.header) === null || _c === void 0 ? void 0 : _c.hasNoPadding),
|
|
41305
41305
|
}), ref: (el) => {
|
|
41306
41306
|
if (el)
|
|
@@ -41315,14 +41315,14 @@ function CirclePulse(_a) {
|
|
|
41315
41315
|
}
|
|
41316
41316
|
|
|
41317
41317
|
const TableBody = ({ table, onRowClick, isLoading, columnsLength, activeRows, }) => {
|
|
41318
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [table.getRowModel().rows.map((row) => (jsxRuntime.jsx("tr", { className:
|
|
41318
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [table.getRowModel().rows.map((row) => (jsxRuntime.jsx("tr", { className: classNames('tanstack-table__tbody__tr', {
|
|
41319
41319
|
'is-selected': row.getIsSelected(),
|
|
41320
41320
|
'show-hover': !!onRowClick,
|
|
41321
41321
|
'is-clicked': activeRows.includes(row.id), // Checkbox Is clicked
|
|
41322
41322
|
}), children: row.getVisibleCells().map((cell) => {
|
|
41323
41323
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
41324
41324
|
const { columnDef } = cell.column;
|
|
41325
|
-
return (jsxRuntime.jsx("td", { className:
|
|
41325
|
+
return (jsxRuntime.jsx("td", { className: classNames('tanstack-table__tbody__td', {
|
|
41326
41326
|
'pa-0': !!((_c = (_b = (_a = columnDef.meta) === null || _a === void 0 ? void 0 : _a.styles) === null || _b === void 0 ? void 0 : _b.cell) === null || _c === void 0 ? void 0 : _c.hasNoPadding),
|
|
41327
41327
|
}), style: Object.assign({}, getTdStyles(cell.column, (_f = (_e = (_d = columnDef.meta) === null || _d === void 0 ? void 0 : _d.styles) === null || _e === void 0 ? void 0 : _e.cell) === null || _f === void 0 ? void 0 : _f.textAlign, (_h = (_g = columnDef.meta) === null || _g === void 0 ? void 0 : _g.styles) === null || _h === void 0 ? void 0 : _h.definedColumnSize, cell.column.getSize())), onClick: () => {
|
|
41328
41328
|
var _a, _b, _c;
|
|
@@ -41331,9 +41331,9 @@ const TableBody = ({ table, onRowClick, isLoading, columnsLength, activeRows, })
|
|
|
41331
41331
|
onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row);
|
|
41332
41332
|
}
|
|
41333
41333
|
}, children: flexRender(columnDef.cell, cell.getContext()) }, cell.id));
|
|
41334
|
-
}) }, row.id))), isLoading && (jsxRuntime.jsx("tr", { className: "tanstack-table__tbody__tr", children: jsxRuntime.
|
|
41335
|
-
'is-
|
|
41336
|
-
}), colSpan: columnsLength, children: jsxRuntime.jsx(CirclePulse, { "data-testid": "loading-indicator" }) }) }))] }));
|
|
41334
|
+
}) }, row.id))), isLoading && (jsxRuntime.jsx("tr", { className: "tanstack-table__tbody__tr", children: jsxRuntime.jsxs("td", { className: classNames('tanstack-table__centered-row', {
|
|
41335
|
+
'is-loading': isLoading,
|
|
41336
|
+
}), colSpan: columnsLength, children: [jsxRuntime.jsx("h2", { className: "mb-12", children: "Table is loading..." }), jsxRuntime.jsx(CirclePulse, { "data-testid": "loading-indicator" })] }) }))] }));
|
|
41337
41337
|
};
|
|
41338
41338
|
|
|
41339
41339
|
function TanstackTable(_a) {
|
|
@@ -41343,14 +41343,16 @@ function TanstackTable(_a) {
|
|
|
41343
41343
|
defaultColumns,
|
|
41344
41344
|
});
|
|
41345
41345
|
const thRefs = React.useRef({});
|
|
41346
|
-
//
|
|
41346
|
+
// Auto-compute column widths based on current table header cell widths for columns without a defined size.
|
|
41347
41347
|
React.useEffect(() => {
|
|
41348
|
-
|
|
41349
|
-
|
|
41348
|
+
setFormattedColumns(formattedColumns.map((column) => {
|
|
41349
|
+
var _a;
|
|
41350
|
+
if ((_a = column.meta) === null || _a === void 0 ? void 0 : _a.styles.definedColumnSize) {
|
|
41351
|
+
return column;
|
|
41352
|
+
}
|
|
41350
41353
|
const columnWidth = thRefs.current[column.id].offsetWidth;
|
|
41351
|
-
|
|
41352
|
-
});
|
|
41353
|
-
setFormattedColumns(updatedColumns);
|
|
41354
|
+
return Object.assign(Object.assign({}, column), { size: columnWidth });
|
|
41355
|
+
}));
|
|
41354
41356
|
}, [data, columns, windowWidth]);
|
|
41355
41357
|
const table = useReactTable(Object.assign(Object.assign({}, rest), { data: data !== null && data !== void 0 ? data : defaultData, columns: formattedColumns, state: {
|
|
41356
41358
|
rowSelection,
|
|
@@ -41377,7 +41379,7 @@ function TanstackTable(_a) {
|
|
|
41377
41379
|
}
|
|
41378
41380
|
return (jsxRuntime.jsx(TableBody, { table: table, onRowClick: onRowClick, isLoading: isLoading, columnsLength: columns.length, activeRows: activeRows }));
|
|
41379
41381
|
};
|
|
41380
|
-
return (jsxRuntime.jsxs("div", { className: "tanstack-table__outer-container", children: [jsxRuntime.jsxs("div", { className: "tanstack-table__container", children: [jsxRuntime.jsxs("table", { className:
|
|
41382
|
+
return (jsxRuntime.jsxs("div", { className: "tanstack-table__outer-container", children: [jsxRuntime.jsxs("div", { className: "tanstack-table__container", children: [jsxRuntime.jsxs("table", { className: classNames('tanstack-table', className, {
|
|
41381
41383
|
'is-Loading': isLoading,
|
|
41382
41384
|
}), children: [jsxRuntime.jsx("thead", { className: "tanstack-table__thead", children: jsxRuntime.jsx(TableHeader, { table: table, ref: thRefs }) }), jsxRuntime.jsx("tbody", { className: "tanstack-table__tbody", children: renderBody() })] }), hasSelectedRows && (jsxRuntime.jsx(ActionBar, { table: table, TableActions: TableActions, className: actionBarClassName }))] }), shouldRenderPagination ? (jsxRuntime.jsx(TablePagination, { currentPage: currentPage, rowCount: rowCount, onChangePage: onChangePage, rowsPerPage: rowsPerPage, totalEntriesText: totalEntriesText !== null && totalEntriesText !== void 0 ? totalEntriesText : `${totalRowsOnPage} of ${rowCount} entries` })) : null] }));
|
|
41383
41385
|
}
|
|
@@ -42880,7 +42882,7 @@ const computePosition = (reference, floating, options) => {
|
|
|
42880
42882
|
* @copyright ReactTooltip Team
|
|
42881
42883
|
* @license MIT
|
|
42882
42884
|
*/
|
|
42883
|
-
const h="react-tooltip-core-styles",w="react-tooltip-base-styles",b={core:!1,base:!1};function S({css:e,id:t=w,type:o="base",ref:l}){var r,n;if(!e||"undefined"==typeof document||b[o])return;if("core"===o&&"undefined"!=typeof process&&(null===(r=null===process||void 0===process?void 0:process.env)||void 0===r?void 0:r.REACT_TOOLTIP_DISABLE_CORE_STYLES))return;if("base"!==o&&"undefined"!=typeof process&&(null===(n=null===process||void 0===process?void 0:process.env)||void 0===n?void 0:n.REACT_TOOLTIP_DISABLE_BASE_STYLES))return;"core"===o&&(t=h),l||(l={});const{insertAt:i}=l;if(document.getElementById(t))return;const c=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.id=t,s.type="text/css","top"===i&&c.firstChild?c.insertBefore(s,c.firstChild):c.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e)),b[o]=!0;}const E=async({elementReference:e=null,tooltipReference:t=null,tooltipArrowReference:o=null,place:l="top",offset:r=10,strategy:n="absolute",middlewares:i=[offset(Number(r)),flip({fallbackAxisSideDirection:"start"}),shift({padding:5})],border:c})=>{if(!e)return {tooltipStyles:{},tooltipArrowStyles:{},place:l};if(null===t)return {tooltipStyles:{},tooltipArrowStyles:{},place:l};const s=i;return o?(s.push(arrow({element:o,padding:5})),computePosition(e,t,{placement:l,strategy:n,middleware:s}).then((({x:e,y:t,placement:o,middlewareData:l})=>{var r,n;const i={left:`${e}px`,top:`${t}px`,border:c},{x:s,y:a}=null!==(r=l.arrow)&&void 0!==r?r:{x:0,y:0},u=null!==(n={top:"bottom",right:"left",bottom:"top",left:"right"}[o.split("-")[0]])&&void 0!==n?n:"bottom",d=c&&{borderBottom:c,borderRight:c};let p=0;if(c){const e=`${c}`.match(/(\d+)px/);p=(null==e?void 0:e[1])?Number(e[1]):1;}return {tooltipStyles:i,tooltipArrowStyles:{left:null!=s?`${s}px`:"",top:null!=a?`${a}px`:"",right:"",bottom:"",...d,[u]:`-${4+p}px`},place:o}}))):computePosition(e,t,{placement:"bottom",strategy:n,middleware:s}).then((({x:e,y:t,placement:o})=>({tooltipStyles:{left:`${e}px`,top:`${t}px`},tooltipArrowStyles:{},place:o})))},A=(e,t)=>!("CSS"in window&&"supports"in window.CSS)||window.CSS.supports(e,t),_=(e,t,o)=>{let l=null;const r=function(...r){const n=()=>{l=null;};!l&&(e.apply(this,r),l=setTimeout(n,t));};return r.cancel=()=>{l&&(clearTimeout(l),l=null);},r},O=e=>null!==e&&!Array.isArray(e)&&"object"==typeof e,k=(e,t)=>{if(e===t)return !0;if(Array.isArray(e)&&Array.isArray(t))return e.length===t.length&&e.every(((e,o)=>k(e,t[o])));if(Array.isArray(e)!==Array.isArray(t))return !1;if(!O(e)||!O(t))return e===t;const o=Object.keys(e),l=Object.keys(t);return o.length===l.length&&o.every((o=>k(e[o],t[o])))},T=e=>{if(!(e instanceof HTMLElement||e instanceof SVGElement))return !1;const t=getComputedStyle(e);return ["overflow","overflow-x","overflow-y"].some((e=>{const o=t.getPropertyValue(e);return "auto"===o||"scroll"===o}))},L$1=e=>{if(!e)return null;let t=e.parentElement;for(;t;){if(T(t))return t;t=t.parentElement;}return document.scrollingElement||document.documentElement},C="undefined"!=typeof window?React.useLayoutEffect:React.useEffect,R=e=>{e.current&&(clearTimeout(e.current),e.current=null);},x="DEFAULT_TOOLTIP_ID",N$1={anchorRefs:new Set,activeAnchor:{current:null},attach:()=>{},detach:()=>{},setActiveAnchor:()=>{}},$$1=React.createContext({getTooltipData:()=>N$1});function j(e=x){return React.useContext($$1).getTooltipData(e)}var z$1={tooltip:"core-styles-module_tooltip__3vRRp",fixed:"core-styles-module_fixed__pcSol",arrow:"core-styles-module_arrow__cvMwQ",noArrow:"core-styles-module_noArrow__xock6",clickable:"core-styles-module_clickable__ZuTTB",show:"core-styles-module_show__Nt9eE",closing:"core-styles-module_closing__sGnxF"},D={tooltip:"styles-module_tooltip__mnnfp",arrow:"styles-module_arrow__K0L3T",dark:"styles-module_dark__xNqje",light:"styles-module_light__Z6W-X",success:"styles-module_success__A2AKt",warning:"styles-module_warning__SCK0X",error:"styles-module_error__JvumD",info:"styles-module_info__BWdHW"};const q=({forwardRef:t,id:l,className:i,classNameArrow:c,variant:u="dark",anchorId:d,anchorSelect:p,place:v="top",offset:m=10,events:h=["hover"],openOnClick:w=!1,positionStrategy:b="absolute",middlewares:S,wrapper:g,delayShow:A=0,delayHide:O=0,float:T=!1,hidden:x=!1,noArrow:N=!1,clickable:$=!1,closeOnEsc:I=!1,closeOnScroll:B=!1,closeOnResize:q=!1,openEvents:H,closeEvents:M,globalCloseEvents:W,imperativeModeOnly:P,style:V,position:F,afterShow:K,afterHide:U,disableTooltip:X,content:Y,contentWrapperRef:G,isOpen:Z,defaultIsOpen:J=!1,setIsOpen:Q,activeAnchor:ee,setActiveAnchor:te,border:oe,opacity:le,arrowColor:re,role:ne="tooltip"})=>{var ie;const ce=React.useRef(null),se=React.useRef(null),ae=React.useRef(null),ue=React.useRef(null),de=React.useRef(null),[pe,ve]=React.useState({tooltipStyles:{},tooltipArrowStyles:{},place:v}),[me,fe]=React.useState(!1),[ye,he]=React.useState(!1),[we,be]=React.useState(null),Se=React.useRef(!1),ge=React.useRef(null),{anchorRefs:Ee,setActiveAnchor:Ae}=j(l),_e=React.useRef(!1),[Oe,ke]=React.useState([]),Te=React.useRef(!1),Le=w||h.includes("click"),Ce=Le||(null==H?void 0:H.click)||(null==H?void 0:H.dblclick)||(null==H?void 0:H.mousedown),Re=H?{...H}:{mouseover:!0,focus:!0,mouseenter:!1,click:!1,dblclick:!1,mousedown:!1};!H&&Le&&Object.assign(Re,{mouseenter:!1,focus:!1,mouseover:!1,click:!0});const xe=M?{...M}:{mouseout:!0,blur:!0,mouseleave:!1,click:!1,dblclick:!1,mouseup:!1};!M&&Le&&Object.assign(xe,{mouseleave:!1,blur:!1,mouseout:!1});const Ne=W?{...W}:{escape:I||!1,scroll:B||!1,resize:q||!1,clickOutsideAnchor:Ce||!1};P&&(Object.assign(Re,{mouseenter:!1,focus:!1,click:!1,dblclick:!1,mousedown:!1}),Object.assign(xe,{mouseleave:!1,blur:!1,click:!1,dblclick:!1,mouseup:!1}),Object.assign(Ne,{escape:!1,scroll:!1,resize:!1,clickOutsideAnchor:!1})),C((()=>(Te.current=!0,()=>{Te.current=!1;})),[]);const $e=e=>{Te.current&&(e&&he(!0),setTimeout((()=>{Te.current&&(null==Q||Q(e),void 0===Z&&fe(e));}),10));};React.useEffect((()=>{if(void 0===Z)return ()=>null;Z&&he(!0);const e=setTimeout((()=>{fe(Z);}),10);return ()=>{clearTimeout(e);}}),[Z]),React.useEffect((()=>{if(me!==Se.current)if(R(de),Se.current=me,me)null==K||K();else {const e=(e=>{const t=e.match(/^([\d.]+)(ms|s)$/);if(!t)return 0;const[,o,l]=t;return Number(o)*("ms"===l?1:1e3)})(getComputedStyle(document.body).getPropertyValue("--rt-transition-show-delay"));de.current=setTimeout((()=>{he(!1),be(null),null==U||U();}),e+25);}}),[me]);const Ie=e=>{ve((t=>k(t,e)?t:e));},je=(e=A)=>{R(ae),ye?$e(!0):ae.current=setTimeout((()=>{$e(!0);}),e);},Be=(e=O)=>{R(ue),ue.current=setTimeout((()=>{_e.current||$e(!1);}),e);},ze=e=>{var t;if(!e)return;const o=null!==(t=e.currentTarget)&&void 0!==t?t:e.target;if(!(null==o?void 0:o.isConnected))return te(null),void Ae({current:null});A?je():$e(!0),te(o),Ae({current:o}),R(ue);},De=()=>{$?Be(O||100):O?Be():$e(!1),R(ae);},qe=({x:e,y:t})=>{var o;const l={getBoundingClientRect:()=>({x:e,y:t,width:0,height:0,top:t,left:e,right:e,bottom:t})};E({place:null!==(o=null==we?void 0:we.place)&&void 0!==o?o:v,offset:m,elementReference:l,tooltipReference:ce.current,tooltipArrowReference:se.current,strategy:b,middlewares:S,border:oe}).then((e=>{Ie(e);}));},He=e=>{if(!e)return;const t=e,o={x:t.clientX,y:t.clientY};qe(o),ge.current=o;},Me=e=>{var t;if(!me)return;const o=e.target;if(!o.isConnected)return;if(null===(t=ce.current)||void 0===t?void 0:t.contains(o))return;[document.querySelector(`[id='${d}']`),...Oe].some((e=>null==e?void 0:e.contains(o)))||($e(!1),R(ae));},We=_(ze,50),Pe=_(De,50),Ve=e=>{Pe.cancel(),We(e);},Fe=()=>{We.cancel(),Pe();},Ke=React.useCallback((()=>{var e,t;const o=null!==(e=null==we?void 0:we.position)&&void 0!==e?e:F;o?qe(o):T?ge.current&&qe(ge.current):(null==ee?void 0:ee.isConnected)&&E({place:null!==(t=null==we?void 0:we.place)&&void 0!==t?t:v,offset:m,elementReference:ee,tooltipReference:ce.current,tooltipArrowReference:se.current,strategy:b,middlewares:S,border:oe}).then((e=>{Te.current&&Ie(e);}));}),[me,ee,Y,V,v,null==we?void 0:we.place,m,b,F,null==we?void 0:we.position,T]);React.useEffect((()=>{var e,t;const o=new Set(Ee);Oe.forEach((e=>{(null==X?void 0:X(e))||o.add({current:e});}));const l=document.querySelector(`[id='${d}']`);l&&!(null==X?void 0:X(l))&&o.add({current:l});const r=()=>{$e(!1);},n=L$1(ee),i=L$1(ce.current);Ne.scroll&&(window.addEventListener("scroll",r),null==n||n.addEventListener("scroll",r),null==i||i.addEventListener("scroll",r));let c=null;Ne.resize?window.addEventListener("resize",r):ee&&ce.current&&(c=autoUpdate(ee,ce.current,Ke,{ancestorResize:!0,elementResize:!0,layoutShift:!0}));const s=e=>{"Escape"===e.key&&$e(!1);};Ne.escape&&window.addEventListener("keydown",s),Ne.clickOutsideAnchor&&window.addEventListener("click",Me);const a=[],u=e=>{me&&(null==e?void 0:e.target)===ee||ze(e);},p=e=>{me&&(null==e?void 0:e.target)===ee&&De();},v=["mouseover","mouseout","mouseenter","mouseleave","focus","blur"],m=["click","dblclick","mousedown","mouseup"];Object.entries(Re).forEach((([e,t])=>{t&&(v.includes(e)?a.push({event:e,listener:Ve}):m.includes(e)&&a.push({event:e,listener:u}));})),Object.entries(xe).forEach((([e,t])=>{t&&(v.includes(e)?a.push({event:e,listener:Fe}):m.includes(e)&&a.push({event:e,listener:p}));})),T&&a.push({event:"pointermove",listener:He});const y=()=>{_e.current=!0;},h=()=>{_e.current=!1,De();};return $&&!Ce&&(null===(e=ce.current)||void 0===e||e.addEventListener("mouseenter",y),null===(t=ce.current)||void 0===t||t.addEventListener("mouseleave",h)),a.forEach((({event:e,listener:t})=>{o.forEach((o=>{var l;null===(l=o.current)||void 0===l||l.addEventListener(e,t);}));})),()=>{var e,t;Ne.scroll&&(window.removeEventListener("scroll",r),null==n||n.removeEventListener("scroll",r),null==i||i.removeEventListener("scroll",r)),Ne.resize?window.removeEventListener("resize",r):null==c||c(),Ne.clickOutsideAnchor&&window.removeEventListener("click",Me),Ne.escape&&window.removeEventListener("keydown",s),$&&!Ce&&(null===(e=ce.current)||void 0===e||e.removeEventListener("mouseenter",y),null===(t=ce.current)||void 0===t||t.removeEventListener("mouseleave",h)),a.forEach((({event:e,listener:t})=>{o.forEach((o=>{var l;null===(l=o.current)||void 0===l||l.removeEventListener(e,t);}));}));}}),[ee,Ke,ye,Ee,Oe,H,M,W,Le,A,O]),React.useEffect((()=>{var e,t;let o=null!==(t=null!==(e=null==we?void 0:we.anchorSelect)&&void 0!==e?e:p)&&void 0!==t?t:"";!o&&l&&(o=`[data-tooltip-id='${l.replace(/'/g,"\\'")}']`);const r=new MutationObserver((e=>{const t=[],r=[];e.forEach((e=>{if("attributes"===e.type&&"data-tooltip-id"===e.attributeName){e.target.getAttribute("data-tooltip-id")===l?t.push(e.target):e.oldValue===l&&r.push(e.target);}if("childList"===e.type){if(ee){const t=[...e.removedNodes].filter((e=>1===e.nodeType));if(o)try{r.push(...t.filter((e=>e.matches(o)))),r.push(...t.flatMap((e=>[...e.querySelectorAll(o)])));}catch(e){}t.some((e=>{var t;return !!(null===(t=null==e?void 0:e.contains)||void 0===t?void 0:t.call(e,ee))&&(he(!1),$e(!1),te(null),R(ae),R(ue),!0)}));}if(o)try{const l=[...e.addedNodes].filter((e=>1===e.nodeType));t.push(...l.filter((e=>e.matches(o)))),t.push(...l.flatMap((e=>[...e.querySelectorAll(o)])));}catch(e){}}})),(t.length||r.length)&&ke((e=>[...e.filter((e=>!r.includes(e))),...t]));}));return r.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["data-tooltip-id"],attributeOldValue:!0}),()=>{r.disconnect();}}),[l,p,null==we?void 0:we.anchorSelect,ee]),React.useEffect((()=>{Ke();}),[Ke]),React.useEffect((()=>{if(!(null==G?void 0:G.current))return ()=>null;const e=new ResizeObserver((()=>{setTimeout((()=>Ke()));}));return e.observe(G.current),()=>{e.disconnect();}}),[Y,null==G?void 0:G.current]),React.useEffect((()=>{var e;const t=document.querySelector(`[id='${d}']`),o=[...Oe,t];ee&&o.includes(ee)||te(null!==(e=Oe[0])&&void 0!==e?e:t);}),[d,Oe,ee]),React.useEffect((()=>(J&&$e(!0),()=>{R(ae),R(ue);})),[]),React.useEffect((()=>{var e;let t=null!==(e=null==we?void 0:we.anchorSelect)&&void 0!==e?e:p;if(!t&&l&&(t=`[data-tooltip-id='${l.replace(/'/g,"\\'")}']`),t)try{const e=Array.from(document.querySelectorAll(t));ke(e);}catch(e){ke([]);}}),[l,p,null==we?void 0:we.anchorSelect]),React.useEffect((()=>{ae.current&&(R(ae),je(A));}),[A]);const Ue=null!==(ie=null==we?void 0:we.content)&&void 0!==ie?ie:Y,Xe=me&&Object.keys(pe.tooltipStyles).length>0;return React.useImperativeHandle(t,(()=>({open:e=>{if(null==e?void 0:e.anchorSelect)try{document.querySelector(e.anchorSelect);}catch(t){return void console.warn(`[react-tooltip] "${e.anchorSelect}" is not a valid CSS selector`)}be(null!=e?e:null),(null==e?void 0:e.delay)?je(e.delay):$e(!0);},close:e=>{(null==e?void 0:e.delay)?Be(e.delay):$e(!1);},activeAnchor:ee,place:pe.place,isOpen:Boolean(ye&&!x&&Ue&&Xe)}))),ye&&!x&&Ue?React__namespace.default.createElement(g,{id:l,role:ne,className:y$2("react-tooltip",z$1.tooltip,D.tooltip,D[u],i,`react-tooltip__place-${pe.place}`,z$1[Xe?"show":"closing"],Xe?"react-tooltip__show":"react-tooltip__closing","fixed"===b&&z$1.fixed,$&&z$1.clickable),onTransitionEnd:e=>{R(de),me||"opacity"!==e.propertyName||(he(!1),be(null),null==U||U());},style:{...V,...pe.tooltipStyles,opacity:void 0!==le&&Xe?le:void 0},ref:ce},Ue,React__namespace.default.createElement(g,{className:y$2("react-tooltip-arrow",z$1.arrow,D.arrow,c,N&&z$1.noArrow),style:{...pe.tooltipArrowStyles,background:re?`linear-gradient(to right bottom, transparent 50%, ${re} 50%)`:void 0},ref:se})):null},H=({content:t})=>React__namespace.default.createElement("span",{dangerouslySetInnerHTML:{__html:t}}),M=React__namespace.default.forwardRef((({id:t,anchorId:l,anchorSelect:n,content:i,html:c,render:a,className:u,classNameArrow:d,variant:p="dark",place:v="top",offset:m=10,wrapper:f="div",children:h=null,events:w=["hover"],openOnClick:b=!1,positionStrategy:S="absolute",middlewares:g,delayShow:E=0,delayHide:_=0,float:O=!1,hidden:k=!1,noArrow:T=!1,clickable:L=!1,closeOnEsc:C=!1,closeOnScroll:R=!1,closeOnResize:x=!1,openEvents:N,closeEvents:$,globalCloseEvents:I,imperativeModeOnly:B=!1,style:z,position:D,isOpen:M,defaultIsOpen:W=!1,disableStyleInjection:P=!1,border:V,opacity:F,arrowColor:K,setIsOpen:U,afterShow:X,afterHide:Y,disableTooltip:G,role:Z="tooltip"},J)=>{const[Q,ee]=React.useState(i),[te,oe]=React.useState(c),[le,re]=React.useState(v),[ne,ie]=React.useState(p),[ce,se]=React.useState(m),[ae,ue]=React.useState(E),[de,pe]=React.useState(_),[ve,me]=React.useState(O),[fe,ye]=React.useState(k),[he,we]=React.useState(f),[be,Se]=React.useState(w),[ge,Ee]=React.useState(S),[Ae,_e]=React.useState(null),[Oe,ke]=React.useState(null),Te=React.useRef(P),{anchorRefs:Le,activeAnchor:Ce}=j(t),Re=e=>null==e?void 0:e.getAttributeNames().reduce(((t,o)=>{var l;if(o.startsWith("data-tooltip-")){t[o.replace(/^data-tooltip-/,"")]=null!==(l=null==e?void 0:e.getAttribute(o))&&void 0!==l?l:null;}return t}),{}),xe=e=>{const t={place:e=>{var t;re(null!==(t=e)&&void 0!==t?t:v);},content:e=>{ee(null!=e?e:i);},html:e=>{oe(null!=e?e:c);},variant:e=>{var t;ie(null!==(t=e)&&void 0!==t?t:p);},offset:e=>{se(null===e?m:Number(e));},wrapper:e=>{var t;we(null!==(t=e)&&void 0!==t?t:f);},events:e=>{const t=null==e?void 0:e.split(" ");Se(null!=t?t:w);},"position-strategy":e=>{var t;Ee(null!==(t=e)&&void 0!==t?t:S);},"delay-show":e=>{ue(null===e?E:Number(e));},"delay-hide":e=>{pe(null===e?_:Number(e));},float:e=>{me(null===e?O:"true"===e);},hidden:e=>{ye(null===e?k:"true"===e);},"class-name":e=>{_e(e);}};Object.values(t).forEach((e=>e(null))),Object.entries(e).forEach((([e,o])=>{var l;null===(l=t[e])||void 0===l||l.call(t,o);}));};React.useEffect((()=>{ee(i);}),[i]),React.useEffect((()=>{oe(c);}),[c]),React.useEffect((()=>{re(v);}),[v]),React.useEffect((()=>{ie(p);}),[p]),React.useEffect((()=>{se(m);}),[m]),React.useEffect((()=>{ue(E);}),[E]),React.useEffect((()=>{pe(_);}),[_]),React.useEffect((()=>{me(O);}),[O]),React.useEffect((()=>{ye(k);}),[k]),React.useEffect((()=>{Ee(S);}),[S]),React.useEffect((()=>{Te.current!==P&&console.warn("[react-tooltip] Do not change `disableStyleInjection` dynamically.");}),[P]),React.useEffect((()=>{"undefined"!=typeof window&&window.dispatchEvent(new CustomEvent("react-tooltip-inject-styles",{detail:{disableCore:"core"===P,disableBase:P}}));}),[]),React.useEffect((()=>{var e;const o=new Set(Le);let r=n;if(!r&&t&&(r=`[data-tooltip-id='${t.replace(/'/g,"\\'")}']`),r)try{document.querySelectorAll(r).forEach((e=>{o.add({current:e});}));}catch(e){console.warn(`[react-tooltip] "${r}" is not a valid CSS selector`);}const i=document.querySelector(`[id='${l}']`);if(i&&o.add({current:i}),!o.size)return ()=>null;const c=null!==(e=null!=Oe?Oe:i)&&void 0!==e?e:Ce.current,s=new MutationObserver((e=>{e.forEach((e=>{var t;if(!c||"attributes"!==e.type||!(null===(t=e.attributeName)||void 0===t?void 0:t.startsWith("data-tooltip-")))return;const o=Re(c);xe(o);}));})),a={attributes:!0,childList:!1,subtree:!1};if(c){const e=Re(c);xe(e),s.observe(c,a);}return ()=>{s.disconnect();}}),[Le,Ce,Oe,l,n]),React.useEffect((()=>{(null==z?void 0:z.border)&&console.warn("[react-tooltip] Do not set `style.border`. Use `border` prop instead."),V&&!A("border",`${V}`)&&console.warn(`[react-tooltip] "${V}" is not a valid \`border\`.`),(null==z?void 0:z.opacity)&&console.warn("[react-tooltip] Do not set `style.opacity`. Use `opacity` prop instead."),F&&!A("opacity",`${F}`)&&console.warn(`[react-tooltip] "${F}" is not a valid \`opacity\`.`);}),[]);let Ne=h;const $e=React.useRef(null);if(a){const t=a({content:(null==Oe?void 0:Oe.getAttribute("data-tooltip-content"))||Q||null,activeAnchor:Oe});Ne=t?React__namespace.default.createElement("div",{ref:$e,className:"react-tooltip-content-wrapper"},t):null;}else Q&&(Ne=Q);te&&(Ne=React__namespace.default.createElement(H,{content:te}));const Ie={forwardRef:J,id:t,anchorId:l,anchorSelect:n,className:y$2(u,Ae),classNameArrow:d,content:Ne,contentWrapperRef:$e,place:le,variant:ne,offset:ce,wrapper:he,events:be,openOnClick:b,positionStrategy:ge,middlewares:g,delayShow:ae,delayHide:de,float:ve,hidden:fe,noArrow:T,clickable:L,closeOnEsc:C,closeOnScroll:R,closeOnResize:x,openEvents:N,closeEvents:$,globalCloseEvents:I,imperativeModeOnly:B,style:z,position:D,isOpen:M,defaultIsOpen:W,border:V,opacity:F,arrowColor:K,setIsOpen:U,afterShow:X,afterHide:Y,disableTooltip:G,activeAnchor:Oe,setActiveAnchor:e=>ke(e),role:Z};return React__namespace.default.createElement(q,{...Ie})}));"undefined"!=typeof window&&window.addEventListener("react-tooltip-inject-styles",(e=>{e.detail.disableCore||S({css:`:root{--rt-color-white:#fff;--rt-color-dark:#222;--rt-color-success:#8dc572;--rt-color-error:#be6464;--rt-color-warning:#f0ad4e;--rt-color-info:#337ab7;--rt-opacity:0.9;--rt-transition-show-delay:0.15s;--rt-transition-closing-delay:0.15s}.core-styles-module_tooltip__3vRRp{position:absolute;top:0;left:0;pointer-events:none;opacity:0;will-change:opacity}.core-styles-module_fixed__pcSol{position:fixed}.core-styles-module_arrow__cvMwQ{position:absolute;background:inherit}.core-styles-module_noArrow__xock6{display:none}.core-styles-module_clickable__ZuTTB{pointer-events:auto}.core-styles-module_show__Nt9eE{opacity:var(--rt-opacity);transition:opacity var(--rt-transition-show-delay)ease-out}.core-styles-module_closing__sGnxF{opacity:0;transition:opacity var(--rt-transition-closing-delay)ease-in}`,type:"core"}),e.detail.disableBase||S({css:`
|
|
42885
|
+
const h="react-tooltip-core-styles",w="react-tooltip-base-styles",b={core:!1,base:!1};function S({css:e,id:t=w,type:o="base",ref:l}){var r,n;if(!e||"undefined"==typeof document||b[o])return;if("core"===o&&"undefined"!=typeof process&&(null===(r=null===process||void 0===process?void 0:process.env)||void 0===r?void 0:r.REACT_TOOLTIP_DISABLE_CORE_STYLES))return;if("base"!==o&&"undefined"!=typeof process&&(null===(n=null===process||void 0===process?void 0:process.env)||void 0===n?void 0:n.REACT_TOOLTIP_DISABLE_BASE_STYLES))return;"core"===o&&(t=h),l||(l={});const{insertAt:i}=l;if(document.getElementById(t))return;const c=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.id=t,s.type="text/css","top"===i&&c.firstChild?c.insertBefore(s,c.firstChild):c.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e)),b[o]=!0;}const E=async({elementReference:e=null,tooltipReference:t=null,tooltipArrowReference:o=null,place:l="top",offset:r=10,strategy:n="absolute",middlewares:i=[offset(Number(r)),flip({fallbackAxisSideDirection:"start"}),shift({padding:5})],border:c})=>{if(!e)return {tooltipStyles:{},tooltipArrowStyles:{},place:l};if(null===t)return {tooltipStyles:{},tooltipArrowStyles:{},place:l};const s=i;return o?(s.push(arrow({element:o,padding:5})),computePosition(e,t,{placement:l,strategy:n,middleware:s}).then((({x:e,y:t,placement:o,middlewareData:l})=>{var r,n;const i={left:`${e}px`,top:`${t}px`,border:c},{x:s,y:a}=null!==(r=l.arrow)&&void 0!==r?r:{x:0,y:0},u=null!==(n={top:"bottom",right:"left",bottom:"top",left:"right"}[o.split("-")[0]])&&void 0!==n?n:"bottom",d=c&&{borderBottom:c,borderRight:c};let p=0;if(c){const e=`${c}`.match(/(\d+)px/);p=(null==e?void 0:e[1])?Number(e[1]):1;}return {tooltipStyles:i,tooltipArrowStyles:{left:null!=s?`${s}px`:"",top:null!=a?`${a}px`:"",right:"",bottom:"",...d,[u]:`-${4+p}px`},place:o}}))):computePosition(e,t,{placement:"bottom",strategy:n,middleware:s}).then((({x:e,y:t,placement:o})=>({tooltipStyles:{left:`${e}px`,top:`${t}px`},tooltipArrowStyles:{},place:o})))},A=(e,t)=>!("CSS"in window&&"supports"in window.CSS)||window.CSS.supports(e,t),_=(e,t,o)=>{let l=null;const r=function(...r){const n=()=>{l=null;};!l&&(e.apply(this,r),l=setTimeout(n,t));};return r.cancel=()=>{l&&(clearTimeout(l),l=null);},r},O=e=>null!==e&&!Array.isArray(e)&&"object"==typeof e,k=(e,t)=>{if(e===t)return !0;if(Array.isArray(e)&&Array.isArray(t))return e.length===t.length&&e.every(((e,o)=>k(e,t[o])));if(Array.isArray(e)!==Array.isArray(t))return !1;if(!O(e)||!O(t))return e===t;const o=Object.keys(e),l=Object.keys(t);return o.length===l.length&&o.every((o=>k(e[o],t[o])))},T=e=>{if(!(e instanceof HTMLElement||e instanceof SVGElement))return !1;const t=getComputedStyle(e);return ["overflow","overflow-x","overflow-y"].some((e=>{const o=t.getPropertyValue(e);return "auto"===o||"scroll"===o}))},L$1=e=>{if(!e)return null;let t=e.parentElement;for(;t;){if(T(t))return t;t=t.parentElement;}return document.scrollingElement||document.documentElement},C="undefined"!=typeof window?React.useLayoutEffect:React.useEffect,R=e=>{e.current&&(clearTimeout(e.current),e.current=null);},x="DEFAULT_TOOLTIP_ID",N$1={anchorRefs:new Set,activeAnchor:{current:null},attach:()=>{},detach:()=>{},setActiveAnchor:()=>{}},$$1=React.createContext({getTooltipData:()=>N$1});function j(e=x){return React.useContext($$1).getTooltipData(e)}var z$1={tooltip:"core-styles-module_tooltip__3vRRp",fixed:"core-styles-module_fixed__pcSol",arrow:"core-styles-module_arrow__cvMwQ",noArrow:"core-styles-module_noArrow__xock6",clickable:"core-styles-module_clickable__ZuTTB",show:"core-styles-module_show__Nt9eE",closing:"core-styles-module_closing__sGnxF"},D={tooltip:"styles-module_tooltip__mnnfp",arrow:"styles-module_arrow__K0L3T",dark:"styles-module_dark__xNqje",light:"styles-module_light__Z6W-X",success:"styles-module_success__A2AKt",warning:"styles-module_warning__SCK0X",error:"styles-module_error__JvumD",info:"styles-module_info__BWdHW"};const q=({forwardRef:t,id:l,className:i,classNameArrow:c,variant:u="dark",anchorId:d,anchorSelect:p,place:v="top",offset:m=10,events:h=["hover"],openOnClick:w=!1,positionStrategy:b="absolute",middlewares:S,wrapper:g,delayShow:A=0,delayHide:O=0,float:T=!1,hidden:x=!1,noArrow:N=!1,clickable:$=!1,closeOnEsc:I=!1,closeOnScroll:B=!1,closeOnResize:q=!1,openEvents:H,closeEvents:M,globalCloseEvents:W,imperativeModeOnly:P,style:V,position:F,afterShow:K,afterHide:U,disableTooltip:X,content:Y,contentWrapperRef:G,isOpen:Z,defaultIsOpen:J=!1,setIsOpen:Q,activeAnchor:ee,setActiveAnchor:te,border:oe,opacity:le,arrowColor:re,role:ne="tooltip"})=>{var ie;const ce=React.useRef(null),se=React.useRef(null),ae=React.useRef(null),ue=React.useRef(null),de=React.useRef(null),[pe,ve]=React.useState({tooltipStyles:{},tooltipArrowStyles:{},place:v}),[me,fe]=React.useState(!1),[ye,he]=React.useState(!1),[we,be]=React.useState(null),Se=React.useRef(!1),ge=React.useRef(null),{anchorRefs:Ee,setActiveAnchor:Ae}=j(l),_e=React.useRef(!1),[Oe,ke]=React.useState([]),Te=React.useRef(!1),Le=w||h.includes("click"),Ce=Le||(null==H?void 0:H.click)||(null==H?void 0:H.dblclick)||(null==H?void 0:H.mousedown),Re=H?{...H}:{mouseover:!0,focus:!0,mouseenter:!1,click:!1,dblclick:!1,mousedown:!1};!H&&Le&&Object.assign(Re,{mouseenter:!1,focus:!1,mouseover:!1,click:!0});const xe=M?{...M}:{mouseout:!0,blur:!0,mouseleave:!1,click:!1,dblclick:!1,mouseup:!1};!M&&Le&&Object.assign(xe,{mouseleave:!1,blur:!1,mouseout:!1});const Ne=W?{...W}:{escape:I||!1,scroll:B||!1,resize:q||!1,clickOutsideAnchor:Ce||!1};P&&(Object.assign(Re,{mouseenter:!1,focus:!1,click:!1,dblclick:!1,mousedown:!1}),Object.assign(xe,{mouseleave:!1,blur:!1,click:!1,dblclick:!1,mouseup:!1}),Object.assign(Ne,{escape:!1,scroll:!1,resize:!1,clickOutsideAnchor:!1})),C((()=>(Te.current=!0,()=>{Te.current=!1;})),[]);const $e=e=>{Te.current&&(e&&he(!0),setTimeout((()=>{Te.current&&(null==Q||Q(e),void 0===Z&&fe(e));}),10));};React.useEffect((()=>{if(void 0===Z)return ()=>null;Z&&he(!0);const e=setTimeout((()=>{fe(Z);}),10);return ()=>{clearTimeout(e);}}),[Z]),React.useEffect((()=>{if(me!==Se.current)if(R(de),Se.current=me,me)null==K||K();else {const e=(e=>{const t=e.match(/^([\d.]+)(ms|s)$/);if(!t)return 0;const[,o,l]=t;return Number(o)*("ms"===l?1:1e3)})(getComputedStyle(document.body).getPropertyValue("--rt-transition-show-delay"));de.current=setTimeout((()=>{he(!1),be(null),null==U||U();}),e+25);}}),[me]);const Ie=e=>{ve((t=>k(t,e)?t:e));},je=(e=A)=>{R(ae),ye?$e(!0):ae.current=setTimeout((()=>{$e(!0);}),e);},Be=(e=O)=>{R(ue),ue.current=setTimeout((()=>{_e.current||$e(!1);}),e);},ze=e=>{var t;if(!e)return;const o=null!==(t=e.currentTarget)&&void 0!==t?t:e.target;if(!(null==o?void 0:o.isConnected))return te(null),void Ae({current:null});A?je():$e(!0),te(o),Ae({current:o}),R(ue);},De=()=>{$?Be(O||100):O?Be():$e(!1),R(ae);},qe=({x:e,y:t})=>{var o;const l={getBoundingClientRect:()=>({x:e,y:t,width:0,height:0,top:t,left:e,right:e,bottom:t})};E({place:null!==(o=null==we?void 0:we.place)&&void 0!==o?o:v,offset:m,elementReference:l,tooltipReference:ce.current,tooltipArrowReference:se.current,strategy:b,middlewares:S,border:oe}).then((e=>{Ie(e);}));},He=e=>{if(!e)return;const t=e,o={x:t.clientX,y:t.clientY};qe(o),ge.current=o;},Me=e=>{var t;if(!me)return;const o=e.target;if(!o.isConnected)return;if(null===(t=ce.current)||void 0===t?void 0:t.contains(o))return;[document.querySelector(`[id='${d}']`),...Oe].some((e=>null==e?void 0:e.contains(o)))||($e(!1),R(ae));},We=_(ze,50),Pe=_(De,50),Ve=e=>{Pe.cancel(),We(e);},Fe=()=>{We.cancel(),Pe();},Ke=React.useCallback((()=>{var e,t;const o=null!==(e=null==we?void 0:we.position)&&void 0!==e?e:F;o?qe(o):T?ge.current&&qe(ge.current):(null==ee?void 0:ee.isConnected)&&E({place:null!==(t=null==we?void 0:we.place)&&void 0!==t?t:v,offset:m,elementReference:ee,tooltipReference:ce.current,tooltipArrowReference:se.current,strategy:b,middlewares:S,border:oe}).then((e=>{Te.current&&Ie(e);}));}),[me,ee,Y,V,v,null==we?void 0:we.place,m,b,F,null==we?void 0:we.position,T]);React.useEffect((()=>{var e,t;const o=new Set(Ee);Oe.forEach((e=>{(null==X?void 0:X(e))||o.add({current:e});}));const l=document.querySelector(`[id='${d}']`);l&&!(null==X?void 0:X(l))&&o.add({current:l});const r=()=>{$e(!1);},n=L$1(ee),i=L$1(ce.current);Ne.scroll&&(window.addEventListener("scroll",r),null==n||n.addEventListener("scroll",r),null==i||i.addEventListener("scroll",r));let c=null;Ne.resize?window.addEventListener("resize",r):ee&&ce.current&&(c=autoUpdate(ee,ce.current,Ke,{ancestorResize:!0,elementResize:!0,layoutShift:!0}));const s=e=>{"Escape"===e.key&&$e(!1);};Ne.escape&&window.addEventListener("keydown",s),Ne.clickOutsideAnchor&&window.addEventListener("click",Me);const a=[],u=e=>{me&&(null==e?void 0:e.target)===ee||ze(e);},p=e=>{me&&(null==e?void 0:e.target)===ee&&De();},v=["mouseover","mouseout","mouseenter","mouseleave","focus","blur"],m=["click","dblclick","mousedown","mouseup"];Object.entries(Re).forEach((([e,t])=>{t&&(v.includes(e)?a.push({event:e,listener:Ve}):m.includes(e)&&a.push({event:e,listener:u}));})),Object.entries(xe).forEach((([e,t])=>{t&&(v.includes(e)?a.push({event:e,listener:Fe}):m.includes(e)&&a.push({event:e,listener:p}));})),T&&a.push({event:"pointermove",listener:He});const y=()=>{_e.current=!0;},h=()=>{_e.current=!1,De();};return $&&!Ce&&(null===(e=ce.current)||void 0===e||e.addEventListener("mouseenter",y),null===(t=ce.current)||void 0===t||t.addEventListener("mouseleave",h)),a.forEach((({event:e,listener:t})=>{o.forEach((o=>{var l;null===(l=o.current)||void 0===l||l.addEventListener(e,t);}));})),()=>{var e,t;Ne.scroll&&(window.removeEventListener("scroll",r),null==n||n.removeEventListener("scroll",r),null==i||i.removeEventListener("scroll",r)),Ne.resize?window.removeEventListener("resize",r):null==c||c(),Ne.clickOutsideAnchor&&window.removeEventListener("click",Me),Ne.escape&&window.removeEventListener("keydown",s),$&&!Ce&&(null===(e=ce.current)||void 0===e||e.removeEventListener("mouseenter",y),null===(t=ce.current)||void 0===t||t.removeEventListener("mouseleave",h)),a.forEach((({event:e,listener:t})=>{o.forEach((o=>{var l;null===(l=o.current)||void 0===l||l.removeEventListener(e,t);}));}));}}),[ee,Ke,ye,Ee,Oe,H,M,W,Le,A,O]),React.useEffect((()=>{var e,t;let o=null!==(t=null!==(e=null==we?void 0:we.anchorSelect)&&void 0!==e?e:p)&&void 0!==t?t:"";!o&&l&&(o=`[data-tooltip-id='${l.replace(/'/g,"\\'")}']`);const r=new MutationObserver((e=>{const t=[],r=[];e.forEach((e=>{if("attributes"===e.type&&"data-tooltip-id"===e.attributeName){e.target.getAttribute("data-tooltip-id")===l?t.push(e.target):e.oldValue===l&&r.push(e.target);}if("childList"===e.type){if(ee){const t=[...e.removedNodes].filter((e=>1===e.nodeType));if(o)try{r.push(...t.filter((e=>e.matches(o)))),r.push(...t.flatMap((e=>[...e.querySelectorAll(o)])));}catch(e){}t.some((e=>{var t;return !!(null===(t=null==e?void 0:e.contains)||void 0===t?void 0:t.call(e,ee))&&(he(!1),$e(!1),te(null),R(ae),R(ue),!0)}));}if(o)try{const l=[...e.addedNodes].filter((e=>1===e.nodeType));t.push(...l.filter((e=>e.matches(o)))),t.push(...l.flatMap((e=>[...e.querySelectorAll(o)])));}catch(e){}}})),(t.length||r.length)&&ke((e=>[...e.filter((e=>!r.includes(e))),...t]));}));return r.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["data-tooltip-id"],attributeOldValue:!0}),()=>{r.disconnect();}}),[l,p,null==we?void 0:we.anchorSelect,ee]),React.useEffect((()=>{Ke();}),[Ke]),React.useEffect((()=>{if(!(null==G?void 0:G.current))return ()=>null;const e=new ResizeObserver((()=>{setTimeout((()=>Ke()));}));return e.observe(G.current),()=>{e.disconnect();}}),[Y,null==G?void 0:G.current]),React.useEffect((()=>{var e;const t=document.querySelector(`[id='${d}']`),o=[...Oe,t];ee&&o.includes(ee)||te(null!==(e=Oe[0])&&void 0!==e?e:t);}),[d,Oe,ee]),React.useEffect((()=>(J&&$e(!0),()=>{R(ae),R(ue);})),[]),React.useEffect((()=>{var e;let t=null!==(e=null==we?void 0:we.anchorSelect)&&void 0!==e?e:p;if(!t&&l&&(t=`[data-tooltip-id='${l.replace(/'/g,"\\'")}']`),t)try{const e=Array.from(document.querySelectorAll(t));ke(e);}catch(e){ke([]);}}),[l,p,null==we?void 0:we.anchorSelect]),React.useEffect((()=>{ae.current&&(R(ae),je(A));}),[A]);const Ue=null!==(ie=null==we?void 0:we.content)&&void 0!==ie?ie:Y,Xe=me&&Object.keys(pe.tooltipStyles).length>0;return React.useImperativeHandle(t,(()=>({open:e=>{if(null==e?void 0:e.anchorSelect)try{document.querySelector(e.anchorSelect);}catch(t){return void console.warn(`[react-tooltip] "${e.anchorSelect}" is not a valid CSS selector`)}be(null!=e?e:null),(null==e?void 0:e.delay)?je(e.delay):$e(!0);},close:e=>{(null==e?void 0:e.delay)?Be(e.delay):$e(!1);},activeAnchor:ee,place:pe.place,isOpen:Boolean(ye&&!x&&Ue&&Xe)}))),ye&&!x&&Ue?React__namespace.default.createElement(g,{id:l,role:ne,className:classNames("react-tooltip",z$1.tooltip,D.tooltip,D[u],i,`react-tooltip__place-${pe.place}`,z$1[Xe?"show":"closing"],Xe?"react-tooltip__show":"react-tooltip__closing","fixed"===b&&z$1.fixed,$&&z$1.clickable),onTransitionEnd:e=>{R(de),me||"opacity"!==e.propertyName||(he(!1),be(null),null==U||U());},style:{...V,...pe.tooltipStyles,opacity:void 0!==le&&Xe?le:void 0},ref:ce},Ue,React__namespace.default.createElement(g,{className:classNames("react-tooltip-arrow",z$1.arrow,D.arrow,c,N&&z$1.noArrow),style:{...pe.tooltipArrowStyles,background:re?`linear-gradient(to right bottom, transparent 50%, ${re} 50%)`:void 0},ref:se})):null},H=({content:t})=>React__namespace.default.createElement("span",{dangerouslySetInnerHTML:{__html:t}}),M=React__namespace.default.forwardRef((({id:t,anchorId:l,anchorSelect:n,content:i,html:c,render:a,className:u,classNameArrow:d,variant:p="dark",place:v="top",offset:m=10,wrapper:f="div",children:h=null,events:w=["hover"],openOnClick:b=!1,positionStrategy:S="absolute",middlewares:g,delayShow:E=0,delayHide:_=0,float:O=!1,hidden:k=!1,noArrow:T=!1,clickable:L=!1,closeOnEsc:C=!1,closeOnScroll:R=!1,closeOnResize:x=!1,openEvents:N,closeEvents:$,globalCloseEvents:I,imperativeModeOnly:B=!1,style:z,position:D,isOpen:M,defaultIsOpen:W=!1,disableStyleInjection:P=!1,border:V,opacity:F,arrowColor:K,setIsOpen:U,afterShow:X,afterHide:Y,disableTooltip:G,role:Z="tooltip"},J)=>{const[Q,ee]=React.useState(i),[te,oe]=React.useState(c),[le,re]=React.useState(v),[ne,ie]=React.useState(p),[ce,se]=React.useState(m),[ae,ue]=React.useState(E),[de,pe]=React.useState(_),[ve,me]=React.useState(O),[fe,ye]=React.useState(k),[he,we]=React.useState(f),[be,Se]=React.useState(w),[ge,Ee]=React.useState(S),[Ae,_e]=React.useState(null),[Oe,ke]=React.useState(null),Te=React.useRef(P),{anchorRefs:Le,activeAnchor:Ce}=j(t),Re=e=>null==e?void 0:e.getAttributeNames().reduce(((t,o)=>{var l;if(o.startsWith("data-tooltip-")){t[o.replace(/^data-tooltip-/,"")]=null!==(l=null==e?void 0:e.getAttribute(o))&&void 0!==l?l:null;}return t}),{}),xe=e=>{const t={place:e=>{var t;re(null!==(t=e)&&void 0!==t?t:v);},content:e=>{ee(null!=e?e:i);},html:e=>{oe(null!=e?e:c);},variant:e=>{var t;ie(null!==(t=e)&&void 0!==t?t:p);},offset:e=>{se(null===e?m:Number(e));},wrapper:e=>{var t;we(null!==(t=e)&&void 0!==t?t:f);},events:e=>{const t=null==e?void 0:e.split(" ");Se(null!=t?t:w);},"position-strategy":e=>{var t;Ee(null!==(t=e)&&void 0!==t?t:S);},"delay-show":e=>{ue(null===e?E:Number(e));},"delay-hide":e=>{pe(null===e?_:Number(e));},float:e=>{me(null===e?O:"true"===e);},hidden:e=>{ye(null===e?k:"true"===e);},"class-name":e=>{_e(e);}};Object.values(t).forEach((e=>e(null))),Object.entries(e).forEach((([e,o])=>{var l;null===(l=t[e])||void 0===l||l.call(t,o);}));};React.useEffect((()=>{ee(i);}),[i]),React.useEffect((()=>{oe(c);}),[c]),React.useEffect((()=>{re(v);}),[v]),React.useEffect((()=>{ie(p);}),[p]),React.useEffect((()=>{se(m);}),[m]),React.useEffect((()=>{ue(E);}),[E]),React.useEffect((()=>{pe(_);}),[_]),React.useEffect((()=>{me(O);}),[O]),React.useEffect((()=>{ye(k);}),[k]),React.useEffect((()=>{Ee(S);}),[S]),React.useEffect((()=>{Te.current!==P&&console.warn("[react-tooltip] Do not change `disableStyleInjection` dynamically.");}),[P]),React.useEffect((()=>{"undefined"!=typeof window&&window.dispatchEvent(new CustomEvent("react-tooltip-inject-styles",{detail:{disableCore:"core"===P,disableBase:P}}));}),[]),React.useEffect((()=>{var e;const o=new Set(Le);let r=n;if(!r&&t&&(r=`[data-tooltip-id='${t.replace(/'/g,"\\'")}']`),r)try{document.querySelectorAll(r).forEach((e=>{o.add({current:e});}));}catch(e){console.warn(`[react-tooltip] "${r}" is not a valid CSS selector`);}const i=document.querySelector(`[id='${l}']`);if(i&&o.add({current:i}),!o.size)return ()=>null;const c=null!==(e=null!=Oe?Oe:i)&&void 0!==e?e:Ce.current,s=new MutationObserver((e=>{e.forEach((e=>{var t;if(!c||"attributes"!==e.type||!(null===(t=e.attributeName)||void 0===t?void 0:t.startsWith("data-tooltip-")))return;const o=Re(c);xe(o);}));})),a={attributes:!0,childList:!1,subtree:!1};if(c){const e=Re(c);xe(e),s.observe(c,a);}return ()=>{s.disconnect();}}),[Le,Ce,Oe,l,n]),React.useEffect((()=>{(null==z?void 0:z.border)&&console.warn("[react-tooltip] Do not set `style.border`. Use `border` prop instead."),V&&!A("border",`${V}`)&&console.warn(`[react-tooltip] "${V}" is not a valid \`border\`.`),(null==z?void 0:z.opacity)&&console.warn("[react-tooltip] Do not set `style.opacity`. Use `opacity` prop instead."),F&&!A("opacity",`${F}`)&&console.warn(`[react-tooltip] "${F}" is not a valid \`opacity\`.`);}),[]);let Ne=h;const $e=React.useRef(null);if(a){const t=a({content:(null==Oe?void 0:Oe.getAttribute("data-tooltip-content"))||Q||null,activeAnchor:Oe});Ne=t?React__namespace.default.createElement("div",{ref:$e,className:"react-tooltip-content-wrapper"},t):null;}else Q&&(Ne=Q);te&&(Ne=React__namespace.default.createElement(H,{content:te}));const Ie={forwardRef:J,id:t,anchorId:l,anchorSelect:n,className:classNames(u,Ae),classNameArrow:d,content:Ne,contentWrapperRef:$e,place:le,variant:ne,offset:ce,wrapper:he,events:be,openOnClick:b,positionStrategy:ge,middlewares:g,delayShow:ae,delayHide:de,float:ve,hidden:fe,noArrow:T,clickable:L,closeOnEsc:C,closeOnScroll:R,closeOnResize:x,openEvents:N,closeEvents:$,globalCloseEvents:I,imperativeModeOnly:B,style:z,position:D,isOpen:M,defaultIsOpen:W,border:V,opacity:F,arrowColor:K,setIsOpen:U,afterShow:X,afterHide:Y,disableTooltip:G,activeAnchor:Oe,setActiveAnchor:e=>ke(e),role:Z};return React__namespace.default.createElement(q,{...Ie})}));"undefined"!=typeof window&&window.addEventListener("react-tooltip-inject-styles",(e=>{e.detail.disableCore||S({css:`:root{--rt-color-white:#fff;--rt-color-dark:#222;--rt-color-success:#8dc572;--rt-color-error:#be6464;--rt-color-warning:#f0ad4e;--rt-color-info:#337ab7;--rt-opacity:0.9;--rt-transition-show-delay:0.15s;--rt-transition-closing-delay:0.15s}.core-styles-module_tooltip__3vRRp{position:absolute;top:0;left:0;pointer-events:none;opacity:0;will-change:opacity}.core-styles-module_fixed__pcSol{position:fixed}.core-styles-module_arrow__cvMwQ{position:absolute;background:inherit}.core-styles-module_noArrow__xock6{display:none}.core-styles-module_clickable__ZuTTB{pointer-events:auto}.core-styles-module_show__Nt9eE{opacity:var(--rt-opacity);transition:opacity var(--rt-transition-show-delay)ease-out}.core-styles-module_closing__sGnxF{opacity:0;transition:opacity var(--rt-transition-closing-delay)ease-in}`,type:"core"}),e.detail.disableBase||S({css:`
|
|
42884
42886
|
.styles-module_tooltip__mnnfp{padding:8px 16px;border-radius:3px;font-size:90%;width:max-content}.styles-module_arrow__K0L3T{width:8px;height:8px}[class*='react-tooltip__place-top']>.styles-module_arrow__K0L3T{transform:rotate(45deg)}[class*='react-tooltip__place-right']>.styles-module_arrow__K0L3T{transform:rotate(135deg)}[class*='react-tooltip__place-bottom']>.styles-module_arrow__K0L3T{transform:rotate(225deg)}[class*='react-tooltip__place-left']>.styles-module_arrow__K0L3T{transform:rotate(315deg)}.styles-module_dark__xNqje{background:var(--rt-color-dark);color:var(--rt-color-white)}.styles-module_light__Z6W-X{background-color:var(--rt-color-white);color:var(--rt-color-dark)}.styles-module_success__A2AKt{background-color:var(--rt-color-success);color:var(--rt-color-white)}.styles-module_warning__SCK0X{background-color:var(--rt-color-warning);color:var(--rt-color-white)}.styles-module_error__JvumD{background-color:var(--rt-color-error);color:var(--rt-color-white)}.styles-module_info__BWdHW{background-color:var(--rt-color-info);color:var(--rt-color-white)}`,type:"base"});}));
|
|
42885
42887
|
|
|
42886
42888
|
const Tooltip = (_a) => {
|
|
@@ -42899,6 +42901,72 @@ function BarSpinner(_a) {
|
|
|
42899
42901
|
return (jsxRuntime.jsx("div", Object.assign({ className: `bar-spinner ${className}`, id: id, style: style }, rest, { children: jsxRuntime.jsx("span", {}) })));
|
|
42900
42902
|
}
|
|
42901
42903
|
|
|
42904
|
+
const Legend = ({ currentStep, steps, onStepClick }) => {
|
|
42905
|
+
const totalSteps = (steps === null || steps === void 0 ? void 0 : steps.length) || 0;
|
|
42906
|
+
return (jsxRuntime.jsx("div", { className: "stepper-legend", children: steps === null || steps === void 0 ? void 0 : steps.map((step, index) => {
|
|
42907
|
+
const isCompleted = steps[index].isCompleted;
|
|
42908
|
+
const isCurrent = index === currentStep;
|
|
42909
|
+
const isSidebarEnabled = step.isSidebarEnabled;
|
|
42910
|
+
return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs(Row, { nogutter: true, align: "center", children: [jsxRuntime.jsx(Col, { xs: "content", children: jsxRuntime.jsx("div", { className: classNames('stepper-legend-circle', {
|
|
42911
|
+
completed: isCompleted,
|
|
42912
|
+
current: isCurrent,
|
|
42913
|
+
}), children: isCompleted ? jsxRuntime.jsx(Icon, { name: "check" }) : index + 1 }) }), jsxRuntime.jsx(Col, { children: jsxRuntime.jsx("div", { className: classNames('stepper-legend-step', {
|
|
42914
|
+
'stepper-legend-step--current-step': isCurrent,
|
|
42915
|
+
'stepper-legend-step--completed-step': isCompleted,
|
|
42916
|
+
'stepper-legend-step--disabled-step': !isSidebarEnabled,
|
|
42917
|
+
}), children: jsxRuntime.jsx(Button$1, { "data-testid": `stepper-legend-step-${index}`, onClick: () => onStepClick(index), isDisabled: !isSidebarEnabled, ariaLabel: step.label, size: "sm", variant: "link", children: step.label }) }) })] }), index !== totalSteps - 1 && (jsxRuntime.jsx(Row, { children: jsxRuntime.jsx(Col, { children: jsxRuntime.jsx("div", { className: classNames('stepper-legend-line', {
|
|
42918
|
+
'stepper-legend-line--completed': isCompleted,
|
|
42919
|
+
}) }) }) }))] }, index));
|
|
42920
|
+
}) }));
|
|
42921
|
+
};
|
|
42922
|
+
|
|
42923
|
+
const BackNavigation = ({ isDisabled, onBackClick }) => {
|
|
42924
|
+
return (jsxRuntime.jsx("div", { className: "stepper-navigation-back", children: jsxRuntime.jsx(Button$1, { "data-testid": "stepper-back-button", ariaLabel: "Previous Step", iconLeft: "fa-arrow-left", onClick: onBackClick, variant: "outline", isDisabled: isDisabled, children: "Previous Step" }) }));
|
|
42925
|
+
};
|
|
42926
|
+
|
|
42927
|
+
const NextNavigation = ({ isLastStep, onNextClick, onFinishClick, isDisabled }) => {
|
|
42928
|
+
return (jsxRuntime.jsx("div", { className: "stepper-navigation", children: !isLastStep ? (jsxRuntime.jsx("div", { className: "stepper-navigation-next", children: jsxRuntime.jsx(Button$1, { "data-testid": "stepper-next-button", iconRight: "fa-arrow-right", ariaLabel: "Next Step", onClick: onNextClick, isDisabled: isDisabled, children: "Next Step" }) })) : (jsxRuntime.jsx("div", { className: "stepper-navigation-finish", children: jsxRuntime.jsx(Button$1, { "data-testid": "stepper-finish-button", ariaLabel: "Finish", onClick: onFinishClick, isDisabled: isDisabled, children: "Finish" }) })) }));
|
|
42929
|
+
};
|
|
42930
|
+
|
|
42931
|
+
const Stepper = ({ currentStep: externalCurrentStep, legendHeader, legendFooter, steps, onBackClick, onNextClick, onFinishClick, children, onStepClick, }) => {
|
|
42932
|
+
const [internalCurrentStep, setInternalCurrentStep] = React.useState(0);
|
|
42933
|
+
const currentStep = externalCurrentStep !== undefined ? externalCurrentStep : internalCurrentStep;
|
|
42934
|
+
// Convert children to array to access by index
|
|
42935
|
+
const childrenArray = React.Children.toArray(children);
|
|
42936
|
+
const totalSteps = childrenArray.length;
|
|
42937
|
+
const isFirstStep = currentStep === 0;
|
|
42938
|
+
const isLastStep = currentStep === totalSteps - 1;
|
|
42939
|
+
const handleBackClick = () => {
|
|
42940
|
+
if (onBackClick) {
|
|
42941
|
+
onBackClick();
|
|
42942
|
+
}
|
|
42943
|
+
else if (!isFirstStep) {
|
|
42944
|
+
setInternalCurrentStep(currentStep - 1);
|
|
42945
|
+
}
|
|
42946
|
+
};
|
|
42947
|
+
const handleNextClick = () => {
|
|
42948
|
+
if (onNextClick) {
|
|
42949
|
+
onNextClick();
|
|
42950
|
+
}
|
|
42951
|
+
else if (!isLastStep) {
|
|
42952
|
+
setInternalCurrentStep(currentStep + 1);
|
|
42953
|
+
}
|
|
42954
|
+
};
|
|
42955
|
+
const handleFinishClick = () => {
|
|
42956
|
+
if (onFinishClick) {
|
|
42957
|
+
onFinishClick();
|
|
42958
|
+
}
|
|
42959
|
+
};
|
|
42960
|
+
const handleStepClick = (step) => {
|
|
42961
|
+
onStepClick === null || onStepClick === void 0 ? void 0 : onStepClick(step);
|
|
42962
|
+
};
|
|
42963
|
+
// If step is optional, and its not the last step, then enable the next button
|
|
42964
|
+
const disableNextButton = (step) => {
|
|
42965
|
+
return steps[step].isOptional || !steps[step].isCompleted;
|
|
42966
|
+
};
|
|
42967
|
+
return (jsxRuntime.jsxs("div", { className: "stepper", children: [jsxRuntime.jsxs("div", { className: "legend", children: [jsxRuntime.jsx("div", { className: "legend-header", children: legendHeader }), jsxRuntime.jsx("div", { className: "legend-body", children: jsxRuntime.jsx(Legend, { currentStep: currentStep, steps: steps, onStepClick: handleStepClick }) }), jsxRuntime.jsx("div", { className: "legend-footer", children: legendFooter })] }), jsxRuntime.jsxs("div", { className: "stepper-body", children: [jsxRuntime.jsx("div", { className: "stepper-content", children: jsxRuntime.jsx("div", { className: "stepper-steps", children: childrenArray[currentStep] }) }), jsxRuntime.jsxs("div", { className: "stepper-actions", children: [jsxRuntime.jsx(BackNavigation, { isDisabled: isFirstStep, onBackClick: handleBackClick }), jsxRuntime.jsx(NextNavigation, { isLastStep: isLastStep, onNextClick: handleNextClick, onFinishClick: handleFinishClick, isDisabled: disableNextButton(currentStep) })] })] })] }));
|
|
42968
|
+
};
|
|
42969
|
+
|
|
42902
42970
|
// Unique ID creation requires a high quality random # generator. In the browser we therefore
|
|
42903
42971
|
// require the crypto API and do not support built-in fallback to lower quality random number
|
|
42904
42972
|
// generators (like Math.random()).
|
|
@@ -43009,6 +43077,7 @@ exports.Row = Row;
|
|
|
43009
43077
|
exports.SelectInput = Select$1;
|
|
43010
43078
|
exports.SingleInputDatePicker = SingleInputDatePicker;
|
|
43011
43079
|
exports.Skeleton = Skeleton;
|
|
43080
|
+
exports.Stepper = Stepper;
|
|
43012
43081
|
exports.Table = Table;
|
|
43013
43082
|
exports.TanstackTable = TanstackTable;
|
|
43014
43083
|
exports.Textarea = LabeledTextarea;
|