@teamturing/react-kit 2.74.0 → 2.76.0

package/dist/core/Datagrid/DatagridBody.d.ts

@@ -1,6 +1,6 @@
-import { PropsWithChildren } from 'react';
+import { AriaAttributes, HTMLAttributes, PropsWithChildren } from 'react';
 import { SxProp } from '../../utils/styled-system';
-type Props = {} & SxProp;
-declare const DatagridBody: ({ ...props }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element;
+type Props = {} & SxProp & Pick<HTMLAttributes<HTMLDivElement>, 'id' | 'role'> & AriaAttributes;
+declare const DatagridBody: ({ role, ...props }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element;
 export default DatagridBody;
 export type { Props as DatagridBodyProps };

package/dist/core/Datagrid/DatagridCell.d.ts

@@ -1,6 +1,11 @@
-import { PropsWithChildren } from 'react';
+import { AriaAttributes, HTMLAttributes, PropsWithChildren } from 'react';
 import { GridUnitProps } from '../Grid';
-type Props = {} & Pick<GridUnitProps, 'size' | 'sx'>;
-declare const DatagridCell: ({ children, ...props }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element;
+type Props = {
+    /**
+     * 셀을 열 헤더(`columnheader`)로 표시합니다. 기본값(`false`)은 데이터 셀(`cell`)입니다.
+     */
+    columnHeader?: boolean;
+} & Pick<GridUnitProps, 'size' | 'sx'> & Pick<HTMLAttributes<HTMLDivElement>, 'id' | 'role' | 'tabIndex'> & AriaAttributes;
+declare const DatagridCell: ({ children, columnHeader, role, ...props }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element;
 export default DatagridCell;
 export type { Props as DatagridCellProps };

package/dist/core/Datagrid/DatagridHeader.d.ts

@@ -1,9 +1,9 @@
-import { ElementType, HTMLAttributes, ReactElement, ReactNode } from 'react';
+import { AriaAttributes, ElementType, HTMLAttributes, ReactElement, ReactNode } from 'react';
 import { SxProp } from '../../utils/styled-system';
 type Props = {
     leadingVisual?: ElementType | ReactNode;
     trailingAction?: ReactElement<HTMLAttributes<HTMLElement>>;
-} & SxProp;
+} & SxProp & Pick<HTMLAttributes<HTMLDivElement>, 'id'> & AriaAttributes;
 declare const DatagridHeader: ({ leadingVisual: LeadingVisual, trailingAction, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export default DatagridHeader;
 export type { Props as DatagridHeaderProps };

package/dist/core/Datagrid/DatagridRow.d.ts

@@ -1,7 +1,12 @@
-import { PropsWithChildren } from 'react';
+import { AriaAttributes, HTMLAttributes, PropsWithChildren } from 'react';
 import { GridProps } from '../Grid';
 import { SpaceProps } from '../Space';
-type Props = {} & Pick<GridProps, 'gapX' | 'alignItems' | 'justifyContent'> & Pick<SpaceProps, 'p' | 'px' | 'py' | 'pt' | 'pr' | 'pb' | 'pl' | 'padding' | 'paddingX' | 'paddingY' | 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft' | 'sx'>;
-declare const DatagridRow: ({ gapX, alignItems, justifyContent, children, ...props }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element;
+type Props = {
+    /**
+     * 행을 열 제목 행으로 표시합니다. `true`이면 하위 `Datagrid.Cell`들이 열 헤더(`columnheader`)로 처리됩니다.
+     */
+    columnHeader?: boolean;
+} & Pick<GridProps, 'gapX' | 'alignItems' | 'justifyContent'> & Pick<SpaceProps, 'p' | 'px' | 'py' | 'pt' | 'pr' | 'pb' | 'pl' | 'padding' | 'paddingX' | 'paddingY' | 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft' | 'sx'> & Pick<HTMLAttributes<HTMLDivElement>, 'id' | 'role' | 'tabIndex'> & AriaAttributes;
+declare const DatagridRow: ({ gapX, alignItems, justifyContent, columnHeader, role, children, ...props }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element;
 export default DatagridRow;
 export type { Props as DatagridRowProps };

package/dist/core/Datagrid/DatagridRowList.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { ItemListProps } from '../ItemList';
+import { DatagridCellProps } from './DatagridCell';
+import { DatagridRowProps } from './DatagridRow';
+type Props<T extends {
+    id: string;
+}> = {
+    rows: readonly T[];
+    columns: readonly {
+        field: string;
+        size: DatagridCellProps['size'];
+        renderValue: (row: T, index: number) => ReactNode;
+    }[];
+    rowProps?: DatagridRowProps;
+    columnsTransformer?: (columns: Props<T>['columns']) => typeof columns;
+} & Pick<ItemListProps<T>, 'renderItemWrapper' | 'emptyState'>;
+declare const DatagridRowList: <T extends {
+    id: string;
+}>({ rows, columns, rowProps, renderItemWrapper, emptyState, columnsTransformer, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export default DatagridRowList;
+export type { Props as DatagridRowListProps };

package/dist/core/Datagrid/index.d.ts

@@ -4,13 +4,17 @@ import { DatagridBodyProps } from './DatagridBody';
 import { DatagridCellProps } from './DatagridCell';
 import { DatagridHeaderProps } from './DatagridHeader';
 import { DatagridRowProps } from './DatagridRow';
+import { DatagridRowListProps } from './DatagridRowList';
 type Props = {} & HTMLAttributes<HTMLDivElement> & SxProp;
-declare const _default: (({ children, sx, ...props }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element) & {
+declare const _default: (({ children, sx, role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element) & {
     Header: ({ leadingVisual: LeadingVisual, trailingAction, ...props }: DatagridHeaderProps) => import("react/jsx-runtime").JSX.Element;
     Subheader: ({ ...props }: PropsWithChildren<SxProp>) => import("react/jsx-runtime").JSX.Element;
-    Body: ({ ...props }: PropsWithChildren<SxProp>) => import("react/jsx-runtime").JSX.Element;
-    Row: ({ gapX, alignItems, justifyContent, children, ...props }: PropsWithChildren<DatagridRowProps>) => import("react/jsx-runtime").JSX.Element;
-    Cell: ({ children, ...props }: PropsWithChildren<Pick<import("../Grid").GridUnitProps, "size" | "sx">>) => import("react/jsx-runtime").JSX.Element;
+    Body: ({ role, ...props }: PropsWithChildren<DatagridBodyProps>) => import("react/jsx-runtime").JSX.Element;
+    Row: ({ gapX, alignItems, justifyContent, columnHeader, role, children, ...props }: PropsWithChildren<DatagridRowProps>) => import("react/jsx-runtime").JSX.Element;
+    RowList: <T extends {
+        id: string;
+    }>({ rows, columns, rowProps, renderItemWrapper, emptyState, columnsTransformer, }: DatagridRowListProps<T>) => import("react/jsx-runtime").JSX.Element;
+    Cell: ({ children, columnHeader, role, ...props }: PropsWithChildren<DatagridCellProps>) => import("react/jsx-runtime").JSX.Element;
 };
 export default _default;
-export type { Props as DatagridProps, DatagridBodyProps, DatagridCellProps, DatagridHeaderProps, DatagridRowProps };
+export type { Props as DatagridProps, DatagridBodyProps, DatagridCellProps, DatagridHeaderProps, DatagridRowProps, DatagridRowListProps, };

package/dist/core/Drawer/index.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren, RefObject } from 'react';
+import { HTMLAttributes, PropsWithChildren, RefObject } from 'react';
 import { SxProp } from '../../utils/styled-system';
 import { DrawerBodyProps } from './DrawerBody';
 import { DrawerFooterProps } from './DrawerFooter';
@@ -16,7 +16,7 @@ type Props = {
     size?: DrawerSizeType;
     direction?: DrawerDirectionType;
     initialFocusRef?: RefObject<HTMLElement>;
-} & SxProp;
+} & Pick<HTMLAttributes<HTMLDivElement>, 'aria-label' | 'aria-labelledby'> & SxProp;
 declare const _default: import("react").ForwardRefExoticComponent<{
     isOpen?: boolean | undefined;
     onDismiss?: (() => void) | undefined;
@@ -24,7 +24,7 @@ declare const _default: import("react").ForwardRefExoticComponent<{
     size?: DrawerSizeType | undefined;
     direction?: DrawerDirectionType | undefined;
     initialFocusRef?: RefObject<HTMLElement> | undefined;
-} & SxProp & {
+} & Pick<HTMLAttributes<HTMLDivElement>, "aria-label" | "aria-labelledby"> & SxProp & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>> & {
     UnstyledHeader: import("styled-components").IStyledComponent<"web", {

package/dist/core/FormControl/index.d.ts

@@ -30,8 +30,15 @@ type FormControlFieldProps = {
     label: string;
     caption?: string;
 };
-type FormControlContextValue = {} & Omit<Props, 'additionalInputComponentCandidates'>;
-declare const FormControlContext: import("react").Context<Omit<Props, "additionalInputComponentCandidates">>;
+type FormControlContextValue = {
+    /**
+     * `Caption`, `ErrorMessage`, `SuccessMessage`가 Input과 `aria-describedby`로 연결되기 위한 고유 ID입니다.
+     */
+    captionId?: string;
+    errorId?: string;
+    successId?: string;
+} & Omit<Props, 'additionalInputComponentCandidates'>;
+declare const FormControlContext: import("react").Context<FormControlContextValue>;
 declare const _default: import("react").ForwardRefExoticComponent<{
     /**
      * `FormControl`의 Input 요소를 컨트롤하기 위한 ID입니다. `Label`, `Caption`과 연결짓기 위해 사용합니다.

package/dist/core/Grid/index.d.ts

@@ -1,5 +1,5 @@
 import { SpaceKey } from '@teamturing/token-studio';
-import { HTMLAttributes, PropsWithChildren } from 'react';
+import { AriaAttributes, HTMLAttributes, PropsWithChildren } from 'react';
 import { ResponsiveValue } from 'styled-system';
 import { AsProp } from '../../utils/styled-system';
 import { ViewProps } from '../View';
@@ -11,11 +11,11 @@ type Props = {
      * 화면의 레이아웃을 위해 사용하는 경우 document size를 넘어가는 경우를 방지하기 위해 사용합니다.
      */
     layout?: boolean;
-} & Pick<ViewProps, 'alignItems' | 'justifyContent' | 'sx'> & Pick<HTMLAttributes<HTMLDivElement>, 'className'> & AsProp;
+} & Pick<ViewProps, 'alignItems' | 'justifyContent' | 'sx'> & Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'id' | 'role' | 'tabIndex'> & AriaAttributes & AsProp;
 type UnitSizeType = 'min' | 'max' | number;
 type GridUnitProps = {
     size: ResponsiveValue<UnitSizeType>;
-} & Pick<ViewProps, 'order' | 'sx'> & Pick<HTMLAttributes<HTMLDivElement>, 'className'> & AsProp;
+} & Pick<ViewProps, 'order' | 'sx'> & Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'id' | 'role' | 'tabIndex'> & AriaAttributes & AsProp;
 declare const _default: import("react").ForwardRefExoticComponent<{
     gapX?: ResponsiveValue<0 | 1 | 20 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 12 | 14 | 16 | 18 | "-80" | "-50" | "-48" | "-40" | "-32" | "-30" | "-28" | "-24" | "-20" | "-18" | "-16" | "-14" | "-12" | "-10" | "-8" | "-7" | "-6" | "-5" | "-4" | "-3" | "-2" | "-1" | "-0.5" | "-0.25" | 0.25 | 0.5 | 24 | 28 | 30 | 32 | 40 | 48 | 50 | 80> | undefined;
     gapY?: ResponsiveValue<0 | 1 | 20 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 12 | 14 | 16 | 18 | "-80" | "-50" | "-48" | "-40" | "-32" | "-30" | "-28" | "-24" | "-20" | "-18" | "-16" | "-14" | "-12" | "-10" | "-8" | "-7" | "-6" | "-5" | "-4" | "-3" | "-2" | "-1" | "-0.5" | "-0.25" | 0.25 | 0.5 | 24 | 28 | 30 | 32 | 40 | 48 | 50 | 80> | undefined;
@@ -24,7 +24,7 @@ declare const _default: import("react").ForwardRefExoticComponent<{
      * 화면의 레이아웃을 위해 사용하는 경우 document size를 넘어가는 경우를 방지하기 위해 사용합니다.
      */
     layout?: boolean | undefined;
-} & Pick<ViewProps, "alignItems" | "justifyContent" | "sx"> & Pick<HTMLAttributes<HTMLDivElement>, "className"> & AsProp & {
+} & Pick<ViewProps, "alignItems" | "justifyContent" | "sx"> & Pick<HTMLAttributes<HTMLDivElement>, "className" | "id" | "tabIndex" | "role"> & AriaAttributes & AsProp & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>> & {
     Unit: ({ size, as, children, ...props }: PropsWithChildren<GridUnitProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/core/Spinner/index.d.ts

@@ -2,9 +2,21 @@ import { SVGProps } from 'react';
 type SpinnerVariantType = 'progress-gradient' | 'progress-line';
 type Props = {
     variant?: SpinnerVariantType;
+    /**
+     * 스크린 리더에 읽힐 로딩 상태 텍스트를 정의합니다.
+     * 빈 문자열(`''`)을 전달하면 장식용으로 간주되어 보조 기술에서 숨겨집니다.
+     * @default '로딩 중'
+     */
+    label?: string;
 } & Omit<SVGProps<SVGSVGElement>, 'ref'>;
 declare const Spinner: import("react").ForwardRefExoticComponent<{
     variant?: SpinnerVariantType | undefined;
+    /**
+     * 스크린 리더에 읽힐 로딩 상태 텍스트를 정의합니다.
+     * 빈 문자열(`''`)을 전달하면 장식용으로 간주되어 보조 기술에서 숨겨집니다.
+     * @default '로딩 중'
+     */
+    label?: string | undefined;
 } & Omit<SVGProps<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 export default Spinner;
 export type { Props as SpinnerProps };

package/dist/core/StyledIcon/index.d.ts

@@ -5,12 +5,12 @@ type Props = {
      * @teamturing/icons와 함께 사용
      */
     icon: ComponentType<SVGProps<SVGSVGElement>>;
-} & Pick<ViewProps, 'size' | 'color' | 'sx'> & Pick<HTMLAttributes<HTMLDivElement>, 'className'>;
+} & Pick<ViewProps, 'size' | 'color' | 'sx'> & Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'aria-label' | 'aria-hidden'>;
 declare const StyledIcon: import("react").ForwardRefExoticComponent<{
     /**
      * @teamturing/icons와 함께 사용
      */
     icon: ComponentType<SVGProps<SVGSVGElement>>;
-} & Pick<ViewProps, "color" | "size" | "sx"> & Pick<HTMLAttributes<HTMLDivElement>, "className"> & import("react").RefAttributes<HTMLDivElement>>;
+} & Pick<ViewProps, "color" | "size" | "sx"> & Pick<HTMLAttributes<HTMLDivElement>, "className" | "aria-hidden" | "aria-label"> & import("react").RefAttributes<HTMLDivElement>>;
 export default StyledIcon;
 export type { Props as StyledIconProps };

package/dist/core/Toast/index.d.ts

@@ -1,4 +1,4 @@
-import { ComponentType, PropsWithChildren, SVGProps } from 'react';
+import { ComponentType, HTMLAttributes, PropsWithChildren, SVGProps } from 'react';
 import { ResponsiveValue } from 'styled-system';
 type ToastVariantType = 'success' | 'warning';
 type Props = {
@@ -16,7 +16,7 @@ type Props = {
      * 반응형 디자인이 적용됩니다.
      */
     resizing?: ResponsiveValue<'hug' | 'fill'>;
-};
-declare const Toast: ({ variant, icon: Icon, resizing, children, }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element;
+} & HTMLAttributes<HTMLDivElement>;
+declare const Toast: ({ variant, icon: Icon, resizing, children, ...props }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element;
 export default Toast;
 export type { Props as ToastProps };

package/dist/index.d.ts

@@ -32,7 +32,7 @@ export type { ClickAreaProps } from './core/ClickArea';
 export { default as CounterBadge } from './core/CounterBadge';
 export type { CounterBadgeProps } from './core/CounterBadge';
 export { default as Datagrid } from './core/Datagrid';
-export type { DatagridProps, DatagridBodyProps, DatagridCellProps, DatagridHeaderProps, DatagridRowProps, } from './core/Datagrid';
+export type { DatagridProps, DatagridBodyProps, DatagridCellProps, DatagridHeaderProps, DatagridRowProps, DatagridRowListProps, } from './core/Datagrid';
 export { default as DescriptionList } from './core/DescriptionList';
 export type { DescriptionListProps } from './core/DescriptionList';
 export { default as Dialog } from './core/Dialog';