@fibery/ui-kit 1.19.0 → 1.20.0

package/src/icons/react/RicheditorMarkTextBackgroundColor.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import RicheditorMarkTextBackgroundColorSvg from '../ast/RicheditorMarkTextBackgroundColor';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const RicheditorMarkTextBackgroundColor = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={RicheditorMarkTextBackgroundColorSvg} />;
+
+RicheditorMarkTextBackgroundColor.displayName = 'RicheditorMarkTextBackgroundColor';
+export default RicheditorMarkTextBackgroundColor;

package/src/icons/react/index.tsx

@@ -9,6 +9,7 @@ export { default as AddReactions } from './AddReactions';
 export { default as Add } from './Add';
 export { default as AiAssistant } from './AiAssistant';
 export { default as AiAvatar } from './AiAvatar';
+export { default as AlertTriangle } from './AlertTriangle';
 export { default as AntdFilledCheckCircle } from './AntdFilledCheckCircle';
 export { default as AntdFilledCloseCircle } from './AntdFilledCloseCircle';
 export { default as AntdFilledExclamationCircle } from './AntdFilledExclamationCircle';
@@ -58,6 +59,7 @@ export { default as Delete } from './Delete';
 export { default as Demo } from './Demo';
 export { default as DoubleArrowLeft } from './DoubleArrowLeft';
 export { default as DoubleArrowRight } from './DoubleArrowRight';
+export { default as DragBlockHandleSingle } from './DragBlockHandleSingle';
 export { default as DragBlockHandle } from './DragBlockHandle';
 export { default as DragHandle } from './DragHandle';
 export { default as DynamicFilterValue } from './DynamicFilterValue';
@@ -70,6 +72,7 @@ export { default as ExtensionComments } from './ExtensionComments';
 export { default as ExtensionFiles } from './ExtensionFiles';
 export { default as ExtensionReferences } from './ExtensionReferences';
 export { default as ExtensionWorkflow } from './ExtensionWorkflow';
+export { default as Eye } from './Eye';
 export { default as FavoritesChecked } from './FavoritesChecked';
 export { default as FavoritesOff } from './FavoritesOff';
 export { default as Favorites } from './Favorites';
@@ -114,6 +117,7 @@ export { default as Monitor } from './Monitor';
 export { default as MoreCompact } from './MoreCompact';
 export { default as More } from './More';
 export { default as MySpace } from './MySpace';
+export { default as NetworkAdd } from './NetworkAdd';
 export { default as Network } from './Network';
 export { default as Notifications } from './Notifications';
 export { default as ObjChild } from './ObjChild';
@@ -130,6 +134,7 @@ export { default as People } from './People';
 export { default as Photo } from './Photo';
 export { default as Popup } from './Popup';
 export { default as Posts } from './Posts';
+export { default as RemovePeople } from './RemovePeople';
 export { default as Remove } from './Remove';
 export { default as Reply } from './Reply';
 export { default as Restore } from './Restore';
@@ -167,9 +172,9 @@ export { default as RicheditorListOrdered } from './RicheditorListOrdered';
 export { default as RicheditorListUnindent } from './RicheditorListUnindent';
 export { default as RicheditorMarkCode } from './RicheditorMarkCode';
 export { default as RicheditorMarkEm } from './RicheditorMarkEm';
-export { default as RicheditorMarkHighlight } from './RicheditorMarkHighlight';
 export { default as RicheditorMarkStrike } from './RicheditorMarkStrike';
 export { default as RicheditorMarkStrong } from './RicheditorMarkStrong';
+export { default as RicheditorMarkTextBackgroundColor } from './RicheditorMarkTextBackgroundColor';
 export { default as RicheditorMarkUnderline } from './RicheditorMarkUnderline';
 export { default as RicheditorOpenLink } from './RicheditorOpenLink';
 export { default as RicheditorTableCreate } from './RicheditorTableCreate';

package/src/loaders.tsx

