@axinom/mosaic-ui 0.66.0 → 0.66.2

package/package.json

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

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 color-mix(in srgb, var(--ax-neutral) 85%, white);
+      border-bottom: solid 1px var(--accordion-header-border-color, $accordion-header-border-color);
 
       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: var(--ax-neutral-light);
+  background-color: var(--accordion-item-row-background-color, $accordion-item-row-background-color);
   margin-top: 4px;
   height: 50px;
   cursor: pointer;
@@ -19,7 +19,7 @@
   }
 
   &.rowExpanded {
-    background-color: var(--ax-neutral-lighter);
+    background-color: var(--accordion-item-row-expanded-background-color, $accordion-item-row-expanded-background-color);
   }
 
   &.sticky {

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

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

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

@@ -121,11 +121,11 @@
     }
 
     &:disabled {
-      border: 1px solid var(--ax-neutral);
-      color: var(--ax-neutral);
+      border: 1px solid var(--composite-button-context-disabled-border-color, $composite-button-context-disabled-border-color);
+      color: var(--composite-button-context-disabled-color, $composite-button-context-disabled-color);
 
       svg * {
-        stroke: var(--ax-neutral);
+        stroke: var(--composite-button-context-disabled-color, $composite-button-context-disabled-color);
       }
     }
   }
@@ -146,11 +146,11 @@
 
     &:active {
       background-color: white;
-      color: var(--ax-primary);
+      color: var(--composite-button-active-color, $composite-button-active-color);
     }
 
     &:disabled {
-      background-color: var(--ax-neutral);
+      background-color: var(--composite-button-active-disabled-background-color, $composite-button-active-disabled-background-color);
       color: color-mix(in srgb, white 50%, transparent);
     }
   }

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

@@ -84,8 +84,8 @@
     }
 
     &:disabled {
-      border: 1px solid var(--ax-neutral);
-      color: var(--ax-neutral);
+      border: 1px solid var(--text-button-context-disabled-border-color, $text-button-context-disabled-border-color);
+      color: var(--text-button-context-disabled-color, $text-button-context-disabled-color);
     }
   }
 
@@ -105,11 +105,11 @@
 
     &:active {
       background-color: white;
-      color: var(--ax-primary);
+      color: var(--text-button-active-color, $text-button-active-color);
     }
 
     &:disabled {
-      background-color: var(--ax-neutral);
+      background-color: var(--text-button-active-disabled-background-color, $text-button-active-disabled-background-color);
       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: var(--ax-neutral-dark);
+      color: var(--confirm-dialog-body-text-color, $confirm-dialog-body-text-color);
       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: var(--ax-neutral-lighter);
+    background-color: var(--datepicker-navigation-button-disabled-bg, $datepicker-navigation-button-disabled-bg);
   }
   :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: var(--ax-neutral);
+    color: var(--datepicker-neighbor-month-color, $datepicker-neighbor-month-color);
   }
   :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: var(--ax-neutral-lighter);
+    background-color: var(--datepicker-tile-disabled-bg, $datepicker-tile-disabled-bg);
   }
   :global(.react-calendar__tile):enabled:hover {
-    background-color: var(--ax-neutral-light);
+    background-color: var(--datepicker-tile-hover-bg, $datepicker-tile-hover-bg);
   }
   :global(.react-calendar__tile--hasActive) {
-    background: var(--ax-primary-light);
+    background: var(--datepicker-tile-has-active-bg, $datepicker-tile-has-active-bg);
   }
   :global(.react-calendar__tile--hasActive):enabled:hover,
   :global(.react-calendar__tile--hasActive):enabled:focus {
-    background: color-mix(in srgb, var(--ax-primary-light), white 30%);
+    background: var(--datepicker-tile-has-active-hover-bg, $datepicker-tile-has-active-hover-bg);
   }
   :global(.react-calendar__tile--active) {
-    background: var(--ax-primary-dark);
+    background: var(--datepicker-tile-active-bg, $datepicker-tile-active-bg);
     color: white;
   }
   :global(.react-calendar__tile--active):enabled:hover,
   :global(.react-calendar__tile--active):enabled:focus {
-    background: var(--ax-primary);
+    background: var(--datepicker-tile-active-hover-bg, $datepicker-tile-active-hover-bg);
   }
   :global(.react-calendar--selectRange) :global(.react-calendar__tile--hover) {
-    background-color: var(--ax-neutral-light);
+    background-color: var(--datepicker-select-range-hover-bg, $datepicker-select-range-hover-bg);
   }
 
   :global(.react-calendar__tile) {
     transition: background-color 0.15s ease-in-out 0s;
 
-    color: var(--ax-neutral-dark);
+    color: var(--datepicker-tile-text-color, $datepicker-tile-text-color);
 
     * {
-      color: var(--ax-neutral-dark);
+      color: var(--datepicker-tile-text-color, $datepicker-tile-text-color);
     }
 
     &:hover {
@@ -171,7 +171,7 @@
   }
 
   :global(.react-calendar__month-view__days__day--neighboringMonth) * {
-    color: var(--ax-neutral-light);
+    color: var(--datepicker-neighbor-month-light-color, $datepicker-neighbor-month-light-color);
   }
 
   :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: var(--ax-neutral);
+  color: var(--timepicker-inactive-title-color, $timepicker-inactive-title-color);
   text-align: center;
   align-items: center;
 }
