@fibery/ui-kit 1.0.1 → 1.0.4

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "main": "index.ts",
   "private": false,
   "files": [
+    "src/antd/styles.ts",
     "src/Button.d.ts",
     "src/Button.js",
     "src/designSystem.ts",
     "src/create-inline-theme.ts",
-    "src/FormFieldLoader.js",
+    "src/form-field-loader.tsx",
     "src/ThemeProvider.tsx",
     "src/Item.tsx",
     "src/Loaders.d.ts",
@@ -47,9 +48,9 @@
     "react-color": "2.13.8",
     "react-day-picker": "7.4.8",
     "react-popper": "2.2.5",
-    "react-select": "3.0.8",
+    "react-select": "5.3.2",
     "react-select-country-list": "2.2.1",
-    "react-windowed-select": "2.0.5",
+    "react-windowed-select": "5.0.0",
     "screenfull": "6.0.1"
   },
   "peerDependencies": {
@@ -64,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/components.tsx

@@ -0,0 +1,87 @@
+import {useCallback, ReactNode} from "react";
+import {css} from "@linaria/core";
+import {components} from "react-windowed-select";
+import RemoveIcon from "../icons/react/Remove";
+import {OptionProps, DropdownIndicatorProps, ClearIndicatorProps, MultiValueRemoveProps, GroupBase} from "react-select";
+import {Button} from "../Button";
+import {themeVars, space} from "../designSystem";
+import ArrowBottom from "../icons/react/ArrowBottom";
+import {dropdownIndicatorSize, expanderStyle} from "./styles";
+
+export const Option = <
+  TOption,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<TOption> = GroupBase<TOption>
+>({
+  children,
+  ...props
+}: OptionProps<TOption, IsMulti, Group>) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const {onMouseMove, onMouseOver, ...rest} = props.innerProps;
+  const newProps = Object.assign(props, {innerProps: rest});
+  return <components.Option {...newProps}>{children}</components.Option>;
+};
+
+export function DropdownIndicator<
+  TOption,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<TOption> = GroupBase<TOption>
+>(props: DropdownIndicatorProps<TOption, IsMulti, Group>) {
+  return (
+    <div
+      className={expanderStyle}
+      style={{
+        transform: props.selectProps.menuIsOpen ? "rotate(180deg)" : "",
+      }}
+    >
+      <ArrowBottom iconSize={dropdownIndicatorSize} color={themeVars.disabledTextColor} />
+    </div>
+  );
+}
+
+export function ClearIndicator<
+  TOption,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<TOption> = GroupBase<TOption>
+>({
+  innerProps,
+  selectProps,
+}: ClearIndicatorProps<TOption, IsMulti, Group> | MultiValueRemoveProps<TOption, IsMulti, Group>) {
+  const onMouseDown = innerProps.onMouseDown;
+  const wrappedOnMouseDown = useCallback(
+    (e) => {
+      onMouseDown?.(e);
+      // This prevents false positive triggering in rc-trigger
+      e.nativeEvent.stopImmediatePropagation();
+    },
+    [onMouseDown]
+  );
+  return (
+    <div {...innerProps}>
+      <Button
+        borderless
+        Icon={RemoveIcon}
+        disabled={selectProps.isDisabled}
+        size={":button-size/super-small"}
+        onMouseDown={wrappedOnMouseDown}
+      />
+    </div>
+  );
+}
+
+export const NoOptionsMessage = ({children}: {children: ReactNode}) => {
+  return (
+    <div
+      className={css`
+        ${{
+          paddingLeft: space.l + 2,
+          paddingRight: space.l + 2,
+          paddingTop: space.m,
+          paddingBottom: space.m,
+        }}
+      `}
+    >
+      {children}
+    </div>
+  );
+};

package/src/Select/index.tsx

