@axinom/mosaic-ui 0.50.0 → 0.51.0-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.50.0",
+  "version": "0.51.0-rc.1",
   "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.23",
+    "@axinom/mosaic-core": "^0.4.24-rc.1",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.11.8",
     "clsx": "^1.1.0",
@@ -105,5 +105,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d13814dea6f5683979fe8863dfa8945ad1e3b271"
+  "gitHead": "5110af3a26f1b510fc54435238d12baaf630c086"
 }

package/src/components/Explorer/Explorer.tsx

@@ -7,14 +7,15 @@ import {
   useEffect,
   useState,
 } from 'react';
-import { ActionData, IconName } from '..';
 import { noop } from '../../helpers/utils';
 import { showNotification } from '../../initialize';
 import { Data } from '../../types/data';
 import { ErrorTypeToStationError } from '../../utils/ErrorTypeToStationError';
 import { isContextAction } from '../Actions/Action/Action';
+import { ActionData } from '../Actions/Actions.models';
 import { Filters } from '../Filters/Filters';
 import { FilterType, FilterValues } from '../Filters/Filters.model';
+import { IconName } from '../Icons/Icons.models';
 import {
   Column,
   ItemSelectEventArgs,

package/src/components/FormElements/MaskedSingleLineText/MaskedSingleLineTextField.tsx

@@ -13,8 +13,8 @@ import {
  *  name="title" 
  *  label="Title" 
  *  as={MaskedSingleLineTextField} 
-    mask={'00:00:00.000'},
-    placeholderChar={'0'}, />
+    mask={'00:00:00.000'}
+    placeholderChar={'0'} />
  */
 export const MaskedSingleLineTextField: React.FC<
   Omit<MaskedSingleLineTextProps, 'error' | 'onChange'>

package/src/components/FormElements/SingleLineText/SingleLineText.scss

@@ -18,6 +18,10 @@
       border: 1px solid
         var(--input-invalid-border-color, $input-invalid-border-color);
     }
+
+    &::placeholder {
+      color: var(--input-placeholder-color, $input-placeholder-color);
+    }
   }
 
   input:disabled {

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

@@ -28,6 +28,11 @@ export interface SingleLineTextProps extends BaseFormControl, BaseInputEvents {
   autoComplete?: 'on' | 'off';
 
   innerRef?: React.RefObject<HTMLInputElement>;
+
+  /**
+   * Additional props to be passed to the input element.
+   */
+  inputProps?: InputHTMLAttributes<HTMLInputElement>;
 }
 
 /**
@@ -51,6 +56,7 @@ export const SingleLineText: React.FC<SingleLineTextProps> = ({
   onBlur,
   onFocus,
   className = '',
+  inputProps,
   ...rest
 }) => {
   const errorMsg: string | undefined = error;
@@ -100,6 +106,7 @@ export const SingleLineText: React.FC<SingleLineTextProps> = ({
       dataTestFieldType="SingleLineText"
     >
       <input
+        {...inputProps}
         className={clsx({ [classes.hasError]: errorMsg !== undefined })}
         id={id}
         name={name}

package/src/components/FormElements/index.ts

@@ -29,7 +29,11 @@ export {
 export { FormikDebug } from './FormikDebug/FormikDebug';
 export { GenericField, GenericFieldProps } from './GenericField/GenericField';
 export { LinkField, LinkFieldProps } from './Link/LinkField';
-export { MaskedSingleLineText } from './MaskedSingleLineText/MaskedSingleLineText';
+export {
+  MaskedSingleLineText,
+  MaskedSingleLineTextProps,
+} from './MaskedSingleLineText/MaskedSingleLineText';
+export { MaskedSingleLineTextField } from './MaskedSingleLineText/MaskedSingleLineTextField';
 export { Radio, RadioProps } from './Radio/Radio';
 export { RadioField } from './Radio/RadioField';
 export { ReadOnlyField, ReadOnlyFieldProps } from './ReadOnly/ReadOnlyField';

package/src/components/List/ListRow/ListRow.tsx

@@ -177,7 +177,7 @@ export const ListRow = <T extends Data>({
   horizontalTextAlign = 'left',
   verticalTextAlign = 'center',
   textWrap = false,
-  rowHeight = textWrap ? undefined : '50px',
+  rowHeight = textWrap ? 'auto' : '50px',
   data,
   itemSelected = false,
   isTrigger = false,

package/src/styles/variables.scss

@@ -163,6 +163,7 @@ $page-header-actions-background-color: $page-header-background-color;
 $width-big: 650px;
 $width-small: 320px;
 $input-color: $dark-gray;
+$input-placeholder-color: $gray;
 $input-hover-color: $blue;
 $input-label-color: $dark-blue;
 $input-border-color: $light-gray;