@luscii-healthtech/web-ui 23.2.9 → 23.2.11

package/dist/components/CheckBoxListModal/CheckboxListModal.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import { CheckboxGroupItemProps } from "../CheckboxList/CheckboxList.types";
 export type Item = {
     group?: string;
@@ -10,6 +10,7 @@ export interface Group {
 }
 interface CheckboxListModalTexts {
     title: string;
+    searchInputLabel?: string;
     confirmLabel: string;
     cancelLabel: string;
     searchPlaceHolder?: string;
@@ -17,6 +18,11 @@ interface CheckboxListModalTexts {
 }
 export interface CheckboxListModalProps {
     texts: CheckboxListModalTexts;
+    /**
+     * Accessory component to be rendered above the search input.
+     * For example, a button or any control that fit the use case.
+     */
+    accessory: React.ReactNode;
     initialItems: Array<Item>;
     isLoadingInitialItems?: boolean;
     isOpen: boolean;
@@ -26,5 +32,5 @@ export interface CheckboxListModalProps {
     className?: string;
     hasSearch: boolean;
 }
-export declare const CheckboxListModal: ({ texts, initialItems, isLoadingInitialItems, isOpen, onSave, onCloseClick, filterItem, hasSearch, }: CheckboxListModalProps) => JSX.Element;
+export declare const CheckboxListModal: ({ texts, accessory, initialItems, isLoadingInitialItems, isOpen, onSave, onCloseClick, filterItem, hasSearch, }: CheckboxListModalProps) => JSX.Element;
 export {};

package/dist/components/Divider/Divider.d.ts

@@ -11,6 +11,10 @@ type HrProps = React.ComponentPropsWithoutRef<"hr"> & {
      * - Doesn't contain any logic about when it should be hidden.
      */
     version: "v2";
+    /**
+     * The color of the divider. Defaults to "border".
+     */
+    color?: "divider" | "border";
 };
 type Props = DividerProps | HrProps;
 export declare const Divider: React.FC<Props>;

package/dist/index.development.js

@@ -3849,6 +3849,25 @@ const CheckboxList = ({ groups, onChange, className }) => {
   }));
 };
 
+const Divider = (props) => {
+  if ("version" in props) {
+    return React__namespace.default.createElement(HrDivider, Object.assign({}, props));
+  }
+  const { className, dark } = props, rest = __rest(props, ["className", "dark"]);
+  const darkTheme = Boolean(dark);
+  return React__namespace.default.createElement("div", Object.assign({ className: classNames__default.default("ui-border-color ui-block ui-w-full ui-border-b ui-border-solid last:ui-border-b-0", className, {
+    "ui-border-color-divider": !darkTheme,
+    "ui-border-slate-600": darkTheme
+  }) }, rest));
+};
+function HrDivider(props) {
+  const { className, color = "border" } = props;
+  return React__namespace.default.createElement("hr", { className: classNames__default.default({
+    "ui-border-color-divider": color === "divider",
+    "ui-border-color-border": color === "border"
+  }, className) });
+}
+
 const transformToGroups = (items) => {
   const pinned = items.find((option) => option.isPinned);
   const itemsWithGroup = items.filter((option) => option.group);
@@ -3869,7 +3888,7 @@ const transformToGroups = (items) => {
   }
   return [...groups, restGroup];
 };
-const CheckboxListModal = ({ texts, initialItems, isLoadingInitialItems, isOpen, onSave, onCloseClick, filterItem = () => true, hasSearch = false }) => {
+const CheckboxListModal = ({ texts, accessory, initialItems, isLoadingInitialItems, isOpen, onSave, onCloseClick, filterItem = () => true, hasSearch = false }) => {
   const [items, setItems] = React.useState([]);
   const [visibleItems, setVisibleItems] = React.useState([]);
   const [groups, setGroups] = React.useState([]);
@@ -3913,11 +3932,22 @@ const CheckboxListModal = ({ texts, initialItems, isLoadingInitialItems, isOpen,
         onClick: handleOnCloseClick
       }
     }, scrollableContent: true },
+    accessory && React__namespace.createElement(
+      "div",
+      { className: "ui-mb-6 ui-flex ui-flex-col ui-space-y-6" },
+      accessory,
+      React__namespace.createElement(Divider, { version: "v2", color: "divider" })
+    ),
     isLoadingInitialItems && React__namespace.createElement(LoadingIndicator, null),
     hasSearch && !isLoadingInitialItems && React__namespace.createElement(
       "div",
       { className: "ui-mb-2" },
-      React__namespace.createElement(SearchInput, { className: "ui-w-130", value: search, placeholder: texts.searchPlaceHolder, onChange: handleOnSearchChange })
+      React__namespace.createElement(
+        "label",
+        { htmlFor: "checkbox-list-search", className: "ui-flex ui-flex-col ui-space-y-2" },
+        texts.searchInputLabel && React__namespace.createElement(Text, { variant: "strong" }, texts.searchInputLabel),
+        React__namespace.createElement(SearchInput, { id: "checkbox-list-search", width: "full", value: search, placeholder: texts.searchPlaceHolder, onChange: handleOnSearchChange })
+      )
     ),
     !isLoadingInitialItems && (items === null || items === void 0 ? void 0 : items.length) > 0 && React__namespace.createElement(CheckboxList, { groups, onChange: handleOnItemChange }),
     !isLoadingInitialItems && (items === null || items === void 0 ? void 0 : items.length) === 0 && React__namespace.createElement(Text, { text: texts.emptyState })
@@ -3956,22 +3986,6 @@ const NavLayout = (props) => {
   );
 };
 
-const Divider = (props) => {
-  if ("version" in props) {
-    return React__namespace.default.createElement(HrDivider, Object.assign({}, props));
-  }
-  const { className, dark } = props, rest = __rest(props, ["className", "dark"]);
-  const darkTheme = Boolean(dark);
-  return React__namespace.default.createElement("div", Object.assign({ className: classNames__default.default("ui-border-color ui-block ui-w-full ui-border-b ui-border-solid last:ui-border-b-0", className, {
-    "ui-border-color-divider": !darkTheme,
-    "ui-border-slate-600": darkTheme
-  }) }, rest));
-};
-function HrDivider(props) {
-  const { className } = props;
-  return React__namespace.default.createElement("hr", { className: classNames__default.default("ui-border-color-border", className) });
-}
-
 const NavMenuFooter = ({ text, subtext, visible = true }) => {
   if (!visible) {
     return null;