@fibery/ui-kit 1.39.1 → 1.40.1

package/src/select/select.tsx

@@ -0,0 +1,288 @@
+/* eslint-disable no-use-before-define */
+import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
+import {ForwardedRef, forwardRef, RefObject, useCallback, useMemo, useRef, useState} from "react";
+import BaseSelect, {
+  ActionMeta,
+  components as reactSelectComponents,
+  createFilter,
+  MenuListProps,
+  MenuProps,
+  ControlProps,
+  mergeStyles,
+  MultiValue,
+  MultiValueProps,
+  OnChangeValue,
+  OptionProps,
+  OptionsOrGroups,
+  Props as BaseSelectProps,
+  PropsValue,
+  SelectInstance,
+  SingleValue,
+  SingleValueProps,
+  StylesConfig,
+} from "react-select";
+import BaseCreatableSelect, {CreatableProps} from "react-select/creatable";
+import {ClearIndicator, NoClearIndicator} from "./components/clear-indicator";
+import {DropdownIndicator} from "./components/drop-down-indicator";
+import {GroupHeading} from "./components/group-heading";
+import {Menu} from "./components/menu";
+import {MenuListVirtualized} from "./components/menu-list-virtualized";
+import {NoOptionsMessage} from "./components/no-option-message";
+import {Option, OptionSlow} from "./components/option";
+import {useSelectControlSettings} from "./select-control-settings-context";
+import {makeComponentsStyles, makeNonVirtualizedStyles, makeVirtualizedStyles, makeZIndexStyles} from "./styles";
+import {countOptions, GroupBase, ReactSelectRefContext} from "./util";
+import _ from "lodash";
+
+export type {
+  ActionMeta,
+  GroupBase,
+  MenuListProps,
+  MenuProps,
+  ControlProps,
+  MultiValue,
+  MultiValueProps,
+  OnChangeValue,
+  OptionProps,
+  OptionsOrGroups,
+  PropsValue,
+  SingleValue,
+  SingleValueProps,
+  StylesConfig,
+  SelectInstance,
+  BaseSelectProps,
+};
+
+export {reactSelectComponents as components, MenuListVirtualized, createFilter};
+
+function GroupVirtualized() {
+  return null;
+}
+
+export function combineStyles<T, U extends boolean, V extends GroupBase<T>>(styles: StylesConfig<T, U, V>[]) {
+  return styles.reduce(mergeStyles, {});
+}
+
+export type SelectProps<T = unknown, U extends boolean = boolean, V extends GroupBase<T> = GroupBase<T>> = Omit<
+  Omit<Omit<BaseSelectProps<T, U, V>, "isMulti">, "backspaceRemovesValue">,
+  "isDisabled"
+> & {
+  virtualized?: boolean;
+  title?: string;
+  isCollectionMode?: U;
+  disabled?: boolean;
+  forbidValuesClearInCollnMode?: boolean;
+};
+
+const FAST_OPTION_USAGE_THRESHOLD = 200;
+
+function useSelectComponents<T, U extends boolean, V extends GroupBase<T>>({
+  components,
+  optionsCount,
+  virtualized,
+  isCollectionMode,
+  forbidValuesClearInCollnMode,
+}: {
+  components: SelectProps<T, U, V>["components"];
+  optionsCount: number;
+  virtualized: boolean;
+  isCollectionMode?: U;
+  forbidValuesClearInCollnMode?: boolean;
+}) {
+  const shouldUseFastOption = optionsCount > FAST_OPTION_USAGE_THRESHOLD;
+  const shouldHideMultiValueRemove = isCollectionMode && forbidValuesClearInCollnMode;
+
+  return {
+    Menu,
+    DropdownIndicator,
+    ClearIndicator,
+    MultiValueRemove: shouldHideMultiValueRemove ? NoClearIndicator : ClearIndicator,
+    NoOptionsMessage,
+    GroupHeading,
+    Option: shouldUseFastOption ? Option : OptionSlow,
+    ...components,
+    Group: virtualized ? GroupVirtualized : components?.Group ? components.Group : reactSelectComponents.Group,
+    MenuList: virtualized
+      ? MenuListVirtualized
+      : components?.MenuList
+      ? components.MenuList
+      : reactSelectComponents.MenuList,
+  };
+}
+
+function useSelectStyles<T, U extends boolean, V extends GroupBase<T>>({
+  virtualized,
+  zIndex,
+  styles,
+}: {
+  virtualized: boolean;
+  zIndex?: number;
+  styles?: SelectProps<T, U, V>["styles"];
+}) {
+  return useMemo(() => {
+    return combineStyles<T, U, V>(
+      _.compact([
+        makeComponentsStyles<T, U, V>(),
+        virtualized ? makeVirtualizedStyles<T, U, V>() : makeNonVirtualizedStyles<T, U, V>(),
+        zIndex ? makeZIndexStyles<T, U, V>(zIndex) : null,
+        styles,
+      ])
+    );
+  }, [styles, virtualized, zIndex]);
+}
+
+export const SelectComponent = forwardRef(function Select<
+  T = unknown,
+  U extends boolean = boolean,
+  V extends GroupBase<T> = GroupBase<T>
+>(
+  {
+    components,
+    isCollectionMode,
+    menuPortalTarget,
+    onKeyDown,
+    styles,
+    virtualized = true,
+    onMenuOpen,
+    onMenuClose,
+    onChange,
+    forbidValuesClearInCollnMode,
+    ...rest
+  }: SelectProps<T, U, V>,
+  forwardedRef: ForwardedRef<SelectInstance<T, U, V>>
+) {
+  const {getPopupContainerElement, zIndex} = useSelectControlSettings();
+  const [menuOpenState, setMenuOpenState] = useState(rest.defaultMenuIsOpen);
+  const optionsCount = useMemo(() => countOptions(rest.options), [rest.options]);
+
+  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":
+          // we can't 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 as HTMLInputElement).selectionStart = 0;
+          } else {
+            (e.target as HTMLInputElement).setSelectionRange(0, 0);
+          }
+          break;
+        case "End": {
+          e.preventDefault();
+          const len = (e.target as HTMLInputElement).value.length;
+          if (e.shiftKey) {
+            (e.target as HTMLInputElement).selectionEnd = len;
+          } else {
+            (e.target as HTMLInputElement).setSelectionRange(len, len);
+          }
+          break;
+        }
+        default:
+      }
+      onKeyDown && onKeyDown(e);
+    },
+    [onKeyDown, menuOpenState]
+  );
+
+  const selectRef = useRef<SelectInstance<T, U, V> | null>(null);
+  const composedRef = useComposedRefs(forwardedRef, selectRef);
+
+  const selectComponents = useSelectComponents({
+    components,
+    optionsCount,
+    virtualized,
+    isCollectionMode,
+    forbidValuesClearInCollnMode,
+  });
+
+  const combinedStyles = useSelectStyles({virtualized, zIndex, styles});
+
+  return (
+    <ReactSelectRefContext.Provider value={selectRef as RefObject<SelectInstance>}>
+      <BaseSelect<T, U, V>
+        ref={composedRef}
+        // 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={combinedStyles}
+        isMulti={isCollectionMode}
+        backspaceRemovesValue={isCollectionMode && !forbidValuesClearInCollnMode}
+        tabSelectsValue={false}
+        components={selectComponents}
+        {...rest}
+        onKeyDown={handleKeyDown}
+        onMenuOpen={onMenuOpenWrapped}
+        onMenuClose={onMenuCloseWrapped}
+        onChange={rest.disabled ? undefined : onChange}
+        isDisabled={rest.disabled}
+      />
+    </ReactSelectRefContext.Provider>
+  );
+}) as <Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  props: SelectProps<Option, IsMulti, Group> & {ref?: any}
+) => JSX.Element;
+
+function CreatableSelectInner<T = unknown, U extends boolean = boolean, V extends GroupBase<T> = GroupBase<T>>(
+  {
+    components,
+    isCollectionMode,
+    menuPortalTarget,
+    styles = {},
+    virtualized = true,
+    forbidValuesClearInCollnMode,
+    ...rest
+  }: CreatableProps<T, U, V> & SelectProps<T, U, V>,
+  ref: ForwardedRef<SelectInstance<T, U, V>>
+) {
+  const optionsCount = useMemo(() => countOptions(rest.options), [rest.options]);
+
+  const selectComponents = useSelectComponents({
+    components,
+    optionsCount,
+    virtualized,
+    isCollectionMode,
+    forbidValuesClearInCollnMode,
+  });
+
+  const combinedStyles = useSelectStyles({virtualized, styles});
+
+  return (
+    <BaseCreatableSelect
+      ref={ref}
+      menuPortalTarget={menuPortalTarget}
+      menuPlacement={"auto"}
+      styles={combinedStyles}
+      isMulti={isCollectionMode}
+      backspaceRemovesValue={isCollectionMode}
+      tabSelectsValue={false}
+      components={selectComponents}
+      {...rest}
+      isDisabled={rest.disabled}
+    />
+  );
+}
+
+export const CreatableSelect = forwardRef(CreatableSelectInner) as <
+  T = unknown,
+  U extends boolean = boolean,
+  V extends GroupBase<T> = GroupBase<T>
+>(
+  props: CreatableProps<T, U, V> & SelectProps<T, U, V>
+) => ReturnType<typeof CreatableSelectInner>;

