@axinom/mosaic-ui 0.66.0-rc.9 → 0.66.1

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

@@ -1,11 +1,5 @@
 import clsx from 'clsx';
-import React, {
-  PropsWithChildren,
-  ReactNode,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import React, { PropsWithChildren, ReactNode, useState } from 'react';
 import { assertNever } from '../../../helpers/utils';
 import { Data } from '../../../types/data';
 import { Button, ButtonContext } from '../../Buttons';
@@ -58,18 +52,16 @@ export const Filter = <T extends Data>({
 }: PropsWithChildren<FilterProps<T>>): JSX.Element => {
   const [isExpanded, setIsExpanded] = useState<boolean>(false);
   const [hasError, setHasError] = useState<boolean>(false);
-  const [contentHeight, setContentHeight] = useState<number>(0);
   const [stringValue, setStringValue] = useState<string | undefined>();
 
-  const contentRef = useRef<HTMLDivElement>(null);
-  const valueRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    setContentHeight(
-      (contentRef.current?.scrollHeight ?? 0) +
-        (valueRef.current?.scrollHeight ?? 0),
-    );
-  }, [isExpanded, hasError, value]);
+  const inputId = `${String(options.property)}-filter-input`;
+  const labelId = `${String(options.property)}-filter-label`;
+  const inputBasedFilter = [
+    FilterTypes.FreeText,
+    FilterTypes.Numeric,
+    FilterTypes.Date,
+    FilterTypes.DateTime,
+  ];
 
   const onFilterValueChange = (
     prop: keyof T,
@@ -135,6 +127,7 @@ export const Filter = <T extends Data>({
             onError={onError}
             onValidate={onValidate}
             selectOnFocus={selectOnFocus}
+            inputId={inputId}
           />
         );
 
@@ -147,6 +140,7 @@ export const Filter = <T extends Data>({
             }
             onError={onError}
             onValidate={onValidate}
+            inputId={inputId}
           />
         );
 
@@ -158,6 +152,7 @@ export const Filter = <T extends Data>({
             onSelect={(value: FilterValue) =>
               onFilterValueChange(options.property, value)
             }
+            labelId={labelId}
           />
         );
 
@@ -169,6 +164,7 @@ export const Filter = <T extends Data>({
             onSelect={(value: FilterValue) =>
               onFilterValueChange(options.property, value?.toString())
             }
+            labelId={labelId}
           />
         );
       case FilterTypes.SearcheableOptions:
@@ -181,6 +177,8 @@ export const Filter = <T extends Data>({
               onFilterValueChange(options.property, value, stringValue)
             }
             maxItems={options.maxItems}
+            inputId={inputId}
+            labelId={labelId}
           />
         );
 
@@ -194,6 +192,7 @@ export const Filter = <T extends Data>({
             modifyTime={false}
             onError={onError}
             onValidate={onValidate}
+            inputId={inputId}
           />
         );
 
@@ -207,6 +206,7 @@ export const Filter = <T extends Data>({
             modifyTime={true}
             onError={onError}
             onValidate={onValidate}
+            inputId={inputId}
           />
         );
 
@@ -220,6 +220,7 @@ export const Filter = <T extends Data>({
             }}
             onError={onError}
             onValidate={onValidate}
+            labelId={labelId}
           />
         );
 
@@ -229,9 +230,16 @@ export const Filter = <T extends Data>({
     }
   };
 
+  const hasValue = value !== undefined && value !== '';
+
   return (
     <div
-      className={clsx(classes.container, 'filter-container', className)}
+      className={clsx(
+        classes.container,
+        { [classes.hasValue]: hasValue },
+        'filter-container',
+        className,
+      )}
       data-test-id={`filter:${options.property as string}`}
       data-test-type={FilterTypes[options.type]}
       onClick={() => onFilterClicked()}
@@ -241,31 +249,36 @@ export const Filter = <T extends Data>({
           setIsExpanded(!isExpanded);
           setHasError(false);
         }}
-        className={clsx(
-          classes.title,
-          { [classes.expanded]: isExpanded && isActive },
-          hasError && classes.hasError,
-          !!value && classes.active,
-        )}
+        className={clsx(classes.title, {
+          [classes.hasValue]: hasValue,
+          [classes.active]: isActive && isExpanded,
+          [classes.hasError]: hasError,
+        })}
         data-test-id="filter-button-toggle"
       >
-        <span data-test-id="filter-label">{options.label}</span>
+        <label
+          id={labelId}
+          {...(inputBasedFilter.includes(options.type)
+            ? {}
+            : { htmlFor: inputId })}
+          data-test-id="filter-label"
+        >
+          {options.label}
+        </label>
         <Button
-          icon={IconName.ChevronDown}
-          className={clsx(classes.button)}
+          icon={IconName.ChevronRight}
+          className={clsx(classes.button, {
+            [classes.rotated]: isExpanded || hasValue,
+          })}
           buttonContext={ButtonContext.None}
         />
       </div>
       <div
-        className={clsx(classes.content)}
-        style={{
-          maxHeight: contentHeight,
-        }}
+        className={clsx(classes.content, { [classes.expanded]: isExpanded })}
       >
-        {value !== undefined && !isExpanded && (
+        {hasValue && !isExpanded && (
           <div
             className={clsx(classes.selectedValue)}
-            ref={valueRef}
             onClick={() => {
               setIsExpanded(!isExpanded);
             }}
@@ -285,7 +298,6 @@ export const Filter = <T extends Data>({
         )}
         {isExpanded && (
           <div
-            ref={contentRef}
             data-test-id="filter-content"
             className={clsx({ [classes.active]: isActive })}
           >

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

@@ -78,6 +78,12 @@ export interface CustomFilterProps {
   /** Wether or not the filter is active (default: false) */
   active?: boolean;
 
+  /**
+   * Optional id for the label element.
+   * Assign to the label's `id` and reference from the input or group via `aria-labelledby`.
+   */
+  labelId?: string;
+
   /** Callback triggered when a new filter value is selected */
   onSelect: (
     value: FilterValue,

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

@@ -31,6 +31,9 @@ export interface DateTimeFilterProps {
 
   /** CSS Class name for additional styles */
   className?: string;
+
+  /** Optional id for the input field */
+  inputId?: string;
 }
 
 export const DateTimeFilter: React.FC<DateTimeFilterProps> = ({
@@ -40,6 +43,7 @@ export const DateTimeFilter: React.FC<DateTimeFilterProps> = ({
   onError = noop,
   onValidate: customValidate,
   className = '',
+  inputId,
 }) => {
   const container = useRef<HTMLDivElement>(null);
   const [showPicker, setShowPicker] = useState(false);
@@ -111,6 +115,7 @@ export const DateTimeFilter: React.FC<DateTimeFilterProps> = ({
           ref={container}
         >
           <input
+            id={inputId}
             autoFocus
             className={clsx(classes.inputValue)}
             onKeyDown={handleKeyDown}

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

@@ -19,6 +19,8 @@ export interface FreeTextFilterProps {
   className?: string;
   /** Select text on focus if true (default: true) */
   selectOnFocus?: boolean;
+  /** Optional id for the input field */
+  inputId?: string;
 }
 
 export const FreeTextFilter: React.FC<FreeTextFilterProps> = ({
@@ -28,6 +30,7 @@ export const FreeTextFilter: React.FC<FreeTextFilterProps> = ({
   onValidate: customValidate,
   className = '',
   selectOnFocus = true,
+  inputId,
 }) => {
   const [errorMsg, setErrorMsg] = useState<string>();
   const ENTER_KEY = 'Enter';
@@ -68,6 +71,7 @@ export const FreeTextFilter: React.FC<FreeTextFilterProps> = ({
       )}
     >
       <input
+        id={inputId}
         ref={inputRef}
         autoFocus
         className={clsx(classes.inputValue, errorMsg && classes.hasError)}

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

@@ -13,7 +13,7 @@
     input {
       border-color: var(
         --multi-option-checbox-border,
-        $multi-option-checbox-border
+        $multi-option-checkbox-border
       );
     }
     &:hover {

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

@@ -17,19 +17,27 @@ export interface MultiOptionFilterProps {
 
   /** CSS Class name for additional styles */
   className?: string;
+
+  /** ID for the label */
+  labelId?: string;
 }
 
 export const MultiOptionsFilter: React.FC<MultiOptionFilterProps> = ({
   value,
   options,
   onSelect,
+  labelId,
 }) => {
   const [selectedOptionList, setSelectedOptionList] = useState<string[]>(
     value ? value.split(',') : [],
   );
 
   return (
-    <div className={clsx(classes.multiFilterContainer)}>
+    <div
+      className={classes.multiFilterContainer}
+      role="group"
+      aria-labelledby={labelId}
+    >
       {options?.map((option: Option) => (
         <Checkbox
           className={clsx(

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

@@ -18,6 +18,9 @@ export interface NumericTextFilterProps {
 
   /** CSS Class name for additional styles */
   className?: string;
+
+  /** Optional id for the input field */
+  inputId?: string;
 }
 
 export const NumericTextFilter: React.FC<NumericTextFilterProps> = ({
@@ -26,6 +29,7 @@ export const NumericTextFilter: React.FC<NumericTextFilterProps> = ({
   onError = noop,
   onValidate: customValidate,
   className = '',
+  inputId,
 }) => {
   const [errorMsg, setErrorMsg] = useState<string>();
   const ENTER_KEY = 'Enter';
@@ -64,6 +68,7 @@ export const NumericTextFilter: React.FC<NumericTextFilterProps> = ({
       )}
     >
       <input
+        id={inputId}
         autoFocus
         value={valueLocal}
         className={clsx(classes.inputValue, errorMsg && classes.hasError)}

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

@@ -4,12 +4,7 @@
   @include boxSizing;
 
   display: grid;
-  grid-auto-rows: 50px;
-  background-color: var(
-    --filter-controller-background-color,
-    $filter-controller-background-color
-  );
-  gap: 1px;
+  grid-auto-rows: 40px;
   border-top: unset;
 
   .option {
@@ -18,7 +13,7 @@
 
     span {
       font-size: var(--filter-font-size, $filter-font-size);
-      color: var(--filter-title-color, $filter-title-color);
+      color: var(--popper-text-color, $popper-text-color);
       display: grid;
       place-items: center left;
       padding: 0 20px;
@@ -27,15 +22,15 @@
 
       &:hover {
         background-color: var(
-          --filter-background-selected-color,
-          $filter-background-selected-color
+          --popper-item-hover-color,
+          $popper-item-hover-color
         );
       }
 
       &.selected {
         background-color: var(
-          --filter-background-selected-color,
-          $filter-background-selected-color
+          --popper-background-selected-color,
+          $popper-background-selected-color
         );
       }
     }

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

@@ -14,6 +14,9 @@ export interface OptionFilterProps {
 
   /** CSS Class name for additional styles */
   className?: string;
+
+  /** Optional id for the label element */
+  labelId?: string;
 }
 
 export const OptionsFilter: React.FC<OptionFilterProps> = ({
@@ -21,9 +24,12 @@ export const OptionsFilter: React.FC<OptionFilterProps> = ({
   options,
   onSelect,
   className = '',
+  labelId,
 }) => {
   return (
     <div
+      role="radiogroup"
+      aria-labelledby={labelId}
       className={clsx(classes.container, 'options-filter-container', className)}
     >
       {options?.map((option: Option) => (
@@ -32,6 +38,8 @@ export const OptionsFilter: React.FC<OptionFilterProps> = ({
           onClick={() => onSelect(option.value)}
           key={option.label}
           data-test-value={option.value as string}
+          role="radio"
+          aria-checked={value === option.value}
         >
           <span
             className={clsx(value === option.value && classes.selected)}

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

@@ -14,6 +14,9 @@ interface SearcheableOptionFilterProps
   searchInputPlaceholder?: string;
   maxItems?: number;
   onSelect: (value: string, stringValue?: string) => void;
+
+  /** Optional id for the input field */
+  inputId?: string;
 }
 
 export const SearcheableOptionsFilter: React.FC<
@@ -24,6 +27,7 @@ export const SearcheableOptionsFilter: React.FC<
   maxItems = 10,
   onSelect,
   className,
+  inputId,
   ...rest
 }) => {
   const [options, setOptions] = useState<Option[]>([]);
@@ -56,9 +60,10 @@ export const SearcheableOptionsFilter: React.FC<
         )}
       >
         <input
+          id={inputId}
           autoFocus
           onChange={debounce(onChangeHandler, 500)}
-          className={clsx(classes.inputValue, '' && classes.hasError)}
+          className={classes.inputValue}
           placeholder={searchInputPlaceholder}
         />
       </div>

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

@@ -26,7 +26,7 @@
     // transition: background-color 0.15s ease-in-out 0s;
 
     &.hasConfirm {
-      border: 1px solid $yellow;
+      border: 1px solid var(--ax-warning);
     }
 
     &.hasError {
@@ -54,8 +54,8 @@
     box-shadow: 0 0 0 2px var(--input-hover-color, $input-hover-color);
 
     &.hasConfirm {
-      border: 1px solid $yellow;
-      box-shadow: 0 0 0 2px $yellow;
+      border: 1px solid var(--ax-warning);
+      box-shadow: 0 0 0 2px var(--ax-warning);
     }
 
     &.hasError {
@@ -70,7 +70,7 @@
     background-color: var(--input-hover-color, $input-hover-color);
 
     &.hasConfirm {
-      background-color: $yellow;
+      background-color: var(--ax-warning);
     }
 
     &.hasError {

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

@@ -145,7 +145,7 @@
         &.hasError {
           background-color: white;
           svg * {
-            stroke: rgba($gray, 0.5);
+            stroke: color-mix(in srgb, var(--ax-neutral) 50%, transparent);
           }
         }
 

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

@@ -43,16 +43,15 @@
     display: grid;
     grid-template-columns: min-content min-content;
   }
+}
 
-  .picker {
-    position: absolute;
-    overflow: visible;
-    z-index: 99999;
-  }
+.picker {
+  overflow: visible;
+  z-index: 99999;
 }
 
 .backdrop {
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   bottom: 0;

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

@@ -1,6 +1,8 @@
 import clsx from 'clsx';
 import { DateTime } from 'luxon';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { usePopper } from 'react-popper';
 import { noop } from '../../../helpers/utils';
 import { Button, ButtonContext } from '../../Buttons';
 import { DateTimePicker } from '../../DateTime/DateTimePicker';
@@ -46,6 +48,9 @@ export const DateTimeText: React.FC<DateTimeTextProps> = ({
   ...rest
 }) => {
   const container = useRef<HTMLDivElement>(null);
+  const [pickerElement, setPickerElement] = useState<HTMLDivElement | null>(
+    null,
+  );
   const errorMsg: string | undefined = error;
   const [display, setDisplay] = useState<string>(() => {
     const locale = fromISODate(value, modifyTime);
@@ -54,6 +59,30 @@ export const DateTimeText: React.FC<DateTimeTextProps> = ({
 
   const [showPicker, setShowPicker] = useState(false);
 
+  const { styles, attributes } = usePopper(container.current, pickerElement, {
+    placement: 'bottom-start',
+    modifiers: [
+      {
+        name: 'flip',
+        options: {
+          fallbackPlacements: ['top-start', 'bottom-start'],
+        },
+      },
+      {
+        name: 'preventOverflow',
+        options: {
+          padding: 8,
+        },
+      },
+      {
+        name: 'offset',
+        options: {
+          offset: [0, 4],
+        },
+      },
+    ],
+  });
+
   useEffect(() => {
     const locale = fromISODate(value, modifyTime);
     setDisplay(locale ?? '');
@@ -119,31 +148,36 @@ export const DateTimeText: React.FC<DateTimeTextProps> = ({
           }}
         />
       </div>
-      {showPicker && (
-        <>
-          <div
-            className={clsx(classes.picker)}
-            style={calculatePosition(container.current)}
-          >
-            <DateTimePicker
-              value={getValue(value)}
-              onSelected={(value) => {
-                if (!modifyTime) {
-                  setShowPicker(false);
-                }
-                onChange && onChange(DateTime.fromJSDate(value).toISO(), true);
+      {showPicker &&
+        createPortal(
+          <>
+            <div
+              ref={setPickerElement}
+              className={clsx(classes.picker)}
+              style={styles.popper}
+              {...attributes.popper}
+            >
+              <DateTimePicker
+                value={getValue(value)}
+                onSelected={(value) => {
+                  if (!modifyTime) {
+                    setShowPicker(false);
+                  }
+                  onChange &&
+                    onChange(DateTime.fromJSDate(value).toISO(), true);
+                }}
+                showTimePicker={modifyTime}
+              />
+            </div>
+            <div
+              className={clsx(classes.backdrop)}
+              onClick={() => {
+                setShowPicker(false);
               }}
-              showTimePicker={modifyTime}
-            />
-          </div>
-          <div
-            className={clsx(classes.backdrop)}
-            onClick={() => {
-              setShowPicker(false);
-            }}
-          ></div>
-        </>
-      )}
+            ></div>
+          </>,
+          document.body,
+        )}
     </FormElementContainer>
   );
 };
@@ -172,22 +206,3 @@ function fromISODate(ISODateString: string, modifyTime: boolean): string {
     return ISODateString;
   }
 }
-
-const calculatePosition = (
-  container: HTMLDivElement | null,
-): React.CSSProperties => {
-  if (!container) {
-    return {};
-  }
-
-  const PICKER_HEIGHT = 280;
-
-  const rect = container.getBoundingClientRect();
-  const top = rect.bottom;
-
-  if (top + PICKER_HEIGHT > window.innerHeight) {
-    return { top: rect.top - PICKER_HEIGHT, left: container.offsetLeft };
-  } else {
-    return { top, left: container.offsetLeft };
-  }
-};

package/src/components/FormElements/FileUploadControl/FileUploadControl.scss

@@ -19,7 +19,7 @@
 
       margin-left: -50px;
       border: none;
-      background-color: $blue;
+      background-color: var(--ax-primary);
 
       transition: box-shadow 0.15s ease-in-out 0s;
 
@@ -35,16 +35,16 @@
 
       &:hover {
         border: none;
-        background-color: rgba($blue, 0.75);
+        background-color: color-mix(in srgb, var(--ax-primary) 75%, transparent);
       }
 
       &.disabled {
         border: none;
-        background-color: $gray;
+        background-color: var(--ax-neutral);
         cursor: default;
 
         svg * {
-          stroke: rgba(white, 0.5);
+          stroke: color-mix(in srgb, white 50%, transparent);
         }
       }
     }

package/src/components/FormElements/Radio/Radio.scss

@@ -27,7 +27,7 @@
         grid: 1fr / 30px 1fr;
         column-gap: 8px;
 
-        color: $dark-gray;
+        color: var(--ax-neutral-dark);
         font-size: 16px;
         font-weight: unset;
 
@@ -37,12 +37,12 @@
 
         &.disabled {
           .radioOutline {
-            fill: $light-gray-2;
+            fill: var(--ax-neutral-lighter);
           }
 
           .checked {
             .radioDot {
-              fill: $light-gray;
+              fill: var(--ax-neutral-light);
             }
           }
         }
@@ -60,7 +60,7 @@
 
     .radioOutline {
       fill: none;
-      stroke: $gray;
+      stroke: var(--ax-neutral);
       stroke-width: 1;
     }
 
@@ -87,7 +87,7 @@
 
     &.hasConfirm {
       .radioOutline {
-        stroke: $yellow;
+        stroke: var(--ax-warning);
         stroke-width: 3;
       }
     }