@axinom/mosaic-ui 0.72.3 → 0.72.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.72.3",
+  "version": "0.72.5",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -113,5 +113,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1d30532534a6a7c578ceb791443c04a806238d94"
+  "gitHead": "c979cfcc87f8c0d686f9965a0cfb63f54083cb76"
 }

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

@@ -50,6 +50,7 @@
     font-weight: bold;
     white-space: nowrap;
     color: var(--mosaic-neutral-1);
+    padding-left: 5px;
   }
 }
 

package/src/components/Filters/Filters.tsx

@@ -220,7 +220,7 @@ const FiltersComponent = <T extends Data>(
           <Button
             icon={IconName.Filters}
             className={classes.headerButton}
-            buttonContext={ButtonContext.None}
+            buttonContext={ButtonContext.Icon}
             onButtonClicked={toggleExpanded}
             dataTestId="filters-toggle"
           />