@@ -0,0 +1,210 @@
+import cn from "classnames";
+import {useCallback, forwardRef} from "react";
+import BaseSelect, {
+  GroupHeadingProps,
+  MenuProps,
+  StylesConfig,
+  Props as BaseSelectProps,
+  GroupBase,
+  OptionsOrGroups,
+  OptionProps,
+  SingleValueProps,
+  MultiValueProps,
+} from "react-select";
+import BaseCreatableSelect from "react-select/creatable";
+import WindowedSelect, {components, WindowedMenuList} from "react-windowed-select";
+import {createInlineTheme} from "../designSystem";
+import {useTheme} from "../ThemeProvider";
+import {ClearIndicator, DropdownIndicator, NoOptionsMessage, Option as OptionComponent} from "./components";
+import {componentsStyles, singleLineComponentsStyle} from "./styles";
+
+export type {OptionsOrGroups, GroupBase, StylesConfig, OptionProps, SingleValueProps, MultiValueProps};
+
+function GroupHeading<
+  Option = unknown,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>(props: GroupHeadingProps<Option, IsMulti, Group>) {
+  if (!props.children) {
+    return null;
+  }
+  return <components.GroupHeading {...props} />;
+}
+
+function Menu<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(
+  props: MenuProps<Option, IsMulti, Group>
+) {
+  const theme = useTheme();
+  const {innerProps, className} = props;
+  const overridedInnerProps = {...innerProps, style: {...innerProps.style, ...createInlineTheme(theme)}};
+  return <components.Menu {...props} innerProps={overridedInnerProps} className={cn(className, "react-select-menu")} />;
+}
+
+export {components};
+
+export function combineStyles<
+  Option,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>(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 */
+      // @ts-ignore
+      if (acc[key]) {
+        // @ts-ignore
+        const temp = acc[key];
+        // @ts-ignore
+        acc[key] = (provided, state) => style[key](temp(provided, state), state);
+      } else {
+        // @ts-ignore
+        acc[key] = (provided, state) => style[key](provided, state);
+      }
+      /* eslint-enable @typescript-eslint/ban-ts-comment */
+    });
+    return acc;
+  }, {});
+}
+
+export type SelectProps<
+  Option = unknown,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+> = Omit<Omit<Omit<BaseSelectProps<Option, IsMulti, Group>, "isMulti">, "backspaceRemovesValue">, "isDisabled"> & {
+  virtualized?: boolean;
+  isCollectionMode?: IsMulti;
+  disabled?: boolean;
+};
+export function SingleRowSelect<
+  Option = unknown,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>({styles = {}, ...rest}: SelectProps<Option, IsMulti, Group>) {
+  return (
+    <Select<Option, IsMulti, Group>
+      {...rest}
+      styles={combineStyles<Option, IsMulti, Group>([
+        singleLineComponentsStyle as unknown as StylesConfig<Option, IsMulti, Group>,
+        styles,
+      ])}
+    />
+  );
+}
+
+export const Select = forwardRef(function Select<
+  Option = unknown,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>(
+  {
+    components,
+    isCollectionMode,
+    menuPortalTarget,
+    onKeyDown,
+    styles = {},
+    virtualized = true,
+    ...rest
+  }: SelectProps<Option, IsMulti, Group>,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  forwardedRef: any
+) {
+  const handleKeyDown = useCallback(
+    (e) => {
+      switch (e.key) {
+        case "Escape":
+          if (rest.menuIsOpen) {
+            e.stopPropagation();
+          }
+          break;
+        case "Home":
+          e.preventDefault();
+          if (e.shiftKey) {
+            e.target.selectionStart = 0;
+          } else {
+            e.target.setSelectionRange(0, 0);
+          }
+          break;
+        case "End": {
+          e.preventDefault();
+          const len = e.target.value.length;
+          if (e.shiftKey) {
+            e.target.selectionEnd = len;
+          } else {
+            e.target.setSelectionRange(len, len);
+          }
+          break;
+        }
+        default:
+      }
+      onKeyDown && onKeyDown(e);
+    },
+    [onKeyDown, rest.menuIsOpen]
+  );
+
+  const SelectComponent = (virtualized ? WindowedSelect : BaseSelect) as unknown as typeof BaseSelect;
+
+  return (
+    <SelectComponent
+      ref={forwardedRef}
+      menuPortalTarget={menuPortalTarget}
+      menuPlacement={"auto"}
+      styles={combineStyles<Option, IsMulti, Group>([
+        componentsStyles as unknown as StylesConfig<Option, IsMulti, Group>,
+        styles,
+      ])}
+      isMulti={isCollectionMode}
+      backspaceRemovesValue={isCollectionMode}
+      tabSelectsValue={false}
+      components={{
+        Menu,
+        DropdownIndicator,
+        ClearIndicator,
+        Option: OptionComponent,
+        MultiValueRemove: ClearIndicator,
+        NoOptionsMessage,
+        GroupHeading,
+        ...components,
+      }}
+      {...rest}
+      onKeyDown={handleKeyDown}
+      isDisabled={rest.disabled}
+    />
+  );
+  // eslint-disable-next-line no-use-before-define
+}) as <Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(
+  // eslint-disable-next-line no-use-before-define,@typescript-eslint/no-explicit-any
+  props: SelectProps<Option, IsMulti, Group> & {ref?: any}
+) => JSX.Element;
+
+export function CreatableSelect<
+  Option = unknown,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>({components, isCollectionMode, menuPortalTarget, styles = {}, ...rest}: SelectProps<Option, IsMulti, Group>) {
+  return (
+    <BaseCreatableSelect
+      menuPortalTarget={menuPortalTarget}
+      menuPlacement={"auto"}
+      styles={combineStyles<Option, IsMulti, Group>([
+        componentsStyles as unknown as StylesConfig<Option, IsMulti, Group>,
+        styles,
+      ])}
+      isMulti={isCollectionMode}
+      backspaceRemovesValue={isCollectionMode}
+      tabSelectsValue={false}
+      components={{
+        Menu,
+        MenuList: WindowedMenuList,
+        DropdownIndicator,
+        ClearIndicator,
+        Option: OptionComponent,
+        MultiValueRemove: ClearIndicator,
+        NoOptionsMessage,
+        GroupHeading,
+        ...components,
+      }}
+      {...rest}
+      isDisabled={rest.disabled}
+    />
+  );
+}

