@true-engineering/true-react-common-ui-kit 2.6.0 → 3.0.0-alpha.0

package/src/components/PhoneInput/PhoneInput.tsx

@@ -1,24 +1,30 @@
 import { FC, useState, useRef, useMemo, MouseEvent, FocusEvent, FormEvent } from 'react';
 import clsx from 'clsx';
+import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
 import {
   getCountryCodeFromPhone,
   getFullPhone,
   getPhoneMask,
   getPhoneObjFromString,
   findCountryByCode,
+  addDataAttributes,
 } from '../../helpers';
-import { useOnClickOutsideWithRef, useTheme, useTweakStyles } from '../../hooks';
+import { useOnClickOutsideWithRef, useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
 import { Flag } from '../Flag';
 import { Icon } from '../Icon';
 import { IInputProps, Input } from '../Input';
 import { PhoneInputCountryList } from './components';
 import { DEFAULT_VALUE } from './constants';
 import { IPhoneInfo, IPhoneValue } from './types';
-import { PhoneInputStyles, styles } from './PhoneInput.styles';
+import { useStyles, IPhoneInputStyles, inputStyles } from './PhoneInput.styles';
 
 export interface IPhoneInputProps
-  extends Omit<IInputProps, 'value' | 'onChange' | 'type' | 'mask' | 'units' | 'placeholder'> {
-  tweakStyles?: PhoneInputStyles;
+  extends Omit<
+      IInputProps,
+      'value' | 'onChange' | 'type' | 'mask' | 'units' | 'placeholder' | 'tweakStyles'
+    >,
+    ICommonProps<IPhoneInputStyles> {
   locale?: string;
   codeSearchPlaceholder?: string;
   noMatchesLabel?: string;
@@ -33,6 +39,7 @@ export const PhoneInput: FC<IPhoneInputProps> = ({
   locale = 'ru',
   value = DEFAULT_VALUE,
   onChange,
+  data,
   testId,
   isDisabled,
   isInvalid,
@@ -42,13 +49,27 @@ export const PhoneInput: FC<IPhoneInputProps> = ({
   noMatchesLabel = 'Ничего не найдено',
   ...inputProps
 }) => {
-  const { classes, componentStyles } = useTheme('PhoneInput', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakInputStyles = useTweakStyles({
+    innerStyles: inputStyles,
+    tweakStyles,
+    className: 'tweakInput',
+    currentComponentName: 'PhoneInput',
+  });
+
+  const tweakCountryListStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakCountryList',
+    currentComponentName: 'PhoneInput',
+  });
+
+  const [isListOpen, setIsListOpen] = useState(false);
+  const [isFocused, setFocused] = useState(false);
 
   const list = useRef<HTMLDivElement>(null);
   const inputWrapper = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
-  const [isListOpen, setIsListOpen] = useState(false);
-  const [isFocused, setFocused] = useState(false);
 
   const phoneWithCode = getFullPhone(value);
 
@@ -131,12 +152,8 @@ export const PhoneInput: FC<IPhoneInputProps> = ({
 
   useOnClickOutsideWithRef(list, handleClose, inputWrapper);
 
-  const tweakInputStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakInput');
-
-  const tweakCountryListStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakCountryList');
-
   return (
-    <div className={classes.root} data-testid={testId}>
+    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
       <div
         className={clsx(classes.countrySelectContainer, {
           [classes.disabledCountrySelect]: isDisabled,
@@ -160,7 +177,6 @@ export const PhoneInput: FC<IPhoneInputProps> = ({
       </div>
 
       <Input
-        onChange={handleChange}
         value={phoneWithCode}
         mask={getPhoneMask(countryCode)}
         // alwaysShowMask={false}
@@ -168,10 +184,11 @@ export const PhoneInput: FC<IPhoneInputProps> = ({
         isDisabled={isDisabled}
         isInvalid={isInvalid}
         isActive={isListOpen || isActive}
-        testId={testId !== undefined ? `${testId}-input` : undefined}
+        testId={getTestId(testId, 'input')}
+        tweakStyles={tweakInputStyles}
+        onChange={handleChange}
         onFocus={handleFocus}
         onBlur={handleBlur}
-        tweakStyles={tweakInputStyles}
         {...inputProps}
       />
 
@@ -180,11 +197,11 @@ export const PhoneInput: FC<IPhoneInputProps> = ({
           <PhoneInputCountryList
             selectedCountryCode={countryCode}
             placeholder={codeSearchPlaceholder}
-            onChange={handleSelect}
-            closeList={handleClose}
             locale={locale}
             tweakStyles={tweakCountryListStyles}
             noMatchesLabel={noMatchesLabel}
+            onChange={handleSelect}
+            closeList={handleClose}
           />
         </div>
       )}

package/src/components/PhoneInput/components/PhoneInputCountryList/PhoneInputCountryList.styles.ts

@@ -1,10 +1,10 @@
-import { colors, dimensions, helpers } from '../../../../theme';
-import { ComponentStyles } from '../../../../types';
+import { colors, createThemedStyles, dimensions, helpers, ITweakStyles } from '../../../../theme';
+import { IInputStyles } from '../../../Input';
 
 const ROW_HEIGHT = 40;
 const LIST_PADDING = 10;
 
-export const styles = {
+export const useStyles = createThemedStyles('PhoneInputCountryList', {
   root: {
     borderRadius: dimensions.BORDER_RADIUS_SMALL,
     backgroundColor: colors.CLASSIC_WHITE,
@@ -82,19 +82,22 @@ export const styles = {
     color: colors.FONT_LABEL,
     padding: [6, 16],
   },
+});
 
-  tweakInput: {
-    inputWrapper: {
-      border: 'none',
-      height: 'calc(var(--control-height) - 2px)',
-    },
-
-    input: {
-      fontSize: 14,
-      lineHeight: '20px',
-      letterSpacing: 0.15,
-    },
+export const inputStyles: IInputStyles = {
+  inputWrapper: {
+    border: 'none',
+    height: 'calc(var(--control-height) - 2px)',
+  },
+
+  input: {
+    fontSize: 14,
+    lineHeight: '20px',
+    letterSpacing: 0.15,
   },
 };
 
-export type PhoneInputCountryListStyles = ComponentStyles<typeof styles>;
+export type IPhoneInputCountryListStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakInput: IInputStyles }
+>;

package/src/components/PhoneInput/components/PhoneInputCountryList/PhoneInputCountryList.tsx

@@ -6,7 +6,7 @@ import {
   findCountryIndexByCode,
   sortCountriesByLocale,
 } from '../../../../helpers';
-import { useTheme, useTweakStyles } from '../../../../hooks';
+import { useTweakStyles } from '../../../../hooks';
 import { ICommonProps } from '../../../../types';
 import { Flag } from '../../../Flag';
 import { Icon } from '../../../Icon';
@@ -14,10 +14,14 @@ import { Input } from '../../../Input';
 import { ScrollIntoViewIfNeeded } from '../../../ScrollIntoViewIfNeeded';
 import { phoneInfo } from '../../phone-info';
 import { IPhoneInfo } from '../../types';
-import { PhoneInputCountryListStyles, styles } from './PhoneInputCountryList.styles';
+import {
+  useStyles,
+  IPhoneInputCountryListStyles,
+  inputStyles,
+} from './PhoneInputCountryList.styles';
 
-export interface IPhoneInputCountryListProps extends ICommonProps {
-  tweakStyles?: PhoneInputCountryListStyles;
+export interface IPhoneInputCountryListProps
+  extends Pick<ICommonProps<IPhoneInputCountryListStyles>, 'tweakStyles'> {
   selectedCountryCode?: string;
   locale: string;
   placeholder: string;
@@ -35,8 +39,14 @@ export const PhoneInputCountryList: FC<IPhoneInputCountryListProps> = ({
   onChange,
   tweakStyles,
 }) => {
-  const { classes, componentStyles } = useTheme('PhoneInputCountryList', styles, tweakStyles);
-  const tweakInputStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakInput');
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakInputStyles = useTweakStyles({
+    innerStyles: inputStyles,
+    tweakStyles,
+    className: 'tweakInput',
+    currentComponentName: 'PhoneInputCountryList',
+  });
 
   const sortedCountries = useMemo(
     () => sortCountriesByLocale(phoneInfo, locale),

package/src/components/PhoneInput/components/PhoneInputCountryList/index.ts

@@ -1,2 +1,2 @@
 export * from './PhoneInputCountryList';
-export type { PhoneInputCountryListStyles } from './PhoneInputCountryList.styles';
+export type { IPhoneInputCountryListStyles } from './PhoneInputCountryList.styles';

package/src/components/PhoneInput/index.ts

@@ -1,5 +1,5 @@
 export * from './PhoneInput';
 export { phoneInfo } from './phone-info';
 export * from './types';
-export type { PhoneInputStyles } from './PhoneInput.styles';
-export type { PhoneInputCountryListStyles } from './components';
+export type { IPhoneInputStyles } from './PhoneInput.styles';
+export type { IPhoneInputCountryListStyles } from './components';

package/src/components/RadioButton/RadioButton.styles.ts

@@ -1,6 +1,6 @@
-import { ComponentStyles } from '../../types';
+import { ITweakStyles, createThemedStyles } from '../../theme';
 
-export const styles = {
+export const useStyles = createThemedStyles('RadioButton', {
   input: {
     appearance: 'none',
     cursor: 'pointer',
@@ -32,6 +32,6 @@ export const styles = {
   },
 
   isInvalid: {},
-};
+});
 
-export type RadioButtonStyles = ComponentStyles<typeof styles>;
+export type IRadioButtonStyles = ITweakStyles<typeof useStyles>;

package/src/components/RadioButton/RadioButton.tsx

@@ -1,13 +1,11 @@
 import { ReactNode } from 'react';
 import clsx from 'clsx';
-import { isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { addDataTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
-import { useTheme } from '../../hooks';
 import { ICommonProps } from '../../types';
-import { RadioButtonStyles, styles } from './RadioButton.styles';
+import { useStyles, IRadioButtonStyles } from './RadioButton.styles';
 
-export interface IRadioButtonProps<Value extends string> extends ICommonProps {
-  tweakStyles?: RadioButtonStyles;
+export interface IRadioButtonProps<Value extends string> extends ICommonProps<IRadioButtonStyles> {
   children?: ReactNode;
   value: Value;
   groupName: string;
@@ -25,15 +23,17 @@ export function RadioButton<Value extends string>({
   isDisabled,
   isInvalid,
   data,
+  testId,
   tweakStyles,
   onChange,
 }: IRadioButtonProps<Value>): JSX.Element {
-  const { classes } = useTheme('RadioButton', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
 
   return (
     <label
       className={clsx(classes.label, isDisabled && classes.isDisabled)}
       htmlFor={`${groupName}--${value}`}
+      {...addDataTestId(testId)}
       {...addDataAttributes(data)}
     >
       <input

package/src/components/RadioButton/index.ts

@@ -1,2 +1,2 @@
 export * from './RadioButton';
-export type { RadioButtonStyles } from './RadioButton.styles';
+export type { IRadioButtonStyles } from './RadioButton.styles';

package/src/components/SearchInput/SearchInput.styles.ts

@@ -1,10 +1,10 @@
 import { rgba } from '../../helpers';
-import { colors } from '../../theme';
-import { ComponentStyles } from '../../types';
+import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+import { IInputStyles } from '../Input';
 
 const LEFT_PADDING = 44;
 
-export const styles = {
+export const useStyles = createThemedStyles('SearchInput', {
   root: {
     position: 'relative',
   },
@@ -19,32 +19,32 @@ export const styles = {
     zIndex: 2,
     color: colors.GREY_ACTIVE,
   },
+});
+
+export const inputStyles: IInputStyles = {
+  inputWrapper: {
+    height: 35,
+    borderColor: 'transparent',
+    backgroundColor: rgba(colors.BORDER_MAIN, 0.3),
+    borderRadius: 18,
+    paddingLeft: LEFT_PADDING,
+    transitionProperty: 'background-color, border-color',
+  },
+
+  focused: {
+    backgroundColor: colors.CLASSIC_WHITE,
+    borderColor: colors.BORDER_MAIN,
+  },
+
+  input: {
+    fontSize: 14,
+    paddingLeft: 0,
+  },
 
-  tweakInput: {
-    inputWrapper: {
-      height: 35,
-      borderColor: 'transparent',
-      backgroundColor: rgba(colors.BORDER_MAIN, 0.3),
-      borderRadius: 18,
-      paddingLeft: LEFT_PADDING,
-      transitionProperty: 'background-color, border-color',
-    },
-
-    focused: {
-      backgroundColor: colors.CLASSIC_WHITE,
-      borderColor: colors.BORDER_MAIN,
-    },
-
-    input: {
-      fontSize: 14,
-      paddingLeft: 0,
-    },
-
-    label: {
-      left: LEFT_PADDING,
-      fontSize: 14,
-    },
+  label: {
+    left: LEFT_PADDING,
+    fontSize: 14,
   },
 };
 
-export type SearchInputStyles = ComponentStyles<typeof styles>;
+export type ISearchInputStyles = ITweakStyles<typeof useStyles, { tweakInput: IInputStyles }>;

package/src/components/SearchInput/SearchInput.tsx

@@ -1,10 +1,11 @@
 import { FC } from 'react';
 import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
-import { useTheme, useTweakStyles } from '../../hooks';
+import { useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
 import { IInputProps, Input } from '../Input';
-import { SearchInputStyles, styles } from './SearchInput.styles';
+import { useStyles, inputStyles, ISearchInputStyles } from './SearchInput.styles';
 
 export type ISearchInputProps = Omit<
   IInputProps,
@@ -17,9 +18,8 @@ export type ISearchInputProps = Omit<
   | 'hasFloatingLabel'
   | 'border'
   | 'tweakStyles'
-> & {
-  tweakStyles?: SearchInputStyles;
-};
+> &
+  ICommonProps<ISearchInputStyles>;
 
 export const SearchInput: FC<ISearchInputProps> = ({
   isClearable = true,
@@ -28,9 +28,14 @@ export const SearchInput: FC<ISearchInputProps> = ({
   data,
   ...props
 }) => {
-  const { classes, componentStyles } = useTheme('SearchInput', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
 
-  const tweakInputStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakInput');
+  const tweakInputStyles = useTweakStyles({
+    innerStyles: inputStyles,
+    tweakStyles,
+    className: 'tweakInput',
+    currentComponentName: 'SearchInput',
+  });
 
   return (
     <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>

package/src/components/SearchInput/index.ts

@@ -1,2 +1,2 @@
 export * from './SearchInput';
-export type { SearchInputStyles } from './SearchInput.styles';
+export type { ISearchInputStyles } from './SearchInput.styles';

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

@@ -1,6 +1,10 @@
-import { ComponentStyles } from '../../types';
+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 styles = {
+export const useStyles = createThemedStyles('Select', {
   root: {
     width: '100%',
     position: 'relative',
@@ -62,35 +66,79 @@ export const styles = {
     width: 16,
     height: 16,
   },
+});
 
-  tweakInput: {
-    input: {
-      paddingRight: 32,
-    },
+const baseInputStyles: IInputStyles = {
+  input: {
+    paddingRight: 32,
+  },
 
-    disabled: {
-      '& $input': {
-        cursor: 'default',
-      },
+  disabled: {
+    '& $input': {
+      cursor: 'default',
     },
+  },
 
-    controls: {
-      paddingRight: 32,
-    },
+  controls: {
+    paddingRight: 32,
+  },
+};
+
+const readonlyInputBaseStyles: IInputStyles = {
+  inputIcon: {
+    width: 'auto',
   },
+};
 
-  tweakSelectList: {},
+const multiSelectInputBaseStyles: IInputStyles = {
+  inputIcon: {
+    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;
+};
 
-  tweakSearchInput: {
-    tweakInput: {
-      inputWrapper: {
-        height: 48,
-        borderRadius: 0,
-        border: 'none',
-        backgroundColor: 'transparent',
-      },
+export const searchInputStyles: ISearchInputStyles = {
+  tweakInput: {
+    inputWrapper: {
+      height: 48,
+      borderRadius: 0,
+      border: 'none',
+      backgroundColor: 'transparent',
     },
   },
 };
 
-export type SelectStyles = ComponentStyles<typeof styles>;
+export type ISelectStyles = ITweakStyles<
+  typeof useStyles,
+  {
+    tweakInput: IInputStyles;
+    tweakSelectList: ISelectListStyles;
+    tweakSearchInput: ISearchInputStyles;
+  }
+>;

package/src/components/Select/Select.tsx

@@ -13,7 +13,6 @@ import {
 import { Portal } from 'react-overlays';
 import clsx from 'clsx';
 import { Styles } from 'jss';
-import merge from 'lodash-es/merge';
 import { debounce } from 'ts-debounce';
 import {
   getTestId,
@@ -23,14 +22,8 @@ import {
 } from '@true-engineering/true-react-platform-helpers';
 import { hasExactParent } from '../../helpers';
 import { renderIcon } from '../../helpers/snippets';
-import {
-  useIsMounted,
-  useTheme,
-  useOnClickOutsideWithRef,
-  useDropdown,
-  useTweakStyles,
-} from '../../hooks';
-import { IDropdownWithPopperOptions, IIcon } from '../../types';
+import { useIsMounted, useOnClickOutsideWithRef, useDropdown, useTweakStyles } from '../../hooks';
+import { ICommonProps, IDropdownWithPopperOptions, IIcon } from '../../types';
 import { IInputProps, Input } from '../Input';
 import { ISearchInputProps, SearchInput } from '../SearchInput';
 import { SelectList } from './components';
@@ -43,11 +36,11 @@ import {
   isMultiSelectValue,
 } from './helpers';
 import { IMultipleSelectValue } from './types';
-import { SelectStyles, styles } from './Select.styles';
+import { useStyles, ISelectStyles, searchInputStyles, getInputStyles } from './Select.styles';
 
 export interface ISelectProps<Value>
-  extends Omit<IInputProps, 'value' | 'onChange' | 'onBlur' | 'type'> {
-  tweakStyles?: SelectStyles;
+  extends Omit<IInputProps, 'value' | 'onChange' | 'onBlur' | 'type' | 'tweakStyles'>,
+    ICommonProps<ISelectStyles> {
   defaultOptionLabel?: string;
   allOptionsLabel?: string;
   noMatchesLabel?: string;
@@ -122,7 +115,33 @@ export function Select<Value>(
     optionsFilter,
     ...inputProps
   } = props;
-  const { classes, componentStyles } = useTheme('Select', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
+
+  const shouldRenderSearchInputInList = searchInput?.shouldRenderInList === true;
+  const hasSearchInputInList = optionsMode !== 'normal' && shouldRenderSearchInputInList;
+  const isMultiSelect = isMultiSelectValue(props, value);
+  const hasReadonlyInput = isReadonly || optionsMode === 'normal' || shouldRenderSearchInputInList;
+
+  const tweakInputStyles = useTweakStyles({
+    innerStyles: getInputStyles({ hasReadonlyInput, isMultiSelect }),
+    tweakStyles,
+    className: 'tweakInput',
+    currentComponentName: 'Select',
+  });
+
+  const tweakSearchInputStyles = useTweakStyles({
+    innerStyles: searchInputStyles,
+    tweakStyles,
+    className: 'tweakSearchInput',
+    currentComponentName: 'Select',
+  });
+
+  const tweakSelectListStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakSelectList',
+    currentComponentName: 'Select',
+  });
+
   const isMounted = useIsMounted();
   const [isListOpen, setIsListOpen] = useState(false);
   const [areOptionsLoading, setAreOptionsLoading] = useState(false);
@@ -138,10 +157,6 @@ export function Select<Value>(
   const list = useRef<HTMLDivElement>(null);
   const input = useRef<HTMLInputElement>(null); // TODO ref снаружи?
 
-  const shouldRenderSearchInputInList = searchInput?.shouldRenderInList === true;
-  const hasSearchInputInList = optionsMode !== 'normal' && shouldRenderSearchInputInList;
-
-  const isMultiSelect = isMultiSelectValue(props, value);
   const strValue = isMultiSelect ? value?.[0] : value;
   const shouldShowAllOption =
     isMultiSelect && isStringNotEmpty(allOptionsLabel) && searchValue === '';
@@ -420,22 +435,6 @@ export function Select<Value>(
     // Последняя проверка на случай, если мы че то ищем в опциях
     (optionsMode === 'normal' || hasEnoughSymbolsToSearch);
 
-  const hasReadonlyInput = isReadonly || optionsMode === 'normal' || shouldRenderSearchInputInList;
-
-  const tweakInputStyles = useMemo(
-    () =>
-      merge(
-        {},
-        componentStyles.tweakInput,
-        { ...(hasReadonlyInput && { input: { cursor: 'pointer' } }) },
-        { ...(isMultiSelect && { inputIcon: { width: 'auto' } }) },
-        tweakStyles?.tweakInput,
-      ) as Styles,
-    [tweakStyles?.tweakInput, hasReadonlyInput],
-  );
-
-  const tweakSearchInputStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakSearchInput');
-
   // Эти значения ставятся в false по дефолту также в useDropdown
   const {
     shouldUsePopper = false,
@@ -504,7 +503,7 @@ export function Select<Value>(
           activeValue={value}
           isLoading={inputProps.isLoading}
           loadingLabel={loadingLabel}
-          tweakStyles={tweakStyles?.tweakSelectList as Styles}
+          tweakStyles={tweakSelectListStyles}
           testId={getTestId(testId, 'list')}
           // скролл не работает с включеным поппером
           shouldScrollToList={shouldScrollToList && !shouldUsePopper && !shouldHideOnScroll}

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

@@ -1,11 +1,10 @@
-import { colors, dimensions, helpers } from '../../../../theme';
-import { ComponentStyles } from '../../../../types';
+import { colors, createThemedStyles, dimensions, helpers, ITweakStyles } from '../../../../theme';
 
 export const ROW_HEIGHT = 40;
 export const CONTAINER_PADDING = 10;
 export const CELL_PADDING = [10, 20];
 
-export const styles = {
+export const useStyles = createThemedStyles('SelectList', {
   root: {
     borderRadius: dimensions.BORDER_RADIUS_SMALL,
     boxShadow: '0 13px 74px -27px rgba(0, 0, 0, 0.11)',
@@ -67,6 +66,6 @@ export const styles = {
   },
 
   defaultCell: {},
-};
+});
 
-export type SelectListStyles = ComponentStyles<typeof styles>;
+export type ISelectListStyles = ITweakStyles<typeof useStyles>;