@luscii-healthtech/web-ui 38.2.3 → 38.3.1

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

@@ -81,6 +81,13 @@ type FilterBarProps<SortableEntity extends object> = {
      *```
      */
     categorizedFilters: CategorizedFilters;
+    /**
+     * Whether to hide the active filters section when no filters are applied.
+     * Works by checking if any of the filters have an `isChecked` value set to `true`.
+     *
+     * This defaults to `true`.
+     */
+    hideActiveFiltersWhenEmpty?: boolean;
     /**
      * For more details, see {@link TransformedSortingOptions}.
      */
@@ -94,5 +101,5 @@ type FilterBarProps<SortableEntity extends object> = {
      */
     localization: FilterBarLocalization;
 } & HasSingleSelection;
-export declare const FilterBar: <SortableEntity extends object>({ localization, categorizedFilters, sortingOptions, presetFilterOptions, ...props }: FilterBarProps<SortableEntity>) => ReactElement | null;
+export declare const FilterBar: <SortableEntity extends object>({ localization, categorizedFilters, sortingOptions, presetFilterOptions, hideActiveFiltersWhenEmpty, ...props }: FilterBarProps<SortableEntity>) => ReactElement | null;
 export {};

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

@@ -101,7 +101,7 @@ export type TransformedFilterOption = {
     isChecked: boolean;
 };
 export type TransformedFilterOptions = TransformedFilterOption[];
-type CategorizedFilter = {
+export type CategorizedFilter = {
     key: string;
     label: string;
     options: TransformedFilterOptions;
@@ -128,4 +128,8 @@ export type TransformedPresetFilterOption<SortableEntity extends object> = {
 };
 export type TransformedPresetFilterOptions<SortableEntity extends object> = TransformedPresetFilterOption<SortableEntity>[];
 export type OnFilterBarPresetFilterChange<SortableEntity extends object> = (changedPresetFilterOption: TransformedPresetFilterOption<SortableEntity>) => void;
+type OnChangeOptionParam = TransformedFilterOption | TransformedSortingOption<object> | TransformedPresetFilterOption<object>;
+export type OnFilterMenuChange = (params: {
+    changedFilterOption: OnChangeOptionParam;
+}) => void;
 export {};

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

@@ -0,0 +1,11 @@
+import React from "react";
+import { type CategorizedFilter, type OnFilterMenuChange } from "./FilterBarProps.type";
+type Props = {
+    alignPopover?: "left" | "right";
+    categorizedFilter: CategorizedFilter;
+    onFilterOptionChange: OnFilterMenuChange;
+    showCheckedAmount?: boolean;
+    singleSelection?: boolean;
+};
+export declare const FilterMenu: (props: Props) => React.JSX.Element;
+export {};

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

@@ -1,11 +1,11 @@
 import React from "react";
-import { type CategorizedFilters, type HasSingleSelection, type OnFilterBarFilterChange } from "./FilterBarProps.type";
+import { type CategorizedFilters, type HasSingleSelection, type OnFilterMenuChange } from "./FilterBarProps.type";
 type FiltersMenusProps = {
     filters: CategorizedFilters;
-    onFilterOptionChange: OnFilterBarFilterChange;
+    onFilterOptionChange: OnFilterMenuChange;
 } & HasSingleSelection;
 /**
- * Each of the menu lists on the right side of the the `FilterBar` component.
+ * Each of the menu lists on the right side of the `FilterBar` component.
  */
 export declare const FiltersMenus: React.FC<FiltersMenusProps>;
 export {};

package/dist/index.development.js

@@ -6710,11 +6710,11 @@ const ActiveFilters = (props) => {
         "div",
         { className: "ui-mt-2 sm:ui-ml-4 sm:ui-mt-0" },
         React__namespace.default.createElement(Stack, { axis: "x", gap: "m", align: "center", wrap: true }, activeFilters.map((activeFilter, idx) => React__namespace.default.createElement(
-          React__namespace.default.Fragment,
-          null,
+          React.Fragment,
+          { key: `${activeFilter.id}-${activeFilter.label}` },
           React__namespace.default.createElement(
             "span",
-            { key: `${activeFilter.id}-${activeFilter.label}`, 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" },
+            { 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",
@@ -6736,153 +6736,126 @@ const ActiveFilters = (props) => {
   );
 };
 
-const SortMenu = (props) => {
-  const { localization, sortingOptions, onSortOptionChange } = props;
-  const selectedSorting = sortingOptions.find((sortingOption) => sortingOption.isChecked);
-  const menuLabel = selectedSorting ? `${localization.sortedByLabel} ${selectedSorting.label}` : localization.sortLabel;
+const FilterMenu = (props) => {
+  const { showCheckedAmount = false, alignPopover = "left", categorizedFilter, singleSelection = false } = props;
+  const multiSelection = !singleSelection;
+  const amountOfCheckedItems = categorizedFilter.options.filter((option) => option.isChecked).length;
   return React__namespace.default.createElement(
-    react.Menu,
-    { as: "div", className: "ui-relative ui-inline-block ui-text-left" },
+    react.Popover,
+    { key: categorizedFilter.key, className: "ui-relative ui-inline-block ui-px-4 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.PopoverButton,
+      { className: "ui-group ui-inline-flex ui-justify-center ui-text-sm ui-font-medium ui-text-slate-700 hover:ui-text-slate-900" },
+      React__namespace.default.createElement("span", null, categorizedFilter.label),
+      amountOfCheckedItems > 0 && showCheckedAmount ? React__namespace.default.createElement("span", { className: "ui-ml-1.5 ui-rounded ui-bg-slate-200 ui-px-1.5 ui-py-0.5 ui-text-xs ui-font-semibold ui-tabular-nums ui-text-slate-700" }, amountOfCheckedItems) : null,
+      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,
       { 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: classNames__default.default("ui-z-10", "ui-absolute ui-left-0 ui-origin-top-left", "ui-min-w-58 ui-rounded-2xl ui-bg-white ui-shadow-2xl", "ui-border ui-border-neutral-border-high-contrast", "ui-ring-1 ui-ring-black ui-ring-opacity-5 focus:ui-outline-none") }, sortingOptions.map((option) => React__namespace.default.createElement(react.Menu.Item, { key: option.id }, () => {
-        return React__namespace.default.createElement(
-          "div",
-          { className: classNames__default.default(
-            // Making sure the hover color doesn't bleed
-            // out of the menu cointainer
-            "first-of-type:ui-rounded-t-2xl",
-            "last-of-type:ui-rounded-b-2xl",
-            "ui-flex ui-items-center ui-p-s",
-            "ui-cursor-pointer",
-            "ui-transition-colors ui-duration-300 ui-ease-in-out hover:ui-bg-blue-50"
-          ), onClick: () => {
-            onSortOptionChange(Object.assign(Object.assign({}, option), { isChecked: !option.isChecked }));
-          }, role: "button" },
+      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-block ui-text-nowrap ui-text-sm") },
-            React__namespace.default.createElement(Text, { variant: option.isChecked ? "strong" : "base" }, option.label)
+            { 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", {
+            { 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" })
           )
-        );
-      })))
+        )))
+      )
     )
   );
 };
 
+const isSortingOption = (option) => {
+  if (!option || !lodash.isObjectLike(option)) {
+    return false;
+  }
+  return typeof option === "object" && "sortingCompare" in option && lodash.isFunction(option === null || option === void 0 ? void 0 : option.sortingCompare);
+};
+const SortMenu = (props) => {
+  const { localization, sortingOptions, onSortOptionChange } = props;
+  const selectedSorting = sortingOptions.find((sortingOption) => sortingOption.isChecked);
+  const menuLabel = selectedSorting ? `${localization.sortedByLabel} ${selectedSorting.label}` : localization.sortLabel;
+  const filter = {
+    key: "sort",
+    label: menuLabel,
+    options: sortingOptions
+  };
+  const onFilterOptionChange = ({ changedFilterOption }) => {
+    if (isSortingOption(changedFilterOption)) {
+      onSortOptionChange(changedFilterOption);
+    }
+  };
+  return React__namespace.default.createElement(FilterMenu, { categorizedFilter: filter, onFilterOptionChange, singleSelection: true });
+};
+
 const FiltersMenus = (props) => {
   const { filters, singleSelection } = props;
-  const multiSelection = !singleSelection;
   return React__namespace.default.createElement(
     "div",
     { className: "ui-hidden sm:ui-block" },
     React__namespace.default.createElement(
       "div",
       { className: "ui-flow-root" },
-      React__namespace.default.createElement(react.Popover.Group, { className: "-ui-mx-4 ui-flex ui-items-center ui-divide-x ui-divide-slate-200" }, filters.map((categorizedFilter) => {
-        const amountOfCheckedItems = categorizedFilter.options.filter((option) => option.isChecked).length;
-        return React__namespace.default.createElement(
-          react.Popover,
-          { key: categorizedFilter.key, className: "ui-relative ui-inline-block ui-px-4 ui-text-left" },
-          React__namespace.default.createElement(
-            react.Popover.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" },
-            React__namespace.default.createElement("span", null, categorizedFilter.label),
-            amountOfCheckedItems > 0 ? React__namespace.default.createElement("span", { className: "ui-ml-1.5 ui-rounded ui-bg-slate-200 ui-px-1.5 ui-py-0.5 ui-text-xs ui-font-semibold ui-tabular-nums ui-text-slate-700" }, amountOfCheckedItems) : null,
-            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,
-            { 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.Popover.Panel,
-              { className: classNames__default.default("ui-min-w-58", "ui-absolute ui-right-0 ui-z-10 ui-mt-2 ui-origin-top-right", "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") },
-              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-transition-colors ui-duration-300 ui-ease-in-out hover:ui-bg-blue-50"), htmlFor: `filter-${option.id}` },
-                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.PopoverGroup, { className: "-ui-mx-4 ui-flex ui-items-center ui-divide-x ui-divide-slate-200" }, filters.map((categorizedFilter) => React__namespace.default.createElement(FilterMenu, { alignPopover: "right", showCheckedAmount: true, key: `filter-menu-${categorizedFilter.key}`, categorizedFilter, onFilterOptionChange: props.onFilterOptionChange, singleSelection })))
     )
   );
 };
 
+const isPresetFilterOption = (option) => {
+  if (!option || !lodash.isObjectLike(option)) {
+    return false;
+  }
+  return typeof option === "object" && "filterFn" in option && lodash.isFunction(option.filterFn);
+};
 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,
-      { 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 { presetFiltersLabel = "" } = localization;
+  const menuLabel = presetFilterOptions ? [presetFiltersLabel, selectedPresetFilter === null || selectedPresetFilter === void 0 ? void 0 : selectedPresetFilter.label].filter(Boolean).join(": ") : presetFiltersLabel;
+  const filter = {
+    key: "presetFilters",
+    label: menuLabel,
+    options: presetFilterOptions
+  };
+  const onFilterOptionChange = ({ changedFilterOption }) => {
+    if (isPresetFilterOption(changedFilterOption)) {
+      onPresetFilterOptionChange(changedFilterOption);
+    }
+  };
+  return React__namespace.default.createElement(FilterMenu, { categorizedFilter: filter, onFilterOptionChange, singleSelection: true });
 };
 
 const FilterBar = (_a) => {
-  var { localization, categorizedFilters, sortingOptions, presetFilterOptions } = _a, props = __rest(_a, ["localization", "categorizedFilters", "sortingOptions", "presetFilterOptions"]);
+  var { localization, categorizedFilters, sortingOptions, presetFilterOptions, hideActiveFiltersWhenEmpty = true } = _a, props = __rest(_a, ["localization", "categorizedFilters", "sortingOptions", "presetFilterOptions", "hideActiveFiltersWhenEmpty"]);
   const onSortOptionChange = (changedSortingOption) => {
     var _a2;
     const updatedSortingOptions = sortingOptions.map((previousSortingOption) => {
@@ -6916,6 +6889,8 @@ const FilterBar = (_a) => {
     });
     props.onFilterChange(updatedFilters);
   };
+  const hasFiltersApplied = categorizedFilters.some((categorizedFilter) => categorizedFilter.options.some((option) => option.isChecked));
+  const shouldShowActiveFilters = hasFiltersApplied ? true : !hideActiveFiltersWhenEmpty;
   return React__namespace.default.createElement(
     "div",
     null,
@@ -6923,11 +6898,11 @@ const FilterBar = (_a) => {
       "section",
       { "aria-labelledby": "filter-heading" },
       React__namespace.default.createElement(
-        "div",
-        { className: "ui-rounded-lg ui-py-4" },
+        Box,
+        { borderRadius: "l", py: "m" },
         React__namespace.default.createElement(
           Stack,
-          { axis: "x", align: "normal", justify: "between" },
+          { axis: "x", align: "normal", justify: "between", className: "-ui-ml-m" },
           React__namespace.default.createElement(
             Stack,
             { axis: "x", gap: "m", align: "normal" },
@@ -6942,8 +6917,12 @@ const FilterBar = (_a) => {
           React__namespace.default.createElement(FiltersMenus, { singleSelection: props.singleSelection, filters: categorizedFilters, onFilterOptionChange })
         )
       ),
-      React__namespace.default.createElement(Divider, { version: "v2", color: "border" }),
-      React__namespace.default.createElement(ActiveFilters, { localization, filters: categorizedFilters, onRemoveActiveFilter: onFilterOptionChange })
+      shouldShowActiveFilters && React__namespace.default.createElement(
+        React__namespace.default.Fragment,
+        null,
+        React__namespace.default.createElement(Divider, { version: "v2", color: "border" }),
+        React__namespace.default.createElement(ActiveFilters, { localization, filters: categorizedFilters, onRemoveActiveFilter: onFilterOptionChange })
+      )
     )
   );
 };