@luscii-healthtech/web-ui 38.4.2 → 38.4.4

package/dist/components/BaseList/BaseList.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import type { BaseListItemProps, BaseListProps } from "./BaseList.types";
-declare const BaseListInner: <T extends BaseListItemProps>({ dataTestId, title, headerButton, emptyStateMessage, isLoading, items, headerTransparent, itemComponent, footer, withBorder, }: BaseListProps<T>, ref: React.ForwardedRef<HTMLUListElement>) => JSX.Element;
+declare const BaseListInner: <T extends BaseListItemProps>({ dataTestId, title, headerButton, headerAccessory, emptyStateMessage, isLoading, items, headerTransparent, itemComponent, footer, withBorder, }: BaseListProps<T>, ref: React.ForwardedRef<HTMLUListElement>) => JSX.Element;
 export declare const BaseList: <T extends BaseListItemProps>(props: BaseListProps<T> & {
     ref?: React.ForwardedRef<HTMLUListElement>;
 }) => ReturnType<typeof BaseListInner>;

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

@@ -30,19 +30,34 @@ export type OnAssetLoadErrorPayload = Pick<BaseListItemProps, "itemId" | "subtit
 export interface BaseListProps<T extends BaseListItemProps = BaseListItemProps> {
     items: T[];
     title?: string | TitleProps;
+    /**
+     * @deprecated props accepting props from other components should accept components instead.
+     *
+     * Use `headerAccessory` instead.
+     */
     headerButton?: ButtonDefinition<PrimaryButtonProps>;
+    headerAccessory?: React.ReactNode;
     headerTransparent?: boolean;
     itemComponent?: React.FC<T>;
     emptyStateMessage?: string;
     isLoading?: boolean;
     dataTestId?: string;
     footer?: ReactNode;
+    /**
+     * This prop will surround the component with a 1px slate-300 border.
+     */
     withBorder?: boolean;
     ref?: Ref<HTMLUListElement>;
 }
 export type BaseListHeaderProps = {
     title?: string | TitleProps;
+    /**
+     * @deprecated props are accepting props from other components should accept components instead.
+     *
+     * Use `headerAccessory` instead.
+     */
     button?: ButtonDefinition<PrimaryButtonProps>;
+    headerAccessory?: React.ReactNode;
     transparent?: boolean;
     withBorder?: boolean;
 };

package/dist/index.development.js

@@ -1675,31 +1675,32 @@ const ListSkeleton = ({ items, dataTestId = "list-skeleton" }) => {
   );
 };
 
