@fibery/ui-kit 1.28.2 → 1.28.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.28.2",
+  "version": "1.28.4",
   "private": false,
   "files": [
     "src/antd/styles.ts",
@@ -75,7 +75,7 @@
     "react-virtuoso": "4.6.0",
     "screenfull": "6.0.1",
     "ua-parser-js": "0.7.24",
-    "@fibery/emoji-data": "2.4.0",
+    "@fibery/emoji-data": "2.5.0",
     "@fibery/helpers": "1.2.0",
     "@fibery/react": "1.3.1"
   },

package/src/button/button.tsx

@@ -15,6 +15,7 @@ type PositionInGroup = "first" | "middle" | "last";
 
 export const ButtonSize = {
   superSmall: ":button-size/super-small",
+  smaller: ":button-size/smaller",
   small: ":button-size/small",
   normal: ":button-size/normal",
   big: ":button-size/big",
@@ -23,6 +24,7 @@ export type ButtonSize = (typeof ButtonSize)[keyof typeof ButtonSize];
 
 const FontSizes = {
   ":button-size/super-small": 10,
+  ":button-size/smaller": 12,
   ":button-size/small": 12,
   ":button-size/normal": 14,
   ":button-size/big": 16,
@@ -30,6 +32,7 @@ const FontSizes = {
 
 const HorizontalPaddings = {
   ":button-size/super-small": 4,
+  ":button-size/smaller": 8,
   ":button-size/small": 8,
   ":button-size/normal": 12,
   ":button-size/big": 16,
@@ -37,7 +40,8 @@ const HorizontalPaddings = {
 
 const IconSizes = {
   ":button-size/super-small": 14,
-  ":button-size/small": 18, // if you want to change it please ping Alex T.
+  ":button-size/smaller": 16,
+  ":button-size/small": 18,
   ":button-size/normal": 18,
   ":button-size/big": 20,
 };

package/src/button/icon-button.tsx

@@ -1,11 +1,13 @@
 import {styled} from "@linaria/react";
+import {css} from "@linaria/core";
 import {Children, cloneElement, forwardRef} from "react";
 import {ButtonBase, ButtonBaseProps} from "./button-base";
 import {IconProps} from "../icons/types";
+import cx from "classnames";
 
 export type IconButtonSize = "super-small" | "small" | "normal" | "big";
 
-export type IconButtonProps = Omit<ButtonBaseProps, "borderless"> & {
+export type IconButtonProps = ButtonBaseProps & {
   size?: IconButtonSize;
   classNameOverride?: string;
 };
@@ -24,8 +26,12 @@ type StyledProps = {
 
 const getPadding = ({size}: StyledProps) => Paddings[size];
 
+const weight = css``;
+
 const StyledIconButton = styled(ButtonBase)<StyledProps>`
-  padding: ${getPadding}px;
+  &.${weight} {
+    padding: ${getPadding}px;
+  }
 `;
 
 export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(
@@ -35,7 +41,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(functio
   const iconNode = Children.only(children) as React.ReactElement<IconProps>;
 
   return (
-    <StyledIconButton ref={ref} size={size} className={className} borderless {...rest}>
+    <StyledIconButton ref={ref} size={size} className={cx(className, weight)} borderless {...rest}>
       {/* maybe better to use css variables? */}
       {cloneElement(iconNode, {color: iconNode.props.color || "inherit"})}
     </StyledIconButton>

package/src/design-system.ts

@@ -778,10 +778,10 @@ export const layout = {
   viewSetupWidth: "30vw",
   viewSetupMinWidth: 380,
   inputHeight: 36, //TODO: merge input and item height?
-  timelineLineHeight: 46,
-  timelineGroupPadding: 6,
-  timelineItemHeightRatio: 34 / 40,
-  timelineHeaderHeight: 30,
+  timelineLineHeight: 48,
+  timelineGroupPadding: 0,
+  timelineItemHeightRatio: 36 / 48,
+  timelineHeaderHeight: 48,
   calendarEventHeight: 30,
   calendarHeaderHeight: 30,
   calendarToolbarHeight: 60,

package/src/emoji-picker/emoji-picker-content-with-color.tsx

@@ -46,7 +46,8 @@ const ColorPickerCollapsibleTrigger: React.FC<ColorPickerCollapsibleTrigger> = (
 };
 
 const collapsibleWrapperCss = css`
-  max-height: 308px; // search + emoji grid
+  display: grid;
+  grid-template-rows: auto 1fr;
   overflow: hidden;
 `;
 
@@ -76,6 +77,7 @@ export const EmojiPickerContentWithColor: React.FC<EmojiPickerContentWithColorPr
 
   return (
     <CollapsibleRoot
+      style={{maxHeight: `var(--fibery-emoji-content-max-height, 308px)`}}
       className={collapsibleWrapperCss}
       open={colorOpened}
       onOpenChange={setColorOpened}

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

@@ -10,6 +10,7 @@ const i18n = {search: "Search emoji..."};
 
 export type EmojiPickerProps = {
   color?: string;
+  emojiSize?: number;
   getHoverColor?: (color: string) => string | undefined;
   colors?: string[];
   onColorSelect?: (c: $TSFixMe) => void;
@@ -30,12 +31,13 @@ export const EmojiPicker: React.FC<EmojiPickerProps> = ({
   getHoverColor,
   showSkinTones,
   searchRef,
+  emojiSize = 20,
 }) => {
   const showFooter = Boolean(onAddCustomEmoji) || showSkinTones;
 
   return (
     <EmojiPickerRoot i18n={i18n} onEmojiSelect={onSelect} onCustomCategorySettings={onCustomCategorySettings}>
-      <EmojiPickerContent emojiHoverColor={color ? getHoverColor?.(color) : undefined} emojiSize={20}>
+      <EmojiPickerContent emojiHoverColor={color ? getHoverColor?.(color) : undefined} emojiSize={emojiSize}>
         <EmojiPickerContentWithColor
           color={color}
           colors={colors}

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

@@ -7,6 +7,9 @@ import {contentHorizontalPadding, emojiPadding} from "./layout";
 
 const emojiPickerCss = css`
   background-color: ${themeVars.actionMenuBg};
+  display: grid;
+  grid-template-rows: 1fr auto;
+  height: 100%;
 `;
 
 type EmojiPickerContentSettings = {
@@ -47,7 +50,7 @@ export const EmojiPickerContent: React.FC<React.PropsWithChildren<EmojiPickerCon
           {
             "--fibery-emoji-container-size": `${emojiContainerSize}px`,
             "--fibery-emoji-hover-color": emojiHoverColor,
-            width,
+            width: `var(--fibery-emoji-container-width, ${width}px)`,
           } as CSSProperties
         }
         className={emojiPickerCss}

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

@@ -298,8 +298,10 @@ export const EmojiPickerGrid = forwardRef<EmojiPickerGridHandle, EmojiPickerGrid
 
     return (
       <div
+        style={{
+          height: `var(--fibery-emoji-grid-height, 258px)`,
+        }}
         className={css`
-          height: 258px;
           position: relative;
         `}
       >

package/src/icons/ast/CheckCircleFilled.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const CheckCircleFilled: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"m8.692 10.908 3.575-3.583a.833.833 0 1 1 1.175 1.183l-4.167 4.167a.834.834 0 0 1-1.175 0l-1.958-1.967a.833.833 0 1 1 1.175-1.175l1.375 1.375ZM5.37 3.071a8.333 8.333 0 1 1 9.26 13.858A8.333 8.333 0 0 1 5.37 3.07Z"},"children":[]}],"metadata":""}]},"name":"check-circle-filled"};
+
+export default CheckCircleFilled;

package/src/icons/ast/InfoCircleFilled.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const InfoCircleFilled: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M10 9.167a.833.833 0 0 0-.833.833v3.333a.833.833 0 0 0 1.666 0V10A.834.834 0 0 0 10 9.167Zm0-7.5a8.333 8.333 0 1 0 0 16.666 8.333 8.333 0 0 0 0-16.666ZM9.683 5.9a.833.833 0 0 1 .634 0c.102.04.195.1.275.175a.832.832 0 0 1-.908 1.358.959.959 0 0 1-.276-.175.833.833 0 0 1-.175-.908.959.959 0 0 1 .175-.275.833.833 0 0 1 .275-.175Z"},"children":[]}],"metadata":""}]},"name":"info-circle-filled"};
+
+export default InfoCircleFilled;

package/src/icons/ast/index.tsx

@@ -10,10 +10,6 @@ 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';
-export { default as AntdFilledInfoCircle } from './AntdFilledInfoCircle';
 export { default as AppDetails } from './AppDetails';
 export { default as AppStoreOneColor } from './AppStoreOneColor';
 export { default as AppStore } from './AppStore';
@@ -50,6 +46,7 @@ export { default as Bolt } from './Bolt';
 export { default as Cards } from './Cards';
 export { default as ChatAi } from './ChatAi';
 export { default as Chat } from './Chat';
+export { default as CheckCircleFilled } from './CheckCircleFilled';
 export { default as CheckCircle } from './CheckCircle';
 export { default as Checked } from './Checked';
 export { default as ClearValue } from './ClearValue';
@@ -108,6 +105,7 @@ export { default as Hint } from './Hint';
 export { default as Home } from './Home';
 export { default as ImageXmark } from './ImageXmark';
 export { default as Import } from './Import';
+export { default as InfoCircleFilled } from './InfoCircleFilled';
 export { default as Integration } from './Integration';
 export { default as InvitePeople } from './InvitePeople';
 export { default as Items } from './Items';

package/src/icons/react/CheckCircleFilled.tsx

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

package/src/icons/react/InfoCircleFilled.tsx

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

package/src/icons/react/index.tsx

@@ -10,10 +10,6 @@ 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';
-export { default as AntdFilledInfoCircle } from './AntdFilledInfoCircle';
 export { default as AppDetails } from './AppDetails';
 export { default as AppStoreOneColor } from './AppStoreOneColor';
 export { default as AppStore } from './AppStore';
@@ -50,6 +46,7 @@ export { default as Bolt } from './Bolt';
 export { default as Cards } from './Cards';
 export { default as ChatAi } from './ChatAi';
 export { default as Chat } from './Chat';
+export { default as CheckCircleFilled } from './CheckCircleFilled';
 export { default as CheckCircle } from './CheckCircle';
 export { default as Checked } from './Checked';
 export { default as ClearValue } from './ClearValue';
@@ -108,6 +105,7 @@ export { default as Hint } from './Hint';
 export { default as Home } from './Home';
 export { default as ImageXmark } from './ImageXmark';
 export { default as Import } from './Import';
+export { default as InfoCircleFilled } from './InfoCircleFilled';
 export { default as Integration } from './Integration';
 export { default as InvitePeople } from './InvitePeople';
 export { default as Items } from './Items';

package/src/lists/actions-menu-row-surface.tsx

@@ -11,8 +11,8 @@ import {
   ListRowContent,
   ListRowContentProps,
   ListRowSurfaceProps,
-  NATUAL_FOCUS_CLASS,
-  NATUAL_HOVER_CLASS,
+  NATURAL_FOCUS_CLASS,
+  NATURAL_HOVER_CLASS,
   NATURAL_HOVER,
   listRowSurfaceStylesBase,
 } from "./list-row-surface";
@@ -100,8 +100,8 @@ export const ActionMenuItemSurface = forwardRef<HTMLDivElement, ActionMenuItemSu
           listRowSurfaceStylesBase,
           actionMenuItemSurface,
           className,
-          hovered === undefined && NATUAL_HOVER_CLASS,
-          focused === undefined && NATUAL_FOCUS_CLASS,
+          hovered === undefined && NATURAL_HOVER_CLASS,
+          focused === undefined && NATURAL_FOCUS_CLASS,
           focused && "focus",
           disabled && "done",
           selected && "selected",

package/src/lists/list-row-surface.tsx

@@ -1,6 +1,6 @@
 import {css, cx} from "@linaria/core";
 import {ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren, ReactNode} from "react";
-import {border, space, textStyles, themeVars} from "../design-system";
+import {border, space, textStyles, themeVars, transition} from "../design-system";
 
 interface ListRowSurfaceBase extends HTMLAttributes<HTMLDivElement> {
   testId?: string;
@@ -13,10 +13,10 @@ export interface ListRowSurfaceProps extends ListRowSurfaceBase {
   hovered?: boolean;
 }
 
-export const NATUAL_HOVER_CLASS = "natural-hover";
-export const NATUAL_FOCUS_CLASS = "natural-focus";
-export const NATURAL_HOVER = `&.${NATUAL_HOVER_CLASS}:hover`;
-export const NATURAL_FOCUS = `&.${NATUAL_FOCUS_CLASS}:focus`;
+export const NATURAL_HOVER_CLASS = "natural-hover";
+export const NATURAL_FOCUS_CLASS = "natural-focus";
+export const NATURAL_HOVER = `&.${NATURAL_HOVER_CLASS}:hover`;
+export const NATURAL_FOCUS = `&.${NATURAL_FOCUS_CLASS}:focus`;
 
 export const listRowSurfaceStylesBase = css`
   max-width: 100%;
@@ -30,7 +30,7 @@ export const listRowSurfaceStylesBase = css`
   ${{...textStyles.regular}};
   color: ${themeVars.textColor};
   border-radius: ${border.radius6}px;
-  transition: background-color;
+  transition: background-color ${transition};
   &:focus {
     outline: none;
   }
@@ -158,8 +158,8 @@ export const ListRowSurface = forwardRef<HTMLDivElement, ListRowSurfaceProps>(
           listRowSurfaceStylesBase,
           darker ? listRowSurfaceStatesDark : listRowSurfaceStatesDefault,
           className,
-          hovered === undefined && NATUAL_HOVER_CLASS,
-          focused === undefined && NATUAL_FOCUS_CLASS,
+          hovered === undefined && NATURAL_HOVER_CLASS,
+          focused === undefined && NATURAL_FOCUS_CLASS,
           focused && "focus",
           hovered && "hover",
           selected && "selected",

package/src/tooltip.tsx

@@ -96,6 +96,7 @@ export const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps> =
 export type TooltipProps = Omit<TooltipPrimitive.TooltipTriggerProps, "title"> & {
   title?: ReactNode;
   description?: ReactNode;
+  setContentElement?: (el: HTMLDivElement | null) => void;
   content?: ReactNode;
   side?: TooltipPrimitive.TooltipContentProps["side"];
   sideOffset?: TooltipPrimitive.TooltipContentProps["sideOffset"];
@@ -142,7 +143,7 @@ export const Tooltip = forwardRef<HTMLButtonElement, TooltipProps>(
       onVisibleChange,
       keepOnClick,
       disabled,
-
+      setContentElement,
       ...triggerProps
     },
     ref
@@ -171,6 +172,7 @@ export const Tooltip = forwardRef<HTMLButtonElement, TooltipProps>(
         </TooltipPrimitive.Trigger>
         <TooltipPrimitive.Portal>
           <TooltipPrimitive.Content
+            ref={setContentElement}
             side={side}
             sideOffset={sideOffset}
             align={align}

package/src/icons/ast/AntdFilledCheckCircle.ts

@@ -1,8 +0,0 @@
-
-// This icon file is generated automatically.
-
-import { IconDefinition } from '../types';
-
-const AntdFilledCheckCircle: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 1024 1024"},"children":[{"type":"element","tagName":"path","properties":{"d":"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7-210.6 292a31.8 31.8 0 0 1-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"},"children":[]}],"metadata":""}]},"name":"antd-filled-check-circle"};
-
-export default AntdFilledCheckCircle;

package/src/icons/ast/AntdFilledCloseCircle.ts

@@ -1,8 +0,0 @@
-
-// This icon file is generated automatically.
-
-import { IconDefinition } from '../types';
-
-const AntdFilledCloseCircle: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 1024 1024"},"children":[{"type":"element","tagName":"path","properties":{"d":"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"},"children":[]}],"metadata":""}]},"name":"antd-filled-close-circle"};
-
-export default AntdFilledCloseCircle;

package/src/icons/ast/AntdFilledExclamationCircle.ts

@@ -1,8 +0,0 @@
-
-// This icon file is generated automatically.
-
-import { IconDefinition } from '../types';
-
-const AntdFilledExclamationCircle: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 1024 1024"},"children":[{"type":"element","tagName":"path","properties":{"d":"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"},"children":[]}],"metadata":""}]},"name":"antd-filled-exclamation-circle"};
-
-export default AntdFilledExclamationCircle;

package/src/icons/ast/AntdFilledInfoCircle.ts

@@ -1,8 +0,0 @@
-
-// This icon file is generated automatically.
-
-import { IconDefinition } from '../types';
-
-const AntdFilledInfoCircle: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 1024 1024"},"children":[{"type":"element","tagName":"path","properties":{"d":"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"},"children":[]}],"metadata":""}]},"name":"antd-filled-info-circle"};
-
-export default AntdFilledInfoCircle;

package/src/icons/react/AntdFilledCheckCircle.tsx

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

package/src/icons/react/AntdFilledCloseCircle.tsx

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

package/src/icons/react/AntdFilledExclamationCircle.tsx

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

package/src/icons/react/AntdFilledInfoCircle.tsx

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