@fibery/ui-kit 1.32.1 → 1.33.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.32.1",
+  "version": "1.33.1",
   "private": false,
   "files": [
     "src/antd/styles.ts",
@@ -73,8 +73,8 @@
     "screenfull": "6.0.1",
     "ua-parser-js": "0.7.24",
     "@fibery/emoji-data": "2.6.0",
-    "@fibery/react": "1.4.0",
-    "@fibery/helpers": "1.3.0"
+    "@fibery/helpers": "1.3.0",
+    "@fibery/react": "1.4.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",

package/src/actions-menu/actions-menu-props.tsx

@@ -1,7 +1,6 @@
+import {DropdownMenuContentProps} from "@radix-ui/react-dropdown-menu";
 import {ReactNode} from "react";
 import {ContentProps} from "../dropdown-menu";
-import {LinariaClassName} from "@linaria/core";
-import {DropdownMenuContentProps} from "@radix-ui/react-dropdown-menu";
 
 export type ActionsMenuProps = {
   /** Clicking on this node will open actions menu. Make sure that trigger forwards ref AND props to html element */
@@ -16,12 +15,13 @@ export type ActionsMenuProps = {
   open?: boolean;
   /** Event handler called when the open state of the ActionsMenu changes. */
   onOpenChange?: (state: boolean) => unknown;
-  contentStyles?: LinariaClassName;
+  contentStyles?: string;
   modal?: boolean;
   alignOffset?: number;
   side?: ContentProps["side"];
   sideOffset?: number;
   collisionPadding?: number;
   autoFocusOnClose?: boolean;
+  onEscapeKeyDown?: (event: KeyboardEvent) => void;
   sticky?: DropdownMenuContentProps["sticky"];
 };

package/src/actions-menu/actions-menu-sub-command-menu.tsx

@@ -2,7 +2,7 @@ import {composeEventHandlers} from "@fibery/react/src/compose-event-handlers";
 import {createContext} from "@fibery/react/src/create-context";
 import {stopPropagation} from "@fibery/react/src/stop-propagation";
 import {css, cx} from "@linaria/core";
-import React, {RefObject, useEffect, useMemo, useRef, useState} from "react";
+import React, {FunctionComponent, RefObject, useEffect, useMemo, useRef, useState} from "react";
 import {
   CommandMenuEmpty,
   CommandMenuGroup,
@@ -13,6 +13,8 @@ import {
 } from "../command-menu";
 import {ActionsMenuSubMenu} from "./actions-menu-sub-menu";
 import {useActionsMenuContext} from "./contexts/actions-menu-context";
+// eslint-disable-next-line no-restricted-imports
+import {IconBaseProps} from "@fibery/ui-kit/src/icons/types";
 
 const [ActionsMenuSubCommandMenuProvider, useActionsMenuSubCommandMenuCtx] = createContext<{
   subMenuOpenRef: RefObject<boolean>;
@@ -22,8 +24,14 @@ const [ActionsMenuSubCommandMenuProvider, useActionsMenuSubCommandMenuCtx] = cre
 type ActionsMenuSubCommandMenuProps = React.PropsWithChildren<{
   trigger?: React.ReactNode;
   disabled?: boolean;
+  Icon?: FunctionComponent<IconBaseProps>;
 }>;
-export const ActionsMenuSubCommandMenu: React.FC<ActionsMenuSubCommandMenuProps> = ({disabled, trigger, children}) => {
+export const ActionsMenuSubCommandMenu: React.FC<ActionsMenuSubCommandMenuProps> = ({
+  disabled,
+  trigger,
+  children,
+  Icon,
+}) => {
   const [open, onOpenChange] = useState(false);
   const triggerRef = useRef(null);
   const openRef = useRef(false);
@@ -45,6 +53,7 @@ export const ActionsMenuSubCommandMenu: React.FC<ActionsMenuSubCommandMenuProps>
         onOpenChange(v);
       }}
       trigger={trigger}
+      Icon={Icon}
       triggerRef={triggerRef}
       contentClassName={css`
         &:is(&) {

package/src/actions-menu/actions-menu-sub-menu.tsx

@@ -1,9 +1,11 @@
 import {stopPropagation} from "@fibery/react/src/stop-propagation";
 import {css} from "@linaria/core";
-import {ReactNode} from "react";
+import {FunctionComponent, ReactNode} from "react";
 import {space, themeVars} from "../../src/design-system";
 import ArrowRight from "../icons/react/ArrowRight";
 import {useActionsMenuContext} from "./contexts/actions-menu-context";
+// eslint-disable-next-line no-restricted-imports
+import {IconBaseProps} from "@fibery/ui-kit/src/icons/types";
 
 const subTriggerClass = css`
   display: flex;
@@ -24,8 +26,27 @@ type Props = React.PropsWithChildren<{
   disabled?: boolean;
   contentClassName?: string;
   container?: HTMLElement | null;
+  Icon?: FunctionComponent<IconBaseProps>;
 }>;
 
+const cornerCss = css`
+  display: flex;
+  align-items: center;
+  column-gap: ${space.s12}px;
+`;
+
+const LeftCorner = ({Icon}: {Icon: FunctionComponent<IconBaseProps> | void}) => {
+  return Icon ? (
+    <div className={cornerCss}>
+      <Icon color={`var(--actions-menu-item-icon-color, ${themeVars.iconColor})`} iconSize={18} />
+    </div>
+  ) : null;
+};
+
+const contentStyle = css`
+  flex: 1;
+`;
+
 export const ActionsMenuSubMenu: React.FC<Props> = ({
   open,
   onOpenChange,
@@ -34,6 +55,7 @@ export const ActionsMenuSubMenu: React.FC<Props> = ({
   children,
   disabled = false,
   contentClassName,
+  Icon,
 }) => {
   const {MenuPrimitive, container} = useActionsMenuContext();
 
@@ -45,7 +67,8 @@ export const ActionsMenuSubMenu: React.FC<Props> = ({
         disabled={disabled}
         onClick={stopPropagation}
       >
-        {trigger}
+        <LeftCorner Icon={Icon} />
+        <div className={contentStyle}>{trigger}</div>
         <div className={arrowClass}>
           <ArrowRight
             color={disabled ? themeVars.disabledTextColor : themeVars.iconColor}

package/src/actions-menu/actions-menu.tsx

@@ -27,6 +27,7 @@ export const ActionsMenu = ({
   collisionPadding,
   open,
   onOpenChange,
+  onEscapeKeyDown,
   children,
   portalled,
   container,
@@ -66,6 +67,7 @@ export const ActionsMenu = ({
           portalled={portalled}
           container={container}
           collisionPadding={collisionPadding}
+          onEscapeKeyDown={onEscapeKeyDown}
           onCloseAutoFocus={autoFocusOnClose ? undefined : preventDefault}
         >
           <ActionsMenuDangerousRowsProvider open={isOpen}>{children}</ActionsMenuDangerousRowsProvider>

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

@@ -552,7 +552,7 @@ export const themeColors = {
   // outline
   colorBorderButtonOutlineAccentDefault: [indigo.indigo8, indigoDark.indigo8],
   colorBorderButtonOutlineNeutralDefault: [slate.slate8, slateDark.slate8],
-  colorBorderButtonOutlineDestructiveDefault: [red.red11, redDark.red11],
+  colorBorderButtonOutlineDestructiveDefault: [red.red7, redDark.red7],
   colorBgButtonOutlineAccentDefault: [whiteA.whiteA0, slateDark.slate1],
   colorBgButtonOutlineAccentHover: [indigo.indigo3, indigoDark.indigo8],
   colorBgButtonOutlineNeutralDefault: [whiteA.whiteA0, slateDark.slate1],
@@ -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/ItemsTimeline.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const ItemsTimeline: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20,"fill":"none"},"children":[{"type":"element","tagName":"path","properties":{"clipRule":"evenodd","d":"M4.25 4.5a.75.75 0 0 0-.75.75V7c0 .414.336.75.75.75h6.5A.75.75 0 0 0 11.5 7V5.25a.75.75 0 0 0-.75-.75h-6.5ZM2 5.25A2.25 2.25 0 0 1 4.25 3h6.5A2.25 2.25 0 0 1 13 5.25V7a2.25 2.25 0 0 1-2.25 2.25h-6.5A2.25 2.25 0 0 1 2 7V5.25Zm7.25 7a.75.75 0 0 0-.75.75v1.75c0 .414.336.75.75.75h6.5a.75.75 0 0 0 .75-.75V13a.75.75 0 0 0-.75-.75h-6.5ZM7 13a2.25 2.25 0 0 1 2.25-2.25h6.5A2.25 2.25 0 0 1 18 13v1.75A2.25 2.25 0 0 1 15.75 17h-6.5A2.25 2.25 0 0 1 7 14.75V13Z"},"children":[]}],"metadata":""}]},"name":"items-timeline"};
+
+export default ItemsTimeline;

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/icons/ast/index.tsx

@@ -118,6 +118,7 @@ export { default as IntegrationsIntegrationIntercomColor } from './IntegrationsI
 export { default as IntegrationsIntegrationSlackColor } from './IntegrationsIntegrationSlackColor';
 export { default as IntegrationsIntegrationZendeskColor } from './IntegrationsIntegrationZendeskColor';
 export { default as InvitePeople } from './InvitePeople';
+export { default as ItemsTimeline } from './ItemsTimeline';
 export { default as Items } from './Items';
 export { default as Jira } from './Jira';
 export { default as Key } from './Key';

package/src/icons/react/ItemsTimeline.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import ItemsTimelineSvg from '../ast/ItemsTimeline';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const ItemsTimeline = forwardRef<SVGSVGElement, IconBaseProps>(function ItemsTimeline(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={ItemsTimelineSvg} />});
+
+export default ItemsTimeline;

package/src/icons/react/index.tsx

@@ -118,6 +118,7 @@ export { default as IntegrationsIntegrationIntercomColor } from './IntegrationsI
 export { default as IntegrationsIntegrationSlackColor } from './IntegrationsIntegrationSlackColor';
 export { default as IntegrationsIntegrationZendeskColor } from './IntegrationsIntegrationZendeskColor';
 export { default as InvitePeople } from './InvitePeople';
+export { default as ItemsTimeline } from './ItemsTimeline';
 export { default as Items } from './Items';
 export { default as Jira } from './Jira';
 export { default as Key } from './Key';

package/src/toggle.tsx

@@ -34,9 +34,11 @@ const Label = styled.div<{labelPosition: "last" | "first"; disabled?: boolean}>`
   opacity: ${({disabled}) => (disabled ? 0.5 : 1)};
   line-height: ${layout.checkboxSize}px;
   width: 100%;
+  min-width: 0;
 `;
 
 const labelWrapperStyle = css`
+  min-width: 0;
   display: flex;
   position: relative;
   align-items: center;