@synerise/ds-table-new 0.1.0

package/dist/components/TableHeader/TableHeaderSelection/TableHeaderSelection.js

@@ -0,0 +1,123 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useMemo, useCallback } from "react";
+import { DropdownMenu } from "@synerise/ds-dropdown";
+import Icon, { OptionVerticalM } from "@synerise/ds-icon";
+import Tooltip from "@synerise/ds-tooltip";
+import { SELECTION_INVERT, SELECTION_ALL } from "../../../Table.const.js";
+import { useSelectionContext } from "../../../contexts/SelectionContext.js";
+import { useTableContext } from "../../../contexts/TableContext.js";
+import { Selection, SelectionCheckbox, DropdownButton } from "./TableHeaderSelection.styles.js";
+const TableHeaderSelection = ({
+  texts
+}) => {
+  const {
+    table
+  } = useTableContext();
+  const selectionConfig = useSelectionContext();
+  const {
+    globalSelected,
+    globalSelectionOnChange,
+    limit: hasSelectionLimit
+  } = selectionConfig || {};
+  const hasGlobalSelection = globalSelectionOnChange !== void 0;
+  const isGlobalAllSelected = hasGlobalSelection && globalSelected;
+  const isAllSelected = table.getIsAllRowsSelected();
+  const isAnySelected = table.getIsSomeRowsSelected();
+  const allRecordsCount = table.getRowModel().rows.length;
+  const selectedRecordsCount = table.getFilteredSelectedRowModel().rows.length;
+  const selectableRecordsCount = table.getRowModel().rows.filter((row) => row.getCanSelect()).length;
+  const disabledBulkSelection = Boolean(allRecordsCount === 0 || selectableRecordsCount === 0 || hasSelectionLimit && selectedRecordsCount === 0);
+  const selectionTooltipTitle = useMemo(() => {
+    if (hasGlobalSelection) {
+      return isGlobalAllSelected ? texts.unselectGlobalAll : texts.selectGlobalAll;
+    }
+    return isAllSelected ? texts.unselectAll : texts.selectAllTooltip;
+  }, [hasGlobalSelection, isAllSelected, isGlobalAllSelected, texts.selectAllTooltip, texts.selectGlobalAll, texts.unselectAll, texts.unselectGlobalAll]);
+  const selectAll = useCallback(() => {
+    table.toggleAllRowsSelected(true);
+  }, [table]);
+  const unselectAll = useCallback(() => {
+    table.toggleAllRowsSelected(false);
+  }, [table]);
+  const selectGlobalAll = useCallback(() => {
+    unselectAll();
+    globalSelectionOnChange?.(true);
+  }, [unselectAll, globalSelectionOnChange]);
+  const unselectGlobalAll = useCallback(() => {
+    unselectAll();
+    globalSelectionOnChange?.(false);
+  }, [unselectAll, globalSelectionOnChange]);
+  const selectInvert = useCallback(() => {
+    table.setRowSelection((selectionState) => {
+      const inverted = {};
+      Object.keys(table.getRowModel().rowsById).forEach((id) => {
+        if (!selectionState[id]) {
+          inverted[id] = true;
+        }
+      });
+      return inverted;
+    });
+  }, [table]);
+  const dropdownDataSource = useMemo(() => {
+    const globalSelectionItem = hasGlobalSelection ? [isGlobalAllSelected ? {
+      onClick: unselectGlobalAll,
+      text: texts.unselectGlobalAll
+    } : {
+      onClick: selectGlobalAll,
+      text: texts.selectGlobalAll
+    }] : [];
+    const menuItems = selectionConfig?.selections?.filter(Boolean).flatMap((selectionMenuElement) => {
+      switch (selectionMenuElement) {
+        case SELECTION_ALL: {
+          const items = [];
+          if (!isAllSelected && !hasSelectionLimit) {
+            items.push({
+              onClick: selectAll,
+              text: texts.selectAll
+            });
+          }
+          if (isAnySelected) {
+            items.push({
+              onClick: unselectAll,
+              text: texts.unselectAll
+            });
+          }
+          return items;
+        }
+        case SELECTION_INVERT: {
+          return !hasSelectionLimit ? {
+            onClick: selectInvert,
+            text: texts.selectInvert
+          } : [];
+        }
+        default: {
+          const sel = selectionMenuElement;
+          return {
+            ...sel,
+            text: sel.label
+          };
+        }
+      }
+    });
+    return [...globalSelectionItem, ...menuItems || []];
+  }, [hasGlobalSelection, isGlobalAllSelected, unselectGlobalAll, texts.unselectGlobalAll, texts.selectGlobalAll, texts.selectAll, texts.unselectAll, texts.selectInvert, selectGlobalAll, selectionConfig?.selections, isAllSelected, hasSelectionLimit, isAnySelected, selectAll, unselectAll, selectInvert]);
+  const handleBatchSelectionChange = useCallback(() => {
+    const isSelected = hasGlobalSelection ? isGlobalAllSelected : table.getIsAllRowsSelected();
+    if (hasGlobalSelection) {
+      isSelected ? unselectGlobalAll() : selectGlobalAll();
+    } else {
+      table.toggleAllRowsSelected(!isSelected);
+    }
+  }, [hasGlobalSelection, isGlobalAllSelected, selectGlobalAll, table, unselectGlobalAll]);
+  return selectionConfig ? /* @__PURE__ */ jsxs(Selection, { "data-popup-container": true, children: [
+    !hasSelectionLimit && /* @__PURE__ */ jsx(Tooltip, { title: selectionTooltipTitle, children: /* @__PURE__ */ jsx(SelectionCheckbox, { isOrphan: !selectionConfig.selections, disabled: disabledBulkSelection, "data-testid": "ds-table-batch-selection-button", checked: hasGlobalSelection ? isGlobalAllSelected : table.getIsAllRowsSelected(), indeterminate: table.getIsSomeRowsSelected(), onChange: handleBatchSelectionChange }) }),
+    selectionConfig.selections && /* @__PURE__ */ jsx(DropdownMenu, { disabled: disabledBulkSelection || dropdownDataSource?.length === 0, getPopupContainer: () => document.body, dataSource: dropdownDataSource || [], popoverProps: {
+      testId: "table-selection"
+    }, asChild: true, children: /* @__PURE__ */ jsx(DropdownButton, { isOrphan: !!hasSelectionLimit, disabled: disabledBulkSelection || dropdownDataSource?.length === 0, mode: "single-icon", type: "ghost", "data-testid": "ds-table-batch-selection-options", tooltipProps: {
+      title: texts.selectionOptionsTooltip
+    }, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(OptionVerticalM, {}) }) }) })
+  ] }) : null;
+};
+export {
+  TableHeaderSelection
+};

