@clickhouse/click-ui 0.0.160 → 0.0.162

package/dist/click-ui.es.js

@@ -32547,9 +32547,17 @@ const Wrapper$3 = styled.div.withConfig({
       }
     }
   `);
+const StyledLabel = styled(Label$1).withConfig({
+  componentId: "sc-1pvd2nj-1"
+})(["", ""], ({
+  $labelColor
+}) => `
+    ${$labelColor ? `color: ${$labelColor};` : ""}
+  `);
 const InputWrapper = ({
   id,
   label = "",
+  labelColor,
   error: error2,
   disabled,
   children,
@@ -32562,11 +32570,11 @@ const InputWrapper = ({
       /* @__PURE__ */ jsxRuntimeExports.jsx(Wrapper$3, { $error: !!error2, $resize: resize, "data-resize": resize, className: disabled ? "disabled" : "", children }),
       !!error2 && error2 !== true && /* @__PURE__ */ jsxRuntimeExports.jsx(Error$1, { children: error2 })
     ] }),
-    label && /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { htmlFor: id, disabled, error: !!error2, children: label })
+    label && /* @__PURE__ */ jsxRuntimeExports.jsx(StyledLabel, { htmlFor: id, disabled, error: !!error2, $labelColor: labelColor, children: label })
   ] });
 };
 const InputElement = styled.input.withConfig({
-  componentId: "sc-1pvd2nj-1"
+  componentId: "sc-1pvd2nj-2"
 })(["background:transparent;border:none;outline:none;width:100%;color:inherit;font:inherit;", ""], ({
   theme: theme2
 }) => `
