@fibery/ui-kit 1.34.8 → 1.35.0

package/src/select/index.tsx

@@ -1,7 +1,8 @@
+import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
 import {forwardRef, RefObject, useCallback, useMemo, useRef, useState} from "react";
 import BaseSelect, {
   ActionMeta,
-  components as reactSelectComponents,
+  Props as BaseSelectProps,
   createFilter,
   MenuListProps,
   MenuProps,
@@ -11,43 +12,47 @@ import BaseSelect, {
   OnChangeValue,
   OptionProps,
   OptionsOrGroups,
-  Props as BaseSelectProps,
   PropsValue,
+  components as reactSelectComponents,
   SelectInstance,
   SingleValue,
   SingleValueProps,
   StylesConfig,
 } from "react-select";
 import BaseCreatableSelect, {CreatableProps} from "react-select/creatable";
-import {componentsStyles, singleLineComponentsStyle, virtualizedStyles, zIndexStyles} from "./styles";
-import {useSelectControlSettings} from "./select-control-settings-context";
-import {Option, OptionSlow} from "./custom-select-partials/option";
-import {Menu} from "./custom-select-partials/menu";
-import {GroupHeading} from "./custom-select-partials/group-heading";
+import {ClearIndicator, NoClearIndicator} from "./custom-select-partials/clear-indicator";
 import {DropdownIndicator} from "./custom-select-partials/drop-down-indicator";
+import {GroupHeading} from "./custom-select-partials/group-heading";
+import {Menu} from "./custom-select-partials/menu";
+import {MenuListVirtualized} from "./custom-select-partials/menu-list-virtualized";
 import {NoOptionsMessage} from "./custom-select-partials/no-option-message";
-import {ClearIndicator} from "./custom-select-partials/clear-indicator";
+import {Option, OptionSlow} from "./custom-select-partials/option";
+import {useSelectControlSettings} from "./select-control-settings-context";
+import {
+  componentsStyles,
+  nonVirtualizedStyles,
+  singleLineComponentsStyle,
+  virtualizedStyles,
+  zIndexStyles,
+} from "./styles";
 import {countOptions, GroupBase, ReactSelectRefContext} from "./util";
-import {MenuListVirtualized} from "./custom-select-partials/menu-list-virtualized";
-import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
 
+export {reactSelectComponents as components, MenuListVirtualized};
 export type {
-  OptionsOrGroups,
+  ActionMeta,
   GroupBase,
-  StylesConfig,
-  MenuProps,
   MenuListProps,
-  OptionProps,
-  SingleValueProps,
-  MultiValueProps,
-  SingleValue,
+  MenuProps,
   MultiValue,
-  ActionMeta,
+  MultiValueProps,
   OnChangeValue,
+  OptionProps,
+  OptionsOrGroups,
   PropsValue,
+  SingleValue,
+  SingleValueProps,
+  StylesConfig,
 };
-export {reactSelectComponents as components};
-export {MenuListVirtualized};
 
 //Group dummy for virtualized option-lists. For performance.
 function GroupVirtualized() {
@@ -71,6 +76,7 @@ export type SelectProps<
   virtualized?: boolean;
   isCollectionMode?: IsMulti;
   disabled?: boolean;
+  forbidValuesClearInCollnMode?: boolean;
 };
 
 export function SingleRowSelect<
@@ -110,6 +116,7 @@ export const Select = forwardRef(function Select<
     onMenuOpen,
     onMenuClose,
     onChange,
+    forbidValuesClearInCollnMode,
     ...rest
   }: SelectProps<Option, IsMulti, Group>,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -161,11 +168,10 @@ export const Select = forwardRef(function Select<
     },
     [onKeyDown, menuOpenState]
   );
