@gobolt/genesis 0.3.22 → 0.3.24

package/dist/components/TableWithControls/components/Select/SelectTrigger.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import styled from "@gobolt/genesis/utils/styled";
+import DropdownChevron from "../shared/DropdownChevron";
+import { Typography } from "@gobolt/genesis/components";
+const getBackgroundColor = (colors, disabled, $variant) => {
+    if ($variant === "simple")
+        return "#F4F4F4";
+    if (disabled)
+        return "#F4F4F4";
+    return "#fff";
+};
+const TriggerWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: ${({ $disabled }) => ($disabled ? "not-allowed" : "pointer")};
+  opacity: ${({ $disabled }) => ($disabled ? 0.4 : 1)};
+  position: relative;
+  box-shadow: ${({ $variant }) => $variant === "simple" ? "none" : "0px 1px 2px 0px rgba(0, 0, 0, 0.12)"};
+  transition: all 0.2s ease-in-out;
+  min-height: ${({ $variant }) => ($variant === "simple" ? "32px" : "40px")};
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  &:focus {
+    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.12),
+      0 0 0 3px
+        ${({ theme, $themeType = "primary" }) => theme.colors[$themeType].focussed.ringColor};
+  }
+
+  ${({ $variant, theme, $disabled }) => $variant === "simple"
+    ? `
+    padding: ${theme.sizing.Size1} ${theme.sizing.Size2};
+    background: ${$disabled ? theme.colors.inputs.surface.disabled : "rgba(0, 0, 0, 0.04)"};
+    border: none;
+    border-radius: ${theme.borderRadius.BorderRadiusSm}px;
+    min-height: ${({ $variant }) => ($variant === "simple" ? "32px" : "40px")};
+
+    &:hover {
+      border: none;
+    }
+    `
+    : `
+    padding: ${theme.sizing.Size1} ${theme.sizing.Size2};
+    background: ${$disabled
+        ? theme.colors.inputs.surface.disabled
+        : theme.colors.surface.default?.backgroundColor};
+    border: 1px solid #9a9a9a;
+    border-radius: ${theme.borderRadius.BorderRadiusSm}px;
+    min-height: ${({ $variant }) => ($variant === "simple" ? "32px" : "40px")};
+
+    &:hover {
+      border-color: rgba(0, 0, 0, 0.2);
+    }
+  `}
+`;
+const ValueContainer = styled.div `
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.sizing.Size2}px;
+  flex: 1;
+  padding: 4px 8px;
+`;
+const ChevronContainer = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: ${({ $variant }) => ($variant === "simple" ? "4px" : "4px")};
+  margin-left: ${({ $variant }) => ($variant === "simple" ? "4px" : "0")};
+`;
+const SelectTrigger = ({ type = "primary", theme, state, value, placeholder = "Select...", open, onClick, renderValue, options = [], disabled = false, variant = "none", }) => {
+    const handleClick = React.useCallback(() => {
+        if (disabled)
+            return;
+        onClick?.();
+    }, [disabled, onClick]);
+    const displayValue = React.useMemo(() => {
+        if (!value)
+            return null;
+        if (renderValue)
+            return renderValue(value);
+        if (Array.isArray(value)) {
+            if (value.length === 0)
+                return null;
+            const selectedLabels = value
+                .map(String)
+                .map((v) => options.find((opt) => opt.value === v)?.label)
+                .filter(Boolean);
+            return selectedLabels.length > 0
+                ? selectedLabels.join(", ")
+                : `${value.length} selected`;
+        }
+        const selectedOption = options.find((opt) => opt.value === String(value));
+        return selectedOption?.label || value.toString();
+    }, [value, renderValue, options]);
+    return (_jsxs(TriggerWrapper, { "$themeType": type, "$state": state, onClick: handleClick, tabIndex: disabled ? -1 : 0, role: "button", "$disabled": disabled, "$variant": variant, style: {
+            backgroundColor: getBackgroundColor(theme, disabled, variant),
+        }, children: [_jsx(ValueContainer, { "$variant": variant, children: displayValue ? (_jsx(Typography, { variant: "body2", color: disabled ? "copy-light" : "copy", children: displayValue })) : (_jsx(Typography, { variant: "body2", color: disabled ? "copy-light" : "copy-light", children: placeholder })) }), _jsx(ChevronContainer, { "$variant": variant, children: _jsx(DropdownChevron, {}) })] }));
+};
+export default SelectTrigger;

