@synerise/ds-table-new 0.1.0

package/dist/components/BaseTable/BaseTable.js

@@ -0,0 +1,114 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useRef, useEffect, useCallback } from "react";
+import { DEFAULT_CELL_HEIGHT } from "../../Table.const.js";
+import { useStickyContext } from "../../contexts/StickyContext.js";
+import { useTableContext } from "../../contexts/TableContext.js";
+import { useScrollSync } from "../../hooks/useScrollSync.js";
+import { TableBody } from "../TableBody/TableBody.js";
+import { TableBodySkeleton } from "../TableBody/TableBodySkeleton/TableBodySkeleton.js";
+import { TableColumns } from "../TableColumns/TableColumns.js";
+import { TableHeader } from "../TableHeader/TableHeader.js";
+import { TableHorizontalScroll } from "../TableHorizontalScroll/TableHorizontalScroll.js";
+import { TableHorizontalScrollBar } from "../TableHorizontalScrollBar/TableHorizontalScrollBar.js";
+import { TablePagination } from "../TablePagination/TablePagination.js";
+import { StyledTable, BaseTableWrapper, TableContainer, TableColumnsHorizontalScroll, TableBodyScrollWrapper } from "./BaseTable.styles.js";
+const BaseTable = ({
+  infiniteScroll,
+  cellHeight = DEFAULT_CELL_HEIGHT,
+  className,
+  itemsMenu,
+  texts,
+  isCounterLoading,
+  isLoading,
+  rowKey,
+  title,
+  hideTitleBar,
+  hideTitlePart,
+  renderCustomCounter,
+  renderSelectionTitle,
+  searchComponent,
+  filterComponent,
+  headerWithBorderTop,
+  emptyDataComponent,
+  headerButton,
+  hideColumnNames,
+  expandable,
+  columnSizing,
+  isColumnSizingReady,
+  paginationProps,
+  hasPagination,
+  disableColumnNamesLineBreak,
+  dataSourceTotalCount,
+  cardStyles,
+  tableOuterRef,
+  withScroll,
+  withBodyScroll,
+  maxHeight,
+  tableBodyScrollRef,
+  onRowClick,
+  getRowTooltipProps
+}) => {
+  const horizontalScrollRefs = useRef([]);
+  const tableBodyWrapperRef = useRef(null);
+  const tableColumnsWrapperRef = useRef(null);
+  useScrollSync(horizontalScrollRefs);
+  const {
+    table,
+    rowVirtualizer
+  } = useTableContext();
+  const stickyContext = useStickyContext();
+  const stickyContextRef = useRef(stickyContext);
+  const useUnifiedScroll = !stickyContext && !withBodyScroll;
+  useEffect(() => {
+    stickyContextRef.current = stickyContext;
+  }, [stickyContext]);
+  const addNode = useCallback((node) => {
+    if (node && !horizontalScrollRefs.current.includes(node)) {
+      horizontalScrollRefs.current.push(node);
+    }
+  }, []);
+  const size = Object.values(columnSizing).reduce((sum, n) => sum + n, 0);
+  const isEmpty = !table.getRowModel().flatRows.length;
+  const handleRef = useCallback((element) => {
+    tableColumnsWrapperRef.current = element;
+    if (!element) {
+      return;
+    }
+    const ctx = stickyContextRef.current;
+    if (element.clientHeight && ctx && ctx.stickyData.columnHeadersHeight !== element.clientHeight) {
+      const {
+        setStickyData
+      } = ctx;
+      setStickyData((prevValue) => ({
+        ...prevValue,
+        columnHeadersHeight: element.clientHeight
+      }));
+    }
+    addNode(element);
+  }, [addNode]);
+  const tableBodyContent = /* @__PURE__ */ jsx(TableHorizontalScroll, { stickyRight: table.getRightTotalSize(), stickyLeft: table.getLeftTotalSize(), ref: (element) => {
+    tableBodyWrapperRef.current = element;
+    addNode(element);
+  }, children: /* @__PURE__ */ jsx(StyledTable, { role: "table", children: isLoading ? /* @__PURE__ */ jsx(TableBodySkeleton, { wrapperRef: tableBodyWrapperRef, cellHeight }, "table-body-skeleton") : /* @__PURE__ */ jsx(TableBody, { cellHeight, infiniteScroll, emptyDataComponent, texts, onRowClick, getRowTooltipProps }, "table-body") }) });
+  const unifiedTableContent = /* @__PURE__ */ jsx(TableHorizontalScroll, { stickyRight: table.getRightTotalSize(), stickyLeft: table.getLeftTotalSize(), ref: (element) => {
+    tableBodyWrapperRef.current = element;
+    addNode(element);
+  }, children: /* @__PURE__ */ jsxs(StyledTable, { role: "table", children: [
+    !hideColumnNames && (!isEmpty || isLoading) && /* @__PURE__ */ jsx(TableColumns, { texts, disableColumnNamesLineBreak }),
+    isLoading ? /* @__PURE__ */ jsx(TableBodySkeleton, { wrapperRef: tableBodyWrapperRef, cellHeight }, "table-body-skeleton") : /* @__PURE__ */ jsx(TableBody, { cellHeight, infiniteScroll, emptyDataComponent, texts, onRowClick, getRowTooltipProps }, "table-body")
+  ] }) });
+  return /* @__PURE__ */ jsxs(BaseTableWrapper, { isEmpty, columnSizing, $isColumnSizingReady: isColumnSizingReady, $size: size, children: [
+    /* @__PURE__ */ jsxs(TableContainer, { ref: tableOuterRef, className, withBorderTop: headerWithBorderTop, cardStyles, withScroll, $maxHeight: maxHeight, "data-testid": "ds-table-container", children: [
+      !hideTitleBar && /* @__PURE__ */ jsx(TableHeader, { itemsMenu, texts, childrenColumnName: expandable?.childrenColumnName, isCounterLoading, isLoading, rowKey, title, hideTitlePart, renderCustomCounter, renderSelectionTitle, searchComponent, filterComponent, headerButton, dataSourceTotalCount }),
+      useUnifiedScroll ? unifiedTableContent : /* @__PURE__ */ jsxs(Fragment, { children: [
+        !hideColumnNames && (!isEmpty || isLoading) && /* @__PURE__ */ jsx(TableColumnsHorizontalScroll, { stickyRight: table.getRightTotalSize(), stickyLeft: table.getLeftTotalSize(), stickyData: stickyContext?.stickyData, isScrolled: rowVirtualizer?.scrollOffset, ref: handleRef, children: /* @__PURE__ */ jsx(StyledTable, { role: "table", children: /* @__PURE__ */ jsx(TableColumns, { texts, disableColumnNamesLineBreak }) }) }),
+        withBodyScroll ? /* @__PURE__ */ jsx(TableBodyScrollWrapper, { ref: tableBodyScrollRef, $maxHeight: maxHeight, children: tableBodyContent }) : tableBodyContent
+      ] }),
+      hasPagination && /* @__PURE__ */ jsx(TablePagination, { ...paginationProps })
+    ] }),
+    !isEmpty && /* @__PURE__ */ jsx(TableHorizontalScrollBar, { contentRef: (element) => addNode(element) })
+  ] });
+};
+export {
+  BaseTable
+};

