@fibery/ui-kit 1.0.3 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "main": "index.ts",
   "private": false,
   "files": [
@@ -50,7 +50,7 @@
     "react-popper": "2.2.5",
     "react-select": "5.3.2",
     "react-select-country-list": "2.2.1",
-    "react-windowed-select": "3.1.2",
+    "react-windowed-select": "5.0.0",
     "screenfull": "6.0.1"
   },
   "peerDependencies": {
@@ -65,6 +65,7 @@
     "@types/chroma-js": "2.1.3",
     "@types/color-hash": "1.0.2",
     "@types/emoji-mart": "3.0.8",
+    "csstype": "3.0.8",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
     "fs-extra": "10.0.0",

package/src/Select/index.tsx

@@ -46,7 +46,7 @@ export function combineStyles<
   Option,
   IsMulti extends boolean = boolean,
   Group extends GroupBase<Option> = GroupBase<Option>
->(stylesArray: StylesConfig<Option, IsMulti, Group>[]) {
+>(stylesArray: StylesConfig<Option, IsMulti, Group>[]): StylesConfig<Option, IsMulti, Group> {
   return stylesArray.reduce<StylesConfig<Option, IsMulti, Group>>((acc, style) => {
     Object.keys(style).forEach((key) => {
       /* eslint-disable @typescript-eslint/ban-ts-comment */
@@ -108,8 +108,6 @@ export const Select = forwardRef(function Select<
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   forwardedRef: any
 ) {
-  const theme = useTheme();
-  const combineThemes = useCallback((providedTheme) => ({...providedTheme, ...theme}), [theme]);
   const handleKeyDown = useCallback(
     (e) => {
       switch (e.key) {
@@ -143,19 +141,17 @@ export const Select = forwardRef(function Select<
     [onKeyDown, rest.menuIsOpen]
   );
 
-  const SelectComponent = virtualized ? WindowedSelect : BaseSelect;
+  const SelectComponent = (virtualized ? WindowedSelect : BaseSelect) as unknown as typeof BaseSelect;
 
   return (
     <SelectComponent
       ref={forwardedRef}
       menuPortalTarget={menuPortalTarget}
       menuPlacement={"auto"}
-      style={createInlineTheme(theme)}
       styles={combineStyles<Option, IsMulti, Group>([
         componentsStyles as unknown as StylesConfig<Option, IsMulti, Group>,
         styles,
       ])}
-      theme={combineThemes}
       isMulti={isCollectionMode}
       backspaceRemovesValue={isCollectionMode}
       tabSelectsValue={false}
@@ -185,8 +181,6 @@ export function CreatableSelect<
   IsMulti extends boolean = boolean,
   Group extends GroupBase<Option> = GroupBase<Option>
 >({components, isCollectionMode, menuPortalTarget, styles = {}, ...rest}: SelectProps<Option, IsMulti, Group>) {
-  const theme = useTheme();
-  const combineThemes = useCallback((providedTheme) => ({...providedTheme, ...theme}), [theme]);
   return (
     <BaseCreatableSelect
       menuPortalTarget={menuPortalTarget}
@@ -195,7 +189,6 @@ export function CreatableSelect<
         componentsStyles as unknown as StylesConfig<Option, IsMulti, Group>,
         styles,
       ])}
-      theme={combineThemes}
       isMulti={isCollectionMode}
       backspaceRemovesValue={isCollectionMode}
       tabSelectsValue={false}

package/src/Select/styles.ts

@@ -1,4 +1,5 @@
 import {css} from "@linaria/core";
+import {Property} from "csstype";
 import type {StylesConfig, CSSObjectWithLabel, ControlProps} from "react-select";
 import {inputOverrides} from "../antd/styles";
 import {border, layout, space, textStyles, themeVars, transition} from "../designSystem";
@@ -27,20 +28,21 @@ function createControlStyle({
     childDivStyle.flexWrap = "nowrap";
   }
 
-  return (provided, state) => ({
-    display: "flex",
-    flexWrap: isSingleLine ? "nowrap" : "wrap",
-    justifyContent: "space-between",
-    width: "100%",
-    ...inputOverrides.main,
-    minHeight: layout.inputHeight,
-    ...(state.isFocused && inputOverrides.focus),
-    ...(state.isDisabled && inputOverrides.disabled),
-    ":hover": !state.isFocused && !state.isDisabled ? inputOverrides.hover : {},
-    paddingLeft: space.l,
-    paddingRight: space.l,
-    "& > div": childDivStyle,
-  });
+  return (provided, state) =>
+    ({
+      display: "flex",
+      flexWrap: isSingleLine ? "nowrap" : "wrap",
+      justifyContent: "space-between",
+      width: "100%",
+      ...inputOverrides.main,
+      minHeight: layout.inputHeight,
+      ...(state.isFocused && inputOverrides.focus),
+      ...(state.isDisabled && inputOverrides.disabled),
+      ":hover": !state.isFocused && !state.isDisabled ? inputOverrides.hover : {},
+      paddingLeft: space.l,
+      paddingRight: space.l,
+      "& > div": childDivStyle,
+    } as unknown as CSSObjectWithLabel);
 }
 
 export const componentsStyles: StylesConfig = {
@@ -122,7 +124,7 @@ export const componentsStyles: StylesConfig = {
     ...provided,
     zIndex: 1050,
     backgroundColor: themeVars.actionMenuInnerBg,
-    boxShadow: themeVars.actionMenuShadow,
+    boxShadow: themeVars.actionMenuShadow as unknown as Property.BoxShadow,
     borderRadius: border.radius6,
   }),
   container: (provided, state) => ({