@true-engineering/true-react-common-ui-kit 4.0.0-alpha6 → 4.0.0-alpha7

package/dist/types.d.ts

@@ -1,5 +1,6 @@
 import { FocusEventHandler, type KeyboardEvent, KeyboardEventHandler, MouseEvent, MouseEventHandler, PointerEventHandler, ReactNode } from 'react';
 import { Modifier, Placement } from 'react-overlays/usePopper';
+import type { IMaybeArray } from './theme';
 export interface ITestIdProps {
     testId?: string;
 }
@@ -10,7 +11,7 @@ export interface IDataAttributesProps extends ITestIdProps {
     data?: IDataAttributes;
 }
 export interface ITweakStylesProps<TweakStyles> {
-    tweakStyles?: TweakStyles;
+    tweakStyles?: IMaybeArray<TweakStyles>;
 }
 export type ICommonProps<TweakStyles> = IDataAttributesProps & ITweakStylesProps<TweakStyles>;
 export interface IDropdownWithPopperOptions {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "4.0.0-alpha6",
+  "version": "4.0.0-alpha7",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [

package/src/components/DatePicker/DatePicker.tsx

@@ -14,13 +14,18 @@ import { ICommonProps } from '../../types';
 import { DateInput, EMPTY_DATE_INPUT_VALUE, IDateInputProps } from '../DateInput';
 import { DatePickerHeader, PopperContainer } from './components';
 import { DatePickerComponent, DEFAULT_DATE_FORMAT } from './constants';
-import { areDatesEquals, getDateFormatter, getDateValueParser } from './helpers';
-import { IDatePickerBaseProps, IRange } from './types';
+import {
+  areDatesEquals,
+  getDateFormatter,
+  getDateValueParser,
+  preparateDatePickerLocale,
+} from './helpers';
+import { IDatePickerBaseProps, IDatePickerLocale, IRange } from './types';
 import { IDatePickerStyles, useStyles } from './DatePicker.styles';
 
 export interface IDatePickerProps extends IDatePickerBaseProps, ICommonProps<IDatePickerStyles> {
   selectedDate?: Date | null;
-  locale: Locale;
+  locale: IDatePickerLocale;
   months?: string[];
   /** @default 'dd.MM.yyyy' */
   dateFormat?: string;
@@ -242,7 +247,7 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
           ref={ref}
           minDate={minDate}
           maxDate={maxDate}
-          locale={locale}
+          locale={preparateDatePickerLocale(locale)}
           dateFormat={dateFormat}
           placeholderText={placeholder}
           calendarStartDay={calendarStartDay}

package/src/components/DatePicker/helpers.ts

@@ -1,10 +1,12 @@
-import { parse, format, isSameDay } from 'date-fns';
+import { parse, format, isSameDay, type Locale } from 'date-fns';
+import { ru as ruLocale, enUS as enLocale } from 'date-fns/locale';
 import {
   isEmpty,
   isNotEmpty,
   isStringNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
 import { EMPTY_DATE_INPUT_VALUE } from '../DateInput';
+import { IDatePickerLocale } from './types';
 
 export const getDateFormatter =
   (dateFormat: string) =>
@@ -21,3 +23,13 @@ export const getDateValueParser =
 export const areDatesEquals = (date1?: Date | null, date2?: Date | null): boolean =>
   (isEmpty(date1) && isEmpty(date2)) ||
   (isNotEmpty(date1) && isNotEmpty(date2) && isSameDay(date1, date2));
+
+export const preparateDatePickerLocale = (locale: IDatePickerLocale): Locale => {
+  if (locale === 'ru') {
+    return ruLocale;
+  }
+  if (locale === 'en') {
+    return enLocale;
+  }
+  return locale;
+};

package/src/components/DatePicker/types.ts

@@ -1,8 +1,11 @@
 import { ReactDatePickerProps } from 'react-datepicker';
-import { IDateInputProps } from '../DateInput';
+import { type Locale } from 'date-fns';
+import { type IDateInputProps } from '../DateInput';
 
 export type IRange = [Date | null, Date | null] | null;
 
+export type IDatePickerLocale = 'ru' | 'en' | Locale;
+
 export type IDatePickerBaseProps = Pick<
   ReactDatePickerProps,
   | 'startDate'

package/src/components/FiltersPane/FiltersPane.stories.tsx

@@ -70,7 +70,8 @@ type ConfigValues = {
   custom: string;
 };
 
-interface IFiltersPaneWithCustomProps<Values, Content> extends IFiltersPaneProps<Values, Content> {
+interface IFiltersPaneWithCustomProps<Values extends Record<string, unknown>, Content>
+  extends IFiltersPaneProps<Values, Content> {
   containerWidth: number;
   isSearchDisabled: boolean;
   shouldShowSettingsButton: boolean;
@@ -80,7 +81,7 @@ interface IFiltersPaneWithCustomProps<Values, Content> extends IFiltersPaneProps
   isClearableFields: boolean;
 }
 
-function FiltersPaneWithCustomProps<Values, Content>({
+function FiltersPaneWithCustomProps<Values extends Record<string, unknown>, Content>({
   containerWidth,
   isSearchDisabled,
   shouldShowSettingsButton,
@@ -288,6 +289,7 @@ Default.args = {
   hasClearButton: true,
   isClearableFields: false,
   isDisabled: false,
+  shouldRenderDataId: false,
   containerWidth: 400,
   withFieldNameInLabel: true,
   isGroupingEnabled: true,

package/src/components/FiltersPane/FiltersPane.tsx

@@ -10,7 +10,7 @@ import { getLocale } from './helpers';
 import { ConfigType, IFilterLocaleKey, IPartialFilterLocale } from './types';
 import { useStyles, IFiltersPaneStyles, clearButtonStyles } from './FiltersPane.styles';
 
-export interface IFiltersPaneProps<Values, Content = Values>
+export interface IFiltersPaneProps<Values extends Record<string, unknown>, Content = Values>
   extends ICommonProps<IFiltersPaneStyles> {
   filtersConfig: ConfigType<Values>;
   enabledFilters?: Array<keyof ConfigType<Values>>;
@@ -23,6 +23,8 @@ export interface IFiltersPaneProps<Values, Content = Values>
   isDisabled?: boolean;
   /** @default true */
   hasClearButton?: boolean;
+  /** @default false */
+  shouldRenderDataId?: boolean;
   onChangeFilters: (values: Partial<Values>) => void;
   onSettingsButtonClick?: () => void;
   onClear?: () => void;
@@ -39,6 +41,7 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
   search,
   isDisabled = false,
   hasClearButton = true,
+  shouldRenderDataId = false,
   testId,
   onChangeFilters,
   onSettingsButtonClick,
@@ -61,7 +64,7 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
 
   const translates = useMemo(() => getLocale(localeKey, locale), [localeKey, locale]);
 
-  const filtersKeys = enabledFilters || Object.keys(filtersConfig);
+  const filtersKeys = enabledFilters ?? Object.keys(filtersConfig);
 
   const handleClear = () => {
     if (onClear !== undefined) {
@@ -122,10 +125,11 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
       {/* Filters */}
       {filtersKeys.map((key, index) => {
         const isLast = index === filtersKeys.length - 1;
-        const currentValue = values[key];
-        const filter = filtersConfig[key];
+        const filterKey = String(key);
+        const currentValue = values[filterKey];
+        const filter = filtersConfig[filterKey];
         if (filter === undefined) {
-          console.error(`enabledFilters содержит фильтр ${String(key)}, не описанный в конфиге`);
+          console.error(`enabledFilters содержит фильтр ${filterKey}, не описанный в конфиге`);
           if (isLast) {
             return clearButton;
           }
@@ -137,18 +141,19 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
             filter={filter}
             locale={locale}
             localeKey={localeKey}
-            onChange={(value) => onChangeFilters({ ...values, [key]: value })}
+            onChange={(value) => onChangeFilters({ ...values, [filterKey]: value })}
             value={currentValue}
-            key={key as string}
+            key={filterKey}
             isDisabled={isDisabled || filter?.requiredFilledFilters?.some((item) => !values[item])}
             tweakStyles={tweakFilterWrapperStyles}
-            testId={getTestId(testId, `filter-${String(key)}`)}
+            data={shouldRenderDataId ? { id: filterKey } : undefined}
+            testId={getTestId(testId, `filter-${filterKey}`)}
           />
         );
 
         if (isLast) {
           return (
-            <div className={classes.filterWithClearButton} key={key as string}>
+            <div className={classes.filterWithClearButton} key={filterKey}>
               {filterWrapper}
               {shouldShowClearButton && <>{clearButton}</>}
             </div>

package/src/components/FiltersPane/components/Filter/Filter.tsx

@@ -1,20 +1,20 @@
 import { useMemo } from 'react';
 import { getLocale } from '../../helpers';
-import { IFilterMultiSelectValues, IFilterWithDatesValue, IPeriod } from '../../types';
 import { FilterInterval } from '../FilterInterval';
 import { FilterMultiSelect } from '../FilterMultiSelect';
 import { FilterSelect } from '../FilterSelect';
 import { FilterWithDates } from '../FilterWithDates';
 import { FilterWithPeriod } from '../FilterWithPeriod';
 import type { IFilterWrapperProps } from '../FilterWrapper';
+import { isDatePeriodValue, isMultiSelectValue, isPeriodValue } from './helpers';
 
-export interface IFilterProps<Values, Key extends keyof Values>
+export interface IFilterProps<Values extends Record<string, unknown>, Key extends keyof Values>
   extends IFilterWrapperProps<Values, Key> {
   onChange: <V>(v: V) => void;
   onClose?: () => void;
 }
 
-export function Filter<Values, Key extends keyof Values>(
+export function Filter<Values extends Record<string, unknown>, Key extends keyof Values>(
   props: IFilterProps<Values, Key>,
 ): JSX.Element | null {
   const { filter, value, onChange, onClose, localeKey, locale, testId } = props;
@@ -39,9 +39,11 @@ export function Filter<Values, Key extends keyof Values>(
   }
 
   if (filter.type === 'dateRange') {
+    const preparedValue = isPeriodValue(value) ? { ...value } : undefined;
+
     return (
       <FilterWithPeriod
-        value={{ ...value } as IPeriod}
+        value={preparedValue}
         onChange={onChange}
         onClose={onClose}
         localeKey={translatesLocaleKey}
@@ -53,25 +55,27 @@ export function Filter<Values, Key extends keyof Values>(
   }
 
   if (filter.type === 'dateRangeWithoutPeriod') {
+    const preparedValue = isDatePeriodValue(value) ? value : undefined;
+
     return (
-      <div style={{ width: 320 }}>
-        <FilterWithDates
-          value={value as unknown as IFilterWithDatesValue}
-          onChange={(v) => onChange({ ...v, periodType: 'CUSTOM' })}
-          onEndBtnSubmit={() => onChange(undefined)}
-          localeKey={translatesLocaleKey}
-          locale={translates}
-          testId={testId !== undefined ? `${testId}-dates` : undefined}
-          {...filter}
-        />
-      </div>
+      <FilterWithDates
+        value={preparedValue}
+        onChange={(v) => onChange({ ...v, periodType: 'CUSTOM' })}
+        onEndBtnSubmit={() => onChange(undefined)}
+        localeKey={translatesLocaleKey}
+        locale={translates}
+        testId={testId !== undefined ? `${testId}-dates` : undefined}
+        {...filter}
+      />
     );
   }
 
   if (filter.type === 'multiSelect') {
+    const preparedValue = isMultiSelectValue<any>(value) ? value : undefined;
+
     return (
       <FilterMultiSelect
-        value={value as unknown as IFilterMultiSelectValues<any>}
+        value={preparedValue}
         onChange={onChange}
         onClose={onClose}
         localeKey={translatesLocaleKey}
@@ -83,9 +87,11 @@ export function Filter<Values, Key extends keyof Values>(
   }
 
   if (filter.type === 'interval') {
+    const preparedValue = Array.isArray(value) ? (value as number[]) : undefined;
+
     return (
       <FilterInterval
-        value={value as unknown as number[]}
+        value={preparedValue}
         onChange={onChange}
         localeKey={translatesLocaleKey}
         locale={translates}
@@ -102,6 +108,7 @@ export function Filter<Values, Key extends keyof Values>(
 
   if (filter.type === 'custom' && filter.component) {
     const Component = filter.component;
+
     return <Component {...props} filter={filter} />;
   }
 

package/src/components/FiltersPane/components/Filter/helpers.ts

@@ -0,0 +1,18 @@
+import { isEmpty, isString } from '@true-engineering/true-react-platform-helpers';
+import { IDatePeriod, IFilterMultiSelectValues, IPeriod } from '../../types';
+
+const isDateOrEmpty = (value: unknown): value is Date | null | undefined =>
+  isEmpty(value) || value instanceof Date;
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
+export const isDatePeriodValue = (value: any): value is IDatePeriod =>
+  isDateOrEmpty(value?.from) && isDateOrEmpty(value?.to);
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
+export const isPeriodValue = (value: any): value is IPeriod =>
+  isString(value?.periodType) && isDatePeriodValue(value);
+
+export const isMultiSelectValue = <T extends string>(
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
+  value: any,
+): value is IFilterMultiSelectValues<T> => Array.isArray(value?.include);

package/src/components/FiltersPane/components/FilterValueView/FilterValueView.tsx

@@ -9,14 +9,17 @@ import { IDateRangeConfigItem, IFilterWithDatesValue, IPeriod } from '../../type
 import type { IFilterWrapperProps } from '../FilterWrapper';
 import { IFilterValueViewStyles, useStyles } from './FilterValueView.styles';
 
-export function FilterValueView<Values, Key extends keyof Values>({
+export interface IFilterValueView<Values extends Record<string, unknown>, Key extends keyof Values>
+  extends Omit<IFilterWrapperProps<Values, Key>, 'filtersPaneRef' | 'tweakStyles' | 'onChange'>,
+    ICommonProps<IFilterValueViewStyles> {}
+
+export function FilterValueView<Values extends Record<string, unknown>, Key extends keyof Values>({
+  value,
+  filter,
   locale,
   localeKey,
-  filter,
-  value,
   tweakStyles,
-}: Omit<IFilterWrapperProps<Values, Key>, 'onChange' | 'filtersPaneRef' | 'tweakStyles'> &
-  ICommonProps<IFilterValueViewStyles>): JSX.Element {
+}: IFilterValueView<Values, Key>): JSX.Element {
   const classes = useStyles({ theme: tweakStyles });
 
   const translatesLocaleKey = filter.localeKey ?? localeKey;

package/src/components/FiltersPane/components/FilterWithDates/FilterWithDates.styles.ts

@@ -6,6 +6,7 @@ import { innerTextButtonStyles } from '../../FiltersPane.styles';
 
 export const useStyles = createThemedStyles('FilterWithDates', {
   root: {
+    width: 320,
     background: colors.CLASSIC_WHITE,
     position: 'relative',
     zIndex: 20,

package/src/components/FiltersPane/components/FilterWithPeriod/FilterWithPeriod.tsx

@@ -151,7 +151,7 @@ export const FilterWithPeriod: FC<IFilterWithPeriodProps> = ({
         </div>
       )}
       {isDatePickerShown && (
-        <div className={classes.picker} style={{ width: 320 }} ref={refDatePicker}>
+        <div className={classes.picker} ref={refDatePicker}>
           <FilterWithDates
             onStartBtnSubmit={() => {
               setIsDatePickerShown(false);

package/src/components/FiltersPane/components/FilterWrapper/FilterWrapper.tsx

@@ -12,8 +12,10 @@ import { FilterValueView } from '../FilterValueView';
 import { isContentNotEmpty } from './helpers';
 import { useStyles, IFilterWrapperStyles } from './FilterWrapper.styles';
 
-export interface IFilterWrapperProps<Values, Key extends keyof Values>
-  extends ICommonProps<IFilterWrapperStyles> {
+export interface IFilterWrapperProps<
+  Values extends Record<string, unknown>,
+  Key extends keyof Values,
+> extends ICommonProps<IFilterWrapperStyles> {
   filter: ConfigItem<Values[Key]>;
   value?: Values[Key];
   isDisabled?: boolean;
@@ -22,7 +24,7 @@ export interface IFilterWrapperProps<Values, Key extends keyof Values>
   onChange: <V>(value: V) => void;
 }
 
-export function FilterWrapper<Values, Key extends keyof Values>({
+export function FilterWrapper<Values extends Record<string, unknown>, Key extends keyof Values>({
   filter,
   value,
   isDisabled,
@@ -105,8 +107,8 @@ export function FilterWrapper<Values, Key extends keyof Values>({
                 <FilterValueView
                   value={value}
                   filter={filter}
-                  localeKey={localeKey}
                   locale={locale}
+                  localeKey={localeKey}
                   testId={getTestId(testId, 'value')}
                   tweakStyles={tweakFilterValueViewStyles}
                 />
@@ -137,8 +139,8 @@ export function FilterWrapper<Values, Key extends keyof Values>({
         <Filter
           value={value}
           filter={filter}
-          localeKey={localeKey}
           locale={locale}
+          localeKey={localeKey}
           onClose={onClose}
           onChange={onChange}
           testId={testId}

package/src/components/FlexibleTable/FlexibleTable.tsx

@@ -34,7 +34,6 @@ export interface IFlexibleTableProps<
       | 'uniqueField'
       | 'rowAttributes'
       | 'isFirstColumnSticky'
-      | 'isExpandableRowComponentInitiallyOpen'
       | 'expandableRowComponent'
       | 'onRowClick'
       | 'onRowHover'
@@ -63,6 +62,8 @@ export interface IFlexibleTableProps<
   nothingFoundContent?: ReactNode;
   /** @default true */
   shouldRenderHeader?: boolean;
+  /** @default false */
+  isExpandableRowComponentInitiallyOpen?: boolean | ((row: Row, index: number) => boolean);
 }
 
 export function FlexibleTable<
@@ -89,6 +90,7 @@ export function FlexibleTable<
   tweakStyles,
   shouldRenderHeader = true,
   onHeadClick,
+  isExpandableRowComponentInitiallyOpen: isRowInitiallyOpen,
   ...restProps
 }: IFlexibleTableProps<Row, HeaderContent, UniqueField>): JSX.Element {
   const classes = useStyles({ theme: tweakStyles });
@@ -106,11 +108,12 @@ export function FlexibleTable<
 
   const hasInfiniteScroll = isNotEmpty(infinityScrollConfig);
 
-  const tableRowProps: Omit<
-    IFlexibleTableRowProps<Row, HeaderContent, UniqueField>,
-    'item' | 'index'
-  > = {
+  const getTableRowProps = (
+    item: Row,
+    index: number,
+  ): IFlexibleTableRowProps<Row, HeaderContent, UniqueField> => ({
     ...restProps,
+    item,
     renderMode,
     config,
     columns,
@@ -119,7 +122,8 @@ export function FlexibleTable<
     isFirstColumnSticky,
     isFocusable: isRowFocusable,
     tweakStyles: tweakTableRowStyles,
-  };
+    isExpandableRowComponentInitiallyOpen: applyAction(isRowInitiallyOpen, item, index),
+  });
 
   const getDataScrollAttributeSetter = useCallback(
     (key: string, setter: (el: HTMLDivElement) => boolean) => (el?: HTMLDivElement) => {
@@ -268,9 +272,7 @@ export function FlexibleTable<
         )}
         <Table.Body className={classes.body}>
           {isLoading ? (
-            indexMap(6, (i) => (
-              <FlexibleTableRow {...tableRowProps} key={i} item={{} as Row} index={i} />
-            ))
+            indexMap(6, (i) => <FlexibleTableRow {...getTableRowProps({} as Row, i)} key={i} />)
           ) : (
             <>
               {shouldShowNothingFound && (
@@ -283,11 +285,9 @@ export function FlexibleTable<
 
               {content.map((item, i) => (
                 <FlexibleTableRow
-                  {...tableRowProps}
+                  {...getTableRowProps(item, i)}
                   isActive={activeRowsSet.has(i)}
                   key={isNotEmpty(uniqueField) ? item[uniqueField] : i}
-                  item={item}
-                  index={i}
                 />
               ))}
 

package/src/components/FlexibleTable/components/FlexibleTableRow/FlexibleTableRow.tsx

@@ -1,6 +1,6 @@
 import { ReactNode, useState, memo, MouseEvent, RefCallback } from 'react';
 import clsx from 'clsx';
-import { applyAction, isEmpty, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { isEmpty, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../../../helpers';
 import { useTweakStyles } from '../../../../hooks';
 import { IDataAttributes, ITweakStylesProps } from '../../../../types';
@@ -21,7 +21,6 @@ export interface IFlexibleTableRowProps<
   UniqueField extends keyof Row,
 > extends ITweakStylesProps<IFlexibleTableRowStyles> {
   item: Row;
-  index: number;
   uniqueField?: UniqueField;
   renderMode: IFlexibleTableRenderMode;
   /** @default false */
@@ -37,7 +36,7 @@ export interface IFlexibleTableRowProps<
   columns: Array<keyof Row & string>;
   rowAttributes?: Array<keyof Row>;
   /** @default false */
-  isExpandableRowComponentInitiallyOpen?: boolean | ((row: Row, index: number) => boolean);
+  isExpandableRowComponentInitiallyOpen?: boolean;
   rowRef?: RefCallback<HTMLTableRowElement>;
   /** Возвращает React-элемент, который отрисуется под строкой при нажатии на неё  */
   expandableRowComponent?: (item: Row, isOpen: boolean, close: () => void) => ReactNode;
@@ -51,7 +50,6 @@ function FlexibleTableRowInner<
   UniqueField extends keyof Row,
 >({
   item,
-  index,
   config,
   columns,
   uniqueField,
@@ -78,7 +76,7 @@ function FlexibleTableRowInner<
 
   const [isFocused, setFocused] = useState(false);
   const [nestedComponent, setNestedComponent] = useState<INestedComponent>(() => ({
-    isOpen: applyAction(isExpandableRowComponentInitiallyOpen, item, index),
+    isOpen: isExpandableRowComponentInitiallyOpen,
   }));
 
   const isEditable = !isLoading && (isNotEmpty(onRowClick) || isNotEmpty(onRowHover));

package/src/hooks/index.ts

@@ -5,3 +5,4 @@ export * from './use-tweak-styles';
 export * from './use-did-mount-effect';
 export * from './use-mixed-styles';
 export * from './use-merged-refs';
+export * from './use-merge';

package/src/hooks/use-merge.ts

@@ -0,0 +1,8 @@
+import { useMemo } from 'react';
+import { isNotEmpty, mergeStyles } from '@true-engineering/true-react-platform-helpers';
+
+export const useMerge = <T>(one?: T, two?: T): T | undefined =>
+  useMemo(
+    () => (isNotEmpty(one) && isNotEmpty(two) ? mergeStyles(one, two) : one ?? two),
+    [one, two],
+  );

package/src/hooks/use-mixed-styles.ts

@@ -1,14 +1,12 @@
 import { useMemo } from 'react';
-import { isNotEmpty, mergeStyles } from '@true-engineering/true-react-platform-helpers';
+import { isObject } from '@true-engineering/true-react-platform-helpers';
+import type { IMixedStyles } from '../theme';
+
+export const mixStyles = <T>(...tweakStyles: Array<IMixedStyles<T>>): Array<NonNullable<T>> =>
+  tweakStyles.flat().filter(isObject) as Array<NonNullable<T>>;
 
 export const useMixedStyles = <StyleSheet>(
-  baseStyles?: StyleSheet,
-  tweakStyles?: StyleSheet,
-): StyleSheet | undefined =>
-  useMemo(
-    () =>
-      isNotEmpty(baseStyles) && isNotEmpty(tweakStyles)
-        ? mergeStyles(baseStyles, tweakStyles)
-        : baseStyles ?? tweakStyles,
-    [baseStyles, tweakStyles],
-  );
+  baseStyles?: IMixedStyles<StyleSheet>,
+  tweakStyles?: IMixedStyles<StyleSheet>,
+): Array<NonNullable<StyleSheet>> =>
+  useMemo(() => mixStyles(baseStyles, tweakStyles), [baseStyles, tweakStyles]);