@luscii-healthtech/web-ui 27.6.1 → 27.7.0

package/dist/components/CheckboxList/CheckboxGroup.d.ts

@@ -1,3 +1,7 @@
-/// <reference types="react" />
-import { CheckboxGroupProps } from "./CheckboxList.types";
-export declare const CheckboxGroup: ({ title, items, onChange, className, isCollapsed, collapsible, }: CheckboxGroupProps) => JSX.Element;
+import React from "react";
+import { CheckboxGroupProps, CheckboxListItem } from "./CheckboxList.types";
+type Props = CheckboxGroupProps & {
+    onStateChange?: (state: CheckboxListItem[]) => void;
+};
+export declare const CheckboxGroup: React.FC<Props>;
+export {};

package/dist/components/CheckboxList/CheckboxList.d.ts

@@ -1,4 +1,10 @@
-/// <reference types="react" />
+import React from "react";
 import { CheckboxListProps } from "./CheckboxList.types";
-export { type CheckboxListProps };
-export declare const CheckboxList: ({ groups, onChange, className, }: CheckboxListProps) => JSX.Element;
+type Props = {
+    groups: CheckboxListProps["groups"];
+    onChange?: CheckboxListProps["onChange"];
+    onStateChange?: (state: CheckboxListProps["groups"]) => void;
+    className?: string;
+};
+export { type Props as CheckboxListProps };
+export declare const CheckboxList: React.FC<Props>;

package/dist/components/CheckboxList/CheckboxList.types.d.ts

@@ -40,7 +40,7 @@ type WithCollapsible = {
     collapsible?: boolean;
 };
 export type CheckboxGroupProps = CheckboxGroup & {
-    onChange: (event: CheckboxChangeEvent) => void;
+    onChange?: (event: CheckboxChangeEvent) => void;
     className?: string;
 } & WithCollapsible;
 export interface CheckboxGroupItemProps extends CheckboxListItem {

package/dist/index.development.js

@@ -3773,7 +3773,7 @@ var CheckboxState;
   CheckboxState2["UNCHECKED"] = "unchecked";
 })(CheckboxState || (CheckboxState = {}));
 