package/src/Select/select-loader.tsx

@@ -1,4 +1,4 @@
-import {FormFieldLoader} from "../FormFieldLoader";
+import {FormFieldLoader} from "../form-field-loader";
 import {LoadingSausageList} from "../loading-sausage";
 
 export const SelectLoader = () => (

package/src/Select/{styles.js → styles.ts}

@@ -1,4 +1,6 @@
 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";
 
@@ -12,8 +14,12 @@ export const expanderStyle = css`
   }}
 `;
 
-function createControlStyle({isSingleLine}) {
-  const childDivStyle = {
+function createControlStyle({
+  isSingleLine,
+}: {
+  isSingleLine: boolean;
+}): (base: CSSObjectWithLabel, props: ControlProps) => CSSObjectWithLabel {
+  const childDivStyle: CSSObjectWithLabel = {
     padding: 0,
     overflow: "visible",
   };
@@ -22,23 +28,24 @@ function createControlStyle({isSingleLine}) {
     childDivStyle.flexWrap = "nowrap";
   }
 
-  return (provided, state) => ({
-    display: "flex",
-    flexWrap: isSingleLine ? "nowrap" : "wrap",
-    justifyContent: "space-between",
-    width: "100%",
-    minHeight: layout.inputHeight,
-    ...inputOverrides.main,
-    ...(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 = {
+export const componentsStyles: StylesConfig = {
   option: (provided, state) => {
     const disabledStyles = {
       cursor: "not-allowed",
@@ -117,7 +124,7 @@ export const componentsStyles = {
     ...provided,
     zIndex: 1050,
     backgroundColor: themeVars.actionMenuInnerBg,
-    boxShadow: themeVars.actionMenuShadow,
+    boxShadow: themeVars.actionMenuShadow as unknown as Property.BoxShadow,
     borderRadius: border.radius6,
   }),
   container: (provided, state) => ({
@@ -128,6 +135,6 @@ export const componentsStyles = {
   indicatorSeparator: () => ({}),
 };
 
-export const singleLineComponentsStyle = {
+export const singleLineComponentsStyle: StylesConfig = {
   control: createControlStyle({isSingleLine: true}),
 };

package/src/antd/styles.ts

@@ -0,0 +1,119 @@
+import {css} from "@linaria/core";
+import {colors, layout, opacity, border, shadows, space, textStyles, themeVars, transition} from "../designSystem";
+
+export const inputOverrides = {
+  main: {
+    font: "inherit",
+    color: themeVars.textColor,
+    outline: "none",
+    backgroundColor: themeVars.inputBgColor,
+    borderRadius: border.radius6,
+    minHeight: layout.inputHeight,
+    paddingTop: 0,
+    paddingBottom: 0,
+    paddingLeft: space.l,
+    paddingRight: space.l,
+    border: 0,
+    borderColor: colors.transparent,
+    transition: `box-shadow ${transition}`,
+    boxShadow: themeVars.inputBorderColor,
+    letterSpacing: 0,
+    "::placeholder": {
+      color: themeVars.inputPlaceholderTextColor,
+      opacity: 1,
+    },
+  },
+  hover: {
+    boxShadow: `0 0 0 1px ${themeVars.opacity.regular} !important`,
+    transition: `box-shadow ${transition}`,
+  },
+  focus: {
+    boxShadow: `0 0 0 1px ${themeVars.opacity.light}, 0 0 0 3px ${themeVars.focus} !important`,
+    transition: `box-shadow ${transition}`,
+  },
+  disabled: {
+    color: themeVars.accentTextColor,
+    backgroundColor: themeVars.inputDisabledBgColor,
+    borderColor: colors.transparent,
+    boxShadow: `${themeVars.inputBorderColor} !important`,
+    transition: `box-shadow ${transition}`,
+    WebkitTextFillColor: "currentColor",
+    cursor: "default",
+    ":hover": {
+      boxShadow: `${themeVars.inputBorderColor}`,
+    },
+  },
+};
+
+export const inputStyles = css`
+  & .ant-input-prefix {
+    margin-right: -24px;
+    z-index: 1;
+    position: relative;
+  }
+  ${{
+    ...textStyles.regular,
+    "& .ant-input-group-addon": {
+      backgroundColor: colors.transparent,
+      border: "none",
+      padding: 0,
+      textAlign: "left",
+      boxShadow: shadows.border,
+      ":hover": inputOverrides.hover,
+      ":focus": inputOverrides.focus,
+    },
+    "& .ant-input-group": {borderSpacing: 1, ...textStyles.regular},
+    "& .ant-input": inputOverrides.main,
+    "& .ant-input[readonly].ant-input[readonly]": {...inputOverrides.disabled, cursor: "inherit"},
+    "& .ant-input:hover[readonly].ant-input:hover[readonly]": {...inputOverrides.disabled, cursor: "inherit"},
+    "& .ant-input-affix-wrapper:hover .ant-input[readonly]": {...inputOverrides.disabled, cursor: "inherit"},
+    "& .ant-input-affix-wrapper > input.ant-input": {
+      padding: "0 12px",
+      border: "inherit",
+      outline: "inherit",
+    },
+    "& .ant-input-affix-wrapper": {
+      font: "inherit",
+      padding: 0,
+      border: "none",
+      boxShadow: "none",
+      backgroundColor: colors.transparent,
+    },
+    "& .ant-input-affix-wrapper.ant-input-affix-wrapper-readonly": {
+      border: "none !important",
+      outline: "none !important",
+      boxShadow: "none !important",
+    },
+    "& .ant-input-affix-wrapper:hover .ant-input:not(.ant-input-disabled)": {
+      borderColor: "transparent",
+    },
+    "& .ant-cascader-picker:focus .ant-cascader-input, & .ant-cascader-picker:focus:hover .ant-cascader-input":
+      inputOverrides.focus,
+    "& .ant-select-auto-complete.ant-select": {
+      ...textStyles.regular,
+      "&  .ant-select-selection--single": {height: layout.inputHeight},
+      "& .ant-input": inputOverrides.main,
+      "& .ant-input.ant-input:hover": inputOverrides.hover,
+      "& .ant-input.ant-input:focus": inputOverrides.focus,
+      "& .ant-input.ant-input-disabled": inputOverrides.disabled,
+    },
+    "& textarea.ant-input": {
+      paddingTop: space.m,
+      paddingBottom: space.m,
+    },
+    "& .ant-select-disabled .ant-select-selection": {
+      backgroundColor: colors.transparent,
+    },
+    "&& input:hover:not(:focus):not(:disabled), && textarea:hover:not(:focus):not(:disabled), && .ant-input:hover:not(:focus):not(:disabled)":
+      inputOverrides.hover,
+    "&& input:focus, && textarea:focus, && input:active, && textarea:active": inputOverrides.focus,
+    "&& .ant-input-disabled, && .ant-input-disabled:hover, && .ant-input-disabled:focus, && .ant-input-disabled:active":
+      inputOverrides.disabled,
+    "&& input::placeholder, && textarea::placeholder": {
+      color: themeVars.textColor,
+      opacity: opacity.regular,
+    },
+    "& .ant-input-affix-wrapper .ant-input-prefix": {left: space.s},
+    "& .ant-input-affix-wrapper .ant-input:not(:first-child)": {paddingLeft: space.s + space.xl + space.m}, // Match TitlePreview spacing
+  }}
+`;

package/src/{FormFieldLoader.js → form-field-loader.tsx}

@@ -1,6 +1,5 @@
-import {PureComponent} from "react";
+import {PureComponent, ReactNode} from "react";
 import {css} from "@linaria/core";
-import * as PropTypes from "prop-types";
 import cn from "classnames";
 import {space, border, themeVars} from "./designSystem";
 
@@ -17,14 +16,9 @@ const loaderStyle = css`
   background-color: ${themeVars.inputBgColor};
 `;
 
-export class FormFieldLoader extends PureComponent {
+export class FormFieldLoader extends PureComponent<{additionClassname?: string; children: ReactNode}> {
   render() {
     const {additionClassname, children} = this.props;
     return <div className={cn(loaderStyle, additionClassname)}>{children}</div>;
   }
 }
-
-FormFieldLoader.propTypes = {
-  additionClassname: PropTypes.string,
-  children: PropTypes.node,
-};

package/src/Select/components.js

@@ -1,64 +0,0 @@
-import {useCallback} from "react";
-import {css} from "@linaria/core";
-import {components} from "react-windowed-select";
-import RemoveIcon from "../icons/react/Remove";
-import {Button} from "../Button";
-import {themeVars, space} from "../designSystem";
-import ArrowBottom from "../icons/react/ArrowBottom";
-import {dropdownIndicatorSize, expanderStyle} from "./styles";
-
-export const Option = ({children, ...props}) => {
-  const {onMouseMove, onMouseOver, ...rest} = props.innerProps;
-  const newProps = Object.assign(props, {innerProps: rest});
-  return <components.Option {...newProps}>{children}</components.Option>;
-};
-
-export const DropdownIndicator = (props) => (
-  <div
-    className={expanderStyle}
-    style={{
-      transform: props.selectProps.menuIsOpen ? "rotate(180deg)" : "",
-    }}
-  >
-    <ArrowBottom iconSize={dropdownIndicatorSize} color={themeVars.disabledTextColor} />
-  </div>
-);
-
-export const ClearIndicator = ({innerProps, selectProps}) => {
-  const onMouseDown = innerProps.onMouseDown;
-  const wrappedOnMouseDown = useCallback(
-    (e) => {
-      onMouseDown(e);
-      // This prevents false positive triggering in rc-trigger
-      e.nativeEvent.stopImmediatePropagation();
-    },
-    [onMouseDown]
-  );
-  return (
-    <Button
-      borderless
-      Icon={RemoveIcon}
-      disabled={selectProps.isDisabled}
-      size={":button-size/super-small"}
-      {...innerProps}
-      onMouseDown={wrappedOnMouseDown}
-    />
-  );
-};
-
-export const NoOptionsMessage = ({children}) => {
-  return (
-    <div
-      className={css`
-        ${{
-          paddingLeft: space.l + 2,
-          paddingRight: space.l + 2,
-          paddingTop: space.m,
-          paddingBottom: space.m,
-        }}
-      `}
-    >
-      {children}
-    </div>
-  );
-};

package/src/Select/index.d.ts

@@ -1,11 +0,0 @@
-import {FunctionComponent, ForwardRefRenderFunction} from "react";
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const Select: ForwardRefRenderFunction<{focus: () => void}, any>;
-export const CreatableSelect: FunctionComponent<any>;
-export const components: {
-  GroupHeading: FunctionComponent<any>;
-  Option: FunctionComponent<any>;
-  SingleValue: FunctionComponent<any>;
-  MultiValue: FunctionComponent<any>;
-};
-export const combineStyles: (...args: any[]) => any;

package/src/Select/index.js

@@ -1,140 +0,0 @@
-import cn from "classnames";
-import {useCallback, forwardRef} from "react";
-import BaseSelect from "react-select";
-import BaseCreatableSelect from "react-select/creatable";
-import WindowedSelect, {components, WindowedMenuList} from "react-windowed-select";
-import {createInlineTheme} from "../designSystem";
-import {useTheme} from "../ThemeProvider";
-import {ClearIndicator, DropdownIndicator, NoOptionsMessage, Option} from "./components";
-import {componentsStyles, singleLineComponentsStyle} from "./styles";
-
-const GroupHeading = (props) => {
-  if (!props.children) {
-    return null;
-  }
-  return <components.GroupHeading {...props} />;
-};
-
-function Menu(props) {
-  const theme = useTheme();
-  const {innerProps, className} = props;
-  const overridedInnerProps = {...innerProps, style: {...innerProps.style, ...createInlineTheme(theme)}};
-  return <components.Menu {...props} innerProps={overridedInnerProps} className={cn(className, "react-select-menu")} />;
-}
-
-export {components};
-
-export const combineStyles = (stylesArray) => {
-  return stylesArray.reduce((acc, style) => {
-    Object.keys(style).forEach((key) => {
-      if (acc[key]) {
-        const temp = acc[key];
-        acc[key] = (provided, state) => style[key](temp(provided, state), state);
-      } else {
-        acc[key] = (provided, state) => style[key](provided, state);
-      }
-    });
-    return acc;
-  }, {});
-};
-
-export function SingleRowSelect({styles = {}, ...rest}) {
-  return <Select {...rest} styles={combineStyles([singleLineComponentsStyle, styles])} />;
-}
-
-export const Select = forwardRef(function Select(
-  {components, isCollectionMode, menuPortalTarget, onKeyDown, styles = {}, virtualized = true, ...rest},
-  forwardedRef
-) {
-  const theme = useTheme();
-  const combineThemes = useCallback((providedTheme) => ({...providedTheme, ...theme}), [theme]);
-  const handleKeyDown = useCallback(
-    (e) => {
-      switch (e.key) {
-        case "Escape":
-          if (rest.menuIsOpen) {
-            e.stopPropagation();
-          }
-          break;
-        case "Home":
-          e.preventDefault();
-          if (e.shiftKey) {
-            e.target.selectionStart = 0;
-          } else {
-            e.target.setSelectionRange(0, 0);
-          }
-          break;
-        case "End":
-          e.preventDefault();
-          const len = e.target.value.length;
-          if (e.shiftKey) {
-            e.target.selectionEnd = len;
-          } else {
-            e.target.setSelectionRange(len, len);
-          }
-          break;
-        default:
-      }
-      onKeyDown && onKeyDown(e);
-    },
-    [onKeyDown, rest.menuIsOpen]
-  );
-
-  const SelectComponent = virtualized ? WindowedSelect : BaseSelect;
-
-  return (
-    <SelectComponent
-      ref={forwardedRef}
-      menuPortalTarget={menuPortalTarget}
-      menuPlacement={"auto"}
-      style={createInlineTheme(theme)}
-      styles={combineStyles([componentsStyles, styles])}
-      theme={combineThemes}
-      isMulti={isCollectionMode}
-      backspaceRemovesValue={isCollectionMode}
-      tabSelectsValue={false}
-      components={{
-        Menu,
-        DropdownIndicator,
-        ClearIndicator,
-        Option,
-        MultiValueRemove: ClearIndicator,
-        NoOptionsMessage,
-        GroupHeading,
-        ...components,
-      }}
-      {...rest}
-      onKeyDown={handleKeyDown}
-      isDisabled={rest.disabled}
-    />
-  );
-});
-
-export function CreatableSelect({components, isCollectionMode, menuPortalTarget, styles = {}, ...rest}) {
-  const theme = useTheme();
-  const combineThemes = useCallback((providedTheme) => ({...providedTheme, ...theme}), [theme]);
-  return (
-    <BaseCreatableSelect
-      menuPortalTarget={menuPortalTarget}
-      menuPlacement={"auto"}
-      styles={combineStyles([componentsStyles, styles])}
-      theme={combineThemes}
-      isMulti={isCollectionMode}
-      backspaceRemovesValue={isCollectionMode}
-      tabSelectsValue={false}
-      components={{
-        Menu,
-        MenuList: WindowedMenuList,
-        DropdownIndicator,
-        ClearIndicator,
-        Option,
-        MultiValueRemove: ClearIndicator,
-        NoOptionsMessage,
-        GroupHeading,
-        ...components,
-      }}
-      {...rest}
-      isDisabled={rest.disabled}
-    />
-  );
-}

package/src/Select/lazy.js

@@ -1,35 +0,0 @@
-import {lazy, Suspense, forwardRef} from "react";
-import {SelectLoader} from "./select-loader";
-
-const LazySelect = lazy(async () => {
-  const {Select} = await import("./index");
-  return {default: Select};
-});
-
-export const ReactSelect = forwardRef((props, forwardedRef) => (
-  <Suspense fallback={<SelectLoader />}>
-    <LazySelect {...props} ref={forwardedRef} />
-  </Suspense>
-));
-
-const CreatableLazySelect = lazy(async () => {
-  const {CreatableSelect} = await import("./index");
-  return {default: CreatableSelect};
-});
-
-export const CreatableReactSelect = (props) => (
-  <Suspense fallback={<SelectLoader />}>
-    <CreatableLazySelect {...props} />
-  </Suspense>
-);
-
-const SingleRowLazySelect = lazy(async () => {
-  const {SingleRowSelect} = await import("./index");
-  return {default: SingleRowSelect};
-});
-
-export const SingleRowReactSelect = (props) => (
-  <Suspense fallback={<SelectLoader />}>
-    <SingleRowLazySelect {...props} />
-  </Suspense>
-);