@synerise/ds-table 1.9.11 → 1.9.13
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 +8 -0
- package/dist/Cell/Action/ActionCell.d.ts +2 -2
- package/dist/Cell/Action/ActionCell.js +15 -18
- package/dist/Cell/Action/ActionCell.styles.d.ts +2 -2
- package/dist/Cell/Action/ActionCell.styles.js +10 -11
- package/dist/Cell/Action/ActionCell.types.d.ts +2 -2
- package/dist/Cell/Action/ActionCell.types.js +1 -1
- package/dist/Cell/AvatarLabel/AvatarLabel.d.ts +2 -2
- package/dist/Cell/AvatarLabel/AvatarLabel.js +32 -43
- package/dist/Cell/AvatarLabel/AvatarLabel.styles.d.ts +13 -13
- package/dist/Cell/AvatarLabel/AvatarLabel.styles.js +27 -28
- package/dist/Cell/AvatarLabel/AvatarLabel.types.d.ts +2 -2
- package/dist/Cell/AvatarLabel/AvatarLabel.types.js +1 -1
- package/dist/Cell/Copyable/Copyable.styles.d.ts +2 -2
- package/dist/Cell/Copyable/Copyable.styles.js +9 -15
- package/dist/Cell/Copyable/Copyable.types.d.ts +1 -1
- package/dist/Cell/Copyable/Copyable.types.js +1 -1
- package/dist/Cell/Copyable/CopyableCell.d.ts +2 -2
- package/dist/Cell/Copyable/CopyableCell.js +23 -27
- package/dist/Cell/Editable/EditableCell.d.ts +2 -2
- package/dist/Cell/Editable/EditableCell.js +26 -39
- package/dist/Cell/Editable/EditableCell.styles.d.ts +2 -2
- package/dist/Cell/Editable/EditableCell.styles.js +9 -7
- package/dist/Cell/Editable/EditableCell.types.d.ts +1 -1
- package/dist/Cell/Editable/EditableCell.types.js +1 -1
- package/dist/Cell/FlagLabel/FlagLabelCell.d.ts +2 -2
- package/dist/Cell/FlagLabel/FlagLabelCell.js +15 -14
- package/dist/Cell/FlagLabel/FlagLabelCell.styles.d.ts +1 -1
- package/dist/Cell/FlagLabel/FlagLabelCell.styles.js +6 -3
- package/dist/Cell/FlagLabel/FlagLabelCell.types.d.ts +2 -2
- package/dist/Cell/FlagLabel/FlagLabelCell.types.js +1 -1
- package/dist/Cell/IconLabel/IconLabel.d.ts +2 -2
- package/dist/Cell/IconLabel/IconLabel.js +14 -15
- package/dist/Cell/IconLabel/IconLabel.styles.d.ts +1 -1
- package/dist/Cell/IconLabel/IconLabel.styles.js +7 -6
- package/dist/Cell/IconLabel/IconLabel.types.d.ts +3 -3
- package/dist/Cell/IconLabel/IconLabel.types.js +1 -1
- package/dist/Cell/IconTooltipCell/IconTooltipCell.d.ts +2 -2
- package/dist/Cell/IconTooltipCell/IconTooltipCell.js +18 -23
- package/dist/Cell/IconTooltipCell/IconTooltipCell.styles.d.ts +2 -2
- package/dist/Cell/IconTooltipCell/IconTooltipCell.styles.js +9 -11
- package/dist/Cell/IconTooltipCell/IconTooltipCell.types.d.ts +4 -4
- package/dist/Cell/IconTooltipCell/IconTooltipCell.types.js +1 -1
- package/dist/Cell/InputNumber/InputNumberCell.d.ts +2 -2
- package/dist/Cell/InputNumber/InputNumberCell.js +10 -17
- package/dist/Cell/InputNumber/InputNumberCell.styles.d.ts +1 -1
- package/dist/Cell/InputNumber/InputNumberCell.styles.js +9 -5
- package/dist/Cell/InputNumber/InputNumberCell.types.d.ts +2 -2
- package/dist/Cell/InputNumber/InputNumberCell.types.js +1 -1
- package/dist/Cell/LabelsWithShowMore/LabelsWithShowMore.d.ts +3 -3
- package/dist/Cell/LabelsWithShowMore/LabelsWithShowMore.js +29 -40
- package/dist/Cell/LabelsWithShowMore/LabelsWithShowMore.styles.d.ts +3 -3
- package/dist/Cell/LabelsWithShowMore/LabelsWithShowMore.styles.js +11 -8
- package/dist/Cell/LabelsWithShowMore/LabelsWithShowMore.types.d.ts +2 -2
- package/dist/Cell/LabelsWithShowMore/LabelsWithShowMore.types.js +1 -1
- package/dist/Cell/LabelsWithShowMore/Modal/Modal.d.ts +2 -2
- package/dist/Cell/LabelsWithShowMore/Modal/Modal.js +35 -64
- package/dist/Cell/LabelsWithShowMore/Modal/Modal.types.d.ts +3 -3
- package/dist/Cell/LabelsWithShowMore/Modal/Modal.types.js +1 -1
- package/dist/Cell/Star/StarCell.d.ts +45 -45
- package/dist/Cell/Star/StarCell.js +25 -31
- package/dist/Cell/Star/StarCell.styles.d.ts +2 -2
- package/dist/Cell/Star/StarCell.styles.js +11 -9
- package/dist/Cell/Star/StarCell.types.d.ts +2 -2
- package/dist/Cell/Star/StarCell.types.js +1 -1
- package/dist/Cell/StatusLabel/StatusLabel.d.ts +2 -2
- package/dist/Cell/StatusLabel/StatusLabel.js +17 -19
- package/dist/Cell/StatusLabel/StatusLabel.styles.d.ts +2 -2
- package/dist/Cell/StatusLabel/StatusLabel.styles.js +9 -9
- package/dist/Cell/StatusLabel/StatusLabel.types.d.ts +3 -3
- package/dist/Cell/StatusLabel/StatusLabel.types.js +1 -1
- package/dist/Cell/TagIcon/TagIcon.d.ts +2 -2
- package/dist/Cell/TagIcon/TagIcon.js +9 -13
- package/dist/Cell/TagIcon/TagIcon.styles.d.ts +1 -1
- package/dist/Cell/TagIcon/TagIcon.styles.js +7 -6
- package/dist/Cell/TagIcon/TagIcon.types.d.ts +2 -2
- package/dist/Cell/TagIcon/TagIcon.types.js +1 -1
- package/dist/Cell/TagsGroup/TagsGroup.d.ts +2 -2
- package/dist/Cell/TagsGroup/TagsGroup.js +22 -39
- package/dist/Cell/TagsGroup/TagsGroup.styles.d.ts +2 -2
- package/dist/Cell/TagsGroup/TagsGroup.styles.js +30 -9
- package/dist/Cell/TagsGroup/TagsGroup.types.d.ts +2 -2
- package/dist/Cell/TagsGroup/TagsGroup.types.js +1 -1
- package/dist/Cell/index.d.ts +12 -12
- package/dist/Cell/index.js +28 -14
- package/dist/ColumnSortMenu/SortIcons.d.ts +2 -2
- package/dist/ColumnSortMenu/SortIcons.js +26 -38
- package/dist/ColumnSortMenu/SortRender.styles.d.ts +34 -34
- package/dist/ColumnSortMenu/SortRender.styles.js +13 -10
- package/dist/ColumnSortMenu/SortRenderer.d.ts +2 -2
- package/dist/ColumnSortMenu/SortRenderer.js +74 -108
- package/dist/ColumnSortMenu/TitleWithSort.d.ts +2 -2
- package/dist/ColumnSortMenu/TitleWithSort.js +19 -16
- package/dist/ColumnSortMenu/columnWithSortButtons.d.ts +1 -2
- package/dist/ColumnSortMenu/columnWithSortButtons.js +26 -43
- package/dist/ColumnSortMenu/groupedColumnsSort.d.ts +3 -3
- package/dist/ColumnSortMenu/groupedColumnsSort.js +33 -28
- package/dist/ColumnSortMenu/replaceSortButtons.d.ts +1 -1
- package/dist/ColumnSortMenu/replaceSortButtons.js +14 -15
- package/dist/ColumnSortMenu/useSortState.d.ts +1 -1
- package/dist/ColumnSortMenu/useSortState.js +95 -93
- package/dist/DefaultTable/DefaultTable.d.ts +2 -2
- package/dist/DefaultTable/DefaultTable.js +147 -148
- package/dist/FilterTrigger/FilterTrigger.d.ts +2 -2
- package/dist/FilterTrigger/FilterTrigger.js +42 -67
- package/dist/FilterTrigger/FilterTrigger.styles.d.ts +53 -53
- package/dist/FilterTrigger/FilterTrigger.styles.js +19 -32
- package/dist/FilterTrigger/FilterTrigger.types.d.ts +1 -1
- package/dist/FilterTrigger/FilterTrigger.types.js +1 -1
- package/dist/GroupTable/GroupTable.d.ts +3 -4
- package/dist/GroupTable/GroupTable.js +97 -118
- package/dist/GroupTable/GroupTable.styles.d.ts +25 -25
- package/dist/GroupTable/GroupTable.styles.js +40 -37
- package/dist/GroupTable/GroupTable.types.d.ts +1 -1
- package/dist/GroupTable/GroupTable.types.js +9 -6
- package/dist/GroupTable/GroupTableBody/GroupTableBody.d.ts +1 -1
- package/dist/GroupTable/GroupTableBody/GroupTableBody.js +83 -107
- package/dist/GroupTable/GroupTableBody/GroupTableBody.types.d.ts +3 -3
- package/dist/GroupTable/GroupTableBody/GroupTableBody.types.js +1 -1
- package/dist/GroupTable/GroupTableHeader/GroupTableHeader.d.ts +1 -1
- package/dist/GroupTable/GroupTableHeader/GroupTableHeader.js +25 -28
- package/dist/GroupTable/GroupTableHeader/GroupTableHeader.types.js +1 -1
- package/dist/InfiniteScroll/BackToTopButton.d.ts +2 -2
- package/dist/InfiniteScroll/BackToTopButton.js +7 -15
- package/dist/InfiniteScroll/BackToTopButton.styles.d.ts +34 -34
- package/dist/InfiniteScroll/BackToTopButton.styles.js +11 -9
- package/dist/InfiniteScroll/ErrorItem.d.ts +1 -1
- package/dist/InfiniteScroll/ErrorItem.js +19 -23
- package/dist/InfiniteScroll/ErrorItem.styles.d.ts +1 -1
- package/dist/InfiniteScroll/ErrorItem.styles.js +6 -3
- package/dist/InfiniteScroll/InfiniteLoaderItem.d.ts +2 -2
- package/dist/InfiniteScroll/InfiniteLoaderItem.js +33 -28
- package/dist/InfiniteScroll/InfiniteLoaderItem.styles.d.ts +1 -1
- package/dist/InfiniteScroll/InfiniteLoaderItem.styles.js +7 -4
- package/dist/InfiniteScroll/InfiniteLoaderItem.types.d.ts +1 -1
- package/dist/InfiniteScroll/InfiniteLoaderItem.types.js +1 -1
- package/dist/InfiniteScroll/LoadingItem.d.ts +1 -1
- package/dist/InfiniteScroll/LoadingItem.js +10 -10
- package/dist/InfiniteScroll/NoMoreItem.d.ts +1 -1
- package/dist/InfiniteScroll/NoMoreItem.js +10 -10
- package/dist/InfiniteScroll/OuterListElement.d.ts +1 -1
- package/dist/InfiniteScroll/OuterListElement.js +45 -58
- package/dist/InfiniteScroll/constants.js +4 -1
- package/dist/InfiniteScroll/utils.d.ts +1 -1
- package/dist/InfiniteScroll/utils.js +15 -12
- package/dist/ItemsMenu/ItemsMenu.d.ts +2 -2
- package/dist/ItemsMenu/ItemsMenu.js +7 -6
- package/dist/ItemsMenu/ItemsMenu.styles.d.ts +1 -1
- package/dist/ItemsMenu/ItemsMenu.styles.js +6 -3
- package/dist/ItemsMenu/ItemsMenu.types.d.ts +1 -1
- package/dist/ItemsMenu/ItemsMenu.types.js +1 -1
- package/dist/RowSelection/RowSelectionColumn.d.ts +3 -3
- package/dist/RowSelection/RowSelectionColumn.js +77 -81
- package/dist/RowSelection/RowSelectionColumn.types.d.ts +3 -3
- package/dist/RowSelection/RowSelectionColumn.types.js +1 -1
- package/dist/RowSelection/index.js +4 -1
- package/dist/Table.d.ts +2 -4
- package/dist/Table.js +94 -129
- package/dist/Table.styles.d.ts +23 -23
- package/dist/Table.styles.js +86 -110
- package/dist/Table.types.d.ts +7 -7
- package/dist/Table.types.js +1 -1
- package/dist/TableHeader/TableHeader.d.ts +2 -2
- package/dist/TableHeader/TableHeader.js +91 -129
- package/dist/TableHeader/TableHeader.types.d.ts +2 -2
- package/dist/TableHeader/TableHeader.types.js +1 -1
- package/dist/TableHeader/TableLimit/TableLimit.d.ts +2 -2
- package/dist/TableHeader/TableLimit/TableLimit.js +44 -36
- package/dist/TableHeader/TableLimit/TableLimit.styles.d.ts +4 -4
- package/dist/TableHeader/TableLimit/TableLimit.styles.js +15 -13
- package/dist/TableHeader/TableLimit/TableLimit.types.d.ts +3 -3
- package/dist/TableHeader/TableLimit/TableLimit.types.js +1 -1
- package/dist/TableHeader/TableLimit/index.js +4 -2
- package/dist/TableHeader/TableSelection.d.ts +2 -2
- package/dist/TableHeader/TableSelection.js +163 -180
- package/dist/TableHeader/TableSelection.types.d.ts +1 -1
- package/dist/TableHeader/TableSelection.types.js +1 -1
- package/dist/TreeTable/TreeTable.d.ts +2 -3
- package/dist/TreeTable/TreeTable.js +51 -78
- package/dist/TreeTable/TreeTable.styles.d.ts +5 -5
- package/dist/TreeTable/TreeTable.styles.js +21 -20
- package/dist/VirtualTable/VirtualTable.d.ts +3 -3
- package/dist/VirtualTable/VirtualTable.js +342 -411
- package/dist/VirtualTable/VirtualTable.styles.d.ts +8 -8
- package/dist/VirtualTable/VirtualTable.styles.js +30 -40
- package/dist/VirtualTable/VirtualTable.types.d.ts +4 -4
- package/dist/VirtualTable/VirtualTable.types.js +1 -1
- package/dist/VirtualTable/VirtualTableRow.d.ts +4 -4
- package/dist/VirtualTable/VirtualTableRow.js +103 -111
- package/dist/VirtualTable/constants.js +8 -3
- package/dist/assets/style/index-tn0RQdqM.css +0 -0
- package/dist/constants/Table.constants.js +11 -6
- package/dist/constants/TableSkeleton.constants.d.ts +1 -1
- package/dist/constants/TableSkeleton.constants.js +48 -100
- package/dist/hooks/useBulkSelection/index.js +4 -1
- package/dist/hooks/useBulkSelection/useBulkSelection.d.ts +1 -1
- package/dist/hooks/useBulkSelection/useBulkSelection.js +55 -40
- package/dist/hooks/useRowKey/index.js +4 -1
- package/dist/hooks/useRowKey/useRowKey.js +11 -11
- package/dist/hooks/useRowStar/index.js +4 -2
- package/dist/hooks/useRowStar/useRowStar.d.ts +1 -1
- package/dist/hooks/useRowStar/useRowStar.js +54 -62
- package/dist/hooks/useRowStar/useRowStar.types.d.ts +2 -2
- package/dist/hooks/useRowStar/useRowStar.types.js +1 -1
- package/dist/index.d.ts +4 -4
- package/dist/index.js +18 -9
- package/dist/modules.d.js +1 -1
- package/dist/modules.d.ts +0 -0
- package/dist/utils/calculateColumnWidths.d.ts +1 -1
- package/dist/utils/calculateColumnWidths.js +17 -16
- package/dist/utils/calculatePixels.js +11 -12
- package/dist/utils/columnWithCellTooltip.d.ts +1 -1
- package/dist/utils/columnWithCellTooltip.js +18 -15
- package/dist/utils/getChildrenColumnName.js +6 -3
- package/dist/utils/getRecordSelectionStatus.d.ts +1 -1
- package/dist/utils/getRecordSelectionStatus.js +11 -7
- package/dist/utils/getSkeletonProps.d.ts +1 -1
- package/dist/utils/getSkeletonProps.js +26 -36
- package/dist/utils/getValueFromPath.js +9 -6
- package/dist/utils/index.js +23 -9
- package/dist/utils/isGrouped.d.ts +1 -1
- package/dist/utils/isGrouped.js +6 -3
- package/dist/utils/isRecordSelectable.d.ts +1 -1
- package/dist/utils/isRecordSelectable.js +10 -6
- package/dist/utils/locale.d.ts +3 -3
- package/dist/utils/locale.js +115 -111
- package/package.json +31 -31
- package/dist/Cell/TagsGroup/TagsGroup.spec.d.ts +0 -1
- package/dist/ColumnSortMenu/__spec__/groupedColumnsSort.spec.d.ts +0 -1
- package/dist/VirtualTable/VirtualTable.spec.d.ts +0 -1
- package/dist/utils/__specs__/getValueFromPath.spec.d.ts +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.9.13](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@1.9.12...@synerise/ds-table@1.9.13) (2026-04-01)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-table
|
|
9
|
+
|
|
10
|
+
## [1.9.12](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@1.9.11...@synerise/ds-table@1.9.12) (2026-03-24)
|
|
11
|
+
|
|
12
|
+
**Note:** Version bump only for package @synerise/ds-table
|
|
13
|
+
|
|
6
14
|
## [1.9.11](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@1.9.10...@synerise/ds-table@1.9.11) (2026-03-20)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @synerise/ds-table
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { ActionCellProps } from './ActionCell.types';
|
|
3
3
|
declare const _default: React.MemoExoticComponent<({ children, gapSize, contentAlign, ...htmlAttributes }: ActionCellProps) => React.JSX.Element>;
|
|
4
4
|
export default _default;
|
|
@@ -1,19 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
contentAlign: contentAlign
|
|
17
|
-
}, htmlAttributes), children);
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { ActionCell as ActionCell$1 } from "./ActionCell.styles.js";
|
|
4
|
+
const DEFAULT_GAP_SIZE = 24;
|
|
5
|
+
const ActionCell = ({
|
|
6
|
+
children,
|
|
7
|
+
gapSize = DEFAULT_GAP_SIZE,
|
|
8
|
+
contentAlign = "right",
|
|
9
|
+
...htmlAttributes
|
|
10
|
+
}) => {
|
|
11
|
+
return /* @__PURE__ */ jsx(ActionCell$1, { gapSize, contentAlign, ...htmlAttributes, children });
|
|
12
|
+
};
|
|
13
|
+
const ActionCell_default = React.memo(ActionCell);
|
|
14
|
+
export {
|
|
15
|
+
ActionCell_default as default
|
|
18
16
|
};
|
|
19
|
-
export default /*#__PURE__*/React.memo(ActionCell);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare const ActionCell: import(
|
|
1
|
+
import { ContentAlign } from './ActionCell.types';
|
|
2
|
+
export declare const ActionCell: import('styled-components').StyledComponent<"div", any, {
|
|
3
3
|
gapSize: number;
|
|
4
4
|
contentAlign: ContentAlign;
|
|
5
5
|
}, never>;
|
|
@@ -1,14 +1,13 @@
|
|
|
1
|
-
import styled from
|
|
2
|
-
|
|
3
|
-
left:
|
|
4
|
-
right:
|
|
5
|
-
center:
|
|
1
|
+
import styled from "styled-components";
|
|
2
|
+
const align = {
|
|
3
|
+
left: "flex-start",
|
|
4
|
+
right: "flex-end",
|
|
5
|
+
center: "center"
|
|
6
6
|
};
|
|
7
|
-
|
|
7
|
+
const ActionCell = /* @__PURE__ */ styled.div.withConfig({
|
|
8
8
|
displayName: "ActionCellstyles__ActionCell",
|
|
9
9
|
componentId: "sc-d77fu5-0"
|
|
10
|
-
})(["display:flex;align-items:center;justify-content:", ";gap:", ";"],
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
});
|
|
10
|
+
})(["display:flex;align-items:center;justify-content:", ";gap:", ";"], (props) => align[props.contentAlign], (props) => `${props.gapSize}px`);
|
|
11
|
+
export {
|
|
12
|
+
ActionCell
|
|
13
|
+
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { WithHTMLAttributes } from '@synerise/ds-utils';
|
|
3
3
|
export type ContentAlign = 'left' | 'right' | 'center';
|
|
4
4
|
export type ActionCellProps = WithHTMLAttributes<HTMLDivElement, {
|
|
5
5
|
children: ReactNode | ReactNode[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { AvatarLabelProps } from './AvatarLabel.types';
|
|
3
3
|
declare const AvatarLabel: ({ avatar, avatarAction, avatarLink, title, labels, icon, ellipsis, maxWidth, avatarSize, loader, disabled, ...htmlAttributes }: AvatarLabelProps) => React.JSX.Element;
|
|
4
4
|
export default AvatarLabel;
|
|
@@ -1,54 +1,43 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
20
|
-
var titleEllipsisProps = ellipsis ? {
|
|
1
|
+
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { v4 } from "uuid";
|
|
3
|
+
import { Icon, Avatar, Description, Title, Labels, Label, Loader, AvatarLabel as AvatarLabel$1, AvatarLink } from "./AvatarLabel.styles.js";
|
|
4
|
+
const AvatarLabel = ({
|
|
5
|
+
avatar,
|
|
6
|
+
avatarAction,
|
|
7
|
+
avatarLink,
|
|
8
|
+
title,
|
|
9
|
+
labels,
|
|
10
|
+
icon,
|
|
11
|
+
ellipsis,
|
|
12
|
+
maxWidth,
|
|
13
|
+
avatarSize,
|
|
14
|
+
loader,
|
|
15
|
+
disabled,
|
|
16
|
+
...htmlAttributes
|
|
17
|
+
}) => {
|
|
18
|
+
const titleEllipsisProps = ellipsis ? {
|
|
21
19
|
ellipsis: {
|
|
22
20
|
tooltip: title
|
|
23
21
|
}
|
|
24
22
|
} : {};
|
|
25
|
-
|
|
23
|
+
const handleLinkClick = (event) => {
|
|
26
24
|
if (event.metaKey || event.ctrlKey) {
|
|
27
25
|
event.stopPropagation();
|
|
28
26
|
} else if (avatarAction) {
|
|
29
27
|
event.preventDefault();
|
|
30
28
|
}
|
|
31
29
|
};
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
})), loader && /*#__PURE__*/React.createElement(S.Loader, null, loader)));
|
|
46
|
-
return /*#__PURE__*/React.createElement(S.AvatarLabel, _extends({}, htmlAttributes, {
|
|
47
|
-
isDisabled: disabled,
|
|
48
|
-
onClick: avatarAction
|
|
49
|
-
}), avatarLink ? /*#__PURE__*/React.createElement(S.AvatarLink, {
|
|
50
|
-
href: avatarLink,
|
|
51
|
-
onClick: handleLinkClick
|
|
52
|
-
}, cellContent) : cellContent);
|
|
30
|
+
const cellContent = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
31
|
+
icon && /* @__PURE__ */ jsx(Icon, { children: icon }),
|
|
32
|
+
/* @__PURE__ */ jsx(Avatar, { clickable: Boolean(avatarAction), children: avatar }),
|
|
33
|
+
/* @__PURE__ */ jsxs(Description, { children: [
|
|
34
|
+
/* @__PURE__ */ jsx(Title, { ...titleEllipsisProps, hasEllipsis: ellipsis, maxWidth, avatarSize, children: title }),
|
|
35
|
+
labels && /* @__PURE__ */ jsx(Labels, { ellipsis: Boolean(ellipsis), maxWidth, children: labels?.map((label) => /* @__PURE__ */ jsx(Label, { children: label }, v4())) }),
|
|
36
|
+
loader && /* @__PURE__ */ jsx(Loader, { children: loader })
|
|
37
|
+
] })
|
|
38
|
+
] });
|
|
39
|
+
return /* @__PURE__ */ jsx(AvatarLabel$1, { ...htmlAttributes, isDisabled: disabled, onClick: avatarAction, children: avatarLink ? /* @__PURE__ */ jsx(AvatarLink, { href: avatarLink, onClick: handleLinkClick, children: cellContent }) : cellContent });
|
|
40
|
+
};
|
|
41
|
+
export {
|
|
42
|
+
AvatarLabel as default
|
|
53
43
|
};
|
|
54
|
-
export default AvatarLabel;
|
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
export declare const AvatarLabel: import(
|
|
1
|
+
export declare const AvatarLabel: import('styled-components').StyledComponent<"div", any, {
|
|
2
2
|
onClick?: () => void;
|
|
3
3
|
isDisabled?: boolean;
|
|
4
4
|
}, never>;
|
|
5
|
-
export declare const Avatar: import(
|
|
5
|
+
export declare const Avatar: import('styled-components').StyledComponent<"div", any, {
|
|
6
6
|
clickable: boolean;
|
|
7
7
|
}, never>;
|
|
8
|
-
export declare const Description: import(
|
|
9
|
-
export declare const AvatarLink: import(
|
|
10
|
-
export declare const Title: import(
|
|
11
|
-
size?: import(
|
|
12
|
-
ellipsis?: import(
|
|
13
|
-
children?: import(
|
|
8
|
+
export declare const Description: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
9
|
+
export declare const AvatarLink: import('styled-components').StyledComponent<"a", any, {}, never>;
|
|
10
|
+
export declare const Title: import('styled-components').StyledComponent<({ size, className, children, ellipsis, style, }: {
|
|
11
|
+
size?: import('@synerise/ds-typography').TextSize;
|
|
12
|
+
ellipsis?: import('@synerise/ds-typography/dist/Ellipsis').EllipsisProps;
|
|
13
|
+
children?: import('react').ReactNode;
|
|
14
14
|
className?: string;
|
|
15
|
-
style?: import(
|
|
15
|
+
style?: import('react').CSSProperties;
|
|
16
16
|
}) => React.JSX.Element, any, {
|
|
17
17
|
hasEllipsis?: boolean;
|
|
18
18
|
maxWidth: number | undefined;
|
|
19
19
|
avatarSize?: string | "large";
|
|
20
20
|
}, never>;
|
|
21
|
-
export declare const Labels: import(
|
|
21
|
+
export declare const Labels: import('styled-components').StyledComponent<"span", any, {
|
|
22
22
|
ellipsis: boolean;
|
|
23
23
|
maxWidth: number | undefined;
|
|
24
24
|
}, never>;
|
|
25
|
-
export declare const Label: import(
|
|
26
|
-
export declare const Icon: import(
|
|
27
|
-
export declare const Loader: import(
|
|
25
|
+
export declare const Label: import('styled-components').StyledComponent<"span", any, {}, never>;
|
|
26
|
+
export declare const Icon: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
27
|
+
export declare const Loader: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
@@ -1,50 +1,49 @@
|
|
|
1
|
-
import styled, { css } from
|
|
2
|
-
import { Text } from
|
|
3
|
-
|
|
1
|
+
import styled, { css } from "styled-components";
|
|
2
|
+
import { Text } from "@synerise/ds-typography";
|
|
3
|
+
const AvatarLabel = /* @__PURE__ */ styled.div.withConfig({
|
|
4
4
|
displayName: "AvatarLabelstyles__AvatarLabel",
|
|
5
5
|
componentId: "sc-1485c9p-0"
|
|
6
|
-
})(["display:inline-flex;min-width:0;align-items:center;justify-content:flex-start;max-width:100%;", ";", ";"],
|
|
7
|
-
|
|
8
|
-
}, function (props) {
|
|
9
|
-
return props.onClick !== undefined ? 'cursor: pointer' : '';
|
|
10
|
-
});
|
|
11
|
-
export var Avatar = styled.div.withConfig({
|
|
6
|
+
})(["display:inline-flex;min-width:0;align-items:center;justify-content:flex-start;max-width:100%;", ";", ";"], (props) => props.isDisabled && "opacity: 0.4", (props) => props.onClick !== void 0 ? "cursor: pointer" : "");
|
|
7
|
+
const Avatar = /* @__PURE__ */ styled.div.withConfig({
|
|
12
8
|
displayName: "AvatarLabelstyles__Avatar",
|
|
13
9
|
componentId: "sc-1485c9p-1"
|
|
14
|
-
})(["margin-right:16px;display:flex;align-items:center;justify-content:center;", ";"],
|
|
15
|
-
|
|
16
|
-
});
|
|
17
|
-
export var Description = styled.div.withConfig({
|
|
10
|
+
})(["margin-right:16px;display:flex;align-items:center;justify-content:center;", ";"], (props) => props.clickable ? "cursor: pointer" : "");
|
|
11
|
+
const Description = /* @__PURE__ */ styled.div.withConfig({
|
|
18
12
|
displayName: "AvatarLabelstyles__Description",
|
|
19
13
|
componentId: "sc-1485c9p-2"
|
|
20
14
|
})(["display:flex;min-width:0;flex-direction:column;align-items:flex-start;justify-content:center;max-width:100%;"]);
|
|
21
|
-
|
|
15
|
+
const AvatarLink = /* @__PURE__ */ styled.a.withConfig({
|
|
22
16
|
displayName: "AvatarLabelstyles__AvatarLink",
|
|
23
17
|
componentId: "sc-1485c9p-3"
|
|
24
18
|
})(["display:flex;min-width:0;color:inherit;&:hover,&:active,&:focus{text-decoration:none;color:inherit;}"]);
|
|
25
|
-
|
|
19
|
+
const Title = /* @__PURE__ */ styled(Text).withConfig({
|
|
26
20
|
displayName: "AvatarLabelstyles__Title",
|
|
27
21
|
componentId: "sc-1485c9p-4"
|
|
28
|
-
})(["font-size:14px;line-height:20px;color:", ";font-weight:500;", ";"],
|
|
29
|
-
|
|
30
|
-
}, function (props) {
|
|
31
|
-
return Boolean(props.ellipsis) && css(["max-width:", ";"], props.maxWidth ? props.maxWidth + "px" : '100%');
|
|
32
|
-
});
|
|
33
|
-
export var Labels = styled.span.withConfig({
|
|
22
|
+
})(["font-size:14px;line-height:20px;color:", ";font-weight:500;", ";"], (props) => props.theme.palette["grey-700"], (props) => Boolean(props.ellipsis) && css(["max-width:", ";"], props.maxWidth ? `${props.maxWidth}px` : "100%"));
|
|
23
|
+
const Labels = /* @__PURE__ */ styled.span.withConfig({
|
|
34
24
|
displayName: "AvatarLabelstyles__Labels",
|
|
35
25
|
componentId: "sc-1485c9p-5"
|
|
36
|
-
})(["font-size:13px;line-height:1.38;font-weight:400;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:100%;color:", ";"],
|
|
37
|
-
|
|
38
|
-
});
|
|
39
|
-
export var Label = styled.span.withConfig({
|
|
26
|
+
})(["font-size:13px;line-height:1.38;font-weight:400;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:100%;color:", ";"], (props) => props.theme.palette["grey-700"]);
|
|
27
|
+
const Label = /* @__PURE__ */ styled.span.withConfig({
|
|
40
28
|
displayName: "AvatarLabelstyles__Label",
|
|
41
29
|
componentId: "sc-1485c9p-6"
|
|
42
30
|
})([""]);
|
|
43
|
-
|
|
31
|
+
const Icon = /* @__PURE__ */ styled.div.withConfig({
|
|
44
32
|
displayName: "AvatarLabelstyles__Icon",
|
|
45
33
|
componentId: "sc-1485c9p-7"
|
|
46
34
|
})(["margin-right:8px;"]);
|
|
47
|
-
|
|
35
|
+
const Loader = /* @__PURE__ */ styled.div.withConfig({
|
|
48
36
|
displayName: "AvatarLabelstyles__Loader",
|
|
49
37
|
componentId: "sc-1485c9p-8"
|
|
50
|
-
})([""]);
|
|
38
|
+
})([""]);
|
|
39
|
+
export {
|
|
40
|
+
Avatar,
|
|
41
|
+
AvatarLabel,
|
|
42
|
+
AvatarLink,
|
|
43
|
+
Description,
|
|
44
|
+
Icon,
|
|
45
|
+
Label,
|
|
46
|
+
Labels,
|
|
47
|
+
Loader,
|
|
48
|
+
Title
|
|
49
|
+
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
1
|
+
import { ReactElement, ReactNode } from 'react';
|
|
2
|
+
import { WithHTMLAttributes } from '@synerise/ds-utils';
|
|
3
3
|
export type AvatarLabelProps = WithHTMLAttributes<HTMLDivElement, {
|
|
4
4
|
avatar: ReactElement;
|
|
5
5
|
avatarAction?: () => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const CopyableValue: import(
|
|
2
|
-
export declare const Copyable: import(
|
|
1
|
+
export declare const CopyableValue: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
2
|
+
export declare const Copyable: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
@@ -1,20 +1,14 @@
|
|
|
1
|
-
import styled from
|
|
2
|
-
import { IconContainer } from
|
|
3
|
-
|
|
1
|
+
import styled from "styled-components";
|
|
2
|
+
import { IconContainer } from "@synerise/ds-icon";
|
|
3
|
+
const CopyableValue = /* @__PURE__ */ styled.div.withConfig({
|
|
4
4
|
displayName: "Copyablestyles__CopyableValue",
|
|
5
5
|
componentId: "sc-bj73sz-0"
|
|
6
6
|
})(["overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"]);
|
|
7
|
-
|
|
7
|
+
const Copyable = /* @__PURE__ */ styled.div.withConfig({
|
|
8
8
|
displayName: "Copyablestyles__Copyable",
|
|
9
9
|
componentId: "sc-bj73sz-1"
|
|
10
|
-
})(["display:flex;align-items:center;justify-content:space-between;&:hover{color:", ";", "{opacity:1;visibility:visible;}}", "{opacity:0;visibility:hidden;svg{fill:", ";color:", ";}&:hover{svg{fill:", ";color:", ";}}}"],
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
}
|
|
15
|
-
return props.theme.palette['grey-400'];
|
|
16
|
-
}, function (props) {
|
|
17
|
-
return props.theme.palette['blue-600'];
|
|
18
|
-
}, function (props) {
|
|
19
|
-
return props.theme.palette['blue-600'];
|
|
20
|
-
});
|
|
10
|
+
})(["display:flex;align-items:center;justify-content:space-between;&:hover{color:", ";", "{opacity:1;visibility:visible;}}", "{opacity:0;visibility:hidden;svg{fill:", ";color:", ";}&:hover{svg{fill:", ";color:", ";}}}"], (props) => props.theme.palette["grey-800"], IconContainer, IconContainer, (props) => props.theme.palette["grey-400"], (props) => props.theme.palette["grey-400"], (props) => props.theme.palette["blue-600"], (props) => props.theme.palette["blue-600"]);
|
|
11
|
+
export {
|
|
12
|
+
Copyable,
|
|
13
|
+
CopyableValue
|
|
14
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { CopyableCellProps } from './Copyable.types';
|
|
3
3
|
declare const CopyableCell: ({ value, confirmMessage, tooltipTimeout, ...htmlAttributes }: CopyableCellProps) => React.JSX.Element;
|
|
4
4
|
export default CopyableCell;
|
|
@@ -1,32 +1,28 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
setTooltipOpen = _useState[1];
|
|
16
|
-
useEffect(function () {
|
|
17
|
-
var timer = setTimeout(function () {
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useState, useEffect } from "react";
|
|
3
|
+
import CopyIcon from "@synerise/ds-copy-icon";
|
|
4
|
+
import { Copyable, CopyableValue } from "./Copyable.styles.js";
|
|
5
|
+
const DEFAULT_TIMEOUT = 2e3;
|
|
6
|
+
const CopyableCell = ({
|
|
7
|
+
value,
|
|
8
|
+
confirmMessage,
|
|
9
|
+
tooltipTimeout = DEFAULT_TIMEOUT,
|
|
10
|
+
...htmlAttributes
|
|
11
|
+
}) => {
|
|
12
|
+
const [tooltipOpen, setTooltipOpen] = useState(false);
|
|
13
|
+
useEffect(() => {
|
|
14
|
+
const timer = setTimeout(() => {
|
|
18
15
|
setTooltipOpen(false);
|
|
19
16
|
}, tooltipTimeout);
|
|
20
|
-
return
|
|
21
|
-
return clearTimeout(timer);
|
|
22
|
-
};
|
|
17
|
+
return () => clearTimeout(timer);
|
|
23
18
|
}, [tooltipOpen, setTooltipOpen, tooltipTimeout]);
|
|
24
|
-
return
|
|
25
|
-
|
|
26
|
-
placement: "left",
|
|
27
|
-
texts: {
|
|
19
|
+
return /* @__PURE__ */ jsxs(Copyable, { ...htmlAttributes, children: [
|
|
20
|
+
/* @__PURE__ */ jsx(CopyableValue, { children: value }),
|
|
21
|
+
/* @__PURE__ */ jsx(CopyIcon, { copyValue: value, placement: "left", texts: {
|
|
28
22
|
copiedTooltip: confirmMessage
|
|
29
|
-
}
|
|
30
|
-
})
|
|
23
|
+
} })
|
|
24
|
+
] });
|
|
25
|
+
};
|
|
26
|
+
export {
|
|
27
|
+
CopyableCell as default
|
|
31
28
|
};
|
|
32
|
-
export default CopyableCell;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { EditableCellProps } from './EditableCell.types';
|
|
3
3
|
declare const EditableCell: ({ value, onChange, placeholder, ...htmlAttributes }: EditableCellProps) => React.JSX.Element;
|
|
4
4
|
export default EditableCell;
|
|
@@ -1,43 +1,30 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
var _useState2 = useState(value || ''),
|
|
16
|
-
editValue = _useState2[0],
|
|
17
|
-
setEditValue = _useState2[1];
|
|
18
|
-
var enterEditMode = useCallback(function () {
|
|
1
|
+
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useState, useCallback, useMemo } from "react";
|
|
3
|
+
import Icon, { EditNolineS } from "@synerise/ds-icon";
|
|
4
|
+
import { Input } from "@synerise/ds-input";
|
|
5
|
+
import { Value, EditableCell as EditableCell$1 } from "./EditableCell.styles.js";
|
|
6
|
+
const EditableCell = ({
|
|
7
|
+
value,
|
|
8
|
+
onChange,
|
|
9
|
+
placeholder,
|
|
10
|
+
...htmlAttributes
|
|
11
|
+
}) => {
|
|
12
|
+
const [editMode, setEditMode] = useState(false);
|
|
13
|
+
const [editValue, setEditValue] = useState(value || "");
|
|
14
|
+
const enterEditMode = useCallback(() => {
|
|
19
15
|
setEditMode(true);
|
|
20
16
|
}, [setEditMode]);
|
|
21
|
-
|
|
22
|
-
return editMode ?
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
},
|
|
30
|
-
onBlur: function onBlur() {
|
|
31
|
-
setEditMode(false);
|
|
32
|
-
onChange(editValue);
|
|
33
|
-
}
|
|
34
|
-
}) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.Value, {
|
|
35
|
-
asPlaceholder: !value
|
|
36
|
-
}, value || placeholder), /*#__PURE__*/React.createElement(Icon, {
|
|
37
|
-
onClick: enterEditMode,
|
|
38
|
-
component: /*#__PURE__*/React.createElement(EditNolineS, null)
|
|
39
|
-
}));
|
|
17
|
+
const render = useMemo(() => {
|
|
18
|
+
return editMode ? /* @__PURE__ */ jsx(Input, { value: editValue, autoFocus: true, resetMargin: true, placeholder, onChange: (event) => setEditValue(event.target.value), onBlur: () => {
|
|
19
|
+
setEditMode(false);
|
|
20
|
+
onChange(editValue);
|
|
21
|
+
} }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
22
|
+
/* @__PURE__ */ jsx(Value, { asPlaceholder: !value, children: value || placeholder }),
|
|
23
|
+
/* @__PURE__ */ jsx(Icon, { onClick: enterEditMode, component: /* @__PURE__ */ jsx(EditNolineS, {}) })
|
|
24
|
+
] });
|
|
40
25
|
}, [editMode, value, enterEditMode, editValue, setEditValue, onChange, placeholder]);
|
|
41
|
-
return
|
|
26
|
+
return /* @__PURE__ */ jsx(EditableCell$1, { ...htmlAttributes, children: render });
|
|
27
|
+
};
|
|
28
|
+
export {
|
|
29
|
+
EditableCell as default
|
|
42
30
|
};
|
|
43
|
-
export default EditableCell;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const EditableCell: import(
|
|
2
|
-
export declare const Value: import(
|
|
1
|
+
export declare const EditableCell: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
2
|
+
export declare const Value: import('styled-components').StyledComponent<"span", any, {
|
|
3
3
|
asPlaceholder: boolean;
|
|
4
4
|
}, never>;
|
|
@@ -1,12 +1,14 @@
|
|
|
1
|
-
import styled from
|
|
2
|
-
import { IconContainer } from
|
|
3
|
-
|
|
1
|
+
import styled from "styled-components";
|
|
2
|
+
import { IconContainer } from "@synerise/ds-icon";
|
|
3
|
+
const EditableCell = /* @__PURE__ */ styled.div.withConfig({
|
|
4
4
|
displayName: "EditableCellstyles__EditableCell",
|
|
5
5
|
componentId: "sc-ahr0lx-0"
|
|
6
6
|
})(["display:flex;align-items:center;justify-content:flex-start;&:hover{", "{opacity:1;visibility:visible;}}", "{transition:all 0.3s ease;opacity:0;visibility:hidden;}"], IconContainer, IconContainer);
|
|
7
|
-
|
|
7
|
+
const Value = /* @__PURE__ */ styled.span.withConfig({
|
|
8
8
|
displayName: "EditableCellstyles__Value",
|
|
9
9
|
componentId: "sc-ahr0lx-1"
|
|
10
|
-
})(["color:", ";"],
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
})(["color:", ";"], (props) => props.asPlaceholder ? props.theme.palette["grey-400"] : "inherit");
|
|
11
|
+
export {
|
|
12
|
+
EditableCell,
|
|
13
|
+
Value
|
|
14
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { FlagLabelProps } from './FlagLabelCell.types';
|
|
3
3
|
declare const FlagLabelCell: ({ countryCode, label, ...htmlAttributes }: FlagLabelProps) => React.JSX.Element;
|
|
4
4
|
export default FlagLabelCell;
|