@synerise/ds-table-new 0.1.0

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

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { IconProps } from '@synerise/ds-icon';
+import { WithHTMLAttributes } from '@synerise/ds-utils';
+export type BaseIconLabelProps = {
+    label?: ReactNode;
+    icon?: IconProps;
+    disabled?: boolean;
+};
+export type IconLabelProps = WithHTMLAttributes<HTMLDivElement, BaseIconLabelProps>;
+/**
+ *  @deprecated
+ */
+export type Props = IconLabelProps;

package/dist/components/Cell/IconLabel/IconLabel.types.js

@@ -0,0 +1 @@
+

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

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

package/dist/components/Cell/IconTooltipCell/IconTooltipCell.js

@@ -0,0 +1,19 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import Icon from "@synerise/ds-icon";
+import Tooltip from "@synerise/ds-tooltip";
+import { IconTooltipCell as IconTooltipCell$1, Label } from "./IconTooltipCell.styles.js";
+const IconTooltipCell = ({
+  label,
+  icon,
+  tooltip = {},
+  tooltipIcon,
+  disabled,
+  ...htmlAttributes
+}) => /* @__PURE__ */ jsxs(IconTooltipCell$1, { ...htmlAttributes, isDisabled: disabled, children: [
+  icon && /* @__PURE__ */ jsx(Icon, { className: "main-icon", ...icon }),
+  label && /* @__PURE__ */ jsx(Label, { children: label }),
+  tooltipIcon && /* @__PURE__ */ jsx(Tooltip, { ...tooltip, children: /* @__PURE__ */ jsx(Icon, { className: "tooltip-icon", ...tooltipIcon }) })
+] });
+export {
+  IconTooltipCell
+};

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

@@ -0,0 +1,4 @@
+export declare const IconTooltipCell: import('styled-components').StyledComponent<"span", any, {
+    isDisabled?: boolean;
+}, never>;
+export declare const Label: import('styled-components').StyledComponent<"span", any, {}, never>;

package/dist/components/Cell/IconTooltipCell/IconTooltipCell.styles.js

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+const IconTooltipCell = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "IconTooltipCellstyles__IconTooltipCell",
+  componentId: "sc-17a3ek9-0"
+})(["display:flex;flex-direction:row;align-items:center;white-space:nowrap;justify-content:flex-start;", " .main-icon{svg{fill:", ";}}.tooltip-icon{svg{fill:", ";}}"], (props) => props.isDisabled && "opacity: 0.4;", (props) => props.theme.palette["grey-600"], (props) => props.theme.palette["grey-400"]);
+const Label = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "IconTooltipCellstyles__Label",
+  componentId: "sc-17a3ek9-1"
+})(["margin-left:4px;display:flex;white-space:nowrap;"]);
+export {
+  IconTooltipCell,
+  Label
+};

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

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { IconProps } from '@synerise/ds-icon';
+import { TooltipProps } from '@synerise/ds-tooltip';
+import { WithHTMLAttributes } from '@synerise/ds-utils';
+export type BaseIconTooltipCellProps = {
+    label?: ReactNode;
+    icon?: IconProps;
+    tooltipIcon?: IconProps;
+    tooltip?: TooltipProps;
+    disabled?: boolean;
+};
+export type IconTooltipCellProps = WithHTMLAttributes<HTMLDivElement, BaseIconTooltipCellProps>;
+/**
+ *  @deprecated
+ */
+export type Props = IconTooltipCellProps;

package/dist/components/Cell/IconTooltipCell/IconTooltipCell.types.js

@@ -0,0 +1 @@
+

package/dist/components/Cell/InputNumber/InputNumberCell.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { InputNumberCellProps } from './InputNumberCell.types';
+declare const InputNumberCell: ({ inputNumberProps, disabled, ...htmlAttributes }: InputNumberCellProps) => React.JSX.Element;
+export { InputNumberCell };

