@true-engineering/true-react-common-ui-kit 3.1.1 → 3.2.0

package/src/components/Select/Select.styles.ts

@@ -1,146 +1,146 @@
-import { mergeStyles } from '@true-engineering/true-react-platform-helpers';
-import { ITweakStyles, createThemedStyles } from '../../theme';
-import { IInputStyles } from '../Input';
-import { ISearchInputStyles } from '../SearchInput';
-import { ISelectListStyles } from './components';
-
-export const useStyles = createThemedStyles('Select', {
-  root: {
-    width: '100%',
-    position: 'relative',
-    boxSizing: 'border-box',
-  },
-
-  inputWrapper: {
-    width: '100%',
-    cursor: 'text',
-    position: 'relative',
-  },
-
-  listWrapper: {
-    left: -1,
-    zIndex: 3,
-    width: 'fit-content',
-    minWidth: 'calc(100% + 1px)',
-  },
-
-  withoutPopper: {
-    position: 'absolute',
-    top: 'calc(100% + 6px)',
-  },
-
-  listWrapperInBody: {
-    minWidth: 'auto',
-    width: 'auto',
-    maxWidth: 'min-content',
-  },
-
-  arrow: {
-    position: 'absolute',
-    right: 12,
-    top: 14,
-    width: 20,
-    height: 20,
-    cursor: 'pointer',
-    zIndex: 1,
-    transition: 'transform 0.1s ease',
-  },
-
-  activeArrow: {
-    transform: 'rotate(180deg)',
-  },
-
-  disabled: {
-    '& $arrow': {
-      cursor: 'default',
-    },
-  },
-
-  counter: {
-    '&:not(:last-child)': {
-      paddingRight: 8,
-    },
-  },
-
-  icon: {
-    width: 16,
-    height: 16,
-  },
-});
-
-const baseInputStyles: IInputStyles = {
-  input: {
-    paddingRight: 32,
-  },
-
-  disabled: {
-    '& $input': {
-      cursor: 'default',
-    },
-  },
-
-  controls: {
-    paddingRight: 32,
-  },
-};
-
-const readonlyInputBaseStyles: IInputStyles = {
-  input: {
-    cursor: 'pointer',
-  },
-};
-
-const multiSelectInputBaseStyles: IInputStyles = {
-  inputIcon: {
-    '&:not($loading)': {
-      width: 'auto',
-    },
-  },
-};
-
-export const readonlyInputStyles = mergeStyles(baseInputStyles, readonlyInputBaseStyles);
-export const multiSelectInputStyles = mergeStyles(baseInputStyles, multiSelectInputBaseStyles);
-export const readonlyMultiSelectStyles = mergeStyles(
-  baseInputStyles,
-  readonlyInputBaseStyles,
-  multiSelectInputBaseStyles,
-);
-
-export const getInputStyles = ({
-  hasReadonlyInput,
-  isMultiSelect,
-}: {
-  hasReadonlyInput: boolean;
-  isMultiSelect: boolean;
-}): IInputStyles => {
-  if (hasReadonlyInput && isMultiSelect) {
-    return readonlyMultiSelectStyles;
-  }
-  if (hasReadonlyInput && !isMultiSelect) {
-    return readonlyInputStyles;
-  }
-  if (!hasReadonlyInput && isMultiSelect) {
-    return multiSelectInputStyles;
-  }
-  return baseInputStyles;
-};
-
-export const searchInputStyles: ISearchInputStyles = {
-  tweakInput: {
-    inputWrapper: {
-      height: 48,
-      borderRadius: 0,
-      border: 'none',
-      backgroundColor: 'transparent',
-    },
-  },
-};
-
-export type ISelectStyles = ITweakStyles<
-  typeof useStyles,
-  {
-    tweakInput: IInputStyles;
-    tweakSelectList: ISelectListStyles;
-    tweakSearchInput: ISearchInputStyles;
-  }
->;
+import { mergeStyles } from '@true-engineering/true-react-platform-helpers';
+import { ITweakStyles, createThemedStyles } from '../../theme';
+import { IInputStyles } from '../Input';
+import { ISearchInputStyles } from '../SearchInput';
+import { ISelectListStyles } from './components';
+
+export const useStyles = createThemedStyles('Select', {
+  root: {
+    width: '100%',
+    position: 'relative',
+    boxSizing: 'border-box',
+  },
+
+  inputWrapper: {
+    width: '100%',
+    cursor: 'text',
+    position: 'relative',
+  },
+
+  listWrapper: {
+    left: -1,
+    zIndex: 3,
+    width: 'fit-content',
+    minWidth: 'calc(100% + 1px)',
+  },
+
+  withoutPopper: {
+    position: 'absolute',
+    top: 'calc(100% + 6px)',
+  },
+
+  listWrapperInBody: {
+    minWidth: 'auto',
+    width: 'auto',
+    maxWidth: 'min-content',
+  },
+
+  arrow: {
+    position: 'absolute',
+    right: 12,
+    top: 14,
+    width: 20,
+    height: 20,
+    cursor: 'pointer',
+    zIndex: 1,
+    transition: 'transform 0.1s ease',
+  },
+
+  activeArrow: {
+    transform: 'rotate(180deg)',
+  },
+
+  disabled: {
+    '& $arrow': {
+      cursor: 'default',
+    },
+  },
+
+  counter: {
+    '&:not(:last-child)': {
+      paddingRight: 8,
+    },
+  },
+
+  icon: {
+    width: 16,
+    height: 16,
+  },
+});
+
+const baseInputStyles: IInputStyles = {
+  input: {
+    paddingRight: 32,
+  },
+
+  disabled: {
+    '& $input': {
+      cursor: 'default',
+    },
+  },
+
+  controls: {
+    paddingRight: 32,
+  },
+};
+
+const readonlyInputBaseStyles: IInputStyles = {
+  input: {
+    cursor: 'pointer',
+  },
+};
+
+const multiSelectInputBaseStyles: IInputStyles = {
+  inputIcon: {
+    '&:not($loading)': {
+      width: 'auto',
+    },
+  },
+};
+
+export const readonlyInputStyles = mergeStyles(baseInputStyles, readonlyInputBaseStyles);
+export const multiSelectInputStyles = mergeStyles(baseInputStyles, multiSelectInputBaseStyles);
+export const readonlyMultiSelectStyles = mergeStyles(
+  baseInputStyles,
+  readonlyInputBaseStyles,
+  multiSelectInputBaseStyles,
+);
+
+export const getInputStyles = ({
+  hasReadonlyInput,
+  isMultiSelect,
+}: {
+  hasReadonlyInput: boolean;
+  isMultiSelect: boolean;
+}): IInputStyles => {
+  if (hasReadonlyInput && isMultiSelect) {
+    return readonlyMultiSelectStyles;
+  }
+  if (hasReadonlyInput && !isMultiSelect) {
+    return readonlyInputStyles;
+  }
+  if (!hasReadonlyInput && isMultiSelect) {
+    return multiSelectInputStyles;
+  }
+  return baseInputStyles;
+};
+
+export const searchInputStyles: ISearchInputStyles = {
+  tweakInput: {
+    inputWrapper: {
+      height: 48,
+      borderRadius: 0,
+      border: 'none',
+      backgroundColor: 'transparent',
+    },
+  },
+};
+
+export type ISelectStyles = ITweakStyles<
+  typeof useStyles,
+  {
+    tweakInput: IInputStyles;
+    tweakSelectList: ISelectListStyles;
+    tweakSearchInput: ISearchInputStyles;
+  }
+>;