@worldresources/wri-design-systems 2.208.3 → 2.210.0

package/dist/index.d.ts

@@ -132,6 +132,8 @@ type ComboboxLabels = {
     toggleOptionsLabel: string;
     /** Visible text shown when no results match. Rendered as JSX child. Default: "No items found" */
     noItemsFoundLabel: ReactNodeLabel;
+    /** Builds the visible text for the create-new-option row. Default: (inputValue) => `Create “${inputValue}”` */
+    createOptionLabel: (inputValue: string) => ReactNodeLabel;
 };
 /** Labels for CloseButton internal UI strings. */
 type CloseButtonLabels = {
@@ -1230,11 +1232,12 @@ type TextInputProps = Omit<InputProps, 'size' | 'variant' | 'colorPalette' | 'de
 
 declare const TextInput: ({ label, caption, placeholder, errorMessage, required, disabled, size, showOptionalLabel, noMarginBottom, defaultValue, onChange, onFocus, onBlur, labels, value: controlledValue, ...rest }: TextInputProps) => _emotion_react_jsx_runtime.JSX.Element;
 
+type ComboboxItem = {
+    label: string;
+    value: string;
+};
 type ComboboxProps = {
-    initialItems?: {
-        label: string;
-        value: string;
-    }[];
+    initialItems?: ComboboxItem[];
     label?: string;
     required?: boolean;
     caption?: string;
@@ -1247,9 +1250,25 @@ type ComboboxProps = {
     noMarginBottom?: boolean;
     multiple?: boolean;
     showSelectedItems?: boolean;
+    /**
+     * Controlled selected values. When provided, the component is fully
+     * controlled — pair with `onChange`.
+     */
+    value?: string[];
+    /** Initial selected values for uncontrolled usage. */
+    defaultValue?: string[];
+    /** Called with the selected values whenever the selection changes. */
+    onChange?: (values: string[]) => void;
+    /**
+     * Whether the user can create options that do not exist in `initialItems`.
+     * When `true`, typing a non-matching value shows a "Create …" row that adds
+     * the entry to the list on selection.
+     * @default false
+     */
+    creatable?: boolean;
 };
 
-declare const Combobox: ({ label, required, caption, errorMessage, size, disabled, showOptionalLabel, placeholder, labels, noMarginBottom, initialItems, multiple, showSelectedItems, }: ComboboxProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const Combobox: ({ label, required, caption, errorMessage, size, disabled, showOptionalLabel, placeholder, labels, noMarginBottom, initialItems, multiple, showSelectedItems, value: controlledValue, defaultValue, onChange, creatable, }: ComboboxProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type TagProps = Omit<Tag$1.RootProps, 'size' | 'variant' | 'colorPalette' | 'children'> & {
     label: string;
@@ -1879,8 +1898,8 @@ type InlineMessageProps = {
 
 declare const InlineMessage: ({ label, caption, variant, size, icon, onActionClick, actionLabel, actionButtonVariant, isButtonRight, buttonLeftIcon, buttonRightIcon, labels, }: InlineMessageProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-interface AlertProps extends Omit<Alert.RootProps, 'title' | 'variant' | 'width'> {
-    title?: React.ReactNode;
+interface AlertProps extends Omit<Alert.RootProps, 'title' | 'variant' | 'width' | 'children'> {
+    children: React.ReactNode;
     icon?: React.ReactElement;
     onClose?: () => void;
     isCentered?: boolean;