package/dist/components/Cell/InputNumber/InputNumberCell.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+import InputNumber from "@synerise/ds-input-number";
+import { InputNumberCell as InputNumberCell$1 } from "./InputNumberCell.styles.js";
+const InputNumberCell = ({
+  inputNumberProps,
+  disabled,
+  ...htmlAttributes
+}) => /* @__PURE__ */ jsx(InputNumberCell$1, { ...htmlAttributes, isDisabled: disabled, children: /* @__PURE__ */ jsx(InputNumber, { raw: true, disabled, ...inputNumberProps }) });
+export {
+  InputNumberCell
+};

package/dist/components/Cell/InputNumber/InputNumberCell.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const InputNumberCell: import('styled-components').StyledComponent<"div", any, {
+    isDisabled?: boolean;
+}, never>;

package/dist/components/Cell/InputNumber/InputNumberCell.styles.js

@@ -0,0 +1,11 @@
+import styled from "styled-components";
+const InputNumberCell = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "InputNumberCellstyles__InputNumberCell",
+  componentId: "sc-84nkjs-0"
+})(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;", " max-width:100%;min-width:80px;"], (props) => props.isDisabled && `
+    opacity: 0.4;
+    pointer-events: none;
+    `);
+export {
+  InputNumberCell
+};

package/dist/components/Cell/InputNumber/InputNumberCell.types.d.ts

@@ -0,0 +1,7 @@
+import { InputNumberProps } from '@synerise/ds-input-number';
+import { WithHTMLAttributes } from '@synerise/ds-utils';
+export type BaseInputNumberCellProps = {
+    inputNumberProps?: InputNumberProps;
+    disabled?: boolean;
+};
+export type InputNumberCellProps = WithHTMLAttributes<HTMLDivElement, BaseInputNumberCellProps>;

package/dist/components/Cell/InputNumber/InputNumberCell.types.js

@@ -0,0 +1 @@
+

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

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

package/dist/components/Cell/LabelsWithShowMore/LabelsWithShowMore.js

@@ -0,0 +1,33 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useMemo } from "react";
+import Tooltip from "@synerise/ds-tooltip";
+import { CellWrapper, Labels, MoreInfo } from "./LabelsWithShowMore.styles.js";
+import { DetailsModal } from "./Modal/Modal.js";
+const LabelsWithShowMore = ({
+  items,
+  numberOfVisibleItems,
+  renderItem,
+  labelKey,
+  texts,
+  loading,
+  ...htmlAttributes
+}) => {
+  const [modalVisible, setModalVisible] = useState(false);
+  const diff = useMemo(() => {
+    return items.length - numberOfVisibleItems;
+  }, [items, numberOfVisibleItems]);
+  const labels = useMemo(() => {
+    return items.slice(0, numberOfVisibleItems).map((item) => item[labelKey]).join(", ");
+  }, [items, labelKey, numberOfVisibleItems]);
+  return /* @__PURE__ */ jsxs(CellWrapper, { ...htmlAttributes, children: [
+    /* @__PURE__ */ jsx(Labels, { children: labels }),
+    diff > 0 && /* @__PURE__ */ jsx(Tooltip, { title: `${texts.tooltip}`, children: /* @__PURE__ */ jsxs(MoreInfo, { onClick: () => setModalVisible(true), children: [
+      "+",
+      diff
+    ] }) }),
+    /* @__PURE__ */ jsx(DetailsModal, { visible: modalVisible, hide: () => setModalVisible(false), items, renderItem, labelKey, texts, loading })
+  ] });
+};
+export {
+  LabelsWithShowMore
+};

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

@@ -0,0 +1,3 @@
+export declare const CellWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const MoreInfo: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Labels: import('styled-components').StyledComponent<"span", any, {}, never>;

package/dist/components/Cell/LabelsWithShowMore/LabelsWithShowMore.styles.js

@@ -0,0 +1,18 @@
+import styled from "styled-components";
+const CellWrapper = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "LabelsWithShowMorestyles__CellWrapper",
+  componentId: "sc-553lw5-0"
+})(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;"]);
+const MoreInfo = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "LabelsWithShowMorestyles__MoreInfo",
+  componentId: "sc-553lw5-1"
+})(["font-size:11px;margin-left:8px;color:", ";display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;"], (props) => props.theme.palette["grey-500"]);
+const Labels = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "LabelsWithShowMorestyles__Labels",
+  componentId: "sc-553lw5-2"
+})(["display:block;text-overflow:ellipsis;overflow:hidden;max-width:calc(100% - 32px);"]);
+export {
+  CellWrapper,
+  Labels,
+  MoreInfo
+};

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

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

package/dist/components/Cell/LabelsWithShowMore/LabelsWithShowMore.types.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { DataSourceType, ModalProps } from './Modal.types';
+declare const DetailsModal: ({ visible, hide, items, texts, renderItem, labelKey, loading, }: ModalProps<DataSourceType>) => React.JSX.Element;
+export { DetailsModal };

package/dist/components/Cell/LabelsWithShowMore/Modal/Modal.js

@@ -0,0 +1,37 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useMemo } from "react";
+import Modal from "@synerise/ds-modal";
+import SearchInput from "@synerise/ds-search/dist/Elements/SearchInput/SearchInput";
+import { VirtualTable } from "../../../../VirtualTable.js";
+const DetailsModal = ({
+  visible,
+  hide,
+  items,
+  texts,
+  renderItem,
+  labelKey,
+  loading
+}) => {
+  const [searchQuery, setSearchQuery] = useState("");
+  const columns = useMemo(() => [{
+    id: labelKey,
+    accessorKey: labelKey,
+    cell: (info) => renderItem(info.getValue(), info.row.original)
+  }], [renderItem, labelKey]);
+  const filteredItems = useMemo(() => {
+    return searchQuery !== "" ? items.filter((item) => {
+      const value = item[labelKey];
+      return typeof value === "string" && value.toLowerCase().includes(searchQuery.toLowerCase());
+    }) : items;
+  }, [items, labelKey, searchQuery]);
+  return /* @__PURE__ */ jsx(Modal, { size: "small", visible, title: texts.modalTitle, closable: true, onCancel: hide, bodyStyle: {
+    padding: 0
+  }, footer: null, children: /* @__PURE__ */ jsx(VirtualTable, { maxHeight: 500, cellHeight: 64, data: filteredItems, title: `${filteredItems.length} ${texts.records}`, columns, isLoading: loading, hideTitleBar: true, rowKey: "key", searchComponent: /* @__PURE__ */ jsx(SearchInput, { clearTooltip: texts.searchClear, placeholder: texts.searchPlaceholder, onChange: (value) => {
+    setSearchQuery(value);
+  }, value: searchQuery, onClear: () => {
+    setSearchQuery("");
+  }, closeOnClickOutside: true }), hideColumnNames: true }) });
+};
+export {
+  DetailsModal
+};

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

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { ObjectStringKeys } from '@synerise/ds-utils';
+import { ShowMoreTexts } from '../LabelsWithShowMore.types';
+export type DataSourceType = Record<string, any> & {
+    key: React.ReactText;
+};
+export type ModalProps<T extends DataSourceType> = {
+    visible: boolean;
+    items: T[];
+    hide: () => void;
+    renderItem: (label: string, item: T) => JSX.Element | React.Component;
+    labelKey: ObjectStringKeys<T>;
+    texts: ShowMoreTexts;
+    loading?: boolean;
+};

package/dist/components/Cell/LabelsWithShowMore/Modal/Modal.types.js

@@ -0,0 +1 @@
+

package/dist/components/Cell/Star/StarCell.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { StarCellProps } from './StarCell.types';
+declare const StarCell: ({ children, active, onClick, starTooltip, ...htmlAttributes }: StarCellProps) => React.JSX.Element;
+export { StarCell };

package/dist/components/Cell/Star/StarCell.js

@@ -0,0 +1,25 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useTheme } from "@synerise/ds-core";
+import Icon, { StarFillM, StarM } from "@synerise/ds-icon";
+import Tooltip from "@synerise/ds-tooltip/dist/Tooltip";
+import { StarCell as StarCell$1, StarredIcon } from "./StarCell.styles.js";
+const StarCell = ({
+  children,
+  active,
+  onClick,
+  starTooltip,
+  ...htmlAttributes
+}) => {
+  const theme = useTheme();
+  const icon = useMemo(() => {
+    return active ? /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(StarFillM, {}), color: theme.palette["yellow-600"] }) : /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(StarM, {}), color: theme.palette["grey-300"] });
+  }, [active, theme.palette]);
+  return /* @__PURE__ */ jsxs(StarCell$1, { ...htmlAttributes, children: [
+    /* @__PURE__ */ jsx(Tooltip, { title: starTooltip, children: /* @__PURE__ */ jsx(StarredIcon, { active, component: icon, onClick }) }),
+    children
+  ] });
+};
+export {
+  StarCell
+};

package/dist/components/Cell/Star/StarCell.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const StarCell: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const StarredIcon: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<import('@synerise/ds-icon').BaseIconProps & Omit<import('react').HTMLAttributes<HTMLDivElement>, keyof import('@synerise/ds-icon').BaseIconProps> & import('@synerise/ds-utils').DataAttributes & import('react').RefAttributes<HTMLDivElement>>, any, import('@synerise/ds-icon').BaseIconProps & Omit<import('react').HTMLAttributes<HTMLDivElement>, keyof import('@synerise/ds-icon').BaseIconProps> & import('@synerise/ds-utils').DataAttributes & {
+    active?: boolean;
+    onClick?: () => void;
+}, never>;

package/dist/components/Cell/Star/StarCell.styles.js

@@ -0,0 +1,16 @@
+import styled from "styled-components";
+import Icon from "@synerise/ds-icon";
+const StarCell = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "StarCellstyles__StarCell",
+  componentId: "sc-oacj-0"
+})(["display:flex;align-items:center;justify-content:flex-start;"]);
+const StarredIcon = /* @__PURE__ */ styled(Icon).withConfig({
+  displayName: "StarCellstyles__StarredIcon",
+  componentId: "sc-oacj-1"
+})(["margin-right:16px;", " &:hover{svg{fill:", ";}}"], (props) => !!props.active && `&.icon.icon1.ds-icon svg {
+  fill: ${props.theme.palette["yellow-600"]};
+  }`, (props) => props.active ? props.theme.palette["yellow-600"] : props.onClick && props.theme.palette["blue-600"]);
+export {
+  StarCell,
+  StarredIcon
+};

package/dist/components/Cell/Star/StarCell.types.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { WithHTMLAttributes } from '@synerise/ds-utils';
+export type BaseStarCellProps = {
+    children: ReactNode | ReactNode[];
+    active?: boolean;
+    onClick?: () => void;
+    /** @deprecated theme will be read from Theme Provider */
+    theme?: {
+        [key: string]: string;
+    };
+    starTooltip?: ReactNode;
+};
+export type StarCellProps = WithHTMLAttributes<HTMLDivElement, BaseStarCellProps>;
+/**
+ *  @deprecated
+ */
+export type Props = StarCellProps;

package/dist/components/Cell/Star/StarCell.types.js

@@ -0,0 +1 @@
+

package/dist/components/Cell/StatusLabel/StatusLabel.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { StatusLabelProps } from './StatusLabel.types';
+declare const StatusLabelCell: ({ status, label, customColor, disabled, ...htmlAttributes }: StatusLabelProps) => React.JSX.Element;
+export { StatusLabelCell };

package/dist/components/Cell/StatusLabel/StatusLabel.js

@@ -0,0 +1,18 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import Badge from "@synerise/ds-badge";
+import { StatusLabel, Label } from "./StatusLabel.styles.js";
+const StatusLabelCell = ({
+  status,
+  label,
+  customColor,
+  disabled,
+  ...htmlAttributes
+}) => {
+  return /* @__PURE__ */ jsxs(StatusLabel, { isDisabled: disabled, ...htmlAttributes, children: [
+    /* @__PURE__ */ jsx(Badge, { customColor, status }),
+    /* @__PURE__ */ jsx(Label, { children: label })
+  ] });
+};
+export {
+  StatusLabelCell
+};

package/dist/components/Cell/StatusLabel/StatusLabel.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const StatusLabel: import('styled-components').StyledComponent<"div", any, {
+    isDisabled?: boolean;
+}, never>;
+export declare const Label: import('styled-components').StyledComponent<"span", any, {}, never>;

package/dist/components/Cell/StatusLabel/StatusLabel.styles.js

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+const StatusLabel = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "StatusLabelstyles__StatusLabel",
+  componentId: "sc-1jilb6u-0"
+})(["display:flex;align-items:center;justify-content:flex-start;", ""], (props) => props.isDisabled && "opacity: 0.4;");
+const Label = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "StatusLabelstyles__Label",
+  componentId: "sc-1jilb6u-1"
+})(["color:", ";font-weight:500;font-size:13px;line-height:1.38;"], (props) => props.theme.palette["grey-700"]);
+export {
+  Label,
+  StatusLabel
+};

package/dist/components/Cell/StatusLabel/StatusLabel.types.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { Color, Status } from '@synerise/ds-badge/dist/Badge.types';
+import { WithHTMLAttributes } from '@synerise/ds-utils';
+export type BaseStatusLabelProps = {
+    status?: Status;
+    label: ReactNode;
+    customColor?: Color;
+    disabled?: boolean;
+};
+export type StatusLabelProps = WithHTMLAttributes<HTMLDivElement, BaseStatusLabelProps>;
+/**
+ *  @deprecated
+ */
+export type Props = StatusLabelProps;

package/dist/components/Cell/StatusLabel/StatusLabel.types.js

@@ -0,0 +1 @@
+

package/dist/components/Cell/TagIcon/TagIcon.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { TagIconProps } from './TagIcon.types';
+declare const TagIconCell: ({ children, disabled, ...htmlAttributes }: TagIconProps) => React.JSX.Element;
+export { TagIconCell };

package/dist/components/Cell/TagIcon/TagIcon.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { TagIcon } from "./TagIcon.styles.js";
+const TagIconCell = ({
+  children,
+  disabled,
+  ...htmlAttributes
+}) => /* @__PURE__ */ jsx(TagIcon, { ...htmlAttributes, isDisabled: disabled, children });
+export {
+  TagIconCell
+};

package/dist/components/Cell/TagIcon/TagIcon.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const TagIcon: import('styled-components').StyledComponent<"div", any, {
+    isDisabled?: boolean;
+}, never>;

package/dist/components/Cell/TagIcon/TagIcon.styles.js

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+import { Tag } from "@synerise/ds-tag/dist/Tag.styles";
+const TagIcon = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "TagIconstyles__TagIcon",
+  componentId: "sc-y21tnf-0"
+})(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;", " ", "{margin-right:4px;}"], (props) => props.isDisabled && "opacity: 0.4;", Tag);
+export {
+  TagIcon
+};

package/dist/components/Cell/TagIcon/TagIcon.types.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { WithHTMLAttributes } from '@synerise/ds-utils';
+export type BaseTagIconProps = {
+    children: ReactNode | ReactNode[];
+    disabled?: boolean;
+};
+export type TagIconProps = WithHTMLAttributes<HTMLDivElement, BaseTagIconProps>;
+/**
+ *  @deprecated
+ */
+export type Props = TagIconProps;

package/dist/components/Cell/TagIcon/TagIcon.types.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { TagsGroupProps } from './TagsGroup.types';
+export declare const TagsGroupCell: ({ disabled, isError, isLoading, tagsProps, ...htmlAttributes }: TagsGroupProps) => React.JSX.Element;

package/dist/components/Cell/TagsGroup/TagsGroup.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { useTheme } from "@synerise/ds-core";
+import Icon, { WarningFillM } from "@synerise/ds-icon";
+import DSSkeleton from "@synerise/ds-skeleton";
+import Tags from "@synerise/ds-tags";
+import { TagsGroupSkeleton, TagsGroupWrapper } from "./TagsGroup.styles.js";
+const TagsGroupCell = ({
+  disabled,
+  isError,
+  isLoading,
+  tagsProps,
+  ...htmlAttributes
+}) => {
+  const theme = useTheme();
+  const isEmpty = !tagsProps?.selected?.length;
+  if (isError) {
+    return /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(WarningFillM, {}), color: theme.palette["red-600"], size: 24 });
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(TagsGroupSkeleton, { children: /* @__PURE__ */ jsx(DSSkeleton, { size: "M", numberOfSkeletons: 1 }) });
+  }
+  return /* @__PURE__ */ jsx(TagsGroupWrapper, { ...htmlAttributes, isDisabled: disabled, isEmpty, children: /* @__PURE__ */ jsx(Tags, { maxVisibleTags: 1, disabled, addButtonType: isEmpty ? "icon-label" : "single-icon", ...tagsProps, addable: tagsProps?.addable && !disabled, removable: tagsProps?.removable && !disabled }) });
+};
+export {
+  TagsGroupCell
+};

package/dist/components/Cell/TagsGroup/TagsGroup.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const TagsGroupWrapper: import('styled-components').StyledComponent<"div", any, {
+    isDisabled?: boolean;
+    isEmpty?: boolean;
+}, never>;
+export declare const TagsGroupSkeleton: import('styled-components').StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +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";
+const TagsGroupWrapper = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "TagsGroupstyles__TagsGroupWrapper",
+  componentId: "sc-up89ky-0"
+})(["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-up89ky-1"
+})(["display:flex;align-items:center;width:100%;"]);
+export {
+  TagsGroupSkeleton,
+  TagsGroupWrapper
+};

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

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

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

@@ -0,0 +1 @@
+

package/dist/components/Cell/index.d.ts

@@ -0,0 +1,26 @@
+export { ActionCell } from './Action/ActionCell';
+export { AvatarLabelCell } from './AvatarLabel/AvatarLabel';
+export { CopyableCell } from './Copyable/CopyableCell';
+export { EditableCell } from './Editable/EditableCell';
+export { FlagLabelCell } from './FlagLabel/FlagLabelCell';
+export { IconLabelCell } from './IconLabel/IconLabel';
+export { IconTooltipCell } from './IconTooltipCell/IconTooltipCell';
+export { InputNumberCell } from './InputNumber/InputNumberCell';
+export { LabelsWithShowMore } from './LabelsWithShowMore/LabelsWithShowMore';
+export { StarCell } from './Star/StarCell';
+export { StatusLabelCell } from './StatusLabel/StatusLabel';
+export { TagIconCell } from './TagIcon/TagIcon';
+export { TagsGroupCell } from './TagsGroup/TagsGroup';
+export type { BaseActionCellProps } from './Action/ActionCell.types';
+export type { BaseAvatarLabelProps } from './AvatarLabel/AvatarLabel.types';
+export type { BaseCopyableCellProps } from './Copyable/Copyable.types';
+export type { BaseEditableCellProps } from './Editable/EditableCell.types';
+export type { BaseFlagLabelProps } from './FlagLabel/FlagLabelCell.types';
+export type { BaseIconLabelProps } from './IconLabel/IconLabel.types';
+export type { BaseIconTooltipCellProps } from './IconTooltipCell/IconTooltipCell.types';
+export type { BaseInputNumberCellProps } from './InputNumber/InputNumberCell.types';
+export type { BaseLabelsWithShowMoreProps } from './LabelsWithShowMore/LabelsWithShowMore.types';
+export type { BaseStarCellProps } from './Star/StarCell.types';
+export type { BaseStatusLabelProps } from './StatusLabel/StatusLabel.types';
+export type { BaseTagIconProps } from './TagIcon/TagIcon.types';
+export type { BaseTagsGroupProps } from './TagsGroup/TagsGroup.types';

package/dist/components/Cell/index.js

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