@fibery/ui-kit 1.34.8 → 1.36.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,7 +182,9 @@ 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>;
+  isOptionDisabled?: (option: Option) => boolean;
 };
 
 function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
@@ -221,6 +222,8 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
     getPopupContainer,
     onSelectKeyDown,
     otherSelectProps,
+    forbidValuesClearInCollnMode,
+    isOptionDisabled,
   } = props;
   const [triggerElement, setTriggerElement] = useState<HTMLDivElement | null>(null);
   const [visible, setVisible] = useControllableState({
@@ -421,6 +424,8 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
                 IndicatorSeparator: null,
                 Menu: mergedComponents.Menu as $TSFixMe,
               }}
+              forbidValuesClearInCollnMode={forbidValuesClearInCollnMode}
+              isOptionDisabled={isOptionDisabled}
             />
           </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/styles-utils.tsx

@@ -0,0 +1,16 @@
+import {css} from "@linaria/core";
+export const visuallyHidden = css`
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+`;
+
+export const ellipsis = css`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;

package/src/tab-nav/tab-nav.tsx

@@ -0,0 +1,208 @@
+import {createContext} from "@fibery/react/src/create-context";
+import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
+import {css, cx} from "@linaria/core";
+import {
+  NavigationMenu,
+  NavigationMenuItem,
+  NavigationMenuItemProps,
+  NavigationMenuLink,
+  NavigationMenuLinkProps,
+  NavigationMenuList,
+  NavigationMenuListProps,
+  NavigationMenuProps,
+} from "@radix-ui/react-navigation-menu";
+import {forwardRef, ReactNode, RefObject, useLayoutEffect, useRef} from "react";
+import {border, fontWeight, space, textStyles, themeVars} from "../design-system";
+import {ellipsis} from "../styles-utils";
+import {TooltipIfOverflown} from "../tooltip-if-overflown";
+
+const tabNavIndicatorWidth = 100;
+
+const tabNavList = css`
+  display: flex;
+  margin: 0;
+  padding: 0;
+  gap: ${space.s6}px;
+`;
+
+const tabNavItem = css`
+  flex-shrink: 0;
+  padding-top: ${space.s4}px;
+  padding-bottom: ${space.s8}px;
+  max-width: 220px;
+  list-style: none;
+`;
+
+const tabButton = css`
+  all: unset;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 24px;
+  padding: ${space.s4}px ${space.s6}px;
+  box-sizing: border-box;
+  border-radius: ${border.radius6}px;
+  cursor: pointer;
+  user-select: none;
+  color: ${themeVars.accentTextColor};
+  transition-property: border, background-color, color, opacity;
+  transition-duration: 0.15s;
+
+  font-size: ${textStyles.small.fontSize}px;
+  font-weight: ${fontWeight.medium};
+  line-height: 16px;
+
+  &:hover,
+  &:focus-visible {
+    background-color: ${themeVars.colorBgTabHover};
+    color: ${themeVars.textColor};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${themeVars.colorBorderNeutralFocusRing};
+  }
+
+  &[data-active] {
+    color: ${themeVars.textColor};
+  }
+`;
+
+const tabNavButtonText = css`
+  padding: 0 ${space.s4}px;
+`;
+
+const tabNavIndicatorTrack = css`
+  position: relative;
+`;
+
+const tabNavIndicator = css`
+  display: none;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  background-color: ${themeVars.colorBgButtonSolidNeutralDefault};
+  height: 2px;
+  width: ${tabNavIndicatorWidth}px;
+`;
+
+const tabNavIndicatorMounted = css`
+  will-change: transition;
+  transition: transform 150ms ease;
+  transform-origin: 0;
+
+  .${tabNavIndicatorTrack}:has([data-active]) & {
+    display: block;
+  }
+`;
+
+const [TabNavIndicatorProvider, useTabNavIndicatorCtx] =
+  createContext<React.RefObject<HTMLDivElement>>("TabNavIndicatorContext");
+
+export type TabNavRootProps = NavigationMenuProps;
+
+export const TabNavRoot = ({className, children, ...props}: NavigationMenuProps) => {
+  const indicatorRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <NavigationMenu className={className} {...props}>
+      <div className={tabNavIndicatorTrack}>
+        <div ref={indicatorRef} className={tabNavIndicator} />
+
+        <TabNavIndicatorProvider value={indicatorRef}>{children}</TabNavIndicatorProvider>
+      </div>
+    </NavigationMenu>
+  );
+};
+
+export const TabNavList = forwardRef<HTMLUListElement, NavigationMenuListProps>(
+  ({className, children, ...props}, ref) => {
+    return (
+      <NavigationMenuList ref={ref} className={cx(className, tabNavList)} {...props}>
+        {children}
+      </NavigationMenuList>
+    );
+  }
+);
+
+const useTabNavIndicator = (
+  {
+    active,
+    itemRef,
+  }: {
+    active?: boolean;
+    itemRef: RefObject<HTMLElement>;
+  },
+  deps: Array<unknown> = []
+) => {
+  const indicatorRef = useTabNavIndicatorCtx();
+
+  useLayoutEffect(() => {
+    if (active && itemRef.current && indicatorRef.current) {
+      indicatorRef.current.style.transform = `translateX(${itemRef.current.offsetLeft}px) scaleX(${
+        itemRef.current.offsetWidth / tabNavIndicatorWidth
+      })`;
+      indicatorRef.current.classList.add(tabNavIndicatorMounted);
+    }
+  }, [
+    active,
+    indicatorRef,
+    itemRef,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    ...deps,
+  ]);
+};
+
+export const TabNavItem = forwardRef<HTMLLIElement, NavigationMenuItemProps & {active?: boolean}>(
+  ({className, children, active, ...props}, forwardedRef) => {
+    const itemRef = useRef(null);
+    const ref = useComposedRefs(itemRef, forwardedRef);
+
+    useTabNavIndicator({active, itemRef}, [children]);
+
+    return (
+      <NavigationMenuItem ref={ref} className={cx(tabNavItem, className)} {...props}>
+        {children}
+      </NavigationMenuItem>
+    );
+  }
+);
+
+export const TabNavLink = forwardRef<
+  HTMLAnchorElement,
+  Omit<NavigationMenuLinkProps, "asChild"> & {
+    before?: ReactNode;
+    after?: ReactNode;
+    itemClassName?: string;
+  }
+>(function TabNavLink({children, className, itemClassName, active, before, after, href, ...linkProps}, forwardedRef) {
+  const renderAsButton = typeof href === "undefined";
+
+  const Component = renderAsButton ? "button" : "a";
+  const btnProps = renderAsButton
+    ? ({type: "button", "aria-current": active ? "true" : undefined} as const)
+    : undefined;
+
+  return (
+    <TooltipIfOverflown title={children}>
+      {({setNode}) => (
+        <TabNavItem className={itemClassName} active={active}>
+          <NavigationMenuLink
+            ref={forwardedRef}
+            className={cx(tabButton, className)}
+            active={active}
+            {...linkProps}
+            asChild
+          >
+            <Component {...btnProps}>
+              {before}
+              <span ref={setNode} className={cx(tabNavButtonText, ellipsis)}>
+                {children}
+              </span>
+              {after}
+            </Component>
+          </NavigationMenuLink>
+        </TabNavItem>
+      )}
+    </TooltipIfOverflown>
+  );
+});

package/src/table.tsx

@@ -0,0 +1,91 @@
+import {PureComponent, ReactNode} from "react";
+import {border, space, themeVars} from "./design-system";
+import {css, cx} from "@linaria/core";
+
+const tableStyle = css`
+  ${{
+    backgroundColor: themeVars.transparent,
+    paddingTop: space.s12,
+    paddingBottom: space.s12,
+    paddingLeft: space.s6,
+    paddingRight: space.s6,
+  }}
+`;
+
+export class Table extends PureComponent<{children: ReactNode}> {
+  render() {
+    const {children} = this.props;
+    return <div className={tableStyle}>{children}</div>;
+  }
+}
+
+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,
+  }}
+`;
+
+const cellSingleLineStyle = css`
+  ${{
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis",
+  }}
+`;
+
+const selectedRowStyle = css`
+  ${{
+    background: themeVars.unitBg,
+    "&:hover": {
+      background: themeVars.unitBg,
+    },
+  }}
+`;
+
+export class Row extends PureComponent<{
+  children: ReactNode;
+  className?: string;
+  selected?: boolean;
+  onClick?: React.MouseEventHandler;
+}> {
+  render() {
+    const {children, className, selected, onClick} = this.props;
+    return (
+      <div className={cx(rowStyle, selected && selectedRowStyle, className)} onClick={onClick}>
+        {children}
+      </div>
+    );
+  }
+}
+
+export const cellClassName = css`
+  ${{
+    display: "flex",
+    justifyContent: "flex-start",
+    alignItems: "center",
+    paddingTop: space.s4,
+    paddingBottom: space.s4,
+  }}
+`;
+
+export class Cell extends PureComponent<{
+  children: ReactNode;
+  className?: string;
+  nowrap?: boolean;
+}> {
+  render() {
+    const {children, className, nowrap} = this.props;
+    return (
+      <div className={cx(cellClassName, className)}>
+        {nowrap ? <div className={cellSingleLineStyle}>{children}</div> : children}
+      </div>
+    );
+  }
+}

