@luscii-healthtech/web-ui 30.0.2 → 30.0.4

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

@@ -34,6 +34,10 @@ type Props<C extends React.ElementType> = React.ComponentPropsWithoutRef<C> & {
      * Reverse the order of the items
      */
     reverse?: boolean;
+    /**
+     * Wrap content over multiple lines
+     */
+    wrap?: boolean;
     children?: React.ReactNode;
     className?: string;
 };

package/dist/index.development.js

@@ -2235,12 +2235,13 @@ const Box = (props) => {
 };
 
 const Stack = (props) => {
-  const { children, gap, align = "start", justify = "normal", axis = "y", className, reverse } = props, attributes = __rest(props, ["children", "gap", "align", "justify", "axis", "className", "reverse"]);
+  const { children, gap, align = "start", justify = "normal", axis = "y", className, reverse, wrap = false } = props, attributes = __rest(props, ["children", "gap", "align", "justify", "axis", "className", "reverse", "wrap"]);
   const stackClasses = classNames__default.default(`ui-flex`, {
     "ui-flex-row": axis === "x",
     "ui-flex-col": axis === "y",
     "ui-flex-row-reverse": axis === "x" && reverse,
     "ui-flex-col-reverse": axis === "y" && reverse,
+    "ui-flex-wrap": wrap,
     [`ui-gap-${gap}`]: gap
   }, `ui-items-${align} ui-justify-${justify}`);
   return React__namespace.default.createElement(Box, Object.assign({ className: classNames__default.default(stackClasses, className) }, attributes), children);
@@ -5300,7 +5301,9 @@ const ImageCategory = (props) => {
           "ui-h-11 ui-w-11": props.isTypeCompact,
           "ui-h-22 ui-w-36": !props.isTypeCompact
         }) },
-        React__namespace.default.createElement(Image$2, { className: "ui-h-full ui-w-full ui-rounded", onClick: props.handleImageClick, src: option, "data-index": index })
+        React__namespace.default.createElement(Image$2, { className: "ui-h-full ui-w-full ui-rounded", onClick: props.handleImageClick, src: option, "data-index": index, wrapperClassName: classNames__default.default({
+          "ui-h-full ui-w-full": !props.isTypeCompact
+        }) })
       );
     }))
   );
@@ -5975,11 +5978,6 @@ function RenderTopBar(props) {
   return null;
 }
 
-const CloseIcon = () => React__namespace.default.createElement(
-  "svg",
-  { className: "ui-h-2 ui-w-2", stroke: "currentColor", fill: "none", viewBox: "0 0 8 8" },
-  React__namespace.default.createElement("path", { strokeLinecap: "round", strokeWidth: "1.5", d: "M1 1l6 6m0-6L1 7" })
-);
 const defaultRemoveFilterOptionLabelGetter = (activeFilter) => `Remove filter ${activeFilter.label}`;
 const ActiveFilters = (props) => {
   var _a;
@@ -5995,28 +5993,32 @@ const ActiveFilters = (props) => {
     { className: "ui-bg-gray-100" },
     React__namespace.default.createElement(
       "div",
-      { className: "ui-min-h-15 ui-max-w-7xl ui-px-4 ui-py-3 sm:ui-flex sm:ui-items-center sm:ui-px-6" },
-      React__namespace.default.createElement("h3", { className: "ui-text-sm ui-font-medium ui-text-gray-500" }, localization.filtersLabel),
-      React__namespace.default.createElement("div", { "aria-hidden": "true", className: "ui-hidden ui-h-5 ui-w-px ui-bg-gray-300 sm:ui-ml-4 sm:ui-block" }),
+      { className: "ui-min-h-15 ui-max-w-7xl ui-py-s sm:ui-flex sm:ui-items-center" },
+      React__namespace.default.createElement(Text, { variant: "base", color: "slate-500" }, localization.filtersLabel),
       React__namespace.default.createElement(
         "div",
         { className: "ui-mt-2 sm:ui-ml-4 sm:ui-mt-0" },
-        React__namespace.default.createElement("div", { className: "-ui-m-1 ui-flex ui-flex-wrap ui-items-center" }, activeFilters.map((activeFilter) => React__namespace.default.createElement(
-          "span",
-          { key: activeFilter.value, className: "pr-2 ui-m-1 ui-inline-flex ui-items-center ui-rounded-full ui-border ui-border-gray-200 ui-bg-white ui-py-1.5 ui-pl-3 ui-text-sm ui-font-medium ui-text-gray-900" },
-          React__namespace.default.createElement("span", null, activeFilter.label),
+        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__namespace.default.createElement(
-            "button",
-            { type: "button", "aria-label": removeFilterOptionLabelGetter(activeFilter), className: "ui-mx-1 ui-inline-flex ui-h-4 ui-w-4 ui-flex-shrink-0 ui-rounded-full ui-p-1 ui-text-gray-400 hover:ui-bg-gray-200 hover:ui-text-gray-500", onClick: () => onRemoveActiveFilter({
-              changedFilterOption: {
-                isChecked: false,
-                id: activeFilter.id,
-                label: activeFilter.label,
-                value: activeFilter.value
-              }
-            }) },
-            React__namespace.default.createElement(CloseIcon, null)
-          )
+            "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" },
+            React__namespace.default.createElement(Text, { variant: "base" }, activeFilter.label),
+            React__namespace.default.createElement(
+              "button",
+              { type: "button", "aria-label": removeFilterOptionLabelGetter(activeFilter), className: "ui-mx-1 ui-inline-flex ui-h-6 ui-w-6 ui-flex-shrink-0 ui-rounded-full ui-p-0 ui-text-on-surface", onClick: () => onRemoveActiveFilter({
+                changedFilterOption: {
+                  isChecked: false,
+                  id: activeFilter.id,
+                  label: activeFilter.label,
+                  value: activeFilter.value
+                }
+              }) },
+              React__namespace.default.createElement(CrossIcon, null)
+            )
+          ),
+          idx < activeFilters.length - 1 && React__namespace.default.createElement("div", { "aria-hidden": "true", className: "ui-h-5 ui-w-px ui-bg-slate-300" })
         )))
       )
     )
@@ -6128,12 +6130,13 @@ const FilterBar = (_a) => {
         "div",
         { className: "ui-rounded-lg ui-py-4" },
         React__namespace.default.createElement(
-          "div",
-          { className: "ui-flex ui-items-center ui-justify-between ui-px-4 sm:ui-px-6" },
+          Stack,
+          { axis: "x", align: "center", justify: "between" },
           React__namespace.default.createElement(SortMenu, { localization, sortingOptions, onSortOptionChange }),
           React__namespace.default.createElement(FiltersMenus, { filters: categorizedFilters, onFilterOptionChange })
         )
       ),
+      React__namespace.default.createElement(Divider, { version: "v2", color: "border" }),
       React__namespace.default.createElement(ActiveFilters, { localization, filters: categorizedFilters, onRemoveActiveFilter: onFilterOptionChange })
     )
   );