@luscii-healthtech/web-ui 2.47.9 → 2.48.0

package/dist/components/Checkbox/Checkbox.d.ts

@@ -13,6 +13,7 @@ export interface CheckboxProps {
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     className?: string;
     error?: boolean;
+    innerRef?: React.Ref<HTMLInputElement>;
 }
-export declare const Checkbox: ({ id, text, explanation, type, isChecked, isIndeterminate, isDisabled, name, value, onChange, className, error, }: CheckboxProps) => JSX.Element;
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
 export default Checkbox;

package/dist/components/Form/FormFieldCheckbox.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { FormCheckboxProps } from "./form.types";
+export declare const FormFieldCheckbox: React.ForwardRefExoticComponent<FormCheckboxProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Form/form.types.d.ts

@@ -5,6 +5,7 @@ import { RadioGroupProps } from "../RadioGroup/RadioGroupV2";
 import { SelectProps } from "../Select/Select";
 import { ImagePickerProps } from "../ImagePicker/ImagePicker";
 import { PartialProperties } from "../../types/general.types";
+import { CheckboxProps } from "../Checkbox/Checkbox";
 export declare type AllowedTextInputTypes = Extract<HTMLInputTypeAttribute, "email" | "number" | "password" | "text">;
 export declare type FormFieldWidth = "sm" | "md" | "lg" | "xl" | "full";
 export interface GenericFormProps<TFieldValues extends FieldValues> {
@@ -27,7 +28,7 @@ export interface FormFieldDecoratorProps {
     info?: string;
     decoratorClassname?: string;
 }
-export declare type FormFieldProps<TFieldValues> = FormFieldInputProps | FormFieldSelectProps | FormFieldImagePickerProps | FormFieldRadioGroupProps | FormFieldRowProps<TFieldValues>;
+export declare type FormFieldProps<TFieldValues> = FormFieldInputProps | FormFieldSelectProps | FormFieldImagePickerProps | FormFieldRadioGroupProps | FormFieldRowProps<TFieldValues> | FormFieldCheckboxBaseProps;
 export interface FormFieldRowProps<TFieldValues> extends Record<keyof FormFieldGenericProps<never>, never> {
     type: "row";
     key: string;
@@ -48,6 +49,10 @@ export interface FormFieldImagePickerProps extends FormFieldGenericProps<ImagePi
     type: "imagePicker";
     fieldProps: ImagePickerFieldProps;
 }
+export interface FormFieldCheckboxBaseProps extends FormFieldGenericProps<Omit<CheckboxProps, "name" | "type">> {
+    type: "checkbox";
+    variant?: CheckboxProps["type"];
+}
 export interface FormFieldDecoratorWithGeneratedProps extends FormFieldDecoratorProps {
     name: string;
     fieldErrors: FieldErrors;
@@ -71,4 +76,8 @@ export interface FormImagePickerProps extends ImagePickerFieldProps, FormFieldDe
     control: Control;
     rules?: Exclude<RegisterOptions, "valueAsNumber" | "valueAsDate" | "setValueAs">;
 }
+export interface FormCheckboxProps extends FormFieldCheckboxBaseProps, FormFieldDecoratorWithGeneratedProps {
+    control: Control;
+    rules?: Exclude<RegisterOptions, "valueAsNumber" | "valueAsDate" | "setValueAs">;
+}
 export {};

package/dist/components/List/ListSkeleton.d.ts

@@ -1,6 +1,7 @@
 import "./ListSkeleton.scss";
 declare type ListSkeletonProps = {
     items: number;
+    dataTestId?: string;
 };
-export declare const ListSkeleton: ({ items }: ListSkeletonProps) => JSX.Element;
+export declare const ListSkeleton: ({ items, dataTestId, }: ListSkeletonProps) => JSX.Element;
 export {};

package/dist/web-ui.cjs.development.js

@@ -1213,7 +1213,9 @@ var ListItemSkeleton = function ListItemSkeleton() {
 };
 
 var ListSkeleton = function ListSkeleton(_ref) {
-  var items = _ref.items;
+  var items = _ref.items,
+      _ref$dataTestId = _ref.dataTestId,
+      dataTestId = _ref$dataTestId === void 0 ? "list-skeleton" : _ref$dataTestId;
   var skeletonItems = Array.from({
     length: items || 5
   }, function (_, i) {
@@ -1222,6 +1224,7 @@ var ListSkeleton = function ListSkeleton(_ref) {
     });
   });
   return /*#__PURE__*/React__default.createElement("div", {
+    "data-test-id": dataTestId,
     className: "flex flex-col divide-y divide-slate-200 bg-white border-slate-50 border rounded-lg shadow list-skeleton"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-row items-center px-4 py-2"
@@ -2433,7 +2436,7 @@ var CenteredHero = function CenteredHero(_ref) {
 var css_248z$9 = ".cweb-checkbox {\n  outline: none;\n}\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\n.cweb-checkbox.type-regular .cweb-checkbox-label {\n  display: flex;\n  align-items: center;\n  margin-bottom: 0;\n}\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\n.cweb-checkbox.type-regular.hasError .cweb-checkbox-icon-container {\n  border: 1px solid #ff6266;\n}\n\n.cweb-checkbox.type-regular .cweb-checkbox-icon {\n  display: block;\n}\n\n.cweb-checkbox.type-regular.is-focused .cweb-checkbox-icon-container {\n  border-color: #0074dd;\n}\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\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\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\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\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\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\n.cweb-checkbox.type-switch.is-checked .cweb-checkbox-icon-container {\n  background-color: #6abfa6;\n}\n\n.cweb-checkbox.type-switch.is-checked .cweb-checkbox-icon-container:after {\n  left: 32px;\n}";
 styleInject(css_248z$9);
 
-var Checkbox = function Checkbox(_ref) {
+var CheckboxInner = function CheckboxInner(_ref) {
   var id = _ref.id,
       text = _ref.text,
       explanation = _ref.explanation,
@@ -2448,13 +2451,14 @@ var Checkbox = function Checkbox(_ref) {
       value = _ref.value,
       onChange = _ref.onChange,
       className = _ref.className,
-      error = _ref.error;
+      error = _ref.error,
+      innerRef = _ref.innerRef;
 
   var _useState = React.useState(false),
       checked = _useState[0],
       setChecked = _useState[1];
 
-  var _useState2 = React.useState(false),
+  var _useState2 = React.useState(isIndeterminate),
       indeterminate = _useState2[0],
       setIndeterminate = _useState2[1];
 
@@ -2462,7 +2466,6 @@ var Checkbox = function Checkbox(_ref) {
       isFocused = _useState3[0],
       setIsFocused = _useState3[1];
 
-  var checkboxRef = React__default.useRef(null);
   var containerClassName = classNames("cweb-checkbox", className, {
     "is-focused": isFocused,
     "is-checked": checked && !indeterminate,
@@ -2480,12 +2483,15 @@ var Checkbox = function Checkbox(_ref) {
     setIndeterminate(isIndeterminate);
   }, [isIndeterminate]);
   React.useEffect(function () {
-    if (checkboxRef != null && checkboxRef.current) {
-      checkboxRef.current.indeterminate = !indeterminate;
+    if (innerRef) {
+      if (typeof innerRef !== "function" && innerRef != null && innerRef.current) {
+        innerRef.current.indeterminate = !indeterminate;
+      }
     }
   }, [indeterminate]);
 
   var handleChange = function handleChange(event) {
+    setChecked(event.currentTarget.checked);
     event.stopPropagation();
     setIndeterminate(false);
 
@@ -2513,7 +2519,7 @@ var Checkbox = function Checkbox(_ref) {
     }
   }, /*#__PURE__*/React__default.createElement("input", {
     id: id,
-    ref: checkboxRef,
+    ref: innerRef,
     "data-test-id": "checkbox-" + name,
     className: "cweb-checkbox-input",
     name: name,
@@ -2550,6 +2556,12 @@ var Checkbox = function Checkbox(_ref) {
   }))));
 };
 
+var Checkbox = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React__default.createElement(CheckboxInner, _extends({}, props, {
+    innerRef: ref
+  }));
+});
+
 var ConfirmationDialogTitle = function ConfirmationDialogTitle(props) {
   var _props$title;
 
@@ -6807,6 +6819,52 @@ var FormImagePicker = /*#__PURE__*/React__default.forwardRef(function (_ref, inn
   }));
 });
 
+var _excluded$s = ["control", "name", "rules", "fieldErrors", "fieldRequired", "label", "info", "decoratorClassname"];
+var FormFieldCheckbox = /*#__PURE__*/React__default.forwardRef(function (_ref, innerRef) {
+  var control = _ref.control,
+      name = _ref.name,
+      rules = _ref.rules,
+      fieldErrors = _ref.fieldErrors,
+      fieldRequired = _ref.fieldRequired,
+      label = _ref.label,
+      info = _ref.info,
+      decoratorClassname = _ref.decoratorClassname,
+      fieldProps = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+
+  return /*#__PURE__*/React__default.createElement(FormFieldDecorator, {
+    name: name,
+    fieldErrors: fieldErrors,
+    fieldRequired: fieldRequired,
+    label: "",
+    info: info,
+    decoratorClassname: decoratorClassname
+  }, /*#__PURE__*/React__default.createElement(index_ie11.Controller, {
+    name: name,
+    control: control,
+    rules: rules,
+    render: function render(_ref2) {
+      var _onChange = _ref2.onChange,
+          value = _ref2.value;
+      return /*#__PURE__*/React__default.createElement(Checkbox, _extends({}, fieldProps, {
+        // Might be a tech debt due to how we named this
+        // but the field type is always a checkbox, its shape
+        // or style is what changes. The name `variant` was added
+        // to the props to avoid confusion.
+        type: fieldProps.variant,
+        isChecked: value,
+        error: hasError(name, fieldErrors),
+        ref: innerRef,
+        name: name,
+        onChange: function onChange(event) {
+          _onChange(event.target.checked);
+        },
+        text: label,
+        value: value
+      }));
+    }
+  }));
+});
+
 /**
  * Create a straight forward Form, which takes away the 'overhead' of react-hook-form.
  *
@@ -6933,6 +6991,21 @@ function FormFieldMapper(formFieldProps, useFormReturn) {
         }));
       }
 
+    case "checkbox":
+      {
+        return /*#__PURE__*/React__default.createElement(FormFieldCheckbox, _extends({
+          key: name
+        }, decoratorProps, {
+          fieldRequired: isRequired(options),
+          fieldErrors: errors
+        }, fieldProps, {
+          type: "checkbox",
+          name: name,
+          rules: options,
+          control: control
+        }));
+      }
+
     default:
       return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
   }
@@ -7907,10 +7980,10 @@ var Icons = {
   StatusColoredIcon: StatusColoredIcon
 };
 
-var _excluded$s = ["name"];
+var _excluded$t = ["name"];
 var Icon = function Icon(_ref) {
   var name = _ref.name,
-      iconProps = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+      iconProps = _objectWithoutPropertiesLoose(_ref, _excluded$t);
 
   return /*#__PURE__*/React__default.createElement(Icons[name], iconProps);
 };