package/dist/components/BaseTable/BaseTable.styles.d.ts

@@ -0,0 +1,28 @@
+import { StickyData } from '../../Table.types';
+export declare const BaseTableWrapper: import('styled-components').StyledComponent<"div", any, {
+    columnSizing: Record<string, number>;
+    $isColumnSizingReady?: boolean;
+    $size?: number;
+    isEmpty?: boolean;
+}, never>;
+export declare const TableContainer: import('styled-components').StyledComponent<"div", any, {
+    withBorderTop?: boolean;
+    cardStyles?: boolean;
+    withScroll?: boolean;
+    $maxHeight?: number;
+}, never>;
+export declare const TableBodyScrollWrapper: import('styled-components').StyledComponent<"div", any, {
+    $maxHeight?: number;
+}, never>;
+export declare const TableSkeleton: import('styled-components').StyledComponent<({ size, numberOfSkeletons, width, height, className, }: import('@synerise/ds-skeleton').SkeletonProps) => React.JSX.Element, any, {
+    skeletonWidth?: string;
+}, never>;
+export declare const StyledTable: import('styled-components').StyledComponent<"table", any, {}, never>;
+export declare const TableColumnsHorizontalScroll: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<{
+    children?: import('react').ReactNode;
+    stickyLeft?: number;
+    stickyRight?: number;
+} & Omit<import('react').HTMLAttributes<HTMLDivElement>, "children" | "stickyLeft" | "stickyRight"> & import('@synerise/ds-utils').DataAttributes & import('react').RefAttributes<HTMLDivElement>>, any, {
+    stickyData?: StickyData;
+    isScrolled?: number | null;
+}, never>;

