@true-engineering/true-react-common-ui-kit 2.3.2 → 2.4.0

package/src/components/MultiSelect/{MultiSelectInput → 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 { 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>;

package/src/components/MultiSelect/{MultiSelectInput → components/MultiSelectInput}/MultiSelectInput.tsx

@@ -1,51 +1,51 @@
-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 { 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>
+  );
+}

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

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

package/src/components/MultiSelect/{MultiSelectInput → components}/index.ts

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

package/src/components/MultiSelect/index.ts

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

package/src/components/MultiSelect/types.ts

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

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

@@ -1,124 +1,124 @@
-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 } 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>;