@clickhouse/click-ui 0.0.125 → 0.0.127

package/dist/click-ui.es.js

@@ -8731,6 +8731,7 @@ const Accordion = ({
   color,
   icon,
   iconSize,
+  gap,
   children,
   ...delegated
 }) => /* @__PURE__ */ jsxRuntimeExports.jsx($1bf158f521e1b1b4$export$be92b6f5f03c0fe9, { type: "single", collapsible: true, ...delegated, children: /* @__PURE__ */ jsxRuntimeExports.jsxs($1bf158f521e1b1b4$export$6d08773d2e66f8f2, { value: "item", children: [
@@ -8739,8 +8740,9 @@ const Accordion = ({
       /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionIconWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "chevron-right", size: iconSize || size2, "aria-label": "accordion icon" }) }),
       icon ? /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, size: iconSize || size2 }) : null
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: title })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { size: size2, children: title })
   ] }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx(Spacer, { size: gap }),
   /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionContent, { children })
 ] }) });
 const AccordionTrigger = styled($1bf158f521e1b1b4$export$41fb9f06171c75f4).withConfig({
@@ -9726,6 +9728,7 @@ const Badge = ({
 ] }) });
 const BigStat = ({
   fillWidth = false,
+  maxWidth,
   height = "6rem",
   label = "Label",
   order = "titleTop",
@@ -9733,7 +9736,7 @@ const BigStat = ({
   spacing = "sm",
   state = "default",
   title = "Title"
-}) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$b, { $height: height, $order: order, $size: size2, $spacing: spacing, $state: state, $fillWidth: fillWidth, children: [
+}) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$b, { $height: height, $order: order, $size: size2, $spacing: spacing, $state: state, $fillWidth: fillWidth, $maxWidth: maxWidth, children: [
   /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { $state: state, $size: size2, children: label }),
   /* @__PURE__ */ jsxRuntimeExports.jsx(Title$3, { $state: state, $size: size2, children: title })
 ] });
