@axinom/mosaic-ui 0.66.0-rc.8 → 0.66.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.66.0-rc.8",
+  "version": "0.66.0",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -112,5 +112,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b423cad67c00b75057d5304354ba9429e69d2d03"
+  "gitHead": "c484ceff643b3ac656a5a5aebb30394be58ee2e0"
 }

package/src/components/Accordion/Accordion.scss

@@ -33,7 +33,7 @@
       color: var(--accordion-header-text-color, $accordion-header-text-color);
       font-weight: bold;
 
-      border-bottom: solid 1px lighten($gray, 15%);
+      border-bottom: solid 1px color-mix(in srgb, var(--ax-neutral) 85%, white);
 
       top: 0;
       position: sticky;

package/src/components/Accordion/AccordionItem/AccordionItem.scss

@@ -4,7 +4,7 @@
   display: grid;
   grid-template-columns: 50px auto;
   align-items: center;
-  background-color: $light-gray;
+  background-color: var(--ax-neutral-light);
   margin-top: 4px;
   height: 50px;
   cursor: pointer;
@@ -19,7 +19,7 @@
   }
 
   &.rowExpanded {
-    background-color: $light-gray-2;
+    background-color: var(--ax-neutral-lighter);
   }
 
   &.sticky {

package/src/components/Buttons/Button/Button.scss

@@ -108,10 +108,10 @@
     }
 
     &:disabled {
-      border: 1px solid $gray;
+      border: 1px solid var(--ax-neutral);
 
       svg * {
-        stroke: $gray;
+        stroke: var(--ax-neutral);
       }
     }
   }
@@ -146,7 +146,7 @@
       background-color: white;
 
       svg * {
-        stroke: $blue;
+        stroke: var(--ax-primary);
       }
     }
 
@@ -154,7 +154,7 @@
       border: none;
 
       svg * {
-        stroke: $gray;
+        stroke: var(--ax-neutral);
       }
     }
   }
@@ -193,7 +193,7 @@
     }
 
     &:disabled {
-      background-color: $gray;
+      background-color: var(--ax-neutral);
 
       svg * {
         opacity: 0.5;

package/src/components/Buttons/CompositeButton/CompositeButton.scss

@@ -75,7 +75,7 @@
         $navigation-button-background-disabled-color
       );
       pointer-events: none;
-      color: rgba(white, 0.5);
+      color: color-mix(in srgb, white 50%, transparent);
 
       svg * {
         opacity: 0.5;
@@ -121,11 +121,11 @@
     }
 
     &:disabled {
-      border: 1px solid $gray;
-      color: $gray;
+      border: 1px solid var(--ax-neutral);
+      color: var(--ax-neutral);
 
       svg * {
-        stroke: $gray;
+        stroke: var(--ax-neutral);
       }
     }
   }
@@ -146,12 +146,12 @@
 
     &:active {
       background-color: white;
-      color: $blue;
+      color: var(--ax-primary);
     }
 
     &:disabled {
-      background-color: $gray;
-      color: rgba(white, 0.5);
+      background-color: var(--ax-neutral);
+      color: color-mix(in srgb, white 50%, transparent);
     }
   }
 }

package/src/components/Buttons/TextButton/TextButton.scss

@@ -50,7 +50,7 @@
         $navigation-button-background-disabled-color
       );
       pointer-events: none;
-      color: rgba(white, 0.5);
+      color: color-mix(in srgb, white 50%, transparent);
     }
   }
 
@@ -84,8 +84,8 @@
     }
 
     &:disabled {
-      border: 1px solid $gray;
-      color: $gray;
+      border: 1px solid var(--ax-neutral);
+      color: var(--ax-neutral);
     }
   }
 
@@ -105,12 +105,12 @@
 
     &:active {
       background-color: white;
-      color: $blue;
+      color: var(--ax-primary);
     }
 
     &:disabled {
-      background-color: $gray;
-      color: rgba(white, 0.5);
+      background-color: var(--ax-neutral);
+      color: color-mix(in srgb, white 50%, transparent);
     }
   }
 }

package/src/components/ConfirmDialog/ConfirmDialog.scss

@@ -32,7 +32,7 @@ $pop-up-horizontal-arrow: 47%;
 
       padding: 5px;
 