package/dist/components/TableHeader/TableHeaderSelection/TableHeaderSelection.styles.d.ts

@@ -0,0 +1,8 @@
+import { StyledButton } from '@synerise/ds-button';
+type ExtraProps = {
+    isOrphan?: boolean;
+};
+export declare const DropdownButton: StyledButton<ExtraProps>;
+export declare const SelectionCheckbox: import('styled-components').StyledComponent<(props: import('@synerise/ds-button').CheckboxButtonProps) => React.ReactElement, any, ExtraProps, never>;
+export declare const Selection: import('styled-components').StyledComponent<"div", any, {}, never>;
+export {};

package/dist/components/TableHeader/TableHeaderSelection/TableHeaderSelection.styles.js

@@ -0,0 +1,21 @@
+import styled, { css } from "styled-components";
+import Button, { Checkbox } from "@synerise/ds-button";
+const DropdownButton = /* @__PURE__ */ styled(Button).withConfig({
+  displayName: "TableHeaderSelectionstyles__DropdownButton",
+  componentId: "sc-c6ltj0-0"
+})(["", ""], (props) => !props.isOrphan && css(["&&&{border-top-left-radius:0;border-bottom-left-radius:0;}"]));
+const SelectionCheckbox = /* @__PURE__ */ styled(Checkbox).withConfig({
+  displayName: "TableHeaderSelectionstyles__SelectionCheckbox",
+  componentId: "sc-c6ltj0-1"
+})(["", ""], (props) => !props.isOrphan && css(["&&&{border-top-right-radius:0;border-bottom-right-radius:0;}"]));
+const Selection = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "TableHeaderSelectionstyles__Selection",
+  componentId: "sc-c6ltj0-2"
+})(["display:flex;align-items:center;justify-content:flex-start;max-width:64px;margin-right:24px;border-radius:3px;&:hover{background-color:", ";}"], ({
+  theme
+}) => theme.palette["grey-100"]);
+export {
+  DropdownButton,
+  Selection,
+  SelectionCheckbox
+};

