@synerise/ds-table 1.9.10 → 1.9.12

package/dist/Cell/TagsGroup/TagsGroup.styles.js

@@ -1,13 +1,34 @@
-import styled from 'styled-components';
-import { Container, SelectedTags } from '@synerise/ds-tags/dist/Tags.styles';
-import { AddTagButton } from '@synerise/ds-tags/dist/components/AddTags/AddTags.styles';
-export var TagsGroupWrapper = styled.div.withConfig({
+import styled from "styled-components";
+import { Container, SelectedTags } from "@synerise/ds-tags/dist/Tags.styles";
+import { AddTagButton } from "@synerise/ds-tags/dist/components/AddTags/AddTags.styles";
+const TagsGroupWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "TagsGroupstyles__TagsGroupWrapper",
   componentId: "sc-a6dl1s-0"
-})(["min-width:0;", "{margin-bottom:0;}", "{flex-flow:nowrap;}", ""], Container, SelectedTags, function (props) {
-  return props.isDisabled ? "\n        opacity: 0.4;\n        pointer-events: none;\n    " : "\n        " + AddTagButton + AddTagButton + AddTagButton + " svg {\n            transition: none;\n        }\n        " + (!props.isEmpty && AddTagButton + " {\n            flex-shrink: 0\n          }") + "\n        " + AddTagButton + ":not(:focus) {\n            visibility: hidden;\n        }\n        tr:hover &, \n        .virtual-table-row:hover & {\n            " + AddTagButton + " {\n                visibility: visible;\n            }\n        }\n    ";
-});
-export var TagsGroupSkeleton = styled.div.withConfig({
+})(["min-width:0;", "{margin-bottom:0;}", "{flex-flow:nowrap;}", ""], Container, SelectedTags, (props) => props.isDisabled ? `
+        opacity: 0.4;
+        pointer-events: none;
+    ` : `
+        ${AddTagButton}${AddTagButton}${AddTagButton} svg {
+            transition: none;
+        }
+        ${!props.isEmpty && `${AddTagButton} {
+            flex-shrink: 0
+          }`}
+        ${AddTagButton}:not(:focus) {
+            visibility: hidden;
+        }
+        tr:hover &, 
+        .virtual-table-row:hover & {
+            ${AddTagButton} {
+                visibility: visible;
+            }
+        }
+    `);
+const TagsGroupSkeleton = /* @__PURE__ */ styled.div.withConfig({
   displayName: "TagsGroupstyles__TagsGroupSkeleton",
   componentId: "sc-a6dl1s-1"
-})(["display:flex;align-items:center;width:100%;"]);
+})(["display:flex;align-items:center;width:100%;"]);
+export {
+  TagsGroupSkeleton,
+  TagsGroupWrapper
+};

package/dist/Cell/TagsGroup/TagsGroup.types.d.ts

