@luscii-healthtech/web-ui 30.10.3 → 30.10.5
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/dist/components/ConfirmationDialog/types/ConfirmationDialog.types.d.ts +5 -0
- package/dist/components/Modal/ModalBase.d.ts +1 -1
- package/dist/index.development.js +7 -5
- package/dist/index.development.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/web-ui-tailwind.css +8 -0
- package/dist/web-ui.esm.js +1 -1
- package/dist/web-ui.esm.js.map +1 -1
- package/package.json +1 -1
|
@@ -20,6 +20,11 @@ export interface ConfirmationDialogChoice<T extends string = string> {
|
|
|
20
20
|
}
|
|
21
21
|
export interface ConfirmationDialogProps {
|
|
22
22
|
children?: React.ReactNode;
|
|
23
|
+
/**
|
|
24
|
+
* Defaults to "dialog-small". These are a subset
|
|
25
|
+
* of the sizes of the BaseModal component.
|
|
26
|
+
*/
|
|
27
|
+
size?: "dialog-small" | "dialog-medium";
|
|
23
28
|
texts: ConfirmationDialogTexts;
|
|
24
29
|
isOpen: boolean;
|
|
25
30
|
onCancel: () => void;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { type ModalHeaderProps } from "./ModalHeader";
|
|
3
3
|
import { type ModalFooterProps } from "./ModalFooter";
|
|
4
|
-
export type ModalSize = "small" | "medium" | "wide";
|
|
4
|
+
export type ModalSize = "dialog-small" | "dialog-medium" | "small" | "medium" | "wide";
|
|
5
5
|
export type ModalBaseProps = Omit<ModalHeaderProps, "title"> & {
|
|
6
6
|
children: React.ReactNode;
|
|
7
7
|
size?: ModalSize;
|
|
@@ -2402,7 +2402,8 @@ const ModalBase = (props) => {
|
|
|
2402
2402
|
{ isOpen, data: { "test-id": (_a = props.dataTestId) !== null && _a !== void 0 ? _a : "react-modal" }, contentLabel: props.title, overlayClassName: classNames__default.default("ui-px-2 ui-py-15", "ui-z-20", "ui-fixed ui-top-0 ui-bottom-0 ui-left-0 ui-right-0", "ui-overflow-x-hidden ui-overflow-y-auto", "ui-bg-overlay"), onRequestClose: props.onCloseClick, shouldFocusAfterRender: false, shouldCloseOnOverlayClick: false, className: classNames__default.default("ui-mx-auto ui-my-0", "ui-relative", "ui-rounded-lg ui-bg-white ui-shadow-lg ui-outline-none", {
|
|
2403
2403
|
"ui-overflow-y-hidden": props.scrollableContent,
|
|
2404
2404
|
"ui-mt-17": props.withExtraMarginTop,
|
|
2405
|
-
"md:ui-w-
|
|
2405
|
+
"md:ui-w-120": size === "dialog-medium",
|
|
2406
|
+
"md:ui-w-80": size === "small" || size === "dialog-small",
|
|
2406
2407
|
"md:ui-w-132": size === "medium",
|
|
2407
2408
|
"md:ui-w-216": size === "wide"
|
|
2408
2409
|
}) },
|
|
@@ -3015,7 +3016,7 @@ const ConfirmationDialogMessage = (props) => {
|
|
|
3015
3016
|
};
|
|
3016
3017
|
|
|
3017
3018
|
const ConfirmationDialog = (_a) => {
|
|
3018
|
-
var { dataTestId = "confirmation-dialog-modal" } = _a, props = __rest(_a, ["dataTestId"]);
|
|
3019
|
+
var { dataTestId = "confirmation-dialog-modal", size = "dialog-small" } = _a, props = __rest(_a, ["dataTestId", "size"]);
|
|
3019
3020
|
const { children, choices } = props;
|
|
3020
3021
|
const { message } = props.texts;
|
|
3021
3022
|
const [selectedChoice, setSelectedChoice] = React.useState(choices === null || choices === void 0 ? void 0 : choices.options.find((choice) => choice.value === choices.defaultChoice));
|
|
@@ -3036,7 +3037,7 @@ const ConfirmationDialog = (_a) => {
|
|
|
3036
3037
|
};
|
|
3037
3038
|
return React__namespace.default.createElement(
|
|
3038
3039
|
ModalBase,
|
|
3039
|
-
{ size
|
|
3040
|
+
{ size, dataTestId, isOpen: props.isOpen, withExtraMarginTop: true, onCloseClick: handleOnCloseClick, footerTrailingComponents: {
|
|
3040
3041
|
primaryButtonProps: {
|
|
3041
3042
|
text: props.texts.confirmLabel,
|
|
3042
3043
|
onClick: onConfirmHandler,
|
|
@@ -4193,7 +4194,8 @@ function Table(_a) {
|
|
|
4193
4194
|
const newState = params.checked ? [...selectedItems, { value: params.value, index: params.rowIndex }] : selectedItems.filter((item) => item.index !== params.rowIndex);
|
|
4194
4195
|
onSelectedRowsChange === null || onSelectedRowsChange === void 0 ? void 0 : onSelectedRowsChange(newState);
|
|
4195
4196
|
};
|
|
4196
|
-
const
|
|
4197
|
+
const shouldDisplayHeaderSelectAll = isSelectable && items && items.length > 0;
|
|
4198
|
+
const shouldDisplaySelectAllControls = shouldDisplayHeaderSelectAll && rowSelectionHeaderAccessories && selectedItems && selectedItems.length > 0;
|
|
4197
4199
|
const toggleAllCheckbox = React__namespace.default.createElement(
|
|
4198
4200
|
"label",
|
|
4199
4201
|
null,
|
|
@@ -4203,7 +4205,7 @@ function Table(_a) {
|
|
|
4203
4205
|
return React__namespace.default.createElement(
|
|
4204
4206
|
"table",
|
|
4205
4207
|
Object.assign({ className: classNames__default.default("ui-w-full ui-table-auto ui-bg-white", "ui-border-separate ui-border-spacing-0 ui-rounded-2xl", className), "data-test-id": dataTestId }, otherAttributes),
|
|
4206
|
-
showHeader ? React__namespace.default.createElement(TableHeader, { fieldConfigurations, colSpan, selectAllCheckbox:
|
|
4208
|
+
showHeader ? React__namespace.default.createElement(TableHeader, { fieldConfigurations, colSpan, selectAllCheckbox: shouldDisplayHeaderSelectAll ? toggleAllCheckbox : null, selectAllComponent: shouldDisplaySelectAllControls ? React__namespace.default.createElement(
|
|
4207
4209
|
Stack,
|
|
4208
4210
|
{ axis: "x", align: "center", gap: "xs", my: "xxs" },
|
|
4209
4211
|
toggleAllCheckbox,
|