@axinom/mosaic-ui 0.55.0-rc.9 → 0.56.0-rc.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.55.0-rc.9",
+  "version": "0.56.0-rc.0",
   "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.9",
+    "@axinom/mosaic-core": "^0.4.29-rc.0",
     "@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": "cdb30d7d017d4b90bda8669d35374c9c9c81325f"
+  "gitHead": "02a76894706054cbe965673042093fcc9167a7b3"
 }

package/src/components/DynamicDataList/DynamicDataList.model.ts

@@ -1,7 +1,7 @@
 import { Data } from '../../types/data';
 import { ColumnRenderer } from '../List/List.model';
 
-interface UnboundColumn<T extends Data> extends BaseColumn<T> {
+interface DDLUnboundColumn<T extends Data> extends DDLBaseColumn<T> {
   /** The name of the property on the Data object that should be rendered in that column. */
   propertyName?: keyof T;
   /**
@@ -16,7 +16,7 @@ interface UnboundColumn<T extends Data> extends BaseColumn<T> {
   key: string;
 }
 
-interface BoundColumn<T extends Data> extends BaseColumn<T> {
+interface DDLBoundColumn<T extends Data> extends DDLBaseColumn<T> {
   /** The name of the property on the Data object that should be rendered in that column. */
   propertyName: keyof T;
 
@@ -32,7 +32,7 @@ interface BoundColumn<T extends Data> extends BaseColumn<T> {
   key?: string;
 }
 
-export interface BaseColumn<T extends Data> {
+export interface DDLBaseColumn<T extends Data> {
   /** The width of the column as CSS size (default: 1fr) */
   size?: string;
   /** Column's header label */
@@ -63,8 +63,8 @@ export interface BaseColumn<T extends Data> {
 }
 
 export type DynamicListColumn<T extends Data> =
-  | UnboundColumn<T>
-  | BoundColumn<T>;
+  | DDLUnboundColumn<T>
+  | DDLBoundColumn<T>;
 
 export type DynamicListDataEntryRenderer = (
   /** Value to render. */

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/FileUploadControl/FileUploadControl.scss

@@ -53,7 +53,7 @@
       display: grid;
       align-content: center;
       color: var(--input-disabled-font-color, $input-disabled-font-color);
-      border: 1px solid var(--file-upload-input, $file-upload-input);
+      border: 1px dashed var(--file-upload-input, $file-upload-input);
       background-color: var(
         --read-only-text-background-color,
         $read-only-text-background-color
@@ -80,13 +80,12 @@
       display: grid;
       align-content: center;
       text-align: center;
-      border: 1px dashed var(--input-border-color, $input-border-color);
+      border: 1px dashed var(--file-upload-input, $file-upload-input);
       grid-column: 1 / span 2;
       height: 100px;
       width: 650px;
       z-index: 9999;
 
-      background-color: white;
       transition: box-shadow 0.15s ease-in-out 0s;
 
       &:hover {

package/src/components/FormElements/FileUploadControl/FileUploadControl.stories.tsx

@@ -32,7 +32,6 @@ export const Default: StoryObj<typeof FileUploadControl> = {
   args: {
     name: 'fileUpload',
     label: 'Ingest File',
-    placeholder: 'Select File...',
     tooltipContent: faker.lorem.paragraph(2),
   },
   render: (args) =>

package/src/components/FormElements/FileUploadControl/FileUploadControl.tsx

@@ -34,7 +34,7 @@ export const FileUploadControl: React.FC<FileUploadProps> = ({
   onFileSelected,
   error,
   id = 'file',
-  placeholder,
+  placeholder = 'Browse or drag your file here',
   value,
   accept,
   className = '',
@@ -138,7 +138,7 @@ export const FileUploadControl: React.FC<FileUploadProps> = ({
       <div className={clsx(classes.content)}>
         {dragging && !disabled ? (
           <div className={clsx(classes.dropTarget)} onDrop={handleDrop}>
-            DROP YOUR FILE HERE!
+            Drag & Drop your file here
           </div>
         ) : (
           <>

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,

package/src/components/FormElements/SingleLineText/SingleLineText.tsx

@@ -74,7 +74,8 @@ export const SingleLineText: React.FC<SingleLineTextProps> = ({
 
   useEffect(() => {
     if (innerRef.current) {
-      innerRef.current.value = String(value || '');
+      const isTruthyValue = value === 0 || Boolean(value);
+      innerRef.current.value = isTruthyValue ? String(value) : '';
     }
   }, [innerRef, value]);
 

package/src/components/List/List.model.ts

@@ -18,7 +18,7 @@ export interface ColumnSortKeys {
   descending: string;
 }
 
-interface UnboundColumn<T extends Data> extends BaseColumn<T> {
+interface ListUnboundColumn<T extends Data> extends ListBaseColumn<T> {
   /** The name of the property on the Data object that should be rendered in that column. */
   propertyName?: keyof T;
   /**
@@ -34,7 +34,7 @@ interface UnboundColumn<T extends Data> extends BaseColumn<T> {
   key: string;
 }
 
-interface BoundColumn<T extends Data> extends BaseColumn<T> {
+interface ListBoundColumn<T extends Data> extends ListBaseColumn<T> {
   /** The name of the property on the Data object that should be rendered in that column. */
   propertyName: keyof T;
 
@@ -51,7 +51,7 @@ interface BoundColumn<T extends Data> extends BaseColumn<T> {
   key?: string;
 }
 
-interface BaseColumn<T extends Data> {
+interface ListBaseColumn<T extends Data> {
   /** The width of the column as CSS size (default: 1fr) */
   size?: string;
   /** Column's header label */
@@ -82,7 +82,7 @@ interface BaseColumn<T extends Data> {
   disableResizing?: boolean;
 }
 
-export type Column<T extends Data> = UnboundColumn<T> | BoundColumn<T>;
+export type Column<T extends Data> = ListUnboundColumn<T> | ListBoundColumn<T>;
 
 export interface ColumnMap {
   [key: string]: string;

package/src/components/Loaders/ImageLoader/ImageLoader.tsx

@@ -88,6 +88,7 @@ export const ImageLoader: React.FC<ImageLoaderProps> = ({
     if (imgSrc === undefined) {
       setState(ImageLoaderState.Failed);
     }
+    setState(ImageLoaderState.Loading);
   }, [imgSrc]);
 
   // Fallback if the image source fails to load in time

package/src/components/Tabs/TabList/CustomTabList.tsx

@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import React from 'react';
 import { ReactTabsFunctionComponent, TabList, TabListProps } from 'react-tabs';
 import classes from './CustomTabList.scss';
@@ -5,9 +6,10 @@ import { ScrollContainer } from './ScrollContainer';
 
 export const CustomTabList: ReactTabsFunctionComponent<TabListProps> = ({
   children,
+  className,
   ...otherProps
 }) => (
-  <TabList {...otherProps} className={classes.tablist}>
+  <TabList {...otherProps} className={clsx(classes.tablist, className)}>
     <ScrollContainer>{children}</ScrollContainer>
   </TabList>
 );