@@ -1,5 +1,5 @@
-import { type TagsProps } from '@synerise/ds-tags';
-import { type WithHTMLAttributes } from '@synerise/ds-utils';
+import { TagsProps } from '@synerise/ds-tags';
+import { WithHTMLAttributes } from '@synerise/ds-utils';
 export type TagsGroupProps = WithHTMLAttributes<HTMLDivElement, {
     disabled?: boolean;
     isLoading?: boolean;

package/dist/Cell/TagsGroup/TagsGroup.types.js

@@ -1 +1 @@
-export {};
+

package/dist/Cell/index.d.ts

@@ -1,14 +1,14 @@
-import ActionCell from './Action/ActionCell';
-import AvatarLabelCell from './AvatarLabel/AvatarLabel';
-import CopyableCell from './Copyable/CopyableCell';
-import EditableCell from './Editable/EditableCell';
-import FlagLabelCell from './FlagLabel/FlagLabelCell';
-import IconLabelCell from './IconLabel/IconLabel';
-import IconTooltipCell from './IconTooltipCell/IconTooltipCell';
-import InputNumberCell from './InputNumber/InputNumberCell';
-import LabelsWithShowMore from './LabelsWithShowMore/LabelsWithShowMore';
-import StarCell from './Star/StarCell';
-import StatusLabelCell from './StatusLabel/StatusLabel';
-import TagIconCell from './TagIcon/TagIcon';
+import { default as ActionCell } from './Action/ActionCell';
+import { default as AvatarLabelCell } from './AvatarLabel/AvatarLabel';
+import { default as CopyableCell } from './Copyable/CopyableCell';
+import { default as EditableCell } from './Editable/EditableCell';
+import { default as FlagLabelCell } from './FlagLabel/FlagLabelCell';
+import { default as IconLabelCell } from './IconLabel/IconLabel';
+import { default as IconTooltipCell } from './IconTooltipCell/IconTooltipCell';
+import { default as InputNumberCell } from './InputNumber/InputNumberCell';
+import { default as LabelsWithShowMore } from './LabelsWithShowMore/LabelsWithShowMore';
+import { default as StarCell } from './Star/StarCell';
+import { default as StatusLabelCell } from './StatusLabel/StatusLabel';
+import { default as TagIconCell } from './TagIcon/TagIcon';
 import { TagsGroupCell } from './TagsGroup/TagsGroup';
 export { IconLabelCell, IconTooltipCell, InputNumberCell, StatusLabelCell, AvatarLabelCell, TagIconCell, EditableCell, CopyableCell, ActionCell, FlagLabelCell, StarCell, LabelsWithShowMore, TagsGroupCell, };

package/dist/Cell/index.js

@@ -1,14 +1,28 @@
-import ActionCell from './Action/ActionCell';
-import AvatarLabelCell from './AvatarLabel/AvatarLabel';
-import CopyableCell from './Copyable/CopyableCell';
-import EditableCell from './Editable/EditableCell';
-import FlagLabelCell from './FlagLabel/FlagLabelCell';
-import IconLabelCell from './IconLabel/IconLabel';
-import IconTooltipCell from './IconTooltipCell/IconTooltipCell';
-import InputNumberCell from './InputNumber/InputNumberCell';
-import LabelsWithShowMore from './LabelsWithShowMore/LabelsWithShowMore';
-import StarCell from './Star/StarCell';
-import StatusLabelCell from './StatusLabel/StatusLabel';
-import TagIconCell from './TagIcon/TagIcon';
-import { TagsGroupCell } from './TagsGroup/TagsGroup';
-export { IconLabelCell, IconTooltipCell, InputNumberCell, StatusLabelCell, AvatarLabelCell, TagIconCell, EditableCell, CopyableCell, ActionCell, FlagLabelCell, StarCell, LabelsWithShowMore, TagsGroupCell };
+import { default as default2 } from "./Action/ActionCell.js";
+import { default as default3 } from "./AvatarLabel/AvatarLabel.js";
+import { default as default4 } from "./Copyable/CopyableCell.js";
+import { default as default5 } from "./Editable/EditableCell.js";
+import { default as default6 } from "./FlagLabel/FlagLabelCell.js";
+import { default as default7 } from "./IconLabel/IconLabel.js";
+import { default as default8 } from "./IconTooltipCell/IconTooltipCell.js";
+import { default as default9 } from "./InputNumber/InputNumberCell.js";
+import { default as default10 } from "./LabelsWithShowMore/LabelsWithShowMore.js";
+import { default as default11 } from "./Star/StarCell.js";
+import { default as default12 } from "./StatusLabel/StatusLabel.js";
+import { default as default13 } from "./TagIcon/TagIcon.js";
+import { TagsGroupCell } from "./TagsGroup/TagsGroup.js";
+export {
+  default2 as ActionCell,
+  default3 as AvatarLabelCell,
+  default4 as CopyableCell,
+  default5 as EditableCell,
+  default6 as FlagLabelCell,
+  default7 as IconLabelCell,
+  default8 as IconTooltipCell,
+  default9 as InputNumberCell,
+  default10 as LabelsWithShowMore,
+  default11 as StarCell,
+  default12 as StatusLabelCell,
+  default13 as TagIconCell,
+  TagsGroupCell
+};

package/dist/ColumnSortMenu/SortIcons.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { type ColumnSortOrder } from '../Table.types';
+import { default as React } from 'react';
+import { ColumnSortOrder } from '../Table.types';
 export declare const DefaultSortIcon: ({ sortOrder, }: {
     sortOrder: ColumnSortOrder;
 }) => React.JSX.Element;

package/dist/ColumnSortMenu/SortIcons.js

@@ -1,43 +1,31 @@
-import React from 'react';
-import { useTheme } from '@synerise/ds-core';
-import Icon, { ArrangeM, SortAscendingM, SortAzM, SortDescendingM, SortZaM } from '@synerise/ds-icon';
-export var DefaultSortIcon = function DefaultSortIcon(_ref) {
-  var sortOrder = _ref.sortOrder;
-  var theme = useTheme();
-  if (sortOrder === 'ascend') {
-    return /*#__PURE__*/React.createElement(Icon, {
-      component: /*#__PURE__*/React.createElement(SortAscendingM, null),
-      color: theme.palette['gray-600']
-    });
+import { jsx } from "react/jsx-runtime";
+import { useTheme } from "@synerise/ds-core";
+import Icon, { SortAscendingM, SortDescendingM, ArrangeM, SortAzM, SortZaM } from "@synerise/ds-icon";
+const DefaultSortIcon = ({
+  sortOrder
+}) => {
+  const theme = useTheme();
+  if (sortOrder === "ascend") {
+    return /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(SortAscendingM, {}), color: theme.palette["gray-600"] });
   }
-  if (sortOrder === 'descend') {
-    return /*#__PURE__*/React.createElement(Icon, {
-      component: /*#__PURE__*/React.createElement(SortDescendingM, null),
-      color: theme.palette['gray-600']
-    });
+  if (sortOrder === "descend") {
+    return /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(SortDescendingM, {}), color: theme.palette["gray-600"] });
   }
-  return /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(ArrangeM, null),
-    color: theme.palette['gray-600']
-  });
+  return /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(ArrangeM, {}), color: theme.palette["gray-600"] });
 };
