@true-engineering/true-react-common-ui-kit 4.0.0-alpha4 → 4.0.0-alpha40

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

@@ -1,149 +1,153 @@
-import { MouseEventHandler } from 'react';
-import clsx from 'clsx';
-import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../../../helpers';
-import { useTweakStyles } from '../../../../hooks';
-import { ICommonProps } from '../../../../types';
-import { Icon } from '../../../Icon';
-import { WithPopup } from '../../../WithPopup';
-import { ConfigItem, IFilterLocaleKey, IPartialFilterLocale } from '../../types';
-import { Filter } from '../Filter';
-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> {
-  filter: ConfigItem<Values[Key]>;
-  value?: Values[Key];
-  isDisabled?: boolean;
-  localeKey?: IFilterLocaleKey;
-  locale?: IPartialFilterLocale;
-  onChange: <V>(value: V) => void;
-}
-
-export function FilterWrapper<Values, Key extends keyof Values>({
-  filter,
-  value,
-  isDisabled,
-  locale,
-  localeKey,
-  data,
-  testId,
-  tweakStyles,
-  onChange,
-}: IFilterWrapperProps<Values, Key>): JSX.Element {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const tweakWithPopupStyles = useTweakStyles({
-    tweakStyles,
-    className: 'tweakWithPopup',
-    currentComponentName: 'FilterWrapper',
-  });
-
-  const tweakFilterValueViewStyles = useTweakStyles({
-    tweakStyles,
-    className: 'tweakValueView',
-    currentComponentName: 'FilterWrapper',
-  });
-
-  if (filter.isInline) {
-    return (
-      <Filter
-        value={value}
-        filter={filter}
-        localeKey={localeKey}
-        locale={locale}
-        onChange={onChange}
-        testId={testId}
-      />
-    );
-  }
-
-  const isBoolean = filter.type === 'boolean';
-
-  const handleLabelClick = () => {
-    if (isBoolean) {
-      onChange(!value);
-    }
-  };
-  const handleClearIconClick: MouseEventHandler<HTMLDivElement> = (event) => {
-    event.stopPropagation();
-    onChange(undefined);
-  };
-
-  const hasValue = isContentNotEmpty(value);
-  const hasClearIcon = (filter.isClearable ?? false) && hasValue;
-
-  return (
-    <WithPopup
-      placement="bottom-start"
-      canBeFlipped
-      isDisabled={isBoolean || isDisabled}
-      tweakStyles={tweakWithPopupStyles}
-      trigger={({ triggerProps: { isActive }, referenceProps }) => (
-        <div
-          className={clsx(classes.root, {
-            [classes.noValue]: !hasValue,
-            [classes.openNoValue]: isActive && !hasValue,
-            [classes.withValue]: !isActive && hasValue,
-            [classes.openWithValue]: isActive && hasValue,
-            [classes.boolean]: isBoolean,
-            [classes.disabled]: isDisabled,
-          })}
-          {...addDataTestId(testId)}
-          {...addDataAttributes(data)}
-          {...referenceProps}
-        >
-          <div
-            onClick={handleLabelClick}
-            className={clsx(classes.item, { [classes.booleanItem]: isBoolean })}
-          >
-            <div className={classes.name}>{filter.name}</div>
-            {!isBoolean && value !== undefined && value !== null && (
-              <div className={classes.value}>
-                <FilterValueView
-                  value={value}
-                  filter={filter}
-                  localeKey={localeKey}
-                  locale={locale}
-                  testId={getTestId(testId, 'value')}
-                  tweakStyles={tweakFilterValueViewStyles}
-                />
-              </div>
-            )}
-            {!isBoolean && !hasClearIcon && (
-              <div
-                className={clsx(classes.iconContainer, classes.chevronIcon, {
-                  [classes.open]: isActive,
-                })}
-              >
-                <Icon type="chevron-down" />
-              </div>
-            )}
-            {hasClearIcon && (
-              <div
-                className={clsx(classes.iconContainer, classes.clearIcon)}
-                onClick={handleClearIconClick}
-              >
-                <Icon type="close-large" />
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-    >
-      {({ onClose }) => (
-        <Filter
-          value={value}
-          filter={filter}
-          localeKey={localeKey}
-          locale={locale}
-          onClose={onClose}
-          onChange={onChange}
-          testId={testId}
-        />
-      )}
-    </WithPopup>
-  );
-}
+import { MouseEventHandler } from 'react';
+import clsx from 'clsx';
+import {
+  addDataAttributes,
+  getTestId,
+  isNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
+import { useTweakStyles } from '../../../../hooks';
+import { ICommonProps } from '../../../../types';
+import { Icon } from '../../../Icon';
+import { WithPopup } from '../../../WithPopup';
+import { ConfigItem, IFilterLocaleKey, IPartialFilterLocale } from '../../types';
+import { Filter } from '../Filter';
+import { FilterValueView } from '../FilterValueView';
+import { isContentNotEmpty } from './helpers';
+import { useStyles, IFilterWrapperStyles } from './FilterWrapper.styles';
+
+export interface IFilterWrapperProps<
+  Values extends Record<string, unknown>,
+  Key extends keyof Values,
+> extends ICommonProps<IFilterWrapperStyles> {
+  filter: ConfigItem<Values[Key]>;
+  value?: Values[Key];
+  isDisabled?: boolean;
+  localeKey?: IFilterLocaleKey;
+  locale?: IPartialFilterLocale;
+  onChange: <V>(value: V) => void;
+}
+
+export function FilterWrapper<Values extends Record<string, unknown>, Key extends keyof Values>({
+  filter,
+  value,
+  isDisabled,
+  locale,
+  localeKey,
+  data,
+  testId,
+  tweakStyles,
+  onChange,
+}: IFilterWrapperProps<Values, Key>): JSX.Element {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakWithPopupStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakWithPopup',
+    currentComponentName: 'FilterWrapper',
+  });
+
+  const tweakFilterValueViewStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakValueView',
+    currentComponentName: 'FilterWrapper',
+  });
+
+  if (filter.isInline) {
+    return (
+      <Filter
+        value={value}
+        filter={filter}
+        localeKey={localeKey}
+        locale={locale}
+        onChange={onChange}
+        testId={testId}
+      />
+    );
+  }
+
+  const isBoolean = filter.type === 'boolean';
+
+  const handleLabelClick = () => {
+    if (isBoolean) {
+      onChange(!value);
+    }
+  };
+  const handleClearIconClick: MouseEventHandler<HTMLDivElement> = (event) => {
+    event.stopPropagation();
+    onChange(undefined);
+  };
+
+  const hasValue = isContentNotEmpty(value);
+  const hasClearIcon = (filter.isClearable ?? false) && hasValue;
+
+  return (
+    <WithPopup
+      placement="bottom-start"
+      canBeFlipped
+      isDisabled={isBoolean || isDisabled}
+      tweakStyles={tweakWithPopupStyles}
+      trigger={({ triggerProps: { isActive }, referenceProps }) => (
+        <div
+          className={clsx(classes.root, {
+            [classes.noValue]: !hasValue,
+            [classes.openNoValue]: isActive && !hasValue,
+            [classes.withValue]: !isActive && hasValue,
+            [classes.openWithValue]: isActive && hasValue,
+            [classes.boolean]: isBoolean,
+            [classes.disabled]: isDisabled,
+          })}
+          {...addDataAttributes(data, testId)}
+          {...referenceProps}
+        >
+          <div
+            onClick={handleLabelClick}
+            className={clsx(classes.item, { [classes.booleanItem]: isBoolean })}
+          >
+            <div className={classes.name}>{filter.name}</div>
+            {!isBoolean && isNotEmpty(value) && (
+              <div className={classes.value}>
+                <FilterValueView
+                  value={value}
+                  filter={filter}
+                  locale={locale}
+                  localeKey={localeKey}
+                  testId={getTestId(testId, 'value')}
+                  tweakStyles={tweakFilterValueViewStyles}
+                />
+              </div>
+            )}
+            {!isBoolean && !hasClearIcon && (
+              <div
+                className={clsx(classes.iconContainer, classes.chevronIcon, {
+                  [classes.open]: isActive,
+                })}
+              >
+                <Icon type="chevron-down" />
+              </div>
+            )}
+            {hasClearIcon && (
+              <div
+                className={clsx(classes.iconContainer, classes.clearIcon)}
+                onClick={handleClearIconClick}
+              >
+                <Icon type="close-large" />
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    >
+      {({ onClose }) => (
+        <Filter
+          value={value}
+          filter={filter}
+          locale={locale}
+          localeKey={localeKey}
+          onClose={onClose}
+          onChange={onChange}
+          testId={testId}
+        />
+      )}
+    </WithPopup>
+  );
+}

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

@@ -1,14 +1,14 @@
-import { isNotEmpty, isObject } from '@true-engineering/true-react-platform-helpers';
-
-export const isContentNotEmpty = (value: unknown): boolean => {
-  if (Array.isArray(value)) {
-    return value.some(isContentNotEmpty);
-  }
-  if (isObject(value)) {
-    return Object.values(value).some(isContentNotEmpty);
-  }
-  if (typeof value === 'boolean') {
-    return value;
-  }
-  return isNotEmpty(value);
-};
+import { isNotEmpty, isObject } from '@true-engineering/true-react-platform-helpers';
+
+export const isContentNotEmpty = (value: unknown): boolean => {
+  if (Array.isArray(value)) {
+    return value.some(isContentNotEmpty);
+  }
+  if (isObject(value)) {
+    return Object.values(value).some(isContentNotEmpty);
+  }
+  if (typeof value === 'boolean') {
+    return value;
+  }
+  return isNotEmpty(value);
+};

package/src/components/FiltersPane/components/FilterWrapper/index.ts

@@ -1,2 +1,2 @@
-export * from './FilterWrapper';
-export type { IFilterWrapperStyles } from './FilterWrapper.styles';
+export * from './FilterWrapper';
+export type { IFilterWrapperStyles } from './FilterWrapper.styles';

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

@@ -1,124 +1,129 @@
-import { rgba } from '../../../../helpers';
-import {
-  animations,
-  colors,
-  createThemedStyles,
-  dimensions,
-  ITweakStyles,
-} from '../../../../theme';
-import { ISearchInputStyles } from '../../../SearchInput';
-import { ISelectStyles } from '../../../Select';
-import { FILTER_HEIGHT } from '../../FiltersPane.styles';
-
-export const useStyles = createThemedStyles('FiltersPaneSearch', {
-  root: {
-    display: 'flex',
-    position: 'relative',
-    backgroundColor: rgba(colors.BORDER_MAIN, 0.3),
-    border: [1, 'transparent', 'solid'],
-    borderRadius: 18,
-    paddingRight: 8,
-    transition: animations.defaultTransition,
-    transitionProperty: 'background-color, border-color',
-  },
-
-  focused: {
-    backgroundColor: colors.CLASSIC_WHITE,
-    borderColor: colors.BORDER_MAIN,
-  },
-
-  disabled: {
-    '& $selectBlock': {
-      cursor: 'default',
-    },
-  },
-
-  selectWrapper: {
-    position: 'relative',
-    display: 'flex',
-    flexShrink: 0,
-  },
-
-  selectBlock: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 6,
-    cursor: 'pointer',
-    height: '100%',
-  },
-
-  selectLabel: {
-    flexShrink: 0,
-    fontSize: 14,
-    userSelect: 'none',
-  },
-
-  chevronIcon: {
-    flexShrink: 0,
-    width: 20,
-    height: 20,
-    marginRight: 4,
-    transition: 'transform .2s ease',
-    opacity: 0.5,
-  },
-
-  open: {
-    transform: 'rotate(180deg)',
-  },
-
-  dropdown: {
-    position: 'absolute',
-    top: FILTER_HEIGHT - 2,
-    right: 0,
-    zIndex: 20,
-    minWidth: 200,
-    marginTop: 6,
-    borderRadius: dimensions.BORDER_RADIUS_SMALL,
-    backgroundColor: colors.CLASSIC_WHITE,
-    overflow: 'hidden',
-  },
-
-  dropdownInput: {
-    borderBottom: [1, 'solid', colors.BORDER_MAIN],
-  },
-
-  active: {
-    fontWeight: 'bold',
-  },
-});
-
-export const searchInputStyles: ISearchInputStyles = {
-  tweakInput: {
-    tweakControlWrapper: {
-      controlWrapper: {
-        '--control-height': `${FILTER_HEIGHT - 2}px`,
-        backgroundColor: 'transparent',
-        border: 'none',
-        minWidth: 140,
-      },
-
-      focused: {
-        backgroundColor: 'transparent',
-        border: 'none',
-      },
-    },
-  },
-};
-
-export const selectStyles: ISelectStyles = {
-  root: {
-    borderRadius: 0,
-    borderBottomLeftRadius: 6,
-    borderBottomRightRadius: 6,
-    boxShadow: 'none',
-    width: '100%',
-  },
-};
-
-export type IFiltersPaneSearchStyles = ITweakStyles<
-  typeof useStyles,
-  {
-    tweakSearchInput: ISearchInputStyles;
-    tweakSelect: ISelectStyles;
-  }
->;
+import { rgba } from '../../../../helpers';
+import {
+  animations,
+  colors,
+  createThemedStyles,
+  dimensions,
+  ITweakStyles,
+} from '../../../../theme';
+import { ISearchInputStyles } from '../../../SearchInput';
+import { ISelectStyles } from '../../../Select';
+import { FILTER_HEIGHT } from '../../FiltersPane.styles';
+
+export const useStyles = createThemedStyles('FiltersPaneSearch', {
+  root: {
+    display: 'flex',
+    position: 'relative',
+    backgroundColor: rgba(colors.BORDER_MAIN, 0.3),
+    border: [1, 'transparent', 'solid'],
+    borderRadius: 18,
+    paddingRight: 8,
+    transition: animations.defaultTransition,
+    transitionProperty: 'background-color, border-color',
+  },
+
+  focused: {
+    backgroundColor: colors.CLASSIC_WHITE,
+    borderColor: colors.BORDER_MAIN,
+  },
+
+  disabled: {
+    '& $selectBlock': {
+      cursor: 'default',
+    },
+  },
+
+  hasValue: {
+    backgroundColor: colors.CLASSIC_WHITE,
+    borderColor: colors.BORDER_MAIN,
+  },
+
+  selectWrapper: {
+    position: 'relative',
+    display: 'flex',
+    flexShrink: 0,
+  },
+
+  selectBlock: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 6,
+    cursor: 'pointer',
+    height: '100%',
+  },
+
+  selectLabel: {
+    flexShrink: 0,
+    fontSize: 14,
+    userSelect: 'none',
+  },
+
+  chevronIcon: {
+    flexShrink: 0,
+    width: 20,
+    height: 20,
+    marginRight: 4,
+    transition: 'transform .2s ease',
+    opacity: 0.5,
+  },
+
+  open: {
+    transform: 'rotate(180deg)',
+  },
+
+  dropdown: {
+    position: 'absolute',
+    top: FILTER_HEIGHT - 2,
+    right: 0,
+    zIndex: 20,
+    minWidth: 200,
+    marginTop: 6,
+    borderRadius: dimensions.BORDER_RADIUS_SMALL,
+    backgroundColor: colors.CLASSIC_WHITE,
+    overflow: 'hidden',
+  },
+
+  dropdownInput: {
+    borderBottom: [1, 'solid', colors.BORDER_MAIN],
+  },
+
+  active: {
+    fontWeight: 'bold',
+  },
+});
+
+export const searchInputStyles: ISearchInputStyles = {
+  tweakInput: {
+    tweakControlWrapper: {
+      controlWrapper: {
+        '--control-height': `${FILTER_HEIGHT - 2}px`,
+        backgroundColor: 'transparent',
+        border: 'none',
+        minWidth: 140,
+      },
+
+      focused: {
+        backgroundColor: 'transparent',
+        border: 'none',
+      },
+    },
+  },
+};
+
+export const selectStyles: ISelectStyles = {
+  root: {
+    borderRadius: 0,
+    borderBottomLeftRadius: 6,
+    borderBottomRightRadius: 6,
+    boxShadow: 'none',
+    width: '100%',
+  },
+};
+
+export type IFiltersPaneSearchStyles = ITweakStyles<
+  typeof useStyles,
+  {
+    tweakSearchInput: ISearchInputStyles;
+    tweakSelect: ISelectStyles;
+  }
+>;