@true-engineering/true-react-common-ui-kit 1.12.1 → 2.0.1

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

@@ -1,96 +1,96 @@
-import { ComponentStyles } from '../../types';
-
-export const styles = {
-  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,
-  },
-
-  tweakInput: {
-    input: {
-      paddingRight: 32,
-    },
-
-    disabled: {
-      '& $input': {
-        cursor: 'default',
-      },
-    },
-
-    controls: {
-      paddingRight: 32,
-    },
-  },
-
-  tweakSelectList: {},
-
-  tweakSearchInput: {
-    tweakInput: {
-      inputWrapper: {
-        height: 48,
-        borderRadius: 0,
-        border: 'none',
-        backgroundColor: 'transparent',
-      },
-    },
-  },
-};
-
-export type SelectStyles = ComponentStyles<typeof styles>;
+import { ComponentStyles } from '../../types';
+
+export const styles = {
+  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,
+  },
+
+  tweakInput: {
+    input: {
+      paddingRight: 32,
+    },
+
+    disabled: {
+      '& $input': {
+        cursor: 'default',
+      },
+    },
+
+    controls: {
+      paddingRight: 32,
+    },
+  },
+
+  tweakSelectList: {},
+
+  tweakSearchInput: {
+    tweakInput: {
+      inputWrapper: {
+        height: 48,
+        borderRadius: 0,
+        border: 'none',
+        backgroundColor: 'transparent',
+      },
+    },
+  },
+};
+
+export type SelectStyles = ComponentStyles<typeof styles>;

package/src/components/Select/Select.tsx

@@ -500,13 +500,17 @@ export function Select<Value>(
   });
 
   useEffect(() => {
-    const val = isMultiSelect ? value?.[0] : value;
     setFocusedListCellIndex(
       optionsIndexesForNavigation.find(
-        (index) => filteredOptions[index] === val,
+        (index) =>
+          isNotEmpty(strValue) &&
+          isNotEmpty(filteredOptions[index]) &&
+          convertToId(filteredOptions[index]) === convertToId(strValue),
       ) ?? optionsIndexesForNavigation[0],
     );
+  }, [strValue, filteredOptions, optionsIndexesForNavigation, convertToId]);
 
+  useEffect(() => {
     if (isOpen) {
       onOpen?.();
     }

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

@@ -1,72 +1,72 @@
-import { colors, dimensions, helpers } from '../../../theme';
-import { ComponentStyles } from '../../../types';
-
-export const ROW_HEIGHT = 40;
-export const CONTAINER_PADDING = 10;
-export const CELL_PADDING = [10, 20];
-
-export const styles = {
-  root: {
-    borderRadius: dimensions.BORDER_RADIUS_SMALL,
-    boxShadow: '0 13px 74px -27px rgba(0, 0, 0, 0.11)',
-    boxSizing: 'border-box',
-    padding: [CONTAINER_PADDING, 0],
-    fontSize: 16,
-    overflow: 'hidden',
-  },
-
-  withListHeader: {
-    paddingTop: 0,
-  },
-
-  listHeader: {
-    '& + $list': {
-      borderTop: [1, 'solid', colors.BORDER_LIGHT],
-    },
-  },
-
-  list: {
-    height: '100%',
-    maxHeight: ROW_HEIGHT * 6,
-    cursor: 'pointer',
-    backgroundColor: colors.CLASSIC_WHITE,
-
-    ...helpers.withScrollBar,
-  },
-
-  cell: {
-    display: 'flex',
-    cursor: 'pointer',
-    minHeight: ROW_HEIGHT,
-    width: 'auto',
-    padding: CELL_PADDING,
-    alignItems: 'center',
-    boxSizing: 'border-box',
-    fontSize: 14,
-  },
-
-  cellWithCheckbox: {
-    padding: 0,
-  },
-
-  noMatchesLabel: {
-    pointerEvents: 'none',
-  },
-
-  focused: {},
-
-  active: {},
-
-  disabled: {
-    cursor: 'default',
-  },
-
-  loading: {
-    cursor: 'default',
-    pointerEvents: 'none',
-  },
-
-  defaultCell: {},
-};
-
-export type SelectListStyles = ComponentStyles<typeof styles>;
+import { colors, dimensions, helpers } from '../../../theme';
+import { ComponentStyles } from '../../../types';
+
+export const ROW_HEIGHT = 40;
+export const CONTAINER_PADDING = 10;
+export const CELL_PADDING = [10, 20];
+
+export const styles = {
+  root: {
+    borderRadius: dimensions.BORDER_RADIUS_SMALL,
+    boxShadow: '0 13px 74px -27px rgba(0, 0, 0, 0.11)',
+    boxSizing: 'border-box',
+    padding: [CONTAINER_PADDING, 0],
+    fontSize: 16,
+    overflow: 'hidden',
+  },
+
+  withListHeader: {
+    paddingTop: 0,
+  },
+
+  listHeader: {
+    '& + $list': {
+      borderTop: [1, 'solid', colors.BORDER_LIGHT],
+    },
+  },
+
+  list: {
+    height: '100%',
+    maxHeight: ROW_HEIGHT * 6,
+    cursor: 'pointer',
+    backgroundColor: colors.CLASSIC_WHITE,
+
+    ...helpers.withScrollBar,
+  },
+
+  cell: {
+    display: 'flex',
+    cursor: 'pointer',
+    minHeight: ROW_HEIGHT,
+    width: 'auto',
+    padding: CELL_PADDING,
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    fontSize: 14,
+  },
+
+  cellWithCheckbox: {
+    padding: 0,
+  },
+
+  noMatchesLabel: {
+    pointerEvents: 'none',
+  },
+
+  focused: {},
+
+  active: {},
+
+  disabled: {
+    cursor: 'default',
+  },
+
+  loading: {
+    cursor: 'default',
+    pointerEvents: 'none',
+  },
+
+  defaultCell: {},
+};
+
+export type SelectListStyles = ComponentStyles<typeof styles>;