@atlaskit/link-datasource 1.22.8 → 1.23.0

package/dist/esm/ui/issue-like-table/styled.js

@@ -1,10 +1,12 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _styled$th;
 import styled from '@emotion/styled';
 import { N40 } from '@atlaskit/theme/colors';
 export var ScrollableContainerHeight = 590;
-export var FieldTextFontSize = '14px';
-export var Table = styled.table(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n"])));
+export var fieldTextFontSize = "var(--ds-font-size-100, 14px)";
+export var Table = styled.table({
+  width: '100%'
+});
 var lineHeight = "var(--ds-font-lineHeight-300, 24px)";
 var verticalPadding = "var(--ds-space-025, 2px)";
 
@@ -20,4 +22,30 @@ export var withTablePluginPrefix = function withTablePluginPrefix(tableSection)
 };
 export var withTablePluginHeaderPrefix = withTablePluginPrefix.bind(null, 'thead');
 export var withTablePluginBodyPrefix = withTablePluginPrefix.bind(null, 'tbody');
-export var TableHeading = styled.th(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", " {\n    border: 0;\n    position: relative;\n\n    /* This makes resizing work with out jumping due to padding + changes overall width for same default values. */\n    box-sizing: border-box;\n\n    line-height: ", ";\n    padding: ", " ", ";\n    border-right: 0.5px solid ", ";\n    border-bottom: 2px solid ", ";\n\n    /*\n      lineHeight * 2 -> Max height of two lined header\n      verticalPadding * 2 -> padding for this component itself\n      verticalPadding * 2 -> padding inside span (--container)\n      2px -> Bottom border\n      Last two terms are needed because of border-box box sizing.\n    */\n    height: calc(", " * 2 + ", " * 4 + 2px);\n    vertical-align: bottom;\n    background-color: ", ";\n  }\n\n  ", " {\n    border-right: 0;\n  }\n\n  ", " {\n    padding-left: ", ";\n  }\n\n  ", " {\n    border-right: 0;\n  }\n\n  & [data-testid='datasource-header-content--container'] {\n    width: 100%;\n    padding: ", " ", ";\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    white-space: normal;\n    overflow: hidden;\n    word-wrap: break-word;\n\n    &:hover {\n      background: ", ";\n      border-radius: 3px;\n    }\n  }\n"])), withTablePluginHeaderPrefix(), lineHeight, verticalPadding, "var(--ds-space-050, 4px)", "var(--ds-border, ".concat(N40, ")"), "var(--ds-border, ".concat(N40, ")"), lineHeight, verticalPadding, "var(--ds-elevation-surface-current, #FFF)", withTablePluginPrefix('', 'thead.has-column-picker &:nth-last-of-type(2)'), withTablePluginHeaderPrefix('&:first-child'), "var(--ds-space-050, 4px)", withTablePluginHeaderPrefix('&:last-child'), verticalPadding, "var(--ds-space-050, 4px)", "var(--ds-background-input-hovered, #F7F8F9)");
+export var TableHeading = styled.th((_styled$th = {}, _defineProperty(_styled$th, "".concat(withTablePluginHeaderPrefix()), {
+  border: 0,
+  position: 'relative',
+  boxSizing: 'border-box',
+  lineHeight: lineHeight,
+  padding: "".concat(verticalPadding, " ", "var(--ds-space-050, 4px)"),
+  borderRight: "0.5px solid ".concat("var(--ds-border, ".concat(N40, ")")),
+  borderBottom: "2px solid ".concat("var(--ds-border, ".concat(N40, ")")),
+  height: "calc(".concat(lineHeight, " * 2 + ").concat(verticalPadding, " * 4 + 2px)"),
+  verticalAlign: 'bottom',
+  backgroundColor: "var(--ds-elevation-surface-current, #FFF)"
+}), _defineProperty(_styled$th, "".concat(withTablePluginPrefix('', 'thead.has-column-picker &:nth-last-of-type(2)')), {
+  borderRight: 0
+}), _defineProperty(_styled$th, "".concat(withTablePluginHeaderPrefix('&:first-child')), {
+  paddingLeft: "var(--ds-space-050, 4px)"
+}), _defineProperty(_styled$th, "".concat(withTablePluginHeaderPrefix('&:last-child')), {
+  borderRight: 0
+}), _defineProperty(_styled$th, "& [data-testid='datasource-header-content--container']", {
+  width: '100%',
+  padding: "".concat(verticalPadding, " ", "var(--ds-space-050, 4px)"),
+  display: '-webkit-box',
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: 'vertical',
+  whiteSpace: 'normal',
+  overflow: 'hidden',
+  wordWrap: 'break-word'
+}), _styled$th));

package/dist/types/ui/datasource-table-view/datasourceTableView.d.ts

@@ -1,3 +1,7 @@
 /// <reference types="react" />
-import { DatasourceTableViewProps } from './types';
-export declare const DatasourceTableView: import("react").ForwardRefExoticComponent<DatasourceTableViewProps & import("@atlaskit/analytics-next").WithContextProps & import("react").RefAttributes<any>>;
+export declare const DatasourceTableView: import("react").ForwardRefExoticComponent<{
+    datasourceId: string;
+    parameters: object;
+    fields?: string[] | undefined;
+    url?: string | undefined;
+} & Partial<Pick<import("../issue-like-table/types").IssueLikeDataTableViewProps, "visibleColumnKeys">> & Pick<import("../issue-like-table/types").IssueLikeDataTableViewProps, "onVisibleColumnKeysChange" | "columnCustomSizes" | "onColumnResize" | "wrappedColumnKeys" | "onWrappedColumnChange"> & import("@atlaskit/analytics-next").WithContextProps & import("react").RefAttributes<any>>;

package/dist/types/ui/datasource-table-view/types.d.ts

@@ -1,21 +1,10 @@
-export interface DatasourceTableViewProps {
+import { IssueLikeDataTableViewProps } from '../issue-like-table/types';
+export type DatasourceTableViewProps = {
     /** Unique identifier for which type of datasource is being rendered and for making its requests */
     datasourceId: string;
     /** Parameters for making the data requests necessary to render data within the table */
     parameters: object;
     fields?: string[];
-    /**
-     * Callback to be invoked whenever a user changes the visible columns in a datasource table
-     *
-     * @param visibleColumnKeys the array of keys for all of the selected columns
-     */
-    onVisibleColumnKeysChange?: (visibleColumnKeys: string[]) => void;
-    /** The array of keys for all of the columns to be shown in the table */
-    visibleColumnKeys?: string[];
     /** Url for an existing datasource, initially used for displaying to a user unauthorized to query that site  */
     url?: string;
-    columnCustomSizes?: {
-        [key: string]: number;
-    };
-    onColumnResize?: (key: string, width: number) => void;
-}
+} & Partial<Pick<IssueLikeDataTableViewProps, 'visibleColumnKeys'>> & Pick<IssueLikeDataTableViewProps, 'onVisibleColumnKeysChange' | 'wrappedColumnKeys' | 'onWrappedColumnChange' | 'onColumnResize' | 'columnCustomSizes'>;

package/dist/types/ui/issue-like-table/custom-icons.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { CustomGlyphProps } from '@atlaskit/icon';
+export declare const GlyphPlaceholder: (props: CustomGlyphProps) => JSX.Element;
+export declare const WrapTextIcon: () => JSX.Element;
+export declare const UnwrapTextIcon: () => JSX.Element;

package/dist/types/ui/issue-like-table/draggable-table-heading.d.ts

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { ReactNode } from 'react';
 import { jsx } from '@emotion/react';
-export declare const DraggableTableHeading: ({ children, id, index, tableId, dndPreviewHeight, dragPreview, width, onWidthChange, }: {
+interface DraggableTableHeadingProps {
     children: ReactNode;
     id: string;
     index: number;
@@ -9,5 +9,9 @@ export declare const DraggableTableHeading: ({ children, id, index, tableId, dnd
     dndPreviewHeight: number;
     dragPreview: React.ReactNode;
     width: number;
-    onWidthChange?: ((width: number) => void) | undefined;
-}) => jsx.JSX.Element;
+    onWidthChange?: (width: number) => void;
+    isWrapped?: boolean;
+    onIsWrappedChange?: (shouldWrap: boolean) => void;
+}
+export declare const DraggableTableHeading: ({ children, id, index, tableId, dndPreviewHeight, dragPreview, width, onWidthChange, isWrapped, onIsWrappedChange, }: DraggableTableHeadingProps) => jsx.JSX.Element;
+export {};

package/dist/types/ui/issue-like-table/index.d.ts

@@ -22,5 +22,5 @@ export interface RowCellType {
     content?: React.ReactNode | string;
 }
 export declare const getOrderedColumns: (columns: DatasourceResponseSchemaProperty[], visibleColumnKeys: string[]) => DatasourceResponseSchemaProperty[];
-export declare const IssueLikeDataTableView: ({ testId, onNextPage, onLoadDatasourceDetails, items, columns, renderItem, visibleColumnKeys, onVisibleColumnKeysChange, columnCustomSizes, onColumnResize, status, hasNextPage, scrollableContainerHeight, parentContainerRenderInstanceId, extensionKey, }: IssueLikeDataTableViewProps) => jsx.JSX.Element;
+export declare const IssueLikeDataTableView: ({ testId, onNextPage, onLoadDatasourceDetails, items, columns, renderItem, visibleColumnKeys, onVisibleColumnKeysChange, columnCustomSizes, onColumnResize, wrappedColumnKeys, onWrappedColumnChange, status, hasNextPage, scrollableContainerHeight, parentContainerRenderInstanceId, extensionKey, }: IssueLikeDataTableViewProps) => jsx.JSX.Element;
 export declare const EmptyState: ({ isCompact, testId }: import("./empty-state").Props) => jsx.JSX.Element;

package/dist/types/ui/issue-like-table/messages.d.ts

@@ -0,0 +1,12 @@
+export declare const issueLikeTableMessages: {
+    wrapText: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    unwrapText: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+};

package/dist/types/ui/issue-like-table/styled.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export declare const ScrollableContainerHeight = 590;
-export declare const FieldTextFontSize = "14px";
+export declare const fieldTextFontSize: "var(--ds-font-size-100)";
 export declare const Table: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

package/dist/types/ui/issue-like-table/types.d.ts

@@ -52,8 +52,10 @@ export interface IssueLikeDataTableViewProps {
      */
     renderItem?: TableViewPropsRenderType;
     /**
-     * Callback that is called in either column re-order or columns being selected/unselected
-     * @param visibleColumnKeys
+     * Callback to be invoked whenever a user changes the visible columns in a datasource table
+     * either by selecting/unselecting or reordering (drag and drop)
+     *
+     * @param visibleColumnKeys the array of keys for all of the selected columns
      */
     onVisibleColumnKeysChange?: (visibleColumnKeys: string[]) => void;
     /**
@@ -61,6 +63,20 @@ export interface IssueLikeDataTableViewProps {
      * It this number is undefined it will not restrict height and not make container scrollable.
      */
     scrollableContainerHeight?: number;
+    /**
+     * Map of column key to custom column width
+     */
     columnCustomSizes?: ColumnSizesMap;
     onColumnResize?: (key: string, width: number) => void;
+    /**
+     * List of column keys that needs to be shown without truncation (content will wrap to a new line)
+     */
+    wrappedColumnKeys?: string[];
+    /**
+     * Callback to be invoked whenever user changes wrap attribute of the column.
+     *
+     * @param key Column key
+     * @param shouldWrap  Whenever column should wrap
+     */
+    onWrappedColumnChange?: (key: string, shouldWrap: boolean) => void;
 }

package/dist/types-ts4.5/ui/datasource-table-view/datasourceTableView.d.ts

@@ -1,3 +1,7 @@
 /// <reference types="react" />
-import { DatasourceTableViewProps } from './types';
-export declare const DatasourceTableView: import("react").ForwardRefExoticComponent<DatasourceTableViewProps & import("@atlaskit/analytics-next").WithContextProps & import("react").RefAttributes<any>>;
+export declare const DatasourceTableView: import("react").ForwardRefExoticComponent<{
+    datasourceId: string;
+    parameters: object;
+    fields?: string[] | undefined;
+    url?: string | undefined;
+} & Partial<Pick<import("../issue-like-table/types").IssueLikeDataTableViewProps, "visibleColumnKeys">> & Pick<import("../issue-like-table/types").IssueLikeDataTableViewProps, "onVisibleColumnKeysChange" | "columnCustomSizes" | "onColumnResize" | "wrappedColumnKeys" | "onWrappedColumnChange"> & import("@atlaskit/analytics-next").WithContextProps & import("react").RefAttributes<any>>;

package/dist/types-ts4.5/ui/datasource-table-view/types.d.ts

@@ -1,21 +1,10 @@
-export interface DatasourceTableViewProps {
+import { IssueLikeDataTableViewProps } from '../issue-like-table/types';
+export type DatasourceTableViewProps = {
     /** Unique identifier for which type of datasource is being rendered and for making its requests */
     datasourceId: string;
     /** Parameters for making the data requests necessary to render data within the table */
     parameters: object;
     fields?: string[];
-    /**
-     * Callback to be invoked whenever a user changes the visible columns in a datasource table
-     *
-     * @param visibleColumnKeys the array of keys for all of the selected columns
-     */
-    onVisibleColumnKeysChange?: (visibleColumnKeys: string[]) => void;
-    /** The array of keys for all of the columns to be shown in the table */
-    visibleColumnKeys?: string[];
     /** Url for an existing datasource, initially used for displaying to a user unauthorized to query that site  */
     url?: string;
-    columnCustomSizes?: {
-        [key: string]: number;
-    };
-    onColumnResize?: (key: string, width: number) => void;
-}
+} & Partial<Pick<IssueLikeDataTableViewProps, 'visibleColumnKeys'>> & Pick<IssueLikeDataTableViewProps, 'onVisibleColumnKeysChange' | 'wrappedColumnKeys' | 'onWrappedColumnChange' | 'onColumnResize' | 'columnCustomSizes'>;

package/dist/types-ts4.5/ui/issue-like-table/custom-icons.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { CustomGlyphProps } from '@atlaskit/icon';
+export declare const GlyphPlaceholder: (props: CustomGlyphProps) => JSX.Element;
+export declare const WrapTextIcon: () => JSX.Element;
+export declare const UnwrapTextIcon: () => JSX.Element;

package/dist/types-ts4.5/ui/issue-like-table/draggable-table-heading.d.ts

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { ReactNode } from 'react';
 import { jsx } from '@emotion/react';
-export declare const DraggableTableHeading: ({ children, id, index, tableId, dndPreviewHeight, dragPreview, width, onWidthChange, }: {
+interface DraggableTableHeadingProps {
     children: ReactNode;
     id: string;
     index: number;
@@ -9,5 +9,9 @@ export declare const DraggableTableHeading: ({ children, id, index, tableId, dnd
     dndPreviewHeight: number;
     dragPreview: React.ReactNode;
     width: number;
-    onWidthChange?: ((width: number) => void) | undefined;
-}) => jsx.JSX.Element;
+    onWidthChange?: (width: number) => void;
+    isWrapped?: boolean;
+    onIsWrappedChange?: (shouldWrap: boolean) => void;
+}
+export declare const DraggableTableHeading: ({ children, id, index, tableId, dndPreviewHeight, dragPreview, width, onWidthChange, isWrapped, onIsWrappedChange, }: DraggableTableHeadingProps) => jsx.JSX.Element;
+export {};

package/dist/types-ts4.5/ui/issue-like-table/index.d.ts

@@ -22,5 +22,5 @@ export interface RowCellType {
     content?: React.ReactNode | string;
 }
 export declare const getOrderedColumns: (columns: DatasourceResponseSchemaProperty[], visibleColumnKeys: string[]) => DatasourceResponseSchemaProperty[];
-export declare const IssueLikeDataTableView: ({ testId, onNextPage, onLoadDatasourceDetails, items, columns, renderItem, visibleColumnKeys, onVisibleColumnKeysChange, columnCustomSizes, onColumnResize, status, hasNextPage, scrollableContainerHeight, parentContainerRenderInstanceId, extensionKey, }: IssueLikeDataTableViewProps) => jsx.JSX.Element;
+export declare const IssueLikeDataTableView: ({ testId, onNextPage, onLoadDatasourceDetails, items, columns, renderItem, visibleColumnKeys, onVisibleColumnKeysChange, columnCustomSizes, onColumnResize, wrappedColumnKeys, onWrappedColumnChange, status, hasNextPage, scrollableContainerHeight, parentContainerRenderInstanceId, extensionKey, }: IssueLikeDataTableViewProps) => jsx.JSX.Element;
 export declare const EmptyState: ({ isCompact, testId }: import("./empty-state").Props) => jsx.JSX.Element;

package/dist/types-ts4.5/ui/issue-like-table/messages.d.ts

@@ -0,0 +1,12 @@
+export declare const issueLikeTableMessages: {
+    wrapText: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    unwrapText: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+};

package/dist/types-ts4.5/ui/issue-like-table/styled.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export declare const ScrollableContainerHeight = 590;
-export declare const FieldTextFontSize = "14px";
+export declare const fieldTextFontSize: "var(--ds-font-size-100)";
 export declare const Table: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

package/dist/types-ts4.5/ui/issue-like-table/types.d.ts

@@ -52,8 +52,10 @@ export interface IssueLikeDataTableViewProps {
      */
     renderItem?: TableViewPropsRenderType;
     /**
-     * Callback that is called in either column re-order or columns being selected/unselected
-     * @param visibleColumnKeys
+     * Callback to be invoked whenever a user changes the visible columns in a datasource table
+     * either by selecting/unselecting or reordering (drag and drop)
+     *
+     * @param visibleColumnKeys the array of keys for all of the selected columns
      */
     onVisibleColumnKeysChange?: (visibleColumnKeys: string[]) => void;
     /**
@@ -61,6 +63,20 @@ export interface IssueLikeDataTableViewProps {
      * It this number is undefined it will not restrict height and not make container scrollable.
      */
     scrollableContainerHeight?: number;
+    /**
+     * Map of column key to custom column width
+     */
     columnCustomSizes?: ColumnSizesMap;
     onColumnResize?: (key: string, width: number) => void;
+    /**
+     * List of column keys that needs to be shown without truncation (content will wrap to a new line)
+     */
+    wrappedColumnKeys?: string[];
+    /**
+     * Callback to be invoked whenever user changes wrap attribute of the column.
+     *
+     * @param key Column key
+     * @param shouldWrap  Whenever column should wrap
+     */
+    onWrappedColumnChange?: (key: string, shouldWrap: boolean) => void;
 }

package/examples-helpers/buildIssueLikeTable.tsx

@@ -1,28 +1,26 @@
 /** @jsx jsx */
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo } from 'react';
 
 import { jsx } from '@emotion/react';
 import styled from '@emotion/styled';
 import { IntlProvider } from 'react-intl-next';
 
 import { SmartCardProvider } from '@atlaskit/link-provider';
-import {
-  defaultInitialVisibleColumnKeys,
-  mockDatasourceFetchRequests,
-} from '@atlaskit/link-test-helpers/datasource';
+import { mockDatasourceFetchRequests } from '@atlaskit/link-test-helpers/datasource';
 
 import { useDatasourceTableState } from '../src/hooks/useDatasourceTableState';
 import { IssueLikeDataTableView } from '../src/ui/issue-like-table';
-import { ColumnSizesMap } from '../src/ui/issue-like-table/types';
 import { JiraIssueDatasourceParameters } from '../src/ui/jira-issues-modal/types';
 
 import SmartLinkClient from './smartLinkCustomClient';
+import { useCommonTableProps } from './useCommonTableProps';
 
 mockDatasourceFetchRequests();
 
 interface Props {
   isReadonly?: boolean;
   canResizeColumns?: boolean;
+  canControlWrapping?: boolean;
 }
 
 const TableViewWrapper = styled.div`
@@ -33,7 +31,11 @@ const TableViewWrapper = styled.div`
   height: 100%;
 `;
 
-const ExampleBody = ({ isReadonly, canResizeColumns = true }: Props) => {
+const ExampleBody = ({
+  isReadonly,
+  canResizeColumns = true,
+  canControlWrapping = true,
+}: Props) => {
   const parameters = useMemo<JiraIssueDatasourceParameters>(
     () => ({
       cloudId: 'some-cloud-id',
@@ -55,26 +57,20 @@ const ExampleBody = ({ isReadonly, canResizeColumns = true }: Props) => {
     parameters,
   });
 
-  const [visibleColumnKeys, setVisibleColumnKeys] = useState<string[]>(
-    defaultInitialVisibleColumnKeys,
-  );
-
-  const [columnCustomSizes, setColumnCustomSizes] = useState<
-    ColumnSizesMap | undefined
-  >();
-
-  const onColumnResize = useCallback(
-    (key: string, width: number) => {
-      setColumnCustomSizes({ ...columnCustomSizes, [key]: width });
-    },
-    [columnCustomSizes],
-  );
+  const {
+    visibleColumnKeys,
+    onVisibleColumnKeysChange,
+    columnCustomSizes,
+    onColumnResize,
+    wrappedColumnKeys,
+    onWrappedColumnChange,
+  } = useCommonTableProps();
 
   useEffect(() => {
     if (visibleColumnKeys.length === 0 && defaultVisibleColumnKeys.length > 0) {
-      setVisibleColumnKeys(defaultVisibleColumnKeys);
+      onVisibleColumnKeysChange(defaultVisibleColumnKeys);
     }
-  }, [visibleColumnKeys, defaultVisibleColumnKeys, setVisibleColumnKeys]);
+  }, [visibleColumnKeys, defaultVisibleColumnKeys, onVisibleColumnKeysChange]);
 
   return (
     <TableViewWrapper>
@@ -89,12 +85,16 @@ const ExampleBody = ({ isReadonly, canResizeColumns = true }: Props) => {
           columns={columns}
           visibleColumnKeys={visibleColumnKeys}
           onVisibleColumnKeysChange={
-            isReadonly ? undefined : setVisibleColumnKeys
+            isReadonly ? undefined : onVisibleColumnKeysChange
           }
           onColumnResize={
             isReadonly || !canResizeColumns ? undefined : onColumnResize
           }
           columnCustomSizes={columnCustomSizes}
+          onWrappedColumnChange={
+            canControlWrapping ? onWrappedColumnChange : undefined
+          }
+          wrappedColumnKeys={wrappedColumnKeys}
         />
       ) : (
         <span>Loading ...</span>
@@ -106,6 +106,7 @@ const ExampleBody = ({ isReadonly, canResizeColumns = true }: Props) => {
 export const ExampleIssueLikeTable = ({
   isReadonly,
   canResizeColumns,
+  canControlWrapping,
 }: Props) => {
   return (
     <IntlProvider locale="en">
@@ -113,6 +114,7 @@ export const ExampleIssueLikeTable = ({
         <ExampleBody
           isReadonly={isReadonly}
           canResizeColumns={canResizeColumns}
+          canControlWrapping={canControlWrapping}
         />
       </SmartCardProvider>
     </IntlProvider>

package/examples-helpers/buildJiraIssuesTable.tsx

@@ -1,19 +1,16 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo } from 'react';
 
 import { IntlProvider } from 'react-intl-next';
 
 import { SmartCardProvider } from '@atlaskit/link-provider';
-import {
-  defaultInitialVisibleColumnKeys,
-  mockDatasourceFetchRequests,
-} from '@atlaskit/link-test-helpers/datasource';
+import { mockDatasourceFetchRequests } from '@atlaskit/link-test-helpers/datasource';
 import { DatasourceParameters } from '@atlaskit/linking-types';
 
 import { DatasourceTableView } from '../src';
-import { ColumnSizesMap } from '../src/ui/issue-like-table/types';
 import { JiraIssueDatasourceParameters } from '../src/ui/jira-issues-modal/types';
 
 import SmartLinkClient from './smartLinkCustomClient';
+import { useCommonTableProps } from './useCommonTableProps';
 
 interface JiraIssuesTableViewProps {
   parameters?: DatasourceParameters;
@@ -23,10 +20,6 @@ interface JiraIssuesTableViewProps {
 const JiraIssuesTableView = ({ parameters }: JiraIssuesTableViewProps) => {
   const cloudId = parameters?.cloudId || 'some-cloud-id';
 
-  const [visibleColumnKeys, setVisibleColumnKeys] = useState<string[]>(
-    defaultInitialVisibleColumnKeys,
-  );
-
   const datasourceParameters = useMemo<JiraIssueDatasourceParameters>(
     () => ({
       cloudId,
@@ -35,27 +28,29 @@ const JiraIssuesTableView = ({ parameters }: JiraIssuesTableViewProps) => {
     [cloudId],
   );
 
-  const [columnCustomSizes, setColumnCustomSizes] = useState<
-    ColumnSizesMap | undefined
-  >({
-    people: 100,
-  });
-
-  const onColumnResize = useCallback(
-    (key: string, width: number) => {
-      setColumnCustomSizes({ ...columnCustomSizes, [key]: width });
+  const {
+    visibleColumnKeys,
+    onVisibleColumnKeysChange,
+    columnCustomSizes,
+    onColumnResize,
+    wrappedColumnKeys,
+    onWrappedColumnChange,
+  } = useCommonTableProps({
+    defaultColumnCustomSizes: {
+      people: 100,
     },
-    [columnCustomSizes],
-  );
+  });
 
   return (
     <DatasourceTableView
       datasourceId={'some-datasource-id'}
       parameters={datasourceParameters}
       visibleColumnKeys={visibleColumnKeys}
-      onVisibleColumnKeysChange={setVisibleColumnKeys}
+      onVisibleColumnKeysChange={onVisibleColumnKeysChange}
       columnCustomSizes={columnCustomSizes}
       onColumnResize={onColumnResize}
+      onWrappedColumnChange={onWrappedColumnChange}
+      wrappedColumnKeys={wrappedColumnKeys}
     />
   );
 };

package/examples-helpers/useCommonTableProps.tsx

@@ -0,0 +1,57 @@
+import { useCallback, useState } from 'react';
+
+import { defaultInitialVisibleColumnKeys } from '@atlaskit/link-test-helpers/datasource';
+
+import { DatasourceTableViewProps } from '../src/ui/datasource-table-view/types';
+import { ColumnSizesMap } from '../src/ui/issue-like-table/types';
+
+export const useCommonTableProps = (
+  props: { defaultColumnCustomSizes?: ColumnSizesMap } = {},
+): Required<
+  Pick<
+    DatasourceTableViewProps,
+    | 'visibleColumnKeys'
+    | 'onVisibleColumnKeysChange'
+    | 'wrappedColumnKeys'
+    | 'onWrappedColumnChange'
+    | 'onColumnResize'
+  >
+> &
+  Pick<DatasourceTableViewProps, 'columnCustomSizes'> => {
+  const [visibleColumnKeys, onVisibleColumnKeysChange] = useState<string[]>(
+    defaultInitialVisibleColumnKeys,
+  );
+
+  const [columnCustomSizes, setColumnCustomSizes] = useState<
+    ColumnSizesMap | undefined
+  >(props.defaultColumnCustomSizes);
+
+  const onColumnResize = useCallback(
+    (key: string, width: number) => {
+      setColumnCustomSizes({ ...columnCustomSizes, [key]: width });
+    },
+    [columnCustomSizes],
+  );
+
+  const [wrappedColumnKeys, setWrappedColumnKeys] = useState<string[]>([]);
+
+  const onWrappedColumnChange = useCallback(
+    (key: string, shouldWrap: boolean) => {
+      if (shouldWrap) {
+        setWrappedColumnKeys([...wrappedColumnKeys, key]);
+      } else {
+        setWrappedColumnKeys(wrappedColumnKeys.filter(k => k !== key));
+      }
+    },
+    [wrappedColumnKeys],
+  );
+
+  return {
+    visibleColumnKeys,
+    onVisibleColumnKeysChange,
+    columnCustomSizes,
+    onColumnResize,
+    wrappedColumnKeys,
+    onWrappedColumnChange,
+  };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-datasource",
-  "version": "1.22.8",
+  "version": "1.23.0",
   "description": "UI Components to support linking platform dataset feature",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -61,7 +61,7 @@
     "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.0.0",
     "@atlaskit/primitives": "^2.1.0",
     "@atlaskit/select": "^17.1.0",
-    "@atlaskit/smart-card": "^26.47.0",
+    "@atlaskit/smart-card": "^26.48.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/tag": "^12.0.0",
     "@atlaskit/textfield": "6.0.1",