package/dist/components/BaseTable/BaseTable.styles.js

@@ -0,0 +1,41 @@
+import styled, { css } from "styled-components";
+import DSSkeleton from "@synerise/ds-skeleton";
+import { TableHorizontalScroll } from "../TableHorizontalScroll/TableHorizontalScroll.js";
+const BaseTableWrapper = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "BaseTablestyles__BaseTableWrapper",
+  componentId: "sc-1oa5lc2-0"
+})(["", " --table-size:", ";", " position:relative;z-index:1;"], (props) => css(["", ""], Object.entries(props.columnSizing || {}).map(([key, value]) => `--${key}-width: ${value}px;`).join("\n")), (props) => !props.isEmpty && props.$size ? `${props.$size}px` : "100%", (props) => !props.$isColumnSizingReady && `opacity: 0;`);
+const TableContainer = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "BaseTablestyles__TableContainer",
+  componentId: "sc-1oa5lc2-1"
+})(["", " ", " ", " background:", ";"], (props) => props.withScroll && css(["overflow-y:scroll;max-height:", ";"], props.$maxHeight ? `${props.$maxHeight}px` : "800px"), (props) => props.withBorderTop && css(["border-top:solid 1px ", ";"], props.theme.palette["grey-200"]), (props) => props.cardStyles && css(["border-radius:3px;box-shadow:", ";"], props.theme.variables["box-shadow-2"]), (props) => props.theme.palette["white"]);
+const TableBodyScrollWrapper = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "BaseTablestyles__TableBodyScrollWrapper",
+  componentId: "sc-1oa5lc2-2"
+})(["overflow-y:scroll;max-height:", ";"], (props) => props.$maxHeight ? `${props.$maxHeight}px` : "800px");
+const TableSkeleton = /* @__PURE__ */ styled(DSSkeleton).withConfig({
+  displayName: "BaseTablestyles__TableSkeleton",
+  componentId: "sc-1oa5lc2-3"
+})(["padding:0;", ""], (props) => props.skeletonWidth && `width: ${props.skeletonWidth};`);
+const StyledTable = /* @__PURE__ */ styled.table.withConfig({
+  displayName: "BaseTablestyles__StyledTable",
+  componentId: "sc-1oa5lc2-4"
+})(["width:var(--table-size);border-spacing:0;border-collapse:separate;"]);
+const TableColumnsHorizontalScroll = /* @__PURE__ */ styled(TableHorizontalScroll).withConfig({
+  displayName: "BaseTablestyles__TableColumnsHorizontalScroll",
+  componentId: "sc-1oa5lc2-5"
+})(["", ""], ({
+  stickyData,
+  isScrolled,
+  theme
+}) => {
+  return stickyData && css(["position:sticky;transition:top 0.3s ease-in-out;top:", ";z-index:11;background:", ";", ""], stickyData.isRevealed ? `${stickyData.titleBarHeight - stickyData.containerPaddingTop}px` : `-${stickyData.containerPaddingTop}px`, theme.palette["white"], (isScrolled && isScrolled > stickyData.titleBarHeight + stickyData.containerPaddingTop || stickyData.isRevealed) && `box-shadow: ${theme.variables["box-shadow-1"]};`);
+});
+export {
+  BaseTableWrapper,
+  StyledTable,
+  TableBodyScrollWrapper,
+  TableColumnsHorizontalScroll,
+  TableContainer,
+  TableSkeleton
+};

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

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

package/dist/components/Cell/Action/ActionCell.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { ActionCell as ActionCell$1 } from "./ActionCell.styles.js";
+const DEFAULT_GAP_SIZE = 24;
+const ActionCellComponent = ({
+  children,
+  gapSize = DEFAULT_GAP_SIZE,
+  contentAlign = "right",
+  ...htmlAttributes
+}) => {
+  return /* @__PURE__ */ jsx(ActionCell$1, { gapSize, contentAlign, ...htmlAttributes, children });
+};
+const ActionCell = React.memo(ActionCellComponent);
+export {
+  ActionCell
+};

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

@@ -0,0 +1,5 @@
+import { ContentAlign } from './ActionCell.types';
+export declare const ActionCell: import('styled-components').StyledComponent<"div", any, {
+    gapSize: number;
+    contentAlign: ContentAlign;
+}, never>;