-export var StringSortIcon = function StringSortIcon(_ref2) {
-  var sortOrder = _ref2.sortOrder;
-  var theme = useTheme();
-  if (sortOrder === 'ascend') {
-    return /*#__PURE__*/React.createElement(Icon, {
-      component: /*#__PURE__*/React.createElement(SortAzM, null),
-      color: theme.palette['gray-600']
-    });
+const StringSortIcon = ({
+  sortOrder
+}) => {
+  const theme = useTheme();
+  if (sortOrder === "ascend") {
+    return /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(SortAzM, {}), color: theme.palette["gray-600"] });
   }
-  if (sortOrder === 'descend') {
-    return /*#__PURE__*/React.createElement(Icon, {
-      component: /*#__PURE__*/React.createElement(SortZaM, null),
-      color: theme.palette['gray-600']
-    });
+  if (sortOrder === "descend") {
+    return /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(SortZaM, {}), color: theme.palette["gray-600"] });
   }
-  return /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(ArrangeM, null),
-    color: theme.palette['gray-600']
-  });
-};
+  return /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(ArrangeM, {}), color: theme.palette["gray-600"] });
+};
+export {
+  DefaultSortIcon,
+  StringSortIcon
+};

package/dist/ColumnSortMenu/SortRender.styles.d.ts

