@luscii-healthtech/web-ui 30.10.5 → 31.0.0

package/dist/components/Breadcrumbs/BreadcrumbItem.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { BreadcrumbDividerProps, Crumb } from "./Breadcrumbs.types";
-export declare const BreadcrumbItem: React.FC<Crumb>;
+import type { BreadcrumbDividerProps, Crumb, CrumbRenderProp } from "./Breadcrumbs.types";
+export declare const BreadcrumbItem: React.FC<Crumb & CrumbRenderProp>;
 export declare const BreadcrumbDividerItem: React.FC<BreadcrumbDividerProps>;

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

@@ -1,16 +1,15 @@
 /// <reference types="react" />
 import Text from "../Text/Text";
-type RenderBreadcrumb = (props: {
+export type RenderBreadcrumbProps = {
     name: string;
     link?: string;
     textProps: React.ComponentProps<typeof Text>;
-}) => React.ReactNode;
-export type Crumb = {
+};
+export type RenderBreadcrumb = (props: RenderBreadcrumbProps) => React.ReactNode;
+export type CrumbRenderProp = {
     render: RenderBreadcrumb;
-    key?: string;
-    name: never;
-    link: never;
-} | {
+};
+export type Crumb = {
     name: string;
     key?: string;
     link?: string;
@@ -18,11 +17,10 @@ export type Crumb = {
 export interface BreadcrumbProps {
     crumbs: Crumb[];
     truncateAfter?: number;
-    renderItem?: RenderBreadcrumb;
+    renderItem: RenderBreadcrumb;
 }
 export type BreadcrumbDividerProps = {
     onClick: () => void;
     truncatedCrumbs: Crumb[];
 };
 export declare const isBreadcrumbDividerProps: (subject: unknown) => subject is BreadcrumbDividerProps;
-export {};

package/dist/components/FilterBar/FilterBar.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from "react";
-import { CategorizedFilters, FilterBarLocalization, TransformedSortingOptions } from "./FilterBarProps.type";
+import { CategorizedFilters, FilterBarLocalization, TransformedPresetFilterOptions, TransformedSortingOptions } from "./FilterBarProps.type";
 type FilterBarProps<SortableEntity extends object> = {
     /**
      * A list of grouped filters to be displayed in the FilterBar.
@@ -84,13 +84,15 @@ type FilterBarProps<SortableEntity extends object> = {
     /**
      * For more details, see {@link TransformedSortingOptions}.
      */
-    sortingOptions: TransformedSortingOptions<SortableEntity>;
     onFilterChange: (updatedFilters: CategorizedFilters) => void;
-    onSortingChange: (updatedSortingOptions: TransformedSortingOptions<SortableEntity>) => void;
+    sortingOptions: TransformedSortingOptions<SortableEntity>;
+    onSortingChange?: (updatedSortingOptions: TransformedSortingOptions<SortableEntity>) => void;
+    presetFilterOptions?: TransformedPresetFilterOptions<SortableEntity>;
+    onPresetFilterChange?: (updatedPresetFilterOptions: TransformedPresetFilterOptions<SortableEntity>) => void;
     /**
      * See {@link FilterBarLocalization}.
      */
     localization: FilterBarLocalization;
 };
-export declare const FilterBar: <SortableEntity extends object>({ localization, categorizedFilters, sortingOptions, ...props }: FilterBarProps<SortableEntity>) => ReactElement | null;
+export declare const FilterBar: <SortableEntity extends object>({ localization, categorizedFilters, sortingOptions, presetFilterOptions, ...props }: FilterBarProps<SortableEntity>) => ReactElement | null;
 export {};

package/dist/components/FilterBar/FilterBarProps.type.d.ts

@@ -51,6 +51,24 @@ export type FilterBarLocalization = {
      * @default "Sort"
      */
     sortLabel: string;
+    /**
+     * The string prefix displayed when a preset filter is selected from the menu.
+     *
+     * @example "Showing patients with status: "
+     *
+     * Example of preset filter options
+     * - Active
+     * - Stopped
+     *
+     * UI shows: `Showing patients with status: Active`.
+     */
+    presetFilteredByLabel?: string;
+    /**
+     * The string for the unselected state of the preset filter.
+     *
+     * @example "Show by patient status"
+     */
+    presetFiltersLabel?: string;
     /**
      * The string for the active filters and the mobile filter menu label.
      *
@@ -89,4 +107,13 @@ export type OnFilterBarFilterChange = (params: {
     changedFilterOption: TransformedFilterOption;
 }) => void;
 export type OnFilterBarSortingChange<SortableEntity extends object> = (changedSortingOption: TransformedSortingOption<SortableEntity>) => void;
+export type TransformedPresetFilterOption<SortableEntity extends object> = {
+    id: string;
+    label: string;
+    value: string;
+    isChecked: boolean;
+    filterFn?: (item: SortableEntity) => boolean;
+};
+export type TransformedPresetFilterOptions<SortableEntity extends object> = TransformedPresetFilterOption<SortableEntity>[];
+export type OnFilterBarPresetFilterChange<SortableEntity extends object> = (changedPresetFilterOption: TransformedPresetFilterOption<SortableEntity>) => void;
 export {};

package/dist/components/FilterBar/PresetFiltersMenu.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { FilterBarLocalization, OnFilterBarPresetFilterChange, TransformedPresetFilterOptions } from "./FilterBarProps.type";
+type Props<SortableEntity extends object> = {
+    localization: FilterBarLocalization;
+    presetFilterOptions: TransformedPresetFilterOptions<SortableEntity>;
+    onPresetFilterOptionChange: OnFilterBarPresetFilterChange<SortableEntity>;
+};
+export declare const PresetFiltersMenu: <SortableEntity extends object>(props: Props<SortableEntity>) => React.ReactNode;
+export {};

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

@@ -16,20 +16,26 @@ type WithPageHeaderBanner = {
         icon?: string | React.FunctionComponent<IconProps>;
     };
 };
+type AllOrNone<T> = T | {
+    [K in keyof T]?: never;
+};
+type WithBreadcrumbProps = {
+    truncateBreadcrumbsAfter?: number;
+} & AllOrNone<{
+    breadcrumbs: BreadcrumbProps["crumbs"];
+    renderBreadcrumbItem: BreadcrumbProps["renderItem"];
+}>;
 export type PageHeaderProps = {
     /**
      * These are props passed to the `Tabbar` component. The name
      * `navigation` does not convey this well.
      */
     navigation?: Omit<TabbarProps, "withoutPadding">;
-    breadcrumbs?: BreadcrumbProps["crumbs"];
-    truncateBreadcrumbsAfter?: number;
-    renderBreadcrumbItem?: BreadcrumbProps["renderItem"];
     dataTestId?: string;
     title: string | React.ReactNode;
     isPolling?: boolean;
     className?: string;
     contained?: boolean;
     accessories?: React.ReactNode;
-} & WithPageHeaderBanner;
+} & WithPageHeaderBanner & WithBreadcrumbProps;
 export {};

package/dist/components/Stack/Stack.d.ts

@@ -21,7 +21,7 @@ type Props<C extends React.ElementType> = React.ComponentPropsWithoutRef<C> & {
      * Positioning of items along the Stack’s cross axis.
      * The values are based on Tailwind's classnames and are therefore limited to the following:
      */
-    align?: "start" | "end" | "center" | "baseline" | "stretch";
+    align?: "start" | "end" | "center" | "baseline" | "stretch" | "normal";
     /**
      * Positioning of items along the Stack’s main axis.
      * The values are based on Tailwind's classnames and are therefore limited to the following:

package/dist/index.development.js

@@ -4867,21 +4867,11 @@ const defaultTextProps = {
 };
 const BreadcrumbContent = (_a) => {
   var { name, link } = _a, props = __rest(_a, ["name", "link"]);
-  if ("render" in props && !!props.render) {
-    return React__namespace.default.createElement(React__namespace.default.Fragment, null, props.render({
-      name,
-      link,
-      textProps: link ? linkTextProps : defaultTextProps
-    }));
-  }
-  if (link) {
-    return React__namespace.default.createElement(
-      router.Link,
-      { to: link },
-      React__namespace.default.createElement(Text, Object.assign({}, linkTextProps), name)
-    );
-  }
-  return React__namespace.default.createElement(Text, Object.assign({}, defaultTextProps), name);
+  return React__namespace.default.createElement(React__namespace.default.Fragment, null, props.render({
+    name,
+    link,
+    textProps: link ? linkTextProps : defaultTextProps
+  }));
 };
 const BreadcrumbDividerItem = ({ onClick, truncatedCrumbs }) => {
   return React__namespace.default.createElement(
@@ -4890,7 +4880,7 @@ const BreadcrumbDividerItem = ({ onClick, truncatedCrumbs }) => {
     React__namespace.default.createElement(
       "button",
       { onClick, title: truncatedCrumbs.map((crumb) => crumb.name).join(" / "), className: "ui-px-1" },
-      React__namespace.default.createElement(Text, { color: "blue-800", type: "strong" }, "\u2026")
+      React__namespace.default.createElement(Text, { color: "blue-800", variant: "strong" }, "\u2026")
     )
   );
 };
@@ -5085,7 +5075,11 @@ const PageHeaderBlock = ({ header, title }) => {
     );
   }
   if (header) {
-    pageHeaderComponent = React__namespace.default.createElement(PageHeader, Object.assign({}, header));
+    if (header.breadcrumbs !== void 0 && header.renderBreadcrumbItem !== void 0) {
+      pageHeaderComponent = React__namespace.default.createElement(PageHeader, Object.assign({}, header, { breadcrumbs: header.breadcrumbs, renderBreadcrumbItem: header.renderBreadcrumbItem }));
+    } else {
+      pageHeaderComponent = React__namespace.default.createElement(PageHeader, Object.assign({}, header, { breadcrumbs: void 0, renderBreadcrumbItem: void 0 }));
+    }
   }
   return React__namespace.default.createElement(
     React__namespace.default.Fragment,
@@ -6297,7 +6291,7 @@ const ActiveFilters = (props) => {
           null,
           React__namespace.default.createElement(
             "span",
-            { key: activeFilter.value, className: "ui-mx-1 ui-inline-flex ui-items-center ui-rounded-full ui-border ui-border-neutral-interactive ui-bg-white ui-py-xxxxs ui-pl-m ui-pr-xxs hover:ui-border-neutral-interactive--hover hover:ui-bg-primary-background" },
+            { key: activeFilter.id, className: "ui-mx-1 ui-inline-flex ui-items-center ui-rounded-full ui-border ui-border-neutral-interactive ui-bg-white ui-py-xxxxs ui-pl-m ui-pr-xxs hover:ui-border-neutral-interactive--hover hover:ui-bg-primary-background" },
             React__namespace.default.createElement(Text, { variant: "base" }, activeFilter.label),
             React__namespace.default.createElement(
               "button",
@@ -6392,16 +6386,58 @@ const FiltersMenus = (props) => {
   );
 };
 
+const PresetFiltersMenu = (props) => {
+  const { localization, presetFilterOptions, onPresetFilterOptionChange } = props;
+  const selectedPresetFilter = presetFilterOptions.find((presetFilterOption) => presetFilterOption.isChecked);
+  const menuLabel = presetFilterOptions ? [localization.presetFiltersLabel, selectedPresetFilter === null || selectedPresetFilter === void 0 ? void 0 : selectedPresetFilter.label].filter(Boolean).join(": ") : localization.presetFiltersLabel;
+  return React__namespace.default.createElement(
+    react.Menu,
+    { as: "div", className: "ui-relative ui-inline-block ui-text-left" },
+    React__namespace.default.createElement(
+      "div",
+      null,
+      React__namespace.default.createElement(
+        react.Menu.Button,
+        { className: "ui-group ui-inline-flex ui-justify-center ui-text-sm ui-font-medium ui-text-slate-700 hover:ui-text-slate-900" },
+        menuLabel,
+        React__namespace.default.createElement(solid.ChevronDownIcon, { className: "-ui-mr-1 ui-ml-1 ui-h-5 ui-w-5 ui-flex-shrink-0 ui-text-slate-400 group-hover:ui-text-slate-500", "aria-hidden": "true" })
+      )
+    ),
+    React__namespace.default.createElement(
+      react.Transition,
+      { as: React.Fragment, 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.Menu.Items,
+        { className: "ui-absolute ui-left-0 ui-z-10 ui-mt-2 ui-w-40 ui-origin-top-left ui-rounded-md ui-bg-white ui-shadow-2xl ui-ring-1 ui-ring-black ui-ring-opacity-5 focus:ui-outline-none" },
+        React__namespace.default.createElement("div", { className: "ui-py-1" }, presetFilterOptions.map((option) => React__namespace.default.createElement(react.Menu.Item, { key: option.id }, ({ active }) => React__namespace.default.createElement("span", { onClick: () => onPresetFilterOptionChange(Object.assign(Object.assign({}, option), { isChecked: !option.isChecked })), role: "button", className: classNames__default.default(option.isChecked ? "ui-font-medium ui-text-slate-900" : "ui-text-slate-500", "ui-block ui-px-4 ui-py-2 ui-text-sm", "ui-cursor-pointer", { "ui-bg-slate-100": active }) }, option.label))))
+      )
+    )
+  );
+};
+
 const FilterBar = (_a) => {
-  var { localization, categorizedFilters, sortingOptions } = _a, props = __rest(_a, ["localization", "categorizedFilters", "sortingOptions"]);
+  var { localization, categorizedFilters, sortingOptions, presetFilterOptions } = _a, props = __rest(_a, ["localization", "categorizedFilters", "sortingOptions", "presetFilterOptions"]);
   const onSortOptionChange = (changedSortingOption) => {
+    var _a2;
     const updatedSortingOptions = sortingOptions.map((previousSortingOption) => {
       if (previousSortingOption.id === changedSortingOption.id) {
         return Object.assign({}, changedSortingOption);
       }
       return Object.assign(Object.assign({}, previousSortingOption), { isChecked: false });
     });
-    props.onSortingChange(updatedSortingOptions);
+    (_a2 = props.onSortingChange) === null || _a2 === void 0 ? void 0 : _a2.call(props, updatedSortingOptions);
+  };
+  const onPresetFilterOptionChange = (changedPresetFilterOption) => {
+    if (!props.onPresetFilterChange || !presetFilterOptions) {
+      return;
+    }
+    const updatedPresetFilterOptions = presetFilterOptions.map((previousPresetFilterOption) => {
+      if (previousPresetFilterOption.id === changedPresetFilterOption.id) {
+        return changedPresetFilterOption;
+      }
+      return Object.assign(Object.assign({}, previousPresetFilterOption), { isChecked: false });
+    });
+    props.onPresetFilterChange(updatedPresetFilterOptions);
   };
   const onFilterOptionChange = ({ changedFilterOption }) => {
     const updatedFilters = categorizedFilters.map((categorizedFilter) => {
@@ -6425,8 +6461,18 @@ const FilterBar = (_a) => {
         { className: "ui-rounded-lg ui-py-4" },
         React__namespace.default.createElement(
           Stack,
-          { axis: "x", align: "center", justify: "between" },
-          React__namespace.default.createElement(SortMenu, { localization, sortingOptions, onSortOptionChange }),
+          { axis: "x", align: "normal", justify: "between" },
+          React__namespace.default.createElement(
+            Stack,
+            { axis: "x", gap: "m", align: "normal" },
+            presetFilterOptions && React__namespace.default.createElement(
+              React__namespace.default.Fragment,
+              null,
+              React__namespace.default.createElement(PresetFiltersMenu, { localization, presetFilterOptions, onPresetFilterOptionChange }),
+              React__namespace.default.createElement(Box, { className: "ui-h-full ui-w-[1px] ui-border-l-1 ui-border-color-border" })
+            ),
+            React__namespace.default.createElement(SortMenu, { localization, sortingOptions, onSortOptionChange })
+          ),
           React__namespace.default.createElement(FiltersMenus, { filters: categorizedFilters, onFilterOptionChange })
         )
       ),