@fibery/ui-kit 1.33.0 → 1.33.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.33.0",
+  "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/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],

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/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;