@axinom/mosaic-ui 0.55.0-rc.10 → 0.55.0-rc.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.55.0-rc.10",
+  "version": "0.55.0-rc.12",
   "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.28-rc.10",
+    "@axinom/mosaic-core": "^0.4.28-rc.12",
     "@faker-js/faker": "^7.4.0",
     "@geoffcox/react-splitter": "^2.1.2",
     "@mui/base": "5.0.0-beta.40",
@@ -107,5 +107,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0029071f94fd1de080b503960fbea3425c10a7d6"
+  "gitHead": "ed3063f536d5054925480f0f8959f44e58990b5e"
 }

package/src/components/DynamicDataList/DynamicListDataEntry/Renderers/createSelectRenderer/createSelectRenderer.scss

@@ -8,8 +8,8 @@
   grid-template-columns: 1fr;
   grid-template-rows: min-content min-content;
 
-  select {
-    max-width: none;
-    width: 100%;
+  div:has(> input) {
+    max-width: none !important;
+    width: 100% !important;
   }
 }

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

@@ -2,32 +2,14 @@
 
 .container {
   .inputWrapper {
-    position: relative;
-    max-width: var(--input-max-width, $input-max-width);
-
-    .button {
-      position: absolute;
-      right: 0;
-      top: 0;
-
-      svg {
-        height: 50%;
-        * {
-          stroke: var(
-            --popper-trigger-button-color,
-            $popper-trigger-button-color
-          );
-        }
-      }
-
-      &:disabled {
-        svg * {
-          stroke: var(--select-arrow-color, $select-disabled-arrow-color);
-        }
-      }
-    }
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+    max-width: var(--select-max-width, $select-max-width);
+    width: var(--select-max-width, $select-max-width);
 
     input {
+      grid-column: 1/2;
       color: var(--input-color, $input-color);
       border: 1px solid var(--input-border-color, $input-border-color);
       padding: 0 48px 0 12px;
@@ -82,6 +64,29 @@
         }
       }
     }
+
+    .button {
+      grid-column: 2/3;
+      margin-left: -50px;
+      svg {
+        height: 50%;
+        * {
+          stroke: var(
+            --popper-trigger-button-color,
+            $popper-trigger-button-color
+          );
+        }
+      }
+
+      &:disabled {
+        svg * {
+          stroke: var(
+            --select-disabled-arrow-color,
+            $select-disabled-arrow-color
+          );
+        }
+      }
+    }
   }
 }
 

package/src/components/FormElements/Select/Select.tsx

@@ -1,6 +1,7 @@
 import { Popper, useAutocomplete, UseAutocompleteProps } from '@mui/base';
 import clsx from 'clsx';
 import React, { ChangeEvent } from 'react';
+import { noop } from '../../../helpers/utils';
 import { Button, ButtonContext } from '../../Buttons';
 import { IconName } from '../../Icons';
 import { BaseFormControl, BaseInputEvents } from '../Form.models';
@@ -65,7 +66,7 @@ export const Select: React.FC<SelectProps> = (props) => {
     id,
     disabled,
     value:
-      autoCompleteProps.options.find((option) => option.value === value) ??
+      autoCompleteProps.options?.find((option) => option.value === value) ??
       null,
     onChange: ({ target: _, ...event }, value) => {
       onChange?.({
@@ -76,6 +77,7 @@ export const Select: React.FC<SelectProps> = (props) => {
           name,
           value: value?.value ?? '',
         },
+        preventDefault: noop,
       } as ChangeEvent<HTMLInputElement>);
     },
     disableClearable: !addEmptyOption,