@fibery/ui-kit 1.42.0 → 2.0.1

package/src/select/index.tsx

@@ -38,7 +38,7 @@ const emptyComponents = {
 export const Select = forwardRef(function SelectInner<
   T = unknown,
   U extends boolean = boolean,
-  V extends GroupBase<T> = GroupBase<T>
+  V extends GroupBase<T> = GroupBase<T>,
 >(
   {
     maxMenuHeight,
@@ -51,6 +51,7 @@ export const Select = forwardRef(function SelectInner<
     title,
     isSearchable,
     inline,
+    menuPortalTarget,
     ...restProps
   }: SelectProps<T, U, V>,
   forwardedRef: ForwardedRef<SelectInstance<T, U, V>>
@@ -59,53 +60,48 @@ export const Select = forwardRef(function SelectInner<
   if (isPhone && !inline) {
     return (
       <SelectInPopover
-        {...(restProps as $TSFixMe)}
+        {...restProps}
         options={options}
         isSearchable={isSearchable}
         title={title || typeof placeholder === "string" ? placeholder : ""}
         isClearable={typeof isClearable === "undefined" ? false : isClearable}
-        formatOptionLabel={
-          formatOptionLabel as ((option: T, {context}: {context: "menu" | "value"}) => React.ReactNode) | undefined
-        }
+        formatOptionLabel={formatOptionLabel}
         isOptionDisabled={isOptionDisabled as ((option: T) => boolean) | undefined}
-        renderValue={() => {
-          return (
+        trigger={
+          <div
+            className={css`
+              display: block;
+              position: relative;
+            `}
+          >
             <div
               className={css`
-                display: block;
-                position: relative;
+                position: absolute;
+                inset: 0;
+                z-index: 1;
+              `}
+            />
+            <div
+              className={css`
+                pointer-events: none;
               `}
             >
-              <div
-                className={css`
-                  position: absolute;
-                  inset: 0;
-                  z-index: 1;
-                `}
+              <SelectComponent
+                {...restProps}
+                isSearchable={false}
+                components={emptyComponents}
+                placeholder={placeholder}
+                maxMenuHeight={maxMenuHeight}
+                options={options}
+                styles={styles}
+                formatOptionLabel={formatOptionLabel}
+                isOptionDisabled={isOptionDisabled}
+                isClearable={isClearable}
+                menuIsOpen={false}
               />
-              <div
-                className={css`
-                  pointer-events: none;
-                `}
-              >
-                <SelectComponent
-                  {...restProps}
-                  isSearchable={false}
-                  components={emptyComponents}
-                  placeholder={placeholder}
-                  maxMenuHeight={maxMenuHeight}
-                  options={options}
-                  styles={styles}
-                  formatOptionLabel={formatOptionLabel}
-                  isOptionDisabled={isOptionDisabled}
-                  isClearable={isClearable}
-                  menuIsOpen={false}
-                />
-              </div>
             </div>
-          );
-        }}
-        inline={inline}
+          </div>
+        }
       />
     );
   }
@@ -120,6 +116,7 @@ export const Select = forwardRef(function SelectInner<
       isClearable={isClearable}
       styles={styles}
       inline={inline}
+      menuPortalTarget={menuPortalTarget}
       {...restProps}
     />
   );

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

@@ -1,21 +1,18 @@
 import {useControllableState} from "@fibery/react/src/use-controllable-state";
 import {css, cx} from "@linaria/core";
 import React, {
-  ComponentType,
   ForwardedRef,
   forwardRef,
   ReactNode,
   RefObject,
   useCallback,
-  useEffect,
   useImperativeHandle,
   useMemo,
   useRef,
   useState,
 } from "react";
-import {inputOverrides} from "../antd/styles";
-import {border, space, textStyles} from "../design-system";
-import {Popover, Placement} from "../popover";
+import {space, textStyles} from "../design-system";
+import {Placement, Popover} from "../popover";
 import {useIsPhone} from "../use-is-phone";
 import {MenuTransparent} from "./components/menu";
 import {
@@ -30,7 +27,6 @@ import {
   StylesConfig,
 } from "./select";
 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";
@@ -67,63 +63,12 @@ const mobileClassName = css`
   padding-right: ${space.s12}px;
 `;
 
-const triggerCss = css`
-  min-width: 0;
-  border-radius: ${border.radius6}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.s12}px;
   padding-inline: ${space.s12}px;
 `;
 
-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 TriggerDefault = ({innerRef, children, onClick, onKeyDown}: TriggerProps) => {
-  return (
-    <div ref={innerRef} onClick={onClick} onKeyDown={onKeyDown} tabIndex={0} className={triggerCss}>
-      {children}
-    </div>
-  );
-};
-
-export type SelectComponents<T, U extends boolean, V extends GroupBase<T>> = SelectProps<T, U, V>["components"] & {
-  Trigger?: ComponentType<TriggerProps>;
-};
-
 export type SelectInPopoverRef<T, U extends boolean, V extends GroupBase<T>> = {
   valueRef: HTMLDivElement | null;
   selectRef: RefObject<SelectInstance<T, U, V>>;
@@ -133,40 +78,41 @@ type Props<T, U extends boolean, V extends GroupBase<T>> = {
   value?: PropsValue<T>;
   isSearchable?: boolean;
   menuIsOpen?: boolean;
-  autoFocus?: boolean;
-  virtualized?: boolean;
-  defaultMenuIsOpen?: boolean;
-  placeholder?: string;
-  noOptionsMessage?: () => string | JSX.Element | null;
   options: OptionsOrGroups<T, V>;
-  filterOption?: SelectProps<T, U, V>["filterOption"];
-  menuPortalTarget?: SelectProps<T, U, V>["menuPortalTarget"];
-  inputValue?: string;
   disabled?: boolean;
   isCollectionMode?: U;
   isClearable?: boolean;
-  renderValue?: () => ReactNode;
+  trigger?: ReactNode;
   title?: string;
   maxMenuHeight?: number;
   hideOnChange?: boolean | ((newValue: OnChangeValue<T, U>, actionMeta: ActionMeta<T>) => boolean);
   renderInPortal?: boolean;
   popupStyles?: string;
   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<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: T) => boolean;
   popoverPlacement?: Placement;
-};
+} & Pick<
+  SelectProps<T, U, V>,
+  | "placeholder"
+  | "autoFocus"
+  | "inputValue"
+  | "formatGroupLabel"
+  | "defaultMenuIsOpen"
+  | "virtualized"
+  | "formatOptionLabel"
+  | "isOptionDisabled"
+  | "noOptionsMessage"
+  | "forbidValuesClearInCollnMode"
+  | "filterOption"
+  | "onInputChange"
+  | "onChange"
+  | "onFocus"
+  | "components"
+>;
 
 function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
   props: Omit<Props<T, U, V>, "maxMenuHeight">,
@@ -174,40 +120,25 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
 ) {
   const {
     value,
-    virtualized,
     menuIsOpen,
-    autoFocus,
-    defaultMenuIsOpen,
-    placeholder,
-    noOptionsMessage,
     options,
-    filterOption,
-    inputValue,
     disabled,
     isCollectionMode,
     isClearable = true,
-    renderValue,
+    trigger,
     title,
     hideOnChange = true,
     renderInPortal = true,
     popupStyles,
     selectStyles = {},
-    formatGroupLabel,
-    formatOptionLabel,
     components = {},
-    onInputChange,
-    onFocus,
     onChange,
     onMenuOpen,
     onMenuClose,
     getPopupContainer,
     onSelectKeyDown,
     otherSelectProps,
-    forbidValuesClearInCollnMode,
-    isOptionDisabled,
     isSearchable = true,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    menuPortalTarget,
     popoverPlacement = "bottom-start",
     ...rest
   } = props;
@@ -219,7 +150,6 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
     },
   });
   const isPhone = useIsPhone();
-  const blurTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
   const selectRef = useRef<SelectInstance<T, U, V>>(null);
   const [triggerElement, setTriggerElement] = useState<HTMLDivElement | null>(null);
 
@@ -228,50 +158,19 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
     selectRef,
   }));
 
