@axinom/mosaic-ui 0.70.0 → 0.71.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.70.0",
+  "version": "0.71.0",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -32,7 +32,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@axinom/mosaic-core": "^0.4.32",
+    "@axinom/mosaic-core": "^0.4.33",
     "@faker-js/faker": "^7.4.0",
     "@geoffcox/react-splitter": "^2.1.2",
     "@mui/base": "5.0.0-beta.40",
@@ -113,5 +113,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9732fd094fafedb5360d10405cc19fa202d42de6"
+  "gitHead": "75dcfd9bf92de1ef72a28f073e43a7dfaa7b430b"
 }

package/src/components/Actions/Actions.scss

@@ -13,25 +13,7 @@
 
   color: var(--actions-color, $actions-color);
   background-color: var(--actions-background-color, $actions-background-color);
-}
-
-//Custom scrollbar for Chrome, Safari and Edge
-::-webkit-scrollbar {
-  width: var(--scrollbar-size, $scrollbar-size);
-  height: var(--scrollbar-size, $scrollbar-size);
-}
-::-webkit-scrollbar-track {
-  background: var(--scrollbar-track-color, $scrollbar-track-color);
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--scrollbar-thumb-color, $scrollbar-thumb-color);
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--scrollbar-thumb-hover-color, $scrollbar-thumb-hover-color);
-}
 
-::-webkit-scrollbar-corner {
-  background: var(--scrollbar-corner-color, $scrollbar-corner-color);
+  // Custom scrollbar for Chrome, Safari and Edge
+  @include customScrollbar;
 }

package/src/components/Buttons/Button/Button.stories.tsx

@@ -41,6 +41,9 @@ const meta: Meta<typeof Button> = {
         type: 'number',
       },
     },
+    customIcon: {
+      control: false,
+    },
   },
   decorators: [
     // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types

package/src/components/Buttons/Button.model.ts

@@ -74,6 +74,7 @@ export interface ButtonIconOptions {
   /**
    * Optional custom icon.
    * When provided, `icon` property is ignored.
+   * @deprecated Use `icon` property with a custom icon component instead for better accessibility and consistency. This property will be removed in future versions.
    */
   customIcon?: React.ReactNode;
 }

package/src/components/DynamicDataList/DynamicDataList.stories.tsx

@@ -429,3 +429,26 @@ export const Editable: StoryObj<StoryDDLType> = {
     }),
   },
 };
+
+export const EditableWithInlineMenu: StoryObj<StoryDDLType> = {
+  name: 'Editable with inline menu',
+  args: {
+    ...Editable.args,
+    inlineMenuActions: (_) => [
+      {
+        label: 'Action 1',
+        onActionSelected: action('onChange'),
+      },
+      {
+        label: 'Action 2',
+        onActionSelected: action('onChange'),
+        confirmationMode: 'Simple',
+      },
+      {
+        label: 'Action 3',
+        onActionSelected: action('onChange'),
+        confirmationMode: 'Advanced',
+      },
+    ],
+  },
+};

package/src/components/DynamicDataList/DynamicListRow/DynamicListRow.spec.tsx

@@ -256,6 +256,26 @@ describe('DynamicListRow', () => {
     expect(button).toBeInTheDocument();
   });
 
