@axinom/mosaic-ui 0.29.0 → 0.30.0-rc.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.29.0",
+  "version": "0.30.0-rc.2",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -32,7 +32,7 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
-    "@axinom/mosaic-core": "^0.4.2",
+    "@axinom/mosaic-core": "^0.4.3-rc.1",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.9.2",
     "clsx": "^1.1.0",
@@ -98,5 +98,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "539529319d7b39e57fb9832bfd23c07b023a50d0"
+  "gitHead": "6ac9f4a4eb6a4b0accaf5cbf645361ce96484e16"
 }

package/src/components/Filters/Filter/Filter.scss

@@ -1,5 +1,9 @@
 @import '../../../styles/common.scss';
 
+$border: 1px solid var(--filter-border-color, $filter-border-color);
+$input-active: 3px solid var(--input-hover-color, $input-hover-color);
+$input-inactive: 1px solid var(--input-border-color, $input-border-color);
+
 .container {
   @include boxSizing;
 
@@ -7,6 +11,10 @@
 
   cursor: pointer;
 
+  input {
+    border: $input-inactive;
+  }
+
   .title {
     display: grid;
     grid-template-columns: auto auto;
@@ -21,7 +29,7 @@
     transition: background-color 100ms linear;
 
     &:hover {
-      border: 1px solid var(--input-hover-color, $input-hover-color);
+      border: $border;
     }
 
     &.expanded {
@@ -30,7 +38,7 @@
         $filter-background-selected-color
       );
 
-      border: 1px solid var(--input-hover-color, $input-hover-color);
+      border: $border;
     }
 
     &.hasError {
@@ -86,4 +94,14 @@
   transition: max-height 100ms linear;
   overflow: hidden;
   max-height: fit-content !important;
+
+  .active {
+    border-right: $border;
+    border-bottom: $border;
+    border-left: $border;
+
+    input:focus {
+      border: $input-active;
+    }
+  }
 }

package/src/components/Filters/Filter/Filter.spec.tsx

@@ -1,7 +1,7 @@
 import { mount, shallow } from 'enzyme';
 import React from 'react';
 import { Button } from '../../Buttons';
-import { FilterType, FilterTypes } from '../Filters.model';
+import { CustomFilterProps, FilterType, FilterTypes } from '../Filters.model';
 import { FreeTextFilter } from '../SelectionTypes/FreeTextFilter/FreeTextFilter';
 import { OptionsFilter } from '../SelectionTypes/OptionsFilter/OptionsFilter';
 import { Filter, FilterProps } from './Filter';
@@ -29,6 +29,17 @@ const optionFilter: FilterType<FilterTestData> = {
   ],
 };
 
+const CustomFilterComponent: React.FC<CustomFilterProps> = () => {
+  return <div></div>;
+};
+
+const customFilter: FilterType<{ custom: string }> = {
+  label: 'Custom Filter',
+  property: 'custom',
+  type: FilterTypes.Custom,
+  component: CustomFilterComponent,
+};
+
 const sampleText = 'sample text';
 const spy = jest.fn();
 const onFilterClickedSpy = jest.fn();
@@ -82,6 +93,28 @@ describe('Filter', () => {
     expect(filterTitle.hasClass('expanded')).toBe(expected);
   });
 
