@luscii-healthtech/web-ui 35.13.1 → 35.14.0

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

@@ -1,5 +1,5 @@
 import { ReactElement } from "react";
-import { CategorizedFilters, FilterBarLocalization, TransformedPresetFilterOptions, TransformedSortingOptions } from "./FilterBarProps.type";
+import { CategorizedFilters, FilterBarLocalization, HasSingleSelection, TransformedPresetFilterOptions, TransformedSortingOptions } from "./FilterBarProps.type";
 type FilterBarProps<SortableEntity extends object> = {
     /**
      * A list of grouped filters to be displayed in the FilterBar.
@@ -93,6 +93,6 @@ type FilterBarProps<SortableEntity extends object> = {
      * See {@link FilterBarLocalization}.
      */
     localization: FilterBarLocalization;
-};
+} & HasSingleSelection;
 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

@@ -1,3 +1,15 @@
+export type HasSingleSelection = {
+    /**
+     * When `true`, will still allow multiple filters to be added
+     * but each filter can only have a single value selected.
+     *
+     * The checkboxes in the filter list are hidden and you only see a checkmark ✓ on the selected item.
+     *
+     * `[⚠️ WARNING]` - this doesn't work with the `presetFilterOptions` prop, so do not combine them.
+     *
+     */
+    singleSelection?: boolean;
+};
 /**
  * The object used to create a filter dropdown in the component.
  * This is used based on the dataset passed to FilterBar, so we always calculate the filters

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

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

package/dist/components/Select/Select.d.ts

@@ -29,6 +29,12 @@ export interface SelectProps<Option extends OptionMinimal = OptionMinimal, IsMul
      * This change is protected by policy: https://app.glassfrog.com/organizations/13950/orgnav/policies/12870328
      */
     value?: any;