package/dist/components/Cell/Action/ActionCell.styles.js

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+const align = {
+  left: "flex-start",
+  right: "flex-end",
+  center: "center"
+};
+const ActionCell = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "ActionCellstyles__ActionCell",
+  componentId: "sc-8cjprh-0"
+})(["display:flex;align-items:center;justify-content:", ";gap:", ";"], (props) => align[props.contentAlign], (props) => `${props.gapSize}px`);
+export {
+  ActionCell
+};

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

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

package/dist/components/Cell/Action/ActionCell.types.js

@@ -0,0 +1 @@
+

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

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

package/dist/components/Cell/AvatarLabel/AvatarLabel.js

@@ -0,0 +1,42 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { Icon, Avatar, Description, Title, Labels, Label, Loader, AvatarLabel, AvatarLink } from "./AvatarLabel.styles.js";
+const AvatarLabelCell = ({
+  avatar,
+  avatarAction,
+  avatarLink,
+  title,
+  labels,
+  icon,
+  ellipsis,
+  maxWidth,
+  avatarSize,
+  loader,
+  disabled,
+  ...htmlAttributes
+}) => {
+  const titleEllipsisProps = ellipsis ? {
+    ellipsis: {
+      tooltip: title
+    }
+  } : {};
+  const handleLinkClick = (event) => {
+    if (event.metaKey || event.ctrlKey) {
+      event.stopPropagation();
+    } else if (avatarAction) {
+      event.preventDefault();
+    }
+  };
+  const cellContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon && /* @__PURE__ */ jsx(Icon, { children: icon }),
+    /* @__PURE__ */ jsx(Avatar, { clickable: Boolean(avatarAction), children: avatar }),
+    /* @__PURE__ */ jsxs(Description, { children: [
+      /* @__PURE__ */ jsx(Title, { ...titleEllipsisProps, hasEllipsis: ellipsis, maxWidth, avatarSize, children: title }),
+      labels && /* @__PURE__ */ jsx(Labels, { ellipsis: Boolean(ellipsis), maxWidth, children: labels?.map((label, index) => /* @__PURE__ */ jsx(Label, { children: label }, `avatar-label-${index}`)) }),
+      loader && /* @__PURE__ */ jsx(Loader, { children: loader })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsx(AvatarLabel, { ...htmlAttributes, isDisabled: disabled, onClick: avatarAction, children: avatarLink ? /* @__PURE__ */ jsx(AvatarLink, { href: avatarLink, onClick: handleLinkClick, children: cellContent }) : cellContent });
+};
+export {
+  AvatarLabelCell
+};

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

@@ -0,0 +1,27 @@
+export declare const AvatarLabel: import('styled-components').StyledComponent<"div", any, {
+    onClick?: () => void;
+    isDisabled?: boolean;
+}, never>;
+export declare const Avatar: import('styled-components').StyledComponent<"div", any, {
+    clickable: boolean;
+}, never>;
+export declare const Description: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const AvatarLink: import('styled-components').StyledComponent<"a", any, {}, never>;
+export declare const Title: import('styled-components').StyledComponent<({ size, className, children, ellipsis, style, }: {
+    size?: import('@synerise/ds-typography').TextSize;
+    ellipsis?: import('@synerise/ds-typography/dist/Ellipsis').EllipsisProps;
+    children?: import('react').ReactNode;
+    className?: string;
+    style?: import('react').CSSProperties;
+}) => React.JSX.Element, any, {
+    hasEllipsis?: boolean;
+    maxWidth: number | undefined;
+    avatarSize?: string | "large";
+}, never>;
+export declare const Labels: import('styled-components').StyledComponent<"span", any, {
+    ellipsis: boolean;
+    maxWidth: number | undefined;
+}, never>;
+export declare const Label: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const Icon: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Loader: import('styled-components').StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,49 @@
+import styled, { css } from "styled-components";
+import { Text } from "@synerise/ds-typography";
+const AvatarLabel = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "AvatarLabelstyles__AvatarLabel",
+  componentId: "sc-f41gv6-0"
+})(["display:flex;min-width:0;flex-grow:1;align-items:center;justify-content:flex-start;max-width:100%;", ";", ";"], (props) => props.isDisabled && "opacity: 0.4", (props) => props.onClick !== void 0 ? "cursor: pointer" : "");
+const Avatar = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "AvatarLabelstyles__Avatar",
+  componentId: "sc-f41gv6-1"
+})(["margin-right:16px;display:flex;align-items:center;justify-content:center;", ";"], (props) => props.clickable ? "cursor: pointer" : "");
+const Description = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "AvatarLabelstyles__Description",
+  componentId: "sc-f41gv6-2"
+})(["display:flex;min-width:0;flex-grow:1;flex-direction:column;align-items:flex-start;justify-content:center;max-width:100%;"]);
+const AvatarLink = /* @__PURE__ */ styled.a.withConfig({
+  displayName: "AvatarLabelstyles__AvatarLink",
+  componentId: "sc-f41gv6-3"
+})(["display:flex;flex-grow:1;min-width:0;align-items:center;color:inherit;&:hover,&:active,&:focus{text-decoration:none;color:inherit;}"]);
+const Title = /* @__PURE__ */ styled(Text).withConfig({
+  displayName: "AvatarLabelstyles__Title",
+  componentId: "sc-f41gv6-4"
+})(["font-size:14px;line-height:20px;color:", ";font-weight:500;flex-grow:1;", ";"], (props) => props.theme.palette["grey-700"], (props) => Boolean(props.ellipsis) && css(["max-width:", ";"], props.maxWidth ? `${props.maxWidth}px` : "100%"));
+const Labels = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "AvatarLabelstyles__Labels",
+  componentId: "sc-f41gv6-5"
+})(["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"]);
+const Label = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "AvatarLabelstyles__Label",
+  componentId: "sc-f41gv6-6"
+})([""]);
+const Icon = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "AvatarLabelstyles__Icon",
+  componentId: "sc-f41gv6-7"
+})(["margin-right:8px;"]);
+const Loader = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "AvatarLabelstyles__Loader",
+  componentId: "sc-f41gv6-8"
+})([""]);
+export {
+  Avatar,
+  AvatarLabel,
+  AvatarLink,
+  Description,
+  Icon,
+  Label,
+  Labels,
+  Loader,
+  Title
+};

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