package/dist/components/TableWithControls/components/Select/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Select";
+export type { SelectProps } from "./Select";

package/dist/components/TableWithControls/components/Select/index.js

@@ -0,0 +1 @@
+export { default } from "./Select";

package/dist/components/TableWithControls/components/Table/Table.d.ts

@@ -0,0 +1,51 @@
+import * as React from "react";
+import { ColumnType } from "antd/es/table";
+import type { TablePaginationConfig } from "antd/es/table";
+import { PaginationStyle } from "./TableControls/CustomPagination";
+import type { ActionEvent } from "@/lib/types";
+export type Change = (actionEvent: ActionEvent) => void;
+export type SelectionType = "checkbox" | "radio";
+export interface TableProps<T extends Record<string, any>> {
+    dataSource: T[];
+    columns: ColumnType<T>[];
+    rowKey?: keyof T | ((record: T) => React.Key);
+    size?: "small" | "middle" | "large";
+    rowSelection?: {
+        type?: SelectionType;
+        selectedRowKeys?: React.Key[];
+        onChange?: (selectedRowKeys: React.Key[], selectedRows: T[]) => void;
+        getCheckboxProps?: (record: T) => {
+            disabled?: boolean;
+            name?: string;
+        };
+    };
+    onChange?: (pagination: TablePaginationType, filters: Record<string, React.Key[]>, sorter: SorterResult<T> | SorterResult<T>[]) => void;
+    loading?: boolean;
+    pagination?: (TablePaginationConfig & {
+        paginationStyle?: PaginationStyle;
+    }) | false;
+    scroll?: {
+        x?: number | string;
+        y?: number | string;
+    };
+    bordered?: boolean;
+    locale?: {
+        emptyText?: React.ReactNode;
+    };
+    [key: string]: any;
+    isMainContentCell?: boolean;
+}
+export type TablePaginationType = {
+    pageSize?: number;
+    current?: number;
+    total?: number;
+    onChange?: (page: number, pageSize: number) => void;
+};
+export type SorterResult<T> = {
+    column?: ColumnType<T>;
+    order?: "ascend" | "descend" | null;
+    field?: keyof T | string | React.Key | readonly React.Key[];
+    columnKey?: React.Key;
+};
+declare function Table<T extends Record<string, any>>({ columns, dataSource, rowKey, size, onChange, rowSelection, pagination, isMainContentCell, ...rest }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
+export default Table;

package/dist/components/TableWithControls/components/Table/Table.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as S from "./styles";
+import CustomPagination, { PaginationStyle, } from "./TableControls/CustomPagination";
+function Table({ columns, dataSource, rowKey = "id", size = "small", onChange, rowSelection, pagination, isMainContentCell = false, ...rest }) {
+    const paginationConfig = pagination === false
+        ? false
+        : {
+            ...pagination,
+            itemRender: undefined, // Clear any existing itemRender to avoid conflicts
+            render: (properties) => (_jsx(CustomPagination, { ...properties, paginationStyle: pagination?.paginationStyle || PaginationStyle.SIMPLE })),
+        };
+    return (_jsx(S.Table, { "data-testid": "Table", dataSource: dataSource, columns: columns, rowKey: rowKey, locale: { emptyText: "No Data" }, size: size, onChange: onChange, rowSelection: rowSelection, pagination: paginationConfig, "$isMainContentCell": isMainContentCell, ...rest }));
+}
+export default Table;

package/dist/components/TableWithControls/components/Table/TableControls/CustomPagination.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { PaginationProps } from "antd";
+export declare enum PaginationStyle {
+    SIMPLE = "simple",// Shows just 1-5
+    TRUNCATED = "truncated",// Shows 1-5...20
+    CENTERED = "centered",// Shows 1...4-5-6-7-8...20
+    END_FOCUSED = "endFocused"
+}
+interface CustomPaginationProperties extends Omit<PaginationProps, "itemRender"> {
+    paginationStyle?: PaginationStyle;
+}
+declare const CustomPagination: React.FC<CustomPaginationProperties>;
+export default CustomPagination;

package/dist/components/TableWithControls/components/Table/TableControls/CustomPagination.js

@@ -0,0 +1,158 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import styled from "styled-components";
+import { PaginationNumber } from "./PaginationNumber";
+export var PaginationStyle;
+(function (PaginationStyle) {
+    PaginationStyle["SIMPLE"] = "simple";
+    PaginationStyle["TRUNCATED"] = "truncated";
+    PaginationStyle["CENTERED"] = "centered";
+    PaginationStyle["END_FOCUSED"] = "endFocused";
+})(PaginationStyle || (PaginationStyle = {}));
+const PaginationContainer = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin: 0;
+  gap: 0 0;
+`;
+const ChevronButton = styled.button `
+  background: transparent;
+  border: none;
+  color: ${({ theme, disabled }) => disabled ? theme.colors.onsurface["copy-light"] || "#B0B0B0" : "#222"};
+  font-size: 32px;
+  height: 40px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
+  margin-right: ${({ $right }) => ($right ? "0" : "8px")};
+  margin-left: ${({ $right }) => ($right ? "8px" : "0")};
+  transition: color 0.2s;
+`;
+const ChevronIcon = ({ left = false }) => (_jsx("svg", { width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: left ? "M17.5 21L11.5 14L17.5 7" : "M10.5 7L16.5 14L10.5 21", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const getSimplePages = (current, total) => {
+    // Always show 1-5, but don't exceed total
+    const pages = [];
+    for (let index = 1; index <= Math.min(5, total); index++) {
+        pages.push(index);
+    }
+    return pages;
+};
+const CustomPagination = ({ paginationStyle = PaginationStyle.SIMPLE, current = 1, total = 1, pageSize = 10, onChange, ...properties }) => {
+    const pageCount = Math.ceil(total / pageSize);
+    const handleChange = (page) => {
+        if (onChange)
+            onChange(page, pageSize);
+    };
+    if (paginationStyle === PaginationStyle.SIMPLE) {
+        const pages = getSimplePages(current, pageCount);
+        return (_jsxs(PaginationContainer, { children: [_jsx(ChevronButton, { onClick: () => handleChange(current - 1), disabled: current === 1, "aria-label": "Previous Page", children: _jsx(ChevronIcon, { left: true }) }), pages.map((number_) => (_jsx(PaginationNumber, { active: number_ === current, onClick: () => handleChange(number_), "aria-label": `Page ${number_}`, children: number_ }, number_))), _jsx(ChevronButton, { onClick: () => handleChange(current + 1), disabled: current === pageCount, "aria-label": "Next Page", "$right": true, children: _jsx(ChevronIcon, {}) })] }));
+    }
+    if (paginationStyle === PaginationStyle.TRUNCATED) {
+        // Show 1 2 3 4 5 ... last
+        const pages = [];
+        for (let index = 1; index <= Math.min(5, pageCount); index++) {
+            pages.push(index);
+        }
+        return (_jsxs(PaginationContainer, { children: [_jsx(ChevronButton, { onClick: () => handleChange(current - 1), disabled: current === 1, "aria-label": "Previous Page", children: _jsx(ChevronIcon, { left: true }) }), pages.map((number_) => (_jsx(PaginationNumber, { active: number_ === current, onClick: () => handleChange(number_), "aria-label": `Page ${number_}`, children: number_ }, number_))), pageCount > 5 && (_jsxs(_Fragment, { children: [_jsx("span", { style: {
+                                color: "#7F7F7F",
+                                fontWeight: 600,
+                                fontSize: 16,
+                                margin: "0 8px",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                paddingBottom: 10,
+                            }, children: "..." }), _jsx(PaginationNumber, { active: current === pageCount, onClick: () => handleChange(pageCount), "aria-label": `Page ${pageCount}`, children: pageCount }, pageCount)] })), _jsx(ChevronButton, { onClick: () => handleChange(current + 1), disabled: current === pageCount, "aria-label": "Next Page", "$right": true, children: _jsx(ChevronIcon, {}) })] }));
+    }
+    if (paginationStyle === PaginationStyle.CENTERED) {
+        // Show 1 ... left mid mid mid mid ... last
+        // Always show 5 numbers, current centered if possible
+        const pages = [];
+        const visibleCount = 5;
+        const sideCount = 2; // numbers to show on each side of current
+        let start = Math.max(2, current - 2);
+        let end = Math.min(pageCount - 1, current + 2);
+        // Adjust if near the start
+        if (current <= 3) {
+            start = 2;
+            end = 6;
+        }
+        // Adjust if near the end
+        if (current >= pageCount - 2) {
+            start = pageCount - 4;
+            end = pageCount - 1;
+        }
+        start = Math.max(2, start);
+        end = Math.min(pageCount - 1, end);
+        // Always show first page
+        pages.push(1);
+        // Show left ellipsis if needed
+        if (start > 2) {
+            pages.push("left-ellipsis");
+        }
+        // Show middle pages
+        for (let index = start; index <= end; index++) {
+            pages.push(index);
+        }
+        // Show right ellipsis if needed
+        if (end < pageCount - 1) {
+            pages.push("right-ellipsis");
+        }
+        // Always show last page if more than 1
+        if (pageCount > 1) {
+            pages.push(pageCount);
+        }
+        return (_jsxs(PaginationContainer, { children: [_jsx(ChevronButton, { onClick: () => handleChange(current - 1), disabled: current === 1, "aria-label": "Previous Page", children: _jsx(ChevronIcon, { left: true }) }), pages.map((number_, index) => {
+                    if (number_ === "left-ellipsis" || number_ === "right-ellipsis") {
+                        return (_jsx("span", { style: {
+                                color: "#7F7F7FB0",
+                                fontWeight: 600,
+                                fontSize: 16,
+                                margin: "0 8px",
+                                height: "40px",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                paddingBottom: 10,
+                            }, children: "..." }, number_ + index));
+                    }
+                    return (_jsx(PaginationNumber, { active: number_ === current, onClick: () => typeof number_ === "number" && handleChange(number_), "aria-label": `Page ${number_}`, children: number_ }, number_));
+                }), _jsx(ChevronButton, { onClick: () => handleChange(current + 1), disabled: current === pageCount, "aria-label": "Next Page", "$right": true, children: _jsx(ChevronIcon, {}) })] }));
+    }
+    if (paginationStyle === PaginationStyle.END_FOCUSED) {
+        // Show 1 ... last 5 pages
+        const pages = [];
+        // Always show first page
+        pages.push(1);
+        // If more than 6 pages, show ellipsis
+        if (pageCount > 6) {
+            pages.push("left-ellipsis");
+        }
+        // Show last 5 pages
+        const start = Math.max(2, pageCount - 4);
+        for (let index = start; index <= pageCount; index++) {
+            pages.push(index);
+        }
+        return (_jsxs(PaginationContainer, { children: [_jsx(ChevronButton, { onClick: () => handleChange(current - 1), disabled: current === 1, "aria-label": "Previous Page", children: _jsx(ChevronIcon, { left: true }) }), pages.map((number_, index) => {
+                    if (number_ === "left-ellipsis") {
+                        return (_jsx("span", { style: {
+                                color: "#7F7F7F",
+                                fontWeight: 600,
+                                fontSize: 18,
+                                margin: "0 8px",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                height: "40px",
+                                paddingBottom: 10,
+                            }, children: "..." }, number_ + index));
+                    }
+                    return (_jsx(PaginationNumber, { active: number_ === current, onClick: () => typeof number_ === "number" && handleChange(number_), "aria-label": `Page ${number_}`, children: number_ }, number_));
+                }), _jsx(ChevronButton, { onClick: () => handleChange(current + 1), disabled: current === pageCount, "aria-label": "Next Page", "$right": true, children: _jsx(ChevronIcon, {}) })] }));
+    }
+    // Fallback for other styles (not implemented yet)
+    return null;
+};
+export default CustomPagination;

package/dist/components/TableWithControls/components/Table/TableControls/PaginationNumber.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface PaginationNumberProperties extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    active?: boolean;
+    children: React.ReactNode;
+}
+export declare const PaginationNumber: React.FC<PaginationNumberProperties>;
+export {};

package/dist/components/TableWithControls/components/Table/TableControls/PaginationNumber.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+import Typography from "../../Typography";
+const NumberButton = styled.button `
+  background: ${({ $active, theme }) => $active ? theme.colors.primary.default.backgroundColor : "transparent"};
+  color: ${({ $active, theme }) => $active ? "#fff" : theme.colors.onsurface["copy-light"] || "#6C6C6C"};
+  border: none;
+  border-radius: 4px;
+  min-width: 24px;
+  height: 24px;
+  padding: 4px 7px;
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0 4px;
+  cursor: pointer;
+  transition: background 0.2s, color 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: inherit;
+  white-space: nowrap;
+
+  &:hover {
+    background: ${({ $active, theme }) => $active
+    ? theme.colors.primary.default.backgroundColor
+    : theme.colors.primary.default.backgroundColor + "22"};
+    color: #fff;
+  }
+`;
+export const PaginationNumber = ({ active, children, ...properties }) => (_jsx(NumberButton, { "$active": active, "aria-current": active ? "page" : undefined, ...properties, children: _jsx(Typography, { variant: "digits3", color: active ? "white" : "#6C6C6C", children: children }) }));

package/dist/components/TableWithControls/components/Table/TableControls/PrimaryTableControlsRow.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import type { ActionEvent, TableEventPayload } from "../../../types/events";
+type SortOption = {
+    value: string;
+    label: React.ReactNode;
+};
+type SortOptions = SortOption[] | null;
+export interface PrimaryTableControlsRowProps {
+    sortOptions: SortOptions;
+    searchByPlaceholder?: string;
+    searchField?: string;
+    isSortedAscending?: boolean;
+    onChange?: (event: ActionEvent<TableEventPayload>) => void;
+    searchValue?: string;
+    selectedSortOption?: string;
+}
+declare const PrimaryTableControlsRow: ({ sortOptions, searchByPlaceholder, searchField, isSortedAscending, searchValue, selectedSortOption, onChange, }: PrimaryTableControlsRowProps) => import("react/jsx-runtime").JSX.Element;
+export default PrimaryTableControlsRow;

package/dist/components/TableWithControls/components/Table/TableControls/PrimaryTableControlsRow.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import UtilityButton from "../../UtilityButton";
+import IconButton from "../../Button/IconButton";
+import Select from "../../Select";
+import Typography from "../../Typography";
+import Input from "../../Input";
+import { HiMiniAdjustmentsVertical } from "react-icons/hi2";
+import { HiSearch } from "react-icons/hi";
+import { HiOutlineSortAscending, HiOutlineSortDescending, } from "react-icons/hi";
+import { FiSettings } from "react-icons/fi";
+const PrimaryTableControlsRow = ({ sortOptions, searchByPlaceholder = "", searchField = "address", isSortedAscending = true, searchValue = "", selectedSortOption = "", onChange, }) => {
+    const onInputChange = (actionEvent) => {
+        onChange?.({
+            event: "inputChange",
+            payload: actionEvent.payload,
+        });
+    };
+    const onSortChange = (value) => {
+        const sortActionEvent = {
+            event: "primarySortChange",
+            payload: { value },
+        };
+        onChange?.(sortActionEvent);
+    };
+    const onFilterClick = () => {
+        const filterActionEvent = {
+            event: "filterClick",
+            payload: {},
+        };
+        onChange?.(filterActionEvent);
+    };
+    const onSettingsClick = () => {
+        const settingsActionEvent = {
+            event: "settingsClick",
+            payload: {},
+        };
+        onChange?.(settingsActionEvent);
+    };
+    const onOrderClick = () => {
+        const ascendingActionEvent = {
+            event: "orderClick",
+            payload: {
+                value: isSortedAscending ? "desc" : "asc",
+            },
+        };
+        onChange?.(ascendingActionEvent);
+    };
+    return (_jsxs("div", { style: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            width: "100%",
+            minWidth: 800,
+            marginBottom: 16,
+        }, children: [_jsxs("div", { style: { display: "flex" }, children: [_jsx(Input, { size: "normal", placeholder: searchByPlaceholder, prefix: _jsx(HiSearch, {}), style: {
+                            padding: "5px 8px",
+                        }, value: searchValue, onChange: onInputChange }), onFilterClick && (_jsx("div", { style: { marginLeft: 16 }, children: _jsx(UtilityButton, { isIconButton: true, icon: _jsx(HiMiniAdjustmentsVertical, { color: "#222222" }), onClick: onFilterClick }) })), onSettingsClick && (_jsx("div", { style: { marginLeft: 16 }, children: _jsx(UtilityButton, { isIconButton: true, icon: _jsx(FiSettings, { color: "#222222" }), onClick: onSettingsClick }) }))] }), _jsxs("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    width: 300,
+                    justifyContent: "flex-end",
+                    marginLeft: "auto",
+                }, children: [_jsx(Typography, { variant: "body1", color: "#6C6C6C", style: {
+                            width: 70,
+                            flexShrink: 0,
+                            textAlign: "right",
+                            paddingRight: 4,
+                            marginRight: 8,
+                        }, children: "Sort by" }), sortOptions && onSortChange ? (_jsx(Select, { options: sortOptions, defaultValue: sortOptions[0].value, value: selectedSortOption, variant: "simple", onChange: onSortChange, style: {
+                            width: 180,
+                            flexShrink: 0,
+                        } })) : null, _jsx("div", { style: {
+                            marginLeft: 8,
+                            flexShrink: 0,
+                        }, children: _jsx(IconButton, { icon: isSortedAscending ? (_jsx(HiOutlineSortDescending, { size: 20 })) : (_jsx(HiOutlineSortAscending, { size: 20 })), onClick: onOrderClick }) })] })] }));
+};
+export default PrimaryTableControlsRow;

package/dist/components/TableWithControls/components/Table/TableControls/SecondaryTableControlsRow.d.ts

@@ -0,0 +1,11 @@
+import type { Change } from "../Table";
+export type Groups = {
+    [key: string]: string[];
+};
+export interface SecondaryTableControlsRowProps {
+    groups: Groups | null;
+    totalRecords: number | null;
+    onChange?: Change;
+}
+declare const SecondaryTableControlsRow: ({ groups, totalRecords, onChange, }: SecondaryTableControlsRowProps) => import("react/jsx-runtime").JSX.Element;
+export default SecondaryTableControlsRow;

package/dist/components/TableWithControls/components/Table/TableControls/SecondaryTableControlsRow.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Badge from "../../Badge";
+import Typography from "../../Typography";
+import Tooltip from "../../Tooltip";
+import { getIcon } from "../../../utils/icon-util";
+const GroupItem = ({ title, items, onGroupItemClick }) => {
+    if (items.length === 0)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { tip: title, children: _jsx("div", { style: {
+                        display: "flex",
+                        justifyContent: "center",
+                        alignItems: "center",
+                        width: 24,
+                        height: 24,
+                    }, children: getIcon(title) }) }), _jsx("div", { style: { display: "flex", gap: 4 }, children: items.map((item) => (_jsx(Badge, { label: item, hasClose: true, state: "generic", size: "small", onClick: () => onGroupItemClick(title, item) }, item.toString()))) })] }));
+};
+const GroupsRow = ({ groups, onGroupItemClick }) => {
+    if (!groups)
+        return null;
+    const groupArray = Object.entries(groups).map(([title, items]) => ({
+        title,
+        items,
+    }));
+    return (_jsx("div", { style: { display: "flex", gap: 4 }, children: groupArray.length > 0
+            ? groupArray.map((group) => (_jsx(GroupItem, { title: group.title, items: group.items, onGroupItemClick: onGroupItemClick }, group.title)))
+            : null }));
+};
+const SecondaryTableControlsRow = ({ groups, totalRecords, onChange, }) => {
+    const onGroupItemClick = (title, item) => {
+        const groupItemClickEvent = {
+            event: "groupItemClick",
+            payload: { title, item },
+        };
+        onChange?.(groupItemClickEvent);
+    };
+    return (_jsxs("div", { style: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "flex-end",
+            marginTop: 8,
+        }, children: [_jsx(GroupsRow, { groups: groups, onGroupItemClick: onGroupItemClick }), totalRecords > 0 ? (_jsx(Typography, { variant: "body2", color: "#6C6C6C", children: `${totalRecords} results` })) : null] }));
+};
+export default SecondaryTableControlsRow;

package/dist/components/TableWithControls/components/Table/TableControls/TableControls.d.ts

@@ -0,0 +1,14 @@
+import type { PrimaryTableControlsRowProps } from "./PrimaryTableControlsRow";
+import type { SecondaryTableControlsRowProps } from "./SecondaryTableControlsRow";
+import type { ActionEvent, TableEventPayload } from "../../../types/events";
+export type TableControlsData = {
+    primaryTableRowData: PrimaryTableControlsRowProps;
+    secondaryTableRowData?: SecondaryTableControlsRowProps;
+};
+export interface TableControlsProps {
+    primaryTableRowData: PrimaryTableControlsRowProps;
+    secondaryTableRowData?: SecondaryTableControlsRowProps;
+    onChange: (event: ActionEvent<TableEventPayload>) => void;
+}
+declare const TableControls: ({ primaryTableRowData, secondaryTableRowData, onChange, }: TableControlsProps) => import("react/jsx-runtime").JSX.Element;
+export default TableControls;

package/dist/components/TableWithControls/components/Table/TableControls/TableControls.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PrimaryTableControlsRow from "./PrimaryTableControlsRow";
+import SecondaryTableControlsRow from "./SecondaryTableControlsRow";
+const TableControls = ({ primaryTableRowData, secondaryTableRowData, onChange, }) => {
+    const onPrimaryChange = (actionEvent) => {
+        onChange(actionEvent);
+    };
+    const onSecondaryChange = (actionEvent) => {
+        onChange(actionEvent);
+    };
+    return (_jsxs("div", { "data-testid": "TableControls", style: { margin: "16px 0px" }, children: [_jsx(PrimaryTableControlsRow, { sortOptions: primaryTableRowData.sortOptions, searchByPlaceholder: primaryTableRowData.searchByPlaceholder, isSortedAscending: primaryTableRowData.isSortedAscending, onChange: onPrimaryChange, searchValue: primaryTableRowData.searchValue, selectedSortOption: primaryTableRowData.selectedSortOption }), secondaryTableRowData ? (_jsx(SecondaryTableControlsRow, { groups: secondaryTableRowData.groups, totalRecords: secondaryTableRowData.totalRecords, onChange: onSecondaryChange })) : null] }));
+};
+export default TableControls;

package/dist/components/TableWithControls/components/Table/TableControls/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./TableControls";
+export type { TableControlsProps } from "./TableControls";

package/dist/components/TableWithControls/components/Table/TableControls/index.js

@@ -0,0 +1 @@
+export { default } from "./TableControls";

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

@@ -0,0 +1,13 @@
+import { PaginationStyle } from "./TableControls/CustomPagination";
+import type { ColumnType } from "antd/es/table";
+export interface TablePaginationProps<T> {
+    columns: ColumnType<T>[];
+    dataSource: T[];
+    rowSelection?: any;
+    onChange?: (...arguments_: any[]) => void;
+    paginationStyle?: PaginationStyle;
+    pageSize?: number;
+    isMainContentCell?: boolean;
+}
+declare const TablePagination: <T extends Record<string, any>>({ columns, dataSource, rowSelection, onChange, paginationStyle, pageSize, isMainContentCell, }: TablePaginationProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default TablePagination;

package/dist/components/TableWithControls/components/Table/TablePagination.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import Table from "./Table";
+import CustomPagination, { PaginationStyle, } from "./TableControls/CustomPagination";
+const TablePagination = ({ columns, dataSource, rowSelection, onChange, paginationStyle = PaginationStyle.SIMPLE, pageSize = 10, isMainContentCell, }) => {
+    const [current, setCurrent] = useState(1);
+    const total = dataSource.length;
+    const paginatedData = dataSource.slice((current - 1) * pageSize, current * pageSize);
+    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0px" }, children: [_jsx(Table, { columns: columns, dataSource: paginatedData, rowSelection: rowSelection, onChange: onChange, pagination: false, isMainContentCell: isMainContentCell }), _jsx("div", { style: { display: "flex", justifyContent: "flex-end", marginTop: 16 }, children: _jsx(CustomPagination, { paginationStyle: paginationStyle, current: current, total: total, pageSize: pageSize, onChange: setCurrent }) })] }));
+};
+export default TablePagination;

package/dist/components/TableWithControls/components/Table/__mocks__/table-mocks.d.ts

@@ -0,0 +1,20 @@
+import { ColumnsType } from "antd/es/table";
+export interface AppointmentWithSimpleAddress {
+    id: string;
+    number: string;
+    timerange: string;
+    status: AppointmentStatus;
+    address: {
+        nickname: string;
+        address: string;
+    };
+    job_subtype: "delivery" | "pickup";
+}
+export interface MockDataSource {
+    appointments: AppointmentWithSimpleAddress[];
+}
+type AppointmentStatus = "scheduled" | "completed" | "cancelled" | "in_progress";
+export declare const mockColumns: ColumnsType<AppointmentWithSimpleAddress>;
+export declare const mockColumnsWithSortDisabled: ColumnsType<AppointmentWithSimpleAddress>;
+export declare const mockDataSource: MockDataSource;
+export {};