@@ -23,7 +23,7 @@
 
   display: grid;
   font-size: 18px;
-  color: var(--ax-neutral-dark);
+  color: var(--timepicker-item-color, $timepicker-item-color);
   text-align: center;
   align-items: center;
 
@@ -35,10 +35,10 @@
 
   &.active {
     visibility: visible;
-    background-color: color-mix(in srgb, var(--ax-primary) 15%, transparent);
+    background-color: var(--timepicker-item-active-bg, $timepicker-item-active-bg);
 
     &.selected {
-      background-color: var(--ax-primary);
+      background-color: var(--timepicker-item-selected-bg, $timepicker-item-selected-bg);
       color: white;
     }
   }
@@ -46,11 +46,11 @@
   &.selected {
     visibility: visible;
 
-    border: 1px solid var(--ax-primary);
+    border: 1px solid var(--timepicker-item-selected-border, $timepicker-item-selected-border);
   }
 
   &:hover {
-    background-color: color-mix(in srgb, var(--ax-primary) 15%, transparent);
+    background-color: var(--timepicker-item-hover-bg, $timepicker-item-hover-bg);
   }
 }
 
@@ -70,7 +70,7 @@
     }
 
     svg * {
-      stroke: var(--ax-primary);
+      stroke: var(--timepicker-button-stroke-color, $timepicker-button-stroke-color);
     }
 
     &.hidden {

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

@@ -12,7 +12,7 @@
   display: grid;
   grid-column: 1 / 5;
   font-size: 20px;
-  color: var(--ax-neutral-dark);
+  color: var(--timepicker-title-color, $timepicker-title-color);
   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 var(--ax-neutral-light);
+  border-bottom: solid 1px var(--dynamic-list-header-border-color, $dynamic-list-header-border-color);
 
   justify-items: left;
   align-items: center;
@@ -36,7 +36,7 @@
       height: 100%;
 
       z-index: 1;
-      border-right: var(--explorer-list-row-border, 1px solid var(--ax-neutral-light));
+      border-right: var(--explorer-list-row-border, 1px solid var(--dynamic-list-header-resize-border-color, $dynamic-list-header-resize-border-color));
       position: absolute;
       right: 0;
 

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

@@ -79,10 +79,10 @@
     }
 
     .dragIcon {
-      stroke: var(--ax-neutral-light);
+      stroke: var(--dynamic-list-row-disabled-drag-icon-color, $dynamic-list-row-disabled-drag-icon-color);
 
       rect {
-        fill: var(--ax-neutral-light);
+        fill: var(--dynamic-list-row-disabled-drag-icon-color, $dynamic-list-row-disabled-drag-icon-color);
       }
     }
   }

package/src/components/FieldSelection/FieldSelection.scss

@@ -1,5 +1,11 @@
 @import '../../styles/common.scss';
 
+.container {
+  div:has(> .selectionHeader) {
+    z-index: 12 !important;
+  }
+}
+
 .header {
   display: grid;
   grid-template-columns: 1fr 50px;
@@ -7,10 +13,6 @@
   align-items: center;
 }
 
