@ceed/ads 1.41.2 → 1.41.3-next.2

package/dist/components/Autocomplete/Autocomplete.d.ts

@@ -37,8 +37,8 @@ export type AutocompleteProps<T extends AutocompleteOption | string = string, Mu
         };
     }) => void;
 } & Omit<JoyAutocompleteProps<AutocompleteOption, Multiple, boolean, boolean>, 'onChange' | 'value' | 'options' | 'defaultValue'>;
-declare function Autocomplete<T extends AutocompleteOption | string, Multiple extends boolean | undefined = false>(props: AutocompleteProps<T, Multiple>): React.JSX.Element;
-declare namespace Autocomplete {
-    var displayName: string;
-}
+export declare function AutocompleteInner<T extends AutocompleteOption | string, Multiple extends boolean | undefined = false>(props: AutocompleteProps<T, Multiple>, ref: React.Ref<HTMLInputElement>): React.JSX.Element;
+declare const Autocomplete: <T extends string | AutocompleteOption = string, Multiple extends boolean | undefined = false>(props: AutocompleteProps<T, Multiple> & {
+    ref?: React.Ref<HTMLInputElement>;
+}) => React.ReactElement;
 export { Autocomplete };

package/dist/components/Autocomplete/index.d.ts

@@ -1,3 +1,4 @@
 import { Autocomplete } from './Autocomplete';
-export * from './Autocomplete';
+export { Autocomplete } from './Autocomplete';
+export type { AutocompleteOption, AutocompleteValue, AutocompleteProps } from './Autocomplete';
 export default Autocomplete;

package/dist/components/DataTable/components.d.ts

@@ -18,7 +18,7 @@ export declare const HeadCell: <T extends ObjectLike, GetId>(props: ColumnDef<T,
         currentSort?: Sort | undefined;
     }) => void) | undefined;
     sortOrder: Sort[];
-    onAutoFit?: ((field: keyof T) => void) | undefined;
+    onAutoFit?: ((columnId: string) => void) | undefined;
 }) => React.JSX.Element;
 export declare const BodyCell: <T extends Record<string, any>, ID>(props: {
     tableId: string;

package/dist/components/DataTable/hooks.d.ts

@@ -1,10 +1,9 @@
 /// <reference types="react" />
 import type { ObjectLike, ColumnDef, DataTableProps, Sort, InferredIdType } from './types';
-export declare function useColumnWidths<T>(columnsByField: {
-    [K in keyof T]: {
-        headerRef: React.RefObject<HTMLTableCellElement>;
-    };
-}): Record<string, number>;
+export declare function useColumnWidths(columnsById: Record<string, {
+    field: PropertyKey;
+    headerRef: React.RefObject<HTMLTableCellElement>;
+}>): Record<string, number>;
 export declare function useDataTableRenderer<T extends Record<PropertyKey, unknown>, GetId extends ((row: T) => any) | undefined = undefined>({ rows: _rows, columns: columnsProp, pinnedColumns, rowCount: totalRowsProp, initialState, pagination, paginationMode, paginationModel, onPaginationModelChange, sortModel: controlledSortModel, sortOrder: _sortOrder, selectionModel, onSortModelChange, onSelectionModelChange, editMode, getId: _getId, isTotalSelected: _isTotalSelected, isRowSelectable, columnGroupingModel, columnVisibilityModel, onColumnVisibilityModelChange, checkboxSelection, }: DataTableProps<T, GetId>): {
     rowCount: number;
     selectableRowCount: number;
@@ -23,7 +22,7 @@ export declare function useDataTableRenderer<T extends Record<PropertyKey, unkno
             currentSort?: Sort | undefined;
         }) => void) | undefined;
         sortOrder: Sort[];
-        onAutoFit?: ((field: keyof T_1) => void) | undefined;
+        onAutoFit?: ((columnId: string) => void) | undefined;
     }) => import("react").JSX.Element;
     BodyRow: <T_2 extends Record<string, any>, ID>(props: {
         tableId: string;
@@ -39,7 +38,7 @@ export declare function useDataTableRenderer<T extends Record<PropertyKey, unkno
         multiple: boolean;
         currentSort?: Sort | undefined;
     }) => void;
