@clickhouse/click-ui 0.0.213 → 0.0.215

package/dist/click-ui.bundled.es.js

@@ -15567,7 +15567,7 @@ const ConfirmationDialog = ({
     /* @__PURE__ */ jsx(Separator, { size: "xl" }),
     /* @__PURE__ */ jsxs(ActionsWrapper, { children: [
       /* @__PURE__ */ jsx(Dialog.Close, { label: secondaryActionLabel, "data-testid": "cancel-action-button" }),
-      /* @__PURE__ */ jsx(Dialog.Close, { loading: !!loading, disabled: !!disabled || !!loading, type: primaryActionType, label: primaryActionLabel, onClick: () => {
+      /* @__PURE__ */ jsx(Dialog.Close, { loading: !!loading, disabled: !!disabled || !!loading, type: primaryActionType, label: primaryActionLabel, autoFocus: open2, onClick: () => {
         if (onConfirm) {
           onConfirm();
         }
@@ -42437,11 +42437,13 @@ const Title = pt.div.withConfig({
 })(["flex:1;"]);
 const Toast = ({
   type,
+  toastType = "foreground",
   title,
   description,
   actions = [],
   duration: duration2,
-  onClose
+  onClose,
+  ...props
 }) => {
   let iconName = "";
   if (type === "default") {
@@ -42451,7 +42453,7 @@ const Toast = ({
   } else if (type && ["danger", "warning"].includes(type)) {
     iconName = "warning";
   }
-  return /* @__PURE__ */ jsxs(ToastRoot, { onOpenChange: onClose, duration: duration2, children: [
+  return /* @__PURE__ */ jsxs(ToastRoot, { onOpenChange: onClose, duration: duration2, type: toastType, ...props, children: [
     /* @__PURE__ */ jsxs(ToastHeader, { children: [
       iconName.length > 0 && /* @__PURE__ */ jsx(ToastIcon, { name: iconName, $type: type }),
       /* @__PURE__ */ jsx(Title, { children: title }),
@@ -51909,8 +51911,8 @@ const MultiAccordionItem = ({
         /* @__PURE__ */ jsx(AccordionIconWrapper, { children: /* @__PURE__ */ jsx(SvgImage, { name: "chevron-right", size: iconSize ?? customSize, "aria-label": "accordion icon" }) }),
         icon ? /* @__PURE__ */ jsx(SvgImage, { name: icon, size: iconSize ?? customSize }) : null
       ] }),
-      /* @__PURE__ */ jsxs(Container, { isResponsive: false, gap: "sm", alignItems: "center", fillWidth: true, justifyContent: "space-between", component: "span", children: [
-        /* @__PURE__ */ jsx(Text, { component: "span", size: customSize, fillWidth, children: title }),
+      /* @__PURE__ */ jsxs(Container, { isResponsive: false, gap: "sm", alignItems: "center", fillWidth: true, justifyContent: "space-between", component: "span", overflow: "hidden", children: [
+        /* @__PURE__ */ jsx(AccordionItemTitle, { component: "span", size: customSize, fillWidth, children: title }),
         showCheck && /* @__PURE__ */ jsx(CustomIcon, { name: isCompleted ? "check-in-circle" : "circle", $isCompleted: isCompleted, size: iconSize ?? customSize, "aria-label": "accordion icon status", onClick: onClickStatus, "data-icon": "accordion-status", "data-testid": "accordion-status-icon" })
       ] })
     ] }),
@@ -52001,6 +52003,9 @@ const AccordionContent = pt($1bf158f521e1b1b4$export$7c6e2c02157bb7d2).withConfi
   theme: theme2,
   $padding
 }) => theme2.click.container.space[$padding]);
+const AccordionItemTitle = pt(Text).withConfig({
+  componentId: "sc-1lb3204-7"
+})(["overflow:hidden;"]);
 export {
   AccordionToExport as Accordion,
   Alert,

package/dist/click-ui.bundled.umd.js

@@ -15583,7 +15583,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       /* @__PURE__ */ jsxRuntime.jsx(Separator, { size: "xl" }),
       /* @__PURE__ */ jsxRuntime.jsxs(ActionsWrapper, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(Dialog.Close, { label: secondaryActionLabel, "data-testid": "cancel-action-button" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Dialog.Close, { loading: !!loading, disabled: !!disabled || !!loading, type: primaryActionType, label: primaryActionLabel, onClick: () => {
+        /* @__PURE__ */ jsxRuntime.jsx(Dialog.Close, { loading: !!loading, disabled: !!disabled || !!loading, type: primaryActionType, label: primaryActionLabel, autoFocus: open2, onClick: () => {
           if (onConfirm) {
             onConfirm();
           }
@@ -42453,11 +42453,13 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   })(["flex:1;"]);
   const Toast = ({
     type,
+    toastType = "foreground",
     title,
     description,
     actions = [],
     duration: duration2,
-    onClose
+    onClose,
+    ...props
   }) => {
     let iconName = "";
     if (type === "default") {
@@ -42467,7 +42469,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     } else if (type && ["danger", "warning"].includes(type)) {
       iconName = "warning";
     }
-    return /* @__PURE__ */ jsxRuntime.jsxs(ToastRoot, { onOpenChange: onClose, duration: duration2, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(ToastRoot, { onOpenChange: onClose, duration: duration2, type: toastType, ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(ToastHeader, { children: [
         iconName.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(ToastIcon, { name: iconName, $type: type }),
         /* @__PURE__ */ jsxRuntime.jsx(Title, { children: title }),
@@ -51925,8 +51927,8 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
           /* @__PURE__ */ jsxRuntime.jsx(AccordionIconWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "chevron-right", size: iconSize ?? customSize, "aria-label": "accordion icon" }) }),
           icon ? /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: icon, size: iconSize ?? customSize }) : null
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(Container, { isResponsive: false, gap: "sm", alignItems: "center", fillWidth: true, justifyContent: "space-between", component: "span", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Text, { component: "span", size: customSize, fillWidth, children: title }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Container, { isResponsive: false, gap: "sm", alignItems: "center", fillWidth: true, justifyContent: "space-between", component: "span", overflow: "hidden", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(AccordionItemTitle, { component: "span", size: customSize, fillWidth, children: title }),
           showCheck && /* @__PURE__ */ jsxRuntime.jsx(CustomIcon, { name: isCompleted ? "check-in-circle" : "circle", $isCompleted: isCompleted, size: iconSize ?? customSize, "aria-label": "accordion icon status", onClick: onClickStatus, "data-icon": "accordion-status", "data-testid": "accordion-status-icon" })
         ] })
       ] }),
@@ -52017,6 +52019,9 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     theme: theme2,
     $padding
   }) => theme2.click.container.space[$padding]);
+  const AccordionItemTitle = pt(Text).withConfig({
+    componentId: "sc-1lb3204-7"
+  })(["overflow:hidden;"]);
   exports2.Accordion = AccordionToExport;
   exports2.Alert = Alert;
   exports2.AutoComplete = AutoComplete;

package/dist/click-ui.es.js

@@ -14399,7 +14399,7 @@ const ConfirmationDialog = ({
     /* @__PURE__ */ jsx(Separator, { size: "xl" }),
     /* @__PURE__ */ jsxs(ActionsWrapper, { children: [
       /* @__PURE__ */ jsx(Dialog.Close, { label: secondaryActionLabel, "data-testid": "cancel-action-button" }),
-      /* @__PURE__ */ jsx(Dialog.Close, { loading: !!loading, disabled: !!disabled || !!loading, type: primaryActionType, label: primaryActionLabel, onClick: () => {
+      /* @__PURE__ */ jsx(Dialog.Close, { loading: !!loading, disabled: !!disabled || !!loading, type: primaryActionType, label: primaryActionLabel, autoFocus: open2, onClick: () => {
         if (onConfirm) {
           onConfirm();
         }
@@ -41269,11 +41269,13 @@ const Title = styled.div.withConfig({
 })(["flex:1;"]);
 const Toast = ({
   type,
+  toastType = "foreground",
   title,
   description,
   actions = [],
   duration: duration2,
-  onClose
+  onClose,
+  ...props
 }) => {
   let iconName = "";
   if (type === "default") {
@@ -41283,7 +41285,7 @@ const Toast = ({
   } else if (type && ["danger", "warning"].includes(type)) {
     iconName = "warning";
   }
-  return /* @__PURE__ */ jsxs(ToastRoot, { onOpenChange: onClose, duration: duration2, children: [
+  return /* @__PURE__ */ jsxs(ToastRoot, { onOpenChange: onClose, duration: duration2, type: toastType, ...props, children: [
     /* @__PURE__ */ jsxs(ToastHeader, { children: [
       iconName.length > 0 && /* @__PURE__ */ jsx(ToastIcon, { name: iconName, $type: type }),
       /* @__PURE__ */ jsx(Title, { children: title }),
@@ -50741,8 +50743,8 @@ const MultiAccordionItem = ({
         /* @__PURE__ */ jsx(AccordionIconWrapper, { children: /* @__PURE__ */ jsx(SvgImage, { name: "chevron-right", size: iconSize ?? customSize, "aria-label": "accordion icon" }) }),
         icon ? /* @__PURE__ */ jsx(SvgImage, { name: icon, size: iconSize ?? customSize }) : null
       ] }),
-      /* @__PURE__ */ jsxs(Container, { isResponsive: false, gap: "sm", alignItems: "center", fillWidth: true, justifyContent: "space-between", component: "span", children: [
-        /* @__PURE__ */ jsx(Text, { component: "span", size: customSize, fillWidth, children: title }),
+      /* @__PURE__ */ jsxs(Container, { isResponsive: false, gap: "sm", alignItems: "center", fillWidth: true, justifyContent: "space-between", component: "span", overflow: "hidden", children: [
+        /* @__PURE__ */ jsx(AccordionItemTitle, { component: "span", size: customSize, fillWidth, children: title }),
         showCheck && /* @__PURE__ */ jsx(CustomIcon, { name: isCompleted ? "check-in-circle" : "circle", $isCompleted: isCompleted, size: iconSize ?? customSize, "aria-label": "accordion icon status", onClick: onClickStatus, "data-icon": "accordion-status", "data-testid": "accordion-status-icon" })
       ] })
     ] }),
@@ -50833,6 +50835,9 @@ const AccordionContent = styled($1bf158f521e1b1b4$export$7c6e2c02157bb7d2).withC
   theme: theme2,
   $padding
 }) => theme2.click.container.space[$padding]);
+const AccordionItemTitle = styled(Text).withConfig({
+  componentId: "sc-1lb3204-7"
+})(["overflow:hidden;"]);
 export {
   AccordionToExport as Accordion,
   Alert,

package/dist/click-ui.umd.js

@@ -14414,7 +14414,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       /* @__PURE__ */ jsxRuntime.jsx(Separator, { size: "xl" }),
       /* @__PURE__ */ jsxRuntime.jsxs(ActionsWrapper, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(Dialog.Close, { label: secondaryActionLabel, "data-testid": "cancel-action-button" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Dialog.Close, { loading: !!loading, disabled: !!disabled || !!loading, type: primaryActionType, label: primaryActionLabel, onClick: () => {
+        /* @__PURE__ */ jsxRuntime.jsx(Dialog.Close, { loading: !!loading, disabled: !!disabled || !!loading, type: primaryActionType, label: primaryActionLabel, autoFocus: open2, onClick: () => {
           if (onConfirm) {
             onConfirm();
           }
@@ -41284,11 +41284,13 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   })(["flex:1;"]);
   const Toast = ({
     type,
+    toastType = "foreground",
     title,
     description,
     actions = [],
     duration: duration2,
-    onClose
+    onClose,
+    ...props
   }) => {
     let iconName = "";
     if (type === "default") {
@@ -41298,7 +41300,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     } else if (type && ["danger", "warning"].includes(type)) {
       iconName = "warning";
     }
-    return /* @__PURE__ */ jsxRuntime.jsxs(ToastRoot, { onOpenChange: onClose, duration: duration2, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(ToastRoot, { onOpenChange: onClose, duration: duration2, type: toastType, ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(ToastHeader, { children: [
         iconName.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(ToastIcon, { name: iconName, $type: type }),
         /* @__PURE__ */ jsxRuntime.jsx(Title, { children: title }),
@@ -50756,8 +50758,8 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
           /* @__PURE__ */ jsxRuntime.jsx(AccordionIconWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "chevron-right", size: iconSize ?? customSize, "aria-label": "accordion icon" }) }),
           icon ? /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: icon, size: iconSize ?? customSize }) : null
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(Container, { isResponsive: false, gap: "sm", alignItems: "center", fillWidth: true, justifyContent: "space-between", component: "span", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Text, { component: "span", size: customSize, fillWidth, children: title }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Container, { isResponsive: false, gap: "sm", alignItems: "center", fillWidth: true, justifyContent: "space-between", component: "span", overflow: "hidden", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(AccordionItemTitle, { component: "span", size: customSize, fillWidth, children: title }),
           showCheck && /* @__PURE__ */ jsxRuntime.jsx(CustomIcon, { name: isCompleted ? "check-in-circle" : "circle", $isCompleted: isCompleted, size: iconSize ?? customSize, "aria-label": "accordion icon status", onClick: onClickStatus, "data-icon": "accordion-status", "data-testid": "accordion-status-icon" })
         ] })
       ] }),
@@ -50848,6 +50850,9 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     theme: theme2,
     $padding
   }) => theme2.click.container.space[$padding]);
+  const AccordionItemTitle = styled.styled(Text).withConfig({
+    componentId: "sc-1lb3204-7"
+  })(["overflow:hidden;"]);
   exports2.Accordion = AccordionToExport;
   exports2.Alert = Alert;
   exports2.AutoComplete = AutoComplete;

package/dist/components/Toast/Toast.d.ts

@@ -8,9 +8,10 @@ export interface ToastContextProps {
 export declare const ToastContext: import('react').Context<ToastContextProps>;
 export type ToastAlignment = "start" | "end";
 export type ToastType = "danger" | "warning" | "default" | "success";
-export interface ToastProps {
+export interface ToastProps extends Omit<RadixUIToast.ToastProps, "type"> {
     id?: string;
     type?: ToastType;
+    toastType?: "foreground" | "background";
     title: string;
     description?: ReactNode;
     /** Time in milliseconds the toast will be visible */
@@ -20,7 +21,7 @@ export interface ToastProps {
     }>;
     align?: ToastAlignment;
 }
-export declare const Toast: ({ type, title, description, actions, duration, onClose, }: ToastProps & {
+export declare const Toast: ({ type, toastType, title, description, actions, duration, onClose, ...props }: ToastProps & {
     onClose: (open: boolean) => void;
 }) => import("react/jsx-runtime").JSX.Element;
 export interface ToastProviderProps extends RadixUIToast.ToastProviderProps {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clickhouse/click-ui",
-  "version": "0.0.213",
+  "version": "0.0.215",
   "description": "Official ClickHouse design system react library",
   "type": "module",
   "license": "Apache-2.0",