@fibery/ui-kit 1.36.2 → 1.38.0

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

@@ -1,10 +1,11 @@
 import {useControllableState} from "@fibery/react/src/use-controllable-state";
 import {css, cx} from "@linaria/core";
 import React, {
-  ComponentProps,
   ComponentType,
+  ForwardedRef,
   forwardRef,
   ReactNode,
+  RefObject,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -14,10 +15,9 @@ import React, {
 } from "react";
 import {inputOverrides} from "../antd/styles";
 import {border, space, textStyles} from "../design-system";
-import {Popup} from "../popup";
-import {$TSFixMe} from "../tsfixme";
+import {Popover} from "../popover";
 import {useIsPhone} from "../use-is-phone";
-import {Menu} from "./custom-select-partials/menu";
+import {MenuTransparent} from "./components/menu";
 import {
   ActionMeta,
   combineStyles,
@@ -30,6 +30,11 @@ import {
   StylesConfig,
 } from "./index";
 import {SelectControlSettingsProvider} from "./select-control-settings-context";
+import {ButtonColor, ButtonVariant} from "../button/base-button";
+import {makeSelectInPopoverStyles} from "./styles";
+import {SelectInstance} from "react-select";
+import {SELECT_IN_POPOVER_VALUE_MAX_HEIGHT} from "./constants";
+import {Wrap} from "@fibery/react/src/wrap";
 
 const offset = [0, space.s4] as [number, number];
 const popupHeightVH = 45;
@@ -60,7 +65,8 @@ const mobileClassName = css`
   padding-right: ${space.s12}px;
 `;
 
-const valueClassName = css`
+const triggerCss = css`
+  min-width: 0;
   border-radius: ${border.radius6}px;
 
   &:focus {
@@ -85,113 +91,81 @@ const titleClassName = css`
   padding-inline: ${space.s12}px;
 `;
 
-export const valueMaxHeight = 116;
-
-export const selectInPopupStyles = {
-  container: (props: $TSFixMe) => ({
-    ...props,
-    minWidth: 180,
-    width: "100%",
-    paddingTop: space.s6,
-    paddingInline: space.s6,
-  }),
-  option: (props: $TSFixMe) => ({
-    ...props,
-    padding: 0,
-    borderRadius: border.radius4,
-    paddingLeft: 0,
-    paddingRight: 0,
-  }),
-  control: (props: $TSFixMe) => ({
-    ...props,
-    maxHeight: valueMaxHeight,
-    overflow: "auto",
-    margin: space.s2,
-    marginBottom: space.s4,
-    width: `calc(100% - ${space.s2 * 2}px)`,
-    borderRadius: border.radius4,
-  }),
-  menu: (props: $TSFixMe) => ({
-    ...props,
-    minWidth: 100,
-    position: "static",
-    marginBlock: 0,
-    boxShadow: "none !important",
-    borderRadius: border.radius4,
-  }),
-};
-
 export type TriggerProps = {
   innerRef: React.Ref<HTMLDivElement>;
   children: ReactNode;
   onClick?: React.MouseEventHandler;
   iconStart?: ReactNode;
   pending?: boolean;
+  pressed?: boolean;
+  menuOpened?: boolean;
   onKeyDown?: React.KeyboardEventHandler;
   disabled?: boolean;
+  size?: "small" | "medium" | "large";
+  fullWidth?: boolean;
+  style?: React.CSSProperties;
+  className?: string;
+  variant?: ButtonVariant;
+  color?: ButtonColor;
+  valueSelected: boolean;
 };
 
-const Trigger = ({innerRef, children, onClick, onKeyDown}: TriggerProps) => {
+const TriggerDefault = ({innerRef, children, onClick, onKeyDown}: TriggerProps) => {
   return (
-    <div ref={innerRef} onClick={onClick} onKeyDown={onKeyDown} tabIndex={0} className={valueClassName}>
+    <div ref={innerRef} onClick={onClick} onKeyDown={onKeyDown} tabIndex={0} className={triggerCss}>
       {children}
     </div>
   );
 };
 
-type Components = {
-  Trigger: ComponentType<TriggerProps>;
-  Menu: ComponentType<ComponentProps<typeof Menu>>;
+export type SelectComponents<T, U extends boolean, V extends GroupBase<T>> = SelectProps<T, U, V>["components"] & {
+  Trigger?: ComponentType<TriggerProps>;
 };
 
-export type ComponentsConfig = Partial<Components>;
-
-const defaultComponents = {Trigger, Menu};
-
-type Ref = {
+export type SelectInPopoverRef<T, U extends boolean, V extends GroupBase<T>> = {
   valueRef: HTMLDivElement | null;
-  selectRef: $TSFixMe | null;
+  selectRef: RefObject<SelectInstance<T, U, V>>;
 };
 
-type Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = {
-  value?: PropsValue<Option>;
+type Props<T, U extends boolean, V extends GroupBase<T>> = {
+  value?: PropsValue<T>;
   menuIsOpen?: boolean;
   autoFocus?: boolean;
   virtualized?: boolean;
   defaultMenuIsOpen?: boolean;
   placeholder?: string;
   noOptionsMessage?: () => string | JSX.Element | null;
-  options: OptionsOrGroups<Option, Group>;
-  filterOption?: SelectProps<Option>["filterOption"];
+  options: OptionsOrGroups<T, V>;
+  filterOption?: SelectProps<T, U, V>["filterOption"];
   inputValue?: string;
   disabled?: boolean;
-  isCollectionMode?: IsMulti;
+  isCollectionMode?: U;
   isClearable?: boolean;
   renderValue?: () => ReactNode;
   title?: string;
   maxMenuHeight?: number;
-  hideOnChange?: boolean | ((newValue: OnChangeValue<Option, IsMulti>, actionMeta: ActionMeta<Option>) => boolean);
+  hideOnChange?: boolean | ((newValue: OnChangeValue<T, U>, actionMeta: ActionMeta<T>) => boolean);
   renderInPortal?: boolean;
   popupStyles?: string;
-  selectStyles?: StylesConfig<Option, IsMulti, Group>;
-  formatGroupLabel?: (group: Group) => ReactNode;
-  formatOptionLabel?: (option: Option, {context}: {context: "menu" | "value"}) => ReactNode;
-  components?: ComponentsConfig;
+  selectStyles?: StylesConfig<T, U, V>;
+  formatGroupLabel?: (group: V) => ReactNode;
+  formatOptionLabel?: (option: T, {context}: {context: "menu" | "value"}) => ReactNode;
+  components?: SelectComponents<T, U, V>;
   onInputChange?: (s: string, actionType: {action: string}) => void;
   onFocus?: () => void;
-  onChange: (newValue: OnChangeValue<Option, IsMulti>, actionMeta: ActionMeta<Option>) => void;
+  onChange: (newValue: OnChangeValue<T, U>, actionMeta: ActionMeta<T>) => void;
   onMenuOpen?: () => void;
   onMenuClose?: () => void | boolean;
   getPopupContainer?: () => HTMLElement;
   onSelectKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
   forbidValuesClearInCollnMode?: boolean;
   otherSelectProps?: Record<string, unknown>;
-  isOptionDisabled?: (option: Option) => boolean;
+  isOptionDisabled?: (option: T) => boolean;
 };
 
-function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
-  props: Omit<Props<Option, IsMulti, Group>, "maxMenuHeight">,
-  forwardedRef: React.ForwardedRef<Ref>
+function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
+  props: Omit<Props<T, U, V>, "maxMenuHeight">,
+  forwardedRef: ForwardedRef<SelectInPopoverRef<T, U, V>>
 ) {
   const {
     value,
@@ -227,7 +201,6 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
     forbidValuesClearInCollnMode,
     isOptionDisabled,
   } = props;
-  const [triggerElement, setTriggerElement] = useState<HTMLDivElement | null>(null);
   const [visible, setVisible] = useControllableState({
     value: menuIsOpen,
     defaultValue: false,
@@ -236,20 +209,14 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
     },
   });
   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);
-  }, []);
+  const selectRef = useRef<SelectInstance<T, U, V>>(null);
+  const [triggerElement, setTriggerElement] = useState<HTMLDivElement | null>(null);
+
+  useImperativeHandle(forwardedRef, () => ({
+    valueRef: triggerElement,
+    selectRef,
+  }));
+
   useEffect(() => {
     if (blurTimeoutRef.current) {
       clearTimeout(blurTimeoutRef.current);
@@ -301,7 +268,7 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
   }, [disabled, onMenuOpen, setVisible]);
 
   const styles = useMemo(() => {
-    return combineStyles<Option, IsMulti, Group>([selectInPopupStyles, selectStyles]);
+    return combineStyles<T, U, V>([makeSelectInPopoverStyles(), selectStyles]);
   }, [selectStyles]);
 
   const onTriggerClick: React.MouseEventHandler = useCallback(
@@ -326,29 +293,77 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
     },
     [onShow, visible]
   );
+
+  const onKeyDown: React.KeyboardEventHandler<HTMLDivElement> = useCallback(
+    (event) => {
+      if ((event.key === "Escape" || event.key === "Tab") && visible) {
+        onHide();
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      onSelectKeyDown?.(event);
+    },
+    [onHide, onSelectKeyDown, visible]
+  );
+
+  const isPhone = useIsPhone();
+
+  const onBlur: React.FocusEventHandler<HTMLDivElement> = useCallback(() => {
+    if (isPhone) {
+      return;
+    }
+    blurTimeoutRef.current = setTimeout(() => {
+      onHide(false);
+    }, 250);
+  }, [isPhone, onHide]);
+
+  const handleChange = useCallback(
+    (newValue: OnChangeValue<T, U>, actionMeta: ActionMeta<T>) => {
+      if (typeof hideOnChange === "function") {
+        if (hideOnChange(newValue, actionMeta)) {
+          onHide();
+        }
+      } else if (hideOnChange) {
+        onHide();
+      }
+      onChange(newValue, actionMeta);
+    },
+    [hideOnChange, onChange, onHide]
+  );
+
   const paddingPopup = popupPaddingTop + popupPaddingBottom;
   const paddingMenu = 6 + 6 + 6;
-  const isPhone = useIsPhone();
+
   const maxMenuHeight = isPhone
-    ? document.body.clientHeight - 45 - valueMaxHeight
+    ? document.body.clientHeight - 45 - SELECT_IN_POPOVER_VALUE_MAX_HEIGHT
     : Math.max((document.body.clientHeight / 100) * popupHeightVH, popupMinHeightPx) -
-      valueMaxHeight -
+      SELECT_IN_POPOVER_VALUE_MAX_HEIGHT -
       paddingPopup -
       paddingMenu;
-  const mergedComponents = {...defaultComponents, ...components};
+
+  const Trigger = components.Trigger || TriggerDefault;
+  const selectComponents = {
+    Menu: MenuTransparent,
+    DropdownIndicator: null,
+    IndicatorSeparator: null,
+    ...components,
+  };
 
   return (
-    <>
-      <mergedComponents.Trigger
-        innerRef={ref}
+    <Popover.Root open={visible} onOpen={() => onShow()} onClose={() => onHide()}>
+      <Trigger
+        innerRef={setTriggerElement}
+        menuOpened={visible}
+        disabled={disabled}
+        valueSelected={Boolean(value)}
         onClick={onTriggerClick}
         onKeyDown={onTriggerKeyDown}
-        disabled={disabled}
       >
         {renderValue ? renderValue() : null}
-      </mergedComponents.Trigger>
-      {Boolean(triggerElement) && (
-        <Popup
+      </Trigger>
+      <Popover.Trigger reference={triggerElement} />
+      <Wrap with={Popover.Portal} if={renderInPortal} getPopupContainer={getPopupContainer}>
+        <Popover.Content
           supportMobile
           title={title}
           offset={offset}
@@ -356,55 +371,25 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
           popupClassName={cx(popupClassName, popupStyles)}
           mobilePopupContentClassName={mobileClassName}
           placement="bottom-start"
-          renderInPortal={renderInPortal}
-          open={visible}
-          onOpen={() => onShow()}
-          onClose={() => onHide()}
-          trigger={<></>}
-          triggerDomElement={triggerElement}
-          getPopupContainer={getPopupContainer}
         >
           {title && !isPhone && <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
+            <ReactSelect<T, U, V>
               ref={selectRef}
               styles={styles}
               isSearchable={true}
-              onKeyDown={(event) => {
-                if ((event.key === "Escape" || event.key === "Tab") && visible) {
-                  onHide();
-                  event.preventDefault();
-                  event.stopPropagation();
-                }
-                onSelectKeyDown?.(event);
-              }}
+              onKeyDown={onKeyDown}
               autoFocus={autoFocus}
-              onBlur={() => {
-                if (isPhone) {
-                  return;
-                }
-                blurTimeoutRef.current = setTimeout(() => {
-                  onHide(false);
-                }, 250);
-              }}
+              onBlur={onBlur}
               value={value}
               defaultMenuIsOpen={defaultMenuIsOpen}
               controlShouldRenderValue
               closeMenuOnScroll={false}
               closeMenuOnSelect={false}
-              onChange={(newValue, actionMeta) => {
-                if (typeof hideOnChange === "function") {
-                  if (hideOnChange(newValue, actionMeta)) {
-                    onHide();
-                  }
-                } else if (hideOnChange) {
-                  onHide();
-                }
-                onChange(newValue, actionMeta);
-              }}
+              onChange={handleChange}
               placeholder={placeholder}
               onInputChange={onInputChange}
               noOptionsMessage={noOptionsMessage}
@@ -421,23 +406,19 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
               formatGroupLabel={formatGroupLabel}
               formatOptionLabel={formatOptionLabel}
               {...otherSelectProps}
-              components={{
-                DropdownIndicator: null,
-                IndicatorSeparator: null,
-                Menu: mergedComponents.Menu as $TSFixMe,
-              }}
+              components={selectComponents}
               forbidValuesClearInCollnMode={forbidValuesClearInCollnMode}
               isOptionDisabled={isOptionDisabled}
             />
           </SelectControlSettingsProvider>
-        </Popup>
-      )}
-    </>
+        </Popover.Content>
+      </Wrap>
+    </Popover.Root>
   );
 }
 
-type SelectInPopoverType = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
-  props: Omit<Props<Option, IsMulti, Group>, "maxMenuHeight"> & {ref?: React.ForwardedRef<Ref>}
+type SelectInPopoverType = <T, U extends boolean, V extends GroupBase<T>>(
+  props: Omit<Props<T, U, V>, "maxMenuHeight"> & {ref?: ForwardedRef<SelectInPopoverRef<T, U, V>>}
 ) => ReturnType<typeof SelectInPopoverInner>;
 
 // Explicit type assertion to specify that component accepts generic props because forwardRef breaks it

package/src/select/styles.ts

@@ -1,20 +1,21 @@
 import {css} from "@linaria/core";
-import type {ControlProps, CSSObjectWithLabel, StylesConfig} from "react-select";
+import type {CSSObjectWithLabel, GroupBase, StylesConfig} from "react-select";
 import {inputOverrides} from "../antd/styles";
-import {layout, space, themeVars} from "../design-system";
-import {groupHeadingNulledStyles} from "./custom-select-partials/group-heading";
-import {MenuListNulledStyles, MenuNulledStyles} from "./custom-select-partials/menu";
-import {OptionNulledStyles, OptionNulledVitualizedStyles} from "./custom-select-partials/option";
+import {border, layout, space, themeVars} from "../design-system";
+import {groupHeadingNulledStyles} from "./components/group-heading";
+import {MenuListNulledStyles, MenuNulledStyles} from "./components/menu";
+import {OptionNulledStyles, OptionNulledVitualizedStyles} from "./components/option";
+import {SELECT_IN_POPOVER_VALUE_MAX_HEIGHT} from "./constants";
 
 export const expanderExpandedStyle = css`
   transform: rotate(180deg);
 `;
 
-function createControlStyle({
+function makeControlStyle<T, U extends boolean, V extends GroupBase<T>>({
   isSingleLine,
 }: {
   isSingleLine: boolean;
-}): (base: CSSObjectWithLabel, props: ControlProps) => CSSObjectWithLabel {
+}): StylesConfig<T, U, V> {
   const childDivStyle: CSSObjectWithLabel = {
     padding: 0,
     overflow: "visible",
@@ -24,8 +25,8 @@ function createControlStyle({
     childDivStyle.flexWrap = "nowrap";
   }
 
-  return (provided, state) =>
-    ({
+  return {
+    control: (provided, state) => ({
       display: "flex",
       flexWrap: isSingleLine ? "nowrap" : "wrap",
       justifyContent: "space-between",
@@ -38,27 +39,30 @@ function createControlStyle({
       paddingLeft: space.s10,
       paddingRight: space.s12,
       "& > div": childDivStyle,
-    } as unknown as CSSObjectWithLabel);
+    }),
+  };
 }
 
-export const virtualizedStyles: StylesConfig = {
+export const makeVirtualizedStyles = <T, U extends boolean, V extends GroupBase<T>>(): StylesConfig<T, U, V> => ({
   option: () => ({...OptionNulledVitualizedStyles, ...OptionNulledStyles}),
   groupHeading: (provided) => ({
     ...provided,
     ...groupHeadingNulledStyles,
     height: layout.menuItemHeight,
   }),
-};
+});
 
-export const nonVirtualizedStyles: StylesConfig = {
+export const makeNonVirtualizedStyles = <T, U extends boolean, V extends GroupBase<T>>(): StylesConfig<T, U, V> => ({
   menuList: (provided) => ({
     ...provided,
     paddingTop: 6,
     paddingBottom: 6,
   }),
-};
+});
 
-export const zIndexStyles = (zIndex: number): StylesConfig => ({
+export const makeZIndexStyles = <T, U extends boolean, V extends GroupBase<T>>(
+  zIndex: number
+): StylesConfig<T, U, V> => ({
   menuPortal: (provided) => ({
     ...provided,
     zIndex: zIndex,
@@ -69,13 +73,11 @@ export const zIndexStyles = (zIndex: number): StylesConfig => ({
   }),
 });
 
-export const componentsStyles: StylesConfig = {
+export const makeComponentsStyles = <T, U extends boolean, V extends GroupBase<T>>(): StylesConfig<T, U, V> => ({
   option: () => OptionNulledStyles,
   noOptionsMessage: (provided) => ({
     ...provided,
-    paddingLeft: "",
-    paddingTop: "",
-    paddingBottom: "",
+    padding: 0,
   }),
   placeholder: (provided) => ({
     ...provided,
@@ -112,7 +114,7 @@ export const componentsStyles: StylesConfig = {
     alignItems: "center",
     height: layout.inputHeight - 2,
   }),
-  control: createControlStyle({isSingleLine: false}),
+  control: makeControlStyle<T, U, V>({isSingleLine: false}).control,
   group: (provided) => ({
     ...provided,
     padding: 0,
@@ -150,8 +152,42 @@ export const componentsStyles: StylesConfig = {
       color: themeVars.textColor,
     };
   },
-};
+});
+
+export const makeSingleLineStyles = <T, U extends boolean, V extends GroupBase<T>>(): StylesConfig<T, U, V> => ({
+  control: makeControlStyle<T, U, V>({isSingleLine: true}).control,
+});
 
-export const singleLineComponentsStyle: StylesConfig = {
-  control: createControlStyle({isSingleLine: true}),
-};
+export const makeSelectInPopoverStyles = <T, U extends boolean, V extends GroupBase<T>>(): StylesConfig<T, U, V> => ({
+  container: (props) => ({
+    ...props,
+    minWidth: 180,
+    width: "100%",
+    paddingTop: space.s6,
+    paddingInline: space.s6,
+  }),
+  option: (props) => ({
+    ...props,
+    padding: 0,
+    borderRadius: border.radius4,
+    paddingLeft: 0,
+    paddingRight: 0,
+  }),
+  control: (props) => ({
+    ...props,
+    maxHeight: SELECT_IN_POPOVER_VALUE_MAX_HEIGHT,
+    overflow: "auto",
+    margin: space.s2,
+    marginBottom: space.s4,
+    width: `calc(100% - ${space.s2 * 2}px)`,
+    borderRadius: border.radius4,
+  }),
+  menu: (props) => ({
+    ...props,
+    minWidth: 100,
+    position: "static",
+    marginBlock: 0,
+    boxShadow: "none !important",
+    borderRadius: border.radius4,
+  }),
+});

package/src/shortcut-badge.tsx

@@ -5,6 +5,7 @@ import {useIsSupportHardwareKeyboard} from "./use-is-support-hardware-keyboard";
 export const shortcutCss = css`
   ${{
     ...textStyles.small,
+    ...textStyles.numeric.tabularOn,
     borderRadius: border.radius4,
     border: themeVars.shortcutBorderColor,
     color: themeVars.shortcutTextColor,