-const CheckboxGroup = ({ title, items, onChange, className, isCollapsed = true, collapsible = true }) => {
+const CheckboxGroup = ({ title, items, onChange, onStateChange, className, isCollapsed = true, collapsible = true }) => {
   const [groupCheckboxState, setGroupCheckboxState] = React.useState(CheckboxState.UNCHECKED);
   const [collapsed, setCollapsed] = React.useState(collapsible ? isCollapsed : false);
   const [isDisabled, setIsDisabled] = React.useState(false);
@@ -3802,12 +3802,19 @@ const CheckboxGroup = ({ title, items, onChange, className, isCollapsed = true,
   }, [items]);
   const handleGroupClick = (event) => {
     event.stopPropagation();
-    if (!onChange) {
-      return;
-    }
-    const enabledItems = items.filter((item) => !item.isDisabled);
+    const enabledItems = [];
+    const newState = [];
+    items.forEach((item) => {
+      if (item.isDisabled) {
+        newState.push(item);
+        return;
+      }
+      enabledItems.push(item);
+      newState.push(Object.assign(Object.assign({}, item), { isChecked: event.currentTarget.checked }));
+    });
     const newCheckedValue = event.currentTarget.checked;
-    enabledItems.forEach((item) => onChange({ id: item.id, newCheckedValue }));
+    enabledItems.forEach((item) => onChange === null || onChange === void 0 ? void 0 : onChange({ id: item.id, newCheckedValue }));
+    onStateChange === null || onStateChange === void 0 ? void 0 : onStateChange(newState);
   };
   const handleGroupCollapse = (event) => {
     event.stopPropagation();
@@ -3816,10 +3823,16 @@ const CheckboxGroup = ({ title, items, onChange, className, isCollapsed = true,
     }
   };
   const handleCheckboxChange = (e) => {
-    onChange({
+    onChange === null || onChange === void 0 ? void 0 : onChange({
       id: e.target.id,
       newCheckedValue: e.target.checked
     });
+    onStateChange === null || onStateChange === void 0 ? void 0 : onStateChange(items.map((item) => {
+      if (item.id !== e.target.id) {
+        return item;
+      }
+      return Object.assign(Object.assign({}, item), { isChecked: e.target.checked });
+    }));
   };
   const checkedItemsCount = items === null || items === void 0 ? void 0 : items.filter((item) => item === null || item === void 0 ? void 0 : item.isChecked).length;
   const groupTitle = checkedItemsCount > 0 ? `${title} (${checkedItemsCount})` : title;
@@ -3870,16 +3883,35 @@ function GroupCollapseButton(props) {
   );
 }
 
-const CheckboxList = ({ groups, onChange, className }) => {
+const CheckboxList = ({ groups, onChange, onStateChange, className }) => {
   const handleCheckboxChange = (e) => {
-    onChange({
+    onChange === null || onChange === void 0 ? void 0 : onChange({
       id: e.target.id,
       newCheckedValue: e.target.checked
     });
+    const totalState = [...groups];
+    for (const group of groups) {
+      for (const item of group.items) {
+        if (item.id === e.target.id) {
+          item.isChecked = e.target.checked;
+        }
+      }
+    }
+    onStateChange === null || onStateChange === void 0 ? void 0 : onStateChange(totalState);
+  };
+  const handleGroupChange = ({ groupTitle, items }) => {
+    const newState = groups.map((group) => {
+      if (group.title === groupTitle) {
+        return Object.assign(Object.assign({}, group), { items });
+      }
+      return group;
+    });
+    onStateChange === null || onStateChange === void 0 ? void 0 : onStateChange(newState);
   };
   return React__namespace.default.createElement("div", { className: classNames__default.default("ui-flex ui-flex-col", className) }, groups.map((group) => {
     if (group.title) {
-      return React__namespace.default.createElement(CheckboxGroup, { key: group.title, items: group.items, title: group.title, isCollapsed: group.isCollapsed, collapsible: group.collapsible, onChange });
+      const groupTitle = group.title;
+      return React__namespace.default.createElement(CheckboxGroup, { key: group.title, items: group.items, title: group.title, isCollapsed: group.isCollapsed, collapsible: group.collapsible, onChange, onStateChange: (items) => handleGroupChange({ groupTitle, items }) });
     } else {
       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" })));
     }
@@ -4358,7 +4390,7 @@ const TabbarItem = ({ title, index, isSelected, onSelect, className, badgeCount
   });
   return React__namespace.default.createElement(
     "button",
-    { className: itemClassName, onClick: handleTabClick, "data-test-id": dataTestId },
+    { className: itemClassName, onClick: handleTabClick, "data-test-id": dataTestId, role: "tab", "aria-selected": isSelected },
     typeof title === "string" ? React__namespace.default.createElement(Text, { variant: "strong", color: "current", inline: true, className: "ui-leading-inherit" }, title) : title,
     badgeCount > 0 && React__namespace.default.createElement(Badge, { className: "ui-ml-1", badgeCount }),
     isLoading && React__namespace.default.createElement(LoadingIndicator, { asSpinner: true, spinnerColor: "gray", className: "ui-w-6" })
@@ -4374,7 +4406,7 @@ const Tabbar = ({ tabs = [], selectedIndex, onSelect, className }) => {
     setInnerSelectedIndex(index);
     onSelect === null || onSelect === void 0 ? void 0 : onSelect({ index, selectedTab: tabs[index] });
   };
-  return React__namespace.default.createElement("div", { className: classNames__default.default("ui-flex ui-w-full ui-gap-xl", className) }, tabs === null || tabs === void 0 ? void 0 : tabs.map((tabItemProps, index) => {
+  return React__namespace.default.createElement("div", { className: classNames__default.default("ui-flex ui-w-full ui-gap-xl", className), role: "tablist" }, tabs === null || tabs === void 0 ? void 0 : tabs.map((tabItemProps, index) => {
     var _a;
     const itemProps = Object.assign({ index, onSelect: handleOnTabSelect, isSelected: innerSelectedIndex === index }, tabItemProps);
     return React__namespace.default.createElement(TabbarItem, Object.assign({ key: (_a = tabItemProps.dataTestId) !== null && _a !== void 0 ? _a : index }, itemProps));