@clickhouse/click-ui 0.0.160 → 0.0.161

package/dist/click-ui.es.js

@@ -33339,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};
@@ -36878,6 +36887,8 @@ const InternalSelect = ({
   selectLabel,
   showSearch = false,
   container,
+  useFullWidthItems = false,
+  itemCharacterLimit = "64ch",
   ...props
 }) => {
   const defaultId = useId();
@@ -37053,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

@@ -33356,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};
@@ -36895,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();
@@ -37070,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/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.160",
+  "version": "0.0.161",
   "description": "Official ClickHouse design system react library",
   "type": "module",
   "license": "Apache-2.0",