@clickhouse/click-ui 0.0.159 → 0.0.161

package/dist/click-ui.es.js

@@ -32759,6 +32759,7 @@ const Pagination = ({
   onPageNumberFocus,
   onPageNumberBlur,
   disableNextButton,
+  allowAllRows = true,
   ...props
 }) => {
   const hasRowCount = ["number", "string"].includes(typeof rowCount);
@@ -32811,6 +32812,9 @@ const Pagination = ({
       onNextPageClick(e);
     }
   }, [currentPage, onChangeProp, onNextPageClick, rightButtonDisabled]);
+  if (pageSize === -1 && !allowAllRows && maxRowsPerPageList.length > 0) {
+    pageSize = maxRowsPerPageList[0];
+  }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Container, { gap, justifyContent: justifyContent ?? (rowCount || maxRowsPerPageList.length > 0 ? "space-between" : "center"), fillWidth, ...props, children: [
     hasRowCount && /* @__PURE__ */ jsxRuntimeExports.jsxs(Text, { component: "div", color: "muted", size: "sm", children: [
       typeof rowCount === "number" ? formatNumber(rowCount) : rowCount,
@@ -32826,7 +32830,7 @@ const Pagination = ({
       /* @__PURE__ */ jsxRuntimeExports.jsx(IconButton$1, { icon: "chevron-right", type: "ghost", disabled: rightButtonDisabled, onClick: onNextClick, "data-testid": "next-btn" })
     ] }),
     maxRowsPerPageList.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(CustomSelect, { as: Select, onSelect: onPageSizeChange, value: pageSize.toString(), children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Select.Item, { value: "-1", children: "All rows" }),
+      allowAllRows && /* @__PURE__ */ jsxRuntimeExports.jsx(Select.Item, { value: "-1", children: "All rows" }),
       maxRowsPerPageList.map((option2) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Select.Item, { value: option2.toString(), children: [
         option2,
         " rows"
@@ -33335,7 +33339,16 @@ const StyledSelectTrigger = styled($cb5cc270b50c6fcd$export$41fb9f06171c75f4).wi
   `);
 const SelectPopoverContent = styled($cb5cc270b50c6fcd$export$7c6e2c02157bb7d2).withConfig({
   componentId: "sc-oudbwg-3"
-})(["width:var(--radix-popover-trigger-width);max-height:var(--radix-popover-content-available-height);border-radius:0.25rem;pointer-events:auto;", " overflow:hidden;display:flex;padding:0.5rem 0rem;align-items:flex-start;gap:0.625rem;"], ({
+})(["width:var(--radix-popover-trigger-width);max-height:var(--radix-popover-content-available-height);border-radius:0.25rem;pointer-events:auto;", " ", " overflow:hidden;display:flex;padding:0.5rem 0rem;align-items:flex-start;gap:0.625rem;"], ({
+  $useFullWidthItems,
+  $itemCharacterLimit
+}) => `
+    ${$useFullWidthItems ? `
+      max-width: ${$itemCharacterLimit};
+      min-width: var(--radix-popover-trigger-width);
+      width: 100%;
+    ` : "width: var(--radix-popover-trigger-width)"};
+  `, ({
   theme: theme2
 }) => `
     border: 1px solid ${theme2.click.genericMenu.item.color.stroke.default};
@@ -36874,6 +36887,8 @@ const InternalSelect = ({
   selectLabel,
   showSearch = false,
   container,
+  useFullWidthItems = false,
+  itemCharacterLimit = "64ch",
   ...props
 }) => {
   const defaultId = useId();
@@ -37049,7 +37064,7 @@ const InternalSelect = ({
           onUpdateSearch("");
         }, onOpenAutoFocus: () => {
           setHighlighted(visibleList.current[0]);
-        }, align: "start", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectList, { children: [
+        }, align: "start", $useFullWidthItems: useFullWidthItems, $itemCharacterLimit: itemCharacterLimit, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectList, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs(SearchBarContainer, { $showSearch: showSearch, children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(SearchBar, { ref: inputRef, value: search, onChange: (e) => onUpdateSearch(e.target.value), "data-testid": "select-search-input", onKeyDown, $showSearch: showSearch }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(SearchClose, { as: IconButton$1, icon: "cross", onClick: clearSearch, "data-testid": "select-search-close", $showClose: search.length > 0, size: "xs" })

package/dist/click-ui.umd.js

@@ -32776,6 +32776,7 @@ var __publicField = (obj, key, value) => {
     onPageNumberFocus,
     onPageNumberBlur,
     disableNextButton,
+    allowAllRows = true,
     ...props
   }) => {
     const hasRowCount = ["number", "string"].includes(typeof rowCount);
@@ -32828,6 +32829,9 @@ var __publicField = (obj, key, value) => {
         onNextPageClick(e);
       }
     }, [currentPage, onChangeProp, onNextPageClick, rightButtonDisabled]);
+    if (pageSize === -1 && !allowAllRows && maxRowsPerPageList.length > 0) {
+      pageSize = maxRowsPerPageList[0];
+    }
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(Container, { gap, justifyContent: justifyContent ?? (rowCount || maxRowsPerPageList.length > 0 ? "space-between" : "center"), fillWidth, ...props, children: [
       hasRowCount && /* @__PURE__ */ jsxRuntimeExports.jsxs(Text, { component: "div", color: "muted", size: "sm", children: [
         typeof rowCount === "number" ? formatNumber(rowCount) : rowCount,
@@ -32843,7 +32847,7 @@ var __publicField = (obj, key, value) => {
         /* @__PURE__ */ jsxRuntimeExports.jsx(IconButton$1, { icon: "chevron-right", type: "ghost", disabled: rightButtonDisabled, onClick: onNextClick, "data-testid": "next-btn" })
       ] }),
       maxRowsPerPageList.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(CustomSelect, { as: Select, onSelect: onPageSizeChange, value: pageSize.toString(), children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Select.Item, { value: "-1", children: "All rows" }),
+        allowAllRows && /* @__PURE__ */ jsxRuntimeExports.jsx(Select.Item, { value: "-1", children: "All rows" }),
         maxRowsPerPageList.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Select.Item, { value: option.toString(), children: [
           option,
           " rows"
@@ -33352,7 +33356,16 @@ var __publicField = (obj, key, value) => {
   `);
   const SelectPopoverContent = styled($cb5cc270b50c6fcd$export$7c6e2c02157bb7d2).withConfig({
     componentId: "sc-oudbwg-3"
-  })(["width:var(--radix-popover-trigger-width);max-height:var(--radix-popover-content-available-height);border-radius:0.25rem;pointer-events:auto;", " overflow:hidden;display:flex;padding:0.5rem 0rem;align-items:flex-start;gap:0.625rem;"], ({
+  })(["width:var(--radix-popover-trigger-width);max-height:var(--radix-popover-content-available-height);border-radius:0.25rem;pointer-events:auto;", " ", " overflow:hidden;display:flex;padding:0.5rem 0rem;align-items:flex-start;gap:0.625rem;"], ({
+    $useFullWidthItems,
+    $itemCharacterLimit
+  }) => `
+    ${$useFullWidthItems ? `
+      max-width: ${$itemCharacterLimit};
+      min-width: var(--radix-popover-trigger-width);
+      width: 100%;
+    ` : "width: var(--radix-popover-trigger-width)"};
+  `, ({
     theme: theme2
   }) => `
     border: 1px solid ${theme2.click.genericMenu.item.color.stroke.default};
@@ -36891,6 +36904,8 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
     selectLabel,
     showSearch = false,
     container,
+    useFullWidthItems = false,
+    itemCharacterLimit = "64ch",
     ...props
   }) => {
     const defaultId = React.useId();
@@ -37066,7 +37081,7 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
             onUpdateSearch("");
           }, onOpenAutoFocus: () => {
             setHighlighted(visibleList.current[0]);
-          }, align: "start", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectList, { children: [
+          }, align: "start", $useFullWidthItems: useFullWidthItems, $itemCharacterLimit: itemCharacterLimit, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectList, { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs(SearchBarContainer, { $showSearch: showSearch, children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(SearchBar, { ref: inputRef, value: search, onChange: (e) => onUpdateSearch(e.target.value), "data-testid": "select-search-input", onKeyDown, $showSearch: showSearch }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(SearchClose, { as: IconButton$1, icon: "cross", onClick: clearSearch, "data-testid": "select-search-close", $showClose: search.length > 0, size: "xs" })

package/dist/components/Pagination/Pagination.d.ts

@@ -14,5 +14,6 @@ export interface PaginationProps extends Omit<ContainerProps<"div">, "children"
     onPageNumberFocus?: FocusEventHandler<HTMLInputElement>;
     onPageNumberBlur?: FocusEventHandler<HTMLInputElement>;
     disableNextButton?: boolean;
+    allowAllRows?: boolean;
 }
-export declare const Pagination: ({ totalPages, currentPage, maxRowsPerPageList, rowCount, onChange: onChangeProp, onPageSizeChange: onPageSizeChangeProp, pageSize, fillWidth, gap, justifyContent, onNextPageClick, onPrevPageClick, onPageNumberFocus, onPageNumberBlur, disableNextButton, ...props }: PaginationProps) => ReactElement;
+export declare const Pagination: ({ totalPages, currentPage, maxRowsPerPageList, rowCount, onChange: onChangeProp, onPageSizeChange: onPageSizeChangeProp, pageSize, fillWidth, gap, justifyContent, onNextPageClick, onPrevPageClick, onPageNumberFocus, onPageNumberBlur, disableNextButton, allowAllRows, ...props }: PaginationProps) => ReactElement;

package/dist/components/Select/SingleSelect.d.ts

@@ -6,6 +6,8 @@ export interface SelectProps extends Omit<SelectContainerProps, "onChange" | "va
     value?: string;
     placeholder?: string;
     onOpenChange?: (open: boolean) => void;
+    useFullWidthItems?: boolean;
+    itemCharacterLimit?: string;
 }
 export declare const Select: {
     ({ value: valueProp, defaultValue, onSelect: onSelectProp, options, children, onOpenChange: onOpenChangeProp, ...props }: SelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Select/common/InternalSelect.d.ts

@@ -1,6 +1,6 @@
 import { SelectContainerProps, SelectGroupProps, SelectItemProps } from './types';
 
-export declare const InternalSelect: ({ label, children, orientation, dir, disabled, id, error, value: selectedValues, onChange, onSelect, open, onOpenChange, name, form, allowCreateOption, customText, options, sortable, placeholder, multiple, checkbox, selectLabel, showSearch, container, ...props }: SelectContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InternalSelect: ({ label, children, orientation, dir, disabled, id, error, value: selectedValues, onChange, onSelect, open, onOpenChange, name, form, allowCreateOption, customText, options, sortable, placeholder, multiple, checkbox, selectLabel, showSearch, container, useFullWidthItems, itemCharacterLimit, ...props }: SelectContainerProps) => import("react/jsx-runtime").JSX.Element;
 export declare const SelectGroup: import('react').ForwardRefExoticComponent<SelectGroupProps & import('react').RefAttributes<HTMLDivElement>>;
 export declare const SelectItem: import('react').ForwardRefExoticComponent<SelectItemProps & import('react').RefAttributes<HTMLDivElement>>;
 export declare const MultiSelectCheckboxItem: import('react').ForwardRefExoticComponent<SelectItemProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Select/common/SelectStyled.d.ts

@@ -5,9 +5,12 @@ export declare const StyledSelectTrigger: import('styled-components/dist/types')
 }, {
     $error: boolean;
 }>> & string & Omit<import('react').ForwardRefExoticComponent<import('@radix-ui/react-popover').PopoverTriggerProps & import('react').RefAttributes<HTMLButtonElement>>, keyof import('react').Component<any, {}, any>>;
-export declare const SelectPopoverContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<Omit<import('@radix-ui/react-popover').PopoverContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
+export declare const SelectPopoverContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<import('@radix-ui/react-popover').PopoverContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string & Omit<import('react').ForwardRefExoticComponent<import('@radix-ui/react-popover').PopoverContentProps & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
+}, {
+    $useFullWidthItems: boolean;
+    $itemCharacterLimit?: string;
+}>> & string & Omit<import('react').ForwardRefExoticComponent<import('@radix-ui/react-popover').PopoverContentProps & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
 export declare const SearchBarContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $showSearch: boolean;
 }>> & string;

package/dist/components/Select/common/types.d.ts

@@ -67,6 +67,8 @@ interface InternalSelectProps extends PopoverProps, Omit<HTMLAttributes<HTMLDivE
     showSearch?: boolean;
     customText?: string;
     container?: HTMLElement;
+    useFullWidthItems?: boolean;
+    itemCharacterLimit?: string;
 }
 export type SelectOptionProp = SelectOptionType | SelectChildrenType;
 export type SelectContainerProps = SelectOptionProp & InternalSelectProps;

package/package.json

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