@fibery/ui-kit 1.4.1 → 1.7.0

package/src/Select/components.tsx

@@ -1,12 +1,12 @@
-import {useCallback, ReactNode} from "react";
+import React, {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 {ClearIndicatorProps, DropdownIndicatorProps, GroupBase, MultiValueRemoveProps, OptionProps} from "react-select";
+import {Button} from "../Button/button";
+import {space, themeVars} from "../designSystem";
 import ArrowCollapseVertical from "../icons/react/ArrowCollapseVertical";
-import {expanderStyle, expanderExpandedStyle} from "./styles";
+import {expanderExpandedStyle, expanderStyle} from "./styles";
 import cn from "classnames";
 
 export const Option = <
@@ -43,24 +43,9 @@ export function ClearIndicator<
   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}
-      />
+      <Button borderless Icon={RemoveIcon} disabled={selectProps.isDisabled} size={":button-size/super-small"} />
     </div>
   );
 }
@@ -81,3 +66,19 @@ export const NoOptionsMessage = ({children}: {children: ReactNode}) => {
     </div>
   );
 };
+
+const groupDividerContainerStyle = css`
+  padding: ${space.l}px 0;
+  box-sizing: content-box;
+`;
+
+const groupDividerStyle = css`
+  width: 100%;
+  border-top: 1px solid #eeeff1;
+`;
+
+export const GroupDivider = () => (
+  <div className={groupDividerContainerStyle}>
+    <div className={groupDividerStyle}></div>
+  </div>
+);

package/src/Select/index.tsx

@@ -1,46 +1,67 @@
+/* eslint-disable */
 import cn from "classnames";
-import {useCallback, forwardRef} from "react";
+import {forwardRef, useCallback, useMemo, useState} from "react";
 import BaseSelect, {
+  createFilter,
+  GroupBase as ReactSelectGroupBase,
   GroupHeadingProps,
+  MenuListProps,
   MenuProps,
-  StylesConfig,
-  Props as BaseSelectProps,
-  GroupBase,
-  OptionsOrGroups,
-  OptionProps,
-  SingleValueProps,
+  mergeStyles,
+  MultiValue,
   MultiValueProps,
+  OptionProps,
+  OptionsOrGroups,
+  Props as BaseSelectProps,
   SingleValue,
-  MultiValue,
-  mergeStyles,
+  SingleValueProps,
+  StylesConfig,
+  ActionMeta,
 } from "react-select";
-import BaseCreatableSelect from "react-select/creatable";
+import BaseCreatableSelect, {CreatableProps} 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";
+import {
+  ClearIndicator,
+  DropdownIndicator,
+  GroupDivider,
+  NoOptionsMessage,
+  Option as OptionComponent,
+} from "./components";
+import {componentsStyles, singleLineComponentsStyle, virtualizedStyles, zIndexStyles} from "./styles";
+import {useSelectControlSettings} from "./select-control-settings-context";
+
+type GroupBase<T> = ReactSelectGroupBase<T> & {separator?: boolean};
 
 export type {
   OptionsOrGroups,
   GroupBase,
   StylesConfig,
+  MenuProps,
+  MenuListProps,
   OptionProps,
   SingleValueProps,
   MultiValueProps,
   SingleValue,
   MultiValue,
+  ActionMeta,
 };
 
 function GroupHeading<
   Option = unknown,
   IsMulti extends boolean = boolean,
   Group extends GroupBase<Option> = GroupBase<Option>