-      color: $dark-gray;
+      color: var(--ax-neutral-dark);
       font-size: 14px;
 
       .defaultText {

package/src/components/DateTime/DatePicker/DatePicker.scss

@@ -36,7 +36,7 @@
     cursor: pointer;
   }
   :global(.react-calendar__navigation) button[disabled] {
-    background-color: #f0f0f0;
+    background-color: var(--ax-neutral-lighter);
   }
   :global(.react-calendar__month-view__weekdays) {
     text-align: center;
@@ -59,7 +59,7 @@
     padding: calc(0.75em / 0.75) calc(0.5em / 0.75);
   }
   :global(.react-calendar__month-view__days__day--neighboringMonth) {
-    color: #757575;
+    color: var(--ax-neutral);
   }
   :global(.react-calendar__year-view) :global(.react-calendar__tile),
   :global(.react-calendar__decade-view) :global(.react-calendar__tile),
@@ -74,37 +74,37 @@
     background: none;
   }
   :global(.react-calendar__tile):disabled {
-    background-color: #f0f0f0;
+    background-color: var(--ax-neutral-lighter);
   }
   :global(.react-calendar__tile):enabled:hover {
-    background-color: #e6e6e6;
+    background-color: var(--ax-neutral-light);
   }
   :global(.react-calendar__tile--hasActive) {
-    background: #76baff;
+    background: var(--ax-primary-light);
   }
   :global(.react-calendar__tile--hasActive):enabled:hover,
   :global(.react-calendar__tile--hasActive):enabled:focus {
-    background: #a9d4ff;
+    background: color-mix(in srgb, var(--ax-primary-light), white 30%);
   }
   :global(.react-calendar__tile--active) {
-    background: #006edc;
+    background: var(--ax-primary-dark);
     color: white;
   }
   :global(.react-calendar__tile--active):enabled:hover,
   :global(.react-calendar__tile--active):enabled:focus {
-    background: #1087ff;
+    background: var(--ax-primary);
   }
   :global(.react-calendar--selectRange) :global(.react-calendar__tile--hover) {
-    background-color: #e6e6e6;
+    background-color: var(--ax-neutral-light);
   }
 
   :global(.react-calendar__tile) {
     transition: background-color 0.15s ease-in-out 0s;
 
-    color: $dark-gray;
+    color: var(--ax-neutral-dark);
 
     * {
-      color: $dark-gray;
+      color: var(--ax-neutral-dark);
     }
 
     &:hover {
@@ -171,7 +171,7 @@
   }
 
   :global(.react-calendar__month-view__days__day--neighboringMonth) * {
-    color: $light-gray;
+    color: var(--ax-neutral-light);
   }
 
   :global(.react-calendar__tile--active),

package/src/components/DateTime/TimePicker/ScrollColumn/ScrollColumn.scss

@@ -13,7 +13,7 @@
 .inactive-title {
   display: grid;
   font-size: 12px;
-  color: $gray;
+  color: var(--ax-neutral);
   text-align: center;
   align-items: center;
 }
@@ -23,7 +23,7 @@
 
   display: grid;
   font-size: 18px;
-  color: $dark-gray;
+  color: var(--ax-neutral-dark);
   text-align: center;
   align-items: center;
 
@@ -35,10 +35,10 @@
 
   &.active {
     visibility: visible;
-    background-color: rgba($blue, 0.15);
+    background-color: color-mix(in srgb, var(--ax-primary) 15%, transparent);
 
     &.selected {
-      background-color: $blue;
+      background-color: var(--ax-primary);
       color: white;
     }
   }
@@ -46,11 +46,11 @@
   &.selected {
     visibility: visible;
 
-    border: 1px solid $blue;
+    border: 1px solid var(--ax-primary);
   }
 
   &:hover {
-    background-color: rgba($blue, 0.15);
+    background-color: color-mix(in srgb, var(--ax-primary) 15%, transparent);
   }
 }
 