+  it(`renders both the inline menu and the remove button when allowRemove and inlineMenuActions are set`, () => {
+    const { container } = render(
+      <DynamicListRow
+        columns={defaultColumns}
+        columnSizes={defaultProps.columnSizes}
+        data={defaultProps.data}
+        allowRemove={true}
+        showActionColumn={true}
+        inlineMenuActions={() => [{ label: 'Edit', onActionSelected: vi.fn() }]}
+      />,
+    );
+
+    expect(
+      container.querySelector('[data-test-id="inline-menu-button"]'),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('[data-test-id="dynamic-list-remove-button"]'),
+    ).toBeInTheDocument();
+  });
+
   it(`emits onActionClicked with row data when the action button is clicked`, () => {
     const spy = vi.fn();
     const { container } = render(

package/src/components/DynamicDataList/DynamicListRow/DynamicListRow.tsx

@@ -211,7 +211,7 @@ export const DynamicListRow = <T extends Data>({
               onButtonClicked={(e) => e.stopPropagation()}
             />
           )}
-          {allowRemove && !inlineMenuActions && (
+          {allowRemove && (
             <Button
               type="button"
               className={classes.actionButton}

package/src/components/DynamicDataList/helpers/useColumnDefs.ts

@@ -31,7 +31,9 @@ export const useColumnDefs = function <T extends Data>(
       allowReordering,
       allowRowDragging,
       positionKey,
-      allowNewData || showInlineMenu || allowEditing,
+      allowNewData,
+      allowEditing,
+      showInlineMenu,
     ),
   );
 
@@ -44,7 +46,9 @@ export const useColumnDefs = function <T extends Data>(
         allowReordering,
         allowRowDragging,
         positionKey,
-        allowNewData || showInlineMenu || allowEditing,
+        allowNewData,
+        allowEditing,
+        showInlineMenu,
       ),
     );
     if (!isResized) {
@@ -90,7 +94,9 @@ function calculateColumnSizes<T extends Data>(
   allowReordering: boolean,
   allowRowDragging: boolean,
   positionKey?: keyof T,
-  showActionColumn?: boolean,
+  allowNewData?: boolean,
+  allowEditing?: boolean,
+  showInlineMenu?: boolean,
 ): string {
   const positionColumn = getPositionColumnWidth(
     allowReordering,
@@ -104,7 +110,10 @@ function calculateColumnSizes<T extends Data>(
     .reduce((prev, current) => `${prev} ${current.size ?? '1fr'}`, '')
     .trim();
 
-  if (showActionColumn) {
+  if (allowNewData && showInlineMenu) {
+    // both the remove button and the inline menu render side-by-side
+    actionColumn = '100px';
+  } else if (allowNewData || allowEditing || showInlineMenu) {
     actionColumn = '50px';
   }
 

package/src/components/EmptyStation/EmptyStation.scss

@@ -26,29 +26,9 @@
     scrollbar-width: thin; //for Firefox only
   }
 
-  //Custom scrollbar for Chrome, Safari and Edge
-  ::-webkit-scrollbar {
-    width: 7px;
-    height: 7px;
-  }
-
-  ::-webkit-scrollbar-track {
-    background: var(--scrollbar-track-color, $scrollbar-track-color);
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background: var(--scrollbar-thumb-color, $scrollbar-thumb-color);
-  }
-
-  ::-webkit-scrollbar-thumb:hover {
-    background: var(
-      --scrollbar-thumb-hover-color,
-      $scrollbar-thumb-hover-color
-    );
-  }
-
-  ::-webkit-scrollbar-corner {
-    background: var(--scrollbar-corner-color, $scrollbar-corner-color);
+  // Custom scrollbar for all scrollable descendants (Chrome, Safari, Edge)
+  * {
+    @include customScrollbar;
   }
 
   &.hasStationError {

package/src/components/Explorer/Explorer.scss

@@ -28,29 +28,9 @@
     scrollbar-width: thin; //for Firefox only
   }
 
-  //Custom scrollbar for Chrome, Safari and Edge
-  ::-webkit-scrollbar {
-    width: var(--scrollbar-size, $scrollbar-size);
-    height: var(--scrollbar-size, $scrollbar-size);
-  }
-
-  ::-webkit-scrollbar-track {
-    background: var(--scrollbar-track-color, $scrollbar-track-color);
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background: var(--scrollbar-thumb-color, $scrollbar-thumb-color);
-  }
-
-  ::-webkit-scrollbar-thumb:hover {
-    background: var(
-      --scrollbar-thumb-hover-color,
-      $scrollbar-thumb-hover-color
-    );
-  }
-
-  ::-webkit-scrollbar-corner {
-    background: var(--scrollbar-corner-color, $scrollbar-corner-color);
+  // Custom scrollbar for all scrollable descendants (Chrome, Safari, Edge)
+  * {
+    @include customScrollbar;
   }
 
   &.hasStationError {

package/src/components/Filters/Filter/Filter.tsx

@@ -61,6 +61,7 @@ export const Filter = <T extends Data>({
     FilterTypes.Numeric,
     FilterTypes.Date,
     FilterTypes.DateTime,
+    FilterTypes.SearcheableOptions,
   ];
 
   const onFilterValueChange = (
@@ -258,9 +259,9 @@ export const Filter = <T extends Data>({
       >
         <label
           id={labelId}
-          {...(inputBasedFilter.includes(options.type)
-            ? {}
-            : { htmlFor: inputId })}
+          {...(inputBasedFilter.includes(options.type) && isExpanded
+            ? { htmlFor: inputId }
+            : {})}
           data-test-id="filter-label"
         >
           {options.label}

package/src/components/FormStation/FormStationContentWrapper/FormStationContentWrapper.scss

@@ -7,6 +7,8 @@
   grid-template-rows: 1fr;
   overflow: hidden;
 
+  @include customScrollbar;
+
   .main {
     position: relative;
     display: grid;
@@ -19,39 +21,16 @@
       grid: 1fr / 1fr;
       overflow-y: auto;
       min-height: 0;
-      scrollbar-width: thin; //for Firefox only
       isolation: isolate;
 
+      @include customScrollbar;
+
       &.hasMessage {
         grid: min-content 1fr / minmax(740px, 1fr);
       }
     }
   }
 
-  //Custom scrollbar for Chrome, Safari and Edge
-  ::-webkit-scrollbar {
-    width: var(--scrollbar-size, $scrollbar-size);
-    height: var(--scrollbar-size, $scrollbar-size);
-  }
-  ::-webkit-scrollbar-track {
-    background: var(--scrollbar-track-color, $scrollbar-track-color);
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background: var(--scrollbar-thumb-color, $scrollbar-thumb-color);
-  }
-
-  ::-webkit-scrollbar-thumb:hover {
-    background: var(
-      --scrollbar-thumb-hover-color,
-      $scrollbar-thumb-hover-color
-    );
-  }
-
-  ::-webkit-scrollbar-corner {
-    background: var(--scrollbar-corner-color, $scrollbar-corner-color);
-  }
-
   .formContainer {
     padding: 30px;
   }

package/src/styles/mixins.scss

@@ -24,3 +24,29 @@
 
   cursor: default;
 }
+
+//Custom scrollbar for Chrome, Safari and Edge
+@mixin customScrollbar {
+  &::-webkit-scrollbar {
+    width: var(--scrollbar-size, $scrollbar-size);
+    height: var(--scrollbar-size, $scrollbar-size);
+  }
+  &::-webkit-scrollbar-track {
+    background: var(--scrollbar-track-color, $scrollbar-track-color);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-thumb-color, $scrollbar-thumb-color);
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: var(
+      --scrollbar-thumb-hover-color,
+      $scrollbar-thumb-hover-color
+    );
+  }
+
+  &::-webkit-scrollbar-corner {
+    background: var(--scrollbar-corner-color, $scrollbar-corner-color);
+  }
+}