@axinom/mosaic-ui 0.31.0-rc.9 → 0.32.0-rc.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.31.0-rc.9",
+  "version": "0.32.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.4-rc.9",
+    "@axinom/mosaic-core": "^0.4.5-rc.0",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.9.2",
     "clsx": "^1.1.0",
@@ -40,6 +40,7 @@
     "luxon": "^3.3.0",
     "react-calendar": "^3.3.1",
     "react-content-loader": "^6.0.3",
+    "react-imask": "^6.4.3",
     "react-popper": "^2.2.5",
     "react-transition-group": "^4.3.0",
     "yup": "^0.32.11"
@@ -101,5 +102,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d6f35508b58053f75ec8fc8bd75236dbae206f1e"
+  "gitHead": "d99f62328986c3250b0491a0b8b5f55d89b66840"
 }

package/src/components/Actions/Action/Action.spec.tsx

@@ -1,10 +1,10 @@
 import { mount, shallow } from 'enzyme';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
-import { Link, BrowserRouter as Router } from 'react-router-dom';
+import { BrowserRouter as Router, Link } from 'react-router-dom';
 import { noop } from '../../../helpers/utils';
 import { TextButton } from '../../Buttons';
-import { ConfirmDialog, ConfirmationConfig } from '../../ConfirmDialog';
+import { ConfirmationConfig, ConfirmDialog } from '../../ConfirmDialog';
 import { IconName, Icons } from '../../Icons';
 import {
   Action,

package/src/components/Actions/Action/Action.tsx

@@ -2,8 +2,8 @@ import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import {
-  ConfirmDialog,
   ConfirmationConfig,
+  ConfirmDialog,
   useConfirmationDelay,
 } from '../../ConfirmDialog';
 import { IconName, Icons } from '../../Icons';

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

@@ -35,6 +35,8 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
+
+    padding: 2px;
   }
 
   .position,
@@ -56,6 +58,7 @@
     grid-template-columns: 1fr 1fr;
 
     justify-items: start;
+    align-items: center;
 
     opacity: 0.5;
 
