@jobber/components 6.80.0 → 6.82.0

package/dist/Autocomplete/constants.d.ts

@@ -1,2 +1 @@
 export declare const AUTOCOMPLETE_MAX_HEIGHT = 300;
-export declare const AUTCOMPLETE_MIN_HEIGHT = 100;

package/dist/Autocomplete/index.cjs

@@ -9,11 +9,12 @@ require('../useIsMounted-cjs.js');
 require('../useSafeLayoutEffect-cjs.js');
 require('../floating-ui.react-cjs.js');
 require('react-dom');
+require('../maxHeight-cjs.js');
+require('@jobber/design');
 require('../Heading-cjs.js');
 require('../Typography-cjs.js');
 require('../Text-cjs.js');
 require('../Icon-cjs.js');
-require('@jobber/design');
 require('../useOnKeyDown-cjs.js');
 require('../InputText/index.cjs');
 require('../FormField-cjs.js');

package/dist/Autocomplete/index.mjs

@@ -7,11 +7,12 @@ import '../useIsMounted-es.js';
 import '../useSafeLayoutEffect-es.js';
 import '../floating-ui.react-es.js';
 import 'react-dom';
+import '../maxHeight-es.js';
+import '@jobber/design';
 import '../Heading-es.js';
 import '../Typography-es.js';
 import '../Text-es.js';
 import '../Icon-es.js';
-import '@jobber/design';
 import '../useOnKeyDown-es.js';
 import '../InputText/index.mjs';
 import '../FormField-es.js';

package/dist/Autocomplete-cjs.js

@@ -7,6 +7,7 @@ var classnames = require('classnames');
 var useIsMounted = require('./useIsMounted-cjs.js');
 var floatingUi_react = require('./floating-ui.react-cjs.js');
 var useSafeLayoutEffect = require('./useSafeLayoutEffect-cjs.js');
+var maxHeight = require('./maxHeight-cjs.js');
 var Heading = require('./Heading-cjs.js');
 var Text = require('./Text-cjs.js');
 var Icon = require('./Icon-cjs.js');
@@ -17,7 +18,6 @@ var FormField = require('./FormField-cjs.js');
 var styles = {"autocomplete":"_7mObJiwfPh4-","options":"dL5JShAJlKM-","heading":"PWZL-94hH7k-","visible":"_2RzcnTdaPyc-","option":"y9zhi8Wr8QA-","active":"_3Xg49dtL1Q8-","separator":"LIeh390F3W8-","icon":"K2phy6IC3TY-","text":"a6-LbUm5WnY-","label":"tQNbuxcE9nU-","details":"qacStG9-XbE-","spinning":"P9cQDL4MZ-s-"};
 
 const AUTOCOMPLETE_MAX_HEIGHT = 300;
