@moysklad/uikit 28.1.0 → 31.20.0

package/dist/components/Multiselect/Multiselect.d.ts

@@ -2,7 +2,7 @@ import { type Key, type MutableRefObject, type ReactElement, type ReactNode, typ
 import { type InputProps } from './Input/Input';
 import { type MultiselectDropdownContentProps } from './DropdownContent/MultiselectDropdownContent';
 import { type ShortDropdownContentProps } from './ShortDropdownContent/ShortDropdownContent';
-import { type DropdownItem, type RenderSelectedItem } from './types';
+import { type AllSelectedChipTextVariant, type DropdownItem, type GetAllSelectedChipText, type RenderSelectedItem } from './types';
 type SharedProps<T extends Key, DTO = unknown> = Pick<InputProps, 'placeholder' | 'getOtherText' | 'tooltipDelay'> & {
     id?: HTMLElement['id'];
     label?: string;
@@ -24,8 +24,14 @@ type SharedProps<T extends Key, DTO = unknown> = Pick<InputProps, 'placeholder'
     wrapSelectedItems?: boolean;
     closeDropdownOnCreateButtonClick?: boolean;
     onDropdownVisibleChange?: (visible: boolean) => void;
+    /**
+     * асинхронный коллбэк, вызываемый при изменении input, возвращает список отфильтрованных опций
+     */
+    onSearch?: (value: string) => Promise<DropdownItem<T>[]>;
     renderItem?: (item: DropdownItem<T, DTO>) => ReactNode;
     renderSelectedItem?: RenderSelectedItem;
+    allSelectedChipTextVariant?: AllSelectedChipTextVariant;
+    getAllSelectedChipText?: GetAllSelectedChipText;
 };
 type DefaultProps<T extends Key, DTO = any> = MultiselectDropdownContentProps<T, DTO> & {
     variant?: 'default' | 'textarea';
@@ -42,4 +48,4 @@ export { useChipsKeyDown } from './lib/useChipsKeyDown';
 export { SelectedItemArchive, type SelectedItemArchiveProps, } from './SelectedItem/SelectedItemArchive';
 export { ShortDropdownContent, type ShortDropdownContentProps, } from './ShortDropdownContent/ShortDropdownContent';
 export { chipStyles, TooltipedChip, type TooltipedChipProps, } from './TooltipedChip/TooltipedChip';
-export { type DropdownItem } from './types';
+export { type AllSelectedChipTextVariant, type DropdownItem, type GetAllSelectedChipText, } from './types';

package/dist/components/Multiselect/Multiselect.js

@@ -1,14 +1,15 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback } from "react";
 import { cn } from "../../common/css/cn.js";
+import { FieldRow } from "../_shared/FieldRow/FieldRow.js";
+import { Info } from "../_shared/Info/Info.js";
 import { Input } from "./Input/Input.js";
 import { useId } from "../../hooks/useId/index.js";
 import { Dropdown, useDropdown } from "../Dropdown/Dropdown.js";
-import { FieldRow } from "../FieldRow/FieldRow.js";
-import { Info } from "../Info/Info.js";
 import { Label } from "../Label/Label.js";
 import { AsyncDropdownContextProvider, useAsyncDropdownContext } from "./AsyncDropdownContext/AsyncDropdownContextProvider.js";
 import { MultiselectDropdownContent } from "./DropdownContent/MultiselectDropdownContent.js";
+import { isAllItemsSelected } from "./lib/helpers.js";
 import { useUpdateEffect } from "./lib/useUpdateEffect.js";
 import { ShortDropdownContent } from "./ShortDropdownContent/ShortDropdownContent.js";
 import { MultiselectTextField } from "./TextField/MultiselectTextField.js";
@@ -39,6 +40,7 @@ const Multiselect = /*#__PURE__*/ forwardRef((props, ref)=>{
         props.onCreateButtonClick(searchInputValue);
         if (props.closeDropdownOnCreateButtonClick) handleClose();
     };
+    const isAllSelected = props.showSelectAllCheckbox && isAllItemsSelected(props.items, props.values);
     return /*#__PURE__*/ jsxs("div", {
         ref: ref,
         className: cn(Multiselect_module.container, props.className ?? ''),
@@ -80,6 +82,10 @@ const Multiselect = /*#__PURE__*/ forwardRef((props, ref)=>{
                             getOtherText: props.getOtherText,
                             tooltipDelay: props.tooltipDelay,
                             disabled: props.disabled,
+                            canShowAllSelectedChip: props.showSelectAllCheckbox,
+                            isAllSelected: isAllSelected,
+                            allSelectedChipTextVariant: props.allSelectedChipTextVariant,
+                            getAllSelectedChipText: props.getAllSelectedChipText,
                             wrapSelectedItems: props.wrapSelectedItems,
                             renderSelectedItem: props.renderSelectedItem,
                             triggerAriaProps: triggerAriaProps
@@ -96,6 +102,10 @@ const Multiselect = /*#__PURE__*/ forwardRef((props, ref)=>{
                             onItemDelete: handleItemDelete,
                             tooltipDelay: props.tooltipDelay,
                             disabled: props.disabled,
+                            canShowAllSelectedChip: props.showSelectAllCheckbox,
+                            isAllSelected: isAllSelected,
+                            allSelectedChipTextVariant: props.allSelectedChipTextVariant,
+                            getAllSelectedChipText: props.getAllSelectedChipText,
                             renderSelectedItem: props.renderSelectedItem,
                             triggerAriaProps: triggerAriaProps
                         }),
@@ -117,6 +127,8 @@ const Multiselect = /*#__PURE__*/ forwardRef((props, ref)=>{
                                 onChange: props.onChange,
                                 values: props.values,
                                 getManyItemsChipText: props.getManyItemsChipText,
+                                allSelectedChipTextVariant: props.allSelectedChipTextVariant,
+                                getAllSelectedChipText: props.getAllSelectedChipText,
                                 getNotFoundText: props.getNotFoundText,
                                 showCreateButton: props.showCreateButton,
                                 getCreateButtonText: props.getCreateButtonText,

package/dist/components/Multiselect/ShortDropdownContent/ShortDropdownContent.js

@@ -4,6 +4,7 @@ import { Button } from "../../Button/Button.js";
 import { Checkbox } from "../../Checkbox/Checkbox.js";
 import { Add16Icon } from "../../../icon/index.js";
 import { selectAllCheckboxDefaultText } from "../lib/consts.js";
+import { canSelectAllItems } from "../lib/helpers.js";
 import { useItemKeyDown } from "../lib/useItemKeyDown.js";
 import { SelectAllCheckbox } from "../SelectAllCheckbox/SelectAllCheckbox.js";
 import { TooltipedOptionText } from "../TooltipedOptionText/TooltipedOptionText.js";
@@ -20,7 +21,7 @@ const ShortDropdownContent = (props)=>{
                 className: ShortDropdownContent_module.itemsList,
                 "data-test-id": props.testId ? `${props.testId}-items-list` : '',
                 children: [
-                    props.showSelectAllCheckbox && /*#__PURE__*/ jsx(SelectAllCheckbox, {
+                    props.showSelectAllCheckbox && canSelectAllItems(props.items) && /*#__PURE__*/ jsx(SelectAllCheckbox, {
                         values: props.values,
                         items: props.items,
                         onChange: props.onChange,

package/dist/components/Multiselect/TextField/MultiselectTextField.d.ts

@@ -1,5 +1,5 @@
 import { type AriaAttributes, type Ref } from 'react';
-import { type InputValue, type RenderSelectedItem } from '../types';
+import { type AllSelectedChipTextVariant, type GetAllSelectedChipText, type InputValue, type RenderSelectedItem } from '../types';
 interface MultiselectTextFieldProps {
     id?: HTMLTextAreaElement['id'];
     selectedItems: InputValue[];
@@ -12,6 +12,10 @@ interface MultiselectTextFieldProps {
     onItemDelete?: (value: InputValue['value']) => void;
     tooltipDelay?: number;
     disabled?: boolean;
+    canShowAllSelectedChip?: boolean;
+    isAllSelected?: boolean;
+    allSelectedChipTextVariant?: AllSelectedChipTextVariant;
+    getAllSelectedChipText?: GetAllSelectedChipText;
     renderSelectedItem?: RenderSelectedItem;
     triggerAriaProps?: Pick<AriaAttributes, 'aria-controls' | 'aria-expanded' | 'aria-haspopup'>;
 }

package/dist/components/Multiselect/TextField/MultiselectTextField.js

@@ -3,10 +3,12 @@ import { useEffect, useRef, useState } from "react";
 import { cn } from "../../../common/css/cn.js";
 import { mergeRefs } from "../../../common/react/mergeRefs.js";
 import { Textfield } from "../../Textfield/Textfield.js";
+import { AllSelectedChip } from "../AllSelectedChip/AllSelectedChip.js";
 import { useAsyncDropdownContext } from "../AsyncDropdownContext/AsyncDropdownContextProvider.js";
 import { minChipsWidth } from "../lib/consts.js";
+import { getAllSelectedChipState, getDefaultAllSelectedChipText } from "../lib/helpers.js";
 import { useChipsKeyDown } from "../lib/useChipsKeyDown.js";
-import { TooltipedChip } from "../TooltipedChip/TooltipedChip.js";
+import { TooltipedChip, chipStyles } from "../TooltipedChip/TooltipedChip.js";
 import MultiselectTextField_module from "./MultiselectTextField.module.js";
 const minHeight = 90;
 const defaultPadding = {
@@ -23,6 +25,12 @@ const MultiselectTextField = (props)=>{
     ]);
     const asyncDropdownContext = useAsyncDropdownContext();
     const selectedItems = asyncDropdownContext?.selectedValues ?? props.selectedItems;
+    const allSelectedChipState = getAllSelectedChipState({
+        asyncItems: asyncDropdownContext?.cachedItems,
+        canShowAllSelectedChip: props.canShowAllSelectedChip,
+        isAllSelected: props.isAllSelected,
+        selectedItems
+    });
     const [height, setHeight] = useState(`${minHeight}px`);
     const [padding, setPadding] = useState(defaultPadding);
     const chipsContainerStyle = {
@@ -96,7 +104,12 @@ const MultiselectTextField = (props)=>{
             /*#__PURE__*/ jsx("div", {
                 className: MultiselectTextField_module.chipsContainer,
                 style: chipsContainerStyle,
-                children: selectedItems.map((item, index)=>/*#__PURE__*/ jsx(TooltipedChip, {
+                children: allSelectedChipState.isAllSelected ? /*#__PURE__*/ jsx(AllSelectedChip, {
+                    label: props.getAllSelectedChipText?.(allSelectedChipState.itemsCount) ?? getDefaultAllSelectedChipText(allSelectedChipState.itemsCount, props.allSelectedChipTextVariant),
+                    disabled: props.disabled,
+                    className: cn(chipStyles.chip, chipStyles.multiselectChip, MultiselectTextField_module.chip),
+                    testId: props.testId ? `${props.testId}-all-selected` : void 0
+                }) : selectedItems.map((item, index)=>/*#__PURE__*/ jsx(TooltipedChip, {
                         minWidth: minChipsWidth,
                         text: item.label,
                         ref: (ref)=>chipRefs.current[index] = ref,

package/dist/components/Multiselect/lib/consts.d.ts

@@ -1,3 +1,3 @@
 export declare const minChipsWidth = 64;
 export declare const chipsContainerGap = 4;
-export declare const selectAllCheckboxDefaultText = "\u0412\u0441\u0435 \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u044B";
+export declare const selectAllCheckboxDefaultText = "\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0432\u0441\u0435";

package/dist/components/Multiselect/lib/consts.js

@@ -1,4 +1,4 @@
 const minChipsWidth = 64;
 const chipsContainerGap = 4;
-const selectAllCheckboxDefaultText = 'Все элементы';
+const selectAllCheckboxDefaultText = 'Выбрать все';
 export { chipsContainerGap, minChipsWidth, selectAllCheckboxDefaultText };

package/dist/components/Multiselect/lib/helpers.d.ts

@@ -0,0 +1,24 @@
+import { type Key } from 'react';
+import type { AllSelectedChipTextVariant } from '../types';
+type AllSelectedChipStateParams<T extends Key> = {
+    asyncItems?: {
+        value: T;
+    }[];
+    canShowAllSelectedChip?: boolean;
+    isAllSelected?: boolean;
+    selectedItems: {
+        value: T;
+    }[];
+};
+export declare const canSelectAllItems: <T extends Key>(items: {
+    value: T;
+}[]) => boolean;
+export declare const isAllItemsSelected: <T extends Key>(items: {
+    value: T;
+}[], values: T[]) => boolean;
+export declare const getAllSelectedChipState: <T extends Key>({ asyncItems, canShowAllSelectedChip, isAllSelected, selectedItems, }: AllSelectedChipStateParams<T>) => {
+    isAllSelected: boolean;
+    itemsCount: number;
+};
+export declare const getDefaultAllSelectedChipText: (itemsCount: number, variant?: AllSelectedChipTextVariant) => string;
+export {};

package/dist/components/Multiselect/lib/helpers.js

@@ -0,0 +1,15 @@
+const canSelectAllItems = (items)=>items.length > 1;
+const isAllItemsSelected = (items, values)=>canSelectAllItems(items) && items.every((item)=>values.includes(item.value));
+const getAllSelectedChipState = ({ asyncItems, canShowAllSelectedChip, isAllSelected, selectedItems })=>{
+    const selectedItemValues = selectedItems.map((item)=>item.value);
+    const isAllSelectedInAsyncContext = canShowAllSelectedChip && !!asyncItems && isAllItemsSelected(asyncItems, selectedItemValues);
+    return {
+        isAllSelected: Boolean(isAllSelected || isAllSelectedInAsyncContext),
+        itemsCount: asyncItems?.length || selectedItems.length
+    };
+};
+const getDefaultAllSelectedChipText = (itemsCount, variant = 'full')=>{
+    if ('short' === variant) return 'Выбраны все';
+    return `Выбраны все ${itemsCount}`;
+};
+export { canSelectAllItems, getAllSelectedChipState, getDefaultAllSelectedChipText, isAllItemsSelected };

package/dist/components/Multiselect/types.d.ts

@@ -9,6 +9,8 @@ export interface DropdownItem<T extends Key, DTO = unknown> {
     label: string;
     dto?: DTO;
 }
+export type GetAllSelectedChipText = (itemsCount: number) => string;
+export type AllSelectedChipTextVariant = 'full' | 'short';
 export type RenderSelectedItemProps = {
     element: ReactNode;
     chipRef: ForwardedRef<HTMLButtonElement> | undefined;

package/dist/components/Panel/Panel.d.ts

@@ -0,0 +1,34 @@
+import { type HTMLAttributes, type Key, type ReactNode } from 'react';
+import { type IHasTestId } from '../../common';
+export interface PanelItem {
+    id: Key;
+    element: ReactNode;
+    width: number;
+}
+export interface PanelProps extends HTMLAttributes<HTMLDivElement>, IHasTestId {
+    items: PanelItem[];
+    /**
+     * maximum - 40
+     *
+     * @default 6
+     */
+    columnsCount?: number;
+    /**
+     * @default 12
+     */
+    rowGap?: number;
+    /**
+     * @default 20
+     */
+    columnGap?: number;
+    /**
+     * @default 38
+     */
+    minRowHeight?: number;
+}
+declare const ForwardedRefPanel: import("react").ForwardRefExoticComponent<PanelProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const Empty: (props: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const Panel: typeof ForwardedRefPanel & {
+    EmptyItem: typeof Empty;
+};
+export {};

package/dist/components/Panel/Panel.js

@@ -0,0 +1,39 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn, getOptionalTestId } from "../../common/index.js";
+import Panel_module from "./Panel.module.js";
+const ForwardedRefPanel = /*#__PURE__*/ forwardRef(({ items, columnsCount: columnsCountProp = 6, rowGap = 12, columnGap = 20, minRowHeight = 38, testId, ...restProps }, ref)=>{
+    const columnsCount = Math.min(columnsCountProp, 40);
+    const containerStyles = {
+        '--panel-columns-count': columnsCount,
+        '--panel-row-gap': `${rowGap}px`,
+        '--panel-column-gap': `${columnGap}px`,
+        '--panel-min-row-height': `${minRowHeight}px`
+    };
+    const getItemStyles = (bentoItem)=>({
+            '--panel-item-width': Math.min(Math.round(bentoItem.width), columnsCount)
+        });
+    return /*#__PURE__*/ jsx("div", {
+        ...restProps,
+        ref: ref,
+        className: cn(Panel_module.container, restProps.className),
+        style: {
+            ...restProps.style,
+            ...containerStyles
+        },
+        "data-test-id": testId,
+        children: items.map((panelItem)=>/*#__PURE__*/ jsx("div", {
+                className: Panel_module.item,
+                style: getItemStyles(panelItem),
+                "data-test-id": getOptionalTestId(testId, `item-${panelItem.id}`),
+                children: panelItem.element
+            }, panelItem.id))
+    });
+});
+ForwardedRefPanel.displayName = 'Panel';
+const Empty = (props)=>/*#__PURE__*/ jsx("div", {
+        ...props
+    });
+const Panel = ForwardedRefPanel;
+Panel.EmptyItem = Empty;
+export { Panel };

package/dist/components/Panel/Panel.module.js

@@ -0,0 +1,6 @@
+import "./Panel_module.css";
+const Panel_module = {
+    container: "container-iTBnxl",
+    item: "item-mDdH69"
+};
+export default Panel_module;

package/dist/components/Panel/Panel_module.css

@@ -0,0 +1,17 @@
+.container-iTBnxl {
+  --panel-columns-count: 6;
+  --panel-row-gap: 12px;
+  --panel-column-gap: 20px;
+  --panel-min-row-height: 38px;
+  grid-template-columns: repeat(var(--panel-columns-count), minmax(50px, 1fr));
+  grid-auto-rows: minmax(var(--panel-min-row-height), auto);
+  gap: var(--panel-row-gap) var(--panel-column-gap);
+  display: grid;
+}
+
+.item-mDdH69 {
+  --panel-item-width: 1;
+  grid-column: auto/span var(--panel-item-width);
+  overflow: hidden;
+}
+

package/dist/components/Radiobutton/Radiobutton.js

@@ -2,9 +2,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useMemo } from "react";
 import { cn } from "../../common/css/cn.js";
 import { getOptionalTestId } from "../../common/testId/index.js";
+import { Info } from "../_shared/Info/Info.js";
 import { Indicator } from "../Indicator/Indicator.js";
 import { getIndicatorProps } from "../Indicator/Indicator.helpers.js";
-import { Info } from "../Info/Info.js";
 import { RadiobuttonContent } from "./components/RadiobuttonContent.js";
 import { RadiobuttonHelp } from "./components/RadiobuttonHelp.js";
 import Radiobutton_module from "./Radiobutton.module.js";

package/dist/components/Radiobutton/Radiobutton_module.css

@@ -52,6 +52,11 @@
   order: 1;
 }
 
+.input-Z8mheX[type="radio"] {
+  margin-right: initial;
+  height: initial;
+}
+
 .input-Z8mheX:focus {
   outline: none;
 }

package/dist/components/SearchInput/SearchInput_module.css

@@ -7,7 +7,7 @@
 }
 
 .container-Ukb21O:focus-within {
-  outline: 1px solid var(--dark-grey-dark-900);
+  outline: 1px solid var(--border-focused, #091739);
   color: var(--dark-grey-dark-900);
   border: none;
 }

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

@@ -1,11 +1,10 @@
 import { type ReactElement, type ReactNode } from 'react';
-import type { ISelectOption } from '../types';
 interface ArchivedInputValueProps {
-    value: ISelectOption;
     input: ReactNode;
     isShowIcon: boolean;
-    overlayText?: ReactNode;
+    inputHintText?: string;
     disabled?: boolean;
+    testId?: string;
 }
-export declare const ArchivedInputValue: (props: ArchivedInputValueProps) => ReactElement;
+export declare const ArchivedInputValue: ({ input, isShowIcon, inputHintText, disabled, testId, }: ArchivedInputValueProps) => ReactElement;
 export {};

package/dist/components/Select/ArchivedInputValue/ArchivedInputValue.js

@@ -5,40 +5,35 @@ import { Hint } from "../../Hint/Hint.js";
 import { Text, TextColor } from "../../Text/Text.js";
 import { Archived16Icon } from "../../../icon/index.js";
 import ArchivedInputValue_module from "./ArchivedInputValue.module.js";
-const ArchivedInputValue = ({ input, value, isShowIcon, overlayText, disabled })=>{
+const ArchivedInputValue = ({ input, isShowIcon, inputHintText = 'В архиве', disabled, testId })=>{
     const [visible, setVisible] = useState(false);
     const handleVisibleChange = (show)=>{
-        setVisible(isShowIcon && !!value?.isArchived && show);
+        setVisible(isShowIcon && show);
     };
-    return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            /*#__PURE__*/ jsx(Hint, {
-                visible: visible,
-                onVisibleChange: handleVisibleChange,
-                mouseEnterDelay: 0.3,
-                overlay: /*#__PURE__*/ jsx(Fragment, {
-                    children: /*#__PURE__*/ jsx(Text.Body, {
-                        colorToken: TextColor.invert,
-                        preline: true,
-                        children: overlayText
-                    })
-                }),
-                children: input
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx(Hint, {
+            visible: visible,
+            onVisibleChange: handleVisibleChange,
+            mouseEnterDelay: 0.3,
+            overlay: /*#__PURE__*/ jsx(Fragment, {
+                children: /*#__PURE__*/ jsx(Text.Body, {
+                    colorToken: TextColor.invert,
+                    preline: true,
+                    children: inputHintText
+                })
             }),
-            isShowIcon && value?.isArchived && /*#__PURE__*/ jsxs("div", {
-                className: ArchivedInputValue_module.rightIconContainer,
+            children: /*#__PURE__*/ jsxs("div", {
+                className: ArchivedInputValue_module.textContainer,
                 children: [
-                    /*#__PURE__*/ jsx(Text.Body, {
-                        className: ArchivedInputValue_module.rightIconText,
-                        children: value.label
-                    }),
-                    /*#__PURE__*/ jsx("div", {
+                    input,
+                    isShowIcon && /*#__PURE__*/ jsx("div", {
                         className: cn(ArchivedInputValue_module.rightIcon, disabled && ArchivedInputValue_module.rightIconDisabled),
+                        "data-test-id": testId ? `${testId}-archived-icon` : void 0,
                         children: /*#__PURE__*/ jsx(Archived16Icon, {})
                     })
                 ]
             })
-        ]
+        })
     });
 };
 export { ArchivedInputValue };

package/dist/components/Select/ArchivedInputValue/ArchivedInputValue.module.js

@@ -1,7 +1,6 @@
 import "./ArchivedInputValue_module.css";
 const ArchivedInputValue_module = {
-    rightIconContainer: "rightIconContainer-gnRvlS",
-    rightIconText: "rightIconText-fpxSCr",
+    textContainer: "textContainer-BEuqYt",
     rightIcon: "rightIcon-PUbQMv",
     rightIconDisabled: "rightIconDisabled-chCxrA"
 };

package/dist/components/Select/ArchivedInputValue/ArchivedInputValue_module.css

@@ -1,21 +1,14 @@
-.rightIconContainer-gnRvlS {
-  pointer-events: none;
+.textContainer-BEuqYt {
+  align-items: center;
+  gap: 8px;
   width: 100%;
-  height: 100%;
+  min-width: 0;
   display: flex;
-  position: absolute;
-}
-
-.rightIconText-fpxSCr {
-  opacity: 0;
-  text-overflow: ellipsis;
-  height: 0;
-  margin-right: 8px;
-  overflow: hidden;
 }
 
 .rightIcon-PUbQMv {
   color: var(--elements-disable, #d1d6df);
+  flex-shrink: 0;
   align-items: center;
   display: flex;
 }

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

@@ -5,11 +5,13 @@ interface Props extends IBaseSelectProps, HTMLAttributes<HTMLDivElement>, IHasTe
     id?: HTMLInputElement['id'];
     searchText?: string;
     inputProps?: HTMLAttributes<HTMLInputElement>;
+    inputHintText?: string;
     onToggle?: () => void;
     onSearch: (searchText: string) => void;
     isDropdownOpen: boolean;
     actions?: ReactNode;
-    isArchived?: boolean;
+    showArchived?: boolean;
+    isFocus?: boolean;
     triggerAriaProps?: Pick<AriaAttributes, 'aria-controls' | 'aria-expanded' | 'aria-haspopup' | 'aria-activedescendant'>;
 }
 export declare const Combobox: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Select/Combobox/Combobox.js

@@ -1,18 +1,21 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useRef, useState } from "react";
 import { cn } from "../../../common/css/cn.js";
+import { FieldRow } from "../../_shared/FieldRow/FieldRow.js";
+import { Info } from "../../_shared/Info/Info.js";
 import { Text, TextColor } from "../../Text/Text.js";
 import { useId } from "../../../hooks/useId/index.js";
 import { Down12Icon } from "../../../icon/index.js";
-import { FieldRow } from "../../FieldRow/FieldRow.js";
-import { Info } from "../../Info/Info.js";
+import { checkIsArchivedValue } from "../../../utils/checkIsArchivedValue.js";
 import { Label } from "../../Label/Label.js";
 import { ActionButton } from "../ActionButton/ActionButton.js";
+import { ArchivedInputValue } from "../ArchivedInputValue/ArchivedInputValue.js";
 import Combobox_module from "./Combobox.module.js";
-const Combobox = /*#__PURE__*/ forwardRef(({ id, label, required, testId, disabled, placeholder, searchable, error, helperText, info, helpComponent, actions, searchText, fullWidth, inputProps, triggerAriaProps, style, value, onSearch, onToggle, onMouseEnter, onMouseLeave, renderValue, isDropdownOpen, isArchived, ...otherProps }, ref)=>{
+const Combobox = /*#__PURE__*/ forwardRef(({ id, label, required, testId, disabled, placeholder, searchable, error, helperText, info, helpComponent, actions, searchText, fullWidth, inputProps, inputHintText, triggerAriaProps, style, value, onSearch, onToggle, onMouseEnter, onMouseLeave, renderValue, isDropdownOpen, showArchived = false, isFocus = false, ...otherProps }, ref)=>{
     const [hovered, setHovered] = useState(false);
     const inputRef = useRef(null);
     const inputId = useId(id);
+    const isArchived = showArchived && checkIsArchivedValue(value);
     useEffect(()=>{
         if (inputRef.current && isDropdownOpen) inputRef.current.focus();
     }, [
@@ -28,7 +31,7 @@ const Combobox = /*#__PURE__*/ forwardRef(({ id, label, required, testId, disabl
         id: inputId,
         ref: inputRef,
         type: "text",
-        className: cn(Combobox_module.search, isArchived && Combobox_module.archivedTextColor),
+        className: cn(Combobox_module.search, isArchived && Combobox_module.archivedTextColor, isArchived && Combobox_module.archivedFitContent),
         value: searchText,
         onChange: (e)=>onSearch(e.target.value),
         disabled: disabled,
@@ -38,19 +41,27 @@ const Combobox = /*#__PURE__*/ forwardRef(({ id, label, required, testId, disabl
         ...inputProps
     });
     const inputComponentNotEdit = /*#__PURE__*/ jsx(Text.Body, {
-        className: cn(Combobox_module.selectedValue, isArchived && !disabled && Combobox_module.archivedTextColor, isArchived && disabled && Combobox_module.archivedDisabledTextColor),
+        className: cn(Combobox_module.selectedValue, isArchived && !disabled && Combobox_module.archivedTextColor, disabled && Combobox_module.disabledTextColor, isArchived && !isFocus && Combobox_module.archivedFitContent),
         children: searchText
     });
     const renderValueComponent = ()=>{
+        const input = searchable ? inputComponent : inputComponentNotEdit;
+        if (showArchived) return /*#__PURE__*/ jsx(ArchivedInputValue, {
+            input: input,
+            isShowIcon: isArchived && !isFocus,
+            disabled: disabled,
+            inputHintText: inputHintText,
+            testId: testId
+        });
         if (renderValue) return renderValue({
-            input: searchable ? inputComponent : inputComponentNotEdit,
+            input,
             placeholder: placeholderComponent,
             value,
             searchable,
             searchText,
             disabled
         });
-        return searchable ? inputComponent : inputComponentNotEdit;
+        return input;
     };
     return /*#__PURE__*/ jsxs("div", {
         className: cn(Combobox_module.container, fullWidth && Combobox_module.fullWidth),
@@ -84,7 +95,7 @@ const Combobox = /*#__PURE__*/ forwardRef(({ id, label, required, testId, disabl
                     },
                     style: {
                         ...style,
-                        width: !fullWidth && style?.width
+                        width: fullWidth ? void 0 : style?.width
                     },
                     "data-searchable": searchable,
                     "data-test-id": testId ? `${testId}-search-container` : '',

package/dist/components/Select/Combobox/Combobox.module.js

@@ -8,9 +8,10 @@ const Combobox_module = {
     innerCombobox: "innerCombobox-ojzOuH",
     placeholder: "placeholder-_WVTl5",
     selectedValue: "selectedValue-oFS_XU",
-    archivedDisabledTextColor: "archivedDisabledTextColor-qThU95",
-    arrowAction: "arrowAction-lxn4Ah",
     search: "search-_t7sYi",
-    archivedTextColor: "archivedTextColor-TFgYY_"
+    archivedFitContent: "archivedFitContent-IhCvaO",
+    arrowAction: "arrowAction-lxn4Ah",
+    archivedTextColor: "archivedTextColor-TFgYY_",
+    disabledTextColor: "disabledTextColor-TmImIF"
 };
 export default Combobox_module;