-
   const combinedStyles = useMemo(() => {
     return combineStyles<Option, IsMulti, Group>([
       componentsStyles,
-      virtualized ? virtualizedStyles : {},
+      virtualized ? virtualizedStyles : nonVirtualizedStyles,
       zIndex ? zIndexStyles(zIndex) : {},
       styles,
     ] as StylesConfig<Option, IsMulti, Group>[]);
@@ -183,7 +189,7 @@ export const Select = forwardRef(function Select<
         menuPlacement={"auto"}
         styles={combinedStyles}
         isMulti={isCollectionMode}
-        backspaceRemovesValue={isCollectionMode}
+        backspaceRemovesValue={isCollectionMode && !forbidValuesClearInCollnMode}
         tabSelectsValue={false}
         components={{
           Menu: Menu,
@@ -195,7 +201,7 @@ export const Select = forwardRef(function Select<
    Read Option definition for more info
    bug here: https://the.fibery.io/SoftDev/bug/Select-option-behaviour-is-incorrect-9413
    */
-          MultiValueRemove: ClearIndicator,
+          MultiValueRemove: isCollectionMode && forbidValuesClearInCollnMode ? NoClearIndicator : ClearIndicator,
           NoOptionsMessage,
           GroupHeading,
           Option: optionsCount > FAST_OPTION_USAGE_THRESHOLD ? Option : OptionSlow,
@@ -253,15 +259,20 @@ export function CreatableSelectInner<
     return countOptions<Option, Group>(rest.options);
   }, [rest.options]);
 
+  const combinedStyles = useMemo(() => {
+    return combineStyles<Option, IsMulti, Group>([
+      componentsStyles,
+      virtualized ? virtualizedStyles : nonVirtualizedStyles,
+      styles,
+    ] as StylesConfig<Option, IsMulti, Group>[]);
+  }, [styles, virtualized]);
+
   return (
     <BaseCreatableSelect
       ref={ref}
       menuPortalTarget={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}

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

@@ -1,6 +1,5 @@
+import {useControllableState} from "@fibery/react/src/use-controllable-state";
 import {css, cx} from "@linaria/core";
-import {border, space, textStyles} from "../design-system";
-import {inputOverrides} from "../antd/styles";
 import React, {
   ComponentProps,
   ComponentType,
@@ -13,8 +12,12 @@ import React, {
   useRef,
   useState,
 } from "react";
+import {inputOverrides} from "../antd/styles";
+import {border, space, textStyles} from "../design-system";
 import {Popup} from "../popup";
 import {$TSFixMe} from "../tsfixme";
+import {useIsPhone} from "../use-is-phone";
+import {Menu} from "./custom-select-partials/menu";
 import {
   ActionMeta,
   combineStyles,
@@ -27,9 +30,6 @@ import {
   StylesConfig,
 } from "./index";
 import {SelectControlSettingsProvider} from "./select-control-settings-context";
-import {Menu} from "./custom-select-partials/menu";
-import {useIsPhone} from "../use-is-phone";
-import {useControllableState} from "@fibery/react/src/use-controllable-state";
 
 const offset = [0, space.s4] as [number, number];
 const popupHeightVH = 45;
@@ -53,10 +53,6 @@ const popupContainerClassName = css`
 const popupClassName = css`
   min-width: 320px;
   max-width: 440px;
-  padding-top: ${popupPaddingTop}px;
-  padding-bottom: ${popupPaddingBottom}px;
-  padding-left: ${space.s8}px;
-  padding-right: ${space.s8}px;
 `;
 const mobileClassName = css`
   padding-top: ${space.s12}px;
@@ -85,10 +81,8 @@ const valueClassName = css`
 
 const titleClassName = css`
   ${textStyles.heading6}
-  padding-top: ${space.s6}px;
-  padding-left: ${space.s8}px;
-  padding-right: ${space.s8}px;
-  padding-bottom: ${space.s12}px;
+  padding-top: ${space.s12}px;
+  padding-inline: ${space.s12}px;
 `;
 
 export const valueMaxHeight = 116;
@@ -98,6 +92,8 @@ export const selectInPopupStyles = {
     ...props,
     minWidth: 180,
     width: "100%",
+    paddingTop: space.s6,
+    paddingInline: space.s6,
   }),
   option: (props: $TSFixMe) => ({
     ...props,
@@ -110,13 +106,16 @@ export const selectInPopupStyles = {
     ...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",
-    marginTop: space.s6,
-    marginBottom: 0,
+    marginBlock: 0,
     boxShadow: "none !important",
     borderRadius: border.radius4,
   }),
@@ -174,7 +173,7 @@ type Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = {
   popupStyles?: string;
   selectStyles?: StylesConfig<Option, IsMulti, Group>;
   formatGroupLabel?: (group: Group) => ReactNode;
-  formatOptionLabel?: (option: Option) => ReactNode;
+  formatOptionLabel?: (option: Option, {context}: {context: "menu" | "value"}) => ReactNode;
   components?: ComponentsConfig;
   onInputChange?: (s: string, actionType: {action: string}) => void;
   onFocus?: () => void;
@@ -183,6 +182,7 @@ type Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = {
   onMenuClose?: () => void | boolean;
   getPopupContainer?: () => HTMLElement;
   onSelectKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+  forbidValuesClearInCollnMode?: boolean;
   otherSelectProps?: Record<string, unknown>;
 };
 
@@ -221,6 +221,7 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
     getPopupContainer,
     onSelectKeyDown,
     otherSelectProps,
+    forbidValuesClearInCollnMode,
   } = props;
   const [triggerElement, setTriggerElement] = useState<HTMLDivElement | null>(null);
   const [visible, setVisible] = useControllableState({
@@ -421,6 +422,7 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
                 IndicatorSeparator: null,
                 Menu: mergedComponents.Menu as $TSFixMe,
               }}
+              forbidValuesClearInCollnMode={forbidValuesClearInCollnMode}
             />
           </SelectControlSettingsProvider>
         </Popup>

package/src/select/styles.ts

@@ -2,9 +2,9 @@ import {css} from "@linaria/core";
 import type {ControlProps, CSSObjectWithLabel, StylesConfig} from "react-select";
 import {inputOverrides} from "../antd/styles";
 import {layout, space, themeVars} from "../design-system";
-import {OptionNulledStyles, OptionNulledVitualizedStyles} from "./custom-select-partials/option";
-import {MenuListNulledStyles, MenuNulledStyles} from "./custom-select-partials/menu";
 import {groupHeadingNulledStyles} from "./custom-select-partials/group-heading";
+import {MenuListNulledStyles, MenuNulledStyles} from "./custom-select-partials/menu";
+import {OptionNulledStyles, OptionNulledVitualizedStyles} from "./custom-select-partials/option";
 
 export const expanderExpandedStyle = css`
   transform: rotate(180deg);
@@ -50,6 +50,14 @@ export const virtualizedStyles: StylesConfig = {
   }),
 };
 
+export const nonVirtualizedStyles: StylesConfig = {
+  menuList: (provided) => ({
+    ...provided,
+    paddingTop: 6,
+    paddingBottom: 6,
+  }),
+};
+
 export const zIndexStyles = (zIndex: number): StylesConfig => ({
   menuPortal: (provided) => ({
     ...provided,

package/src/toast/toast-queue.ts

@@ -93,7 +93,7 @@ export const makeToastQueue = ({maxActiveToasts = 1, onToastAdd, transformToast}
     getActiveToasts() {
       return activeToasts;
     },
-    addButtomOffset: (bottomOffset: number) => {
+    addBottomOffset: (bottomOffset: number) => {
       const id = `${Math.random()}`;
       bottomOffsets.push({id, bottomOffset});
       pubSub.publish();

package/src/tooltip.tsx

@@ -4,6 +4,8 @@ import {forwardRef, type ReactNode, type SyntheticEvent} from "react";
 import {border, fontWeight, lineHeight, space, themeVars, tooltipDelay} from "./design-system";
 import {ShortcutBadge} from "./shortcut-badge";
 
+const isFlagPresent = (flag: string) => new RegExp(`[?&]${flag}\\b`).test(window.location.search);
+
 const preventDefaultAndStopPropagation = (e: SyntheticEvent) => {
   e.preventDefault();
   e.stopPropagation();
@@ -175,6 +177,10 @@ export const Tooltip = forwardRef<HTMLButtonElement, TooltipProps>(
         }
       : null;
 
+    if (isFlagPresent("no-tooltips")) {
+      return <>{children}</>;
+    }
+
     return (
       <TooltipPrimitive.Root
         delayDuration={instant ? 0 : tooltipDelay.enter}