@luscii-healthtech/web-ui 9.0.1 → 9.1.0
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 +9 -0
- package/dist/index.development.js +51 -30
- 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 +14 -0
- package/dist/web-ui.esm.js +1 -1
- package/dist/web-ui.esm.js.map +1 -1
- package/package.json +1 -2
|
@@ -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
|
/**
|
|
@@ -50,6 +52,13 @@ export interface CheckboxProps {
|
|
|
50
52
|
*/
|
|
51
53
|
error?: boolean;
|
|
52
54
|
innerRef?: React.Ref<HTMLInputElement>;
|
|
55
|
+
/**
|
|
56
|
+
* Renders a completely custom label. Can change its contents or
|
|
57
|
+
* appearance based on the props of the checkbox item.
|
|
58
|
+
*
|
|
59
|
+
* Overrides the `text` prop.
|
|
60
|
+
*/
|
|
61
|
+
renderLabel?: (props: CheckboxProps) => JSX.Element | null;
|
|
53
62
|
}
|
|
54
63
|
export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
|
|
55
64
|
export default Checkbox;
|
|
@@ -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-label {\n display: flex;\n align-items: center;\n margin-bottom: 0;\n}\n.cweb-checkbox.type-regular .cweb-checkbox-icon-container {\n width: 16px;\n height: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n border: 1px solid #cccccc;\n border-radius: 4px;\n}\n.cweb-checkbox.type-regular.hasError .cweb-checkbox-icon-container {\n border: 1px solid #ff6266;\n}\n.cweb-checkbox.type-regular
|
|
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-label {\n display: flex;\n align-items: center;\n margin-bottom: 0;\n}\n.cweb-checkbox.type-regular .cweb-checkbox-icon-container {\n width: 16px;\n height: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n border: 1px solid #cccccc;\n border-radius: 4px;\n}\n.cweb-checkbox.type-regular.hasError .cweb-checkbox-icon-container {\n border: 1px solid #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, 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("cweb-checkbox-label ui-group ui-relative ui-overflow-hidden", "ui-flex ui-w-full", {
|
|
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) => {
|
|
@@ -3512,18 +3541,10 @@ const CheckboxListItem = ({ id, label, isChecked, isDisabled, onChange, classNam
|
|
|
3512
3541
|
React.useEffect(() => {
|
|
3513
3542
|
setChecked(isChecked || false);
|
|
3514
3543
|
}, [isChecked]);
|
|
3515
|
-
const
|
|
3516
|
-
event.stopPropagation();
|
|
3544
|
+
const handleCheckboxClick = (event) => {
|
|
3517
3545
|
if (isDisabled) {
|
|
3518
3546
|
return;
|
|
3519
3547
|
}
|
|
3520
|
-
if (onChange) {
|
|
3521
|
-
onChange({ id, newCheckedValue: !checked });
|
|
3522
|
-
}
|
|
3523
|
-
setChecked(!checked);
|
|
3524
|
-
};
|
|
3525
|
-
const handleCheckboxClick = (event) => {
|
|
3526
|
-
event.stopPropagation();
|
|
3527
3548
|
const targetId = event.target.id;
|
|
3528
3549
|
const newCheckedValue = event.target.checked;
|
|
3529
3550
|
if (onChange) {
|
|
@@ -3531,8 +3552,8 @@ const CheckboxListItem = ({ id, label, isChecked, isDisabled, onChange, classNam
|
|
|
3531
3552
|
}
|
|
3532
3553
|
};
|
|
3533
3554
|
return React__namespace.default.createElement(
|
|
3534
|
-
"
|
|
3535
|
-
{ className: classNames__default.default("ui-space-between ui-flex ui-cursor-pointer ui-flex-row ui-items-center", className), "item-id": id
|
|
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 },
|
|
3536
3557
|
React__namespace.default.createElement(Text, { text: label, className: "ui-mr-auto" }),
|
|
3537
3558
|
React__namespace.default.createElement(Checkbox, { isChecked: checked, isDisabled, onChange: handleCheckboxClick, id })
|
|
3538
3559
|
);
|