package/dist/components/TableHeader/TableLimit/TableLimit.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { TableLimitProps } from './TableLimit.types';
+export declare function TableLimit<TData extends object>({ texts, itemsMenu, selection, isCounterLoading, renderCustomCounter, }: TableLimitProps<TData>): React.JSX.Element;

package/dist/components/TableHeader/TableLimit/TableLimit.js

@@ -0,0 +1,50 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useDataFormat } from "@synerise/ds-core";
+import InlineAlert from "@synerise/ds-inline-alert";
+import { TableSkeleton } from "../../../Table.styles.js";
+import { useTableContext } from "../../../contexts/TableContext.js";
+import { Alert, Title, TableLimit as TableLimit$1, ItemsMenu } from "./TableLimit.styles.js";
+function TableLimit({
+  texts,
+  itemsMenu,
+  selection,
+  isCounterLoading,
+  renderCustomCounter
+}) {
+  const {
+    formatValue
+  } = useDataFormat();
+  const {
+    table
+  } = useTableContext();
+  const {
+    limit
+  } = selection;
+  const selectedRows = table.getSelectedRowModel().rows.length;
+  const total = table.getRowCount();
+  const limitReachedInfo = useMemo(() => limit <= selectedRows && /* @__PURE__ */ jsx(Alert, { children: /* @__PURE__ */ jsx(InlineAlert, { type: "warning", message: texts.selectionLimitWarning }) }), [texts, selectedRows, limit]);
+  const selected = useMemo(() => {
+    const counterContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("strong", { children: formatValue(total) }),
+      " ",
+      texts.totalItems
+    ] });
+    return selectedRows > 0 ? /* @__PURE__ */ jsxs(Title, { children: [
+      /* @__PURE__ */ jsx("strong", { children: `${formatValue(selectedRows)} / ${formatValue(limit)}` }),
+      " ",
+      texts.selected
+    ] }) : /* @__PURE__ */ jsx(Title, { children: isCounterLoading ? /* @__PURE__ */ jsx(TableSkeleton, { numberOfSkeletons: 1, size: "S", skeletonWidth: "100px" }) : /* @__PURE__ */ jsx(Fragment, { children: renderCustomCounter ? renderCustomCounter({
+      count: total,
+      content: counterContent
+    }) : counterContent }) });
+  }, [formatValue, renderCustomCounter, limit, texts.totalItems, texts.selected, isCounterLoading, selectedRows, total]);
+  return /* @__PURE__ */ jsxs(TableLimit$1, { children: [
+    selected,
+    limitReachedInfo,
+    selectedRows > 0 && /* @__PURE__ */ jsx(ItemsMenu, { children: itemsMenu })
+  ] });
+}
+export {
+  TableLimit
+};

package/dist/components/TableHeader/TableLimit/TableLimit.styles.d.ts

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

package/dist/components/TableHeader/TableLimit/TableLimit.styles.js

@@ -0,0 +1,24 @@
+import styled from "styled-components";
+import { macro } from "@synerise/ds-typography";
+const TableLimit = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "TableLimitstyles__TableLimit",
+  componentId: "sc-16p1ck3-0"
+})(["display:flex;align-items:center;justify-content:flex-start;"]);
+const Title = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "TableLimitstyles__Title",
+  componentId: "sc-16p1ck3-1"
+})(["", ";color:", ";strong{font-weight:500;}display:flex;align-items:center;gap:4px;"], macro.small, (props) => props.theme.palette["grey-700"]);
+const Alert = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "TableLimitstyles__Alert",
+  componentId: "sc-16p1ck3-2"
+})(["position:relative;padding-left:16px;margin-left:16px;&::before{position:absolute;top:4px;left:0;content:'';display:flex;width:1px;height:16px;background:", ";}"], (props) => props.theme.palette["grey-200"]);
+const ItemsMenu = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "TableLimitstyles__ItemsMenu",
+  componentId: "sc-16p1ck3-3"
+})(["padding-left:24px;"]);
+export {
+  Alert,
+  ItemsMenu,
+  TableLimit,
+  Title
+};