@@ -70,7 +70,7 @@
     }
 
     svg * {
-      stroke: $blue;
+      stroke: var(--ax-primary);
     }
 
     &.hidden {

package/src/components/DateTime/TimePicker/TimePicker.scss

@@ -12,7 +12,7 @@
   display: grid;
   grid-column: 1 / 5;
   font-size: 20px;
-  color: $dark-gray;
+  color: var(--ax-neutral-dark);
   text-align: center;
   height: 40px;
   align-items: center;

package/src/components/DynamicDataList/DynamicListHeader/DynamicListHeader.scss

@@ -13,7 +13,7 @@
   grid-auto-rows: var(--dynamic-list-row-height, $dynamic-list-row-height);
   column-gap: var(--dynamic-list-column-gap, $dynamic-list-column-gap);
 
-  border-bottom: solid 1px $light-gray;
+  border-bottom: solid 1px var(--ax-neutral-light);
 
   justify-items: left;
   align-items: center;
@@ -36,7 +36,7 @@
       height: 100%;
 
       z-index: 1;
-      border-right: var(--explorer-list-row-border, 1px solid #dddddd);
+      border-right: var(--explorer-list-row-border, 1px solid var(--ax-neutral-light));
       position: absolute;
       right: 0;
 

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

@@ -238,6 +238,8 @@ describe('DynamicListHeader', () => {
         } as any),
       );
 
+      window.dispatchEvent(new Event('mouseup', {} as any));
+
       expect(spy).toHaveBeenCalledTimes(1);
     });
   });

package/src/components/DynamicDataList/DynamicListHeader/DynamicListHeader.tsx

@@ -70,60 +70,72 @@ export const DynamicListHeader = <T extends Data>({
     customStyles.top = 0;
   }
 
-  const { cols, mouseDown } = useResize(columns, onColumnSizesChanged);
+  const { cols, mouseDown, ResizeIndicator } = useResize(
+    columns,
+    onColumnSizesChanged,
+  );
 
   return (
-    <div
-      className={clsx(
-        classes.container,
-        'dynamic-list-header-container',
-        className,
-      )}
-      style={customStyles}
-      data-test-id="dynamic-list-header"
-    >
-      {showPositionColumn && (
-        <div
-          className={clsx(classes.column)}
-          data-test-id="dynamic-list-header-cell"
-        >
-          <p className={clsx(classes.position)}>
-            {positionLabel ?? (allowDragging ? 'Position' : 'Pos')}
-          </p>
+    <>
+      {ResizeIndicator}
+      <div
+        className={clsx(
+          classes.container,
+          'dynamic-list-header-container',
+          className,
+        )}
+        style={customStyles}
+        data-test-id="dynamic-list-header"
+      >
+        {showPositionColumn && (
           <div
-            className={clsx(classes.resizeHandle, classes.resizeHandleDisabled)}
-          />
-        </div>
-      )}
-      {columns.map((column, i) => (
-        <div
-          key={column.key ?? (column.propertyName as string)}
-          className={clsx(classes.column)}
-          ref={cols[i].ref}
-          data-test-id={`dynamic-list-header-property:${
-            column.propertyName as string
-          }`}
-        >
-          <p>{column.label}</p>
+            className={clsx(classes.column)}
+            data-test-id="dynamic-list-header-cell"
+          >
+            <p className={clsx(classes.position)}>
+              {positionLabel ?? (allowDragging ? 'Position' : 'Pos')}
+            </p>
+            <div
+              className={clsx(
+                classes.resizeHandle,
+                classes.resizeHandleDisabled,
+              )}
+            />
+          </div>
+        )}
+        {columns.map((column, i) => (
+          <div
+            key={column.key ?? (column.propertyName as string)}
+            className={clsx(classes.column)}
+            ref={cols[i].ref}
+            data-test-id={`dynamic-list-header-property:${
+              column.propertyName as string
+            }`}
+          >
+            <p>{column.label}</p>
+            <div
+              onMouseDown={
+                !column.disableResizing
+                  ? (e) => {
+                      e.preventDefault();
+                      mouseDown(i);
+                    }
+                  : undefined
+              }
+              onDoubleClick={onResetColumnSizes}
+              className={clsx(classes.resizeHandle, {
+                [classes.resizeHandleDisabled]: column.disableResizing ?? false,
+              })}
+            />
+          </div>
+        ))}
+        {showActionColumn && (
           <div
-            onMouseDown={
-              !column.disableResizing
-                ? (e) => {
-                    e.preventDefault();
-                    mouseDown(i);
-                  }
-                : undefined
-            }
-            onDoubleClick={onResetColumnSizes}
-            className={clsx(classes.resizeHandle, {
-              [classes.resizeHandleDisabled]: column.disableResizing ?? false,
-            })}
+            className={clsx(classes.column)}
+            ref={cols[cols.length - 1].ref}
           />
-        </div>
-      ))}
-      {showActionColumn && (
-        <div className={clsx(classes.column)} ref={cols[cols.length - 1].ref} />
-      )}
-    </div>
+        )}
+      </div>
+    </>
   );
 };