@@ -0,0 +1,22 @@
+import { ReactElement, ReactNode } from 'react';
+import { WithHTMLAttributes } from '@synerise/ds-utils';
+export type BaseAvatarLabelProps = {
+    avatar: ReactElement;
+    avatarAction?: () => void;
+    avatarLink?: string;
+    title: ReactNode;
+    labels?: ReactNode[];
+    icon?: ReactElement;
+    /** @deprecated */
+    textSize?: 'small' | 'default';
+    ellipsis?: boolean;
+    maxWidth?: number;
+    avatarSize?: string | 'large';
+    loader?: ReactElement;
+    disabled?: boolean;
+};
+export type AvatarLabelProps = WithHTMLAttributes<HTMLDivElement, BaseAvatarLabelProps>;
+/**
+ *  @deprecated
+ */
+export type Props = AvatarLabelProps;

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,2 @@
+export declare const CopyableValue: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Copyable: import('styled-components').StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,14 @@
+import styled from "styled-components";
+import { IconContainer } from "@synerise/ds-icon";
+const CopyableValue = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Copyablestyles__CopyableValue",
+  componentId: "sc-2xpgou-0"
+})(["overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"]);
+const Copyable = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Copyablestyles__Copyable",
+  componentId: "sc-2xpgou-1"
+})(["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"]);
+export {
+  Copyable,
+  CopyableValue
+};

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

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

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

@@ -0,0 +1 @@
+

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

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

package/dist/components/Cell/Copyable/CopyableCell.js

@@ -0,0 +1,28 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import CopyIcon from "@synerise/ds-copy-icon";
+import { Copyable, CopyableValue } from "./Copyable.styles.js";
+const DEFAULT_TIMEOUT = 2e3;
+const CopyableCell = ({
+  value,
+  confirmMessage,
+  tooltipTimeout = DEFAULT_TIMEOUT,
+  ...htmlAttributes
+}) => {
+  const [tooltipVisible, setTooltipVisible] = useState(false);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setTooltipVisible(false);
+    }, tooltipTimeout);
+    return () => clearTimeout(timer);
+  }, [tooltipVisible, setTooltipVisible, tooltipTimeout]);
+  return /* @__PURE__ */ jsxs(Copyable, { ...htmlAttributes, children: [
+    /* @__PURE__ */ jsx(CopyableValue, { children: value }),
+    /* @__PURE__ */ jsx(CopyIcon, { copyValue: value, placement: "left", texts: {
+      copiedTooltip: confirmMessage
+    } })
+  ] });
+};
+export {
+  CopyableCell
+};

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

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