package/dist/components/TableHeader/TableLimit/TableLimit.types.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { RequiredProps } from '@synerise/ds-utils';
+import { CustomCounterFn, SelectionConfig, TableLimitTexts } from '../../../Table.types';
+export type TableLimitProps<TData> = {
+    selection: RequiredProps<SelectionConfig<TData>, 'limit'>;
+    itemsMenu: ReactNode;
+    texts: TableLimitTexts;
+    isCounterLoading?: boolean;
+    renderCustomCounter?: CustomCounterFn;
+};

package/dist/components/TableHeader/TableLimit/TableLimit.types.js

@@ -0,0 +1 @@
+

package/dist/components/TableHorizontalScroll/TableHorizontalScroll.d.ts

@@ -0,0 +1,6 @@
+import { default as React, ReactNode } from 'react';
+export declare const TableHorizontalScroll: React.ForwardRefExoticComponent<{
+    children?: ReactNode;
+    stickyLeft?: number;
+    stickyRight?: number;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "stickyLeft" | "stickyRight"> & import('@synerise/ds-utils').DataAttributes & React.RefAttributes<HTMLDivElement>>;

package/dist/components/TableHorizontalScroll/TableHorizontalScroll.js

@@ -0,0 +1,41 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useCallback } from "react";
+import { useMergeRefs } from "@floating-ui/react";
+import Scrollbar from "@synerise/ds-scrollbar";
+import { useResizeObserver } from "@synerise/ds-utils";
+import { HorizontalScrollContainer, LeftShadow, HorizontalScrollWrapper, RightShadow, ScrollbarWrapper } from "./TableHorizontalScroll.styles.js";
+const TableHorizontalScroll = forwardRef(({
+  children,
+  stickyLeft = 0,
+  stickyRight = 0,
+  ...rest
+}, ref) => {
+  const [isMaxLeft, setIsMaxLeft] = useState(true);
+  const [isMaxRight, setIsMaxRight] = useState(true);
+  const wrapperRef = useRef(null);
+  const mergedRef = useMergeRefs([wrapperRef, ref]);
+  const calculateOffsets = useCallback((element) => {
+    if (element.scrollWidth === element.clientWidth) {
+      setIsMaxLeft(true);
+      setIsMaxRight(true);
+      return;
+    }
+    setIsMaxLeft(element.scrollLeft === 0);
+    setIsMaxRight(element.scrollLeft + element.clientWidth >= element.scrollWidth);
+  }, []);
+  const handleScroll = useCallback((event) => {
+    calculateOffsets(event.currentTarget);
+  }, [calculateOffsets]);
+  useResizeObserver(wrapperRef, () => wrapperRef.current && calculateOffsets(wrapperRef.current));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(HorizontalScrollContainer, { showLeftShadow: !isMaxLeft, showRightShadow: !isMaxRight, ...rest, children: [
+      /* @__PURE__ */ jsx(LeftShadow, { offset: stickyLeft }),
+      /* @__PURE__ */ jsx(HorizontalScrollWrapper, { ref: mergedRef, onScroll: handleScroll, children }),
+      /* @__PURE__ */ jsx(RightShadow, { offset: stickyRight })
+    ] }),
+    /* @__PURE__ */ jsx(ScrollbarWrapper, { children: /* @__PURE__ */ jsx(Scrollbar, {}) })
+  ] });
+});
+export {
+  TableHorizontalScroll
+};

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

@@ -0,0 +1,12 @@
+export declare const HorizontalScrollWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const LeftShadow: import('styled-components').StyledComponent<"div", any, {
+    offset: number;
+}, never>;
+export declare const RightShadow: import('styled-components').StyledComponent<"div", any, {
+    offset: number;
+}, never>;
+export declare const HorizontalScrollContainer: import('styled-components').StyledComponent<"div", any, {
+    showLeftShadow: boolean;
+    showRightShadow: boolean;
+}, never>;
+export declare const ScrollbarWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/components/TableHorizontalScroll/TableHorizontalScroll.styles.js

