@clickhouse/click-ui 0.0.230 → 0.0.232

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

@@ -14,5 +14,6 @@ export interface BigStatProps extends Omit<HTMLAttributes<HTMLDivElement>, "titl
     spacing?: bigStatSpacing;
     state?: bigStatState;
     title: React.ReactNode;
+    error?: boolean;
 }
-export declare const BigStat: ({ fillWidth, maxWidth, height, label, order, size, spacing, state, title, ...props }: BigStatProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BigStat: ({ fillWidth, maxWidth, height, label, order, size, spacing, state, title, error, ...props }: BigStatProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,11 @@
 import { SelectContainerProps, SelectGroupProps, SelectItemProps } from './types';
 import { CheckboxVariants, TextProps } from '../..';
 
-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 interface NoAvailableOptionsFactoryProps {
+    search: string;
+    close: () => void;
+}
+export declare const InternalSelect: ({ label, children, orientation, dir, disabled, id, error, value: selectedValues, onChange, onSelect, open, onOpenChange, name, form, allowCreateOption, customText, options, sortable, placeholder, maxHeight, multiple, checkbox, selectLabel, showSearch, container, useFullWidthItems, itemCharacterLimit, noAvailableOptions, ...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 type MultiSelectCheckboxItemProps = SelectItemProps & {

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

@@ -21,7 +21,9 @@ export declare const SearchClose: import('styled-components/dist/types').IStyled
     $showClose: boolean;
 }>> & string;
 export declare const SelectList: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const SelectListContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SelectListContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $maxHeight?: string;
+}>> & string;
 export declare const HiddenSelectElement: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, never>> & string;
 export declare const SelectGroupContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const SelectGroupName: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -1,6 +1,7 @@
 import { HTMLAttributes, KeyboardEvent, MouseEvent, ReactNode } from 'react';
 import { HorizontalDirection, IconName } from '../..';
 import { PopoverProps } from '@radix-ui/react-popover';
+import { NoAvailableOptionsFactoryProps } from './InternalSelect';
 
 declare type DivProps = HTMLAttributes<HTMLDivElement>;
 interface SelectItemComponentProps extends Omit<DivProps, "disabled" | "onSelect" | "value" | "children"> {
@@ -49,29 +50,37 @@ type SelectChildrenType = {
 };
 export type SelectionType = "custom" | "default";
 interface InternalSelectProps extends PopoverProps, Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "dir" | "onSelect" | "children"> {
-    label?: ReactNode;
-    error?: ReactNode;
-    disabled?: boolean;
-    name?: string;
-    form?: string;
-    dir?: "start" | "end";
-    orientation?: "horizontal" | "vertical";
-    allowCreateOption?: boolean;
     onChange: (selectedValues: Array<string>) => void;
-    open: boolean;
     onOpenChange: (open: boolean) => void;
-    value: Array<string>;
-    sortable?: boolean;
     onSelect: (value: string, type?: SelectionType, evt?: KeyboardEvent<HTMLElement> | MouseEvent<HTMLElement>) => void;
-    multiple?: boolean;
+    open: boolean;
+    value: Array<string>;
+    allowCreateOption?: boolean;
     checkbox?: boolean;
-    selectLabel?: string;
+    container?: HTMLElement;
+    customText?: string;
+    dir?: "start" | "end";
+    disabled?: boolean;
+    error?: ReactNode;
+    form?: string;
+    itemCharacterLimit?: string;
+    label?: ReactNode;
+    maxHeight?: string;
+    multiple?: boolean;
+    name?: string;
+    /**
+     * Controls rendering when no options are available.
+     * - false: renders nothing
+     * - true: renders default message 'No Options found' with search term if present
+     * - ({ search: string, onClose: () => void }) => ReactNode: renders the returned node allowing dynamic content based on current search string
+     */
+    noAvailableOptions?: boolean | ((props: NoAvailableOptionsFactoryProps) => ReactNode);
+    orientation?: "horizontal" | "vertical";
     placeholder?: string;
+    selectLabel?: string;
     showSearch?: boolean;
-    customText?: string;
-    container?: HTMLElement;
+    sortable?: boolean;
     useFullWidthItems?: boolean;
-    itemCharacterLimit?: string;
 }
 export type SelectOptionProp = SelectOptionType | SelectChildrenType;
 export type SelectContainerProps = SelectOptionProp & InternalSelectProps;

package/dist/styles/types.d.ts

@@ -342,6 +342,7 @@ export interface Theme {
                 "stroke": {
                     "default": string;
                     "muted": string;
+                    "danger": string;
                 };
                 "background": {
                     "default": string;
@@ -350,6 +351,7 @@ export interface Theme {
                 "label": {
                     "default": string;
                     "muted": string;
+                    "danger": string;
                 };
                 "title": {
                     "default": string;

package/dist/styles/variables.dark.json.d.ts

@@ -146,7 +146,8 @@ declare const _default: {
       "color": {
         "stroke": {
           "default": "#323232",
-          "muted": "#323232"
+          "muted": "#323232",
+          "danger": "#ffbaba"
         },
         "background": {
           "default": "#1F1F1C",
@@ -154,7 +155,8 @@ declare const _default: {
         },
         "label": {
           "default": "#b3b6bd",
-          "muted": "#b3b6bd"
+          "muted": "#b3b6bd",
+          "danger": "#ffbaba"
         },
         "title": {
           "default": "rgb(97.5% 97.5% 97.5%)",

package/dist/styles/variables.json.d.ts

@@ -341,7 +341,8 @@ declare const _default: {
       "color": {
         "stroke": {
           "default": "#e6e7e9",
-          "muted": "#e6e7e9"
+          "muted": "#e6e7e9",
+          "danger": "#c10000"
         },
         "background": {
           "default": "#ffffff",
@@ -349,7 +350,8 @@ declare const _default: {
         },
         "label": {
           "default": "#696e79",
-          "muted": "#696e79"
+          "muted": "#696e79",
+          "danger": "#c10000"
         },
         "title": {
           "default": "lch(11.1 1.37 305)",

package/dist/styles/variables.light.json.d.ts

@@ -146,7 +146,8 @@ declare const _default: {
       "color": {
         "stroke": {
           "default": "#e6e7e9",
-          "muted": "#e6e7e9"
+          "muted": "#e6e7e9",
+          "danger": "#c10000"
         },
         "background": {
           "default": "#ffffff",
@@ -154,7 +155,8 @@ declare const _default: {
         },
         "label": {
           "default": "#696e79",
-          "muted": "#696e79"
+          "muted": "#696e79",
+          "danger": "#c10000"
         },
         "title": {
           "default": "lch(11.1 1.37 305)",

package/package.json

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