@luscii-healthtech/web-ui 9.0.2 → 9.2.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/dist/components/Checkbox/Checkbox.d.ts +10 -1
- package/dist/components/CheckboxList/CheckboxList.d.ts +0 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.development.js +105 -76
- 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 +52 -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
|
@@ -12,6 +12,8 @@ export interface CheckboxProps {
|
|
|
12
12
|
/**
|
|
13
13
|
* Helper text that adds some more information on what the option means, or inform
|
|
14
14
|
* the user about the consequences of the checkbox.
|
|
15
|
+
*
|
|
16
|
+
* Only works if the `renderLabel` prop isn't set.
|
|
15
17
|
*/
|
|
16
18
|
explanation?: string;
|
|
17
19
|
/**
|
|
@@ -45,11 +47,18 @@ export interface CheckboxProps {
|
|
|
45
47
|
value?: string;
|
|
46
48
|
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
47
49
|
className?: string;
|
|
50
|
+
classNameCheckboxLabel?: string;
|
|
48
51
|
/**
|
|
49
52
|
* Visually show that the currently selected value has an issue the user needs to attend to.
|
|
50
53
|
*/
|
|
51
54
|
error?: boolean;
|
|
52
55
|
innerRef?: React.Ref<HTMLInputElement>;
|
|
56
|
+
/**
|
|
57
|
+
* Renders a completely custom label. Can change its contents or
|
|
58
|
+
* appearance based on the props of the checkbox item.
|
|
59
|
+
*
|
|
60
|
+
* Overrides the `text` prop.
|
|
61
|
+
*/
|
|
62
|
+
renderLabel?: (props: CheckboxProps) => JSX.Element | null;
|
|
53
63
|
}
|
|
54
64
|
export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
|
|
55
|
-
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,10 +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
|
-
const CheckboxInner = (
|
|
2127
|
+
const CheckboxInner = (props) => {
|
|
2128
|
+
const { id, explanation, type = "regular", isChecked = false, isIndeterminate = false, isDisabled, name, value, onChange, className, classNameCheckboxLabel, error, innerRef } = props;
|
|
2128
2129
|
const [checked, setChecked] = React.useState(false);
|
|
2129
2130
|
const [indeterminate, setIndeterminate] = React.useState(isIndeterminate);
|
|
2130
2131
|
const [isFocused, setIsFocused] = React.useState(false);
|
|
@@ -2166,29 +2167,57 @@ const CheckboxInner = ({ id, text, explanation, type = "regular", isChecked = fa
|
|
|
2166
2167
|
{ className: containerClassName, "data-test-id": "checkbox" },
|
|
2167
2168
|
React__namespace.default.createElement(
|
|
2168
2169
|
"label",
|
|
2169
|
-
{ className: "cweb-checkbox-label ui-relative ui-overflow-hidden", "
|
|
2170
|
-
|
|
2171
|
-
|
|
2172
|
-
|
|
2173
|
-
{ className: classNames__default.default("cweb-checkbox-icon-container", {
|
|
2174
|
-
"ui-bg-primary": checked || indeterminate,
|
|
2175
|
-
"ui-bg-white": !checked && !indeterminate,
|
|
2176
|
-
"hover:ui-bg-primary-dark": checked || indeterminate,
|
|
2177
|
-
"ui-outline-primary": isFocused,
|
|
2178
|
-
"ui-cursor-not-allowed": isDisabled,
|
|
2179
|
-
"ui-cursor-pointer": !isDisabled
|
|
2180
|
-
}), "data-test-id": "checkbox-span" },
|
|
2181
|
-
React__namespace.default.createElement("span", { className: "cweb-checkbox-icon" })
|
|
2182
|
-
),
|
|
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
|
+
"ui-cursor-not-allowed": isDisabled,
|
|
2172
|
+
"ui-cursor-pointer": !isDisabled
|
|
2173
|
+
}), "data-test-id": "checkbox-label" },
|
|
2183
2174
|
React__namespace.default.createElement(
|
|
2184
2175
|
"div",
|
|
2185
|
-
{ className: "ui-flex
|
|
2186
|
-
|
|
2187
|
-
|
|
2176
|
+
{ className: "ui-flex" },
|
|
2177
|
+
React__namespace.default.createElement(
|
|
2178
|
+
"div",
|
|
2179
|
+
{ className: "ui-flex ui-h-[20px] ui-flex-col ui-justify-center" },
|
|
2180
|
+
React__namespace.default.createElement("input", { id, ref: innerRef, "data-test-id": `checkbox-${name}`, className: "cweb-checkbox-input", name, type: "checkbox", checked, disabled: isDisabled, value, onBlur: handleBlur, onFocus: handleFocus, onChange: handleChange }),
|
|
2181
|
+
React__namespace.default.createElement(
|
|
2182
|
+
"span",
|
|
2183
|
+
{ className: classNames__default.default("cweb-checkbox-icon-container ui-transition-colors", {
|
|
2184
|
+
"ui-bg-primary": checked || indeterminate,
|
|
2185
|
+
"ui-bg-white": !checked && !indeterminate,
|
|
2186
|
+
"group-hover:ui-bg-blue-50": type === "regular" && !(checked || indeterminate),
|
|
2187
|
+
"group-hover:ui-bg-primary-dark": checked || indeterminate,
|
|
2188
|
+
"ui-outline-primary": isFocused
|
|
2189
|
+
}), "data-test-id": "checkbox-span" },
|
|
2190
|
+
React__namespace.default.createElement("div", { className: "cweb-checkbox-icon" })
|
|
2191
|
+
)
|
|
2192
|
+
),
|
|
2193
|
+
React__namespace.default.createElement(
|
|
2194
|
+
"div",
|
|
2195
|
+
null,
|
|
2196
|
+
React__namespace.default.createElement(Label, Object.assign({}, props)),
|
|
2197
|
+
explanation && React__namespace.default.createElement(Text, { className: "ui-ml-2 ui-select-none", color: "slate-500", "data-test-id": "checkbox-explanation" }, explanation)
|
|
2198
|
+
)
|
|
2188
2199
|
)
|
|
2189
2200
|
)
|
|
2190
2201
|
);
|
|
2191
2202
|
};
|
|
2203
|
+
function Label(props) {
|
|
2204
|
+
const { text, renderLabel } = props;
|
|
2205
|
+
const divAttributes = {
|
|
2206
|
+
className: "ui-ml-2 ui-select-none",
|
|
2207
|
+
"data-test-id": "checkbox-text"
|
|
2208
|
+
};
|
|
2209
|
+
if (renderLabel) {
|
|
2210
|
+
return React__namespace.default.createElement("div", Object.assign({}, divAttributes), renderLabel(props));
|
|
2211
|
+
}
|
|
2212
|
+
if (text) {
|
|
2213
|
+
return React__namespace.default.createElement(
|
|
2214
|
+
"div",
|
|
2215
|
+
Object.assign({}, divAttributes),
|
|
2216
|
+
React__namespace.default.createElement(Text, null, text)
|
|
2217
|
+
);
|
|
2218
|
+
}
|
|
2219
|
+
return null;
|
|
2220
|
+
}
|
|
2192
2221
|
const Checkbox = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(CheckboxInner, Object.assign({}, props, { innerRef: ref })));
|
|
2193
2222
|
|
|
2194
2223
|
const ConfirmationDialogTitle = (props) => {
|
|
@@ -3507,37 +3536,6 @@ __publicField$1(Menu, "propTypes", {
|
|
|
3507
3536
|
children: PropTypes__default.default.node.isRequired
|
|
3508
3537
|
});
|
|
3509
3538
|
|
|
3510
|
-
const CheckboxListItem = ({ id, label, isChecked, isDisabled, onChange, className }) => {
|
|
3511
|
-
const [checked, setChecked] = React.useState(isChecked || false);
|
|
3512
|
-
React.useEffect(() => {
|
|
3513
|
-
setChecked(isChecked || false);
|
|
3514
|
-
}, [isChecked]);
|
|
3515
|
-
const handleItemClick = (event) => {
|
|
3516
|
-
event.stopPropagation();
|
|
3517
|
-
if (isDisabled) {
|
|
3518
|
-
return;
|
|
3519
|
-
}
|
|
3520
|
-
if (onChange) {
|
|
3521
|
-
onChange({ id, newCheckedValue: !checked });
|
|
3522
|
-
}
|
|
3523
|
-
setChecked(!checked);
|
|
3524
|
-
};
|
|
3525
|
-
const handleCheckboxClick = (event) => {
|
|
3526
|
-
event.stopPropagation();
|
|
3527
|
-
const targetId = event.target.id;
|
|
3528
|
-
const newCheckedValue = event.target.checked;
|
|
3529
|
-
if (onChange) {
|
|
3530
|
-
onChange({ id: targetId, newCheckedValue });
|
|
3531
|
-
}
|
|
3532
|
-
};
|
|
3533
|
-
return React__namespace.default.createElement(
|
|
3534
|
-
"div",
|
|
3535
|
-
{ className: classNames__default.default("ui-space-between ui-flex ui-cursor-pointer ui-flex-row ui-items-center", className), "item-id": id, onClick: handleItemClick },
|
|
3536
|
-
React__namespace.default.createElement(Text, { text: label, className: "ui-mr-auto" }),
|
|
3537
|
-
React__namespace.default.createElement(Checkbox, { isChecked: checked, isDisabled, onChange: handleCheckboxClick, id })
|
|
3538
|
-
);
|
|
3539
|
-
};
|
|
3540
|
-
|
|
3541
3539
|
var CheckboxState;
|
|
3542
3540
|
(function(CheckboxState2) {
|
|
3543
3541
|
CheckboxState2["CHECKED"] = "checked";
|
|
@@ -3569,55 +3567,86 @@ const CheckboxGroup = ({ title, items, onChange, className, isCollapsed = true,
|
|
|
3569
3567
|
}, [items]);
|
|
3570
3568
|
const handleGroupClick = (event) => {
|
|
3571
3569
|
event.stopPropagation();
|
|
3572
|
-
|
|
3573
|
-
|
|
3574
|
-
enabledItems.forEach((item) => onChange({ id: item.id, newCheckedValue: false }));
|
|
3575
|
-
} else if (onChange) {
|
|
3576
|
-
enabledItems.forEach((item) => onChange({ id: item.id, newCheckedValue: true }));
|
|
3570
|
+
if (!onChange) {
|
|
3571
|
+
return;
|
|
3577
3572
|
}
|
|
3573
|
+
const enabledItems = items.filter((item) => !item.isDisabled);
|
|
3574
|
+
const newCheckedValue = event.currentTarget.checked;
|
|
3575
|
+
enabledItems.forEach((item) => onChange({ id: item.id, newCheckedValue }));
|
|
3578
3576
|
};
|
|
3579
3577
|
const handleGroupCollapse = (event) => {
|
|
3580
|
-
|
|
3581
|
-
event.stopPropagation();
|
|
3582
|
-
}
|
|
3578
|
+
event.stopPropagation();
|
|
3583
3579
|
if (collapsible) {
|
|
3584
|
-
setCollapsed(!
|
|
3580
|
+
setCollapsed((previousState) => !previousState);
|
|
3585
3581
|
}
|
|
3586
3582
|
};
|
|
3583
|
+
const handleCheckboxChange = (e) => {
|
|
3584
|
+
onChange({
|
|
3585
|
+
id: e.target.id,
|
|
3586
|
+
newCheckedValue: e.target.checked
|
|
3587
|
+
});
|
|
3588
|
+
};
|
|
3587
3589
|
const checkedItemsCount = items === null || items === void 0 ? void 0 : items.filter((item) => item === null || item === void 0 ? void 0 : item.isChecked).length;
|
|
3588
3590
|
const groupTitle = checkedItemsCount > 0 ? `${title} (${checkedItemsCount})` : title;
|
|
3589
|
-
const CollapseStateChevron = collapsed ? ChevronRightIcon : ChevronDownIcon;
|
|
3590
3591
|
return React__namespace.default.createElement(
|
|
3591
3592
|
"div",
|
|
3592
|
-
{ className: classNames__default.default("ui-flex ui-flex-col
|
|
3593
|
+
{ className: classNames__default.default("ui-flex ui-flex-col", className) },
|
|
3593
3594
|
title && React__namespace.default.createElement(
|
|
3594
3595
|
"div",
|
|
3595
|
-
{ className:
|
|
3596
|
-
React__namespace.default.createElement(
|
|
3597
|
-
|
|
3598
|
-
|
|
3599
|
-
|
|
3600
|
-
|
|
3601
|
-
"ui-ml-4": collapsible,
|
|
3602
|
-
"ui-ml-1": !collapsible
|
|
3603
|
-
}) }),
|
|
3604
|
-
" "
|
|
3605
|
-
),
|
|
3606
|
-
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 })
|
|
3607
3602
|
),
|
|
3608
|
-
!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", {
|
|
3609
3604
|
"ui-ml-10": collapsible,
|
|
3610
3605
|
"ui-ml-5": !collapsible
|
|
3611
|
-
}
|
|
3606
|
+
}) })))
|
|
3612
3607
|
);
|
|
3613
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
|
+
}
|
|
3614
3637
|
|
|
3615
3638
|
const CheckboxList = ({ groups, onChange, className }) => {
|
|
3639
|
+
const handleCheckboxChange = (e) => {
|
|
3640
|
+
onChange({
|
|
3641
|
+
id: e.target.id,
|
|
3642
|
+
newCheckedValue: e.target.checked
|
|
3643
|
+
});
|
|
3644
|
+
};
|
|
3616
3645
|
return React__namespace.default.createElement("div", { className: classNames__default.default("ui-flex ui-flex-col", className) }, groups.map((group) => {
|
|
3617
3646
|
if (group.title) {
|
|
3618
3647
|
return React__namespace.default.createElement(CheckboxGroup, { key: group.title, items: group.items, title: group.title, isCollapsed: group.isCollapsed, collapsible: group.collapsible, onChange });
|
|
3619
3648
|
} else {
|
|
3620
|
-
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" })));
|
|
3621
3650
|
}
|
|
3622
3651
|
}));
|
|
3623
3652
|
};
|