+    /**
+     * The internal processing in this component is causing issues, but we cannot
+     * just remove it. This prop allows us to use the component in a fully controlled
+     * way, without any processing of the value.
+     */
+    skipValueProcessing?: boolean;
 }
 /**
  * A wrapper around react-select to style it according to our design specification.

package/dist/index.development.js

@@ -4289,12 +4289,25 @@ const SelectLoadingIndicator = (props) => React__namespace.default.createElement
 function generateCustomStyles(hasError) {
   return {
     option: (baseStyles, state) => {
-      return Object.assign(Object.assign({}, baseStyles), { fontWeight: state.isSelected ? "bold" : "normal", fontSize: "14px", backgroundColor: "none", color: "inherit", position: "relative", padding: "0.75rem", opacity: state.isDisabled ? "0.5" : 1, "&:after": {
-        visibility: state.isSelected ? "visible" : "hidden"
-      }, transition: "background-color 0.3s ease-in-out", "&:hover": {
+      return Object.assign(Object.assign({}, baseStyles), {
+        fontWeight: state.isSelected ? "bold" : "normal",
+        fontSize: "14px",
         // tailwind blue-50
-        backgroundColor: state.isSelected ? "transparent" : "#F2FAFD"
-      }, pointerEvents: state.isDisabled ? "none" : "auto" });
+        backgroundColor: state.isFocused ? "#F2FAFD" : "none",
+        color: "inherit",
+        position: "relative",
+        padding: "0.75rem",
+        opacity: state.isDisabled ? "0.5" : 1,
+        "&:after": {
+          visibility: state.isSelected ? "visible" : "hidden"
+        },
+        transition: "background-color 0.3s ease-in-out",
+        "&:hover": {
+          // tailwind blue-50
+          backgroundColor: state.isSelected ? "transparent" : "#F2FAFD"
+        },
+        pointerEvents: state.isDisabled ? "none" : "auto"
+      });
     },
     container: (baseStyles) => {
       return Object.assign(Object.assign({}, baseStyles), { flexGrow: "initial" });
@@ -4355,7 +4368,7 @@ function generateCustomStyles(hasError) {
   };
 }
 const Select = React__namespace.default.forwardRef((_a, innerRef) => {
-  var { isError = false, styles, options, onChange, value, width = "full", isMulti, className } = _a, otherProps = __rest(_a, ["isError", "styles", "options", "onChange", "value", "width", "isMulti", "className"]);
+  var { isError = false, styles, options, onChange, value, width = "full", isMulti, className, skipValueProcessing } = _a, otherProps = __rest(_a, ["isError", "styles", "options", "onChange", "value", "width", "isMulti", "className", "skipValueProcessing"]);
   const customStyles = generateCustomStyles(isError);
   const mergedStyles = ReactSelect.mergeStyles(customStyles, styles);
   const isOptionsGrouped = !options ? false : options.reduce((acc, o) => acc || "options" in o && !("values" in o), false);
@@ -4375,7 +4388,7 @@ const Select = React__namespace.default.forwardRef((_a, innerRef) => {
     var { children } = _a2, commonProps = __rest(_a2, ["children"]);
     return React__namespace.default.createElement(ReactSelect.components.SelectContainer, Object.assign({}, commonProps, { innerProps: Object.assign({}, commonProps.innerProps, Object.assign({}, getDataAttributes())) }), children);
   };
-  return React__namespace.default.createElement(ReactSelect__default.default, Object.assign({}, otherProps, { ref: innerRef, styles: mergedStyles, options, onChange: onChangeWrapped, value: valueWrapped, isMulti, className: classNames__default.default("customized-select", className, {
+  return React__namespace.default.createElement(ReactSelect__default.default, Object.assign({}, otherProps, { ref: innerRef, styles: mergedStyles, options, onChange: skipValueProcessing ? onChange : onChangeWrapped, value: skipValueProcessing ? value : valueWrapped, isMulti, className: classNames__default.default("customized-select", className, {
     "ui-w-16": width === "sm",
     "ui-w-32": width === "md",
     "ui-w-56": width === "lg",
@@ -6421,7 +6434,7 @@ const ActiveFilters = (props) => {
           null,
           React__namespace.default.createElement(
             "span",
-            { 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" },
+            { 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" },
             React__namespace.default.createElement(Text, { variant: "base" }, activeFilter.label),
             React__namespace.default.createElement(
               "button",
@@ -6463,17 +6476,42 @@ const SortMenu = (props) => {
     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" }, sortingOptions.map((option) => React__namespace.default.createElement(react.Menu.Item, { key: option.id }, ({ active }) => React__namespace.default.createElement("span", { onClick: () => onSortOptionChange(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))))
-      )
+      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(
+            "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)
+          ),
+          React__namespace.default.createElement(
+            "span",
+            { className: classNames__default.default("ui-ml-auto", {
+              "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 FiltersMenus = (props) => {
-  const { filters } = props;
+  const { filters, singleSelection } = props;
+  const multiSelection = !singleSelection;
   return React__namespace.default.createElement(
     "div",
     { className: "ui-hidden sm:ui-block" },
@@ -6497,16 +6535,34 @@ const FiltersMenus = (props) => {
             { 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.Popover.Panel,
-              { className: "ui-absolute ui-right-0 ui-z-10 ui-mt-2 ui-origin-top-right ui-rounded-md ui-bg-white ui-p-4 ui-shadow-2xl ui-ring-1 ui-ring-black ui-ring-opacity-5 focus:ui-outline-none" },
-              React__namespace.default.createElement("form", { className: "ui-max-h-120 ui-space-y-4 ui-overflow-y-auto ui-p-1" }, categorizedFilter.options.map((option) => React__namespace.default.createElement(
+              { 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: "ui-flex ui-items-center", 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: () => {
+                { 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", checked: option.isChecked, onChange: () => {
                   props.onFilterOptionChange({
                     changedFilterOption: Object.assign(Object.assign({}, option), { isChecked: !option.isChecked })
                   });
-                }, className: "ui-form-checkbox ui-h-4 ui-w-4 ui-rounded ui-border-slate-300 ui-text-primary focus:ui-ring-primary" }),
-                React__namespace.default.createElement("span", { className: "ui-ml-3 ui-whitespace-nowrap ui-pr-6 ui-text-sm ui-font-medium ui-capitalize ui-text-slate-900" }, option.label)
+                }, 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" })
+                )
               )))
             )
           )
@@ -6575,7 +6631,7 @@ const FilterBar = (_a) => {
         if (categorizedFilterOption.id === changedFilterOption.id) {
           return changedFilterOption;
         }
-        return categorizedFilterOption;
+        return Object.assign(Object.assign({}, categorizedFilterOption), { isChecked: props.singleSelection ? false : categorizedFilterOption.isChecked });
       }) });
     });
     props.onFilterChange(updatedFilters);
@@ -6603,7 +6659,7 @@ const FilterBar = (_a) => {
             ),
             React__namespace.default.createElement(SortMenu, { localization, sortingOptions, onSortOptionChange })
           ),
-          React__namespace.default.createElement(FiltersMenus, { filters: categorizedFilters, onFilterOptionChange })
+          React__namespace.default.createElement(FiltersMenus, { singleSelection: props.singleSelection, filters: categorizedFilters, onFilterOptionChange })
         )
       ),
       React__namespace.default.createElement(Divider, { version: "v2", color: "border" }),