@@ -0,0 +1,33 @@
+import styled from "styled-components";
+import { hexToRgba } from "@synerise/ds-utils";
+const HorizontalScrollWrapper = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "TableHorizontalScrollstyles__HorizontalScrollWrapper",
+  componentId: "sc-16m24d3-0"
+})(["overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-y:auto;overscroll-behavior-x:contain;"]);
+const LeftShadow = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "TableHorizontalScrollstyles__LeftShadow",
+  componentId: "sc-16m24d3-1"
+})(["position:absolute;top:0;left:", "px;width:10px;height:100%;box-shadow:inset 10px 0 8px -8px ", ";z-index:10;"], (props) => props.offset, ({
+  theme
+}) => hexToRgba(theme.palette["grey-500"], 0.12));
+const RightShadow = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "TableHorizontalScrollstyles__RightShadow",
+  componentId: "sc-16m24d3-2"
+})(["position:absolute;top:0;right:", "px;width:10px;height:100%;box-shadow:inset -10px 0 8px -8px ", ";z-index:10;"], (props) => props.offset, ({
+  theme
+}) => hexToRgba(theme.palette["grey-500"], 0.12));
+const HorizontalScrollContainer = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "TableHorizontalScrollstyles__HorizontalScrollContainer",
+  componentId: "sc-16m24d3-3"
+})(["position:relative;", "{", "}", "{", "}"], LeftShadow, (props) => props.showLeftShadow ? `display: block` : `display: none`, RightShadow, (props) => props.showRightShadow ? `display: block` : `display: none`);
+const ScrollbarWrapper = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "TableHorizontalScrollstyles__ScrollbarWrapper",
+  componentId: "sc-16m24d3-4"
+})([""]);
+export {
+  HorizontalScrollContainer,
+  HorizontalScrollWrapper,
+  LeftShadow,
+  RightShadow,
+  ScrollbarWrapper
+};

package/dist/components/TableHorizontalScrollBar/TableHorizontalScrollBar.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+type TableHorizontalScrollBarProps = {
+    contentRef?: (element: HTMLDivElement) => void;
+};
+export declare const TableHorizontalScrollBar: ({ contentRef, }: TableHorizontalScrollBarProps) => React.JSX.Element;
+export {};

package/dist/components/TableHorizontalScrollBar/TableHorizontalScrollBar.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+import Scrollbar from "@synerise/ds-scrollbar";
+import { ScrollbarWrapper, ScrollbarContent } from "./TableHorizontalScrollBar.styles.js";
+const TableHorizontalScrollBar = ({
+  contentRef
+}) => {
+  return /* @__PURE__ */ jsx(ScrollbarWrapper, { "data-testid": "ds-table-horizontal-scroll", children: /* @__PURE__ */ jsx(Scrollbar, { absolute: true, ref: contentRef, children: /* @__PURE__ */ jsx(ScrollbarContent, {}) }) });
+};
+export {
+  TableHorizontalScrollBar
+};

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

@@ -0,0 +1,4 @@
+export declare const ScrollbarWrapper: import('styled-components').StyledComponent<"div", any, {
+    containerPadding?: number;
+}, never>;
+export declare const ScrollbarContent: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/components/TableHorizontalScrollBar/TableHorizontalScrollBar.styles.js

@@ -0,0 +1,14 @@
+import styled from "styled-components";
+import { BaseTableWrapper } from "../BaseTable/BaseTable.styles.js";
+const ScrollbarWrapper = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "TableHorizontalScrollBarstyles__ScrollbarWrapper",
+  componentId: "sc-yrx622-0"
+})(["position:sticky;bottom:10px;transform:translate(5px,24px);z-index:20;height:10px;margin-bottom:-10px;", ":hover &{.ps__rail-x{opacity:1;}}"], BaseTableWrapper);
+const ScrollbarContent = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "TableHorizontalScrollBarstyles__ScrollbarContent",
+  componentId: "sc-yrx622-1"
+})(["width:var(--table-size);height:1px;pointer-events:none;"]);
+export {
+  ScrollbarContent,
+  ScrollbarWrapper
+};

package/dist/components/TablePagination/TablePagination.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { TablePaginationProps } from '../../Table.types';
+export declare const TablePagination: ({ ...rest }: TablePaginationProps) => React.JSX.Element;