package/src/toast/primitives.tsx

@@ -8,9 +8,8 @@ import CloseIcon from "../icons/react/Close";
 
 const viewportCss = css`
   position: fixed;
-  left: 50%;
+  right: 0;
   bottom: 0;
-  transform: translateX(-50%);
 
   display: flex;
   flex-direction: column-reverse;
@@ -24,7 +23,7 @@ const viewportCss = css`
   transition: bottom ${transition}; // bottom may change dynamically
 
   &:not(:empty) {
-    padding: ${space.s24}px; // increased mouse hover area to pause timers of toast
+    margin: ${space.s24}px;
   }
 `;
 
@@ -38,10 +37,9 @@ export const ToastViewport = forwardRef<
 const rootCss = css`
   user-select: auto !important;
 
-  background-color: ${themeVars.colorBgToastDefault};
-  padding: ${space.s12}px ${space.s8 * 2}px;
+  background-color: ${themeVars.colorBgPopup};
+  box-shadow: ${themeVars.shadowPopup};
   border-radius: ${border.radius6}px;
-  box-shadow: ${themeVars.shadowModal};
 
   will-change: opacity;
 
@@ -128,7 +126,8 @@ export const ToastRoot = forwardRef<ElementRef<typeof ToastPrimitives.Root>, Toa
 );
 
 const titleCss = css`
-  ${textStyles.heading5};
+  ${textStyles.regular};
+  word-break: break-word;
 `;
 
 export const ToastTitle = forwardRef<ElementRef<typeof ToastPrimitives.Title>, ToastPrimitives.ToastTitleProps>(

package/src/toast/toast-action.tsx

@@ -3,6 +3,8 @@ import {Action as RadixToastAction, type ToastActionProps} from "@radix-ui/react
 import {ElementRef, forwardRef} from "react";
 import {ButtonProps, Button} from "../button/button";
 import {space} from "../design-system";
+import {makeButtonColors} from "../button/make-button-colors";
+import {useTheme} from "../theme-provider";
 
 const toastActionCss = css`
   margin-top: -${space.s4}px;
@@ -10,13 +12,17 @@ const toastActionCss = css`
   flex-shrink: 0;
 `;
 
+export {RadixToastAction};
+
 export const ToastAction = forwardRef<
   ElementRef<typeof RadixToastAction>,
   ButtonProps & {altText: ToastActionProps["altText"]}
 >(({children, altText, ...props}, ref) => {
+  const theme = useTheme();
+  const buttonColors = theme.mode === "dark" ? makeButtonColors(theme.textColor, "outline") : {};
   return (
     <RadixToastAction className={toastActionCss} ref={ref} altText={altText} asChild>
-      <Button variant="outline" color="neutral" {...props}>
+      <Button style={buttonColors} variant="outline" color="neutral" {...props}>
         {children}
       </Button>
     </RadixToastAction>

package/src/toast/toast-queue.ts

@@ -3,7 +3,7 @@ import type {ToastProps} from "./toast";
 
 export type AddToastProps = Pick<
   ToastProps,
-  "type" | "title" | "subTitle" | "icon" | "action" | "duration" | "open" | "dismissable"
+  "type" | "title" | "subTitle" | "icon" | "action" | "duration" | "open" | "dismissable" | "variant"
 > & {
   id?: string;
 };
@@ -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();