@luscii-healthtech/web-ui 9.1.0 → 9.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Checkbox/Checkbox.d.ts +1 -1
- package/dist/components/CheckboxList/CheckboxList.d.ts +0 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.development.js +64 -52
- 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 +38 -9
- package/dist/web-ui.esm.js +1 -1
- package/dist/web-ui.esm.js.map +1 -1
- package/package.json +1 -1
- package/dist/components/CheckboxList/CheckboxListItem.d.ts +0 -3
|
@@ -47,6 +47,7 @@ export interface CheckboxProps {
|
|
|
47
47
|
value?: string;
|
|
48
48
|
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
49
49
|
className?: string;
|
|
50
|
+
classNameCheckboxLabel?: string;
|
|
50
51
|
/**
|
|
51
52
|
* Visually show that the currently selected value has an issue the user needs to attend to.
|
|
52
53
|
*/
|
|
@@ -61,4 +62,3 @@ export interface CheckboxProps {
|
|
|
61
62
|
renderLabel?: (props: CheckboxProps) => JSX.Element | null;
|
|
62
63
|
}
|
|
63
64
|
export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
|
|
64
|
-
export default Checkbox;
|
package/dist/index.d.ts
CHANGED
|
@@ -16,7 +16,7 @@ export { SecondaryButton } from "./components/ButtonV2/SecondaryButton";
|
|
|
16
16
|
export { TertiaryButton } from "./components/ButtonV2/TertiaryButton";
|
|
17
17
|
export { default as Carousel } from "./components/Carousel/Carousel";
|
|
18
18
|
export { default as CenteredHero } from "./components/CenteredHero/CenteredHero";
|
|
19
|
-
export {
|
|
19
|
+
export { Checkbox } from "./components/Checkbox/Checkbox";
|
|
20
20
|
export { ConfirmationDialog } from "./components/ConfirmationDialog/ConfirmationDialog";
|
|
21
21
|
export type { ConfirmationDialogChoice, ConfirmationDialogProps, ConfirmationDialogTitleProps, } from "./components/ConfirmationDialog/types/ConfirmationDialog.types";
|
|
22
22
|
export { default as DatePicker } from "./components/Datepicker/Datepicker";
|
|
@@ -2121,11 +2121,11 @@ const CenteredHero = ({ title, text, image, buttons = [], background = "slate-50
|
|
|
2121
2121
|
);
|
|
2122
2122
|
};
|
|
2123
2123
|
|
|
2124
|
-
var css_248z$g = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.cweb-checkbox {\n outline: none;\n}\n.cweb-checkbox .cweb-checkbox-input {\n position: absolute;\n -webkit-appearance: none;\n height: 1px;\n opacity: 0;\n width: 1px;\n}\n.cweb-checkbox.type-regular .cweb-checkbox-
|
|
2124
|
+
var css_248z$g = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.cweb-checkbox {\n outline: none;\n}\n.cweb-checkbox .cweb-checkbox-input {\n position: absolute;\n -webkit-appearance: none;\n height: 1px;\n opacity: 0;\n width: 1px;\n}\n.cweb-checkbox.type-regular .cweb-checkbox-icon-container {\n border-color: #cccccc;\n width: 16px;\n height: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n}\n.cweb-checkbox.type-regular.hasError .cweb-checkbox-icon-container {\n border-color: #ff6266;\n}\n.cweb-checkbox.type-regular.is-focused .cweb-checkbox-icon-container {\n border-color: #0074dd;\n}\n.cweb-checkbox.type-regular.is-checked .cweb-checkbox-icon {\n width: 0.5rem;\n height: 0.5rem;\n padding: 4px;\n background: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2210%22 height%3D%228%22 viewBox%3D%220 0 10 8%22 fill%3D%22none%22%3E %3Cpath d%3D%22M9.207 0.792787C9.39447 0.980314 9.49979 1.23462 9.49979 1.49979C9.49979 1.76495 9.39447 2.01926 9.207 2.20679L4.207 7.20679C4.01947 7.39426 3.76516 7.49957 3.5 7.49957C3.23484 7.49957 2.98053 7.39426 2.793 7.20679L0.793 5.20679C0.610842 5.01818 0.510047 4.76558 0.512326 4.50339C0.514604 4.24119 0.619773 3.99038 0.805181 3.80497C0.990589 3.61956 1.2414 3.51439 1.5036 3.51211C1.7658 3.50983 2.0184 3.61063 2.207 3.79279L3.5 5.08579L7.793 0.792787C7.98053 0.605316 8.23484 0.5 8.5 0.5C8.76516 0.5 9.01947 0.605316 9.207 0.792787Z%22 fill%3D%22white%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n.cweb-checkbox.type-regular.is-checked .cweb-checkbox-icon-container {\n border-color: #0074dd;\n}\n.cweb-checkbox.type-regular.is-checked.is-focused .cweb-checkbox-icon-container {\n border-color: #2da8e5;\n}\n.cweb-checkbox.type-regular.is-indeterminate .cweb-checkbox-icon {\n width: 0.5rem;\n height: 0.5rem;\n padding: 4px;\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%222%22 viewBox%3D%220 0 10 2%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M9 -4.37114e-08C9.55228 -1.95703e-08 10 0.447715 10 1C10 1.55228 9.55228 2 9 2L1 2C0.447716 2 -6.78525e-08 1.55228 -4.37114e-08 1C-1.95703e-08 0.447715 0.447715 -4.17544e-07 1 -3.93402e-07L9 -4.37114e-08Z%22 fill%3D%22white%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n.cweb-checkbox.type-regular.is-indeterminate .cweb-checkbox-icon-container {\n border-color: #0074dd;\n}\n.cweb-checkbox.type-regular.is-indeterminate.is-focused .cweb-checkbox-icon-container {\n border-color: #2da8e5;\n}\n.cweb-checkbox.type-regular.is-disabled.show-cross-when-disabled .cweb-checkbox-icon {\n width: 10px;\n height: 10px;\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2211px%22 height%3D%2211px%22 viewBox%3D%220 0 11 11%22 version%3D%221.1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg stroke%3D%22none%22 stroke-width%3D%221%22 fill%3D%22none%22 fill-rule%3D%22evenodd%22 stroke-linecap%3D%22round%22%3E %3Cg transform%3D%22translate(-6.000000%2C -7.000000)%22 stroke%3D%22%232D2D2D%22 stroke-width%3D%222%22%3E %3Cpath d%3D%22M7%2C17 L16%2C8 M16%2C17 L7%2C8%22 %2F%3E %3C%2Fg%3E %3C%2Fg%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n opacity: 0.6;\n}\n.cweb-checkbox.type-switch .cweb-checkbox-label {\n display: flex;\n align-items: center;\n margin-bottom: 0;\n width: 56px;\n height: 28px;\n position: relative;\n}\n.cweb-checkbox.type-switch .cweb-checkbox-icon-container {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #d1d5db;\n border-radius: 16px;\n}\n.cweb-checkbox.type-switch .cweb-checkbox-icon-container:after {\n position: relative;\n display: block;\n content: \"\";\n height: 20px;\n width: 20px;\n top: 4px;\n left: 4px;\n background-color: white;\n border-radius: 50%;\n}\n.cweb-checkbox.type-switch.is-checked .cweb-checkbox-icon-container {\n background-color: #6abfa6;\n}\n.cweb-checkbox.type-switch.is-checked .cweb-checkbox-icon-container:after {\n left: 32px;\n}";
|
|
2125
2125
|
styleInject(css_248z$g);
|
|
2126
2126
|
|
|
2127
2127
|
const CheckboxInner = (props) => {
|
|
2128
|
-
const { id, explanation, type = "regular", isChecked = false, isIndeterminate = false, isDisabled, name, value, onChange, className, error, innerRef } = props;
|
|
2128
|
+
const { id, explanation, type = "regular", isChecked = false, isIndeterminate = false, isDisabled, name, value, onChange, className, classNameCheckboxLabel, error, innerRef } = props;
|
|
2129
2129
|
const [checked, setChecked] = React.useState(false);
|
|
2130
2130
|
const [indeterminate, setIndeterminate] = React.useState(isIndeterminate);
|
|
2131
2131
|
const [isFocused, setIsFocused] = React.useState(false);
|
|
@@ -2167,7 +2167,7 @@ const CheckboxInner = (props) => {
|
|
|
2167
2167
|
{ className: containerClassName, "data-test-id": "checkbox" },
|
|
2168
2168
|
React__namespace.default.createElement(
|
|
2169
2169
|
"label",
|
|
2170
|
-
{ className: classNames__default.default("cweb-checkbox-label ui-group ui-relative ui-overflow-hidden", "ui-flex ui-w-full", {
|
|
2170
|
+
{ className: classNames__default.default(classNameCheckboxLabel, "cweb-checkbox-label ui-group ui-relative ui-overflow-hidden", "ui-flex ui-w-full ui-cursor-pointer", {
|
|
2171
2171
|
"ui-cursor-not-allowed": isDisabled,
|
|
2172
2172
|
"ui-cursor-pointer": !isDisabled
|
|
2173
2173
|
}), "data-test-id": "checkbox-label" },
|
|
@@ -3536,29 +3536,6 @@ __publicField$1(Menu, "propTypes", {
|
|
|
3536
3536
|
children: PropTypes__default.default.node.isRequired
|
|
3537
3537
|
});
|
|
3538
3538
|
|
|
3539
|
-
const CheckboxListItem = ({ id, label, isChecked, isDisabled, onChange, className }) => {
|
|
3540
|
-
const [checked, setChecked] = React.useState(isChecked || false);
|
|
3541
|
-
React.useEffect(() => {
|
|
3542
|
-
setChecked(isChecked || false);
|
|
3543
|
-
}, [isChecked]);
|
|
3544
|
-
const handleCheckboxClick = (event) => {
|
|
3545
|
-
if (isDisabled) {
|
|
3546
|
-
return;
|
|
3547
|
-
}
|
|
3548
|
-
const targetId = event.target.id;
|
|
3549
|
-
const newCheckedValue = event.target.checked;
|
|
3550
|
-
if (onChange) {
|
|
3551
|
-
onChange({ id: targetId, newCheckedValue });
|
|
3552
|
-
}
|
|
3553
|
-
};
|
|
3554
|
-
return React__namespace.default.createElement(
|
|
3555
|
-
"label",
|
|
3556
|
-
{ className: classNames__default.default("ui-space-between ui-flex ui-cursor-pointer ui-flex-row ui-items-center", className), "item-id": id },
|
|
3557
|
-
React__namespace.default.createElement(Text, { text: label, className: "ui-mr-auto" }),
|
|
3558
|
-
React__namespace.default.createElement(Checkbox, { isChecked: checked, isDisabled, onChange: handleCheckboxClick, id })
|
|
3559
|
-
);
|
|
3560
|
-
};
|
|
3561
|
-
|
|
3562
3539
|
var CheckboxState;
|
|
3563
3540
|
(function(CheckboxState2) {
|
|
3564
3541
|
CheckboxState2["CHECKED"] = "checked";
|
|
@@ -3590,55 +3567,86 @@ const CheckboxGroup = ({ title, items, onChange, className, isCollapsed = true,
|
|
|
3590
3567
|
}, [items]);
|
|
3591
3568
|
const handleGroupClick = (event) => {
|
|
3592
3569
|
event.stopPropagation();
|
|
3593
|
-
|
|
3594
|
-
|
|
3595
|
-
enabledItems.forEach((item) => onChange({ id: item.id, newCheckedValue: false }));
|
|
3596
|
-
} else if (onChange) {
|
|
3597
|
-
enabledItems.forEach((item) => onChange({ id: item.id, newCheckedValue: true }));
|
|
3570
|
+
if (!onChange) {
|
|
3571
|
+
return;
|
|
3598
3572
|
}
|
|
3573
|
+
const enabledItems = items.filter((item) => !item.isDisabled);
|
|
3574
|
+
const newCheckedValue = event.currentTarget.checked;
|
|
3575
|
+
enabledItems.forEach((item) => onChange({ id: item.id, newCheckedValue }));
|
|
3599
3576
|
};
|
|
3600
3577
|
const handleGroupCollapse = (event) => {
|
|
3601
|
-
|
|
3602
|
-
event.stopPropagation();
|
|
3603
|
-
}
|
|
3578
|
+
event.stopPropagation();
|
|
3604
3579
|
if (collapsible) {
|
|
3605
|
-
setCollapsed(!
|
|
3580
|
+
setCollapsed((previousState) => !previousState);
|
|
3606
3581
|
}
|
|
3607
3582
|
};
|
|
3583
|
+
const handleCheckboxChange = (e) => {
|
|
3584
|
+
onChange({
|
|
3585
|
+
id: e.target.id,
|
|
3586
|
+
newCheckedValue: e.target.checked
|
|
3587
|
+
});
|
|
3588
|
+
};
|
|
3608
3589
|
const checkedItemsCount = items === null || items === void 0 ? void 0 : items.filter((item) => item === null || item === void 0 ? void 0 : item.isChecked).length;
|
|
3609
3590
|
const groupTitle = checkedItemsCount > 0 ? `${title} (${checkedItemsCount})` : title;
|
|
3610
|
-
const CollapseStateChevron = collapsed ? ChevronRightIcon : ChevronDownIcon;
|
|
3611
3591
|
return React__namespace.default.createElement(
|
|
3612
3592
|
"div",
|
|
3613
|
-
{ className: classNames__default.default("ui-flex ui-flex-col
|
|
3593
|
+
{ className: classNames__default.default("ui-flex ui-flex-col", className) },
|
|
3614
3594
|
title && React__namespace.default.createElement(
|
|
3615
3595
|
"div",
|
|
3616
|
-
{ className:
|
|
3617
|
-
React__namespace.default.createElement(
|
|
3618
|
-
|
|
3619
|
-
|
|
3620
|
-
|
|
3621
|
-
|
|
3622
|
-
"ui-ml-4": collapsible,
|
|
3623
|
-
"ui-ml-1": !collapsible
|
|
3624
|
-
}) }),
|
|
3625
|
-
" "
|
|
3626
|
-
),
|
|
3627
|
-
React__namespace.default.createElement(Checkbox, { onChange: handleGroupClick, className: "ui-ml-auto", isChecked: groupCheckboxState === CheckboxState.CHECKED, isDisabled, isIndeterminate: groupCheckboxState === CheckboxState.INDETERMINATE })
|
|
3596
|
+
{ className: "ui-flex ui-w-full ui-flex-row ui-items-center" },
|
|
3597
|
+
React__namespace.default.createElement(Checkbox, { key: title, renderLabel: () => React__namespace.default.createElement(Text, { variant: "strong" }, groupTitle), onChange: handleGroupClick, isChecked: groupCheckboxState === CheckboxState.CHECKED, isDisabled, isIndeterminate: groupCheckboxState === CheckboxState.INDETERMINATE, className: "ui-flex-1 ui-py-3" }),
|
|
3598
|
+
collapsible && React__namespace.default.createElement(GroupCollapseButton, { "aria-label": getGroupCollapseButtonAriaLabel({
|
|
3599
|
+
groupTitle: title,
|
|
3600
|
+
collapsed
|
|
3601
|
+
}), collapsed, onClick: handleGroupCollapse })
|
|
3628
3602
|
),
|
|
3629
|
-
!collapsed && items.map((item) => React__namespace.default.createElement(
|
|
3603
|
+
!collapsed && items.map((item) => React__namespace.default.createElement(Checkbox, Object.assign({}, item, { key: item.id, text: item.label, onChange: handleCheckboxChange, className: classNames__default.default("ui-py-3", {
|
|
3630
3604
|
"ui-ml-10": collapsible,
|
|
3631
3605
|
"ui-ml-5": !collapsible
|
|
3632
|
-
}
|
|
3606
|
+
}) })))
|
|
3633
3607
|
);
|
|
3634
3608
|
};
|
|
3609
|
+
function getGroupCollapseButtonAriaLabel(args) {
|
|
3610
|
+
const { groupTitle, collapsed } = args;
|
|
3611
|
+
const localizedActionLabel = collapsed ? "Expand" : "Collapse";
|
|
3612
|
+
const localizedGroupLabel = "group";
|
|
3613
|
+
return [localizedActionLabel, groupTitle, localizedGroupLabel].join(" ");
|
|
3614
|
+
}
|
|
3615
|
+
function GroupCollapseButton(props) {
|
|
3616
|
+
const { collapsed } = props, rest = __rest(props, ["collapsed"]);
|
|
3617
|
+
return React__namespace.default.createElement(
|
|
3618
|
+
"button",
|
|
3619
|
+
Object.assign({}, rest, { className: classNames__default.default(
|
|
3620
|
+
"ui-outline-none",
|
|
3621
|
+
// We have a custom focus indicator for this one.
|
|
3622
|
+
"ui-group",
|
|
3623
|
+
"ui-py-2.5",
|
|
3624
|
+
// Icon height is 24px, so only needs 10px of padding to match the 44px height of the text and padding.
|
|
3625
|
+
"ui-pl-6",
|
|
3626
|
+
// Make the click area a little larger for better UX.
|
|
3627
|
+
"ui-text-slate-600 ui-transition-colors ui-duration-75"
|
|
3628
|
+
) }),
|
|
3629
|
+
React__namespace.default.createElement(
|
|
3630
|
+
"div",
|
|
3631
|
+
{ className: classNames__default.default("group-hover:ui-bg-slate-200 group-focus-visible:ui-bg-slate-200", "ui-relative ui-h-full ui-rounded-full ui-transition-transform", `${collapsed ? "ui-rotate-0" : "-ui-rotate-180"}`) },
|
|
3632
|
+
React__namespace.default.createElement(ChevronDownIcon, null),
|
|
3633
|
+
React__namespace.default.createElement("div", { className: classNames__default.default("ui-absolute ui-right-0 ui-top-0 -ui-z-[10]") })
|
|
3634
|
+
)
|
|
3635
|
+
);
|
|
3636
|
+
}
|
|
3635
3637
|
|
|
3636
3638
|
const CheckboxList = ({ groups, onChange, className }) => {
|
|
3639
|
+
const handleCheckboxChange = (e) => {
|
|
3640
|
+
onChange({
|
|
3641
|
+
id: e.target.id,
|
|
3642
|
+
newCheckedValue: e.target.checked
|
|
3643
|
+
});
|
|
3644
|
+
};
|
|
3637
3645
|
return React__namespace.default.createElement("div", { className: classNames__default.default("ui-flex ui-flex-col", className) }, groups.map((group) => {
|
|
3638
3646
|
if (group.title) {
|
|
3639
3647
|
return React__namespace.default.createElement(CheckboxGroup, { key: group.title, items: group.items, title: group.title, isCollapsed: group.isCollapsed, collapsible: group.collapsible, onChange });
|
|
3640
3648
|
} else {
|
|
3641
|
-
return group.items.map((item) => React__namespace.default.createElement(
|
|
3649
|
+
return group.items.map((item) => React__namespace.default.createElement(Checkbox, Object.assign({}, item, { key: item.id, text: item.label, onChange: handleCheckboxChange, classNameCheckboxLabel: "ui-py-3" })));
|
|
3642
3650
|
}
|
|
3643
3651
|
}));
|
|
3644
3652
|
};
|
|
@@ -4721,6 +4729,10 @@ const ImagePickerInner = ({
|
|
|
4721
4729
|
setSelectedMediaType("image");
|
|
4722
4730
|
setHighlightedImage(null);
|
|
4723
4731
|
setError(null);
|
|
4732
|
+
const fileInput = fileInputRef.current;
|
|
4733
|
+
if (fileInput) {
|
|
4734
|
+
fileInput.value = "";
|
|
4735
|
+
}
|
|
4724
4736
|
};
|
|
4725
4737
|
function handleConfirmSelection() {
|
|
4726
4738
|
setSelectedMedia(highlightedImage !== null && highlightedImage !== void 0 ? highlightedImage : placeholderImage);
|