@synerise/ds-table 0.56.7 → 0.56.8

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.56.8](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@0.56.7...@synerise/ds-table@0.56.8) (2024-09-13)
+
+
+### Bug Fixes
+
+* **table:** allow htmlattributes on cell divs ([f4cf677](https://github.com/synerise/synerise-design/commit/f4cf6773add2a4e8ce62dc83d42ae93f2c8d27b0))
+* **table:** skeleton dimensions ([1f14222](https://github.com/synerise/synerise-design/commit/1f1422234ad298e8dd406e59bf98982d0e40ad97))
+
+
+
+
+
 ## [0.56.7](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@0.56.6...@synerise/ds-table@0.56.7) (2024-09-11)
 
 **Note:** Version bump only for package @synerise/ds-table

package/dist/Cell/Action/ActionCell.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
-import { Props } from './ActionCell.types';
-declare const _default: React.NamedExoticComponent<Props>;
+import React from 'react';
+import { ActionCellProps } from './ActionCell.types';
+declare const _default: React.MemoExoticComponent<({ children, gapSize, contentAlign, ...htmlAttributes }: ActionCellProps) => React.JSX.Element>;
 export default _default;

package/dist/Cell/Action/ActionCell.js

@@ -1,16 +1,25 @@
-import * as React from 'react';
+var _excluded = ["children", "gapSize", "contentAlign"];
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React from 'react';
 import * as S from './ActionCell.styles';
+var DEFAULT_GAP_SIZE = 24;
 
 var ActionCell = function ActionCell(_ref) {
   var children = _ref.children,
       _ref$gapSize = _ref.gapSize,
-      gapSize = _ref$gapSize === void 0 ? 24 : _ref$gapSize,
+      gapSize = _ref$gapSize === void 0 ? DEFAULT_GAP_SIZE : _ref$gapSize,
       _ref$contentAlign = _ref.contentAlign,
-      contentAlign = _ref$contentAlign === void 0 ? 'right' : _ref$contentAlign;
-  return /*#__PURE__*/React.createElement(S.ActionCell, {
+      contentAlign = _ref$contentAlign === void 0 ? 'right' : _ref$contentAlign,
+      htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(S.ActionCell, _extends({
     gapSize: gapSize,
     contentAlign: contentAlign
-  }, children);
+  }, htmlAttributes), children);
 };
 
 export default React.memo(ActionCell);

package/dist/Cell/Action/ActionCell.types.d.ts

@@ -1,7 +1,12 @@
-import * as React from 'react';
+import { ReactNode } from 'react';
+import { WithHTMLAttributes } from '@synerise/ds-utils';
 export type ContentAlign = 'left' | 'right' | 'center';
-export interface Props {
-    children: React.ReactNode | React.ReactNode[];
+export type ActionCellProps = WithHTMLAttributes<HTMLDivElement, {
+    children: ReactNode | ReactNode[];
     gapSize?: number;
     contentAlign?: ContentAlign;
-}
+}>;
+/**
+ *  @deprecated
+ */
+export type Props = ActionCellProps;

package/dist/Cell/AvatarLabel/AvatarLabel.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { AvatarLabelProps } from './AvatarLabel.types';
-declare const AvatarLabel: ({ avatar, avatarAction, avatarLink, title, labels, icon, ellipsis, maxWidth, avatarSize, loader, }: AvatarLabelProps) => React.JSX.Element;
+declare const AvatarLabel: ({ avatar, avatarAction, avatarLink, title, labels, icon, ellipsis, maxWidth, avatarSize, loader, ...htmlAttributes }: AvatarLabelProps) => React.JSX.Element;
 export default AvatarLabel;

package/dist/Cell/AvatarLabel/AvatarLabel.js

@@ -1,5 +1,9 @@
+var _excluded = ["avatar", "avatarAction", "avatarLink", "title", "labels", "icon", "ellipsis", "maxWidth", "avatarSize", "loader"];
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 import React from 'react';
 import { v4 as uuid } from 'uuid';
 import * as S from './AvatarLabel.styles';
@@ -14,7 +18,9 @@ var AvatarLabel = function AvatarLabel(_ref) {
       ellipsis = _ref.ellipsis,
       maxWidth = _ref.maxWidth,
       avatarSize = _ref.avatarSize,
-      loader = _ref.loader;
+      loader = _ref.loader,
+      htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
+
   var titleEllipsisProps = ellipsis ? {
     ellipsis: {
       tooltip: title
@@ -43,9 +49,9 @@ var AvatarLabel = function AvatarLabel(_ref) {
       key: uuid()
     }, label);
   })), loader && /*#__PURE__*/React.createElement(S.Loader, null, loader)));
-  return /*#__PURE__*/React.createElement(S.AvatarLabel, {
+  return /*#__PURE__*/React.createElement(S.AvatarLabel, _extends({}, htmlAttributes, {
     onClick: avatarAction
-  }, avatarLink ? /*#__PURE__*/React.createElement(S.AvatarLink, {
+  }), avatarLink ? /*#__PURE__*/React.createElement(S.AvatarLink, {
     href: avatarLink,
     onClick: handleLinkClick
   }, cellContent) : cellContent);

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

@@ -1,5 +1,6 @@
 import { ReactElement, ReactNode } from 'react';
-export type AvatarLabelProps = {
+import type { WithHTMLAttributes } from '@synerise/ds-utils';
+export type AvatarLabelProps = WithHTMLAttributes<HTMLDivElement, {
     avatar: ReactElement;
     avatarAction?: () => void;
     avatarLink?: string;
@@ -11,5 +12,8 @@ export type AvatarLabelProps = {
     maxWidth?: number;
     avatarSize?: string | 'large';
     loader?: ReactElement;
-};
+}>;
+/**
+ *  @deprecated
+ */
 export type Props = AvatarLabelProps;

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

@@ -1,5 +1,10 @@
-export interface Props {
+import { WithHTMLAttributes } from '@synerise/ds-utils';
+export type CopyableCellProps = WithHTMLAttributes<HTMLDivElement, {
     value: string;
     confirmMessage: string;
     tooltipTimeout: number;
-}
+}>;
+/**
+ *  @deprecated
+ */
+export type Props = CopyableCellProps;

package/dist/Cell/Copyable/CopyableCell.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
-import { Props } from './Copyable.types';
-declare const CopyableCell: React.FC<Props>;
+import React from 'react';
+import { CopyableCellProps } from './Copyable.types';
+declare const CopyableCell: ({ value, confirmMessage, tooltipTimeout, ...htmlAttributes }: CopyableCellProps) => React.JSX.Element;
 export default CopyableCell;

package/dist/Cell/Copyable/CopyableCell.js

@@ -1,20 +1,26 @@
-import * as React from 'react';
+var _excluded = ["value", "confirmMessage", "tooltipTimeout"];
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React, { useState, useCallback, useEffect } from 'react';
 import * as copy from 'copy-to-clipboard';
 import Icon, { CopyClipboardM } from '@synerise/ds-icon';
 import Tooltip from '@synerise/ds-tooltip';
 import * as S from './Copyable.styles';
+var DEFAULT_TIMEOUT = 2000;
 
 var CopyableCell = function CopyableCell(_ref) {
   var value = _ref.value,
       confirmMessage = _ref.confirmMessage,
       _ref$tooltipTimeout = _ref.tooltipTimeout,
-      tooltipTimeout = _ref$tooltipTimeout === void 0 ? 2000 : _ref$tooltipTimeout;
+      tooltipTimeout = _ref$tooltipTimeout === void 0 ? DEFAULT_TIMEOUT : _ref$tooltipTimeout,
+      htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-  var _React$useState = React.useState(false),
-      tooltipVisible = _React$useState[0],
-      setTooltipVisible = _React$useState[1];
+  var _useState = useState(false),
+      tooltipVisible = _useState[0],
+      setTooltipVisible = _useState[1];
 
-  React.useEffect(function () {
+  useEffect(function () {
     var timer = setTimeout(function () {
       setTooltipVisible(false);
     }, tooltipTimeout);
@@ -22,10 +28,10 @@ var CopyableCell = function CopyableCell(_ref) {
       return clearTimeout(timer);
     };
   }, [tooltipVisible, setTooltipVisible, tooltipTimeout]);
-  var handleCopy = React.useCallback(function () {
+  var handleCopy = useCallback(function () {
     if (copy(value)) setTooltipVisible(true);
   }, [value]);
-  return /*#__PURE__*/React.createElement(S.Copyable, null, /*#__PURE__*/React.createElement("span", null, value), /*#__PURE__*/React.createElement(Tooltip, {
+  return /*#__PURE__*/React.createElement(S.Copyable, htmlAttributes, /*#__PURE__*/React.createElement("span", null, value), /*#__PURE__*/React.createElement(Tooltip, {
     visible: tooltipVisible,
     title: confirmMessage,
     placement: "left"

package/dist/Cell/Editable/EditableCell.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
-import { Props } from './EditableCell.types';
-declare const EditableCell: React.FC<Props>;
+import React from 'react';
+import { EditableCellProps } from './EditableCell.types';
+declare const EditableCell: ({ value, onChange, placeholder, ...htmlAttributes }: EditableCellProps) => React.JSX.Element;
 export default EditableCell;

package/dist/Cell/Editable/EditableCell.js

@@ -1,4 +1,8 @@
-import * as React from 'react';
+var _excluded = ["value", "onChange", "placeholder"];
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React, { useMemo, useCallback, useState } from 'react';
 import Icon, { EditNolineS } from '@synerise/ds-icon';
 import { Input } from '@synerise/ds-input';
 import * as S from './EditableCell.styles';
@@ -6,20 +10,21 @@ import * as S from './EditableCell.styles';
 var EditableCell = function EditableCell(_ref) {
   var value = _ref.value,
       onChange = _ref.onChange,
-      placeholder = _ref.placeholder;
+      placeholder = _ref.placeholder,
+      htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-  var _React$useState = React.useState(false),
-      editMode = _React$useState[0],
-      setEditMode = _React$useState[1];
+  var _useState = useState(false),
+      editMode = _useState[0],
+      setEditMode = _useState[1];
 
-  var _React$useState2 = React.useState(value || ''),
-      editValue = _React$useState2[0],
-      setEditValue = _React$useState2[1];
+  var _useState2 = useState(value || ''),
+      editValue = _useState2[0],
+      setEditValue = _useState2[1];
 
-  var enterEditMode = React.useCallback(function () {
+  var enterEditMode = useCallback(function () {
     setEditMode(true);
   }, [setEditMode]);
-  var render = React.useMemo(function () {
+  var render = useMemo(function () {
     return editMode ?
     /*#__PURE__*/
     // eslint-disable-next-line react/jsx-handler-names
@@ -42,7 +47,7 @@ var EditableCell = function EditableCell(_ref) {
       component: /*#__PURE__*/React.createElement(EditNolineS, null)
     }));
   }, [editMode, value, enterEditMode, editValue, setEditValue, onChange, placeholder]);
-  return /*#__PURE__*/React.createElement(S.EditableCell, null, render);
+  return /*#__PURE__*/React.createElement(S.EditableCell, htmlAttributes, render);
 };
 
 export default EditableCell;

package/dist/Cell/Editable/EditableCell.types.d.ts

@@ -1,5 +1,10 @@
-export interface Props {
-    value: string | undefined;
+import { WithHTMLAttributes } from '@synerise/ds-utils';
+export type EditableCellProps = WithHTMLAttributes<HTMLDivElement, {
+    value?: string;
     onChange: (newValue: string) => void;
     placeholder?: string;
-}
+}>;
+/**
+ *  @deprecated
+ */
+export type Props = EditableCellProps;

package/dist/Cell/FlagLabel/FlagLabelCell.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
-import { Props } from './FlagLabelCell.types';
-declare const FlagLabelCell: React.FC<Props>;
+import React from 'react';
+import { FlagLabelProps } from './FlagLabelCell.types';
+declare const FlagLabelCell: ({ countryCode, label, ...htmlAttributes }: FlagLabelProps) => React.JSX.Element;
 export default FlagLabelCell;

package/dist/Cell/FlagLabel/FlagLabelCell.js

@@ -1,11 +1,17 @@
+var _excluded = ["countryCode", "label"];
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React from 'react';
 import DSFlag from '@synerise/ds-flag';
-import * as React from 'react';
 import * as S from './FlagLabelCell.styles';
 
 var FlagLabelCell = function FlagLabelCell(_ref) {
   var countryCode = _ref.countryCode,
-      label = _ref.label;
-  return /*#__PURE__*/React.createElement(S.FlagLabel, null, /*#__PURE__*/React.createElement(DSFlag, {
+      label = _ref.label,
+      htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(S.FlagLabel, htmlAttributes, /*#__PURE__*/React.createElement(DSFlag, {
     country: countryCode,
     size: 20
   }), /*#__PURE__*/React.createElement("span", null, label));

package/dist/Cell/FlagLabel/FlagLabelCell.types.d.ts

@@ -1,5 +1,10 @@
 import { CountryCode } from '@synerise/ds-flag/dist/Flag.types';
-export interface Props {
+import { WithHTMLAttributes } from '@synerise/ds-utils';
+export type FlagLabelProps = WithHTMLAttributes<HTMLDivElement, {
     countryCode: CountryCode;
     label: string;
-}
+}>;
+/**
+ *  @deprecated
+ */
+export type Props = FlagLabelProps;

package/dist/Cell/IconLabel/IconLabel.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
-import { Props } from './IconLabel.types';
-declare const IconLabelCell: React.FC<Props>;
+import React from 'react';
+import { IconLabelProps } from './IconLabel.types';
+declare const IconLabelCell: ({ label, icon, ...htmlAttributes }: IconLabelProps) => React.JSX.Element;
 export default IconLabelCell;

package/dist/Cell/IconLabel/IconLabel.js

@@ -1,11 +1,17 @@
-import * as React from 'react';
+var _excluded = ["label", "icon"];
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React from 'react';
 import Icon from '@synerise/ds-icon';
 import * as S from './IconLabel.styles';
 
 var IconLabelCell = function IconLabelCell(_ref) {
   var label = _ref.label,
-      icon = _ref.icon;
-  return /*#__PURE__*/React.createElement(S.IconLabelCell, null, /*#__PURE__*/React.createElement(Icon, icon), /*#__PURE__*/React.createElement("span", null, label));
+      icon = _ref.icon,
+      htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(S.IconLabelCell, htmlAttributes, /*#__PURE__*/React.createElement(Icon, icon), /*#__PURE__*/React.createElement("span", null, label));
 };
 
 export default IconLabelCell;

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

@@ -1,5 +1,10 @@
 import { IconProps } from '@synerise/ds-icon';
-export interface Props {
+import { WithHTMLAttributes } from '@synerise/ds-utils';
+export type IconLabelProps = WithHTMLAttributes<HTMLDivElement, {
     label: string;
     icon: IconProps;
-}
+}>;
+/**
+ *  @deprecated
+ */
+export type Props = IconLabelProps;

package/dist/Cell/IconTooltipCell/IconTooltipCell.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
-import { Props } from './IconTooltipCell.types';
-declare const IconTooltipCell: React.FC<Props>;
+import React from 'react';
+import { IconTooltipCellProps } from './IconTooltipCell.types';
+declare const IconTooltipCell: ({ label, icon, tooltip, tooltipIcon, ...htmlAttributes }: IconTooltipCellProps) => React.JSX.Element;
 export default IconTooltipCell;

package/dist/Cell/IconTooltipCell/IconTooltipCell.js

@@ -1,6 +1,10 @@
+var _excluded = ["label", "icon", "tooltip", "tooltipIcon"];
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import * as React from 'react';
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React from 'react';
 import Icon from '@synerise/ds-icon';
 import Tooltip from '@synerise/ds-tooltip';
 import * as S from './IconTooltipCell.styles';
@@ -12,8 +16,10 @@ var IconTooltipCell = function IconTooltipCell(_ref) {
       _ref$tooltip = _ref.tooltip,
       tooltip = _ref$tooltip === void 0 ? {} : _ref$tooltip,
       _ref$tooltipIcon = _ref.tooltipIcon,
-      tooltipIcon = _ref$tooltipIcon === void 0 ? {} : _ref$tooltipIcon;
-  return /*#__PURE__*/React.createElement(S.IconTooltipCell, null, !!icon && /*#__PURE__*/React.createElement(Icon, _extends({
+      tooltipIcon = _ref$tooltipIcon === void 0 ? {} : _ref$tooltipIcon,
+      htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(S.IconTooltipCell, htmlAttributes, !!icon && /*#__PURE__*/React.createElement(Icon, _extends({
     className: "main-icon"
   }, icon)), !!label && /*#__PURE__*/React.createElement(S.Label, null, label), tooltipIcon && /*#__PURE__*/React.createElement(Tooltip, tooltip, /*#__PURE__*/React.createElement(Icon, _extends({
     className: "tooltip-icon"

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

@@ -1,9 +1,14 @@
 /// <reference types="react" />
 import { IconProps } from '@synerise/ds-icon';
 import TooltipExtendedProps from '@synerise/ds-tooltip/dist/Tooltip.types';
-export interface Props {
+import { WithHTMLAttributes } from '@synerise/ds-utils';
+export type IconTooltipCellProps = WithHTMLAttributes<HTMLDivElement, {
     label?: React.ReactNode;
     icon?: IconProps;
     tooltipIcon?: IconProps;
     tooltip?: TooltipExtendedProps;
-}
+}>;
+/**
+ *  @deprecated
+ */
+export type Props = IconTooltipCellProps;

package/dist/Cell/LabelsWithShowMore/LabelsWithShowMore.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { Props } from './LabelsWithShowMore.types';
+import React from 'react';
+import { LabelsWithShowMoreProps } from './LabelsWithShowMore.types';
 import { DataSourceType } from './Modal/Modal.types';
-declare const LabelsWithShowMore: React.FC<Props<DataSourceType>>;
+declare const LabelsWithShowMore: ({ items, numberOfVisibleItems, renderItem, labelKey, texts, loading, ...htmlAttributes }: LabelsWithShowMoreProps<DataSourceType>) => React.JSX.Element;
 export default LabelsWithShowMore;

package/dist/Cell/LabelsWithShowMore/LabelsWithShowMore.js

@@ -1,4 +1,8 @@
-import * as React from 'react';
+var _excluded = ["items", "numberOfVisibleItems", "renderItem", "labelKey", "texts", "loading"];
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React, { useState, useMemo } from 'react';
 import Tooltip from '@synerise/ds-tooltip';
 import * as S from './LabelsWithShowMore.styles';
 import DetailsModal from './Modal/Modal';
@@ -9,21 +13,22 @@ var LabelsWithShowMore = function LabelsWithShowMore(_ref) {
       renderItem = _ref.renderItem,
       labelKey = _ref.labelKey,
       texts = _ref.texts,
-      loading = _ref.loading;
+      loading = _ref.loading,
+      htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-  var _React$useState = React.useState(false),
-      modalVisible = _React$useState[0],
-      setModalVisible = _React$useState[1];
+  var _useState = useState(false),
+      modalVisible = _useState[0],
+      setModalVisible = _useState[1];
 
-  var diff = React.useMemo(function () {
+  var diff = useMemo(function () {
     return items.length - numberOfVisibleItems;
   }, [items, numberOfVisibleItems]);
-  var labels = React.useMemo(function () {
+  var labels = useMemo(function () {
     return items.slice(0, numberOfVisibleItems).map(function (item) {
       return item[labelKey];
     }).join(', ');
   }, [items, labelKey, numberOfVisibleItems]);
-  return /*#__PURE__*/React.createElement(S.CellWrapper, null, /*#__PURE__*/React.createElement(S.Labels, null, labels), diff > 0 && /*#__PURE__*/React.createElement(Tooltip, {
+  return /*#__PURE__*/React.createElement(S.CellWrapper, htmlAttributes, /*#__PURE__*/React.createElement(S.Labels, null, labels), diff > 0 && /*#__PURE__*/React.createElement(Tooltip, {
     title: "" + texts.tooltip
   }, /*#__PURE__*/React.createElement(S.MoreInfo, {
     onClick: function onClick() {

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

@@ -1,16 +1,21 @@
-import * as React from 'react';
+import { ReactNode, Component } from 'react';
+import { WithHTMLAttributes } from '@synerise/ds-utils';
 export type ShowMoreTexts = {
-    tooltip: string | React.ReactNode;
+    tooltip: ReactNode;
     searchPlaceholder: string;
     searchClear: string;
-    modalTitle: string | React.ReactNode;
-    records: string | React.ReactNode;
+    modalTitle: ReactNode;
+    records: ReactNode;
 };
-export type Props<T extends object> = {
+export type LabelsWithShowMoreProps<T extends object> = WithHTMLAttributes<HTMLDivElement, {
     items: T[];
     numberOfVisibleItems: number;
     labelKey: string;
-    renderItem: (label: string, item: T) => JSX.Element | React.Component;
+    renderItem: (label: string, item: T) => JSX.Element | Component;
     texts: ShowMoreTexts;
     loading?: boolean;
-};
+}>;
+/**
+ *  @deprecated
+ */
+export type Props<T extends object> = LabelsWithShowMoreProps<T>;