@@ -16,7 +16,7 @@ export const LoadingView = styled.div<{absolute: boolean; backgroundColor?: stri
     left: 0,
     bottom: 0,
     right: 0,
-    padding: space.xl,
+    padding: space.s24,
   }}
 `;
 
@@ -28,8 +28,8 @@ export const LoadingHeader = styled.div<{absolute: boolean}>`
     right: 0,
     height: layout.viewHeaderHeight,
     backgroundColor: themeVars.mainBg,
-    paddingBottom: space.l,
-    paddingLeft: space.l + space.s,
+    paddingBottom: space.s12,
+    paddingLeft: space.s12 + space.s6,
     display: "flex",
     justifyContent: "flex-end",
     flexDirection: "column",
@@ -52,7 +52,7 @@ export const SidebarLoadingPage = () => (
       ${{
         width: layout.typeEditorWidth,
         minWidth: layout.typeEditorMinWidth,
-        paddingBottom: space.xl,
+        paddingBottom: space.s24,
         overflowY: "scroll",
         height: "100%",
       }}
@@ -64,20 +64,20 @@ export const SidebarLoadingPage = () => (
 
 const loaderWrapperStyle = css`
   ${{
-    padding: space.xxl,
+    padding: space.s48,
     height: "100%",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     flexDirection: "column",
-    marginLeft: space.l,
-    marginRight: space.l,
+    marginLeft: space.s12,
+    marginRight: space.s12,
     borderRadius: border.radius6,
   }}
 `;
 
 const loaderStyle = css`
-  ${{paddingBottom: space.s, ...textStyles.regular}}
+  ${{paddingBottom: space.s6, ...textStyles.regular}}
 `;
 export const LoadingApp = ({backgroundColor = "transparent", appName}: {backgroundColor?: string; appName: string}) => (
   <div className={loaderWrapperStyle} style={{backgroundColor}}>
@@ -158,12 +158,12 @@ export const LoadingTreeMenuItem = ({
         level === 0 &&
           css`
             padding-left: 5px;
-            gap: ${space.s}px;
+            gap: ${space.s6}px;
           `
       )}
     >
       <Icon color={color} containerSize={layout.newMenuItemHeight} iconSize={18} />
-      {children || <LoadingSausage height={space.s} inverted={theme.mode === "dark"} />}
+      {children || <LoadingSausage height={space.s6} inverted={theme.mode === "dark"} />}
     </div>
   );
 };

package/src/loading-sausage.tsx

@@ -79,8 +79,8 @@ const dark = css`
 
 const marginStyle = css`
   ${{
-    marginTop: space.xs,
-    marginBottom: space.xs,
+    marginTop: space.s4,
+    marginBottom: space.s4,
   }}
 `;
 

package/src/media-query-utils.ts

@@ -2,7 +2,7 @@
 const noop = () => {};
 export function getMediaQueryList(query: string) {
   // need for test
-  return typeof window !== undefined && window.matchMedia
+  return typeof window !== "undefined" && window.matchMedia
     ? window.matchMedia(query)
     : ({matches: false, addEventListener: noop, removeEventListener: noop} as unknown as MediaQueryList);
 }

package/src/select/custom-select-partials/group-heading.tsx

@@ -17,11 +17,11 @@ const groupHeadingClass = css`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  padding: ${space.m + space.xs}px ${space.m}px ${space.l}px ${space.m}px;
+  padding: ${space.s8 + space.s4}px ${space.s8}px ${space.s12}px ${space.s8}px;
   color: ${themeVars.disabledTextColor};
 `;
 const groupDividerContainerStyle = css`
-  padding: ${space.l}px 0;
+  padding: ${space.s12}px 0;
   box-sizing: content-box;
 `;
 

package/src/select/custom-select-partials/menu.tsx

@@ -3,12 +3,18 @@ import {CSSObjectWithLabel, MenuProps} from "react-select";
 import cn from "classnames";
 import {components} from "react-windowed-select";
 import {css} from "@linaria/core";
-import {border, themeVars} from "../../design-system";
+import {border, space, themeVars} from "../../design-system";
 
+export const MenuListNulledStyles: CSSObjectWithLabel = {
+  paddingTop: "",
+  paddingBottom: "",
+};
 export const MenuNulledStyles: CSSObjectWithLabel = {
   backgroundColor: "",
   borderRadius: "",
   boxShadow: "",
+  paddingTop: "",
+  paddingBottom: "",
 };
 const MenuRootClass = css`
   color: ${themeVars.disabledTextColor};
@@ -16,6 +22,8 @@ const MenuRootClass = css`
   background-color: ${themeVars.colorBgSelectMenu};
   box-shadow: ${themeVars.shadowSelectMenu};
   border-radius: ${border.radius6}px;
+  padding-top: ${space.s6}px;
+  padding-bottom: ${space.s6}px;
   overflow: hidden;
 `;
 export function Menu<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(

package/src/select/custom-select-partials/no-option-message.tsx

@@ -3,7 +3,7 @@ import {css} from "@linaria/core";
 import {space} from "../../design-system";
 
 const NopOptionMessageClass = css`
-  padding: ${space.l + 2}px ${space.m}px;
+  padding: ${space.s12 + 2}px ${space.s8}px;
 `;
 export const NoOptionsMessage = ({children}: {children: ReactNode}) => {
   return <div className={NopOptionMessageClass}>{children}</div>;

package/src/select/custom-select-partials/option.tsx

@@ -3,14 +3,16 @@ import {components} from "react-windowed-select";
 import {GroupBase} from "../index";
 import {css} from "@linaria/core";
 import {layout, space} from "../../design-system";
-import {ListItemGeneral} from "../../lists/list-item-general";
+import {ListItem} from "../../lists/list-item";
 import cn from "classnames";
+import {Children, ReactNode, useCallback, useMemo, useRef, useState} from "react";
+import {Tooltip} from "antd";
 
 export const OptionNulledVitualizedStyles = {
-  height: layout.newMenuItemHeight,
+  height: layout.menuItemHeight,
 };
 export const OptionNulledStyles = {
-  minHeight: layout.newMenuItemHeight,
+  minHeight: layout.menuItemHeight,
   paddingLeft: "",
   paddingRight: "",
   paddingTop: "",
@@ -21,13 +23,63 @@ export const OptionNulledStyles = {
   color: "",
 };
 const OptionRootClass = css`
-  padding: 0 ${space.s}px;
+  padding: 0 ${space.s6}px;
   display: flex;
   align-items: stretch;
   justify-content: stretch;
   cursor: pointer;
+  max-width: 100%;
 `;
 
+const optionWithTextContent = css`
+  max-width: 100%;
+  padding: 0 ${space.s4}px;
+`;
+
+const optionTextOverflowWrapper = css`
+  max-width: 100%;
+  flex-basis: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 0 ${space.s4}px;
+`;
+
+function isOptionContentIsPureText(children: ReactNode) {
+  return !Children.toArray(children).find((child) => !(typeof child === "string" || typeof child === "number"));
+}
+
+type OptionTextContentWithTooltipProps = {
+  children: string | number;
+  isFocused?: boolean;
+};
+
+function OptionTextContentWithTooltip({children, isFocused}: OptionTextContentWithTooltipProps) {
+  const [isTooltipActive, setTooltipActive] = useState<boolean>(false);
+  const textWrapperRef = useRef<HTMLDivElement>(null);
+  const textContentRef = useRef<HTMLSpanElement>(null);
+  const onOptionMouseEnter = useCallback(() => {
+    setTimeout(() => {
+      if (!textContentRef.current || !textWrapperRef.current) {
+        return;
+      }
+      isFocused && setTooltipActive(textContentRef.current?.offsetWidth > textWrapperRef.current?.offsetWidth);
+    }, 300);
+  }, [textContentRef, textWrapperRef, isFocused]);
+  return (
+    <div
+      className={optionWithTextContent}
+      onMouseEnter={onOptionMouseEnter}
+      onMouseLeave={() => setTooltipActive(false)}
+    >
+      <Tooltip title={children} mouseEnterDelay={300} placement={"right"} open={isTooltipActive}>
+        <div ref={textWrapperRef} className={optionTextOverflowWrapper}>
+          <span ref={textContentRef}>{children}</span>
+        </div>
+      </Tooltip>
+    </div>
+  );
+}
 /**
  * Attention! Do not use this option for potentially long lists inside React Select
  *  Why is this option slow? Read here https://the.fibery.io/SoftDev/bug/Select-option-behaviour-is-incorrect-9413
@@ -38,11 +90,16 @@ export function OptionSlow<
   Group extends GroupBase<Option> = GroupBase<Option>
 >({children, ...rest}: OptionProps<Option, IsMulti, Group>) {
   const {isDisabled, isSelected, isFocused} = rest;
+  const isPureText = useMemo(() => isOptionContentIsPureText(children), [children]);
   return (
     <components.Option {...rest} className={cn(rest.className, OptionRootClass)}>
-      <ListItemGeneral focused={isFocused} selected={isSelected} hovered={false} done={isDisabled}>
-        {children}
-      </ListItemGeneral>
+      <ListItem focused={isFocused} selected={isSelected} hovered={false} done={isDisabled}>
+        {isPureText ? (
+          <OptionTextContentWithTooltip isFocused={isFocused}>{children as string}</OptionTextContentWithTooltip>
+        ) : (
+          children
+        )}
+      </ListItem>
     </components.Option>
   );
 }

package/src/select/index.tsx

@@ -140,7 +140,7 @@ export const Select = forwardRef(function Select<
     (e) => {
       switch (e.key) {
         case "Escape":
-          // we cannot rely on "menuIsOpen" prop here, as user may not pass this prop and rely on internal component behavior instead.
+          // 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();
           }

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

@@ -27,14 +27,14 @@ import {
 } from "./index";
 import {SelectControlSettingsProvider} from "./select-control-settings-context";
 
-const offset = [0, space.xs] as [number, number];
+const offset = [0, space.s4] as [number, number];
 const popupClassName = css`
   z-index: 1050;
   max-width: 360px;
-  padding-top: ${space.m}px;
-  padding-bottom: ${space.xs}px;
-  padding-left: ${space.m}px;
-  padding-right: ${space.m}px;
+  padding-top: ${space.s8}px;
+  padding-bottom: ${space.s4}px;
+  padding-left: ${space.s8}px;
+  padding-right: ${space.s8}px;
 `;
 
 const valueClassName = css`
@@ -58,10 +58,10 @@ const valueClassName = css`
 
 const titleClassName = css`
   ${textStyles.heading6}
-  padding-top: ${space.s}px;
-  padding-left: ${space.m}px;
-  padding-right: ${space.m}px;
-  padding-bottom: ${space.l}px;
+  padding-top: ${space.s6}px;
+  padding-left: ${space.s8}px;
+  padding-right: ${space.s8}px;
+  padding-bottom: ${space.s12}px;
 `;
 
 export const selectInPopupStyles = {
@@ -78,7 +78,7 @@ export const selectInPopupStyles = {
     ...props,
     minWidth: 100,
     position: "static",
-    marginTop: space.s,
+    marginTop: space.s6,
     marginBottom: 0,
     boxShadow: "none",
     borderRadius: border.radius4,

package/src/select/styles.ts

@@ -3,7 +3,7 @@ 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 {MenuNulledStyles} from "./custom-select-partials/menu";
+import {MenuListNulledStyles, MenuNulledStyles} from "./custom-select-partials/menu";
 import {groupHeadingNulledStyles} from "./custom-select-partials/group-heading";
 
 export const expanderExpandedStyle = css`
@@ -35,8 +35,8 @@ function createControlStyle({
       ...(state.isFocused && inputOverrides.focus),
       ...(state.isDisabled && inputOverrides.disabled),
       ":hover": !state.isFocused && !state.isDisabled ? inputOverrides.hover : {},
-      paddingLeft: space.l,
-      paddingRight: space.l,
+      paddingLeft: space.s10,
+      paddingRight: space.s12,
       "& > div": childDivStyle,
     } as unknown as CSSObjectWithLabel);
 }
@@ -78,11 +78,15 @@ export const componentsStyles: StylesConfig = {
     ...provided,
     overflow: "visible",
     color: themeVars.textColor,
+    marginLeft: "",
+    marginRight: "",
+    margin: "",
   }),
   valueContainer(provided) {
     return {
       ...provided,
       minWidth: 10,
+      gridTemplateColumns: "1fr",
     };
   },
   multiValue: (provided) => ({
@@ -92,7 +96,7 @@ export const componentsStyles: StylesConfig = {
     marginTop: 0,
     marginBottom: 0,
     marginLeft: 0,
-    marginRight: space.l,
+    marginRight: space.s12,
     alignItems: "center",
     height: layout.inputHeight - 2,
   }),
@@ -115,6 +119,10 @@ export const componentsStyles: StylesConfig = {
     ...provided,
     ...MenuNulledStyles,
   }),
+  menuList: (provided) => ({
+    ...provided,
+    ...MenuListNulledStyles,
+  }),
   container: (provided, state) => ({
     ...provided,
     pointerEvents: "auto",

package/src/toast/primitives.tsx

@@ -6,8 +6,6 @@ import {IconButton} from "../button/icon-button";
 import {border, space, textStyles, themeVars} from "../design-system";
 import CloseIcon from "../icons/react/Close";
 
-export const ToastProvider = ToastPrimitives.Provider;
-
 const viewportCss = css`
   position: fixed;
   left: 50%;
@@ -24,7 +22,7 @@ const viewportCss = css`
   list-style: none;
 
   &:not(:empty) {
-    padding: ${space.xl}px; // increased mouse hover area to pause timers of toast
+    padding: ${space.s24}px; // increased mouse hover area to pause timers of toast
   }
 `;
 
@@ -39,11 +37,22 @@ const rootCss = css`
   user-select: auto !important;
 
   background-color: ${themeVars.colorBgToastDefault};
-  padding: ${space.m}px ${space.m * 2}px;
+  padding: ${space.s12}px ${space.s8 * 2}px;
   border-radius: ${border.radius6}px;
   box-shadow: ${themeVars.shadowModal};
 
-  @keyframes hide {
+  will-change: opacity;
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fadeOut {
     from {
       opacity: 1;
     }
@@ -80,15 +89,19 @@ const rootCss = css`
     transition: transform 200ms ease-out;
   }
 
+  &[data-state="open"] {
+    animation: fadeIn 200ms ease-out;
+  }
+  &[data-state="closed"] {
+    animation: fadeOut 200ms ease-out;
+  }
+
   @media (prefers-reduced-motion: no-preference) {
     will-change: transform, opacity;
 
     &[data-state="open"] {
       animation: slideIn 200ms ease-out;
     }
-    &[data-state="closed"] {
-      animation: hide 200ms ease-out;
-    }
 
     &[data-swipe="end"] {
       animation: swipeOut 200ms ease-out;

package/src/toast/toast-action.tsx

@@ -3,6 +3,14 @@ import {ElementRef, forwardRef} from "react";
 import {ButtonProps} from "../button/button";
 import {Button} from "../button";
 import {useTheme} from "../theme-provider";
+import {css} from "@linaria/core";
+import {space} from "../design-system";
+
+const toastActionCss = css`
+  margin-top: -${space.s4}px;
+  margin-bottom: -${space.s4}px;
+  flex-shrink: 0;
+`;
 
 export const ToastAction = forwardRef<
   ElementRef<typeof RadixToastAction>,
@@ -10,7 +18,7 @@ export const ToastAction = forwardRef<
 >(({children, altText, ...props}, ref) => {
   const theme = useTheme();
   return (
-    <RadixToastAction ref={ref} altText={altText} asChild>
+    <RadixToastAction className={toastActionCss} ref={ref} altText={altText} asChild>
       <Button color={theme.textColor} {...props}>
         {children}
       </Button>

package/src/toast/toast-provider.tsx

@@ -0,0 +1,15 @@
+import {createContext} from "@fibery/react/src/create-context";
+import React from "react";
+import type {ToastQueue} from "./toast-queue";
+import {ToastProvider as PrimitiveToastProvider} from "@radix-ui/react-toast";
+
+const [Provider, useCtx] = createContext<ToastQueue>("ToastQueue");
+
+export const ToastProvider: React.FC<React.PropsWithChildren<{toastQueue: ToastQueue}>> = ({toastQueue, children}) => {
+  return (
+    <Provider value={toastQueue}>
+      <PrimitiveToastProvider>{children}</PrimitiveToastProvider>
+    </Provider>
+  );
+};
+export const useToast = useCtx;

package/src/toast/{toast-queue.tsx → toast-queue.ts}

@@ -1,7 +1,10 @@
 import {makePubSub} from "@fibery/helpers/utils/pub-sub";
 import type {ToastProps} from "./toast";
 
-type AddToastProps = Pick<ToastProps, "type" | "title" | "subTitle" | "icon" | "action" | "autoClose" | "open"> & {
+export type AddToastProps = Pick<
+  ToastProps,
+  "type" | "title" | "subTitle" | "icon" | "action" | "duration" | "open"
+> & {
   id?: string;
 };
 type TypedAddProps = Omit<AddToastProps, "type">;
@@ -12,8 +15,15 @@ type QueuedToast = AddToastProps & {
 
 type ToastQueueOpts = {
   maxActiveToasts?: number;
+  onToastAdd?: (params: AddToastProps) => void;
+
+  /** Overrides toast props.
+   * This option is added only to support mapping of billing errors as it was done in toast actions.
+   * Ideally this should be removed and billing errors moved to thunk middlewares
+   */
+  transformToast?: (params: AddToastProps) => AddToastProps;
 };
-export const makeToastQueue = ({maxActiveToasts = 1}: ToastQueueOpts = {}) => {
+export const makeToastQueue = ({maxActiveToasts = 1, onToastAdd, transformToast}: ToastQueueOpts = {}) => {
   const pubSub = makePubSub();
   let queue: QueuedToast[] = [];
   let activeToasts: QueuedToast[] = [];
@@ -35,39 +45,24 @@ export const makeToastQueue = ({maxActiveToasts = 1}: ToastQueueOpts = {}) => {
     pubSub.publish();
   };
 
-  const closeActive = (id: string) => {
-    activeToasts = activeToasts.map((t) => (t.id === id ? {...t, open: false} : t));
-  };
-
-  const removeFromQueue = (id: string) => {
-    queue = queue.filter((queued) => queued.id !== id);
-  };
-
   /**
    * Add toast to queue
    *
    * Pass custom `id` if you don't want toasts to be duplicated.
    * If toast with same id already exists it will be closed to display fresh more relevant one
    */
-  const add = ({id, ...toast}: AddToastProps, {replace = true} = {}) => {
-    if (
-      id &&
-      !replace &&
-      (queue.some((queued) => queued.id === id) || activeToasts.some((active) => active.id === id))
-    ) {
-      return id;
-    }
-
-    if (id && replace) {
-      closeActive(id);
-      removeFromQueue(id);
+  const add = ({id, ...toast}: AddToastProps) => {
+    if (activeToasts.length > 0) {
+      activeToasts[0].open = false;
     }
 
     const t: QueuedToast = {
       id: id || makeId(),
-      ...toast,
+      ...(transformToast ? transformToast(toast) : toast),
     };
 
+    onToastAdd?.(t);
+
     queue.push(t);
 
     updateActiveToasts();
@@ -77,9 +72,10 @@ export const makeToastQueue = ({maxActiveToasts = 1}: ToastQueueOpts = {}) => {
 
   return {
     add,
-    /** close active toast, play exit animation  */
+    /** Mark active toast as closed. Can be used to play exit animation  */
     close(id: string) {
-      closeActive(id);
+      activeToasts = activeToasts.map((t) => (t.id === id ? {...t, open: false} : t));
+
       pubSub.publish();
     },
     /** remove toast from active ones, should be called after exit animation  */