@atlaskit/table-tree 9.12.1 → 10.0.0

package/dist/types/components/internal/chevron.d.ts

@@ -1,19 +1,21 @@
-import { Component } from 'react';
+/// <reference types="react" />
 interface ChevronProps {
-    expandLabel: string;
-    collapseLabel: string;
+    /**
+     * @default 'Expand'
+     */
+    expandLabel?: string;
+    /**
+     * @default 'Collapse'
+     */
+    collapseLabel?: string;
     isExpanded?: boolean;
     ariaControls?: string;
-    onExpandToggle?: Function;
+    onExpandToggle?: () => void;
     rowId: string;
     extendedLabel?: string;
 }
-export default class Chevron extends Component<ChevronProps> {
-    static defaultProps: {
-        expandLabel: string;
-        collapseLabel: string;
-    };
-    handleClick: () => void;
-    render(): JSX.Element;
-}
-export {};
+/**
+ * Internal chevron component.
+ */
+declare const Chevron: ({ isExpanded, ariaControls, collapseLabel, expandLabel, rowId, extendedLabel, onExpandToggle, }: ChevronProps) => JSX.Element;
+export default Chevron;

package/dist/types/components/internal/item.d.ts

@@ -2,16 +2,28 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { Component } from 'react';
-import { jsx } from '@emotion/react';
-export default class Item extends Component<any> {
-    static defaultProps: {
-        depth: number;
+import { type ReactElement } from 'react';
+import { type RowProps } from '../row';
+import { type RowsProps } from '../rows';
+type ItemProps<Item> = {
+    /**
+     * @default 0
+     */
+    depth?: number;
+    data: Item & {
+        children?: Item[];
     };
-    render(): import("react").FunctionComponentElement<{
-        depth: any;
-        data: any;
-        loadingLabel: any;
-        renderChildren: () => jsx.JSX.Element;
-    }> | null;
-}
+    render: (arg: Item & {
+        children?: Item[];
+    }) => ReactElement<RowProps<Item> | RowsProps<Item>> | null;
+    loadingLabel?: string;
+    key?: string;
+};
+/**
+ * __Item__
+ * Internal item component.
+ */
+declare function Item<Item extends {
+    id: string;
+}>({ depth, data, render, loadingLabel, }: ItemProps<Item>): ReactElement<RowProps<Item> | RowsProps<Item>, string | import("react").JSXElementConstructor<any>> | null;
+export default Item;

package/dist/types/components/internal/items.d.ts

@@ -1,25 +1,14 @@
-import React, { Component } from 'react';
-interface ItemsProps<Item = any> {
-    parentData?: any;
-    depth: number;
-    items?: Item[];
+import { type ReactElement } from 'react';
+import { type RowProps } from '../row';
+export interface ItemsProps<Item> {
+    depth?: number;
+    items?: Item[] | null;
     loadingLabel?: string;
-    render: (arg: Item) => React.ReactNode;
+    render: (arg: Item & {
+        children?: Item[];
+    }) => ReactElement<RowProps<Item>> | null;
 }
-interface State {
-    isLoaderShown: boolean;
-}
-export default class Items<Item> extends Component<ItemsProps<Item>, State> {
-    static defaultProps: {
-        depth: number;
-    };
-    state: State;
-    static getDerivedStateFromProps(nextProps: any, prevState: any): {
-        isLoaderShown: boolean;
-    } | null;
-    handleLoaderComplete: () => void;
-    renderLoader(): JSX.Element;
-    renderItems(): JSX.Element[] | undefined;
-    render(): JSX.Element | JSX.Element[] | undefined;
-}
-export {};
+declare function Items<Item extends {
+    id: string;
+}>({ depth, items, loadingLabel, render, }: ItemsProps<Item>): JSX.Element;
+export default Items;

package/dist/types/components/internal/loader-item.d.ts

@@ -1,21 +1,12 @@
-import { Component } from 'react';
+/// <reference types="react" />
 interface LoaderItemProps {
-    depth: number;
+    /**
+     * @default 1
+     */
+    depth?: number;
     onComplete: (...args: any[]) => void;
     isCompleting?: boolean;
     loadingLabel?: string;
 }
-export default class LoaderItem extends Component<LoaderItemProps, any> {
-    static defaultProps: {
-        depth: number;
-    };
-    state: {
-        phase: string;
-    };
-    static getDerivedStateFromProps(nextProps: any, prevState: any): {
-        phase: string;
-    } | null;
-    componentDidUpdate(prevProps: any, prevState: any): void;
-    render(): JSX.Element | null;
-}
-export {};
+declare const LoaderItem: ({ depth, loadingLabel, isCompleting, onComplete }: LoaderItemProps) => JSX.Element | null;
+export default LoaderItem;

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

@@ -2,18 +2,10 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React, { Component, type ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
-import type Item from './internal/item';
-/**
- * This is hard-coded here because our actual <TableTree /> has no typings
- * for its props.
- *
- * Adding types for real *might* break things so will need a little care.
- *
- * Defining it here for now lets us provide *something* without much headache.
- */
-export type RowProps = {
+import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
+export interface RowProps<Item> {
     /**
      * Whether the row has children.
      */
@@ -21,7 +13,7 @@ export type RowProps = {
     /**
      * Children contained in the row. Should be one or more cell components.
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * ID for the row item.
      */
@@ -36,11 +28,11 @@ export type RowProps = {
     /**
      * Controls the expanded state of the row.
      */
-    isExpanded?: ReactNode;
+    isExpanded?: boolean;
     /**
      * Sets the default expanded state of the row.
      */
-    isDefaultExpanded?: ReactNode;
+    isDefaultExpanded?: boolean;
     /**
      * This is the accessible name for the expand chevron button, used to tell assistive technology what the button is for.
      */
@@ -52,11 +44,11 @@ export type RowProps = {
     /**
      * Callback called when the row collapses.
      */
-    onCollapse?: (data: Item) => void;
+    onCollapse?: (data: Item, analytics?: UIAnalyticsEvent) => void | Promise<void>;
     /**
      * Callback called when the row expands.
      */
-    onExpand?: (data: Item) => void;
+    onExpand?: (data: Item, analytics?: UIAnalyticsEvent) => void | Promise<void>;
     /**
      * Children to render under the row.
      * This is normally set by the parent item component, and doesn't need to be configured.
@@ -86,28 +78,8 @@ export type RowProps = {
     Should be a number  when we pass data via the `Rows` component as children in the table tree.
    */
     mainColumnForExpandCollapseLabel?: string | number;
-};
-declare class RowComponent extends Component<any, any> {
-    state: {
-        isExpanded: any;
-    };
-    componentDidUpdate(prevProps: any): void;
-    onExpandStateChange(isExpanded: boolean): void;
-    /**
-     * This ensures a user won't trigger a click event and expand the accordion
-     * when making a text selection.
-     */
-    onClickHandler: (e: React.MouseEvent) => void;
-    onExpandToggle: () => void;
-    isExpanded(): any;
-    getExtendedLabel: (cellContent: any, cellIndex: number, mainColumnForExpandCollapseLabel: string | number) => any;
-    renderCell(cell: any, cellIndex: number): React.FunctionComponentElement<{
-        key: number;
-        columnIndex: number;
-        indentLevel: any;
-    }>;
-    render(): jsx.JSX.Element;
 }
-export { RowComponent as RowWithoutAnalytics };
-declare const Row: React.ForwardRefExoticComponent<Pick<Pick<Omit<any, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, string | number | symbol> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, string | number | symbol> & React.RefAttributes<any>>;
+declare function Row<Item extends {
+    id: string;
+}>({ shouldExpandOnClick, hasChildren, depth, renderChildren, isDefaultExpanded, data, onExpand: providedOnExpand, onCollapse: providedOnCollapse, mainColumnForExpandCollapseLabel, expandLabel, collapseLabel, itemId, children, isExpanded: isProvidedExpanded, }: RowProps<Item>): jsx.JSX.Element;
 export default Row;

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

@@ -1,27 +1,32 @@
-import React, { Component } from 'react';
-type WithChildren<T> = T & {
-    children?: T[] | null;
+import { type ReactElement } from 'react';
+import { type RowProps } from './row';
+type Content = {
+    title: string;
+    description: string;
 };
-export interface RowsProps<T> {
+export interface RowsProps<Item> {
     /**
      * The data used to render the set of rows. Will be passed down via the `children` render prop.
      *
      * In addition to these props, any other data can be added to the object, and it will
      * be provided as props when rendering each cell.
      */
-    items?: WithChildren<T>[];
+    items?: Item[];
     /**
      * Render function for child rows. Render props will contain an item from the
      * `items` prop above.
      */
-    render: (args: WithChildren<T>) => React.ReactNode;
+    render: (args: Item & {
+        children?: Item[];
+        content?: Content;
+    }) => ReactElement<RowProps<Item>> | null;
     /**
      * This is an accessible name for the loading state's spinner.
      * The default text is "Loading".
      */
     loadingLabel?: string;
 }
-export default class Rows<T> extends Component<RowsProps<T>> {
-    render(): JSX.Element;
-}
-export {};
+declare function Rows<T extends {
+    id: string;
+}>({ items, render, loadingLabel }: RowsProps<T>): JSX.Element;
+export default Rows;

package/dist/types/components/table-tree.d.ts

@@ -1,8 +1,5 @@
-import { Component, type ElementType, type ReactNode } from 'react';
+import { type ElementType, type ReactNode } from 'react';
 import { type ColumnWidth } from './internal/context';
-import type Item from './internal/item';
-declare class Content extends Object {
-}
 /**
  * This is hard-coded here because our actual <TableTree /> has no typings
  * for its props.
@@ -11,7 +8,7 @@ declare class Content extends Object {
  *
  * Defining it here for now lets us provide *something* without much headache.
  */
-export type TableTreeProps = {
+export interface TableTreeProps<Item> {
     /**
      * The contents of the table.
      * Use this when composing `Cell`, `Header`, `Headers`, `Row`, and `Rows` components.
@@ -22,11 +19,11 @@ export type TableTreeProps = {
      * Each column component is used to render the cells in that column.
      * A cell's `content` value, specified in the data passed to `items`, is provided as props.
      */
-    columns?: ElementType<Content>[];
+    columns?: ElementType[];
     /**
      * The widths of the columns in the table.
      */
-    columnWidths?: (string | number)[];
+    columnWidths?: ColumnWidth[];
     /**
      * The header text of the columns of the table.
      */
@@ -36,11 +33,11 @@ export type TableTreeProps = {
 
     If your cells contain interactive elements, always set this to `false` to avoid unexpected expanding or collapsing.
 
-    If you aren’t using the `items` prop, `shouldExpandOnClick` should be used on the row component instead.
+    If you aren't using the `items` prop, `shouldExpandOnClick` should be used on the row component instead.
    */
     shouldExpandOnClick?: boolean;
     /**
-    The data used to render the table. If you’re creating a basic table, use this prop instead of composing cell, header, headers, row, and rows components.
+    The data used to render the table. If you're creating a basic table, use this prop instead of composing cell, header, headers, row, and rows components.
 
     In addition to the `items` props, any other data can be added, and it will
     be provided as props when rendering each cell.
@@ -62,15 +59,8 @@ export type TableTreeProps = {
      * Usage of either this, or the `label` attribute is strongly recommended.
      */
     referencedLabel?: string;
-};
-interface State {
-    columnWidths: ColumnWidth[];
-}
-export default class TableTree extends Component<any, State> {
-    state: State;
-    componentDidMount(): void;
-    setColumnWidth: (columnIndex: number, width: ColumnWidth) => void;
-    getColumnWidth: (columnIndex: any) => ColumnWidth | null;
-    render(): JSX.Element;
 }
-export {};
+declare function TableTree<Item extends {
+    id: string;
+}>({ children, columns, columnWidths: defaultColumnWidths, headers, shouldExpandOnClick, items, mainColumnForExpandCollapseLabel, label, referencedLabel, }: TableTreeProps<Item>): JSX.Element;
+export default TableTree;

package/dist/types-ts4.5/components/header.d.ts

@@ -1,4 +1,8 @@
 /// <reference types="react" />
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 /**
  * This is hard-coded here because our actual <Header /> has no typings
  * for its props.
@@ -12,6 +16,12 @@ export type HeaderProps = {
      * Width of the header item. Takes a string, or a number representing the width in pixels.
      */
     width?: string | number;
+    /**
+     * The contents of the header.
+     */
+    children?: React.ReactNode;
+    onClick?: () => void;
+    id?: string;
 };
-declare const Header: (props: any) => JSX.Element;
+declare const Header: (props: HeaderProps & import("./internal/with-column-width").CellWithColumnWidthProps) => JSX.Element;
 export default Header;

package/dist/types-ts4.5/components/headers.d.ts

@@ -2,8 +2,18 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { Component } from 'react';
+import { type ReactElement } from 'react';
 import { jsx } from '@emotion/react';
-export default class Headers extends Component<any> {
-    render(): jsx.JSX.Element;
+export interface HeadersProps {
+    children: ReactElement | ReactElement[];
 }
+/**
+ * __Headers__
+ *
+ * Headers component for advanced composition of data, allowing custom data structures.
+ *
+ * - [Examples](https://atlassian.design/components/table-tree/examples#advanced)
+ * - [Code](https://atlassian.design/components/table-tree/code#headers-props)
+ */
+declare const Headers: ({ children }: HeadersProps) => jsx.JSX.Element;
+export default Headers;

package/dist/types-ts4.5/components/internal/chevron.d.ts

@@ -1,19 +1,21 @@
-import { Component } from 'react';
+/// <reference types="react" />
 interface ChevronProps {
-    expandLabel: string;
-    collapseLabel: string;
+    /**
+     * @default 'Expand'
+     */
+    expandLabel?: string;
+    /**
+     * @default 'Collapse'
+     */
+    collapseLabel?: string;
     isExpanded?: boolean;
     ariaControls?: string;
-    onExpandToggle?: Function;
+    onExpandToggle?: () => void;
     rowId: string;
     extendedLabel?: string;
 }
-export default class Chevron extends Component<ChevronProps> {
-    static defaultProps: {
-        expandLabel: string;
-        collapseLabel: string;
-    };
-    handleClick: () => void;
-    render(): JSX.Element;
-}
-export {};
+/**
+ * Internal chevron component.
+ */
+declare const Chevron: ({ isExpanded, ariaControls, collapseLabel, expandLabel, rowId, extendedLabel, onExpandToggle, }: ChevronProps) => JSX.Element;
+export default Chevron;

package/dist/types-ts4.5/components/internal/item.d.ts

@@ -2,16 +2,28 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { Component } from 'react';
-import { jsx } from '@emotion/react';
-export default class Item extends Component<any> {
-    static defaultProps: {
-        depth: number;
+import { type ReactElement } from 'react';
+import { type RowProps } from '../row';
+import { type RowsProps } from '../rows';
+type ItemProps<Item> = {
+    /**
+     * @default 0
+     */
+    depth?: number;
+    data: Item & {
+        children?: Item[];
     };
-    render(): import("react").FunctionComponentElement<{
-        depth: any;
-        data: any;
-        loadingLabel: any;
-        renderChildren: () => jsx.JSX.Element;
-    }> | null;
-}
+    render: (arg: Item & {
+        children?: Item[];
+    }) => ReactElement<RowProps<Item> | RowsProps<Item>> | null;
+    loadingLabel?: string;
+    key?: string;
+};
+/**
+ * __Item__
+ * Internal item component.
+ */
+declare function Item<Item extends {
+    id: string;
+}>({ depth, data, render, loadingLabel, }: ItemProps<Item>): ReactElement<RowProps<Item> | RowsProps<Item>, string | import("react").JSXElementConstructor<any>> | null;
+export default Item;

package/dist/types-ts4.5/components/internal/items.d.ts

@@ -1,25 +1,14 @@
-import React, { Component } from 'react';
-interface ItemsProps<Item = any> {
-    parentData?: any;
-    depth: number;
-    items?: Item[];
+import { type ReactElement } from 'react';
+import { type RowProps } from '../row';
+export interface ItemsProps<Item> {
+    depth?: number;
+    items?: Item[] | null;
     loadingLabel?: string;
-    render: (arg: Item) => React.ReactNode;
+    render: (arg: Item & {
+        children?: Item[];
+    }) => ReactElement<RowProps<Item>> | null;
 }
-interface State {
-    isLoaderShown: boolean;
-}
-export default class Items<Item> extends Component<ItemsProps<Item>, State> {
-    static defaultProps: {
-        depth: number;
-    };
-    state: State;
-    static getDerivedStateFromProps(nextProps: any, prevState: any): {
-        isLoaderShown: boolean;
-    } | null;
-    handleLoaderComplete: () => void;
-    renderLoader(): JSX.Element;
-    renderItems(): JSX.Element[] | undefined;
-    render(): JSX.Element | JSX.Element[] | undefined;
-}
-export {};
+declare function Items<Item extends {
+    id: string;
+}>({ depth, items, loadingLabel, render, }: ItemsProps<Item>): JSX.Element;
+export default Items;

package/dist/types-ts4.5/components/internal/loader-item.d.ts

@@ -1,21 +1,12 @@
-import { Component } from 'react';
+/// <reference types="react" />
 interface LoaderItemProps {
-    depth: number;
+    /**
+     * @default 1
+     */
+    depth?: number;
     onComplete: (...args: any[]) => void;
     isCompleting?: boolean;
     loadingLabel?: string;
 }
-export default class LoaderItem extends Component<LoaderItemProps, any> {
-    static defaultProps: {
-        depth: number;
-    };
-    state: {
-        phase: string;
-    };
-    static getDerivedStateFromProps(nextProps: any, prevState: any): {
-        phase: string;
-    } | null;
-    componentDidUpdate(prevProps: any, prevState: any): void;
-    render(): JSX.Element | null;
-}
-export {};
+declare const LoaderItem: ({ depth, loadingLabel, isCompleting, onComplete }: LoaderItemProps) => JSX.Element | null;
+export default LoaderItem;

package/dist/types-ts4.5/components/row.d.ts

@@ -2,18 +2,10 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React, { Component, type ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 import { jsx } from '@emotion/react';
-import type Item from './internal/item';
-/**
- * This is hard-coded here because our actual <TableTree /> has no typings
- * for its props.
- *
- * Adding types for real *might* break things so will need a little care.
- *
- * Defining it here for now lets us provide *something* without much headache.
- */
-export type RowProps = {
+import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
+export interface RowProps<Item> {
     /**
      * Whether the row has children.
      */
@@ -21,7 +13,7 @@ export type RowProps = {
     /**
      * Children contained in the row. Should be one or more cell components.
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
      * ID for the row item.
      */
@@ -36,11 +28,11 @@ export type RowProps = {
     /**
      * Controls the expanded state of the row.
      */
-    isExpanded?: ReactNode;
+    isExpanded?: boolean;
     /**
      * Sets the default expanded state of the row.
      */
-    isDefaultExpanded?: ReactNode;
+    isDefaultExpanded?: boolean;
     /**
      * This is the accessible name for the expand chevron button, used to tell assistive technology what the button is for.
      */
@@ -52,11 +44,11 @@ export type RowProps = {
     /**
      * Callback called when the row collapses.
      */
-    onCollapse?: (data: Item) => void;
+    onCollapse?: (data: Item, analytics?: UIAnalyticsEvent) => void | Promise<void>;
     /**
      * Callback called when the row expands.
      */
-    onExpand?: (data: Item) => void;
+    onExpand?: (data: Item, analytics?: UIAnalyticsEvent) => void | Promise<void>;
     /**
      * Children to render under the row.
      * This is normally set by the parent item component, and doesn't need to be configured.
@@ -86,28 +78,8 @@ export type RowProps = {
     Should be a number  when we pass data via the `Rows` component as children in the table tree.
    */
     mainColumnForExpandCollapseLabel?: string | number;
-};
-declare class RowComponent extends Component<any, any> {
-    state: {
-        isExpanded: any;
-    };
-    componentDidUpdate(prevProps: any): void;
-    onExpandStateChange(isExpanded: boolean): void;
-    /**
-     * This ensures a user won't trigger a click event and expand the accordion
-     * when making a text selection.
-     */
-    onClickHandler: (e: React.MouseEvent) => void;
-    onExpandToggle: () => void;
-    isExpanded(): any;
-    getExtendedLabel: (cellContent: any, cellIndex: number, mainColumnForExpandCollapseLabel: string | number) => any;
-    renderCell(cell: any, cellIndex: number): React.FunctionComponentElement<{
-        key: number;
-        columnIndex: number;
-        indentLevel: any;
-    }>;
-    render(): jsx.JSX.Element;
 }
-export { RowComponent as RowWithoutAnalytics };
-declare const Row: React.ForwardRefExoticComponent<Pick<Pick<Omit<any, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, string | number | symbol> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, string | number | symbol> & React.RefAttributes<any>>;
+declare function Row<Item extends {
+    id: string;
+}>({ shouldExpandOnClick, hasChildren, depth, renderChildren, isDefaultExpanded, data, onExpand: providedOnExpand, onCollapse: providedOnCollapse, mainColumnForExpandCollapseLabel, expandLabel, collapseLabel, itemId, children, isExpanded: isProvidedExpanded, }: RowProps<Item>): jsx.JSX.Element;
 export default Row;