@axinom/mosaic-ui 0.67.0-rc.1 → 0.67.0-rc.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.67.0-rc.1",
+  "version": "0.67.0-rc.2",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -112,5 +112,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "05c979ef28af7f6460faba7b3dbd034ffcb7bd38"
+  "gitHead": "2364d1ad780b65c4974987c3f3ac30e09dfe850e"
 }

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>