package/dist/components/TablePagination/TablePagination.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import Pagination from "@synerise/ds-pagination";
+import { useTableContext } from "../../contexts/TableContext.js";
+import { PaginationWrapper } from "./TablePagination.styles.js";
+const TablePagination = ({
+  ...rest
+}) => {
+  const {
+    table
+  } = useTableContext();
+  return /* @__PURE__ */ jsx(PaginationWrapper, { "data-testid": "ds-table-pagination", children: /* @__PURE__ */ jsx(Pagination, { hideOnSinglePage: true, pageSize: table.getState().pagination.pageSize, total: table.getRowCount(), onShowSizeChange: (_current, size) => {
+    table.setPageSize(size);
+  }, onChange: (page) => {
+    table.setPageIndex(page - 1);
+  }, ...rest }) });
+};
+export {
+  TablePagination
+};

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

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

package/dist/components/TablePagination/TablePagination.styles.js

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+const PaginationWrapper = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "TablePaginationstyles__PaginationWrapper",
+  componentId: "sc-npn86e-0"
+})(["background:", ";padding:16px 24px;display:flex;justify-content:flex-end;&:empty{display:none;}"], (props) => props.theme.palette["grey-050"]);
+export {
+  PaginationWrapper
+};

package/dist/contexts/SelectionContext.d.ts

@@ -0,0 +1,4 @@
+import { RowData } from '@tanstack/react-table';
+import { SelectionConfig } from '../Table.types';
+export declare const SelectionContext: import('react').Context<SelectionConfig<any> | undefined>;
+export declare const useSelectionContext: <TData extends RowData>() => SelectionConfig<TData> | undefined;

package/dist/contexts/SelectionContext.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "react";
+const SelectionContext = createContext(void 0);
+const useSelectionContext = () => {
+  const ctx = useContext(SelectionContext);
+  return ctx ? ctx : void 0;
+};
+export {
+  SelectionContext,
+  useSelectionContext
+};

package/dist/contexts/StickyContext.d.ts

@@ -0,0 +1,8 @@
+import { StickyData } from '../Table.types';
+type StickyContextType = {
+    stickyData: StickyData;
+    setStickyData: React.Dispatch<React.SetStateAction<StickyData>>;
+};
+export declare const StickyContext: import('react').Context<StickyContextType | null>;
+export declare const useStickyContext: () => StickyContextType | null;
+export {};

package/dist/contexts/StickyContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+const StickyContext = createContext(null);
+const useStickyContext = () => {
+  return useContext(StickyContext);
+};
+export {
+  StickyContext,
+  useStickyContext
+};

package/dist/contexts/TableContext.d.ts

@@ -0,0 +1,11 @@
+import { useReactTable } from '@tanstack/react-table';
+import { Virtualizer } from '@tanstack/react-virtual';
+type TableInstance<TData extends object> = ReturnType<typeof useReactTable<TData>>;
+type TableContextType<TData extends object> = {
+    table: TableInstance<TData>;
+    rowVirtualizer?: Virtualizer<HTMLDivElement, Element>;
+    getScrollContainer: () => HTMLElement | null;
+};
+export declare const TableContext: import('react').Context<TableContextType<any> | null>;
+export declare const useTableContext: <TData extends object>() => TableContextType<TData>;
+export {};

package/dist/contexts/TableContext.js

@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react";
+const TableContext = createContext(null);
+const useTableContext = () => {
+  const ctx = useContext(TableContext);
+  if (!ctx) {
+    throw new Error("useTableContext must be used inside <TableProvider>");
+  }
+  return ctx;
+};
+export {
+  TableContext,
+  useTableContext
+};

package/dist/hooks/useColumnSizing.d.ts

@@ -0,0 +1,23 @@
+import { MutableRefObject } from 'react';
+import { ColumnSizingState } from '@tanstack/react-table';
+type UseColumnSizingProps = {
+    columnWidths: {
+        id: string;
+        minWidth?: number;
+        width?: number;
+        maxWidth?: number;
+    }[];
+    wrapperRef: MutableRefObject<HTMLDivElement | null>;
+    enabled?: boolean;
+};
+export declare const useColumnSizing: ({ wrapperRef, columnWidths, enabled, }: UseColumnSizingProps) => {
+    columnSizing: ColumnSizingState;
+    setColumnSizing: import('react').Dispatch<import('react').SetStateAction<ColumnSizingState>>;
+    isColumnSizingReady: boolean;
+};
+export declare const calculateWidths: (columns: {
+    width?: number;
+    maxWidth?: number;
+    minWidth?: number;
+}[], availableSpace: number) => number[];
+export {};