@@ -32581,7 +32589,7 @@ const InputElement = styled.input.withConfig({
     }
   `);
 const NumberInputElement = styled(InputElement).withConfig({
-  componentId: "sc-1pvd2nj-2"
+  componentId: "sc-1pvd2nj-3"
 })(["", ""], ({
   $hideControls
 }) => `
@@ -32596,7 +32604,7 @@ const NumberInputElement = styled(InputElement).withConfig({
     ` : ""}
   `);
 const TextAreaElement = styled.textarea.withConfig({
-  componentId: "sc-1pvd2nj-3"
+  componentId: "sc-1pvd2nj-4"
 })(["background:transparent;border:none;outline:none;width:100%;color:inherit;font:inherit;resize:none;", ""], ({
   theme: theme2
 }) => `
@@ -32607,10 +32615,10 @@ const TextAreaElement = styled.textarea.withConfig({
     }
   `);
 styled(InputWrapper).withConfig({
-  componentId: "sc-1pvd2nj-4"
+  componentId: "sc-1pvd2nj-5"
 })(["resize:vertical;overflow:auto;color:red;"]);
 const IconButton = styled.button.withConfig({
-  componentId: "sc-1pvd2nj-5"
+  componentId: "sc-1pvd2nj-6"
 })(["background:transparent;color:inherit;border:none;padding:0;outline:none;&:not(:disabled){cursor:pointer;}", ""], ({
   theme: theme2,
   $show
@@ -32619,7 +32627,7 @@ const IconButton = styled.button.withConfig({
       visibility: ${$show ? "visible" : "hidden"};
   `);
 styled.svg.withConfig({
-  componentId: "sc-1pvd2nj-6"
+  componentId: "sc-1pvd2nj-7"
 })(["", ""], ({
   theme: theme2
 }) => `
@@ -33339,7 +33347,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 +36895,8 @@ const InternalSelect = ({
   selectLabel,
   showSearch = false,
   container,
+  useFullWidthItems = false,
+  itemCharacterLimit = "64ch",
   ...props
 }) => {
   const defaultId = useId();
@@ -37053,7 +37072,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" })
@@ -38774,6 +38793,7 @@ const TextField = forwardRef(({
   type,
   disabled,
   label,
+  labelColor,
   error: error2,
   id,
   loading,
@@ -38791,7 +38811,7 @@ const TextField = forwardRef(({
   const clearInput = () => {
     onChangeProp("");
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(InputWrapper, { disabled, id: id ?? defaultId, label, error: error2, orientation, dir, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(InputWrapper, { disabled, id: id ?? defaultId, label, labelColor, error: error2, orientation, dir, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(InputElement, { ref: mergeRefs([inputRef, ref]), type, id: id ?? defaultId, disabled, value, onChange, ...props }),
     clear && /* @__PURE__ */ jsxRuntimeExports.jsx(IconButton, { disabled, onClick: clearInput, $show: value.length > 0, "aria-label": "clear input", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "cross", size: "sm" }) }),
     loading && /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "loading-animated", size: "sm" })

package/dist/click-ui.umd.js

@@ -32564,9 +32564,17 @@ var __publicField = (obj, key, value) => {
       }
     }
   `);
+  const StyledLabel = styled(Label$1).withConfig({
+    componentId: "sc-1pvd2nj-1"
+  })(["", ""], ({
+    $labelColor
+  }) => `
+    ${$labelColor ? `color: ${$labelColor};` : ""}
+  `);
   const InputWrapper = ({
     id,
     label = "",
+    labelColor,
     error: error2,
     disabled,
     children,
@@ -32579,11 +32587,11 @@ var __publicField = (obj, key, value) => {
         /* @__PURE__ */ jsxRuntimeExports.jsx(Wrapper$3, { $error: !!error2, $resize: resize, "data-resize": resize, className: disabled ? "disabled" : "", children }),
         !!error2 && error2 !== true && /* @__PURE__ */ jsxRuntimeExports.jsx(Error$1, { children: error2 })
       ] }),
-      label && /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { htmlFor: id, disabled, error: !!error2, children: label })
+      label && /* @__PURE__ */ jsxRuntimeExports.jsx(StyledLabel, { htmlFor: id, disabled, error: !!error2, $labelColor: labelColor, children: label })
     ] });
   };
   const InputElement = styled.input.withConfig({
-    componentId: "sc-1pvd2nj-1"
+    componentId: "sc-1pvd2nj-2"
   })(["background:transparent;border:none;outline:none;width:100%;color:inherit;font:inherit;", ""], ({
     theme: theme2
   }) => `
@@ -32598,7 +32606,7 @@ var __publicField = (obj, key, value) => {
     }
   `);
   const NumberInputElement = styled(InputElement).withConfig({
-    componentId: "sc-1pvd2nj-2"
+    componentId: "sc-1pvd2nj-3"
   })(["", ""], ({
     $hideControls
   }) => `
@@ -32613,7 +32621,7 @@ var __publicField = (obj, key, value) => {
     ` : ""}
   `);
   const TextAreaElement = styled.textarea.withConfig({
-    componentId: "sc-1pvd2nj-3"
+    componentId: "sc-1pvd2nj-4"
   })(["background:transparent;border:none;outline:none;width:100%;color:inherit;font:inherit;resize:none;", ""], ({
     theme: theme2
   }) => `
@@ -32624,10 +32632,10 @@ var __publicField = (obj, key, value) => {
     }
   `);
   styled(InputWrapper).withConfig({
-    componentId: "sc-1pvd2nj-4"
+    componentId: "sc-1pvd2nj-5"
   })(["resize:vertical;overflow:auto;color:red;"]);
   const IconButton = styled.button.withConfig({
-    componentId: "sc-1pvd2nj-5"
+    componentId: "sc-1pvd2nj-6"
   })(["background:transparent;color:inherit;border:none;padding:0;outline:none;&:not(:disabled){cursor:pointer;}", ""], ({
     theme: theme2,
     $show
@@ -32636,7 +32644,7 @@ var __publicField = (obj, key, value) => {
       visibility: ${$show ? "visible" : "hidden"};
   `);
   styled.svg.withConfig({
-    componentId: "sc-1pvd2nj-6"
+    componentId: "sc-1pvd2nj-7"
   })(["", ""], ({
     theme: theme2
   }) => `
@@ -33356,7 +33364,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 +36912,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 +37089,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" })
@@ -38791,6 +38810,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     type,
     disabled,
     label,
+    labelColor,
     error: error2,
     id,
     loading,
@@ -38808,7 +38828,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     const clearInput = () => {
       onChangeProp("");
     };
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(InputWrapper, { disabled, id: id ?? defaultId, label, error: error2, orientation, dir, children: [
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(InputWrapper, { disabled, id: id ?? defaultId, label, labelColor, error: error2, orientation, dir, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(InputElement, { ref: mergeRefs([inputRef, ref]), type, id: id ?? defaultId, disabled, value, onChange, ...props }),
       clear && /* @__PURE__ */ jsxRuntimeExports.jsx(IconButton, { disabled, onClick: clearInput, $show: value.length > 0, "aria-label": "clear input", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "cross", size: "sm" }) }),
       loading && /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "loading-animated", size: "sm" })

package/dist/components/Input/InputWrapper.d.ts

@@ -3,6 +3,7 @@ import { ReactNode } from 'react';
 export interface WrapperProps {
     id: string;
     label?: ReactNode;
+    labelColor?: string;
     error?: ReactNode;
     disabled?: boolean;
     children: ReactNode;
@@ -10,7 +11,7 @@ export interface WrapperProps {
     dir?: "start" | "end";
     resize?: "none" | "vertical" | "horizontal" | "both";
 }
-export declare const InputWrapper: ({ id, label, error, disabled, children, orientation, dir, resize, }: WrapperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InputWrapper: ({ id, label, labelColor, error, disabled, children, orientation, dir, resize, }: WrapperProps) => import("react/jsx-runtime").JSX.Element;
 export declare const InputElement: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
 export declare const NumberInputElement: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>, "ref"> & {
     ref?: ((instance: HTMLInputElement | 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<HTMLInputElement> | null | undefined;
@@ -18,7 +19,7 @@ export declare const NumberInputElement: import('styled-components/dist/types').
     $hideControls?: boolean;
 }>> & string;
 export declare const TextAreaElement: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, never>> & string;
-export declare const TextAreaWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<WrapperProps, never>> & string & Omit<({ id, label, error, disabled, children, orientation, dir, resize, }: WrapperProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
+export declare const TextAreaWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<WrapperProps, never>> & string & Omit<({ id, label, labelColor, error, disabled, children, orientation, dir, resize, }: WrapperProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
 export declare const IconButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
     $show?: boolean;
 }>> & string;

package/dist/components/Input/TextField.d.ts

@@ -4,6 +4,7 @@ import { WrapperProps } from './InputWrapper';
 export interface TextFieldProps extends Omit<WrapperProps, "id" | "children">, Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "type" | "value" | "onChange" | "dir"> {
     type?: "text" | "email" | "tel" | "url";
     loading?: boolean;
+    labelColor?: string;
     value?: string;
     clear?: boolean;
     onChange: (inputValue: string, e?: ChangeEvent<HTMLInputElement>) => void;

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.162",
   "description": "Official ClickHouse design system react library",
   "type": "module",
   "license": "Apache-2.0",