->(props: GroupHeadingProps<Option, IsMulti, Group>) {
-  if (!props.children) {
+>({children, ...props}: GroupHeadingProps<Option, IsMulti, Group>) {
+  if (props.data.separator) {
+    return <GroupDivider />;
+  }
+
+  if (!children) {
     return null;
   }
-  return <components.GroupHeading {...props} />;
+
+  return <components.GroupHeading {...props}>{children}</components.GroupHeading>;
 }
 
 function Menu<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(
@@ -52,6 +73,8 @@ function Menu<Option = unknown, IsMulti extends boolean = boolean, Group extends
   return <components.Menu {...props} innerProps={overridedInnerProps} className={cn(className, "react-select-menu")} />;
 }
 
+export {WindowedMenuList};
+
 export {components};
 
 export function combineStyles<
@@ -62,6 +85,8 @@ export function combineStyles<
   return stylesConfigs.reduce(mergeStyles, {});
 }
 
+export {createFilter};
+
 export type SelectProps<
   Option = unknown,
   IsMulti extends boolean = boolean,
@@ -100,34 +125,48 @@ export const Select = forwardRef(function Select<
     onKeyDown,
     styles = {},
     virtualized = true,
+    onMenuOpen,
+    onMenuClose,
+    onChange,
     ...rest
   }: SelectProps<Option, IsMulti, Group>,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   forwardedRef: any
 ) {
-  const handleKeyDown = useCallback(
+  const {getPopupContainerElement, zIndex} = useSelectControlSettings();
+  const [menuOpenState, setMenuOpenState] = useState(rest.defaultMenuIsOpen);
+  const onMenuOpenWrapped = useCallback(() => {
+    setMenuOpenState(true);
+    onMenuOpen && onMenuOpen();
+  }, [onMenuOpen]);
+  const onMenuCloseWrapped = useCallback(() => {
+    setMenuOpenState(false);
+    onMenuClose && onMenuClose();
+  }, [onMenuClose]);
+  const handleKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(
     (e) => {
       switch (e.key) {
         case "Escape":
-          if (rest.menuIsOpen) {
+          // we cannot rely on "menuIsOpen" prop here, as user may not pass this prop and rely on internal component behavior instead.
+          if (menuOpenState) {
             e.stopPropagation();
           }
           break;
         case "Home":
           e.preventDefault();
           if (e.shiftKey) {
-            e.target.selectionStart = 0;
+            (e.target as HTMLInputElement).selectionStart = 0;
           } else {
-            e.target.setSelectionRange(0, 0);
+            (e.target as HTMLInputElement).setSelectionRange(0, 0);
           }
           break;
         case "End": {
           e.preventDefault();
-          const len = e.target.value.length;
+          const len = (e.target as HTMLInputElement).value.length;
           if (e.shiftKey) {
-            e.target.selectionEnd = len;
+            (e.target as HTMLInputElement).selectionEnd = len;
           } else {
-            e.target.setSelectionRange(len, len);
+            (e.target as HTMLInputElement).setSelectionRange(len, len);
           }
           break;
         }
@@ -135,20 +174,28 @@ export const Select = forwardRef(function Select<
       }
       onKeyDown && onKeyDown(e);
     },
-    [onKeyDown, rest.menuIsOpen]
+    [onKeyDown, menuOpenState]
   );
 
   const SelectComponent = (virtualized ? WindowedSelect : BaseSelect) as unknown as typeof BaseSelect;
 
+  const combinedStyles = useMemo(() => {
+    return combineStyles<Option, IsMulti, Group>([
+      componentsStyles,
+      virtualized ? virtualizedStyles : {},
+      zIndex ? zIndexStyles(zIndex) : {},
+      styles,
+    ] as StylesConfig<Option, IsMulti, Group>[]);
+  }, [styles, virtualized]);
+
   return (
     <SelectComponent
       ref={forwardedRef}
-      menuPortalTarget={menuPortalTarget}
+      // There are places, where it is useful to override menuPortalTarget globally for all selects.
+      // When you are already in some popup. e.g. user input in buttons, relation filter popover.
+      menuPortalTarget={(getPopupContainerElement && getPopupContainerElement()) || menuPortalTarget}
       menuPlacement={"auto"}
-      styles={combineStyles<Option, IsMulti, Group>([
-        componentsStyles as unknown as StylesConfig<Option, IsMulti, Group>,
-        styles,
-      ])}
+      styles={combinedStyles}
       isMulti={isCollectionMode}
       backspaceRemovesValue={isCollectionMode}
       tabSelectsValue={false}
@@ -164,6 +211,9 @@ export const Select = forwardRef(function Select<
       }}
       {...rest}
       onKeyDown={handleKeyDown}
+      onMenuOpen={onMenuOpenWrapped}
+      onMenuClose={onMenuCloseWrapped}
+      onChange={rest.disabled ? undefined : onChange}
       isDisabled={rest.disabled}
     />
   );
@@ -173,13 +223,31 @@ export const Select = forwardRef(function Select<
   props: SelectProps<Option, IsMulti, Group> & {ref?: any}
 ) => JSX.Element;
 
-export function CreatableSelect<
+export const CreatableSelect = forwardRef(CreatableSelectInner) as <
+  Option = unknown,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>(
+  props: CreatableProps<Option, IsMulti, Group> & SelectProps<Option, IsMulti, Group>
+) => ReturnType<typeof CreatableSelectInner>;
+
+export function CreatableSelectInner<
   Option = unknown,
   IsMulti extends boolean = boolean,
   Group extends GroupBase<Option> = GroupBase<Option>
->({components, isCollectionMode, menuPortalTarget, styles = {}, ...rest}: SelectProps<Option, IsMulti, Group>) {
+>(
+  {
+    components,
+    isCollectionMode,
+    menuPortalTarget,
+    styles = {},
+    ...rest
+  }: CreatableProps<Option, IsMulti, Group> & SelectProps<Option, IsMulti, Group>,
+  ref: any
+) {
   return (
     <BaseCreatableSelect
+      ref={ref}
       menuPortalTarget={menuPortalTarget}
       menuPlacement={"auto"}
       styles={combineStyles<Option, IsMulti, Group>([

package/src/Select/select-control-settings-context.tsx

@@ -0,0 +1,20 @@
+import {createContext, ReactNode, useContext, useMemo} from "react";
+
+const SelectControlSettings = createContext<{getPopupContainerElement?: () => HTMLElement; zIndex?: number}>({});
+
+// Overrides zIndex and getPopupContainerElement for all selects, except select-in-popover.
+// It has more priority than "menuPortalTarget" prop. Use at your own risk!
+export function SelectControlSettingsProvider({
+  children,
+  getPopupContainerElement,
+  zIndex,
+}: {
+  children: ReactNode;
+  getPopupContainerElement?: () => HTMLElement;
+  zIndex?: number;
+}) {
+  const settings = useMemo(() => ({getPopupContainerElement, zIndex}), [getPopupContainerElement, zIndex]);
+  return <SelectControlSettings.Provider value={settings}>{children}</SelectControlSettings.Provider>;
+}
+
+export const useSelectControlSettings = () => useContext(SelectControlSettings);

package/src/Select/select-in-popover.tsx

@@ -0,0 +1,333 @@
+import {css, cx} from "@linaria/core";
+import {border, radius, space, textStyles} from "../designSystem";
+import {inputOverrides} from "../antd/styles";
+import React, {
+  ComponentType,
+  forwardRef,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import {Popup} from "../Popup";
+import {$TSFixMe} from "../tsfixme";
+import {combineStyles, GroupBase, OptionsOrGroups, Select as ReactSelect, SelectProps, StylesConfig} from "./index";
+import {SelectControlSettingsProvider} from "./select-control-settings-context";
+
+const offset = [0, space.xs] as [number, number];
+const popupClassName = css`
+  z-index: 1050;
+  max-width: 360px;
+  padding-top: ${space.m}px;
+  padding-bottom: ${space.xs}px;
+  padding-left: ${space.m}px;
+  padding-right: ${space.m}px;
+`;
+
+const valueClassName = css`
+  border-radius: ${radius}px;
+
+  &:focus {
+    outline: none;
+    ${inputOverrides.focus}
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: none;
+    box-shadow: none !important;
+  }
+
+  &:focus-visible {
+    outline: none;
+    ${inputOverrides.focus}
+  }
+`;
+
+const titleClassName = css`
+  ${textStyles.heading6}
+  padding-top: ${space.s}px;
+  padding-left: ${space.m}px;
+  padding-right: ${space.m}px;
+  padding-bottom: ${space.l}px;
+`;
+
+export const selectInPopupStyles = {
+  container: (props: $TSFixMe) => ({
+    ...props,
+    minWidth: 180,
+    width: "100%",
+  }),
+  option: (props: $TSFixMe) => ({
+    ...props,
+    borderRadius: border.radius3,
+  }),
+  menu: (props: $TSFixMe) => ({
+    ...props,
+    minWidth: 100,
+    position: "static",
+    marginTop: space.s,
+    marginBottom: 0,
+    boxShadow: "none",
+    borderRadius: radius,
+  }),
+};
+
+export type TriggerProps = {
+  innerRef: React.Ref<HTMLDivElement>;
+  children: ReactNode;
+  onClick: React.MouseEventHandler;
+  onKeyDown: React.KeyboardEventHandler;
+};
+
+const Trigger = ({innerRef, children, onClick, onKeyDown}: TriggerProps) => {
+  return (
+    <div ref={innerRef} onClick={onClick} onKeyDown={onKeyDown} tabIndex={0} className={valueClassName}>
+      {children}
+    </div>
+  );
+};
+
+type Components = {Trigger: ComponentType<TriggerProps>};
+
+export type ComponentsConfig = Partial<Components>;
+
+const defaultComponents = {Trigger};
+
+type Ref = {
+  valueRef: HTMLDivElement | null;
+  selectRef: $TSFixMe | null;
+};
+
+type Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = {
+  value?: Option;
+  menuIsOpen?: boolean;
+  autoFocus?: boolean;
+  defaultMenuIsOpen?: boolean;
+  placeholder?: string;
+  onInputChange?: (s: string, actionType: {action: string}) => void;
+  noOptionsMessage: () => string | JSX.Element | null;
+  options: OptionsOrGroups<Option, Group>;
+  filterOption?: SelectProps<Option>["filterOption"];
+  inputValue?: string;
+  disabled?: boolean;
+  onFocus?: () => void;
+  isCollectionMode?: IsMulti;
+  isClearable?: boolean;
+  onChange: (...arg: $TSFixMe) => void;
+  onMenuOpen: () => void;
+  onMenuClose: () => void | boolean;
+  renderValue?: () => ReactNode;
+  title?: string;
+  maxMenuHeight?: number;
+  hideOnChange?: boolean;
+  renderInPortal?: boolean;
+  popupStyles?: string;
+  selectStyles?: StylesConfig<Option, IsMulti, Group>;
+  formatGroupLabel?: (group: Group) => ReactNode;
+  formatOptionLabel?: (option: Option) => ReactNode;
+  components?: ComponentsConfig;
+};
+
+function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
+  props: Props<Option, IsMulti, Group>,
+  forwardedRef: React.ForwardedRef<Ref>
+) {
+  const {
+    value,
+    menuIsOpen = false,
+    autoFocus,
+    defaultMenuIsOpen,
+    placeholder,
+    onInputChange,
+    noOptionsMessage,
+    options,
+    filterOption,
+    inputValue,
+    disabled,
+    onFocus,
+    isCollectionMode,
+    isClearable = true,
+    onChange,
+    onMenuOpen,
+    onMenuClose,
+    renderValue,
+    title,
+    maxMenuHeight,
+    hideOnChange = true,
+    renderInPortal = true,
+    popupStyles,
+    selectStyles = {},
+    formatGroupLabel,
+    formatOptionLabel,
+    components = {},
+  } = props;
+  const [triggerElement, setTriggerElement] = useState<HTMLDivElement | null>(null);
+  const [visible, setVisible] = useState(menuIsOpen);
+  const blurTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
+  const selectRef = useRef<{focus: () => void}>(null);
+  const ref = useRef<HTMLDivElement | null>(null);
+  useImperativeHandle(
+    forwardedRef,
+    () =>
+      ({
+        valueRef: ref.current,
+        selectRef: selectRef.current,
+      } as {valueRef: HTMLDivElement; selectRef: $TSFixMe | null})
+  );
+  useEffect(() => {
+    setTriggerElement(ref.current);
+  }, []);
+  useEffect(() => {
+    if (blurTimeoutRef.current) {
+      clearTimeout(blurTimeoutRef.current);
+    }
+  }, []);
+
+  const onHide = useCallback(
+    (restoreFocus = true) => {
+      const wasClosed = onMenuClose();
+      if (wasClosed === false) {
+        return;
+      }
+      setVisible(false);
+
+      if (restoreFocus) {
+        triggerElement?.focus();
+      }
+    },
+    [onMenuClose, triggerElement]
+  );
+
+  useEffect(() => {
+    const onVisibleChange = function () {
+      if (document.visibilityState === "visible" && blurTimeoutRef.current && visible) {
+        clearTimeout(blurTimeoutRef.current);
+        selectRef.current?.focus();
+      } else if (document.visibilityState === "hidden" && blurTimeoutRef.current) {
+        clearTimeout(blurTimeoutRef.current);
+      }
+    };
+    document.addEventListener("visibilitychange", onVisibleChange);
+    return () => {
+      document.removeEventListener("visibilitychange", onVisibleChange);
+    };
+  }, [visible]);
+
+  const onShow = useCallback(() => {
+    if (blurTimeoutRef.current) {
+      clearTimeout(blurTimeoutRef.current);
+    }
+    setVisible(true);
+    onMenuOpen();
+  }, [onMenuOpen]);
+
+  const styles = useMemo(() => {
+    return combineStyles<Option, IsMulti, Group>([selectInPopupStyles, selectStyles]);
+  }, [selectStyles]);
+
+  const onTriggerClick: React.MouseEventHandler = useCallback(
+    (event) => {
+      if (visible) {
+        onHide();
+      } else {
+        onShow();
+      }
+      event.stopPropagation();
+    },
+    [onHide, onShow, visible]
+  );
+
+  const onTriggerKeyDown: React.KeyboardEventHandler = useCallback(
+    (event) => {
+      if ((event.key === "Enter" || event.key === " ") && !visible) {
+        event.preventDefault();
+        onShow();
+      }
+    },
+    [onShow, visible]
+  );
+
+  const mergedComponents = {...defaultComponents, ...components};
+
+  return (
+    <>
+      <mergedComponents.Trigger innerRef={ref} onClick={onTriggerClick} onKeyDown={onTriggerKeyDown}>
+        {renderValue ? renderValue() : null}
+      </mergedComponents.Trigger>
+      {Boolean(triggerElement) && (
+        <Popup
+          offset={offset}
+          popupClassName={cx(popupClassName, popupStyles)}
+          placement="bottom-start"
+          renderInPortal={renderInPortal}
+          open={visible}
+          onOpen={() => onShow()}
+          onClose={() => onHide()}
+          trigger={<></>}
+          triggerDomElement={triggerElement}
+        >
+          {title && <div className={titleClassName}>{title}</div>}
+          {/*Usually we set popupContainerElement for react-select via context (SelectControlSettingsProvider). But here we render react-select in popover.*/}
+          {/*Render target in controlled by Popover here. So we just override SelectControlContext here and set popupContainerElement to undefined. */}
+          {/*So in dom react-select will be a child of popover. */}
+          <SelectControlSettingsProvider getPopupContainerElement={undefined}>
+            <ReactSelect
+              ref={selectRef}
+              styles={styles}
+              isSearchable={true}
+              onKeyDown={(event) => {
+                if ((event.key === "Escape" || event.key === "Tab") && visible) {
+                  onHide();
+                  event.preventDefault();
+                  event.stopPropagation();
+                }
+              }}
+              autoFocus={autoFocus}
+              onBlur={() => {
+                blurTimeoutRef.current = setTimeout(() => {
+                  onHide(false);
+                }, 250);
+              }}
+              value={value}
+              defaultMenuIsOpen={defaultMenuIsOpen}
+              controlShouldRenderValue
+              closeMenuOnScroll={false}
+              closeMenuOnSelect={false}
+              onChange={(...arg) => {
+                if (hideOnChange) {
+                  onHide();
+                }
+                onChange(...arg);
+              }}
+              placeholder={placeholder}
+              onInputChange={onInputChange}
+              noOptionsMessage={noOptionsMessage}
+              options={options || []}
+              filterOption={filterOption}
+              inputValue={inputValue}
+              menuIsOpen
+              maxMenuHeight={maxMenuHeight}
+              disabled={disabled}
+              onFocus={onFocus}
+              isCollectionMode={isCollectionMode}
+              isClearable={!isCollectionMode && isClearable}
+              formatGroupLabel={formatGroupLabel}
+              formatOptionLabel={formatOptionLabel}
+              components={{DropdownIndicator: null, IndicatorSeparator: null}}
+            />
+          </SelectControlSettingsProvider>
+        </Popup>
+      )}
+    </>
+  );
+}
+
+type SelectInPopoverType = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
+  props: Props<Option, IsMulti, Group> & {ref?: React.ForwardedRef<Ref>}
+) => ReturnType<typeof SelectInPopoverInner>;
+
+// Explicit type assertion to specify that component accepts generic props because forwardRef breaks it
+export const SelectInPopover = forwardRef(SelectInPopoverInner) as SelectInPopoverType;

package/src/Select/styles.ts

@@ -44,6 +44,31 @@ function createControlStyle({
     } as unknown as CSSObjectWithLabel);
 }
 
+export const virtualizedStyles: StylesConfig = {
+  option: (provided) => ({
+    ...provided,
+    height: layout.menuItemHeight,
+  }),
+  groupHeading: (provided) => ({
+    ...provided,
+    height: layout.menuItemHeight,
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+  }),
+};
+
+export const zIndexStyles = (zIndex: number): StylesConfig => ({
+  menuPortal: (provided) => ({
+    ...provided,
+    zIndex: zIndex,
+  }),
+  menu: (provided) => ({
+    ...provided,
+    zIndex,
+  }),
+});
+
 export const componentsStyles: StylesConfig = {
   option: (provided, state) => {
     const disabledStyles = {
@@ -116,7 +141,8 @@ export const componentsStyles: StylesConfig = {
   groupHeading: (provided) => ({
     ...provided,
     paddingLeft: space.l,
-    paddingTop: space.l,
+    paddingRight: space.m,
+    paddingTop: space.m + space.xs,
     margin: 0,
     ...textStyles.small,
     color: themeVars.disabledTextColor,

package/src/ThemeProvider.tsx

@@ -1,5 +1,5 @@
 import invariant from "invariant";
-import {themeStyles} from "@fibery/ui-kit/src/theme-styles";
+import {themeStyles} from "./theme-styles";
 import {createContext, ReactNode, useContext, useEffect, useState} from "react";
 import {colors, getThemeColors, ThemeColors} from "./designSystem";
 import {