@@ -9741,6 +9744,7 @@ const Wrapper$b = styled.div.withConfig({
   componentId: "sc-u5029o-0"
 })(["display:flex;justify-content:center;box-sizing:border-box;", ""], ({
   $fillWidth = false,
+  $maxWidth = "none",
   $state = "default",
   $size = "lg",
   $height = "fixed",
@@ -9758,6 +9762,7 @@ const Wrapper$b = styled.div.withConfig({
   min-height: ${$height !== void 0 ? `${$height}` : "auto"};
   flex-direction: ${$order === "titleBottom" ? "column-reverse" : "column"};
   width: ${$fillWidth === true ? "100%" : "auto"};
+  max-width: ${$maxWidth ? $maxWidth : "none"};
   `);
 const Label = styled.div.withConfig({
   componentId: "sc-u5029o-1"
@@ -16934,7 +16939,7 @@ const useSelectionActions = ({
     let action = null;
     if (moveAnchor) {
       if (selection.type === "rows") {
-        const row = clamp2(selection.anchorRow + rowDiff, 0, rowCount - 1);
+        const row = clamp2(selection.anchorRow + rowDiff, 0, rowCount + rowStart - 1);
         action = {
           type: "shiftRowSelection",
           row,
@@ -16948,7 +16953,7 @@ const useSelectionActions = ({
           event
         };
       } else if (selection.type === "rectangle") {
-        const row = clamp2(selection.anchor.row + rowDiff, 0, rowCount - 1);
+        const row = clamp2(selection.anchor.row + rowDiff, 0, rowCount + rowStart - 1);
         const column = clamp2(selection.anchor.column + columnDiff, 0, columnCount - 1);
         action = {
           type: "shiftSelection",
@@ -16958,7 +16963,7 @@ const useSelectionActions = ({
         };
       }
     } else {
-      const row = clamp2(focus.row + rowDiff, 0, rowCount - 1);
+      const row = clamp2(focus.row + rowDiff, 0, rowCount + rowStart - 1);
       const column = clamp2(focus.column + columnDiff, 0, columnCount - 1);
       action = {
         type: "normal",
@@ -16971,7 +16976,7 @@ const useSelectionActions = ({
       onSelection(action);
     }
     return action;
-  }, [onSelection, columnCount, rowCount, selection, focus]);
+  }, [onSelection, columnCount, rowCount, selection, focus, rowStart]);
   const getSelectionType = useCallback((args) => {
     if (args.type === "all") {
       const isSelected = cellRectSelected(selection, 0, rowStart, columnCount - 1, rowCount + rowStart - 1);
@@ -37924,7 +37929,7 @@ const TableRow = styled.tr.withConfig({
     `);
 const TableData = styled.td.withConfig({
   componentId: "sc-1q458rb-4"
-})(["overflow:hidden;", " @media (max-width:768px){width:auto;min-width:40%;padding:", " ", ";}"], ({
+})(["overflow:hidden;", " @media (max-width:768px){width:auto;min-width:40%;", "}"], ({
   theme: theme2,
   $size
 }) => `
@@ -37933,9 +37938,9 @@ const TableData = styled.td.withConfig({
     padding: ${theme2.click.table.body.cell.space[$size].y} ${theme2.click.table.body.cell.space[$size].x};
   `, ({
   theme: theme2
-}) => theme2.click.table.body.cell.space.sm.y, ({
-  theme: theme2
-}) => theme2.click.table.body.cell.space.sm.x);
+}) => `
+      padding: ${theme2.click.table.body.cell.space.sm.y} ${theme2.click.table.body.cell.space.sm.x};
+    `);
 const StyledColGroup = styled.colgroup.withConfig({
   componentId: "sc-1q458rb-5"
 })(["@media (max-width:768px){display:none;}"]);
@@ -38009,9 +38014,6 @@ const TableRowCloseButton = styled.button.withConfig({
 }) => `
     ${$isDeleted ? "transform: rotate(45deg)" : ""};
     `);
-const TableText = styled.div.withConfig({
-  componentId: "sc-1q458rb-17"
-})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
 const TableBodyRow = ({
   headers,
   items,
@@ -38036,7 +38038,7 @@ const TableBodyRow = ({
       ...cellProps
     }, cellIndex) => /* @__PURE__ */ jsxRuntimeExports.jsxs(TableData, { $size: size2, ...cellProps, children: [
       headers[cellIndex] && /* @__PURE__ */ jsxRuntimeExports.jsx(MobileHeader, { children: headers[cellIndex].label }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(TableText, { children: label })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(EllipsisContent, { component: "div", children: label })
     ] }, `table-cell-${cellIndex}`)),
     actionsList.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(ActionsList, { $size: size2, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(ActionsContainer, { children: [
       actionsList.includes("editAction") && /* @__PURE__ */ jsxRuntimeExports.jsx(EditButton, { as: IconButton$1, type: "ghost", disabled: isDisabled || isDeleted || !isEditable, icon: "pencil", onClick: onEdit, "data-testid": "table-row-edit" }),
@@ -38045,10 +38047,10 @@ const TableBodyRow = ({
   ] });
 };
 const SpanedTableData = styled(TableData).withConfig({
-  componentId: "sc-1q458rb-18"
+  componentId: "sc-1q458rb-17"
 })(["text-align:center;"]);
 const CustomTableDataMessage = styled.div.withConfig({
-  componentId: "sc-1q458rb-19"
+  componentId: "sc-1q458rb-18"
 })(["display:flex;gap:0.5rem;justify-content:center;"]);
 const LoadingData = () => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
@@ -38135,7 +38137,7 @@ const Table = forwardRef(({
   ] });
 });
 const StyledTable = styled.table.withConfig({
-  componentId: "sc-1q458rb-20"
+  componentId: "sc-1q458rb-19"
 })(["width:100%;border-spacing:0;overflow:hidden;table-layout:fixed;", " @media (max-width:768px){border:none;table-layout:auto;}"], ({
   theme: theme2
 }) => `

package/dist/click-ui.umd.js

@@ -8748,6 +8748,7 @@ var __publicField = (obj, key, value) => {
     color,
     icon,
     iconSize,
+    gap,
     children,
     ...delegated
   }) => /* @__PURE__ */ jsxRuntimeExports.jsx($1bf158f521e1b1b4$export$be92b6f5f03c0fe9, { type: "single", collapsible: true, ...delegated, children: /* @__PURE__ */ jsxRuntimeExports.jsxs($1bf158f521e1b1b4$export$6d08773d2e66f8f2, { value: "item", children: [
@@ -8756,8 +8757,9 @@ var __publicField = (obj, key, value) => {
         /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionIconWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "chevron-right", size: iconSize || size2, "aria-label": "accordion icon" }) }),
         icon ? /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, size: iconSize || size2 }) : null
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: title })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { size: size2, children: title })
     ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Spacer, { size: gap }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionContent, { children })
   ] }) });
   const AccordionTrigger = styled($1bf158f521e1b1b4$export$41fb9f06171c75f4).withConfig({
@@ -9743,6 +9745,7 @@ var __publicField = (obj, key, value) => {
   ] }) });
   const BigStat = ({
     fillWidth = false,
+    maxWidth,
     height = "6rem",
     label = "Label",
     order = "titleTop",
@@ -9750,7 +9753,7 @@ var __publicField = (obj, key, value) => {
     spacing = "sm",
     state = "default",
     title = "Title"
-  }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$b, { $height: height, $order: order, $size: size2, $spacing: spacing, $state: state, $fillWidth: fillWidth, children: [
+  }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$b, { $height: height, $order: order, $size: size2, $spacing: spacing, $state: state, $fillWidth: fillWidth, $maxWidth: maxWidth, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { $state: state, $size: size2, children: label }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Title$3, { $state: state, $size: size2, children: title })
   ] });
@@ -9758,6 +9761,7 @@ var __publicField = (obj, key, value) => {
     componentId: "sc-u5029o-0"
   })(["display:flex;justify-content:center;box-sizing:border-box;", ""], ({
     $fillWidth = false,
+    $maxWidth = "none",
     $state = "default",
     $size = "lg",
     $height = "fixed",
@@ -9775,6 +9779,7 @@ var __publicField = (obj, key, value) => {
   min-height: ${$height !== void 0 ? `${$height}` : "auto"};
   flex-direction: ${$order === "titleBottom" ? "column-reverse" : "column"};
   width: ${$fillWidth === true ? "100%" : "auto"};
+  max-width: ${$maxWidth ? $maxWidth : "none"};
   `);
   const Label = styled.div.withConfig({
     componentId: "sc-u5029o-1"
@@ -16951,7 +16956,7 @@ var __publicField = (obj, key, value) => {
       let action = null;
       if (moveAnchor) {
         if (selection.type === "rows") {
-          const row = clamp2(selection.anchorRow + rowDiff, 0, rowCount - 1);
+          const row = clamp2(selection.anchorRow + rowDiff, 0, rowCount + rowStart - 1);
           action = {
             type: "shiftRowSelection",
             row,
@@ -16965,7 +16970,7 @@ var __publicField = (obj, key, value) => {
             event
           };
         } else if (selection.type === "rectangle") {
-          const row = clamp2(selection.anchor.row + rowDiff, 0, rowCount - 1);
+          const row = clamp2(selection.anchor.row + rowDiff, 0, rowCount + rowStart - 1);
           const column = clamp2(selection.anchor.column + columnDiff, 0, columnCount - 1);
           action = {
             type: "shiftSelection",
@@ -16975,7 +16980,7 @@ var __publicField = (obj, key, value) => {
           };
         }
       } else {
-        const row = clamp2(focus.row + rowDiff, 0, rowCount - 1);
+        const row = clamp2(focus.row + rowDiff, 0, rowCount + rowStart - 1);
         const column = clamp2(focus.column + columnDiff, 0, columnCount - 1);
         action = {
           type: "normal",
@@ -16988,7 +16993,7 @@ var __publicField = (obj, key, value) => {
         onSelection(action);
       }
       return action;
-    }, [onSelection, columnCount, rowCount, selection, focus]);
+    }, [onSelection, columnCount, rowCount, selection, focus, rowStart]);
     const getSelectionType = React.useCallback((args) => {
       if (args.type === "all") {
         const isSelected = cellRectSelected(selection, 0, rowStart, columnCount - 1, rowCount + rowStart - 1);
@@ -37941,7 +37946,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     `);
   const TableData = styled.td.withConfig({
     componentId: "sc-1q458rb-4"
-  })(["overflow:hidden;", " @media (max-width:768px){width:auto;min-width:40%;padding:", " ", ";}"], ({
+  })(["overflow:hidden;", " @media (max-width:768px){width:auto;min-width:40%;", "}"], ({
     theme: theme2,
     $size
   }) => `
@@ -37950,9 +37955,9 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     padding: ${theme2.click.table.body.cell.space[$size].y} ${theme2.click.table.body.cell.space[$size].x};
   `, ({
     theme: theme2
-  }) => theme2.click.table.body.cell.space.sm.y, ({
-    theme: theme2
-  }) => theme2.click.table.body.cell.space.sm.x);
+  }) => `
+      padding: ${theme2.click.table.body.cell.space.sm.y} ${theme2.click.table.body.cell.space.sm.x};
+    `);
   const StyledColGroup = styled.colgroup.withConfig({
     componentId: "sc-1q458rb-5"
   })(["@media (max-width:768px){display:none;}"]);
@@ -38026,9 +38031,6 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   }) => `
     ${$isDeleted ? "transform: rotate(45deg)" : ""};
     `);
-  const TableText = styled.div.withConfig({
-    componentId: "sc-1q458rb-17"
-  })(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
   const TableBodyRow = ({
     headers,
     items,
@@ -38053,7 +38055,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         ...cellProps
       }, cellIndex) => /* @__PURE__ */ jsxRuntimeExports.jsxs(TableData, { $size: size2, ...cellProps, children: [
         headers[cellIndex] && /* @__PURE__ */ jsxRuntimeExports.jsx(MobileHeader, { children: headers[cellIndex].label }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TableText, { children: label })
+        /* @__PURE__ */ jsxRuntimeExports.jsx(EllipsisContent, { component: "div", children: label })
       ] }, `table-cell-${cellIndex}`)),
       actionsList.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(ActionsList, { $size: size2, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(ActionsContainer, { children: [
         actionsList.includes("editAction") && /* @__PURE__ */ jsxRuntimeExports.jsx(EditButton, { as: IconButton$1, type: "ghost", disabled: isDisabled || isDeleted || !isEditable, icon: "pencil", onClick: onEdit, "data-testid": "table-row-edit" }),
@@ -38062,10 +38064,10 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     ] });
   };
   const SpanedTableData = styled(TableData).withConfig({
-    componentId: "sc-1q458rb-18"
+    componentId: "sc-1q458rb-17"
   })(["text-align:center;"]);
   const CustomTableDataMessage = styled.div.withConfig({
-    componentId: "sc-1q458rb-19"
+    componentId: "sc-1q458rb-18"
   })(["display:flex;gap:0.5rem;justify-content:center;"]);
   const LoadingData = () => {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
@@ -38152,7 +38154,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     ] });
   });
   const StyledTable = styled.table.withConfig({
-    componentId: "sc-1q458rb-20"
+    componentId: "sc-1q458rb-19"
   })(["width:100%;border-spacing:0;overflow:hidden;table-layout:fixed;", " @media (max-width:768px){border:none;table-layout:auto;}"], ({
     theme: theme2
   }) => `

package/dist/components/Accordion/Accordion.d.ts

@@ -3,17 +3,19 @@ import * as RadixAccordion from "@radix-ui/react-accordion";
 import { IconSize } from '../../components/Icon/types';
 import { IconName } from '../../components';
 type Size = "sm" | "md" | "lg";
+type Gap = "sm" | "md" | "lg";
 type Color = "default" | "link";
 export interface AccordionProps extends SizeProp, Omit<RadixAccordion.AccordionSingleProps, "type" | "collapsible"> {
     title: string;
     color?: Color;
     icon?: IconName;
     iconSize?: IconSize;
+    gap?: Gap;
     children: React.ReactNode;
 }
 interface SizeProp {
     size?: Size;
 }
-declare const SidebarAccordion: import("styled-components").StyledComponent<({ title, size, color, icon, iconSize, children, ...delegated }: AccordionProps) => import("react/jsx-runtime").JSX.Element, import("styled-components").DefaultTheme, {}, never>;
-declare const AccordionToExport: import("styled-components").StyledComponent<({ title, size, color, icon, iconSize, children, ...delegated }: AccordionProps) => import("react/jsx-runtime").JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+declare const SidebarAccordion: import("styled-components").StyledComponent<({ title, size, color, icon, iconSize, gap, children, ...delegated }: AccordionProps) => import("react/jsx-runtime").JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+declare const AccordionToExport: import("styled-components").StyledComponent<({ title, size, color, icon, iconSize, gap, children, ...delegated }: AccordionProps) => import("react/jsx-runtime").JSX.Element, import("styled-components").DefaultTheme, {}, never>;
 export { AccordionToExport as Accordion, SidebarAccordion };

package/dist/components/BigStat/BigStat.d.ts

@@ -5,6 +5,7 @@ export type bigStatSpacing = "sm" | "lg";
 export type bigStatState = "default" | "muted";
 export interface BigStatProps {
     fillWidth?: boolean;
+    maxWidth?: string;
     height?: string;
     label: React.ReactNode;
     order?: bigStatOrder;
@@ -13,4 +14,4 @@ export interface BigStatProps {
     state?: bigStatState;
     title: React.ReactNode;
 }
-export declare const BigStat: ({ fillWidth, height, label, order, size, spacing, state, title, }: BigStatProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BigStat: ({ fillWidth, maxWidth, height, label, order, size, spacing, state, title, }: BigStatProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

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