-.item {
-  z-index: 0;
-}
-
 .selectionHeader {
   display: grid;
   grid-template-columns: 1fr;

package/src/components/FieldSelection/FieldSelection.tsx

@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import React, { useEffect } from 'react';
 import { noop } from '../../helpers/utils';
 import { Accordion, AccordionItem } from '../Accordion';
@@ -57,7 +58,7 @@ export const FieldSelection: React.FC<FieldSelectionProps> = ({
 
   return (
     <Accordion
-      className={className}
+      className={clsx(classes.container, className)}
       expandedByDefault={true}
       header={
         <FieldSelectionHeader
@@ -84,7 +85,6 @@ 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

@@ -109,7 +109,7 @@ $input-inactive: 1px solid var(--input-border-color, $input-border-color);
   }
 }
 
-.content {
+.contentContainer {
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows 200ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -118,6 +118,12 @@ $input-inactive: 1px solid var(--input-border-color, $input-border-color);
     grid-template-rows: 1fr;
   }
 
+  .content {
+    border-left: 1px solid transparent;
+    border-right: 1px solid transparent;
+    border-bottom: 1px solid transparent;
+  }
+
   .active {
     display: grid;
     overflow: hidden;

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

@@ -274,7 +274,9 @@ export const Filter = <T extends Data>({
         />
       </div>
       <div
-        className={clsx(classes.content, { [classes.expanded]: isExpanded })}
+        className={clsx(classes.contentContainer, {
+          [classes.expanded]: isExpanded,
+        })}
       >
         {hasValue && !isExpanded && (
           <div
@@ -299,7 +301,7 @@ export const Filter = <T extends Data>({
         {isExpanded && (
           <div
             data-test-id="filter-content"
-            className={clsx({ [classes.active]: isActive })}
+            className={clsx({ [classes.active]: isActive }, classes.content)}
           >
             {renderFilterContent()}
           </div>

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

@@ -4,13 +4,24 @@
 .container {
   display: grid;
 
+  .dateTimeInputWrapper {
+    border: $input-inactive;
+
+    &:focus-within {
+      border: $input-active;
+    }
+  }
   .dateTimeInput {
     display: grid;
     grid-template-rows: 1fr;
     grid-template-columns: 1fr min-content;
 
     place-items: center;
-    border: $input-inactive;
+    border: 2px solid transparent;
+
+    &:focus-within {
+      border: none;
+    }
 
     .inputValue {
       &:focus {
@@ -40,10 +51,6 @@
       }
     }
 
-    &:focus-within {
-      border: $input-active;
-    }
-
     &.hasError {
       border: 3px solid
         var(--input-invalid-border-color, $input-invalid-border-color);

package/src/components/Filters/SelectionTypes/DateTimeFilter/DateTimeFilter.tsx

@@ -106,32 +106,34 @@ export const DateTimeFilter: React.FC<DateTimeFilterProps> = ({
           className,
         )}
       >
-        <div
-          className={clsx(
-            classes.dateTimeInput,
-            'datetime-border-wrapper',
-            errorMsg && classes.hasError,
-          )}
-          ref={container}
-        >
-          <input
-            id={inputId}
-            autoFocus
-            className={clsx(classes.inputValue)}
-            onKeyDown={handleKeyDown}
-            onChange={(e) => setValue(e.target.value)}
-            value={value}
-          />
-          <Button
-            className={clsx(classes.button)}
-            buttonContext={ButtonContext.None}
-            icon={IconName.Calendar}
-            onButtonClicked={(e) => {
-              e.persist();
-              e.preventDefault();
-              setShowPicker(!showPicker);
-            }}
-          />
+        <div className={clsx(classes.dateTimeInputWrapper)}>
+          <div
+            className={clsx(
+              classes.dateTimeInput,
+              'datetime-border-wrapper',
+              errorMsg && classes.hasError,
+            )}
+            ref={container}
+          >
+            <input
+              id={inputId}
+              autoFocus
+              className={clsx(classes.inputValue)}
+              onKeyDown={handleKeyDown}
+              onChange={(e) => setValue(e.target.value)}
+              value={value}
+            />
+            <Button
+              className={clsx(classes.button)}
+              buttonContext={ButtonContext.None}
+              icon={IconName.Calendar}
+              onButtonClicked={(e) => {
+                e.persist();
+                e.preventDefault();
+                setShowPicker(!showPicker);
+              }}
+            />
+          </div>
         </div>
         {errorMsg !== undefined && <small>{errorMsg}</small>}
       </div>

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

@@ -5,7 +5,6 @@
 
   display: grid;
   grid-auto-rows: 40px;
-  gap: 1px;
   border-top: unset;
 
   .option {

package/src/components/FormElements/Checkbox/Checkbox.scss

@@ -26,7 +26,7 @@
     // transition: background-color 0.15s ease-in-out 0s;
 
     &.hasConfirm {
-      border: 1px solid var(--ax-warning);
+      border: 1px solid var(--checkbox-warning-border-color, $checkbox-warning-border-color);
     }
 
     &.hasError {
@@ -54,8 +54,8 @@
     box-shadow: 0 0 0 2px var(--input-hover-color, $input-hover-color);
 
     &.hasConfirm {
-      border: 1px solid var(--ax-warning);
-      box-shadow: 0 0 0 2px var(--ax-warning);
+      border: 1px solid var(--checkbox-warning-hover-border-color, $checkbox-warning-hover-border-color);
+      box-shadow: 0 0 0 2px var(--checkbox-warning-hover-border-color, $checkbox-warning-hover-border-color);
     }
 
     &.hasError {
@@ -70,7 +70,7 @@
     background-color: var(--input-hover-color, $input-hover-color);
 
     &.hasConfirm {
-      background-color: var(--ax-warning);
+      background-color: var(--checkbox-warning-checked-bg-color, $checkbox-warning-checked-bg-color);
     }
 
     &.hasError {

package/src/components/FormElements/CustomTags/CustomTags.scss

@@ -145,7 +145,7 @@
         &.hasError {
           background-color: white;
           svg * {
-            stroke: color-mix(in srgb, var(--ax-neutral) 50%, transparent);
+            stroke: var(--custom-tags-disabled-button-stroke-color, $custom-tags-disabled-button-stroke-color);
           }
         }
 

package/src/components/FormElements/DateTimeField/DateTimeText.scss

@@ -43,16 +43,15 @@
     display: grid;
     grid-template-columns: min-content min-content;
   }
+}
 
-  .picker {
-    position: absolute;
-    overflow: visible;
-    z-index: 99999;
-  }
+.picker {
+  overflow: visible;
+  z-index: 99999;
 }
 
 .backdrop {
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   bottom: 0;