-const BaseListHeader = ({ title, button, transparent, withBorder }) => {
-  const className = classNames__default.default("ui-flex ui-rounded-t ui-flex-row ui-items-center ui-space-x-4", {
-    "ui-py-4": !button,
-    "ui-py-2": button,
-    "ui-bg-white ui-border-slate-200 ui-px-4": !transparent,
-    "ui-border-b": !transparent && !withBorder,
-    "ui-border ui-border-b-0": withBorder && !transparent,
-    "ui-mb-px": transparent,
-    "ui-justify-between": title && button,
-    "ui-justify-start": title && !button,
-    "ui-justify-end": !title && button
-  });
+const BaseListHeader = ({ title, button, headerAccessory, transparent, withBorder }) => {
+  const hasHeaderComponent = Boolean(button || headerAccessory);
   return React__namespace.default.createElement(
     "div",
-    { "data-test-id": "base-list-header", className },
+    { "data-test-id": "base-list-header", className: classNames__default.default("ui-flex ui-flex-row ui-items-center ui-space-x-4 ui-rounded-t-2xl", {
+      "ui-py-4": !hasHeaderComponent,
+      "ui-py-2": hasHeaderComponent,
+      "ui-border-slate-300 ui-bg-white ui-px-4": !transparent,
+      "ui-border-b ui-border-b-slate-200": !transparent && !withBorder,
+      "ui-border ui-border-b-0": withBorder && !transparent,
+      "ui-mb-px": transparent,
+      "ui-justify-between": title && hasHeaderComponent,
+      "ui-justify-start": title && !hasHeaderComponent,
+      "ui-justify-end": !title && hasHeaderComponent
+    }) },
     typeof title === "string" && React__namespace.default.createElement(Title, { variant: "xs", text: title }),
     title && typeof title === "object" && React__namespace.default.createElement(Title, Object.assign({ variant: "xs" }, title)),
-    button && React__namespace.default.createElement("div", { className: "ui-space-x-3" }, React__namespace.default.createElement(button.buttonType, button.buttonProps))
+    button && React__namespace.default.createElement("div", { className: "ui-space-x-3" }, React__namespace.default.createElement(button.buttonType, button.buttonProps)),
+    headerAccessory && React__namespace.default.createElement("div", { className: "ui-space-x-3" }, headerAccessory)
   );
 };
 
 const BaseListEmptyState = ({ message, roundTop, withBorder }) => {
-  const className = classNames__default.default("ui-p-4 ui-bg-white ui-rounded-b", {
+  const className = classNames__default.default("ui-p-4 ui-bg-white ui-rounded-b-2xl", {
     "first:ui-rounded-t": roundTop,
-    "ui-border-slate-200 ui-border": withBorder
+    "ui-border-slate-300 ui-border": withBorder
   });
   return React__namespace.default.createElement(
     "div",
@@ -1988,10 +1989,10 @@ function createAssetLoadError(payload, callback) {
 const BaseListItem = React__namespace.default.forwardRef(({ itemId, title, tooltipId, roundTop, roundBottom = true, isDraggable, isSelected, subtitle, accessories, onlyShowAccessoriesOnHover, icon, onClick, handleItemClick, onAssetLoadError, dataTestId, renderDragHandle, withBorder, htmlProps }, ref) => {
   const clickHandler = onClick !== null && onClick !== void 0 ? onClick : handleItemClick;
   const className = classNames__default.default("ui-group", "ui-flex ui-flex-row ui-items-center ui-space-x-4 ui-bg-white", "ui-px-4 ui-border-b ui-border-slate-200", {
-    "first:ui-rounded-t": roundTop,
+    "first:ui-rounded-t-2xl": roundTop,
+    "last:ui-rounded-b-2xl": roundBottom,
     "ui-cursor-pointer": clickHandler,
     "hover:ui-bg-blue-50 ui-transition-colors ui-ease-in-out ui-duration-300": clickHandler,
-    "last:ui-rounded-b ": roundBottom,
     "last:ui-border-b-0": !withBorder,
     "first:ui-border-t ui-border-l ui-border-r": withBorder
   });
@@ -2019,17 +2020,17 @@ const BaseListItem = React__namespace.default.forwardRef(({ itemId, title, toolt
   );
 });
 
-const BaseListInner = ({ dataTestId, title, headerButton, emptyStateMessage, isLoading, items, headerTransparent, itemComponent, footer, withBorder = false }, ref) => {
+const BaseListInner = ({ dataTestId, title, headerButton, headerAccessory, emptyStateMessage, isLoading, items, headerTransparent, itemComponent, footer, withBorder = false }, ref) => {
   if (isLoading) {
     return React__namespace.default.createElement(ListSkeleton, { items: items.length });
   }
-  const hasHeader = Boolean(title || headerButton);
+  const hasHeader = Boolean(title || headerButton || headerAccessory);
   const roundTop = Boolean(!hasHeader || hasHeader && headerTransparent);
   const roundBottom = footer === void 0 || footer === null;
   return React__namespace.default.createElement(
     "div",
     { "data-test-id": dataTestId || "base-list-component" },
-    hasHeader && React__namespace.default.createElement(BaseListHeader, { title, button: headerButton, transparent: headerTransparent, withBorder }),
+    hasHeader && React__namespace.default.createElement(BaseListHeader, { title, button: headerButton, headerAccessory, transparent: headerTransparent, withBorder }),
     items.length > 0 ? React__namespace.default.createElement("ul", { ref }, items.map((props) => itemComponent ? React__namespace.default.createElement(itemComponent, Object.assign(Object.assign({ key: props.itemId }, props), {
       roundBottom,
       roundTop,
@@ -6756,43 +6757,42 @@ const FilterMenu = (props) => {
     React__namespace.default.createElement(
       react.Transition,
       { enter: "ui-transition ui-ease-out ui-duration-100", enterFrom: "ui-transform ui-opacity-0 ui-scale-95", enterTo: "ui-transform ui-opacity-100 ui-scale-100", leave: "ui-transition ui-ease-in ui-duration-75", leaveFrom: "ui-transform ui-opacity-100 ui-scale-100", leaveTo: "ui-transform ui-opacity-0 ui-scale-95" },
-      React__namespace.default.createElement(
-        react.PopoverPanel,
-        { className: classNames__default.default("ui-min-w-58", "ui-absolute ui-z-10 ui-mt-2", "ui-rounded-2xl ui-bg-white ui-shadow-2xl ui-ring-1 ui-ring-black ui-ring-opacity-5", "focus:ui-outline-none", "ui-border ui-border-neutral-border-high-contrast", {
-          // Align popover to the left side of the button label
-          "ui-left-4 ui-origin-top-left": alignPopover === "left",
-          // Align popover to the right side of the chevron icon
-          "ui-right-3 ui-origin-top-right": alignPopover === "right"
-        }) },
-        React__namespace.default.createElement("form", { className: "ui-max-h-120 ui-overflow-y-auto" }, categorizedFilter.options.map((option) => React__namespace.default.createElement(
-          "label",
-          { key: `${option.id}`, className: classNames__default.default("first-of-type:ui-rounded-t-2xl", "last-of-type:ui-rounded-b-2xl", "ui-flex ui-items-center ui-p-3", "ui-cursor-pointer", "ui-transition-colors ui-duration-300 ui-ease-in-out hover:ui-bg-primary-background"), htmlFor: `filter-${option.id}`, role: multiSelection ? "menuitemcheckbox" : "menuitem" },
-          React__namespace.default.createElement("input", { id: `filter-${option.id}`, name: `${option.value}`, defaultValue: option.value, type: "checkbox", defaultChecked: option.isChecked, onChange: () => {
-            props.onFilterOptionChange({
-              changedFilterOption: Object.assign(Object.assign({}, option), { isChecked: !option.isChecked })
-            });
-          }, className: classNames__default.default("ui-form-checkbox ui-h-4 ui-w-4 ui-rounded ui-border-slate-300 ui-text-primary focus:ui-ring-primary", {
-            "ui-hidden": singleSelection
-          }) }),
-          React__namespace.default.createElement(
-            "span",
-            { className: classNames__default.default({
-              "ui-pr-l": multiSelection,
-              "ui-ml-s": multiSelection
-            }) },
-            React__namespace.default.createElement(Text, { className: "ui-whitespace-nowrap ui-capitalize", variant: option.isChecked ? "strong" : "base" }, option.label)
-          ),
-          React__namespace.default.createElement(
-            "span",
-            { className: classNames__default.default("ui-ml-auto ui-pr-s", {
-              "ui-hidden": multiSelection,
-              "ui-text-primary": option.isChecked,
-              "ui-text-transparent": !option.isChecked
-            }) },
-            React__namespace.default.createElement(solid.CheckIcon, { className: "ui-ml-s ui-h-5 ui-w-5 ui-flex-shrink-0" })
-          )
-        )))
-      )
+      React__namespace.default.createElement(react.PopoverPanel, { className: classNames__default.default("ui-min-w-58", "ui-absolute ui-z-10 ui-mt-2", "ui-rounded-2xl ui-bg-white ui-shadow-2xl ui-ring-1 ui-ring-black ui-ring-opacity-5", "focus:ui-outline-none", "ui-border ui-border-neutral-border-high-contrast", {
+        // Align popover to the left side of the button label
+        "ui-left-4 ui-origin-top-left": alignPopover === "left",
+        // Align popover to the right side of the chevron icon
+        "ui-right-3 ui-origin-top-right": alignPopover === "right"
+      }) }, ({ close }) => React__namespace.default.createElement("form", { className: "ui-max-h-120 ui-overflow-y-auto" }, categorizedFilter.options.map((option) => React__namespace.default.createElement(
+        "label",
+        { key: `${option.id}`, className: classNames__default.default("first-of-type:ui-rounded-t-2xl", "last-of-type:ui-rounded-b-2xl", "ui-flex ui-items-center ui-p-3", "ui-cursor-pointer", "ui-transition-colors ui-duration-300 ui-ease-in-out hover:ui-bg-primary-background"), htmlFor: `filter-${option.id}`, role: multiSelection ? "menuitemcheckbox" : "menuitem" },
+        React__namespace.default.createElement("input", { id: `filter-${option.id}`, name: `${option.value}`, defaultValue: option.value, type: "checkbox", defaultChecked: option.isChecked, onChange: () => {
+          props.onFilterOptionChange({
+            changedFilterOption: Object.assign(Object.assign({}, option), { isChecked: !option.isChecked })
+          });
+          if (singleSelection) {
+            close();
+          }
+        }, className: classNames__default.default("ui-form-checkbox ui-h-4 ui-w-4 ui-rounded ui-border-slate-300 ui-text-primary focus:ui-ring-primary", {
+          "ui-hidden": singleSelection
+        }) }),
+        React__namespace.default.createElement(
+          "span",
+          { className: classNames__default.default({
+            "ui-pr-l": multiSelection,
+            "ui-ml-s": multiSelection
+          }) },
+          React__namespace.default.createElement(Text, { className: "ui-whitespace-nowrap ui-capitalize", variant: option.isChecked ? "strong" : "base" }, option.label)
+        ),
+        React__namespace.default.createElement(
+          "span",
+          { className: classNames__default.default("ui-ml-auto ui-pr-s", {
+            "ui-hidden": multiSelection,
+            "ui-text-primary": option.isChecked,
+            "ui-text-transparent": !option.isChecked
+          }) },
+          React__namespace.default.createElement(solid.CheckIcon, { className: "ui-ml-s ui-h-5 ui-w-5 ui-flex-shrink-0" })
+        )
+      ))))
     )
   );
 };