@true-engineering/true-react-common-ui-kit 2.7.0 → 3.0.0-alpha.1

package/src/components/MultiSelect/components/MultiSelectInput/MultiSelectInput.styles.ts

@@ -1,73 +1,73 @@
-import { ComponentStyles } from '../../../../types';
-
-export const styles = {
-  root: {
-    display: 'flex',
-    justifyContent: 'center',
-    flexDirection: 'column',
-    height: '100%',
-    padding: [0, 12],
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-  },
-
-  placeholder: {
-    fontSize: 16,
-    userSelect: 'none',
-  },
-
-  placeholderSmall: {
-    fontSize: 12,
-    marginBottom: 2,
-    position: 'relative',
-  },
-
-  values: {
-    width: '100%',
-  },
-
-  value: {
-    width: 'calc(100% - 64px)',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-  },
-
-  amount: {
-    boxSizing: 'border-box',
-    position: 'absolute',
-    top: 'calc(50% - 11px)',
-    right: 44,
-    height: 22,
-    minWidth: 22,
-    fontSize: 14,
-    lineHeight: '16px',
-    textAlign: 'center',
-    padding: [2, 4],
-  },
-
-  indicator: {
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    height: '100%',
-    width: 36,
-    borderRadius: 6,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-
-  arrow: {
-    width: 20,
-    height: 20,
-    transition: 'transform .2s ease',
-  },
-
-  arrowUp: {
-    transform: 'rotate(180deg)',
-  },
-
-  indicatorDisabled: {},
-};
-
-export type MultiSelectInputStyles = ComponentStyles<typeof styles>;
+import { ITweakStyles, createThemedStyles } from '../../../../theme';
+
+export const useStyles = createThemedStyles('MultiSelectInput', {
+  root: {
+    display: 'flex',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    height: '100%',
+    padding: [0, 12],
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+  },
+
+  placeholder: {
+    fontSize: 16,
+    userSelect: 'none',
+  },
+
+  placeholderSmall: {
+    fontSize: 12,
+    marginBottom: 2,
+    position: 'relative',
+  },
+
+  values: {
+    width: '100%',
+  },
+
+  value: {
+    width: 'calc(100% - 64px)',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
+
+  amount: {
+    boxSizing: 'border-box',
+    position: 'absolute',
+    top: 'calc(50% - 11px)',
+    right: 44,
+    height: 22,
+    minWidth: 22,
+    fontSize: 14,
+    lineHeight: '16px',
+    textAlign: 'center',
+    padding: [2, 4],
+  },
+
+  indicator: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    height: '100%',
+    width: 36,
+    borderRadius: 6,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+
+  arrow: {
+    width: 20,
+    height: 20,
+    transition: 'transform .2s ease',
+  },
+
+  arrowUp: {
+    transform: 'rotate(180deg)',
+  },
+
+  indicatorDisabled: {},
+});
+
+export type IMultiSelectInputStyles = ITweakStyles<typeof useStyles>;

package/src/components/MultiSelect/components/MultiSelectInput/MultiSelectInput.tsx

@@ -1,51 +1,52 @@
-import { ReactElement } from 'react';
-import clsx from 'clsx';
-import { useTheme } from '../../../../hooks';
-import { ICommonProps } from '../../../../types';
-import { Icon, IMultiSelectListValues } from '../../../index';
-import { styles } from './MultiSelectInput.styles';
-
-export interface IMultiSelectInputProps<Value> extends ICommonProps {
-  value?: IMultiSelectListValues<Value>;
-  isOpen: boolean;
-  isDisabled: boolean;
-  placeholder: string;
-  onToggle: (state: boolean) => void;
-}
-
-export function MultiSelectInput<Value>({
-  value: v,
-  isOpen,
-  isDisabled = false,
-  placeholder = '',
-  onToggle,
-}: IMultiSelectInputProps<Value>): ReactElement | null {
-  const { classes } = useTheme('MultiSelectInput', styles);
-
-  const value = v?.include;
-
-  return (
-    <div className={classes.root} onClick={() => !isDisabled && onToggle(!isOpen)}>
-      {/* Placeholder */}
-      {(value === undefined || (value && value.length === 0)) && (
-        <div className={classes.placeholder}>{placeholder}</div>
-      )}
-      {/* Selected options */}
-      {value !== undefined && value.length > 0 && (
-        <>
-          <div className={clsx(classes.placeholder, classes.placeholderSmall)}>{placeholder}</div>
-          <div className={classes.values}>
-            <div className={classes.value}>{value.join(', ')}</div>
-            <div className={classes.amount}>{value.length}</div>
-          </div>
-        </>
-      )}
-      {/* Chevron */}
-      <div className={clsx(classes.indicator, isDisabled && classes.indicatorDisabled)}>
-        <div className={clsx(classes.arrow, isOpen && classes.arrowUp)}>
-          <Icon type="chevron-down" />
-        </div>
-      </div>
-    </div>
-  );
-}
+import { ReactElement } from 'react';
+import clsx from 'clsx';
+import { ICommonProps } from '../../../../types';
+import { Icon, IMultiSelectInputStyles, IMultiSelectListValues } from '../../../index';
+import { useStyles } from './MultiSelectInput.styles';
+
+export interface IMultiSelectInputProps<Value>
+  extends Pick<ICommonProps<IMultiSelectInputStyles>, 'tweakStyles'> {
+  value?: IMultiSelectListValues<Value>;
+  isOpen: boolean;
+  isDisabled: boolean;
+  placeholder: string;
+  onToggle(state: boolean): void;
+}
+
+export function MultiSelectInput<Value>({
+  value: v,
+  isOpen,
+  isDisabled = false,
+  placeholder = '',
+  tweakStyles,
+  onToggle,
+}: IMultiSelectInputProps<Value>): ReactElement | null {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const value = v?.include;
+
+  return (
+    <div className={classes.root} onClick={() => !isDisabled && onToggle(!isOpen)}>
+      {/* Placeholder */}
+      {(value === undefined || (value && value.length === 0)) && (
+        <div className={classes.placeholder}>{placeholder}</div>
+      )}
+      {/* Selected options */}
+      {value !== undefined && value.length > 0 && (
+        <>
+          <div className={clsx(classes.placeholder, classes.placeholderSmall)}>{placeholder}</div>
+          <div className={classes.values}>
+            <div className={classes.value}>{value.join(', ')}</div>
+            <div className={classes.amount}>{value.length}</div>
+          </div>
+        </>
+      )}
+      {/* Chevron */}
+      <div className={clsx(classes.indicator, isDisabled && classes.indicatorDisabled)}>
+        <div className={clsx(classes.arrow, isOpen && classes.arrowUp)}>
+          <Icon type="chevron-down" />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/MultiSelect/components/MultiSelectInput/index.ts

@@ -1,2 +1,2 @@
-export * from './MultiSelectInput';
-export type { MultiSelectInputStyles } from './MultiSelectInput.styles';
+export * from './MultiSelectInput';
+export type { IMultiSelectInputStyles } from './MultiSelectInput.styles';

package/src/components/MultiSelect/components/index.ts

@@ -1 +1 @@
-export * from './MultiSelectInput';
+export * from './MultiSelectInput';

package/src/components/MultiSelect/index.ts

@@ -1,4 +1,4 @@
-export * from './MultiSelect';
-export * from './types';
-export type { MultiSelectStyles } from './MultiSelect.styles';
-export type { MultiSelectInputStyles } from './components';
+export * from './MultiSelect';
+export * from './types';
+export type { IMultiSelectStyles } from './MultiSelect.styles';
+export type { IMultiSelectInputStyles } from './components';

package/src/components/MultiSelect/types.ts

@@ -1 +1 @@
-export type THorizontalCornerConnection = 'full' | 'left' | 'right';
+export type IHorizontalCornerConnection = 'full' | 'left' | 'right';

package/src/components/MultiSelectList/MultiSelectList.styles.ts

@@ -1,124 +1,132 @@
-import { colors, helpers } from '../../theme';
-import { ComponentStyles } from '../../types';
-
-const ITEM_HEIGHT = 40;
-const TOP_GAP = 12;
-
-export const styles = {
-  root: {
-    width: ({ width }: { width: number | string }): string | number => width ?? 220,
-    background: colors.CLASSIC_WHITE,
-  },
-
-  list: {
-    paddingTop: TOP_GAP,
-    maxHeight: ITEM_HEIGHT * 5 + TOP_GAP,
-    overscrollBehavior: 'contain',
-    ...helpers.withScrollBar,
-  },
-
-  label: {
-    boxSizing: 'border-box',
-    fontSize: 14,
-    padding: [12, 16],
-    userSelect: 'none',
-    display: 'flex',
-    alignItems: 'center',
-    color: colors.FONT_LABEL,
-  },
-
-  labelChosen: {
-    fontWeight: 'bold',
-    color: colors.FONT_MAIN,
-    padding: [4, 16, 12],
-  },
-
-  withoutTopGap: {
-    paddingTop: 0,
-  },
-
-  item: {
-    boxSizing: 'border-box',
-    padding: 0,
-    maxWidth: '100%',
-    fontSize: 14,
-  },
-
-  option: {
-    display: 'inline-block',
-    userSelect: 'none',
-    maxWidth: '100%',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-  },
-
-  panel: {
-    display: 'flex',
-    padding: [0, 6, 8],
-  },
-
-  clear: {
-    marginLeft: 'auto',
-  },
-
-  selectedItem: {},
-
-  preloader: {
-    width: 80,
-    height: ITEM_HEIGHT,
-    margin: 'auto',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-
-  dropdownInput: {
-    borderBottom: [1, 'solid', colors.BORDER_MAIN],
-  },
-
-  nothingFound: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    textAlign: 'center',
-    padding: 16,
-    fontSize: 14,
-  },
-
-  tweakSearchInput: {
-    tweakInput: {
-      inputWrapper: {
-        backgroundColor: 'transparent',
-        border: 'none',
-        height: 40,
-      },
-    },
-  },
-
-  tweakCheckbox: {
-    root: {
-      padding: [11, 16],
-    },
-
-    children: {
-      marginRight: 'auto',
-    },
-  },
-
-  tweakClearButton: {
-    text: {
-      color: colors.GREY_ACTIVE,
-
-      '&:hover, &:focus': {
-        color: colors.FONT_MEDIUM,
-      },
-
-      '&:active': {
-        color: colors.FONT_MEDIUM,
-      },
-    },
-  },
-};
-
-export type MultiSelectListStyles = ComponentStyles<typeof styles>;
+import { colors, helpers, ITweakStyles, createThemedStyles } from '../../theme';
+import { IButtonStyles } from '../Button';
+import { ICheckboxStyles } from '../Checkbox';
+import { ISearchInputStyles } from '../SearchInput';
+
+const ITEM_HEIGHT = 40;
+const TOP_GAP = 12;
+
+export const useStyles = createThemedStyles('MultiSelectList', {
+  root: {
+    background: colors.CLASSIC_WHITE,
+  },
+
+  list: {
+    paddingTop: TOP_GAP,
+    maxHeight: ITEM_HEIGHT * 5 + TOP_GAP,
+    overscrollBehavior: 'contain',
+    ...helpers.withScrollBar,
+  },
+
+  label: {
+    boxSizing: 'border-box',
+    fontSize: 14,
+    padding: [12, 16],
+    userSelect: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    color: colors.FONT_LABEL,
+  },
+
+  labelChosen: {
+    fontWeight: 'bold',
+    color: colors.FONT_MAIN,
+    padding: [4, 16, 12],
+  },
+
+  withoutTopGap: {
+    paddingTop: 0,
+  },
+
+  item: {
+    boxSizing: 'border-box',
+    padding: 0,
+    maxWidth: '100%',
+    fontSize: 14,
+  },
+
+  option: {
+    display: 'inline-block',
+    userSelect: 'none',
+    maxWidth: '100%',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+  },
+
+  panel: {
+    display: 'flex',
+    padding: [0, 6, 8],
+  },
+
+  clear: {
+    marginLeft: 'auto',
+  },
+
+  selectedItem: {},
+
+  preloader: {
+    width: 80,
+    height: ITEM_HEIGHT,
+    margin: 'auto',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+
+  dropdownInput: {
+    borderBottom: [1, 'solid', colors.BORDER_MAIN],
+  },
+
+  nothingFound: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    textAlign: 'center',
+    padding: 16,
+    fontSize: 14,
+  },
+});
+
+export const searchInputStyles: ISearchInputStyles = {
+  tweakInput: {
+    inputWrapper: {
+      backgroundColor: 'transparent',
+      border: 'none',
+      height: 40,
+    },
+  },
+};
+
+export const checkboxStyles: ICheckboxStyles = {
+  root: {
+    padding: [11, 16],
+  },
+
+  children: {
+    marginRight: 'auto',
+  },
+};
+
+export const clearButtonStyles: IButtonStyles = {
+  text: {
+    color: colors.GREY_ACTIVE,
+
+    '&:hover, &:focus': {
+      color: colors.FONT_MEDIUM,
+    },
+
+    '&:active': {
+      color: colors.FONT_MEDIUM,
+    },
+  },
+};
+
+export type IMultiSelectListStyles = ITweakStyles<
+  typeof useStyles,
+  {
+    tweakSearchInput: ISearchInputStyles;
+    tweakCheckbox: ICheckboxStyles;
+    tweakClearButton: IButtonStyles;
+  }
+>;