@clickhouse/click-ui 0.10.0-rc2 → 0.11.0-rc1

package/dist/types/components/Dropdown/Dropdown.d.ts

@@ -1,6 +1,8 @@
 import { ReactNode } from 'react';
+import { IconWrapperProps } from '../IconWrapper';
 import { IconName } from '../Icon';
 import { HorizontalDirection } from '../../types';
+import { ArrowProps, DropdownItemProps } from './Dropdown.types';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 export declare const Dropdown: {
     (props: DropdownMenu.DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
@@ -21,23 +23,27 @@ export declare const Dropdown: {
         displayName: string;
     };
     Item: {
-        ({ icon, iconDir, type, children, ...props }: DropdownItemProps): import("react/jsx-runtime").JSX.Element;
+        ({ icon, iconDir, type, tooltipProps, children, ...props }: DropdownItemProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
 };
-interface SubDropdownProps {
+interface SubDiscriminant {
     sub?: true;
+}
+interface SubTriggerFields {
     icon?: IconName;
     iconDir?: HorizontalDirection;
+    /**
+     * Positions the tooltip shown when the label is truncated. Defaults to
+     * `side: 'right'` so the tooltip does not cover the items above it.
+     */
+    tooltipProps?: IconWrapperProps['tooltipProps'];
 }
 interface MainDropdownProps {
     sub?: never;
 }
-type DropdownSubTriggerProps = DropdownMenu.DropdownMenuSubTriggerProps & SubDropdownProps;
+type DropdownSubTriggerProps = DropdownMenu.DropdownMenuSubTriggerProps & SubDiscriminant & SubTriggerFields;
 type DropdownTriggerProps = DropdownMenu.DropdownMenuTriggerProps & MainDropdownProps;
-export type ArrowProps = {
-    showArrow?: boolean;
-};
 interface StyledDropdownContentProps extends DropdownMenu.DropdownMenuContentProps {
     children?: ReactNode;
     container?: HTMLElement | null;
@@ -48,15 +54,6 @@ interface StyledDropdownSubContentProps extends DropdownMenu.DropdownMenuSubCont
     container?: HTMLElement | null;
     responsivePositioning?: boolean;
 }
-type DropdownContentProps = StyledDropdownContentProps & SubDropdownProps & ArrowProps;
+type DropdownContentProps = StyledDropdownContentProps & SubDiscriminant & ArrowProps;
 type DropdownSubContentProps = StyledDropdownSubContentProps & MainDropdownProps & ArrowProps;
-interface DropdownItemProps extends DropdownMenu.DropdownMenuItemProps {
-    /** Icon to display in the menu item */
-    icon?: IconName;
-    /** The direction of the icon relative to the label */
-    iconDir?: HorizontalDirection;
-    /** The type of the menu item */
-    type?: 'default' | 'danger';
-}
-export type { DropdownItemProps };
 export default Dropdown;

package/dist/types/components/Dropdown/Dropdown.types.d.ts

@@ -1,10 +1,20 @@
 import { HorizontalDirection } from '../../types';
 import { IconName } from '../Icon/Icon.types';
+import { IconWrapperProps } from '../IconWrapper/IconWrapper.types';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 export interface ArrowProps {
     showArrow?: boolean;
 }
 export interface DropdownItemProps extends DropdownMenu.DropdownMenuItemProps {
+    /** Icon to display in the menu item */
     icon?: IconName;
+    /** The direction of the icon relative to the label */
     iconDir?: HorizontalDirection;
+    /** The type of the menu item */
+    type?: 'default' | 'danger';
+    /**
+     * Positions the tooltip shown when the label is truncated. Defaults to
+     * `side: 'right'` so the tooltip does not cover the items above it.
+     */
+    tooltipProps?: IconWrapperProps['tooltipProps'];
 }

package/dist/types/components/EllipsisContent/EllipsisContent.d.ts

@@ -1,7 +1,5 @@
 import { ComponentProps, ElementType, ReactNode } from 'react';
-export interface EllipsisContentProps<T extends ElementType = 'div'> {
-    component?: T;
-}
+import { EllipsisContentProps } from './EllipsisContent.types';
 type EllipsisPolymorphicComponent = <T extends ElementType = 'div'>(props: Omit<ComponentProps<T>, keyof EllipsisContentProps<T>> & EllipsisContentProps<T>) => ReactNode;
 export declare const EllipsisContent: EllipsisPolymorphicComponent;
 export {};

package/dist/types/components/EllipsisContent/EllipsisContent.types.d.ts

@@ -1,4 +1,10 @@
 import { ElementType } from 'react';
+import { TooltipContentProps } from '../Tooltip/Tooltip.types';
 export interface EllipsisContentProps<T extends ElementType = 'div'> {
     component?: T;
+    /**
+     * Positions the tooltip shown when the content is truncated, e.g.
+     * `{ side: 'right' }` to keep it clear of the content above it.
+     */
+    tooltipProps?: Pick<TooltipContentProps, 'side' | 'align' | 'sideOffset'>;
 }

package/dist/types/components/IconWrapper/IconWrapper.d.ts

@@ -1,2 +1,2 @@
 import { IconWrapperProps } from './IconWrapper.types';
-export declare const IconWrapper: ({ icon, iconDir, size, width, height, children, ellipsisContent, gap, isResponsive, ...props }: IconWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IconWrapper: ({ icon, iconDir, size, width, height, children, ellipsisContent, tooltipProps, gap, isResponsive, ...props }: IconWrapperProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/IconWrapper/IconWrapper.types.d.ts

@@ -1,5 +1,6 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import { HorizontalDirection, AssetSize } from '../../types';
+import { EllipsisContentProps } from '../EllipsisContent/EllipsisContent.types';
 import { ImageName } from '../Icon/Icon.types';
 import { GapOptions } from '../Container';
 export interface IconWrapperProps extends HTMLAttributes<HTMLDivElement> {
@@ -10,6 +11,8 @@ export interface IconWrapperProps extends HTMLAttributes<HTMLDivElement> {
     height?: number | string;
     children: ReactNode;
     ellipsisContent?: boolean;
+    /** Positions the truncation tooltip. Ignored when `ellipsisContent` is `false`. */
+    tooltipProps?: EllipsisContentProps['tooltipProps'];
     gap?: GapOptions;
     isResponsive?: boolean;
 }

package/dist/types/components/ProgressBar/ProgressBar.d.ts

@@ -1,2 +1,2 @@
 import { ProgressBarProps } from './ProgressBar.types';
-export declare const ProgressBar: ({ progress, type, dismissable, onCancel, successMessage, orientation, dir, className, ...props }: ProgressBarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ProgressBar: ({ progress, type, dismissable, onCancel, successMessage, orientation, dir, className, style, ...props }: ProgressBarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Text/Text.d.ts

@@ -3,6 +3,7 @@ export type TextSize = 'xs' | 'sm' | 'md' | 'lg';
 export type TextWeight = 'normal' | 'medium' | 'semibold' | 'bold' | 'mono';
 export type TextAlignment = 'left' | 'center' | 'right';
 export type TextColor = 'default' | 'muted' | 'danger' | 'disabled' | 'warning';
+export type TextWrap = 'wrap' | 'nowrap' | 'break-word' | 'break-all';
 export interface TextProps<T extends ElementType = 'p'> {
     /** The text content to display */
     children: ReactNode;
@@ -20,6 +21,8 @@ export interface TextProps<T extends ElementType = 'p'> {
     component?: T;
     /** Whether the text should fill the full width of its container */
     fillWidth?: boolean;
+    /** Text wrapping, unset by default - inherits from parent */
+    wrap?: TextWrap;
 }
 type TextPolymorphicComponent = <T extends ElementType = 'p'>(props: Omit<ComponentProps<T>, keyof TextProps<T>> & TextProps<T>) => ReactNode;
 export declare const Text: TextPolymorphicComponent;

package/dist/types/components/Tooltip/index.d.ts

@@ -1,2 +1,2 @@
 export { Tooltip } from './Tooltip';
-export type { TooltipProps } from './Tooltip.types';
+export type { TooltipContentProps, TooltipProps } from './Tooltip.types';

package/dist/types/index.d.ts

@@ -55,7 +55,9 @@ export type { DateRange, Timezone } from './components/DatePicker/utils';
 export { Dialog } from './components/Dialog';
 export type { DialogContentProps, DialogProps, DialogTriggerProps, } from './components/Dialog';
 export { Dropdown } from './components/Dropdown';
+export type { DropdownItemProps } from './components/Dropdown';
 export { EllipsisContent } from './components/EllipsisContent';
+export type { EllipsisContentProps } from './components/EllipsisContent';
 export { FileMultiUpload, FileUpload } from './components/FileUpload';
 export { FileTabs, FileTabElement } from './components/FileTabs';
 export type { FileTabStatusType } from './components/FileTabs';
@@ -124,7 +126,7 @@ export type { ToastProps } from './components/Toast';
 export { useInitialTheme, useToast, useCUITheme } from './hooks';
 export type { CUIThemeType, UseThemeParams } from './hooks';
 export { Tooltip } from './components/Tooltip/Tooltip';
-export type { TooltipProps } from './components/Tooltip';
+export type { TooltipContentProps, TooltipProps } from './components/Tooltip';
 export { Text } from './components/Text';
 export type { TextProps } from './components/Text';
 export { Title } from './components/Title';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clickhouse/click-ui",
-  "version": "0.10.0-rc2",
+  "version": "0.11.0-rc1",
   "description": "Official ClickHouse design system react library",
   "type": "module",
   "license": "Apache-2.0",
@@ -390,7 +390,7 @@
     "storybook:build": "storybook build -o .storybook/out",
     "storybook:serve": "yarn dlx http-server .storybook/out",
     "test": "vitest",
-    "test:chromatic": "yarn dlx chromatic",
+    "test:chromatic": "yarn chromatic",
     "test:visual": ".scripts/bash/playwright-docker",
     "test:visual:report": ".scripts/bash/playwright-docker report",
     "test:visual:ui": ".scripts/bash/playwright-docker ui",
@@ -400,22 +400,20 @@
   },
   "dependencies": {
     "@h6s/calendar": "2.2.0",
-    "@radix-ui/react-accordion": "1.2.12",
-    "@radix-ui/react-avatar": "1.1.1",
-    "@radix-ui/react-checkbox": "1.1.2",
-    "@radix-ui/react-context-menu": "2.2.2",
-    "@radix-ui/react-dialog": "1.1.2",
-    "@radix-ui/react-dismissable-layer": "1.1.1",
-    "@radix-ui/react-dropdown-menu": "2.1.2",
-    "@radix-ui/react-hover-card": "1.1.2",
-    "@radix-ui/react-popover": "1.1.2",
-    "@radix-ui/react-popper": "1.2.1",
-    "@radix-ui/react-radio-group": "1.2.1",
-    "@radix-ui/react-separator": "1.1.1",
-    "@radix-ui/react-switch": "1.1.1",
-    "@radix-ui/react-tabs": "1.1.1",
-    "@radix-ui/react-toast": "1.2.2",
-    "@radix-ui/react-tooltip": "1.1.2",
+    "@radix-ui/react-accordion": "1.2.20",
+    "@radix-ui/react-avatar": "1.2.6",
+    "@radix-ui/react-checkbox": "1.3.11",
+    "@radix-ui/react-context-menu": "2.3.7",
+    "@radix-ui/react-dialog": "1.1.23",
+    "@radix-ui/react-dropdown-menu": "2.1.24",
+    "@radix-ui/react-hover-card": "1.1.23",
+    "@radix-ui/react-popover": "1.1.23",
+    "@radix-ui/react-radio-group": "1.4.7",
+    "@radix-ui/react-separator": "1.1.15",
+    "@radix-ui/react-switch": "1.3.7",
+    "@radix-ui/react-tabs": "1.1.21",
+    "@radix-ui/react-toast": "1.2.23",
+    "@radix-ui/react-tooltip": "1.2.16",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.19",
@@ -449,7 +447,7 @@
     "@types/react-window": "^1.8.8",
     "@types/sortablejs": "^1.15.2",
     "@vitejs/plugin-react": "^5.1.2",
-    "chromatic": "^13.3.4",
+    "chromatic": "^18.6.0",
     "eslint": "^9",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import": "^2.32.0",