package/src/table.tsx

@@ -1,6 +1,7 @@
 import {PureComponent, ReactNode} from "react";
 import {border, space, themeVars} from "./design-system";
 import {css, cx} from "@linaria/core";
+import {mobileRootSelector} from "./mobile-styles";
 
 const tableStyle = css`
   ${{
@@ -18,18 +19,20 @@ export class Table extends PureComponent<{children: ReactNode}> {
     return <div className={tableStyle}>{children}</div>;
   }
 }
+const minWidthProperty = "--fibery-min-column-width";
 
 const rowStyle = css`
-  ${{
-    display: "grid",
-    gridTemplateColumns: "1fr minmax(140px, 7fr) 3fr minmax(140px, 3fr) 32px",
-    borderRadius: border.radius6,
-    padding: space.s6,
-    paddingLeft: space.s12,
-    marginBottom: space.s8,
-    alignItems: "center",
-    color: themeVars.textColor,
-  }}
+  ${minWidthProperty}: 140px;
+  ${mobileRootSelector} & {
+    ${minWidthProperty}: 120px;
+  }
+  display: grid;
+  grid-template-columns: 1fr minmax(var(${minWidthProperty}), 7fr) 3fr minmax(var(${minWidthProperty}), 3fr) 32px;
+  border-radius: ${border.radius6}px;
+  padding: ${space.s6}px ${space.s6}px ${space.s12}px ${space.s6}px;
+  margin-bottom: ${space.s8}px;
+  align-items: center;
+  color: ${themeVars.textColor};
 `;
 
 const cellSingleLineStyle = css`