-const AUTCOMPLETE_MIN_HEIGHT = 100;
 
 function useRepositionMenu(attachTo, visible, cssManagedVisibility) {
     const { refs, floatingStyles, update } = floatingUi_react.useFloating(Object.assign({ placement: "bottom", middleware: [
@@ -25,13 +25,11 @@ function useRepositionMenu(attachTo, visible, cssManagedVisibility) {
             floatingUi_react.flip({ fallbackPlacements: ["top"] }),
             floatingUi_react.size({
                 apply({ availableHeight, elements }) {
-                    // Limit the height for a true maximum
-                    // However if we have less space than that, then reduce it to allow scrolling
-                    const maxHeight = availableHeight > AUTOCOMPLETE_MAX_HEIGHT
-                        ? AUTOCOMPLETE_MAX_HEIGHT
-                        : Math.max(AUTCOMPLETE_MIN_HEIGHT, availableHeight);
+                    const maxHeight$1 = maxHeight.calculateMaxHeight(availableHeight, {
+                        maxHeight: AUTOCOMPLETE_MAX_HEIGHT,
+                    });
                     Object.assign(elements.floating.style, {
-                        maxHeight: `${maxHeight}px`,
+                        maxHeight: `${maxHeight$1}px`,
                     });
                 },
             }),

package/dist/Autocomplete-es.js

@@ -3,8 +3,9 @@ import React__default, { useCallback, useEffect, useState, forwardRef, useMemo,
 import { u as useDebounce_2 } from './useDebounce-es.js';
 import classnames from 'classnames';
 import { u as useIsMounted_2 } from './useIsMounted-es.js';
-import { u as useFloating, o as offset, f as flip, c as size, b as autoUpdate, F as FloatingPortal } from './floating-ui.react-es.js';
+import { u as useFloating, o as offset, f as flip, e as size, b as autoUpdate, F as FloatingPortal } from './floating-ui.react-es.js';
 import { u as useSafeLayoutEffect_1 } from './useSafeLayoutEffect-es.js';
+import { c as calculateMaxHeight } from './maxHeight-es.js';
 import { H as Heading } from './Heading-es.js';
 import { T as Text } from './Text-es.js';
 import { I as Icon } from './Icon-es.js';
@@ -15,7 +16,6 @@ import { m as mergeRefs } from './FormField-es.js';
 var styles = {"autocomplete":"_7mObJiwfPh4-","options":"dL5JShAJlKM-","heading":"PWZL-94hH7k-","visible":"_2RzcnTdaPyc-","option":"y9zhi8Wr8QA-","active":"_3Xg49dtL1Q8-","separator":"LIeh390F3W8-","icon":"K2phy6IC3TY-","text":"a6-LbUm5WnY-","label":"tQNbuxcE9nU-","details":"qacStG9-XbE-","spinning":"P9cQDL4MZ-s-"};
 
 const AUTOCOMPLETE_MAX_HEIGHT = 300;
-const AUTCOMPLETE_MIN_HEIGHT = 100;
 
 function useRepositionMenu(attachTo, visible, cssManagedVisibility) {
     const { refs, floatingStyles, update } = useFloating(Object.assign({ placement: "bottom", middleware: [
@@ -23,11 +23,9 @@ function useRepositionMenu(attachTo, visible, cssManagedVisibility) {
             flip({ fallbackPlacements: ["top"] }),
             size({
                 apply({ availableHeight, elements }) {
-                    // Limit the height for a true maximum
-                    // However if we have less space than that, then reduce it to allow scrolling
-                    const maxHeight = availableHeight > AUTOCOMPLETE_MAX_HEIGHT
-                        ? AUTOCOMPLETE_MAX_HEIGHT
-                        : Math.max(AUTCOMPLETE_MIN_HEIGHT, availableHeight);
+                    const maxHeight = calculateMaxHeight(availableHeight, {
+                        maxHeight: AUTOCOMPLETE_MAX_HEIGHT,
+                    });
                     Object.assign(elements.floating.style, {
                         maxHeight: `${maxHeight}px`,
                     });

package/dist/Card/index.cjs

@@ -12,7 +12,6 @@ require('../Icon-cjs.js');
 require('@jobber/design');
 require('../Menu-cjs.js');
 require('framer-motion');
-require('../useOnKeyDown-cjs.js');
 require('../useRefocusOnActivator-cjs.js');
 require('../floating-ui.react-cjs.js');
 require('react-dom');
@@ -20,6 +19,7 @@ require('../useFocusTrap-cjs.js');
 require('../useIsMounted-cjs.js');
 require('../useSafeLayoutEffect-cjs.js');
 require('../useFormFieldFocus-cjs.js');
+require('../maxHeight-cjs.js');
 
 
 

package/dist/Card/index.mjs

@@ -10,7 +10,6 @@ import '../Icon-es.js';
 import '@jobber/design';
 import '../Menu-es.js';
 import 'framer-motion';
-import '../useOnKeyDown-es.js';
 import '../useRefocusOnActivator-es.js';
 import '../floating-ui.react-es.js';
 import 'react-dom';
@@ -18,3 +17,4 @@ import '../useFocusTrap-es.js';
 import '../useIsMounted-es.js';
 import '../useSafeLayoutEffect-es.js';
 import '../useFormFieldFocus-es.js';
+import '../maxHeight-es.js';

package/dist/Chips/InternalChipDismissible/hooks/index.cjs

@@ -19,6 +19,7 @@ require('../../../Icon-cjs.js');
 require('@jobber/design');
 require('../../../floating-ui.react-cjs.js');
 require('react-dom');
+require('../../../maxHeight-cjs.js');
 
 
 

package/dist/Chips/InternalChipDismissible/hooks/index.mjs

@@ -17,3 +17,4 @@ import '../../../Icon-es.js';
 import '@jobber/design';
 import '../../../floating-ui.react-es.js';
 import 'react-dom';
+import '../../../maxHeight-es.js';

package/dist/Chips/InternalChipDismissible/index.cjs

@@ -20,6 +20,7 @@ require('../../Icon-cjs.js');
 require('@jobber/design');
 require('../../floating-ui.react-cjs.js');
 require('react-dom');
+require('../../maxHeight-cjs.js');
 require('classnames');
 require('../../useSafeLayoutEffect-cjs.js');
 require('../../Text-cjs.js');

package/dist/Chips/InternalChipDismissible/index.mjs

@@ -18,6 +18,7 @@ import '../../Icon-es.js';
 import '@jobber/design';
 import '../../floating-ui.react-es.js';
 import 'react-dom';
+import '../../maxHeight-es.js';
 import 'classnames';
 import '../../useSafeLayoutEffect-es.js';
 import '../../Text-es.js';

package/dist/Chips/index.cjs

@@ -22,6 +22,7 @@ require('../Icon-cjs.js');
 require('@jobber/design');
 require('../floating-ui.react-cjs.js');
 require('react-dom');
+require('../maxHeight-cjs.js');
 require('classnames');
 require('../useSafeLayoutEffect-cjs.js');
 require('../Text-cjs.js');

package/dist/Chips/index.mjs

@@ -20,6 +20,7 @@ import '../Icon-es.js';
 import '@jobber/design';
 import '../floating-ui.react-es.js';
 import 'react-dom';
+import '../maxHeight-es.js';
 import 'classnames';
 import '../useSafeLayoutEffect-es.js';
 import '../Text-es.js';

package/dist/Combobox/hooks/useComboboxAccessibility.d.ts

@@ -1,8 +1,8 @@
 import { UseInteractionsReturn } from "@floating-ui/react";
 import { ComboboxOption } from "../Combobox.types";
 export declare function useComboboxAccessibility(selectionCallback: (selection: ComboboxOption) => void, filteredOptions: ComboboxOption[], optionsListRef: React.RefObject<HTMLUListElement>, open: boolean, wrapperRef: React.RefObject<HTMLDivElement>): {
-    popperRef: React.RefObject<HTMLDivElement>;
-    popperStyles: React.CSSProperties;
+    floatingRef: React.RefObject<HTMLDivElement>;
+    floatingStyles: React.CSSProperties;
     floatingProps: ReturnType<UseInteractionsReturn["getFloatingProps"]>;
     nodeId?: string;
     parentNodeId: string | null;

package/dist/ComboboxContent-cjs.js

@@ -3,7 +3,6 @@
 var React = require('react');
 var classnames = require('classnames');
 var floatingUi_react = require('./floating-ui.react-cjs.js');
-var ReactDOM = require('react-dom');
 var ComboboxContentSearch = require('./ComboboxContentSearch-cjs.js');
 var ComboboxContentList = require('./ComboboxContentList-cjs.js');
 var ComboboxContentHeader = require('./ComboboxContentHeader-cjs.js');
@@ -52,12 +51,12 @@ function useComboboxAccessibility(selectionCallback, filteredOptions, optionsLis
     const parentNodeId = floatingUi_react.useFloatingParentNodeId();
     const nodeId = floatingUi_react.useFloatingNodeId();
     useRefocusOnActivator.useRefocusOnActivator_2(open);
-    const popperRef = useFocusTrap.useFocusTrap_2(open);
+    const floatingRef = useFocusTrap.useFocusTrap_2(open);
     const { floatingStyles, update, context } = floatingUi_react.useFloating({
         nodeId,
         elements: {
             reference: wrapperRef.current,
-            floating: popperRef.current,
+            floating: floatingRef.current,
         },
         open,
         onOpenChange: openState => {
@@ -65,9 +64,8 @@ function useComboboxAccessibility(selectionCallback, filteredOptions, optionsLis
                 handleClose();
         },
         middleware: [
-            floatingUi_react.autoPlacement({ allowedPlacements: ["bottom-start", "top-start"] }),
             floatingUi_react.offset(COMBOBOX_OFFSET),
-            floatingUi_react.shift({ padding: COMBOBOX_OFFSET }),
+            floatingUi_react.flip({ fallbackPlacements: ["top-start", "bottom-end", "top-end"] }),
         ],
         placement: "bottom-start",
         whileElementsMounted: floatingUi_react.autoUpdate,
@@ -83,11 +81,11 @@ function useComboboxAccessibility(selectionCallback, filteredOptions, optionsLis
     React.useEffect(() => {
         var _a;
         if (open) {
-            (_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener("keydown", handleContentKeydown);
+            (_a = floatingRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener("keydown", handleContentKeydown);
         }
         return () => {
             var _a;
-            (_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("keydown", handleContentKeydown);
+            (_a = floatingRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("keydown", handleContentKeydown);
         };
     }, [open, optionsListRef, filteredOptions]);
     function handleContentKeydown(event) {
@@ -126,8 +124,8 @@ function useComboboxAccessibility(selectionCallback, filteredOptions, optionsLis
         }
     }
     return {
-        popperRef,
-        popperStyles: floatingStyles,
+        floatingRef,
+        floatingStyles,
         floatingProps: getFloatingProps(),
         nodeId,
         parentNodeId,
@@ -137,7 +135,7 @@ function useComboboxAccessibility(selectionCallback, filteredOptions, optionsLis
 function ComboboxContent(props) {
     const optionsExist = props.options.length > 0;
     const { onClear, onSelectAll, optionsListRef } = useComboboxContent(props.open, props.selected);
-    const { popperRef, popperStyles, floatingProps, nodeId, parentNodeId } = useComboboxAccessibility(props.handleSelection, props.options, optionsListRef, props.open, props.wrapperRef);
+    const { floatingRef, floatingStyles, floatingProps, nodeId, parentNodeId } = useComboboxAccessibility(props.handleSelection, props.options, optionsListRef, props.open, props.wrapperRef);
     // options that are passed back to consumers via onSelectAll callback
     // should only contain id and label
     const optionsData = React.useMemo(() => {
@@ -146,9 +144,9 @@ function ComboboxContent(props) {
             label: option.label,
         }));
     }, [props.options]);
-    const content = (React.createElement("div", Object.assign({ ref: popperRef, id: constants.COMBOBOX_MENU_ID, "data-testid": constants.COMBOBOX_MENU_ID, "data-elevation": "elevated", tabIndex: 0, className: classnames(styles.content, {
+    const content = (React.createElement("div", Object.assign({ ref: floatingRef, id: constants.COMBOBOX_MENU_ID, "data-testid": constants.COMBOBOX_MENU_ID, "data-elevation": "elevated", tabIndex: 0, className: classnames(styles.content, {
             [styles.hidden]: !props.open,
-        }), style: popperStyles }, floatingProps),
+        }), style: floatingStyles }, floatingProps),
         React.createElement(ComboboxContentSearch.ComboboxContentSearch, { open: props.open, placeholder: props.subjectNoun, searchValue: props.searchValue, setSearchValue: props.setSearchValue, handleSearchChange: props.handleSearchChange }),
         props.multiselect && (optionsExist || props.selected.length > 0) && (React.createElement(ComboboxContentHeader.ComboboxContentHeader, { hasOptionsVisible: optionsExist, subjectNoun: props.subjectNoun, selectedCount: props.selected.length, onClearAll: () => {
                 props.selectedStateSetter([]);
@@ -166,9 +164,7 @@ function ComboboxContent(props) {
             React.createElement(floatingUi_react.FloatingNode, { id: nodeId },
                 React.createElement(floatingUi_react.FloatingPortal, null, content))));
     }
-    return (globalThis === null || globalThis === void 0 ? void 0 : globalThis.document)
-        ? ReactDOM.createPortal(content, document.body)
-        : content;
+    return (globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) ? (React.createElement(floatingUi_react.FloatingPortal, null, content)) : (content);
 }
 
 exports.ComboboxContent = ComboboxContent;

package/dist/ComboboxContent-es.js

@@ -1,7 +1,6 @@
 import React__default, { useContext, useRef, useEffect, useMemo } from 'react';
 import classnames from 'classnames';
-import { d as useFloatingParentNodeId, e as useFloatingNodeId, u as useFloating, g as autoPlacement, o as offset, s as shift, b as autoUpdate, h as useDismiss, i as useInteractions, j as FloatingTree, k as FloatingNode, F as FloatingPortal } from './floating-ui.react-es.js';
-import ReactDOM__default from 'react-dom';
+import { g as useFloatingParentNodeId, h as useFloatingNodeId, u as useFloating, o as offset, f as flip, b as autoUpdate, c as useDismiss, d as useInteractions, i as FloatingTree, j as FloatingNode, F as FloatingPortal } from './floating-ui.react-es.js';
 import { C as ComboboxContentSearch } from './ComboboxContentSearch-es.js';
 import { C as ComboboxContentList } from './ComboboxContentList-es.js';
 import { C as ComboboxContentHeader } from './ComboboxContentHeader-es.js';
@@ -50,12 +49,12 @@ function useComboboxAccessibility(selectionCallback, filteredOptions, optionsLis
     const parentNodeId = useFloatingParentNodeId();
     const nodeId = useFloatingNodeId();
     useRefocusOnActivator_2(open);
-    const popperRef = useFocusTrap_2(open);
+    const floatingRef = useFocusTrap_2(open);
     const { floatingStyles, update, context } = useFloating({
         nodeId,
         elements: {
             reference: wrapperRef.current,
-            floating: popperRef.current,
+            floating: floatingRef.current,
         },
         open,
         onOpenChange: openState => {
@@ -63,9 +62,8 @@ function useComboboxAccessibility(selectionCallback, filteredOptions, optionsLis
                 handleClose();
         },
         middleware: [
-            autoPlacement({ allowedPlacements: ["bottom-start", "top-start"] }),
             offset(COMBOBOX_OFFSET),
-            shift({ padding: COMBOBOX_OFFSET }),
+            flip({ fallbackPlacements: ["top-start", "bottom-end", "top-end"] }),
         ],
         placement: "bottom-start",
         whileElementsMounted: autoUpdate,
@@ -81,11 +79,11 @@ function useComboboxAccessibility(selectionCallback, filteredOptions, optionsLis
     useEffect(() => {
         var _a;
         if (open) {
-            (_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener("keydown", handleContentKeydown);
+            (_a = floatingRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener("keydown", handleContentKeydown);
         }
         return () => {
             var _a;
-            (_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("keydown", handleContentKeydown);
+            (_a = floatingRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("keydown", handleContentKeydown);
         };
     }, [open, optionsListRef, filteredOptions]);
     function handleContentKeydown(event) {
@@ -124,8 +122,8 @@ function useComboboxAccessibility(selectionCallback, filteredOptions, optionsLis
         }
     }
     return {
-        popperRef,
-        popperStyles: floatingStyles,
+        floatingRef,
+        floatingStyles,
         floatingProps: getFloatingProps(),
         nodeId,
         parentNodeId,
@@ -135,7 +133,7 @@ function useComboboxAccessibility(selectionCallback, filteredOptions, optionsLis
 function ComboboxContent(props) {
     const optionsExist = props.options.length > 0;
     const { onClear, onSelectAll, optionsListRef } = useComboboxContent(props.open, props.selected);
-    const { popperRef, popperStyles, floatingProps, nodeId, parentNodeId } = useComboboxAccessibility(props.handleSelection, props.options, optionsListRef, props.open, props.wrapperRef);
+    const { floatingRef, floatingStyles, floatingProps, nodeId, parentNodeId } = useComboboxAccessibility(props.handleSelection, props.options, optionsListRef, props.open, props.wrapperRef);
     // options that are passed back to consumers via onSelectAll callback
     // should only contain id and label
     const optionsData = useMemo(() => {
@@ -144,9 +142,9 @@ function ComboboxContent(props) {
             label: option.label,
         }));
     }, [props.options]);
-    const content = (React__default.createElement("div", Object.assign({ ref: popperRef, id: COMBOBOX_MENU_ID, "data-testid": COMBOBOX_MENU_ID, "data-elevation": "elevated", tabIndex: 0, className: classnames(styles.content, {
+    const content = (React__default.createElement("div", Object.assign({ ref: floatingRef, id: COMBOBOX_MENU_ID, "data-testid": COMBOBOX_MENU_ID, "data-elevation": "elevated", tabIndex: 0, className: classnames(styles.content, {
             [styles.hidden]: !props.open,
-        }), style: popperStyles }, floatingProps),
+        }), style: floatingStyles }, floatingProps),
         React__default.createElement(ComboboxContentSearch, { open: props.open, placeholder: props.subjectNoun, searchValue: props.searchValue, setSearchValue: props.setSearchValue, handleSearchChange: props.handleSearchChange }),
         props.multiselect && (optionsExist || props.selected.length > 0) && (React__default.createElement(ComboboxContentHeader, { hasOptionsVisible: optionsExist, subjectNoun: props.subjectNoun, selectedCount: props.selected.length, onClearAll: () => {
                 props.selectedStateSetter([]);
@@ -164,9 +162,7 @@ function ComboboxContent(props) {
             React__default.createElement(FloatingNode, { id: nodeId },
                 React__default.createElement(FloatingPortal, null, content))));
     }
-    return (globalThis === null || globalThis === void 0 ? void 0 : globalThis.document)
-        ? ReactDOM__default.createPortal(content, document.body)
-        : content;
+    return (globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) ? (React__default.createElement(FloatingPortal, null, content)) : (content);
 }
 
 export { ComboboxContent as C };

package/dist/DataDump/index.cjs

@@ -13,7 +13,6 @@ require('../Icon-cjs.js');
 require('@jobber/design');
 require('../Menu-cjs.js');
 require('framer-motion');
-require('../useOnKeyDown-cjs.js');
 require('../useRefocusOnActivator-cjs.js');
 require('../floating-ui.react-cjs.js');
 require('react-dom');
@@ -21,6 +20,7 @@ require('../useFocusTrap-cjs.js');
 require('../useIsMounted-cjs.js');
 require('../useSafeLayoutEffect-cjs.js');
 require('../useFormFieldFocus-cjs.js');
+require('../maxHeight-cjs.js');
 require('../Content-cjs.js');
 require('../Emphasis-cjs.js');
 

package/dist/DataDump/index.mjs

@@ -11,7 +11,6 @@ import '../Icon-es.js';
 import '@jobber/design';
 import '../Menu-es.js';
 import 'framer-motion';
-import '../useOnKeyDown-es.js';
 import '../useRefocusOnActivator-es.js';
 import '../floating-ui.react-es.js';
 import 'react-dom';
@@ -19,5 +18,6 @@ import '../useFocusTrap-es.js';
 import '../useIsMounted-es.js';
 import '../useSafeLayoutEffect-es.js';
 import '../useFormFieldFocus-es.js';
+import '../maxHeight-es.js';
 import '../Content-es.js';
 import '../Emphasis-es.js';

package/dist/DataTable/DataTable.d.ts

@@ -1,6 +1,7 @@
 import { ColumnDef, Row } from "@tanstack/react-table";
 import React, { ReactNode } from "react";
 import { PaginationType, SortingType } from "./types";
+import { DataTableActions, DataTableBody, DataTableContainer, DataTableFooter, DataTableHeader, DataTableHeaderCell, DataTablePagination, DataTablePaginationButton, DataTableRowActions, DataTableSortableHeader, DataTableTable } from "./components";
 export interface DataTableProps<T> {
     /**
      * The actual data that will be used for the table.
@@ -55,3 +56,18 @@ export interface DataTableProps<T> {
     readonly loading?: boolean;
 }
 export declare function DataTable<T extends object>({ data, columns, pagination, sorting, height, stickyHeader, pinFirstColumn, onRowClick, emptyState, loading, }: DataTableProps<T>): React.JSX.Element;
+export declare namespace DataTable {
+    var Table: typeof DataTableTable;
+    var Header: typeof DataTableHeader;
+    var HeaderCell: typeof DataTableHeaderCell;
+    var Row: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
+    var Cell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+    var RowActions: typeof DataTableRowActions;
+    var Actions: typeof DataTableActions;
+    var Body: typeof DataTableBody;
+    var Container: typeof DataTableContainer;
+    var SortableHeader: typeof DataTableSortableHeader;
+    var Footer: typeof DataTableFooter;
+    var Pagination: typeof DataTablePagination;
+    var PaginationButton: typeof DataTablePaginationButton;
+}

package/dist/DataTable/components/DataTableActions.d.ts

@@ -0,0 +1,2 @@
+import React, { type PropsWithChildren } from "react";
+export declare function DataTableActions(props: PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>): React.JSX.Element;

package/dist/DataTable/components/DataTableBody.d.ts

@@ -0,0 +1,2 @@
+import React, { type PropsWithChildren } from "react";
+export declare function DataTableBody(props: PropsWithChildren<React.HTMLAttributes<HTMLTableSectionElement>>): React.JSX.Element;

package/dist/DataTable/components/DataTableCell.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const DataTableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;

package/dist/DataTable/components/DataTableContainer.d.ts

@@ -0,0 +1,2 @@
+import React, { type PropsWithChildren } from "react";
+export declare function DataTableContainer(props: PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>): React.JSX.Element;

package/dist/DataTable/components/DataTableFooter.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface DataTableFooterProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+    readonly children: React.ReactNode;
+    /**
+     * Number of columns to span across. This should match the number of columns in your table.
+     */
+    readonly colSpan: number;
+}
+export declare function DataTableFooter({ children, className, colSpan, ...props }: DataTableFooterProps): React.JSX.Element;

package/dist/DataTable/components/DataTableHeader.d.ts

@@ -0,0 +1,2 @@
+import React, { type PropsWithChildren } from "react";
+export declare function DataTableHeader(props: PropsWithChildren<React.HTMLAttributes<HTMLTableSectionElement>>): React.JSX.Element;

package/dist/DataTable/components/DataTableHeaderCell.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export declare function DataTableHeaderCell(props: React.ThHTMLAttributes<HTMLTableCellElement>): React.JSX.Element;
+export declare namespace DataTableHeaderCell {
+    var displayName: string;
+}

package/dist/DataTable/components/DataTablePagination.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export interface DataTablePaginationProps extends React.HTMLAttributes<HTMLDivElement> {
+    readonly children: React.ReactNode;
+}
+export declare function DataTablePagination({ children, className, ...props }: DataTablePaginationProps): React.JSX.Element;

package/dist/DataTable/components/DataTablePaginationButton.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+export interface DataTablePaginationButtonProps {
+    /**
+     * The direction of the pagination button
+     */
+    readonly direction: "previous" | "next";
+    /**
+     * Callback function when the pagination button is clicked
+     */
+    readonly onClick?: () => void;
+    /**
+     * Whether the pagination button is disabled
+     */
+    readonly disabled?: boolean;
+    /**
+     * Function that returns the aria-label for the button. Required for accessibility.
+     * Should return translated strings based on the direction parameter.
+     */
+    readonly ariaLabel: (direction: "previous" | "next") => string;
+}
+export declare function DataTablePaginationButton({ direction, onClick, disabled, ariaLabel, }: DataTablePaginationButtonProps): React.JSX.Element;

package/dist/DataTable/components/DataTableRow.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const DataTableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;

package/dist/DataTable/components/DataTableRowActions.d.ts

@@ -0,0 +1,4 @@
+import React, { type PropsWithChildren } from "react";
+export declare function DataTableRowActions(props: PropsWithChildren<{
+    readonly className?: string;
+}>): React.JSX.Element;

package/dist/DataTable/components/DataTableSortableHeader.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { SortDirection } from "../SortIcon";
+export interface DataTableSortableHeaderProps {
+    /**
+     * The header content to display (text, icons, etc.)
+     */
+    readonly children: React.ReactNode;
+    /**
+     * The current sort direction for this column. When undefined, the header renders as non-interactive.
+     */
+    readonly direction?: SortDirection;
+    /**
+     * Callback function triggered when the sortable header is clicked.
+     * When undefined, the header renders as non-interactive.
+     */
+    readonly onSort?: () => void;
+}
+export declare function DataTableSortableHeader(props: DataTableSortableHeaderProps & React.HTMLAttributes<HTMLTableCellElement>): JSX.Element;

package/dist/DataTable/components/DataTableTable.d.ts

@@ -0,0 +1,2 @@
+import React, { type PropsWithChildren } from "react";
+export declare function DataTableTable(props: PropsWithChildren<React.HTMLAttributes<HTMLTableElement>>): React.JSX.Element;

package/dist/DataTable/components/index.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+var DataTableTable = require('../../DataTableTable-cjs.js');
+require('react');
+require('classnames');
+require('../../tslib.es6-cjs.js');
+require('../../Button-cjs.js');
+require('react-router-dom');
+require('../../Icon-cjs.js');
+require('@jobber/design');
+require('../../Typography-cjs.js');
+
+
+
+exports.DataTableActions = DataTableTable.DataTableActions;
+exports.DataTableBody = DataTableTable.DataTableBody;
+exports.DataTableCell = DataTableTable.DataTableCell;
+exports.DataTableContainer = DataTableTable.DataTableContainer;
+exports.DataTableFooter = DataTableTable.DataTableFooter;
+exports.DataTableHeader = DataTableTable.DataTableHeader;
+exports.DataTableHeaderCell = DataTableTable.DataTableHeaderCell;
+exports.DataTablePagination = DataTableTable.DataTablePagination;
+exports.DataTablePaginationButton = DataTableTable.DataTablePaginationButton;
+exports.DataTableRow = DataTableTable.DataTableRow;
+exports.DataTableRowActions = DataTableTable.DataTableRowActions;
+exports.DataTableSortableHeader = DataTableTable.DataTableSortableHeader;
+exports.DataTableTable = DataTableTable.DataTableTable;

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

@@ -0,0 +1,13 @@
+export { DataTableActions } from "./DataTableActions";
+export { DataTableBody } from "./DataTableBody";
+export { DataTableCell } from "./DataTableCell";
+export { DataTableContainer } from "./DataTableContainer";
+export { DataTableFooter } from "./DataTableFooter";
+export { DataTableHeader } from "./DataTableHeader";
+export { DataTableHeaderCell } from "./DataTableHeaderCell";
+export { DataTablePagination } from "./DataTablePagination";
+export { DataTablePaginationButton } from "./DataTablePaginationButton";
+export { DataTableRow } from "./DataTableRow";
+export { DataTableRowActions } from "./DataTableRowActions";
+export { DataTableSortableHeader } from "./DataTableSortableHeader";
+export { DataTableTable } from "./DataTableTable";

package/dist/DataTable/components/index.mjs

@@ -0,0 +1,9 @@
+export { D as DataTableActions, b as DataTableBody, c as DataTableCell, d as DataTableContainer, e as DataTableFooter, f as DataTableHeader, g as DataTableHeaderCell, h as DataTablePagination, i as DataTablePaginationButton, j as DataTableRow, k as DataTableRowActions, l as DataTableSortableHeader, m as DataTableTable } from '../../DataTableTable-es.js';
+import 'react';
+import 'classnames';
+import '../../tslib.es6-es.js';
+import '../../Button-es.js';
+import 'react-router-dom';
+import '../../Icon-es.js';
+import '@jobber/design';
+import '../../Typography-es.js';

package/dist/DataTable/index.cjs

@@ -2,6 +2,7 @@
 
 var DataTable = require('../DataTable-cjs.js');
 var helpers = require('../helpers-cjs.js');
+var DataTableTable = require('../DataTableTable-cjs.js');
 var reactTable = require('@tanstack/react-table');
 require('classnames');
 require('react');
@@ -41,6 +42,11 @@ require('react-hook-form');
 
 exports.DataTable = DataTable.DataTable;
 exports.mockContainerWidth = helpers.mockContainerWidth;
+Object.defineProperty(exports, "SortDirection", {
+	enumerable: true,
+	get: function () { return DataTableTable.SortDirection; }
+});
+exports.SortIcon = DataTableTable.SortIcon;
 Object.defineProperty(exports, "createColumnHelper", {
 	enumerable: true,
 	get: function () { return reactTable.createColumnHelper; }

package/dist/DataTable/index.d.ts

@@ -1,4 +1,5 @@
 export { DataTable } from "./DataTable";
 export * from "./types";
 export * from "./test-utilities/helpers";
+export { SortIcon, SortDirection } from "./SortIcon";
 export { Row, ColumnDef, createColumnHelper, PaginationState, SortingState, } from "@tanstack/react-table";