@@ -110,8 +113,9 @@
   }
 
   .actionButtonContainer {
+    display: grid;
     height: 100%;
-    align-items: start;
+    align-items: center;
 
     .actionButton {
       height: 50px;

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

@@ -7,49 +7,4 @@
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: min-content min-content;
-
-  input {
-    width: 100%;
-    box-sizing: border-box;
-    height: var(--dynamic-list-input-height, $dynamic-list-input-height);
-    padding: 0 6px;
-
-    color: var(--input-color, $input-color);
-    font-size: var(--label-font-size, $label-font-size);
-
-    border: 1px solid var(--input-border-color, $input-border-color);
-    outline: none;
-
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-
-    transition: box-shadow 0.15s ease-in-out 0s;
-
-    padding: 0 12px 0 12px;
-
-    &.hasError {
-      border: 1px solid
-        var(--input-invalid-border-color, $input-invalid-border-color);
-    }
-  }
-
-  input:hover:enabled,
-  input:focus {
-    border: 1px solid var(--input-hover-color, $input-hover-color);
-    box-shadow: inset 0 0 0 2px var(--input-hover-color, $input-hover-color);
-
-    &.hasError {
-      border: 1px solid
-        var(--input-invalid-border-color, $input-invalid-border-color);
-      box-shadow: inset 0 0 0 2px
-        var(--input-invalid-hover-color, $input-invalid-hover-color);
-    }
-  }
-
-  > small {
-    padding: 6px 0;
-    white-space: normal;
-    color: var(--input-invalid-color, $input-invalid-color);
-  }
 }

package/src/components/DynamicDataList/DynamicListDataEntry/Renderers/createInputRenderer/createInputRenderer.spec.tsx

@@ -43,66 +43,6 @@ describe('createInputRenderer', () => {
     expect(wrapper).toBeTruthy();
   });
 
-  it(`renders an 'id' attribute on the 'input' element if set`, () => {
-    const mockId = 'test-id';
-    const wrapper = mount(<RendererWrapper id={mockId} />);
-
-    const input = wrapper.find('input');
-
-    expect(input.prop('id')).toBe(mockId);
-  });
-
-  it(`renders a 'name' attribute on the 'input' element if set`, () => {
-    const mockName = 'test-name';
-    const wrapper = mount(<RendererWrapper name={mockName} />);
-
-    const input = wrapper.find('input');
-
-    expect(input.prop('name')).toBe(mockName);
-  });
-
-  it(`renders a 'type' attribute on the 'input' element if set`, () => {
-    const mockType = 'test-type';
-    const wrapper = mount(<RendererWrapper type={mockType} />);
-
-    const input = wrapper.find('input');
-
-    expect(input.prop('type')).toBe(mockType);
-  });
-
-  it('renders "disabled" attribute on the "input" element with value "false" if not set otherwise', () => {
-    const wrapper = mount(<RendererWrapper />);
-
-    const input = wrapper.find('input');
-
-    expect(input.prop('disabled')).toBe(false);
-  });
-
-  it('renders "disabled" attribute on the "input" element if set', () => {
-    const wrapper = mount(<RendererWrapper disabled={true} />);
-
-    const input = wrapper.find('input');
-
-    expect(input.prop('disabled')).toBe(true);
-  });
-
-  it(`doesn't render placeholder by default`, () => {
-    const wrapper = mount(<RendererWrapper />);
-
-    const input = wrapper.find('input');
-
-    expect(input.prop('placeholder')).toBeUndefined();
-  });
-
-  it(`renders a 'placeholder' attribute on the 'input' element if set`, () => {
-    const mockPlaceholder = 'test-placeholder';
-    const wrapper = mount(<RendererWrapper placeholder={mockPlaceholder} />);
-
-    const input = wrapper.find('input');
-
-    expect(input.prop('placeholder')).toBe(mockPlaceholder);
-  });
-
   it(`sets 'input' value to current value`, () => {
     const mockValue = 'test-value';
     const wrapper = mount(<RendererWrapper currentValue={mockValue} />);
@@ -144,7 +84,9 @@ describe('createInputRenderer', () => {
     const input = wrapper.find('input');
 
     act(() => {
-      input.simulate('change', { target: { value: mockStringifiedNumber } });
+      input.simulate('change', {
+        target: { value: mockStringifiedNumber },
+      });
     });
 
     expect(onValueChangeSpy).toHaveBeenCalledTimes(1);

package/src/components/DynamicDataList/DynamicListDataEntry/Renderers/createInputRenderer/createInputRenderer.tsx

@@ -1,6 +1,6 @@
-import clsx from 'clsx';
 import React, { ChangeEvent } from 'react';
 import { DynamicListDataEntryRenderer } from '../../../../DynamicDataList/DynamicDataList.model';
+import { SingleLineText } from '../../../../FormElements';
 import { CreateInputRendererConfig } from '../renderers.model';
 import classes from './createInputRenderer.scss';
 
@@ -11,7 +11,7 @@ import classes from './createInputRenderer.scss';
  */
 export const createInputRenderer = ({
   id,
-  name,
+  name = '',
   placeholder,
   type = 'text',
   transform = (value: string) => value,
@@ -27,19 +27,18 @@ export const createInputRenderer = ({
     };
 
     return (
-      <div className={classes.container}>
-        <input
-          id={id}
-          name={name}
-          type={type}
-          placeholder={placeholder}
-          value={(currentValue as string) ?? ''}
-          onChange={onChangeHandler}
-          className={clsx({ [classes.hasError]: error !== undefined })}
-          disabled={disabled}
-        />
-        {error !== undefined && <small>{error}</small>}
-      </div>
+      <SingleLineText
+        id={id}
+        name={name}
+        type={type}
+        disabled={disabled}
+        placeholder={placeholder}
+        onChange={onChangeHandler}
+        inlineMode={true}
+        error={error}
+        className={classes.container}
+        value={(currentValue as string) ?? ''}
+      />
     );
   };
 

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

@@ -50,12 +50,12 @@
 
   select:hover {
     border: 1px solid var(--input-hover-color, $input-hover-color);
-    box-shadow: inset 0 0 0 2px var(--input-hover-color, $input-hover-color);
+    box-shadow: 0 0 0 2px var(--input-hover-color, $input-hover-color);
 
     &.hasError {
       border: 1px solid
         var(--input-invalid-border-color, $input-invalid-border-color);
-      box-shadow: inset 0 0 0 2px
+      box-shadow: 0 0 0 2px
         var(--input-invalid-hover-color, $input-invalid-hover-color);
     }
   }

package/src/components/DynamicDataList/DynamicListDataEntry/Renderers/renderers.model.ts

@@ -1,8 +1,10 @@
+import { BaseFormControl, SingleLineTextProps } from '../../../FormElements';
+
 export interface BaseRendererConfig {
   /** id html element id attribute */
-  id?: string;
+  id?: BaseFormControl['id'];
   /** element name attribute */
-  name?: string;
+  name?: BaseFormControl['name'];
   /** element placeholder attribute */
   placeholder?: string;
   /** Optional transformer that will change the final value to match the return value */
@@ -10,8 +12,8 @@ export interface BaseRendererConfig {
 }
 
 export interface CreateInputRendererConfig extends BaseRendererConfig {
-  /** input element type attribute */
-  type?: string;
+  /** Input element type */
+  type?: SingleLineTextProps['type'];
   /** optional transformer that will change the current value with each keypress. does not work with 'mask' prop. mainly used for trim(). */
   transform?: (value: string) => unknown;
 }

package/src/components/DynamicDataList/index.ts

@@ -2,8 +2,8 @@ export * from './DynamicDataList';
 export * from './DynamicDataList.model';
 export * from './DynamicListDataEntry';
 export {
-  CreateInputRendererConfig,
-  CreateSelectRendererConfig,
   createInputRenderer,
+  CreateInputRendererConfig,
   createSelectRenderer,
+  CreateSelectRendererConfig,
 } from './DynamicListDataEntry/Renderers';

package/src/components/EmptyStation/EmptyStation.spec.tsx

@@ -1,8 +1,8 @@
 import { mount, shallow } from 'enzyme';
 import React from 'react';
 import { MessageBar } from '../MessageBar';
-import { PageHeader } from '../PageHeader';
 import { StationError } from '../models';
+import { PageHeader } from '../PageHeader';
 import { EmptyStation, EmptyStationProps } from './EmptyStation';
 
 describe('EmptyStation', () => {

package/src/components/EmptyStation/EmptyStation.tsx

@@ -1,8 +1,8 @@
 import clsx from 'clsx';
 import React, { PropsWithChildren } from 'react';
 import { MessageBar, MessageBarProps } from '../MessageBar';
-import { PageHeader, PageHeaderProps } from '../PageHeader';
 import { StationError } from '../models';
+import { PageHeader, PageHeaderProps } from '../PageHeader';
 import classes from './EmptyStation.scss';
 
 export type EmptyStationProps = PageHeaderProps & {

package/src/components/Explorer/Explorer.tsx

@@ -1,8 +1,8 @@
 import clsx from 'clsx';
 import { LocationDescriptor } from 'history';
 import {
-  ForwardedRef,
   default as React,
+  ForwardedRef,
   useCallback,
   useEffect,
   useState,
@@ -22,9 +22,9 @@ import {
   ListSelectMode,
   SortData,
 } from '../List';
+import { ErrorType } from '../models';
 import { PageHeader, PageHeaderActionProps } from '../PageHeader';
 import { getState, storeState } from '../Utils/State/GlobalState';
-import { ErrorType } from '../models';
 import {
   ExplorerBulkAction,
   ExplorerDataProvider,

package/src/components/FormElements/Checkbox/Checkbox.scss

@@ -5,7 +5,6 @@
     -moz-appearance: none;
     -webkit-appearance: none;
     appearance: none;
-    cursor: pointer;
     color: var(--input-color, $input-color);
     border: 1px solid var(--input-border-color, $input-border-color);
     width: max-content;
@@ -34,6 +33,10 @@
       border: 1px solid
         var(--input-invalid-border-color, $input-invalid-border-color);
     }
+
+    &:enabled {
+      cursor: pointer;
+    }
   }
 
   input:hover:enabled {

package/src/components/FormElements/Checkbox/Checkbox.tsx

@@ -1,9 +1,9 @@
 import clsx from 'clsx';
 import React, { useRef, useState } from 'react';
 import {
-  ConfirmDialog,
   ConfirmationConfig,
   ConfirmationMode,
+  ConfirmDialog,
 } from '../../ConfirmDialog';
 import { BaseFormControl, BaseInputEvents } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';

package/src/components/FormElements/CustomTags/CustomTags.scss

@@ -83,8 +83,6 @@
         list-style-type: none;
         z-index: 10;
 
-        // -webkit-box-shadow: 0px 0px 9px -2px rgba(0, 0, 0, 0.87);
-
         border: 1px solid gray;
         background-color: #ffffff;
 

package/src/components/FormElements/CustomTags/CustomTags.tsx

@@ -1,5 +1,11 @@
 import clsx from 'clsx';
-import React, { FormEvent, useEffect, useRef, useState } from 'react';
+import React, {
+  ChangeEvent,
+  FormEvent,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import { noop } from '../../../helpers/utils';
 import { useDebounce } from '../../../hooks/useDebounce/useDebounce';
@@ -84,7 +90,7 @@ export const CustomTags: React.FC<CustomTagsProps> = ({
         ...ref.current,
 
         currentTarget: { value: currentTags as unknown as string },
-      } as React.FormEvent<HTMLInputElement>);
+      } as React.ChangeEvent<HTMLInputElement>);
 
       // Resets event data
       ref.current = undefined;
@@ -266,7 +272,7 @@ export const CustomTags: React.FC<CustomTagsProps> = ({
    * Called when a user focuses out of the input
    * @param e Input form event
    */
-  const onBlurHandler = (e: FormEvent<HTMLInputElement>): void => {
+  const onBlurHandler = (e: ChangeEvent<HTMLInputElement>): void => {
     onBlur(e);
 
     // reset input if value is only whitespaces
@@ -280,7 +286,7 @@ export const CustomTags: React.FC<CustomTagsProps> = ({
       currentTarget: {
         value: textInput.current?.value ?? '',
       },
-    } as FormEvent<HTMLInputElement>);
+    } as ChangeEvent<HTMLInputElement>);
   };
 
   return (

package/src/components/FormElements/DateTimeField/DateTimeText.tsx

@@ -108,6 +108,7 @@ export const DateTimeText: React.FC<DateTimeTextProps> = ({
           type="button"
           icon={IconName.Calendar}
           buttonContext={ButtonContext.Icon}
+          disabled={disabled}
           className={clsx(classes.button)}
           onButtonClicked={(e) => {
             e.persist();

package/src/components/FormElements/DateTimeField/DateTimeTextField.tsx

@@ -12,8 +12,7 @@ export const DateTimeTextField: React.FC<Omit<DateTimeTextProps, 'error'>> = (
   props,
 ) => {
   const error = useFormikError(props.name);
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [field, meta, helpers] = useField(props.name);
+  const [, meta, helpers] = useField(props.name);
 
   const handleChange = (value: string | null, valid?: boolean): void => {
     if (!valid) {

package/src/components/FormElements/Form.models.ts

@@ -1,4 +1,4 @@
-import { FormEvent, ReactNode } from 'react';
+import { ChangeEvent, FormEvent, ReactNode } from 'react';
 
 export interface BaseFormElement {
   /** Form control id */
@@ -24,11 +24,11 @@ export interface BaseFormControl extends BaseFormElement {
 
 export interface BaseInputEvents {
   /** Raised when the value has changed */
-  onChange?: (event: FormEvent<HTMLInputElement>) => void;
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
   /** Raised when the element has been selected */
-  onBlur?: (event: FormEvent<HTMLInputElement>) => void;
+  onBlur?: (event: ChangeEvent<HTMLInputElement>) => void;
   /** Raised when the element has been de-selected */
-  onFocus?: (event: FormEvent<HTMLInputElement>) => void;
+  onFocus?: (event: ChangeEvent<HTMLInputElement>) => void;
 }
 
 export interface BaseSelectEvents {

package/src/components/FormElements/FormElementContainer/FormElementContainer.scss

@@ -45,10 +45,15 @@
     }
   }
 
-  > small {
+  .error {
     padding-top: 6px;
     grid-row: 2;
     grid-column: 2;
     color: var(--input-invalid-color, $input-invalid-color);
+    white-space: normal;
+
+    &.inlineMode {
+      grid-column: 1;
+    }
   }
 }

package/src/components/FormElements/FormElementContainer/FormElementContainer.tsx

@@ -78,7 +78,14 @@ export const FormElementContainer: React.FC<FormElementContainerProps> = ({
       >
         {children}
       </div>
-      {error && <small data-test-id="form-field-error">{error}</small>}
+      {error && (
+        <small
+          className={clsx({ [classes.inlineMode]: inlineMode }, classes.error)}
+          data-test-id="form-field-error"
+        >
+          {error}
+        </small>
+      )}
     </div>
   );
 };

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

@@ -0,0 +1,19 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { noop } from '../../../helpers/utils';
+import { MaskedSingleLineText } from './MaskedSingleLineText';
+
+const defaultProps = {
+  name: 'timestamp',
+  label: 'Timestamp',
+  mask: '000',
+  onChange: noop,
+};
+
+describe('MaskedSingleLineText', () => {
+  it('should render the component without crashing', () => {
+    const wrapper = shallow(<MaskedSingleLineText {...defaultProps} />);
+
+    expect(wrapper).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,65 @@
+import { action } from '@storybook/addon-actions';
+import { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+import { createGroups } from '../../../helpers/storybook';
+import { MaskedSingleLineText } from './MaskedSingleLineText';
+
+const groups = createGroups({
+  Behavior: [
+    'autoComplete',
+    'autoFocus',
+    'disabled',
+    'inlineMode',
+    'name',
+    'id',
+    'innerRef',
+    'mask',
+    'overwrite',
+    'placeholderChar',
+    'lazy',
+  ],
+  Content: [
+    'label',
+    'placeholder',
+    'error',
+    'tooltipContent',
+    'value',
+    'defaultValue',
+  ],
+  Styling: ['className'],
+  Events: ['onChange', 'onBlur', 'onFocus'],
+});
+
+const meta: Meta<typeof MaskedSingleLineText> = {
+  title: 'Primary Components/Form Elements/MaskedSingleLineText',
+  component: MaskedSingleLineText,
+  argTypes: {
+    ...groups,
+  },
+};
+export default meta;
+
+export const Main: StoryObj<typeof MaskedSingleLineText> = {
+  args: {
+    name: 'timestamp',
+    label: 'Timestamp',
+    mask: '00:00:00.000',
+    placeholderChar: '0',
+    lazy: false,
+  },
+  render: (args) =>
+    React.createElement(() => {
+      const [value, setValue] = useState<string>();
+
+      return (
+        <MaskedSingleLineText
+          {...args}
+          value={value}
+          onChange={(e) => {
+            action('onChange')(e);
+            setValue(value);
+          }}
+        />
+      );
+    }),
+};

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

@@ -0,0 +1,60 @@
+import React, { useEffect } from 'react';
+import { useIMask } from 'react-imask';
+import {
+  SingleLineText,
+  SingleLineTextProps,
+} from '../SingleLineText/SingleLineText';
+
+export interface MaskedSingleLineTextProps
+  extends Omit<SingleLineTextProps, 'onChange' | 'type' | 'value' | 'isSet'> {
+  /** Expression to be used as a validator.
+   * Refer https://imask.js.org/guide.html#masked-pattern for examples
+   */
+  mask: string;
+
+  /** Placeholder character for the mask */
+  placeholderChar?: string;
+
+  /** Current value the form control has */
+  value?: string;
+
+  /** Whether the mask should not be shown by default. (default: true) */
+  lazy?: boolean;
+
+  /** Whether new inputs should overwrite existing text. (default: false) */
+  overwrite?: boolean;
+
+  /** Raised when the value has changed */
+  onChange: (value: string) => unknown;
+}
+
+export const MaskedSingleLineText: React.FC<MaskedSingleLineTextProps> = ({
+  onChange,
+  mask,
+  placeholderChar = '_',
+  value: formikValue = '',
+  lazy = true,
+  overwrite = false,
+  ...props
+}) => {
+  const { ref, maskRef } = useIMask(
+    { mask, placeholderChar, lazy, overwrite },
+    {
+      onAccept: (value, _ref, e) => {
+        // OnChange shouldn't be used https://github.com/uNmAnNeR/imaskjs/issues/318
+        // OnAccept fires during initial load making the form dirty. However, the synthetic event is not
+        // present when this happens so we check for the event to see if it's actually a keyboard event
+        // that triggered onAccept.
+        if (e) {
+          onChange(value);
+        }
+      },
+    },
+  );
+
+  useEffect(() => {
+    maskRef.current.value = formikValue as string;
+  }, [formikValue, maskRef]);
+
+  return <SingleLineText innerRef={ref} type="text" {...props} />;
+};