@atlaskit/media-table 14.0.0 → 14.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/media-table
2
2
 
3
+ ## 14.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`2c1a0c45a0b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2c1a0c45a0b) - [ux] Instrumented `@atlaskit/media-table` with the new theming package, `@atlaskit/tokens`.
8
+
9
+ New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
10
+ These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
11
+
12
+ ### Patch Changes
13
+
14
+ - [`7fc3932cc78`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7fc3932cc78) - [ux] Removed hover and focus state styling as the base component applies those already.
15
+ - Updated dependencies
16
+
3
17
  ## 14.0.0
4
18
 
5
19
  ### Major Changes
@@ -9,6 +9,8 @@ exports.default = void 0;
9
9
 
10
10
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
11
 
12
+ var _tokens = require("@atlaskit/tokens");
13
+
12
14
  var _react = _interopRequireDefault(require("react"));
13
15
 
14
16
  var _reactIntlNext = require("react-intl-next");
@@ -54,7 +56,7 @@ var MediaDownloadButton = function MediaDownloadButton(props) {
54
56
  buttonStyles: _objectSpread(_objectSpread({}, current(themeProps).buttonStyles), {}, {
55
57
  minWidth: 'max-content',
56
58
  '&:hover': {
57
- background: _colors.N40
59
+ background: (0, _tokens.token)('color.background.neutral.hovered', _colors.N40)
58
60
  }
59
61
  }),
60
62
  spinnerStyles: current(themeProps).spinnerStyles
@@ -13,8 +13,6 @@ var _react = _interopRequireDefault(require("react"));
13
13
 
14
14
  var _reactIntlNext = require("react-intl-next");
15
15
 
16
- var _colors = require("@atlaskit/theme/colors");
17
-
18
16
  var _filePreview = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/file-preview"));
19
17
 
20
18
  var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
@@ -52,10 +50,7 @@ var MediaPreviewButton = function MediaPreviewButton(props) {
52
50
  theme: function theme(current, themeProps) {
53
51
  return {
54
52
  buttonStyles: _objectSpread(_objectSpread({}, current(themeProps).buttonStyles), {}, {
55
- minWidth: 'max-content',
56
- '&:hover': {
57
- background: _colors.N40
58
- }
53
+ minWidth: 'max-content'
59
54
  }),
60
55
  spinnerStyles: current(themeProps).spinnerStyles
61
56
  };
@@ -11,13 +11,11 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
11
11
 
12
12
  var _react = require("@emotion/react");
13
13
 
14
- var _colors = require("@atlaskit/theme/colors");
15
-
16
14
  var _templateObject, _templateObject2, _templateObject3;
17
15
 
18
16
  var nameCellWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-content: center;\n align-items: center;\n"])));
19
17
  exports.nameCellWrapperStyles = nameCellWrapperStyles;
20
18
  var truncateWrapperStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n min-width: 0;\n width: 100%;\n margin-left: 4px;\n\n span:first-of-type {\n &::first-letter {\n text-transform: capitalize;\n }\n }\n"])));
21
19
  exports.truncateWrapperStyles = truncateWrapperStyles;
22
- var mediaTableWrapperStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n tr {\n cursor: pointer;\n\n &:hover,\n &:focus {\n background: ", ";\n }\n\n td:empty {\n padding: 0;\n }\n }\n"])), _colors.N20);
20
+ var mediaTableWrapperStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n tr {\n cursor: pointer;\n\n td:empty {\n padding: 0;\n }\n }\n"])));
23
21
  exports.mediaTableWrapperStyles = mediaTableWrapperStyles;
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/media-table",
3
- "version": "14.0.0",
3
+ "version": "14.1.0",
4
4
  "sideEffects": false
5
5
  }
@@ -1,3 +1,4 @@
1
+ import { token } from '@atlaskit/tokens';
1
2
  import React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies
2
3
 
3
4
  import { injectIntl } from 'react-intl-next';
@@ -33,7 +34,7 @@ const MediaDownloadButton = props => {
33
34
  buttonStyles: { ...current(themeProps).buttonStyles,
34
35
  minWidth: 'max-content',
35
36
  '&:hover': {
36
- background: N40
37
+ background: token('color.background.neutral.hovered', N40)
37
38
  }
38
39
  },
39
40
  spinnerStyles: current(themeProps).spinnerStyles
@@ -1,7 +1,6 @@
1
1
  import React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies
2
2
 
3
3
  import { injectIntl } from 'react-intl-next';
4
- import { N40 } from '@atlaskit/theme/colors';
5
4
  import EditorFilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
6
5
  import Button from '@atlaskit/button/custom-theme-button';
7
6
  import { messages } from '@atlaskit/media-ui'; // eslint-disable-next-line import/no-extraneous-dependencies
@@ -31,10 +30,7 @@ const MediaPreviewButton = props => {
31
30
  },
32
31
  theme: (current, themeProps) => ({
33
32
  buttonStyles: { ...current(themeProps).buttonStyles,
34
- minWidth: 'max-content',
35
- '&:hover': {
36
- background: N40
37
- }
33
+ minWidth: 'max-content'
38
34
  },
39
35
  spinnerStyles: current(themeProps).spinnerStyles
40
36
  })
@@ -1,5 +1,4 @@
1
1
  import { css } from '@emotion/react';
2
- import { N20 } from '@atlaskit/theme/colors';
3
2
  export const nameCellWrapperStyles = css`
4
3
  display: flex;
5
4
  align-content: center;
@@ -20,11 +19,6 @@ export const mediaTableWrapperStyles = css`
20
19
  tr {
21
20
  cursor: pointer;
22
21
 
23
- &:hover,
24
- &:focus {
25
- background: ${N20};
26
- }
27
-
28
22
  td:empty {
29
23
  padding: 0;
30
24
  }
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/media-table",
3
- "version": "14.0.0",
3
+ "version": "14.1.0",
4
4
  "sideEffects": false
5
5
  }
@@ -4,6 +4,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
4
4
 
5
5
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
6
6
 
7
+ import { token } from '@atlaskit/tokens';
7
8
  import React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies
8
9
 
9
10
  import { injectIntl } from 'react-intl-next';
@@ -41,7 +42,7 @@ var MediaDownloadButton = function MediaDownloadButton(props) {
41
42
  buttonStyles: _objectSpread(_objectSpread({}, current(themeProps).buttonStyles), {}, {
42
43
  minWidth: 'max-content',
43
44
  '&:hover': {
44
- background: N40
45
+ background: token('color.background.neutral.hovered', N40)
45
46
  }
46
47
  }),
47
48
  spinnerStyles: current(themeProps).spinnerStyles
@@ -7,7 +7,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
7
7
  import React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies
8
8
 
9
9
  import { injectIntl } from 'react-intl-next';
10
- import { N40 } from '@atlaskit/theme/colors';
11
10
  import EditorFilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
12
11
  import Button from '@atlaskit/button/custom-theme-button';
13
12
  import { messages } from '@atlaskit/media-ui'; // eslint-disable-next-line import/no-extraneous-dependencies
@@ -39,10 +38,7 @@ var MediaPreviewButton = function MediaPreviewButton(props) {
39
38
  theme: function theme(current, themeProps) {
40
39
  return {
41
40
  buttonStyles: _objectSpread(_objectSpread({}, current(themeProps).buttonStyles), {}, {
42
- minWidth: 'max-content',
43
- '&:hover': {
44
- background: N40
45
- }
41
+ minWidth: 'max-content'
46
42
  }),
47
43
  spinnerStyles: current(themeProps).spinnerStyles
48
44
  };
@@ -3,7 +3,6 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
3
3
  var _templateObject, _templateObject2, _templateObject3;
4
4
 
5
5
  import { css } from '@emotion/react';
6
- import { N20 } from '@atlaskit/theme/colors';
7
6
  export var nameCellWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n align-content: center;\n align-items: center;\n"])));
8
7
  export var truncateWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n min-width: 0;\n width: 100%;\n margin-left: 4px;\n\n span:first-of-type {\n &::first-letter {\n text-transform: capitalize;\n }\n }\n"])));
9
- export var mediaTableWrapperStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n tr {\n cursor: pointer;\n\n &:hover,\n &:focus {\n background: ", ";\n }\n\n td:empty {\n padding: 0;\n }\n }\n"])), N20);
8
+ export var mediaTableWrapperStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n tr {\n cursor: pointer;\n\n td:empty {\n padding: 0;\n }\n }\n"])));
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/media-table",
3
- "version": "14.0.0",
3
+ "version": "14.1.0",
4
4
  "sideEffects": false
5
5
  }
@@ -1,3 +1,4 @@
1
+ import { token } from '@atlaskit/tokens';
1
2
  import { css } from '@emotion/react';
2
3
  // AFP-2532 TODO: Fix automatic suppressions below
3
4
  // eslint-disable-next-line @atlassian/tangerine/import/entry-points
@@ -12,20 +13,26 @@ export const exampleWrapperStyles = css`
12
13
  align-items: center;
13
14
 
14
15
  .${ROW_HIGHLIGHT_CLASSNAME} {
15
- background-color: ${colors.Y50};
16
+ background-color: ${token('color.background.warning', colors.Y50)};
16
17
 
17
18
  &:hover {
18
- background-color: ${colors.Y75};
19
+ background-color: ${token(
20
+ 'color.background.warning.hovered',
21
+ colors.Y75,
22
+ )};
19
23
  }
20
24
  }
21
25
  `;
22
26
 
23
27
  export const greenOnHoverStyles = css`
24
- background-color: red;
28
+ background-color: ${token('color.background.danger.bold', 'red')};
25
29
  height: 8px;
26
30
  width: 8px;
27
31
 
28
32
  .${ROW_CLASSNAME}:hover & {
29
- background-color: green;
33
+ background-color: ${token(
34
+ 'color.background.success.bold.hovered',
35
+ 'green',
36
+ )};
30
37
  }
31
38
  `;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/media-table",
3
- "version": "14.0.0",
3
+ "version": "14.1.0",
4
4
  "description": "Table UI component",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -12,13 +12,6 @@
12
12
  "module": "dist/esm/index.js",
13
13
  "module:es2019": "dist/es2019/index.js",
14
14
  "types": "dist/types/index.d.ts",
15
- "typesVersions": {
16
- ">=4.0 <4.5": {
17
- "*": [
18
- "dist/types-ts4.0/*"
19
- ]
20
- }
21
- },
22
15
  "sideEffects": false,
23
16
  "atlaskit:src": "src/index.ts",
24
17
  "af:exports": {
@@ -34,13 +27,14 @@
34
27
  },
35
28
  "dependencies": {
36
29
  "@atlaskit/analytics-next": "^8.0.0",
37
- "@atlaskit/button": "^16.3.0",
30
+ "@atlaskit/button": "^16.5.0",
38
31
  "@atlaskit/dynamic-table": "^14.8.0",
39
32
  "@atlaskit/icon": "^21.11.0",
40
- "@atlaskit/media-client": "^18.0.0",
41
- "@atlaskit/media-ui": "^22.1.0",
42
- "@atlaskit/media-viewer": "^47.1.0",
33
+ "@atlaskit/media-client": "^19.0.0",
34
+ "@atlaskit/media-ui": "^22.2.0",
35
+ "@atlaskit/media-viewer": "^47.2.0",
43
36
  "@atlaskit/theme": "^12.2.0",
37
+ "@atlaskit/tokens": "^0.11.1",
44
38
  "@atlaskit/tooltip": "^17.6.0",
45
39
  "@babel/runtime": "^7.0.0",
46
40
  "memoize-one": "^6.0.0"
@@ -55,10 +49,10 @@
55
49
  "devDependencies": {
56
50
  "@atlaskit/docs": "^9.0.0",
57
51
  "@atlaskit/icon-file-type": "^6.3.0",
58
- "@atlaskit/media-common": "^2.16.0",
52
+ "@atlaskit/media-common": "^2.17.0",
59
53
  "@atlaskit/media-core": "^34.0.0",
60
54
  "@atlaskit/media-test-helpers": "^30.0.0",
61
- "@atlaskit/range": "^6.1.0",
55
+ "@atlaskit/range": "^7.0.0",
62
56
  "@atlaskit/ssr": "*",
63
57
  "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
64
58
  "@emotion/react": "^11.7.1",
@@ -68,6 +62,11 @@
68
62
  "react-dom": "^16.8.0",
69
63
  "typescript": "4.5.5"
70
64
  },
65
+ "techstack": {
66
+ "@repo/internal": {
67
+ "theming": "tokens"
68
+ }
69
+ },
71
70
  "resolutions": {},
72
71
  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
73
72
  }
package/report.api.md CHANGED
@@ -1,8 +1,17 @@
1
- ## API Report File for "@atlaskit/media-table".
1
+ <!-- API Report Version: 2.2 -->
2
2
 
3
- > Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
3
+ ## API Report File for "@atlaskit/media-table"
4
4
 
5
- [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
5
+ > Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
6
+ > [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
7
+
8
+ ### Table of contents
9
+
10
+ - [Main Entry Types](#main-entry-types)
11
+
12
+ ### Main Entry Types
13
+
14
+ <!--SECTION START: Main Entry Types-->
6
15
 
7
16
  ```ts
8
17
  /// <reference types="react" />
@@ -21,71 +30,74 @@ import { WithIntlProps } from 'react-intl-next';
21
30
  import { WithMediaClientConfigProps } from '@atlaskit/media-client';
22
31
  import { WrappedComponentProps } from 'react-intl-next';
23
32
 
24
- export declare const MediaTable: React_2.ComponentType<WithMediaClientConfigProps<
25
- Omit<
26
- React_2.PropsWithChildren<
27
- WithIntlProps<MediaTableProps & WrappedComponentProps<'intl'>>
28
- >,
29
- keyof WithAnalyticsEventsProps
30
- > &
31
- React_2.RefAttributes<any>
32
- >>;
33
-
34
- export declare interface MediaTableItem {
33
+ // @public (undocumented)
34
+ export const MediaTable: React_2.ComponentType<
35
+ WithMediaClientConfigProps<
36
+ Omit<
37
+ React_2.PropsWithChildren<
38
+ WithIntlProps<MediaTableProps & WrappedComponentProps<'intl'>>
39
+ >,
40
+ keyof WithAnalyticsEventsProps
41
+ > &
42
+ React_2.RefAttributes<any>
43
+ >
44
+ >;
45
+
46
+ // @public (undocumented)
47
+ export interface MediaTableItem {
48
+ // (undocumented)
35
49
  data: RowData;
50
+ // (undocumented)
36
51
  identifier: FileIdentifier;
37
- /** An object containing props that will be applied to the row component */
38
52
  rowProps?: RowProps;
39
53
  }
40
54
 
41
- export declare interface MediaTableProps {
42
- /** The table rows to display in the current page */
43
- items: MediaTableItem[];
44
- mediaClient: MediaClient;
45
- /** Object describing the column headings */
55
+ // @public (undocumented)
56
+ export interface MediaTableProps {
46
57
  columns: HeadType;
47
- /** The total number of table rows. This is used to calculate pagination */
48
- totalItems: number;
49
- /** The maximum number of rows per page. No maximum by default */
58
+ // (undocumented)
59
+ createAnalyticsEvent: CreateUIAnalyticsEvent;
60
+ highlightedRowIndex?: number[];
61
+ isLoading?: boolean;
62
+ items: MediaTableItem[];
50
63
  itemsPerPage?: number;
51
- /** The current page number */
64
+ // (undocumented)
65
+ mediaClient: MediaClient;
66
+ onPreviewClose?: () => void;
67
+ onPreviewOpen?: () => void;
68
+ onRowClick?: (rowData: RowData, index: number) => boolean;
69
+ onSetPage?: (pageNumber: number) => void;
70
+ onSort?: (key: string, sortOrder: SortOrderType) => void;
52
71
  pageNumber?: number;
53
- /** The property that the table items are sorted by. This must match a key in columns.cells */
54
72
  sortKey?: string;
55
- /** The direction that the table items are sorted in - ascending or descending */
56
73
  sortOrder?: SortOrderType;
57
- /** Whether to show the loading state or not */
58
- isLoading?: boolean;
59
- /** Called when a pagination control is clicked. Provides the new page number to paginate by */
60
- onSetPage?: (pageNumber: number) => void;
61
- /** Called when a column header is clicked. Provides the key of the column and the new sortOrder to sort by */
62
- onSort?: (key: string, sortOrder: SortOrderType) => void;
63
- createAnalyticsEvent: CreateUIAnalyticsEvent;
64
- /** Called when the preview is opened by the user clicking on an item in the table */
65
- onPreviewOpen?: () => void;
66
- /** Called when the preview is closed */
67
- onPreviewClose?: () => void;
68
- /** Row index that will be highlighted **/
69
- highlightedRowIndex?: number[];
70
- /** callback triggered when row click is passed, if returned true it will prevent default behaviour. **/
71
- onRowClick?: (rowData: RowData, index: number) => boolean;
74
+ totalItems: number;
72
75
  }
73
76
 
74
- export declare const NameCell: FC<NameCellProps>;
77
+ // @public (undocumented)
78
+ export const NameCell: FC<NameCellProps>;
75
79
 
76
- export declare interface NameCellProps extends TruncateProps {
80
+ // @public (undocumented)
81
+ export interface NameCellProps extends TruncateProps {
82
+ // (undocumented)
77
83
  mediaType?: MediaType;
78
84
  }
79
85
 
80
- declare interface RowData {
81
- [key: string]: string | React.ReactNode;
86
+ // @public (undocumented)
87
+ interface RowData {
88
+ // (undocumented)
89
+ [key: string]: React.ReactNode | string;
82
90
  }
83
91
 
84
- declare interface RowProps {
92
+ // @public (undocumented)
93
+ interface RowProps {
94
+ // (undocumented)
85
95
  className?: string;
86
96
  }
87
97
 
88
98
  export { SortOrderType };
89
99
 
90
- export {};
100
+ // (No @packageDocumentation comment for this package)
91
101
  ```
102
+
103
+ <!--SECTION END: Main Entry Types-->
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- import { WrappedComponentProps } from 'react-intl-next';
3
- interface Props {
4
- onClick: (event: React.MouseEvent<HTMLElement>) => void;
5
- }
6
- declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
7
- WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
8
- };
9
- export default _default;
@@ -1,28 +0,0 @@
1
- /**@jsx jsx */
2
- import { jsx } from '@emotion/react';
3
- import React, { Component } from 'react';
4
- import { WrappedComponentProps } from 'react-intl-next';
5
- import { MediaTableProps, MediaTableState } from '../types';
6
- export declare class MediaTable extends Component<MediaTableProps & WrappedComponentProps, MediaTableState> {
7
- state: MediaTableState;
8
- private subscriptions;
9
- private hasBeenMounted;
10
- componentDidMount(): void;
11
- private unsubscribe;
12
- componentWillUnmount(): void;
13
- private generateCellValues;
14
- private onDownloadClick;
15
- private onPreviewClick;
16
- private onSort;
17
- private renderRowValues;
18
- private renderTable;
19
- private openPreview;
20
- private onRowEnterKeyPressed;
21
- private onRowClick;
22
- private safeSetState;
23
- private onMediaViewerClose;
24
- private renderMediaViewer;
25
- render(): jsx.JSX.Element;
26
- }
27
- declare const _default: React.ComponentType<import("@atlaskit/media-client").WithMediaClientConfigProps<Omit<React.PropsWithChildren<import("react-intl-next").WithIntlProps<MediaTableProps & WrappedComponentProps<"intl">>>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any>>>;
28
- export default _default;
@@ -1,7 +0,0 @@
1
- import { FC } from 'react';
2
- import { MediaType } from '@atlaskit/media-client';
3
- import { TruncateProps } from '@atlaskit/media-ui/truncateText';
4
- export interface NameCellProps extends TruncateProps {
5
- mediaType?: MediaType;
6
- }
7
- export declare const NameCell: FC<NameCellProps>;
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- import { WrappedComponentProps } from 'react-intl-next';
3
- interface Props {
4
- onClick: (event: React.MouseEvent<HTMLElement>) => void;
5
- }
6
- declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
7
- WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
8
- };
9
- export default _default;
@@ -1,3 +0,0 @@
1
- export declare const nameCellWrapperStyles: import("@emotion/react").SerializedStyles;
2
- export declare const truncateWrapperStyles: import("@emotion/react").SerializedStyles;
3
- export declare const mediaTableWrapperStyles: import("@emotion/react").SerializedStyles;
@@ -1,4 +0,0 @@
1
- export { default as MediaTable } from './component/mediaTable';
2
- export type { MediaTableProps, MediaTableItem, SortOrderType } from './types';
3
- export { NameCell } from './component/nameCell';
4
- export type { NameCellProps } from './component/nameCell';
@@ -1,73 +0,0 @@
1
- /// <reference types="react" />
2
- import { Identifier, FileIdentifier, MediaClient } from '@atlaskit/media-client';
3
- import { HeadType } from '@atlaskit/dynamic-table/types';
4
- import { SortOrderType } from '@atlaskit/dynamic-table/types';
5
- import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
6
- export type { SortOrderType };
7
- export interface FileInfo {
8
- fileName: string;
9
- id: string;
10
- }
11
- export interface RowData {
12
- [key: string]: string | React.ReactNode;
13
- }
14
- export interface RowProps {
15
- className?: string;
16
- }
17
- export interface MediaTableItem {
18
- data: RowData;
19
- identifier: FileIdentifier;
20
- /** An object containing props that will be applied to the row component */
21
- rowProps?: RowProps;
22
- }
23
- export interface OnSortData {
24
- key: string;
25
- sortOrder: SortOrderType;
26
- item: {
27
- content: React.ReactNode | string;
28
- isSortable: boolean;
29
- key: string;
30
- width: number;
31
- };
32
- }
33
- export interface MediaTableProps {
34
- /** The table rows to display in the current page */
35
- items: MediaTableItem[];
36
- mediaClient: MediaClient;
37
- /** Object describing the column headings */
38
- columns: HeadType;
39
- /** The total number of table rows. This is used to calculate pagination */
40
- totalItems: number;
41
- /** The maximum number of rows per page. No maximum by default */
42
- itemsPerPage?: number;
43
- /** The current page number */
44
- pageNumber?: number;
45
- /** The property that the table items are sorted by. This must match a key in columns.cells */
46
- sortKey?: string;
47
- /** The direction that the table items are sorted in - ascending or descending */
48
- sortOrder?: SortOrderType;
49
- /** Whether to show the loading state or not */
50
- isLoading?: boolean;
51
- /** Called when a pagination control is clicked. Provides the new page number to paginate by */
52
- onSetPage?: (pageNumber: number) => void;
53
- /** Called when a column header is clicked. Provides the key of the column and the new sortOrder to sort by */
54
- onSort?: (key: string, sortOrder: SortOrderType) => void;
55
- createAnalyticsEvent: CreateUIAnalyticsEvent;
56
- /** Called when the preview is opened by the user clicking on an item in the table */
57
- onPreviewOpen?: () => void;
58
- /** Called when the preview is closed */
59
- onPreviewClose?: () => void;
60
- /** Row index that will be highlighted **/
61
- highlightedRowIndex?: number[];
62
- /** callback triggered when row click is passed, if returned true it will prevent default behaviour. **/
63
- onRowClick?: (rowData: RowData, index: number) => boolean;
64
- }
65
- export interface MediaTableState {
66
- mediaViewerSelectedItem?: Identifier;
67
- fileInfoState: Map<string, FileInfo>;
68
- }
69
- export interface ValidatedProps {
70
- validPageNumber: number;
71
- validTotalItems: number;
72
- validItemsPerPage: number;
73
- }
@@ -1,3 +0,0 @@
1
- export declare const CELL_KEY_DOWNLOAD = "download";
2
- export declare const CELL_KEY_PREVIEW = "preview";
3
- export declare const ANALYTICS_MEDIA_CHANNEL = "media";
@@ -1,3 +0,0 @@
1
- import { HeadType } from '@atlaskit/dynamic-table/types';
2
- declare const _default: import("memoize-one").MemoizedFn<import("memoize-one").MemoizedFn<(columns: HeadType) => HeadType>>;
3
- export default _default;
@@ -1,11 +0,0 @@
1
- import { RowType, HeadCellType, RowCellType } from '@atlaskit/dynamic-table/types';
2
- export declare const generateEmptyRow: import("memoize-one").MemoizedFn<(headerCells: HeadCellType[]) => RowCellType[]>;
3
- export declare const prependRows: import("memoize-one").MemoizedFn<(emptyCells: RowCellType[], itemsPerPage?: number | undefined, pageNumber?: number | undefined) => RowType[]>;
4
- export declare const appendRows: import("memoize-one").MemoizedFn<(emptyCells: RowCellType[], rowsLength: number, itemsPerPage?: number | undefined, pageNumber?: number | undefined, totalItems?: number | undefined) => RowType[]>;
5
- export default function generateRowValues({ itemsPerPage, pageNumber, totalItems, rowValues, headerCells, }: {
6
- itemsPerPage?: number;
7
- pageNumber?: number;
8
- totalItems?: number;
9
- rowValues: RowType[];
10
- headerCells: HeadCellType[];
11
- }): RowType[];
@@ -1,3 +0,0 @@
1
- import { ValidatedProps } from '../types';
2
- declare const _default: import("memoize-one").MemoizedFn<(itemsCount: number, itemsPerPage?: number | undefined, pageNumber?: number | undefined, totalItems?: number | undefined) => ValidatedProps>;
3
- export default _default;
@@ -1,4 +0,0 @@
1
- export { default as generateRowValues } from './generateRowValues';
2
- export { default as getValidTableProps } from './getValidTableProps';
3
- export { default as generateHeadValues } from './generateHeadValues';
4
- export { CELL_KEY_DOWNLOAD, CELL_KEY_PREVIEW, ANALYTICS_MEDIA_CHANNEL, } from './constants';