@fibery/ui-kit 1.32.0 → 1.33.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.32.0",
+  "version": "1.33.0",
   "private": false,
   "files": [
     "src/antd/styles.ts",
@@ -38,11 +38,11 @@
     "@linaria/core": "5.0.1",
     "@linaria/react": "5.0.1",
     "@popperjs/core": "2.11.6",
-    "@radix-ui/react-collapsible": "1.0.3",
-    "@radix-ui/react-context-menu": "2.1.5",
-    "@radix-ui/react-dropdown-menu": "2.0.6",
-    "@radix-ui/react-toast": "1.1.5",
-    "@radix-ui/react-tooltip": "1.0.7",
+    "@radix-ui/react-collapsible": "1.1.0",
+    "@radix-ui/react-context-menu": "2.2.1",
+    "@radix-ui/react-dropdown-menu": "2.1.1",
+    "@radix-ui/react-toast": "1.2.1",
+    "@radix-ui/react-tooltip": "1.1.2",
     "@types/d3-shape": "^3.1.3",
     "@types/react-select-country-list": "^2.2.1",
     "@types/setimmediate": "^1.0.2",
@@ -73,8 +73,8 @@
     "screenfull": "6.0.1",
     "ua-parser-js": "0.7.24",
     "@fibery/emoji-data": "2.6.0",
-    "@fibery/helpers": "1.3.0",
-    "@fibery/react": "1.4.0"
+    "@fibery/react": "1.4.0",
+    "@fibery/helpers": "1.3.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -108,8 +108,8 @@
     "svgo": "2.8.0",
     "typescript": "5.4.3",
     "unist-util-reduce": "0.2.2",
-    "@fibery/babel-preset": "7.4.0",
-    "@fibery/eslint-config": "8.6.0"
+    "@fibery/eslint-config": "8.6.0",
+    "@fibery/babel-preset": "7.4.0"
   },
   "jest": {
     "testEnvironment": "jsdom",

package/src/button/base-button.tsx

@@ -6,18 +6,14 @@ import {iconColorVar} from "../icons/Icon";
 export type ButtonSize = "tiny" | "small" | "medium" | "large";
 export type ButtonVariant = "solid" | "outline" | "soft" | "ghost";
 export type ButtonColor = "accent" | "neutral" | "error";
-type PositionInGroup = "first" | "middle" | "last";
 
 export type BaseButtonProps = {
   variant?: ButtonVariant;
   color?: ButtonColor;
   pressed?: boolean;
-
-  // kept for backward compatibility with old buttons. Ideally should be reprsented as a separate component (ButtonGroup/SegmentedControl)
-  inGroup?: PositionInGroup;
 } & React.ComponentPropsWithRef<"button">;
 
-const baseButton = css`
+export const baseButton = css`
   all: unset;
   position: relative;
   box-sizing: border-box;
@@ -44,7 +40,8 @@ const baseButton = css`
     ${iconColorVar}: var(--fibery-button-text-active-color);
   }
 
-  &[aria-pressed="true"] {
+  &[aria-pressed="true"],
+  &[aria-expanded="true"] {
     color: var(--fibery-button-text-active-color);
     ${iconColorVar}: var(--fibery-button-text-active-color);
     background-color: var(--fibery-button-hover-color);
@@ -100,73 +97,9 @@ const getColors = (variant: ButtonVariant, color: ButtonColor) => {
   } as CSSProperties;
 };
 
-const buttonGroup = {
-  first: css`
-    &:is(&) {
-      display: inline-flex;
-      vertical-align: middle;
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-
-      &:not([data-variant="outline"]) + * {
-        position: relative;
-        :after {
-          content: "";
-          left: -1px;
-          position: absolute;
-          width: 1px;
-          top: 4px;
-          bottom: 4px;
-          background-color: rgba(255, 255, 255, 0.2);
-        }
-      }
-    }
-  `,
-  middle: css`
-    &:is(&) {
-      display: inline-flex;
-      vertical-align: middle;
-      margin-left: -1px;
-      border-radius: 0;
-
-      &:not([data-variant="outline"]) + * {
-        position: relative;
-        :after {
-          content: "";
-          left: -1px;
-          position: absolute;
-          width: 1px;
-          top: 4px;
-          bottom: 4px;
-          background-color: rgba(255, 255, 255, 0.2);
-        }
-      }
-    }
-  `,
-  last: css`
-    &:is(&) {
-      display: inline-flex;
-      vertical-align: middle;
-      margin-left: -1px;
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-  `,
-};
-
 export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
   (
-    {
-      variant = "solid",
-      color = "accent",
-      type = "button",
-      className,
-      children,
-      inGroup,
-      style,
-      pressed,
-      ...buttonProps
-    },
+    {variant = "solid", color = "accent", type = "button", className, children, style, pressed, ...buttonProps},
     ref
   ) => {
     const colors = getColors(variant, color);
@@ -176,7 +109,7 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
         style={{...colors, ...style}}
         aria-pressed={pressed || buttonProps["aria-pressed"]}
         data-variant={variant}
-        className={cx(baseButton, inGroup && buttonGroup[inGroup], className)}
+        className={cx(baseButton, className)}
         ref={ref}
         // eslint-disable-next-line react/button-has-type
         type={type}

package/src/button/button-group.tsx

@@ -1,76 +1,57 @@
-import {Children, cloneElement, CSSProperties, ReactElement} from "react";
 import {css, cx} from "@linaria/core";
-import {border} from "../design-system";
+import {forwardRef} from "react";
+import {baseButton} from "./base-button";
 
-const ordersInRowGroup = {
-  first: css`
-    ${{
-      display: "inline-flex",
-      borderRadius: `${border.radius6}px 0 0 ${border.radius6}px`,
-      marginRight: -1,
-    }}
-  `,
-  middle: css`
-    ${{
-      display: "inline-flex",
-      borderRadius: border.radius0,
-      marginRight: -1,
-    }}
-  `,
-  last: css`
-    ${{
-      display: "inline-flex",
-      borderRadius: `0 ${border.radius6}px ${border.radius6}px 0`,
-    }}
-  `,
-};
+const buttonGroupDirection = {
+  row: css`
+    & > :not(:first-child).${baseButton}, & > :not(:first-child) .${baseButton} {
+      margin-left: -1px;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
 
-const ordersInColumnGroup = {
-  first: css`
-    ${{
-      display: "inline-flex",
-      borderRadius: `${border.radius6}px ${border.radius6}px 0 0 `,
-      marginBottom: -1,
-    }}
+    & > :not(:last-child).${baseButton}, & > :not(:last-child) .${baseButton} {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
   `,
-  middle: css`
-    ${{
-      display: "inline-flex",
-      borderRadius: border.radius0,
-      marginBottom: -1,
-    }}
-  `,
-  last: css`
-    ${{
-      display: "inline-flex",
-      borderRadius: `0 0 ${border.radius6}px ${border.radius6}px`,
-    }}
+  column: css`
+    & > :not(:first-child).${baseButton}, & > :not(:first-child) .${baseButton} {
+      margin-top: -1px;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+
+    & > :not(:last-child).${baseButton}, & > :not(:last-child) .${baseButton} {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
   `,
 };
 
-export interface ButtonGroupProps {
-  direction: CSSProperties["flexDirection"];
-  children: ReactElement[];
-}
+const buttonGroup = css`
+  display: flex;
+  align-items: flex-start;
+`;
+
+export type ButtonGroupProps = {
+  direction?: "row" | "column";
+} & React.ComponentPropsWithoutRef<"div">;
 
-export function ButtonGroup({direction, children}: ButtonGroupProps) {
+export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(function ButtonGroup(
+  {direction = "row", className, style, children},
+  ref
+) {
   return (
     <div
+      ref={ref}
+      className={cx(buttonGroup, buttonGroupDirection[direction], className)}
       style={{
-        display: "flex",
-        alignItems: "flex-start",
         flexDirection: direction,
+        ...style,
       }}
     >
-      {Children.map(children, (child, index) => {
-        const inGroup = index === 0 ? "first" : index === children.length - 1 ? "last" : "middle";
-        return cloneElement(child, {
-          className: cx(
-            child.props.className,
-            direction === "row" ? ordersInRowGroup[inGroup] : ordersInColumnGroup[inGroup]
-          ),
-        });
-      })}
+      {children}
     </div>
   );
-}
+});

package/src/button/select-button.tsx

@@ -0,0 +1,36 @@
+import {css} from "@linaria/core";
+import {forwardRef} from "react";
+import {space} from "../design-system";
+import ArrowBottom from "../icons/react/ArrowBottom";
+import {Button, ButtonProps} from "./button";
+
+const selectIndicator = css`
+  margin-left: -${space.s4}px;
+  margin-right: -${space.s4}px;
+`;
+
+export type SelectButtonProps = {
+  /**
+   * Highlight buttons. Internally sets "aria-expanded"
+   * This props is not needed when used with Radix components as they manage "aria-expanded" themselves
+   * Should be used as an escape hatch for components like ui-kit/src/popup that don't set "aria-expanded"
+   */
+  open?: boolean;
+} & Omit<ButtonProps, "iconEnd">;
+
+export const SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>(function SelectButton(
+  {className, open, ...rest},
+  forwardedRef
+) {
+  return (
+    <Button
+      ref={forwardedRef}
+      aria-expanded={open}
+      iconEnd={<ArrowBottom className={selectIndicator} />}
+      variant="ghost"
+      color="neutral"
+      className={className}
+      {...rest}
+    />
+  );
+});

package/src/design-system.ts

@@ -887,7 +887,7 @@ export const layout = {
   menuDefaultWidth: 243,
   desktopToolbarHeight: 32,
   desktopMenuMinWidth: 240,
-  collapsedMenuMinWidth: 48,
+  collapsedMenuMinWidth: 47,
   menuMinWidth: 240, //TODO: make dependency to itemHeight
   menuMaxWidth: 480,
   menuItemMinWidth: 80,

package/src/emoji-picker/primitives/search.tsx

@@ -63,7 +63,7 @@ const searchIconCss = css`
 
 const extraActionSlotCss = css`
   background-color: var(--fibery-emoji-hover-color, ${themeVars.inputCopyBgColor});
-  border-radius: ${space.s6}px;
+  border-radius: ${border.radius5}px;
   margin-right: ${space.s4}px;
 `;
 

package/src/icons/ast/SmartFolder.ts

@@ -3,6 +3,6 @@
 
 import { IconDefinition } from '../types';
 
-const SmartFolder: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M10.586 9.219a.75.75 0 0 0-1.172-.937l-2 2.5A.75.75 0 0 0 8 12h2l-.586 1.282a.75.75 0 0 0 1.172.937l2-2.5A.75.75 0 0 0 12 10.5h-2l.586-1.281Z","fill":"#51616C","fillOpacity":0.9},"children":[]},{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M2.708 3.791a2.417 2.417 0 0 1 1.709-.708H7.5a.75.75 0 0 1 .53.22l2.28 2.28h5.273A2.417 2.417 0 0 1 18 8v6.667c0 .64-.255 1.255-.708 1.709-.274.273-.645.441-.912.537-.26.093-.572.17-.797.17H4.417A2.417 2.417 0 0 1 2 14.668V5.5c0-.64.255-1.255.708-1.709Zm1.709.792A.917.917 0 0 0 3.5 5.5v9.167a.917.917 0 0 0 .917.917h11.151c.008-.002.032-.005.072-.015a2.051 2.051 0 0 0 .472-.173.565.565 0 0 0 .12-.081.917.917 0 0 0 .268-.648V8a.917.917 0 0 0-.917-.917H10a.75.75 0 0 1-.53-.22l-2.28-2.28H4.416Z"},"children":[]}],"metadata":""}]},"name":"smart-folder"};
+const SmartFolder: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M10.586 9.219a.75.75 0 0 0-1.172-.937l-2 2.5A.75.75 0 0 0 8 12h2l-.586 1.282a.75.75 0 0 0 1.172.937l2-2.5A.75.75 0 0 0 12 10.5h-2l.586-1.281Z"},"children":[]},{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M2.708 3.791a2.417 2.417 0 0 1 1.709-.708H7.5a.75.75 0 0 1 .53.22l2.28 2.28h5.273A2.417 2.417 0 0 1 18 8v6.667c0 .64-.255 1.255-.708 1.709-.274.273-.645.441-.912.537-.26.093-.572.17-.797.17H4.417A2.417 2.417 0 0 1 2 14.668V5.5c0-.64.255-1.255.708-1.709Zm1.709.792A.917.917 0 0 0 3.5 5.5v9.167a.917.917 0 0 0 .917.917h11.151c.008-.002.032-.005.072-.015a2.051 2.051 0 0 0 .472-.173.565.565 0 0 0 .12-.081.917.917 0 0 0 .268-.648V8a.917.917 0 0 0-.917-.917H10a.75.75 0 0 1-.53-.22l-2.28-2.28H4.416Z"},"children":[]}],"metadata":""}]},"name":"smart-folder"};
 
 export default SmartFolder;

package/src/toast/toaster.tsx

@@ -18,6 +18,8 @@ const ToastThemeProvider: React.FC<React.PropsWithChildren> = ({children}) => {
   );
 };
 
+const viewportId = "toast-viewport";
+
 export const Toaster: React.FC = () => {
   const toastQueue = useToast();
 
@@ -26,10 +28,24 @@ export const Toaster: React.FC = () => {
   return (
     <ToastThemeProvider>
       {toasts.map(({id, open, type = "info", ...toastProps}) => (
-        <Toast key={`${id}-${type}`} type={type} {...toastProps} open={open} onHide={() => toastQueue.remove(id)} />
+        <Toast
+          key={`${id}-${type}`}
+          type={type}
+          {...toastProps}
+          open={open}
+          onHide={() => {
+            // workaround for https://github.com/radix-ui/primitives/issues/2233
+            // without it timers aren't resumed until hover if the last toast was closed via ToastAction
+            if (toasts.length === 1) {
+              document.getElementById(viewportId)?.blur();
+            }
+
+            toastQueue.remove(id);
+          }}
+        />
       ))}
 
-      <ToastViewport />
+      <ToastViewport id={viewportId} />
     </ToastThemeProvider>
   );
 };