-    handleAutoFit: (field: keyof T) => void;
+    handleAutoFit: (columnId: string) => void;
     isAllSelected: boolean;
     isTotalSelected: boolean;
     isSelectedRow: (model: InferredIdType<T, GetId>) => boolean;

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

@@ -73,6 +73,13 @@ export type FlattenedColumn<T extends Record<PropertyKey, any>, ID> = ColumnDef<
 export type BaseColumnDef<T extends Record<PropertyKey, V>, V, ID> = {
     [K in keyof T]: {
         field: K;
+        /**
+         * DataTable이 내부에서 자동으로 붙이는 컬럼 식별자(`__hds_column_0`, `__hds_column_1`, …).
+         * 같은 `field`가 여러 번 쓰일 수 있고 `field#1` 같은 이름이 실제 `field`일 수도 있어, field 문자열과
+         * 무관한 순번 기반 값을 쓴다. 표시 중인 컬럼의 순번이라 컬럼을 숨기면 뒤 컬럼의 값이 바뀐다.
+         * 소비자가 지정하거나 외부에서 의존할 값이 아니다.
+         */
+        columnId?: string;
         headerName?: string;
         headerRef?: React.RefObject<HTMLTableCellElement>;
         tableColRef?: React.RefObject<HTMLTableColElement>;

package/dist/components/DataTable/utils.d.ts

@@ -20,3 +20,8 @@ export declare function computeAutoFitWidth(params: {
     field: string;
     dataInPage: Record<string, unknown>[];
 }): number | null;
+/**
+ * 헤더 셀의 DOM id. `<td headers>`가 이 값을 가리키므로 두 곳이 같은 규칙을 써야 한다.
+ * 같은 `field`가 여러 번 쓰일 수 있어 `headerName`이 아니라 컬럼 식별자로 만든다.
+ */
+export declare function getHeaderCellId(tableId: string, columnId: string): string;

package/dist/components/IconMenuButton/IconMenuButton.d.ts

@@ -1,4 +1,4 @@
-import React, { AriaAttributes, ComponentProps, ElementType, ReactNode } from 'react';
+import React, { AriaAttributes, ComponentProps, ComponentRef, ElementType, ReactNode } from 'react';
 import { MenuButtonProps as JoyMenuButtonProps } from '@mui/joy';
 export interface IconMenuButtonProps<T extends ElementType = 'button', P extends ElementType = 'li'> {
     size?: JoyMenuButtonProps<T, P>['size'];
@@ -16,8 +16,9 @@ export interface IconMenuButtonProps<T extends ElementType = 'button', P extends
     }[];
     placement?: 'bottom-start' | 'bottom' | 'bottom-end';
 }
-declare function IconMenuButton<T extends ElementType, P extends ElementType>(props: IconMenuButtonProps<T, P>): React.JSX.Element;
-declare namespace IconMenuButton {
-    var displayName: string;
-}
+type IconMenuButtonRef<T extends ElementType> = React.Ref<ComponentRef<T>>;
+export declare function IconMenuButtonInner<T extends ElementType, P extends ElementType>(props: IconMenuButtonProps<T, P>, ref: IconMenuButtonRef<T>): React.JSX.Element;
+declare const IconMenuButton: <T extends React.ElementType = "button", P extends React.ElementType = "li">(props: IconMenuButtonProps<T, P> & {
+    ref?: IconMenuButtonRef<T>;
+}) => React.ReactElement;
 export { IconMenuButton };

package/dist/components/IconMenuButton/index.d.ts

@@ -1,3 +1,4 @@
 import { IconMenuButton } from './IconMenuButton';
-export * from './IconMenuButton';
+export { IconMenuButton } from './IconMenuButton';
+export type { IconMenuButtonProps } from './IconMenuButton';
 export default IconMenuButton;

package/dist/components/Modal/Modal.d.ts

@@ -36,8 +36,5 @@ export type ModalFrameProps = {
     titleStartDecorator?: React.ReactNode;
     onClose?: () => void;
 } & React.ComponentProps<typeof ModalDialog>;
-declare function ModalFrame(props: ModalFrameProps): React.JSX.Element;
-declare namespace ModalFrame {
-    var displayName: string;
-}
+declare const ModalFrame: React.ForwardRefExoticComponent<Omit<ModalFrameProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { ModalFrame };

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

@@ -46,8 +46,7 @@ export interface SelectProps<OptionValue extends OptionType, Multiple extends bo
     }, newValue: InferOptionValue<OptionValue>) => void;
     multiple?: Multiple;
 }