package/src/components/DynamicDataList/DynamicListRow/DynamicListRow.scss

@@ -79,10 +79,10 @@
     }
 
     .dragIcon {
-      stroke: $light-gray;
+      stroke: var(--ax-neutral-light);
 
       rect {
-        fill: $light-gray;
+        fill: var(--ax-neutral-light);
       }
     }
   }

package/src/components/FieldSelection/FieldSelection.scss

@@ -7,6 +7,10 @@
   align-items: center;
 }
 
+.item {
+  z-index: 0;
+}
+
 .selectionHeader {
   display: grid;
   grid-template-columns: 1fr;

package/src/components/FieldSelection/FieldSelection.tsx

@@ -84,6 +84,7 @@ export const FieldSelection: React.FC<FieldSelectionProps> = ({
       {selectedFields.map((field) => (
         <AccordionItem
           key={field.value}
+          className={classes.item}
           header={
             <FieldSelectionItemHeader
               label={field.label as string}

package/src/components/Filters/Filter/Filter.scss

@@ -15,24 +15,31 @@ $input-inactive: 1px solid var(--input-border-color, $input-border-color);
     border: $input-inactive;
   }
 
+  &.hasValue {
+    background: color-mix(
+      in srgb,
+      var(--filter-background-color, $filter-background-color) 50%,
+      transparent
+    );
+  }
+
   .title {
     display: grid;
     grid-template-columns: auto auto;
-    grid-template-rows: 48px;
+    grid-template-rows: 38px;
     place-content: space-between;
     place-items: center;
     color: var(--filter-title-color, $filter-title-color);
     font-size: var(--filter-font-size, $filter-font-size);
-    border: 1px solid white;
+    border: 1px solid transparent;
 
-    transition: border 0.15s ease-in-out 0s;
-    transition: background-color 100ms linear;
+    transition: border 0.15s ease-in-out 0s, background-color 100ms linear;
 
     &:hover {
       border: $border;
     }
 
-    &.expanded {
+    &.active {
       background-color: var(
         --filter-background-selected-color,
         $filter-background-selected-color
@@ -46,13 +53,20 @@ $input-inactive: 1px solid var(--input-border-color, $input-border-color);
         var(--input-invalid-border-color, $input-invalid-border-color);
     }
 
-    &.active {
+    &.hasValue {
       font-weight: bold;
     }
 
     .button {
+      height: 40px;
+      width: 40px;
+
+      &.rotated svg {
+        transform: rotate(90deg);
+      }
+
       svg {
-        height: 50%;
+        transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
       }
 
       svg * {
@@ -63,7 +77,7 @@ $input-inactive: 1px solid var(--input-border-color, $input-border-color);
       }
     }
 
-    span {
+    label {
       padding-left: 15px;
     }
   }
@@ -78,9 +92,8 @@ $input-inactive: 1px solid var(--input-border-color, $input-border-color);
     place-items: center;
 
     .button {
-      svg {
-        height: 50%;
-      }
+      height: 40px;
+      width: 40px;
 
       svg * {
         stroke: var(
@@ -92,17 +105,23 @@ $input-inactive: 1px solid var(--input-border-color, $input-border-color);
 
     span {
       padding-left: 30px;
-      padding-bottom: 10px;
     }
   }
 }
 
 .content {
-  transition: max-height 100ms linear;
-  overflow: hidden;
-  max-height: fit-content !important;
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 200ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  &.expanded {
+    grid-template-rows: 1fr;
+  }
 
   .active {
+    display: grid;
+    overflow: hidden;
+
     border-right: $border;
     border-bottom: $border;
     border-left: $border;

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

@@ -95,7 +95,7 @@ describe('Filter', () => {
 
     const filterTitle = wrapper.find('.title');
 
-    expect(filterTitle.hasClass('expanded')).toBe(expected);
+    expect(filterTitle.hasClass('active')).toBe(expected);
   });
 
   it('passes active state to custom filter', () => {