@@ -1,61 +1,61 @@
-export declare const ToggleButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<Partial<{
+export declare const ToggleButton: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<Omit<Partial<{
     href: string;
     target?: string;
     onClick?: React.MouseEventHandler<HTMLElement>;
-} & import("antd/lib/button/button").BaseButtonProps & Omit<import("react").AnchorHTMLAttributes<any>, "type" | "onClick"> & {
-    htmlType?: import("antd/lib/button/button").ButtonHTMLType;
+} & import('antd/lib/button/button').BaseButtonProps & Omit<import('react').AnchorHTMLAttributes<any>, "onClick" | "type"> & {
+    htmlType?: import('antd/lib/button/button').ButtonHTMLType;
     onClick?: React.MouseEventHandler<HTMLElement>;
-} & Omit<import("react").ButtonHTMLAttributes<any>, "type" | "onClick">>, "type" | "ghost"> & {
-    type?: import("@synerise/ds-utils").LiteralStringUnion<import("@synerise/ds-button/dist/Button.types").ButtonType>;
-    mode?: import("@synerise/ds-utils").LiteralStringUnion<"single-icon" | "split" | "two-icons" | "label-icon" | "icon-label">;
-    color?: import("@synerise/ds-utils").LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
-    groupVariant?: import("@synerise/ds-utils").LiteralStringUnion<"left-rounded" | "squared" | "right-rounded">;
+} & Omit<import('react').ButtonHTMLAttributes<any>, "onClick" | "type">>, "type" | "ghost"> & {
+    type?: import('@synerise/ds-utils').LiteralStringUnion<import('@synerise/ds-button/dist/Button.types').ButtonType>;
+    mode?: import('@synerise/ds-utils').LiteralStringUnion<"single-icon" | "split" | "two-icons" | "label-icon" | "icon-label">;
+    color?: import('@synerise/ds-utils').LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
+    groupVariant?: import('@synerise/ds-utils').LiteralStringUnion<"left-rounded" | "squared" | "right-rounded">;
     justifyContent?: string;
     loading?: boolean | {
         delay?: number;
     };
-    onClick?: (event: import("react").MouseEvent<HTMLElement>) => void;
-    iconColor?: import("@synerise/ds-utils").LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
+    onClick?: (event: import('react').MouseEvent<HTMLElement>) => void;
+    iconColor?: import('@synerise/ds-utils').LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
     error?: boolean;
     readOnly?: boolean;
-    tagProps?: import("@synerise/ds-tag").TagProps;
-    tooltipProps?: import("@synerise/ds-tooltip").TooltipProps;
-} & import("react").RefAttributes<HTMLButtonElement>> & {
-    Creator: import("react").ForwardRefExoticComponent<Omit<import("@synerise/ds-button").CreatorProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-    Expander: ({ size, expanded, disabled, onClick, className, }: import("@synerise/ds-button").ExpanderProps) => import("react").JSX.Element;
-    Star: (props: import("@synerise/ds-button").StarButtonProps) => React.ReactElement;
-    Checkbox: (props: import("@synerise/ds-button").CheckboxButtonProps) => React.ReactElement;
+    tagProps?: import('@synerise/ds-tag').TagProps;
+    tooltipProps?: import('@synerise/ds-tooltip').TooltipProps;
+} & import('react').RefAttributes<HTMLButtonElement>> & {
+    Creator: import('react').ForwardRefExoticComponent<Omit<import('@synerise/ds-button').CreatorProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+    Expander: ({ size, expanded, disabled, onClick, className, }: import('@synerise/ds-button').ExpanderProps) => import("react").JSX.Element;
+    Star: (props: import('@synerise/ds-button').StarButtonProps) => React.ReactElement;
+    Checkbox: (props: import('@synerise/ds-button').CheckboxButtonProps) => React.ReactElement;
 }, any, {
     isVisible: boolean;
 }, never>;
 declare const _default: {
-    ToggleButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<Partial<{
+    ToggleButton: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<Omit<Partial<{
         href: string;
         target?: string;
         onClick?: React.MouseEventHandler<HTMLElement>;
-    } & import("antd/lib/button/button").BaseButtonProps & Omit<import("react").AnchorHTMLAttributes<any>, "type" | "onClick"> & {
-        htmlType?: import("antd/lib/button/button").ButtonHTMLType;
+    } & import('antd/lib/button/button').BaseButtonProps & Omit<import('react').AnchorHTMLAttributes<any>, "onClick" | "type"> & {
+        htmlType?: import('antd/lib/button/button').ButtonHTMLType;
         onClick?: React.MouseEventHandler<HTMLElement>;
-    } & Omit<import("react").ButtonHTMLAttributes<any>, "type" | "onClick">>, "type" | "ghost"> & {
-        type?: import("@synerise/ds-utils").LiteralStringUnion<import("@synerise/ds-button/dist/Button.types").ButtonType>;
-        mode?: import("@synerise/ds-utils").LiteralStringUnion<"single-icon" | "split" | "two-icons" | "label-icon" | "icon-label">;
-        color?: import("@synerise/ds-utils").LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
-        groupVariant?: import("@synerise/ds-utils").LiteralStringUnion<"left-rounded" | "squared" | "right-rounded">;
+    } & Omit<import('react').ButtonHTMLAttributes<any>, "onClick" | "type">>, "type" | "ghost"> & {
+        type?: import('@synerise/ds-utils').LiteralStringUnion<import('@synerise/ds-button/dist/Button.types').ButtonType>;
+        mode?: import('@synerise/ds-utils').LiteralStringUnion<"single-icon" | "split" | "two-icons" | "label-icon" | "icon-label">;
+        color?: import('@synerise/ds-utils').LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
+        groupVariant?: import('@synerise/ds-utils').LiteralStringUnion<"left-rounded" | "squared" | "right-rounded">;
         justifyContent?: string;
         loading?: boolean | {
             delay?: number;
         };
-        onClick?: (event: import("react").MouseEvent<HTMLElement>) => void;
-        iconColor?: import("@synerise/ds-utils").LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
+        onClick?: (event: import('react').MouseEvent<HTMLElement>) => void;
+        iconColor?: import('@synerise/ds-utils').LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
         error?: boolean;
         readOnly?: boolean;
-        tagProps?: import("@synerise/ds-tag").TagProps;
-        tooltipProps?: import("@synerise/ds-tooltip").TooltipProps;
-    } & import("react").RefAttributes<HTMLButtonElement>> & {
-        Creator: import("react").ForwardRefExoticComponent<Omit<import("@synerise/ds-button").CreatorProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-        Expander: ({ size, expanded, disabled, onClick, className, }: import("@synerise/ds-button").ExpanderProps) => import("react").JSX.Element;
-        Star: (props: import("@synerise/ds-button").StarButtonProps) => React.ReactElement;
-        Checkbox: (props: import("@synerise/ds-button").CheckboxButtonProps) => React.ReactElement;
+        tagProps?: import('@synerise/ds-tag').TagProps;
+        tooltipProps?: import('@synerise/ds-tooltip').TooltipProps;
+    } & import('react').RefAttributes<HTMLButtonElement>> & {
+        Creator: import('react').ForwardRefExoticComponent<Omit<import('@synerise/ds-button').CreatorProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+        Expander: ({ size, expanded, disabled, onClick, className, }: import('@synerise/ds-button').ExpanderProps) => import("react").JSX.Element;
+        Star: (props: import('@synerise/ds-button').StarButtonProps) => React.ReactElement;
+        Checkbox: (props: import('@synerise/ds-button').CheckboxButtonProps) => React.ReactElement;
     }, any, {
         isVisible: boolean;
     }, never>;

package/dist/ColumnSortMenu/SortRender.styles.js

@@ -1,12 +1,15 @@
-import styled from 'styled-components';
-import Button from '@synerise/ds-button';
-export var ToggleButton = styled(Button).withConfig({
+import styled from "styled-components";
+import Button from "@synerise/ds-button";
+const ToggleButton = /* @__PURE__ */ styled(Button).withConfig({
   displayName: "SortRenderstyles__ToggleButton",
   componentId: "sc-pxbce6-0"
-})(["", ";"], function (_ref) {
-  var isVisible = _ref.isVisible;
-  return isVisible ? 'opacity: 1 !important;' : '';
-});
-export default {
-  ToggleButton: ToggleButton
-};
+})(["", ";"], ({
+  isVisible
+}) => isVisible ? "opacity: 1 !important;" : "");
+const SortRender_styles = {
+  ToggleButton
+};
+export {
+  ToggleButton,
+  SortRender_styles as default
+};

package/dist/ColumnSortMenu/SortRenderer.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { type DSColumnType, type OnSortFn, type SortStateAPI } from '../Table.types';
+import { default as React } from 'react';
+import { DSColumnType, OnSortFn, SortStateAPI } from '../Table.types';
 type SortRendererProps<T> = {
     sortStateApi: SortStateAPI;
     column: DSColumnType<T>;

package/dist/ColumnSortMenu/SortRenderer.js

@@ -1,140 +1,106 @@
-import partial from 'lodash.partial';
-import React, { useState } from 'react';
-import { DropdownMenu } from '@synerise/ds-dropdown';
-import Icon, { Close2M, SortAscendingM, SortAzM, SortDescendingM, SortZaM } from '@synerise/ds-icon';
-import { useTableLocaleContext } from '../utils/locale';
-import { DefaultSortIcon, StringSortIcon } from './SortIcons';
-import * as S from './SortRender.styles';
-import { toSortOrder } from './useSortState';
-var handleButtonClick = function handleButtonClick(event) {
+import { jsx } from "react/jsx-runtime";
+import partial from "lodash.partial";
+import { useState } from "react";
+import { DropdownMenu } from "@synerise/ds-dropdown";
+import Icon, { SortAscendingM, SortDescendingM, Close2M, SortAzM, SortZaM } from "@synerise/ds-icon";
+import { useTableLocaleContext } from "../utils/locale.js";
+import { DefaultSortIcon, StringSortIcon } from "./SortIcons.js";
+import { ToggleButton } from "./SortRender.styles.js";
+import { toSortOrder } from "./useSortState.js";
+const handleButtonClick = (event) => {
   event.stopPropagation();
 };
-export var CommonRenderer = function CommonRenderer(_ref) {
-  var column = _ref.column,
-    sortStateApi = _ref.sortStateApi;
-  var getColumnSortOrder = sortStateApi.getColumnSortOrder,
-    setColumnSortOrder = sortStateApi.setColumnSortOrder;
-  var columnKey = String(column.key);
-  var columnSortOrder = column.key ? getColumnSortOrder(columnKey) : null;
-  var onSortOrderChange = partial(setColumnSortOrder, columnKey);
-  var _useState = useState(false),
-    isDropdownVisible = _useState[0],
-    setIsDropdownVisible = _useState[1];
-  var locale = useTableLocaleContext();
-  var handleClick = function handleClick(_ref2) {
-    var key = _ref2.key;
+const CommonRenderer = ({
+  column,
+  sortStateApi
+}) => {
+  const {
+    getColumnSortOrder,
+    setColumnSortOrder
+  } = sortStateApi;
+  const columnKey = String(column.key);
+  const columnSortOrder = column.key ? getColumnSortOrder(columnKey) : null;
+  const onSortOrderChange = partial(setColumnSortOrder, columnKey);
+  const [isDropdownVisible, setIsDropdownVisible] = useState(false);
+  const locale = useTableLocaleContext();
+  const handleClick = ({
+    key
+  }) => {
     onSortOrderChange(toSortOrder(String(key)));
   };
-  var dropdownDataSource = [{
-    key: 'ascend',
+  const dropdownDataSource = [{
+    key: "ascend",
     onClick: handleClick,
-    prefixel: /*#__PURE__*/React.createElement(Icon, {
-      component: /*#__PURE__*/React.createElement(SortAscendingM, null)
-    }),
-    selected: columnSortOrder === 'ascend',
+    prefixel: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(SortAscendingM, {}) }),
+    selected: columnSortOrder === "ascend",
     text: locale.columnSortAscend
   }, {
-    key: 'descend',
-    prefixel: /*#__PURE__*/React.createElement(Icon, {
-      component: /*#__PURE__*/React.createElement(SortDescendingM, null)
-    }),
-    selected: columnSortOrder === 'descend',
+    key: "descend",
+    prefixel: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(SortDescendingM, {}) }),
+    selected: columnSortOrder === "descend",
     onClick: handleClick,
     text: locale.columnSortDescend
   }];
   if (columnSortOrder) {
     dropdownDataSource.push({
-      key: 'null',
-      type: 'danger',
-      prefixel: /*#__PURE__*/React.createElement(Icon, {
-        component: /*#__PURE__*/React.createElement(Close2M, null)
-      }),
+      key: "null",
+      type: "danger",
+      prefixel: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(Close2M, {}) }),
       text: locale.columnSortClear,
       onClick: handleClick
     });
   }
-  return /*#__PURE__*/React.createElement("div", {
-    onClick: handleButtonClick
-  }, /*#__PURE__*/React.createElement(DropdownMenu, {
-    dataSource: dropdownDataSource,
-    onOpenChange: function onOpenChange(isVisible) {
-      if (isVisible !== isDropdownVisible) {
-        setIsDropdownVisible(isVisible);
-      }
-    },
-    open: isDropdownVisible,
-    popoverProps: {
-      testId: 'table-sort-common'
+  return /* @__PURE__ */ jsx("div", { onClick: handleButtonClick, children: /* @__PURE__ */ jsx(DropdownMenu, { dataSource: dropdownDataSource, onOpenChange: (isVisible) => {
+    if (isVisible !== isDropdownVisible) {
+      setIsDropdownVisible(isVisible);
     }
-  }, /*#__PURE__*/React.createElement(S.ToggleButton, {
-    isVisible: isDropdownVisible,
-    type: "ghost",
-    mode: "single-icon",
-    className: "ds-sort-dropdown-button",
-    "data-testid": "table-common-sorter-button"
-  }, /*#__PURE__*/React.createElement(DefaultSortIcon, {
-    sortOrder: columnSortOrder
-  }))));
+  }, open: isDropdownVisible, popoverProps: {
+    testId: "table-sort-common"
+  }, children: /* @__PURE__ */ jsx(ToggleButton, { isVisible: isDropdownVisible, type: "ghost", mode: "single-icon", className: "ds-sort-dropdown-button", "data-testid": "table-common-sorter-button", children: /* @__PURE__ */ jsx(DefaultSortIcon, { sortOrder: columnSortOrder }) }) }) });
 };
-export var StringRenderer = function StringRenderer(_ref3) {
-  var column = _ref3.column,
-    sortStateApi = _ref3.sortStateApi;
-  var getColumnSortOrder = sortStateApi.getColumnSortOrder,
-    setColumnSortOrder = sortStateApi.setColumnSortOrder;
-  var columnKey = String(column.key);
-  var columnSortOrder = column.key ? getColumnSortOrder(columnKey) : null;
-  var onSortOrderChange = partial(setColumnSortOrder, columnKey);
-  var _useState2 = useState(false),
-    isDropdownVisible = _useState2[0],
-    setIsDropdownVisible = _useState2[1];
-  var locale = useTableLocaleContext();
-  var handleClick = function handleClick(data) {
+const StringRenderer = ({
+  column,
+  sortStateApi
+}) => {
+  const {
+    getColumnSortOrder,
+    setColumnSortOrder
+  } = sortStateApi;
+  const columnKey = String(column.key);
+  const columnSortOrder = column.key ? getColumnSortOrder(columnKey) : null;
+  const onSortOrderChange = partial(setColumnSortOrder, columnKey);
+  const [isDropdownVisible, setIsDropdownVisible] = useState(false);
+  const locale = useTableLocaleContext();
+  const handleClick = (data) => {
     onSortOrderChange(toSortOrder(String(data.key)));
   };
-  var dropdownDataSource = [{
-    key: 'ascend',
-    prefixel: /*#__PURE__*/React.createElement(Icon, {
-      component: /*#__PURE__*/React.createElement(SortAzM, null)
-    }),
-    selected: columnSortOrder === 'ascend',
+  const dropdownDataSource = [{
+    key: "ascend",
+    prefixel: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(SortAzM, {}) }),
+    selected: columnSortOrder === "ascend",
     text: locale.columnSortAz,
     onClick: handleClick
   }, {
-    key: 'descend',
-    prefixel: /*#__PURE__*/React.createElement(Icon, {
-      component: /*#__PURE__*/React.createElement(SortZaM, null)
-    }),
-    selected: columnSortOrder === 'descend',
+    key: "descend",
+    prefixel: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(SortZaM, {}) }),
+    selected: columnSortOrder === "descend",
     text: locale.columnSortZa,
     onClick: handleClick
   }];
   if (columnSortOrder) {
     dropdownDataSource.push({
-      key: 'null',
-      type: 'danger',
-      prefixel: /*#__PURE__*/React.createElement(Icon, {
-        component: /*#__PURE__*/React.createElement(Close2M, null)
-      }),
+      key: "null",
+      type: "danger",
+      prefixel: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(Close2M, {}) }),
       text: locale.columnSortClear,
       onClick: handleClick
     });
   }
-  return /*#__PURE__*/React.createElement("div", {
-    onClick: handleButtonClick
-  }, /*#__PURE__*/React.createElement(DropdownMenu, {
-    onOpenChange: setIsDropdownVisible,
-    open: isDropdownVisible,
-    dataSource: dropdownDataSource,
-    popoverProps: {
-      testId: 'table-sort-string'
-    }
-  }, /*#__PURE__*/React.createElement(S.ToggleButton, {
-    isVisible: isDropdownVisible,
-    type: "ghost",
-    mode: "single-icon",
-    className: "ds-sort-dropdown-button",
-    "data-testid": "table-string-sorter-button"
-  }, /*#__PURE__*/React.createElement(StringSortIcon, {
-    sortOrder: columnSortOrder
-  }))));
-};
+  return /* @__PURE__ */ jsx("div", { onClick: handleButtonClick, children: /* @__PURE__ */ jsx(DropdownMenu, { onOpenChange: setIsDropdownVisible, open: isDropdownVisible, dataSource: dropdownDataSource, popoverProps: {
+    testId: "table-sort-string"
+  }, children: /* @__PURE__ */ jsx(ToggleButton, { isVisible: isDropdownVisible, type: "ghost", mode: "single-icon", className: "ds-sort-dropdown-button", "data-testid": "table-string-sorter-button", children: /* @__PURE__ */ jsx(StringSortIcon, { sortOrder: columnSortOrder }) }) }) });
+};
+export {
+  CommonRenderer,
+  StringRenderer
+};

package/dist/ColumnSortMenu/TitleWithSort.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type TitleWithSortProps } from '../Table.types';
+import { default as React } from 'react';
+import { TitleWithSortProps } from '../Table.types';
 export declare const TitleWithSort: <T>({ column, sortRender, titleProps, ...spanProps }: TitleWithSortProps<T>) => React.ReactElement;
 export default TitleWithSort;