+  it('passes active state to custom filter', () => {
+    const wrapper = shallow(
+      <Filter
+        onFilterChange={() => null}
+        onFilterClicked={() => null}
+        options={customFilter}
+        isActive={false}
+      />,
+    );
+
+    wrapper.find('.title').simulate('click');
+
+    let filter = wrapper.find(CustomFilterComponent);
+    expect(filter.prop('active')).toBe(false);
+
+    wrapper.setProps({ isActive: true });
+    wrapper.update();
+
+    filter = wrapper.find(CustomFilterComponent);
+    expect(filter.prop('active')).toBe(true);
+  });
+
   it(`selected filter raises 'onFilterClicked' when clicked`, () => {
     const wrapper = shallow(
       <Filter

package/src/components/Filters/Filter/Filter.tsx

@@ -47,7 +47,6 @@ export const Filter = <T extends Data>({
 
   const contentRef = useRef<HTMLDivElement>(null);
   const valueRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     setContentHeight(
@@ -56,12 +55,6 @@ export const Filter = <T extends Data>({
     );
   }, [isExpanded, hasError, value]);
 
-  useEffect(() => {
-    if (isExpanded) {
-      inputRef.current?.focus();
-    }
-  }, [isExpanded]);
-
   const onFilterValueChange = (
     prop: keyof T,
     value: FilterValue,
@@ -97,7 +90,6 @@ export const Filter = <T extends Data>({
       case FilterTypes.FreeText:
         return (
           <FreeTextFilter
-            ref={inputRef}
             value={value}
             onSelect={(value: FilterValue) =>
               onFilterValueChange(options.property, value)
@@ -110,7 +102,6 @@ export const Filter = <T extends Data>({
       case FilterTypes.Numeric:
         return (
           <NumericTextFilter
-            ref={inputRef}
             value={value as number}
             onSelect={(value: FilterValue) =>
               onFilterValueChange(options.property, value)
@@ -147,7 +138,6 @@ export const Filter = <T extends Data>({
       case FilterTypes.Date:
         return (
           <DateTimeFilter
-            ref={inputRef}
             value={value as string}
             onSelect={(value: FilterValue) =>
               onFilterValueChange(options.property, value)
@@ -161,7 +151,6 @@ export const Filter = <T extends Data>({
       case FilterTypes.DateTime:
         return (
           <DateTimeFilter
-            ref={inputRef}
             value={value as string}
             onSelect={(value: FilterValue) =>
               onFilterValueChange(options.property, value)
@@ -176,6 +165,7 @@ export const Filter = <T extends Data>({
         return (
           <options.component
             value={value}
+            active={isActive}
             onSelect={(value: FilterValue, stringValue?: string) => {
               onFilterValueChange(options.property, value, stringValue);
             }}
@@ -245,7 +235,11 @@ export const Filter = <T extends Data>({
           </div>
         )}
         {isExpanded && (
-          <div ref={contentRef} data-test-id="filter-content">
+          <div
+            ref={contentRef}
+            data-test-id="filter-content"
+            className={clsx({ [classes.active]: isActive })}
+          >
             {renderFilterContent()}
           </div>
         )}

package/src/components/Filters/Filters.model.ts

@@ -61,6 +61,9 @@ export interface CustomFilterProps {
   /** Current Value of the filter */
   value?: FilterValue;
 
+  /** Wether or not the filter is active (default: false) */
+  active?: boolean;
+
   /** Callback triggered when a new filter value is selected */
   onSelect: (
     value: FilterValue,

package/src/components/Filters/SelectionTypes/DateTimeFilter/DateTimeFilter.scss

@@ -1,4 +1,5 @@
 @import '../../../../styles/common.scss';
+@import '../../Filter/Filter.scss';
 
 .container {
   display: grid;
@@ -9,10 +10,13 @@
     grid-template-columns: 1fr min-content;
 
     place-items: center;
-
-    border: 3px solid var(--input-hover-color, $input-hover-color);
+    border: $input-inactive;
 
     .inputValue {
+      &:focus {
+        border: none;
+      }
+
       color: var(--input-color, $input-color);
       padding: 0 12px;
       border: none;
@@ -33,6 +37,10 @@
       }
     }
 
+    &:focus-within {
+      border: $input-active;
+    }
+
     &.hasError {
       border: 3px solid
         var(--input-invalid-border-color, $input-invalid-border-color);

package/src/components/Filters/SelectionTypes/DateTimeFilter/DateTimeFilter.tsx

@@ -33,20 +33,14 @@ export interface DateTimeFilterProps {
   className?: string;
 }
 
-export const DateTimeFilter = React.forwardRef<
-  HTMLInputElement,
-  DateTimeFilterProps
->(function DateTimeFilter(
-  {
-    onSelect,
-    modifyTime,
-    value: initialValue,
-    onError = noop,
-    onValidate: customValidate,
-    className = '',
-  },
-  ref,
-) {
+export const DateTimeFilter: React.FC<DateTimeFilterProps> = ({
+  onSelect,
+  modifyTime,
+  value: initialValue,
+  onError = noop,
+  onValidate: customValidate,
+  className = '',
+}) => {
   const container = useRef<HTMLDivElement>(null);
   const [showPicker, setShowPicker] = useState(false);
   const [value, setValue] = useState<string>('');
@@ -109,11 +103,15 @@ export const DateTimeFilter = React.forwardRef<
         )}
       >
         <div
-          className={clsx(classes.dateTimeInput, errorMsg && classes.hasError)}
+          className={clsx(
+            classes.dateTimeInput,
+            'datetime-border-wrapper',
+            errorMsg && classes.hasError,
+          )}
           ref={container}
         >
           <input
-            ref={ref}
+            autoFocus
             className={clsx(classes.inputValue)}
             onKeyDown={handleKeyDown}
             onChange={(e) => setValue(e.target.value)}
@@ -181,7 +179,7 @@ export const DateTimeFilter = React.forwardRef<
       )}
     </>
   );
-});
+};
 
 const calculatePosition = (
   offsetTop?: number,

package/src/components/Filters/SelectionTypes/FreeTextFilter/FreeTextFilter.scss

@@ -9,10 +9,8 @@
 
   .inputValue {
     color: var(--input-color, $input-color);
-    border: 3px solid var(--input-hover-color, $input-hover-color);
     padding: 0 12px;
-    // border: 3px solid
-    //   var(--filter-option-background-color, $filter-option-background-color);
+
     font-size: var(--label-font-size, $label-font-size);
     outline: none;
 

package/src/components/Filters/SelectionTypes/FreeTextFilter/FreeTextFilter.tsx

@@ -19,19 +19,13 @@ export interface FreeTextFilterProps {
   className?: string;
 }
 
-export const FreeTextFilter = React.forwardRef<
-  HTMLInputElement,
-  FreeTextFilterProps
->(function FreeTextFilter(
-  {
-    value,
-    onSelect,
-    onError = noop,
-    onValidate: customValidate,
-    className = '',
-  },
-  ref,
-) {
+export const FreeTextFilter: React.FC<FreeTextFilterProps> = ({
+  value,
+  onSelect,
+  onError = noop,
+  onValidate: customValidate,
+  className = '',
+}) => {
   const [errorMsg, setErrorMsg] = useState<string>();
   const ENTER_KEY = 'Enter';
 
@@ -61,7 +55,7 @@ export const FreeTextFilter = React.forwardRef<
       )}
     >
       <input
-        ref={ref}
+        autoFocus
         className={clsx(classes.inputValue, errorMsg && classes.hasError)}
         onKeyDown={handleKeyDown}
         value={valueLocal as string}
@@ -70,4 +64,4 @@ export const FreeTextFilter = React.forwardRef<
       {errorMsg !== undefined && <small>{errorMsg}</small>}
     </div>
   );
-});
+};

package/src/components/Filters/SelectionTypes/NumericTextFilter/NumericTextFilter.scss

@@ -9,10 +9,8 @@
 
   .inputValue {
     color: var(--input-color, $input-color);
-    border: 3px solid var(--input-hover-color, $input-hover-color);
     padding: 0 12px;
-    // border: 3px solid
-    //   var(--filter-option-background-color, $filter-option-background-color);
+
     font-size: var(--label-font-size, $label-font-size);
     outline: none;
 

package/src/components/Filters/SelectionTypes/NumericTextFilter/NumericTextFilter.tsx

@@ -20,19 +20,13 @@ export interface NumericTextFilterProps {
   className?: string;
 }
 
-export const NumericTextFilter = React.forwardRef<
-  HTMLInputElement,
-  NumericTextFilterProps
->(function NumericTextFilter(
-  {
-    value,
-    onSelect,
-    onError = noop,
-    onValidate: customValidate,
-    className = '',
-  },
-  ref,
-) {
+export const NumericTextFilter: React.FC<NumericTextFilterProps> = ({
+  value,
+  onSelect,
+  onError = noop,
+  onValidate: customValidate,
+  className = '',
+}) => {
   const [errorMsg, setErrorMsg] = useState<string>();
   const ENTER_KEY = 'Enter';
 
@@ -70,7 +64,7 @@ export const NumericTextFilter = React.forwardRef<
       )}
     >
       <input
-        ref={ref}
+        autoFocus
         value={valueLocal}
         className={clsx(classes.inputValue, errorMsg && classes.hasError)}
         onKeyDown={handleKeyDown}
@@ -80,4 +74,4 @@ export const NumericTextFilter = React.forwardRef<
       {errorMsg !== undefined && <small>{errorMsg}</small>}
     </div>
   );
-});
+};

package/src/components/Filters/SelectionTypes/OptionsFilter/OptionsFilter.scss

@@ -5,7 +5,6 @@
 
   display: grid;
   grid-auto-rows: 50px;
-  border: 1px solid var(--input-hover-color, $input-hover-color);
   background-color: var(
     --filter-controller-background-color,
     $filter-controller-background-color

package/src/components/Filters/SelectionTypes/SearcheableOptionsFilter/SearcheableOptionsFilter.scss

@@ -9,10 +9,8 @@
 
   .inputValue {
     color: var(--input-color, $input-color);
-    border: 3px solid var(--input-hover-color, $input-hover-color);
     padding: 0 12px;
-    // border: 3px solid
-    //   var(--filter-option-background-color, $filter-option-background-color);
+
     font-size: var(--label-font-size, $label-font-size);
     outline: none;
 

package/src/components/Filters/SelectionTypes/SearcheableOptionsFilter/SearcheableOptionsFilter.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { debounce } from 'lodash';
-import React, { ChangeEvent, useEffect, useState } from 'react';
+import React, { ChangeEvent, useCallback, useEffect, useState } from 'react';
 import { Option } from '../../Filters.model';
 import {
   OptionFilterProps,
@@ -22,17 +22,21 @@ export const SearcheableOptionsFilter: React.FC<SearcheableOptionFilterProps> =
     searchInputPlaceholder = '',
     maxItems = 10,
     onSelect,
+    className,
     ...rest
   }) => {
     const [options, setOptions] = useState<Option[]>([]);
 
-    const getOptions = async (value: string) => {
-      setOptions(await optionsProvider(value));
-    };
+    const getOptions = useCallback(
+      async (value: string) => {
+        setOptions(await optionsProvider(value));
+      },
+      [optionsProvider],
+    );
 
     useEffect(() => {
       getOptions('');
-    }, []);
+    }, [getOptions]);
 
     const onChangeHandler = async (
       e: ChangeEvent<HTMLInputElement>,
@@ -43,8 +47,15 @@ export const SearcheableOptionsFilter: React.FC<SearcheableOptionFilterProps> =
 
     return (
       <>
-        <div className={clsx(classes.container, 'free-text-filter-container')}>
+        <div
+          className={clsx(
+            classes.container,
+            'free-text-filter-container',
+            className,
+          )}
+        >
           <input
+            autoFocus
             onChange={debounce(onChangeHandler, 500)}
             className={clsx(classes.inputValue, '' && classes.hasError)}
             placeholder={searchInputPlaceholder}

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

@@ -71,7 +71,10 @@
   input:checked:after {
     content: '\2714';
     font-size: 20px;
-    padding-left: 6px;
+    display: grid;
+    height: 100%;
+    justify-content: center;
+    align-content: center;
     color: #ffffff;
   }
 

package/src/components/FormElements/TextArea/TextArea.scss

@@ -19,6 +19,16 @@
     }
   }
 
+  textarea:disabled {
+    background-color: var(
+      --input-disabled-background-color,
+      $input-disabled-background-color
+    );
+    color: var(--input-disabled-font-color, $input-disabled-font-color);
+    border: 1px solid
+      var(--input-disabled-border-color, $input-disabled-border-color);
+  }
+
   textarea:hover,
   textarea:focus {
     border: 1px solid var(--input-hover-color, $input-hover-color);
@@ -30,5 +40,11 @@
       box-shadow: 0 0 0 2px
         var(--input-invalid-hover-color, $input-invalid-hover-color);
     }
+
+    &:disabled {
+      border: 1px solid
+        var(--input-disabled-border-color, $input-disabled-border-color);
+      box-shadow: none;
+    }
   }
 }

package/src/helpers/storybook.tsx

@@ -69,6 +69,9 @@ export function getRandomInt(min: number, max: number): number {
   return Math.floor(Math.random() * (max - min + 1)) + min;
 }
 
+/**
+ * @deprecated Use Storybook's 'ComponentStoryObj' and CSF3 instead
+ */
 export type Story = React.FC & {
   story?: {
     [key: string]: any;

package/src/styles/variables.scss

@@ -70,6 +70,7 @@ $filter-title-color: $blue;
 $filter-font-size: 16px;
 $filter-width: 360px;
 $filter-controller-background-color: $light-gray-2;
+$filter-border-color: $blue;
 
 /* Details vars */
 $details-background-color: #ffffff;