-declare function Select<OptionValue extends OptionType, Multiple extends boolean = false>(props: SelectProps<OptionValue, Multiple>): React.JSX.Element;
-declare namespace Select {
-    var displayName: string;
-}
+declare const Select: <OptionValue extends OptionType, Multiple extends boolean = false>(props: SelectProps<OptionValue, Multiple> & {
+    ref?: React.Ref<HTMLButtonElement>;
+}) => React.ReactElement;
 export { Select };

package/dist/components/Textarea/Textarea.d.ts

@@ -7,8 +7,5 @@ export type TextareaProps = {
     error?: boolean;
     helperText?: React.ReactNode;
 } & JoyTextareaProps & MotionProps;
-declare const Textarea: {
-    (props: TextareaProps): React.JSX.Element;
-    displayName: string;
-};
+declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
 export { Textarea };

package/dist/components/Textarea/index.d.ts

@@ -1,3 +1,4 @@
 import { Textarea } from './Textarea';
-export * from './Textarea';
+export { Textarea } from './Textarea';
+export type { TextareaProps, JoyTextareaProps } from './Textarea';
 export default Textarea;

package/dist/components/data-display/DataTable.md

@@ -2424,6 +2424,10 @@ interface DataTableApi {
 ### Feature Combination Constraints
 
 - `pinnedColumns` and `columnGroupingModel` cannot be used simultaneously.
+- Two columns may share the same `field`. DataTable derives an internal per-column id so each duplicate keeps its own header/`<col>` element, measured width, and header `id`. The first column with a given `field` uses the `field` itself; each later duplicate gets a `__2`, `__3`, … suffix, skipping any name that is already a real `field`. The id is deliberately field-derived rather than positional: a positional id renumbers when a column is hidden, which would move a resized column's inline `<col>` width onto its neighbour. `sortModel` and `columnVisibilityModel` still match by `field`, so they apply to every column sharing it.
+- The header cell `id` (`<th id>`, referenced by each `<td headers>`) is built from that internal column id. It is stable across visibility changes, but it is an implementation detail — do not target it from external selectors, CSS, or `aria-labelledby`. The same applies to `data-hds-column-id` on the header cell, which carries the raw internal id.
+- `data-field` on the header cell still holds the column's `field`, so selectors like `th[data-field="dessert"]` keep working. It is not unique when two columns share a `field`.
+- Do not pin a duplicated `field`. `pinnedColumns` matches by `field` and cannot address one of the duplicates, so every column sharing it resolves to the same offset and they render stacked on top of each other.
 - `editMode` must be `true` for editing-related UI to be active.
 - When `paginationMode="server"`, `rowCount` must be specified.
 

package/dist/components/inputs/DatePicker.md

@@ -653,7 +653,7 @@ When `displayFormat` contains `MMM` or `MMMM`, the input becomes **read-only** a
 // → "4월 09, 2026"
 ```
 
-> **Note**: DatePicker also accepts all Input props (e.g., `size`, `variant`, `color`, `startDecorator`, `placeholder`, `sx`).
+> **Note**: DatePicker also accepts all Input props (e.g., `size`, `variant`, `color`, `startDecorator`, `placeholder`, `sx`). `sx` and `className` are applied to the root element, so layout styles like `width` work as expected when DatePicker is a direct flex child.
 
 ## Accessibility
 

package/dist/components/inputs/DateRangePicker.md

@@ -763,7 +763,7 @@ When `displayFormat` contains `MMM` or `MMMM`, the input becomes **read-only** a
 // → "Apr 01, 2026 - Apr 09, 2026"
 ```
 
-> **Note**: DateRangePicker also accepts all Input props (e.g., `size`, `variant`, `color`, `sx`).
+> **Note**: DateRangePicker also accepts all Input props (e.g., `size`, `variant`, `color`, `sx`). `sx` and `className` are applied to the root element, so layout styles like `width` work as expected when DateRangePicker is a direct flex child.
 
 ## Accessibility