package/dist/components/Cell/Editable/EditableCell.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useCallback, useMemo } from "react";
+import Icon, { EditNolineS } from "@synerise/ds-icon";
+import { Input } from "@synerise/ds-input";
+import { Value, EditableCell as EditableCell$1 } from "./EditableCell.styles.js";
+const EditableCell = ({
+  value,
+  onChange,
+  placeholder,
+  ...htmlAttributes
+}) => {
+  const [editMode, setEditMode] = useState(false);
+  const [editValue, setEditValue] = useState(value || "");
+  const enterEditMode = useCallback(() => {
+    setEditMode(true);
+  }, [setEditMode]);
+  const render = useMemo(() => {
+    return editMode ? /* @__PURE__ */ jsx(Input, { value: editValue, autoFocus: true, resetMargin: true, placeholder, onChange: (event) => setEditValue(event.target.value), onBlur: () => {
+      setEditMode(false);
+      onChange(editValue);
+    } }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Value, { asPlaceholder: !value, children: value || placeholder }),
+      /* @__PURE__ */ jsx(Icon, { onClick: enterEditMode, component: /* @__PURE__ */ jsx(EditNolineS, {}) })
+    ] });
+  }, [editMode, value, enterEditMode, editValue, setEditValue, onChange, placeholder]);
+  return /* @__PURE__ */ jsx(EditableCell$1, { ...htmlAttributes, children: render });
+};
+export {
+  EditableCell
+};

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

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

package/dist/components/Cell/Editable/EditableCell.styles.js

@@ -0,0 +1,14 @@
+import styled from "styled-components";
+import { IconContainer } from "@synerise/ds-icon";
+const EditableCell = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "EditableCellstyles__EditableCell",
+  componentId: "sc-11zu6o2-0"
+})(["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);
+const Value = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "EditableCellstyles__Value",
+  componentId: "sc-11zu6o2-1"
+})(["color:", ";"], (props) => props.asPlaceholder ? props.theme.palette["grey-400"] : "inherit");
+export {
+  EditableCell,
+  Value
+};

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

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

package/dist/components/Cell/Editable/EditableCell.types.js

@@ -0,0 +1 @@
+

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

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

package/dist/components/Cell/FlagLabel/FlagLabelCell.js

@@ -0,0 +1,16 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import DSFlag from "@synerise/ds-flag";
+import { FlagLabel } from "./FlagLabelCell.styles.js";
+const FlagLabelCell = ({
+  countryCode,
+  label,
+  ...htmlAttributes
+}) => {
+  return /* @__PURE__ */ jsxs(FlagLabel, { ...htmlAttributes, children: [
+    /* @__PURE__ */ jsx(DSFlag, { country: countryCode, size: 20 }),
+    /* @__PURE__ */ jsx("span", { children: label })
+  ] });
+};
+export {
+  FlagLabelCell
+};

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

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

package/dist/components/Cell/FlagLabel/FlagLabelCell.styles.js

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+const FlagLabel = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "FlagLabelCellstyles__FlagLabel",
+  componentId: "sc-17tek3-0"
+})(["display:flex;align-items:center;justify-content:flex-start;span{margin-left:8px;}"]);
+export {
+  FlagLabel
+};

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

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

package/dist/components/Cell/FlagLabel/FlagLabelCell.types.js

@@ -0,0 +1 @@
+

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

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

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

@@ -0,0 +1,15 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import Icon from "@synerise/ds-icon";
+import { IconLabelCell as IconLabelCell$1 } from "./IconLabel.styles.js";
+const IconLabelCell = ({
+  label,
+  icon,
+  disabled,
+  ...htmlAttributes
+}) => /* @__PURE__ */ jsxs(IconLabelCell$1, { isDisabled: disabled, ...htmlAttributes, children: [
+  icon && /* @__PURE__ */ jsx(Icon, { ...icon }),
+  label && /* @__PURE__ */ jsx("span", { children: label })
+] });
+export {
+  IconLabelCell
+};

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

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

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

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+import { IconContainer } from "@synerise/ds-icon";
+const IconLabelCell = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "IconLabelstyles__IconLabelCell",
+  componentId: "sc-1ydzkrb-0"
+})(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;", " ", "{margin-right:8px;}"], (props) => props.isDisabled && "opacity: 0.4;", IconContainer);
+export {
+  IconLabelCell
+};