-  useEffect(() => {
-    if (blurTimeoutRef.current) {
-      clearTimeout(blurTimeoutRef.current);
+  const onHide = useCallback(() => {
+    const wasClosed = onMenuClose?.();
+    if (wasClosed === false) {
+      return;
     }
-  }, []);
-
-  const onHide = useCallback(
-    (restoreFocus = true) => {
-      const wasClosed = onMenuClose && onMenuClose();
-      if (wasClosed === false) {
-        return;
-      }
-      setVisible(false);
-
-      if (restoreFocus) {
-        triggerElement?.focus();
-      }
-    },
-    [onMenuClose, setVisible, 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]);
+    setVisible(false);
+  }, [onMenuClose, setVisible]);
 
   const onShow = useCallback(() => {
     if (disabled) {
       return;
     }
 
-    if (blurTimeoutRef.current) {
-      clearTimeout(blurTimeoutRef.current);
-    }
     setVisible(true);
     if (onMenuOpen) {
       onMenuOpen();
@@ -282,50 +181,6 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
     return combineStyles<T, U, V>([makeSelectInPopoverStyles(isPhone), selectStyles]);
   }, [selectStyles, isPhone]);
 
-  const onTriggerClick: React.MouseEventHandler = useCallback(
-    (event) => {
-      if (visible) {
-        onHide();
-      } else {
-        onShow();
-      }
-      event.stopPropagation();
-    },
-    [onHide, onShow, visible]
-  );
-
-  const onTriggerKeyDown: React.KeyboardEventHandler = useCallback(
-    (event) => {
-      const cmdKeyPressed = event.metaKey || event.ctrlKey;
-      if (((event.key === "Enter" && !cmdKeyPressed) || event.key === " ") && !visible) {
-        event.preventDefault();
-        onShow();
-      }
-    },
-    [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 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") {
@@ -335,7 +190,7 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
       } else if (hideOnChange) {
         onHide();
       }
-      onChange(newValue, actionMeta);
+      onChange?.(newValue, actionMeta);
     },
     [hideOnChange, onChange, onHide]
   );
@@ -350,7 +205,6 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
       paddingPopup -
       paddingMenu;
 
-  const Trigger = components.Trigger || TriggerDefault;
   const selectComponents = {
     Menu: MenuTransparent,
     DropdownIndicator: null,
@@ -360,17 +214,9 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
 
   return (
     <Popover.Root open={visible} onOpen={() => onShow()} onClose={() => onHide()}>
-      <Trigger
-        innerRef={setTriggerElement}
-        menuOpened={visible}
-        disabled={disabled}
-        valueSelected={Boolean(value)}
-        onClick={onTriggerClick}
-        onKeyDown={onTriggerKeyDown}
-      >
-        {renderValue ? renderValue() : null}
-      </Trigger>
-      <Popover.Trigger reference={triggerElement} />
+      <Popover.Trigger ref={setTriggerElement} asChild triggerEvent="click">
+        {trigger}
+      </Popover.Trigger>
       <Wrap with={Popover.Portal} if={renderInPortal} getPopupContainer={getPopupContainer}>
         <Popover.Content
           supportMobile
@@ -391,35 +237,22 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
               ref={selectRef}
               styles={styles}
               isSearchable={isSearchable}
-              onKeyDown={onKeyDown}
-              autoFocus={autoFocus}
-              onBlur={onBlur}
+              onKeyDown={onSelectKeyDown}
               value={value}
-              defaultMenuIsOpen={defaultMenuIsOpen}
               controlShouldRenderValue
               closeMenuOnScroll={false}
               closeMenuOnSelect={false}
               onChange={handleChange}
-              placeholder={placeholder}
-              onInputChange={onInputChange}
-              noOptionsMessage={noOptionsMessage}
               options={options || []}
-              filterOption={filterOption}
-              inputValue={inputValue}
               menuIsOpen
-              virtualized={virtualized}
               maxMenuHeight={maxMenuHeight}
               disabled={disabled}
-              onFocus={onFocus}
               isCollectionMode={isCollectionMode}
               isClearable={!isCollectionMode && isClearable}
-              formatGroupLabel={formatGroupLabel}
-              formatOptionLabel={formatOptionLabel}
               menuShouldBlockScroll={false}
               {...otherSelectProps}
               components={selectComponents}
-              forbidValuesClearInCollnMode={forbidValuesClearInCollnMode}
-              isOptionDisabled={isOptionDisabled}
+              inline
             />
           </SelectControlSettingsProvider>
         </Popover.Content>
@@ -432,5 +265,4 @@ 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
 export const SelectInPopover = forwardRef(SelectInPopoverInner) as SelectInPopoverType;

package/src/select/select.tsx

@@ -73,6 +73,7 @@ export type SelectProps<T = unknown, U extends boolean = boolean, V extends Grou
   disabled?: boolean;
   forbidValuesClearInCollnMode?: boolean;
   inline?: boolean;
+  placeholder?: string;
 };
 
 const FAST_OPTION_USAGE_THRESHOLD = 200;
@@ -107,8 +108,8 @@ function useSelectComponents<T, U extends boolean, V extends GroupBase<T>>({
     MenuList: virtualized
       ? MenuListVirtualized
       : components?.MenuList
-      ? components.MenuList
-      : reactSelectComponents.MenuList,
+        ? components.MenuList
+        : reactSelectComponents.MenuList,
   };
 }
 
@@ -136,7 +137,7 @@ function useSelectStyles<T, U extends boolean, V extends GroupBase<T>>({
 export const SelectComponent = forwardRef(function Select<
   T = unknown,
   U extends boolean = boolean,
-  V extends GroupBase<T> = GroupBase<T>
+  V extends GroupBase<T> = GroupBase<T>,
 >(
   {
     components,
@@ -281,7 +282,7 @@ function CreatableSelectInner<T = unknown, U extends boolean = boolean, V extend
 export const CreatableSelect = forwardRef(CreatableSelectInner) as <
   T = unknown,
   U extends boolean = boolean,
-  V extends GroupBase<T> = GroupBase<T>
+  V extends GroupBase<T> = GroupBase<T>,
 >(
   props: CreatableProps<T, U, V> & SelectProps<T, U, V>
 ) => ReturnType<typeof CreatableSelectInner>;

package/src/select/styles.ts

@@ -114,6 +114,9 @@ export const makeComponentsStyles = <T, U extends boolean, V extends GroupBase<T
     alignItems: "center",
     height: layout.inputHeight - 2,
   }),
+  multiValueRemove: (base) => {
+    return {};
+  },
   control: makeControlStyle<T, U, V>({isSingleLine: false}).control,
   group: (provided) => ({
     ...provided,

package/src/thematic-state.ts

@@ -334,7 +334,7 @@ export function useThematicState() {
           ...prev,
           ...scales,
           key: `import-${Date.now()}`,
-        } as Partial<ThemePalette>)
+        }) as Partial<ThemePalette>
     );
   }, []);
 

package/src/theme-provider.tsx

@@ -4,7 +4,7 @@ import {
   defaultLightTheme,
   defaultLightThemeStyles,
   defaultPalette,
-  selectGlobalTheme,
+  selectGlobalThemePair,
 } from "./theme-styles";
 import {layoutStyles} from "./layout-styles";
 import {
@@ -156,6 +156,15 @@ export function MenuThemeProvider({children}: {children: ReactNode}) {
   return <ThemeProvider mode={mode}>{children}</ThemeProvider>;
 }
 
+function useUpdateBrowserThemeColor(light: ThemeColors, dark: ThemeColors) {
+  useEffect(() => {
+    const lightEl = document.querySelector('meta[name="theme-color"][media*="light"]');
+    const darkEl = document.querySelector('meta[name="theme-color"][media*="dark"]');
+    lightEl?.setAttribute("content", light.mainBg);
+    darkEl?.setAttribute("content", dark.mainBg);
+  }, [light.mainBg, dark.mainBg]);
+}
+
 export function RootThemeProvider({
   initialThemeMode,
   initialPreference,
@@ -184,10 +193,13 @@ export function RootThemeProvider({
   let res = <ThemeProvider theme={getThemeColors(null, themeMode, palette)}>{children}</ThemeProvider>;
 
   // Set base context to what global CSS has, so ThemeProvider diffs against it
-  const [cssThemeColors, cssThemeStyles] = selectGlobalTheme(warm, themeMode === "dark");
+  const [[lightThemeColors, lightThemeStyles], [darkThemeColors, darkThemeStyles]] = selectGlobalThemePair(warm);
+  const [cssThemeColors, cssThemeStyles] =
+    themeMode === "dark" ? [darkThemeColors, darkThemeStyles] : [lightThemeColors, lightThemeStyles];
   res = <ThemeStylesContext.Provider value={cssThemeStyles}>{res}</ThemeStylesContext.Provider>;
   res = <RootThemeStylesContext.Provider value={cssThemeStyles}>{res}</RootThemeStylesContext.Provider>;
   res = <ThemeColorsContext.Provider value={cssThemeColors}>{res}</ThemeColorsContext.Provider>;
+  useUpdateBrowserThemeColor(lightThemeColors, darkThemeColors);
 
   res = <ThemePaletteContext.Provider value={palette}>{res}</ThemePaletteContext.Provider>;
 

package/src/theme-styles.ts

@@ -18,23 +18,30 @@ export const defaultDarkThemeStyles = createInlineStyles(defaultDarkTheme);
 const warmLightThemeStyles = createInlineStyles(warmLightTheme);
 const warmDarkThemeStyles = createInlineStyles(warmDarkTheme);
 
-export function selectGlobalTheme(warm: boolean, dark: boolean): [colors: ThemeColors, styles: ThemeStyles] {
-  if (warm) {
-    return dark ? [warmDarkTheme, warmDarkThemeStyles] : [warmLightTheme, warmLightThemeStyles];
-  } else {
-    return dark ? [defaultDarkTheme, defaultDarkThemeStyles] : [defaultLightTheme, defaultLightThemeStyles];
-  }
+type GlobalTheme = [colors: ThemeColors, styles: ThemeStyles];
+
+export function selectGlobalThemePair(warm: boolean): [light: GlobalTheme, dark: GlobalTheme] {
+  return warm
+    ? [
+        [warmLightTheme, warmLightThemeStyles],
+        [warmDarkTheme, warmDarkThemeStyles],
+      ]
+    : [
+        [defaultLightTheme, defaultLightThemeStyles],
+        [defaultDarkTheme, defaultDarkThemeStyles],
+      ];
 }
 
 const darkClassName = "dark-theme";
 const light2ClassName = "light-theme-and-dark-menu";
 const warmClassName = "warm-palette";
+const warmStickyClassName = "warm-palette-sticky";
 
 export function chooseGlobalStyles(themeMode: ThemeMode, warm: boolean) {
   const htmlElement = document.documentElement;
   htmlElement.classList.toggle(darkClassName, themeMode === "dark");
   htmlElement.classList.toggle(light2ClassName, themeMode === "light2");
-  htmlElement.classList.toggle(warmClassName, warm);
+  htmlElement.classList.toggle(warmClassName, warm || htmlElement.classList.contains(warmStickyClassName));
 
   const colorScheme = themeMode === "dark" ? "dark" : "light";
   htmlElement.style.colorScheme = colorScheme;