@luscii-healthtech/web-ui 30.10.4 → 30.11.0

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

@@ -20,6 +20,11 @@ export interface ConfirmationDialogChoice<T extends string = string> {
 }
 export interface ConfirmationDialogProps {
     children?: React.ReactNode;
+    /**
+     * Defaults to "dialog-small". These are a subset
+     * of the sizes of the BaseModal component.
+     */
+    size?: "dialog-small" | "dialog-medium";
     texts: ConfirmationDialogTexts;
     isOpen: boolean;
     onCancel: () => void;

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/Modal/ModalBase.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { type ModalHeaderProps } from "./ModalHeader";
 import { type ModalFooterProps } from "./ModalFooter";
-export type ModalSize = "small" | "medium" | "wide";
+export type ModalSize = "dialog-small" | "dialog-medium" | "small" | "medium" | "wide";
 export type ModalBaseProps = Omit<ModalHeaderProps, "title"> & {
     children: React.ReactNode;
     size?: ModalSize;

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

@@ -2402,7 +2402,8 @@ const ModalBase = (props) => {
     { isOpen, data: { "test-id": (_a = props.dataTestId) !== null && _a !== void 0 ? _a : "react-modal" }, contentLabel: props.title, overlayClassName: classNames__default.default("ui-px-2 ui-py-15", "ui-z-20", "ui-fixed ui-top-0 ui-bottom-0 ui-left-0 ui-right-0", "ui-overflow-x-hidden ui-overflow-y-auto", "ui-bg-overlay"), onRequestClose: props.onCloseClick, shouldFocusAfterRender: false, shouldCloseOnOverlayClick: false, className: classNames__default.default("ui-mx-auto ui-my-0", "ui-relative", "ui-rounded-lg ui-bg-white ui-shadow-lg ui-outline-none", {
       "ui-overflow-y-hidden": props.scrollableContent,
       "ui-mt-17": props.withExtraMarginTop,
-      "md:ui-w-80": size === "small",
+      "md:ui-w-120": size === "dialog-medium",
+      "md:ui-w-80": size === "small" || size === "dialog-small",
       "md:ui-w-132": size === "medium",
       "md:ui-w-216": size === "wide"
     }) },
@@ -3015,7 +3016,7 @@ const ConfirmationDialogMessage = (props) => {
 };
 
 const ConfirmationDialog = (_a) => {
-  var { dataTestId = "confirmation-dialog-modal" } = _a, props = __rest(_a, ["dataTestId"]);
+  var { dataTestId = "confirmation-dialog-modal", size = "dialog-small" } = _a, props = __rest(_a, ["dataTestId", "size"]);
   const { children, choices } = props;
   const { message } = props.texts;
   const [selectedChoice, setSelectedChoice] = React.useState(choices === null || choices === void 0 ? void 0 : choices.options.find((choice) => choice.value === choices.defaultChoice));
@@ -3036,7 +3037,7 @@ const ConfirmationDialog = (_a) => {
   };
   return React__namespace.default.createElement(
     ModalBase,
-    { size: "small", dataTestId, isOpen: props.isOpen, withExtraMarginTop: true, onCloseClick: handleOnCloseClick, footerTrailingComponents: {
+    { size, dataTestId, isOpen: props.isOpen, withExtraMarginTop: true, onCloseClick: handleOnCloseClick, footerTrailingComponents: {
       primaryButtonProps: {
         text: props.texts.confirmLabel,
         onClick: onConfirmHandler,
@@ -6296,7 +6297,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",
@@ -6391,16 +6392,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) => {
@@ -6424,8 +6467,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 })
         )
       ),