@axinom/mosaic-ui 0.66.0-rc.18 → 0.66.0-rc.19

package/package.json

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

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 * {
@@ -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', () => {

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

@@ -1,11 +1,5 @@
 import clsx from 'clsx';
-import React, {
-  PropsWithChildren,
-  ReactNode,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import React, { PropsWithChildren, ReactNode, useState } from 'react';
 import { assertNever } from '../../../helpers/utils';
 import { Data } from '../../../types/data';
 import { Button, ButtonContext } from '../../Buttons';
@@ -58,12 +52,8 @@ export const Filter = <T extends Data>({
 }: PropsWithChildren<FilterProps<T>>): JSX.Element => {
   const [isExpanded, setIsExpanded] = useState<boolean>(false);
   const [hasError, setHasError] = useState<boolean>(false);
-  const [contentHeight, setContentHeight] = useState<number>(0);
   const [stringValue, setStringValue] = useState<string | undefined>();
 
-  const contentRef = useRef<HTMLDivElement>(null);
-  const valueRef = useRef<HTMLDivElement>(null);
-
   const inputId = `${String(options.property)}-filter-input`;
   const labelId = `${String(options.property)}-filter-label`;
   const inputBasedFilter = [
@@ -73,13 +63,6 @@ export const Filter = <T extends Data>({
     FilterTypes.DateTime,
   ];
 
-  useEffect(() => {
-    setContentHeight(
-      (contentRef.current?.scrollHeight ?? 0) +
-        (valueRef.current?.scrollHeight ?? 0),
-    );
-  }, [isExpanded, hasError, value]);
-
   const onFilterValueChange = (
     prop: keyof T,
     value: FilterValue,
@@ -247,9 +230,16 @@ export const Filter = <T extends Data>({
     }
   };
 
+  const hasValue = value !== undefined && value !== '';
+
   return (
     <div
-      className={clsx(classes.container, 'filter-container', className)}
+      className={clsx(
+        classes.container,
+        { [classes.hasValue]: hasValue },
+        'filter-container',
+        className,
+      )}
       data-test-id={`filter:${options.property as string}`}
       data-test-type={FilterTypes[options.type]}
       onClick={() => onFilterClicked()}
@@ -259,12 +249,11 @@ export const Filter = <T extends Data>({
           setIsExpanded(!isExpanded);
           setHasError(false);
         }}
-        className={clsx(
-          classes.title,
-          { [classes.expanded]: isExpanded && isActive },
-          hasError && classes.hasError,
-          !!value && classes.active,
-        )}
+        className={clsx(classes.title, {
+          [classes.hasValue]: hasValue,
+          [classes.active]: isActive && isExpanded,
+          [classes.hasError]: hasError,
+        })}
         data-test-id="filter-button-toggle"
       >
         <label
@@ -277,21 +266,19 @@ export const Filter = <T extends Data>({
           {options.label}
         </label>
         <Button
-          icon={IconName.ChevronDown}
-          className={clsx(classes.button)}
+          icon={IconName.ChevronRight}
+          className={clsx(classes.button, {
+            [classes.rotated]: isExpanded || hasValue,
+          })}
           buttonContext={ButtonContext.None}
         />
       </div>
       <div
-        className={clsx(classes.content)}
-        style={{
-          maxHeight: contentHeight,
-        }}
+        className={clsx(classes.content, { [classes.expanded]: isExpanded })}
       >
-        {value !== undefined && !isExpanded && (
+        {hasValue && !isExpanded && (
           <div
             className={clsx(classes.selectedValue)}
-            ref={valueRef}
             onClick={() => {
               setIsExpanded(!isExpanded);
             }}
@@ -311,7 +298,6 @@ export const Filter = <T extends Data>({
         )}
         {isExpanded && (
           <div
-            ref={contentRef}
             data-test-id="filter-content"
             className={clsx({ [classes.active]: isActive })}
           >

package/src/components/Filters/SelectionTypes/OptionsFilter/OptionsFilter.scss

@@ -4,11 +4,7 @@
   @include boxSizing;
 
   display: grid;
-  grid-auto-rows: 50px;
-  background-color: var(
-    --filter-controller-background-color,
-    $filter-controller-background-color
-  );
+  grid-auto-rows: 40px;
   gap: 1px;
   border-top: unset;
 
@@ -18,7 +14,7 @@
 
     span {
       font-size: var(--filter-font-size, $filter-font-size);
-      color: var(--filter-title-color, $filter-title-color);
+      color: var(--popper-text-color, $popper-text-color);
       display: grid;
       place-items: center left;
       padding: 0 20px;
@@ -27,15 +23,15 @@
 
       &:hover {
         background-color: var(
-          --filter-background-selected-color,
-          $filter-background-selected-color
+          --popper-item-hover-color,
+          $popper-item-hover-color
         );
       }
 
       &.selected {
         background-color: var(
-          --filter-background-selected-color,
-          $filter-background-selected-color
+          --popper-background-selected-color,
+          $popper-background-selected-color
         );
       }
     }

package/src/components/FormElements/Select/Select.scss

@@ -94,7 +94,7 @@
   ul {
     display: grid;
     row-gap: 1px;
-    background-color: var(--popper-background-color, $popper-background-color);
+    background-color: white;
     padding: 0px;
     margin-top: 1px;
     margin-bottom: 1px;
@@ -105,7 +105,7 @@
     li {
       display: grid;
       place-items: center left;
-      height: 50px;
+      height: 40px;
       font-size: var(--popper-item-font-size, $popper-item-font-size);
       color: var(--popper-text-color, $popper-text-color);
       background-color: white;
@@ -116,18 +116,23 @@
       &:hover {
         cursor: pointer;
         background-color: var(
-          --popper-background-selected-color,
-          $popper-background-selected-color
+          --popper-item-hover-color,
+          $popper-item-hover-color
         );
       }
 
-      &[aria-selected='true'],
-      &[class='Mui-focused Mui-focusVisible'] {
+      &[aria-selected='true'] {
         background-color: var(
           --popper-background-selected-color,
           $popper-background-selected-color
         );
       }
+      &[class='Mui-focused Mui-focusVisible'] {
+        background-color: var(
+          --popper-item-selected-color,
+          $popper-item-selected-color
+        );
+      }
     }
   }
 }

package/src/styles/variables.scss

@@ -71,8 +71,8 @@ $filter-light-font-color: $dark-gray;
 $filter-option-background-color: #d7e9f1;
 $filter-context-button-color: $blue;
 $filter-title-color: $blue;
-$filter-font-size: 16px;
-$filter-width: 360px;
+$filter-font-size: 14px;
+$filter-width: 330px;
 $filter-controller-background-color: $light-gray-2;
 $filter-border-color: $blue;
 $multi-option-checbox-border: $blue;
@@ -320,7 +320,8 @@ $icon-button-hover-color: $blue;
 /* Autocomplete */
 $popper-border-color: $blue;
 $popper-trigger-button-color: $blue;
-$popper-background-color: $light-gray-2;
-$popper-item-font-size: 16px;
-$popper-text-color: $blue;
-$popper-background-selected-color: rgba($blue, 0.15);
+$popper-item-font-size: 14px;
+$popper-text-color: $dark-gray;
+$popper-background-selected-color: $light-gray-2;
+$popper-item-hover-color: rgba($blue, 0.1);
+$popper-item-selected-color: rgba($blue, 0.2);