@axinom/mosaic-ui 0.51.0-rc.0 → 0.51.0-rc.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.51.0-rc.0",
+  "version": "0.51.0-rc.10",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -21,7 +21,7 @@
     "clean": "rimraf ./dist",
     "build": "yarn clean && cross-env NODE_ENV=production rollup -c",
     "build:ci": "yarn workspaces focus && yarn build",
-    "dev": "cross-env NODE_ENV=production rollup -c -w",
+    "dev": "rollup -c -w",
     "test": "jest --silent",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
@@ -32,7 +32,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@axinom/mosaic-core": "^0.4.24-rc.0",
+    "@axinom/mosaic-core": "^0.4.24-rc.10",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.11.8",
     "clsx": "^1.1.0",
@@ -105,5 +105,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a99c608834292804eb1d93b7bbcea6624e55c6a0"
+  "gitHead": "53f2fcee53ecd1f887c10bdaa1e7084f1820f6dc"
 }

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/Filters/Filter/Filter.scss

@@ -73,7 +73,7 @@ $input-inactive: 1px solid var(--input-border-color, $input-border-color);
     font-size: var(--filter-font-size, $filter-font-size);
     display: grid;
     grid-template-columns: auto auto;
-    grid-template-rows: 50px;
+    grid-template-rows: auto;
     place-content: space-between;
     place-items: center;
 
@@ -92,6 +92,7 @@ $input-inactive: 1px solid var(--input-border-color, $input-border-color);
 
     span {
       padding-left: 30px;
+      padding-bottom: 10px;
     }
   }
 }

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/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;