package/dist/hooks/useColumnSizing.js

@@ -0,0 +1,95 @@
+import { useState, useCallback, useLayoutEffect } from "react";
+import { useDebounce, useResizeObserver } from "@synerise/ds-utils";
+import { calculatePixels } from "../utils/calculatePixels.js";
+const useColumnSizing = ({
+  wrapperRef,
+  columnWidths,
+  enabled = true
+}) => {
+  const [columnSizing, setColumnSizing] = useState({});
+  const [isColumnSizingReady, setIsColumnSizingReady] = useState(!enabled);
+  const calc = useCallback((availableWidth) => {
+    if (!enabled) {
+      return;
+    }
+    const calculatedWidths = calculateWidths(columnWidths, availableWidth);
+    const sizing = {};
+    columnWidths.forEach((_col, index) => {
+      const colWidthId = `col-${index}`;
+      sizing[colWidthId] = calculatedWidths[index];
+    });
+    setColumnSizing(sizing);
+    setIsColumnSizingReady(true);
+  }, [columnWidths, enabled]);
+  const debouncedCalc = useDebounce(calc, 500);
+  const getContentWidth = useCallback((element) => {
+    const {
+      paddingLeft,
+      paddingRight
+    } = getComputedStyle(element);
+    return element.clientWidth - parseFloat(paddingLeft) - parseFloat(paddingRight);
+  }, []);
+  const resizeHandler = useCallback(() => {
+    if (!enabled) {
+      return;
+    }
+    if (wrapperRef.current?.clientWidth) {
+      debouncedCalc(getContentWidth(wrapperRef.current));
+    }
+  }, [enabled, debouncedCalc, getContentWidth, wrapperRef]);
+  useLayoutEffect(() => {
+    if (!enabled) {
+      setColumnSizing({});
+      setIsColumnSizingReady(true);
+      return;
+    }
+    if (wrapperRef.current) {
+      calc(getContentWidth(wrapperRef.current));
+    }
+  }, [enabled, calc, getContentWidth, wrapperRef]);
+  useResizeObserver(wrapperRef, resizeHandler);
+  return {
+    columnSizing,
+    setColumnSizing,
+    isColumnSizingReady
+  };
+};
+const calculateWidths = (columns, availableSpace) => {
+  let baseSum = 0;
+  let flexibleColumnCount = 0;
+  let noMaxColumnCount = 0;
+  const baseWidths = columns.map((column) => {
+    const baseWidth = calculatePixels(column.width || column.minWidth) || 0;
+    flexibleColumnCount += Number(!column.width);
+    noMaxColumnCount += Number(!column.width && !column.maxWidth);
+    baseSum += baseWidth;
+    return baseWidth;
+  });
+  if (!flexibleColumnCount) {
+    return baseWidths;
+  }
+  if (baseSum < availableSpace) {
+    const extraWidth = (availableSpace - baseSum) / flexibleColumnCount;
+    let interimSum = 0;
+    columns.forEach((column, index) => {
+      if (!column.width) {
+        const maxWidthAsNumber = calculatePixels(column.maxWidth);
+        baseWidths[index] = maxWidthAsNumber ? Math.min(maxWidthAsNumber, baseWidths[index] + extraWidth) : baseWidths[index] + extraWidth;
+      }
+      interimSum += baseWidths[index];
+    });
+    if (interimSum < availableSpace) {
+      const extraWidth2 = (availableSpace - interimSum) / noMaxColumnCount;
+      columns.forEach((column, index) => {
+        if (!column.width && !column.maxWidth) {
+          baseWidths[index] += extraWidth2;
+        }
+      });
+    }
+  }
+  return baseWidths;
+};
+export {
+  calculateWidths,
+  useColumnSizing
+};

package/dist/hooks/useDefaultTexts.d.ts

@@ -0,0 +1,2 @@
+import { TableTexts } from '../Table.types';
+export declare const useDefaultTexts: (defaultTexts?: Partial<TableTexts>) => TableTexts;