@axinom/mosaic-ui 0.72.4 → 0.72.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.72.4",
+  "version": "0.72.6",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -113,5 +113,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "52cfc2a06ab37c154514d8527440aceaab6d05ee"
+  "gitHead": "efcad0d91a11ba7fbdd2efd9568a75e61f796a44"
 }

package/src/components/Explorer/Explorer.module.scss

@@ -57,7 +57,9 @@
     height: calc(100vh - #{$header-height} - 30px);
   }
 
-  .filtersHidden {
+  // When no filters are rendered, the List spans both grid columns so it
+  // fills the full available width instead of only the second (1fr) track.
+  .listFullWidth {
     grid-column: 1 / -1;
   }
 }

package/src/components/Explorer/Explorer.tsx

@@ -262,13 +262,15 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
     listRef.current?.resetSelection();
   }, []);
 
-  const { activeFilters, Filters, collapseFilters } = useFilters<T>({
-    stationKey,
-    globalStateOptions,
-    filterOptions,
-    defaultFilterValues,
-    onFiltersChange: onFilterChangedHandler,
-  });
+  const { activeFilters, Filters, collapseFilters, hasFilters } = useFilters<T>(
+    {
+      stationKey,
+      globalStateOptions,
+      filterOptions,
+      defaultFilterValues,
+      onFiltersChange: onFilterChangedHandler,
+    },
+  );
 
   const {
     data,
@@ -454,6 +456,7 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
         {Filters}
         <List<T>
           ref={listRef}
+          className={clsx({ [classes.listFullWidth]: !hasFilters })}
           columns={columns}
           data={data}
           isLoading={isLoading}

package/src/components/Explorer/helpers/useFilters.tsx

@@ -17,6 +17,9 @@ interface UseFiltersReturnType<T extends Data> {
   readonly Filters: JSX.Element;
   readonly activeFilters: FilterValues<T>;
   readonly collapseFilters: () => void;
+  /** Whether any filters are available to render. Mirrors the condition the
+   * `Filters` component uses to decide whether it renders anything at all. */
+  readonly hasFilters: boolean;
 }
 
 export const useFilters = <T extends Data>({
@@ -70,5 +73,6 @@ export const useFilters = <T extends Data>({
     Filters: FilterComponent,
     activeFilters,
     collapseFilters,
+    hasFilters: Boolean(filterOptions?.length),
   };
 };

package/src/components/Filters/Filters.module.scss

@@ -3,44 +3,47 @@
 .container {
   @include boxSizing;
 
+  display: flex;
+  flex-direction: column;
+
   height: 100%;
   width: $filter-width;
 
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-auto-rows: min-content;
-  overflow-x: hidden;
-  overflow-y: auto;
-  gap: 5px;
-  padding: 5px;
-
-  transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1);
-
   background-color: var(
     --filter-controller-background-color,
     $filter-controller-background-color
   );
+
+  transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
 
-  background-color: color-mix(
-    in srgb,
-    var(--filter-background-color, white) 50%,
-    transparent
+  background-color: var(
+    --filter-controller-background-color,
+    $filter-controller-background-color
   );
+  border-bottom: 1px solid
+    var(--filter-header-border-color, $filter-header-border-color);
 
   .headerButton {
-    width: 40px;
-    height: 40px;
+    width: 44px;
+    height: 44px;
 
     svg {
-      height: 100%;
+      height: 80%;
       * {
-        stroke: var(--mosaic-secondary);
+        stroke: var(
+          --filter-context-button-color,
+          $filter-context-button-color
+        );
       }
     }
   }
@@ -49,11 +52,28 @@
     text-align: left;
     font-weight: bold;
     white-space: nowrap;
-    color: var(--mosaic-neutral-1);
+    color: var(--filter-header-color, $filter-header-color);
+    padding-left: 5px;
   }
 }
 
 .collapsed {
-  width: 50px; // 40px button + container padding (5px each side, border-box)
+  width: 44px; // matches the 44px header toggle button
   overflow-y: hidden;
 }
+
+.filters {
+  // Fill the remaining column height; `min-height: 0` overrides the default
+  // `auto` so the child can shrink below its content size and scroll instead
+  // of overflowing the container.
+  flex: 1;
+  min-height: 0;
+
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-auto-rows: min-content;
+  overflow-x: hidden;
+  overflow-y: auto;
+  gap: 5px;
+  padding: 5px;
+}

package/src/components/Filters/Filters.tsx

@@ -220,9 +220,10 @@ const FiltersComponent = <T extends Data>(
           <Button
             icon={IconName.Filters}
             className={classes.headerButton}
-            buttonContext={ButtonContext.None}
+            buttonContext={ButtonContext.Icon}
             onButtonClicked={toggleExpanded}
             dataTestId="filters-toggle"
+            title={isExpanded ? 'Collapse filters' : 'Expand filters'}
           />
         </Badge>
         {isExpanded && (
@@ -234,18 +235,24 @@ const FiltersComponent = <T extends Data>(
               <Button
                 icon={IconName.RemoveAllFilters}
                 className={classes.headerButton}
-                buttonContext={ButtonContext.None}
+                buttonContext={ButtonContext.Icon}
                 onButtonClicked={clearAllFilters}
                 dataTestId="filters-clear-all"
+                title="Remove all filters"
               />
             )}
           </>
         )}
       </div>
-      {isExpanded &&
-        options?.map((filter: FilterType<T>, index: number) =>
-          renderFilter(filter, index),
-        )}
+      <div
+        className={clsx(classes.filters, 'filters')}
+        data-test-id="filters-list"
+      >
+        {isExpanded &&
+          options?.map((filter: FilterType<T>, index: number) =>
+            renderFilter(filter, index),
+          )}
+      </div>
     </div>
   );
 };

package/src/styles/variables.scss

@@ -82,6 +82,8 @@ $filter-controller-background-color: var(--mosaic-neutral-3);
 $filter-border-color: var(--mosaic-secondary);
 $multi-option-checkbox-border: var(--mosaic-secondary);
 $multi-option-label-color: var(--mosaic-neutral-1);
+$filter-header-border-color: var(--mosaic-neutral-2);
+$filter-header-color: var(--mosaic-neutral-1);
 
 /* Details vars */
 $details-background-color: #ffffff;