package/src/toggle-button/toggle-button.tsx

@@ -13,8 +13,6 @@ export const toggleButtonCss = css`
   box-sizing: border-box;
   display: flex;
   align-items: center;
-  min-height: 24px;
-  font-size: ${textStyles.small.fontSize}px;
   border-radius: ${border.radius8}px;
 
   transition-property: border, background-color, color, opacity, box-shadow;
@@ -23,8 +21,6 @@ export const toggleButtonCss = css`
   color: ${themeVars.textColor};
   ${iconColorVar}: ${themeVars.colorIconButtonGhostNeutral};
 
-  ${iconSizeVar}: 16px;
-
   border: 1.5px solid ${themeVars.colorBorderReactionsHover};
   background-color: ${themeVars.colorBgReactionsDefault};
 
@@ -37,13 +33,29 @@ export const toggleButtonCss = css`
   line-height: 16px;
   user-select: none;
 
+  &[data-size="small"] {
+    font-size: ${textStyles.small.fontSize}px;
+    line-height: 16px;
+    min-height: 24px;
+
+    ${iconSizeVar}: 16px;
+  }
+
   &[data-size="medium"] {
+    font-size: ${textStyles.regular.fontSize}px;
+    line-height: 20px;
     min-height: 28px;
+
+    ${iconSizeVar}: 18px;
   }
 
   &[data-size="large"] {
+    font-size: ${textStyles.regular.fontSize}px;
+    line-height: 20px;
     min-height: 32px;
     padding-inline: 7px;
+
+    ${iconSizeVar}: 18px;
   }
 
   &:not(:disabled, [aria-readonly="true"]) {
@@ -55,6 +67,11 @@ export const toggleButtonCss = css`
     &:is(:active, [aria-expanded="true"]) {
       background-color: ${themeVars.colorBgReactionsHover};
       border-color: ${themeVars.colorBorderReactionsHover};
+
+      &:is([aria-pressed="true"], [aria-checked="true"]) {
+        background-color: ${themeVars.colorBgReactionsSelectedHover};
+        border-color: ${themeVars.colorBorderReactionsSelectedHover};
+      }
     }
   }
 

package/src/toggle-on-off.tsx

@@ -3,6 +3,7 @@ import {FC, ComponentProps, useMemo} from "react";
 import {ThemeColors} from "./design-system";
 import {useTheme} from "./theme-provider";
 import {Toggle} from "./toggle";
+import {useIsPhone} from "./use-is-phone";
 
 const getBackgroundColors = (accentColor: string | undefined, theme: ThemeColors) => {
   return accentColor && chroma.valid(accentColor)
@@ -21,9 +22,17 @@ interface ToggleOnOffProps extends Omit<ComponentProps<typeof Toggle>, "backgrou
 }
 
 export const ToggleOnOff: FC<ToggleOnOffProps> = ({value, color, ...rest}) => {
+  const isPhone = useIsPhone();
   const theme = useTheme();
   const {enabledColor, disabledColor} = useMemo(() => getBackgroundColors(color, theme), [color, theme]);
-  return <Toggle value={Boolean(value)} backgroundColor={value ? enabledColor : disabledColor} {...rest} />;
+  return (
+    <Toggle
+      value={Boolean(value)}
+      size={isPhone ? "large" : "medium"}
+      backgroundColor={value ? enabledColor : disabledColor}
+      {...rest}
+    />
+  );
 };
 
 interface ReduxFormToggleOnOffProps extends ToggleOnOffProps {