package/dist/ColumnSortMenu/TitleWithSort.js

@@ -1,17 +1,20 @@
-var _excluded = ["column", "sortRender", "titleProps"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React from 'react';
-import createReplaceButtonsPortal from './replaceSortButtons';
-export var TitleWithSort = function TitleWithSort(_ref) {
-  var column = _ref.column,
-    sortRender = _ref.sortRender,
-    titleProps = _ref.titleProps,
-    spanProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var itemRef = React.useRef(null);
-  var ReplaceButtonsPortal = createReplaceButtonsPortal(itemRef.current, sortRender);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", _extends({
-    ref: itemRef
-  }, spanProps), typeof column.title === 'function' ? column.title(titleProps) : column.title), /*#__PURE__*/React.createElement(ReplaceButtonsPortal, null));
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import React from "react";
+import createReplaceButtonsPortal from "./replaceSortButtons.js";
+const TitleWithSort = ({
+  column,
+  sortRender,
+  titleProps,
+  ...spanProps
+}) => {
+  const itemRef = React.useRef(null);
+  const ReplaceButtonsPortal = createReplaceButtonsPortal(itemRef.current, sortRender);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { ref: itemRef, ...spanProps, children: typeof column.title === "function" ? column.title(titleProps) : column.title }),
+    /* @__PURE__ */ jsx(ReplaceButtonsPortal, {})
+  ] });
+};
+export {
+  TitleWithSort,
+  TitleWithSort as default
 };
-export default TitleWithSort;