@jobber/components 4.81.4 → 4.81.5-fix-inline.5

package/dist/DataListSortingOptions-B9e_klP3.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var React = require('react');
+var useOnKeyDown = require('./useOnKeyDown-DaXbWAZ6.js');
+var useRefocusOnActivator = require('./useRefocusOnActivator-CcdUjTGN.js');
+var Icon = require('./Icon-BrJTp9Vt.js');
+
+var styles = {"optionsList":"thBUfVNaigs-","option":"QaXuqbVjG04-"};
+
+function DataListSortingOptions({ options, selectedOption, onSelectChange, onClose, optionsListRef, dataListHeaderTileRef, }) {
+    useRefocusOnActivator.useRefocusOnActivator_2(!optionsListRef.current);
+    useOnKeyDown.useOnKeyDown_2(() => onClose(), "Escape");
+    React.useEffect(() => {
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [optionsListRef, dataListHeaderTileRef, onClose]);
+    return (React.createElement("ul", { className: styles.optionsList, ref: optionsListRef }, options.map(option => (React.createElement("li", { className: styles.option, key: `${option.id}${option.order}`, onClick: () => onSelectChange(option), onKeyDown: event => handleKeyDown(event, option), tabIndex: 0, "data-value": option.id },
+        option.label,
+        option.label === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) && (React.createElement(Icon.Icon, { name: "checkmark", color: "blue" })))))));
+    function handleKeyDown(event, option) {
+        if (event.key === "Enter") {
+            onSelectChange(option);
+        }
+    }
+    function handleClickOutside(event) {
+        var _a, _b;
+        const isClickInside = ((_a = optionsListRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) ||
+            ((_b = dataListHeaderTileRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target));
+        if (!isClickInside) {
+            onClose();
+        }
+    }
+}
+
+exports.DataListSortingOptions = DataListSortingOptions;

package/dist/DataListSortingOptions-CxhoUaJ1.js

@@ -0,0 +1,35 @@
+import React, { useEffect } from 'react';
+import { u as useOnKeyDown_2 } from './useOnKeyDown-CcHH4eJq.js';
+import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-t6MWp1A5.js';
+import { I as Icon } from './Icon-DroGZxeN.js';
+
+var styles = {"optionsList":"thBUfVNaigs-","option":"QaXuqbVjG04-"};
+
+function DataListSortingOptions({ options, selectedOption, onSelectChange, onClose, optionsListRef, dataListHeaderTileRef, }) {
+    useRefocusOnActivator_2(!optionsListRef.current);
+    useOnKeyDown_2(() => onClose(), "Escape");
+    useEffect(() => {
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [optionsListRef, dataListHeaderTileRef, onClose]);
+    return (React.createElement("ul", { className: styles.optionsList, ref: optionsListRef }, options.map(option => (React.createElement("li", { className: styles.option, key: `${option.id}${option.order}`, onClick: () => onSelectChange(option), onKeyDown: event => handleKeyDown(event, option), tabIndex: 0, "data-value": option.id },
+        option.label,
+        option.label === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) && (React.createElement(Icon, { name: "checkmark", color: "blue" })))))));
+    function handleKeyDown(event, option) {
+        if (event.key === "Enter") {
+            onSelectChange(option);
+        }
+    }
+    function handleClickOutside(event) {
+        var _a, _b;
+        const isClickInside = ((_a = optionsListRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) ||
+            ((_b = dataListHeaderTileRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target));
+        if (!isClickInside) {
+            onClose();
+        }
+    }
+}
+
+export { DataListSortingOptions as D };

package/dist/DataListStatusBar-BMA9J4J1.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var React = require('react');
+var DataList_utils = require('./DataList.utils-DqwRyFGG.js');
+var DataListContext = require('./DataListContext-DV8V647K.js');
+
+// This component is meant to capture the props of the DataList.Filters
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function DataListStatusBar(_) {
+    return null;
+}
+/**
+ * Renders the DataList.StatusBar component
+ */
+function InternalDataListStatusBar() {
+    const { children: parentChildren } = DataListContext.useDataListContext();
+    const component = DataList_utils.getCompoundComponent(parentChildren, DataListStatusBar);
+    if (!component)
+        return null;
+    const children = component === null || component === void 0 ? void 0 : component.props.children;
+    return React.createElement(React.Fragment, null, children);
+}
+
+exports.DataListStatusBar = DataListStatusBar;
+exports.InternalDataListStatusBar = InternalDataListStatusBar;

package/dist/DataListStatusBar-Deu3KYe6.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { g as getCompoundComponent } from './DataList.utils-EJPDDjmU.js';
+import { u as useDataListContext } from './DataListContext-BoTq0ash.js';
+
+// This component is meant to capture the props of the DataList.Filters
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function DataListStatusBar(_) {
+    return null;
+}
+/**
+ * Renders the DataList.StatusBar component
+ */
+function InternalDataListStatusBar() {
+    const { children: parentChildren } = useDataListContext();
+    const component = getCompoundComponent(parentChildren, DataListStatusBar);
+    if (!component)
+        return null;
+    const children = component === null || component === void 0 ? void 0 : component.props.children;
+    return React.createElement(React.Fragment, null, children);
+}
+
+export { DataListStatusBar as D, InternalDataListStatusBar as I };

package/dist/DataListStickyHeader-AIc9fJnr.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var classnames = require('classnames');
+var React = require('react');
+var DataList_const = require('./DataList.const-Cq7UG_mT.js');
+
+var styles = {"header":"PGOHzrMh374-","stuck":"PGjWc5ocjpI-"};
+
+function DataListStickyHeader({ children }) {
+    const [isStuck, setIsStuck] = React.useState(false);
+    const ref = React.useRef(null);
+    const handleObserver = React.useCallback(([e]) => setIsStuck(e.intersectionRatio < 1), [setIsStuck]);
+    React.useEffect(() => {
+        if (!window.IntersectionObserver)
+            return;
+        const observer = new IntersectionObserver(handleObserver, { threshold: 1 });
+        ref.current && observer.observe(ref.current);
+        return () => {
+            ref.current && observer.unobserve(ref.current);
+        };
+    }, [handleObserver, ref.current]);
+    return (React.createElement("div", { "data-testid": DataList_const.DATA_LIST_STICKY_HEADER_TEST_ID, ref: ref, className: classnames(styles.header, { [styles.stuck]: isStuck }) }, children));
+}
+
+exports.DataListStickyHeader = DataListStickyHeader;

package/dist/DataListStickyHeader-adaRi9DS.js

@@ -0,0 +1,23 @@
+import classnames from 'classnames';
+import React, { useState, useRef, useCallback, useEffect } from 'react';
+import { a as DATA_LIST_STICKY_HEADER_TEST_ID } from './DataList.const-B4QxuXgJ.js';
+
+var styles = {"header":"PGOHzrMh374-","stuck":"PGjWc5ocjpI-"};
+
+function DataListStickyHeader({ children }) {
+    const [isStuck, setIsStuck] = useState(false);
+    const ref = useRef(null);
+    const handleObserver = useCallback(([e]) => setIsStuck(e.intersectionRatio < 1), [setIsStuck]);
+    useEffect(() => {
+        if (!window.IntersectionObserver)
+            return;
+        const observer = new IntersectionObserver(handleObserver, { threshold: 1 });
+        ref.current && observer.observe(ref.current);
+        return () => {
+            ref.current && observer.unobserve(ref.current);
+        };
+    }, [handleObserver, ref.current]);
+    return (React.createElement("div", { "data-testid": DATA_LIST_STICKY_HEADER_TEST_ID, ref: ref, className: classnames(styles.header, { [styles.stuck]: isStuck }) }, children));
+}
+
+export { DataListStickyHeader as D };

package/dist/DataListTags-BfkDiXZF.js

@@ -0,0 +1,62 @@
+import React, { useRef, useState, useEffect } from 'react';
+import classnames from 'classnames';
+import { I as InlineLabel } from './InlineLabel-4OyH_cD3.js';
+import { T as Text } from './Text-BCjpwsQZ.js';
+
+var styles = {"tagWrapper":"_8MYxAQYdZzM-","tags":"WRV-UmQmPzo-","tagsMask":"ND-cN-mX5-c-","tagCount":"liQeWCMenD0-"};
+
+function DataListTags({ items }) {
+    const ref = useRef(null);
+    const [visibleIndex, setVisibleIndex] = useState([]);
+    const visibleItems = visibleIndex.filter(Boolean).length;
+    const shouldShowTagCount = Boolean(visibleItems);
+    useEffect(() => {
+        var _a;
+        if (!window.IntersectionObserver)
+            return;
+        setVisibleIndex([]);
+        const observer = new IntersectionObserver(handleIntersection, {
+            root: ref.current,
+            threshold: buildIntersectionThreshold(items),
+        });
+        const elements = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("[data-tag-element]");
+        elements === null || elements === void 0 ? void 0 : elements.forEach(element => observer.observe(element));
+        return () => {
+            elements === null || elements === void 0 ? void 0 : elements.forEach(element => observer.unobserve(element));
+        };
+    }, [items]);
+    return (React.createElement("div", { className: styles.tagWrapper, ref: ref },
+        React.createElement("div", { className: classnames(styles.tags, {
+                [styles.tagsMask]: shouldShowTagCount,
+            }) }, items.filter(Boolean).map((tag, index) => (React.createElement("div", { key: tag, "data-tag-element": index },
+            React.createElement(InlineLabel, null, tag))))),
+        shouldShowTagCount && (React.createElement("div", { className: styles.tagCount },
+            React.createElement(Text, null,
+                "+",
+                visibleItems)))));
+    function handleIntersection(...[entries]) {
+        entries.forEach(entry => {
+            const index = entry.target.getAttribute("data-tag-element");
+            const indexNumber = Number(index);
+            if (!index || isNaN(indexNumber))
+                return;
+            setVisibleIndex(prevState => {
+                const newState = [...prevState];
+                newState[indexNumber] = entry.intersectionRatio !== 1;
+                return newState;
+            });
+        });
+    }
+}
+function buildIntersectionThreshold(items) {
+    const thresholds = [];
+    const totalItems = items.length;
+    for (let i = 1.0; i <= totalItems; i++) {
+        const ratio = i / totalItems;
+        thresholds.push(ratio);
+    }
+    thresholds.push(0);
+    return thresholds;
+}
+
+export { DataListTags as D };

package/dist/DataListTags-DBxqiFUr.js

@@ -0,0 +1,64 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var InlineLabel = require('./InlineLabel-Bre8iPgQ.js');
+var Text = require('./Text-DSPNdx-G.js');
+
+var styles = {"tagWrapper":"_8MYxAQYdZzM-","tags":"WRV-UmQmPzo-","tagsMask":"ND-cN-mX5-c-","tagCount":"liQeWCMenD0-"};
+
+function DataListTags({ items }) {
+    const ref = React.useRef(null);
+    const [visibleIndex, setVisibleIndex] = React.useState([]);
+    const visibleItems = visibleIndex.filter(Boolean).length;
+    const shouldShowTagCount = Boolean(visibleItems);
+    React.useEffect(() => {
+        var _a;
+        if (!window.IntersectionObserver)
+            return;
+        setVisibleIndex([]);
+        const observer = new IntersectionObserver(handleIntersection, {
+            root: ref.current,
+            threshold: buildIntersectionThreshold(items),
+        });
+        const elements = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("[data-tag-element]");
+        elements === null || elements === void 0 ? void 0 : elements.forEach(element => observer.observe(element));
+        return () => {
+            elements === null || elements === void 0 ? void 0 : elements.forEach(element => observer.unobserve(element));
+        };
+    }, [items]);
+    return (React.createElement("div", { className: styles.tagWrapper, ref: ref },
+        React.createElement("div", { className: classnames(styles.tags, {
+                [styles.tagsMask]: shouldShowTagCount,
+            }) }, items.filter(Boolean).map((tag, index) => (React.createElement("div", { key: tag, "data-tag-element": index },
+            React.createElement(InlineLabel.InlineLabel, null, tag))))),
+        shouldShowTagCount && (React.createElement("div", { className: styles.tagCount },
+            React.createElement(Text.Text, null,
+                "+",
+                visibleItems)))));
+    function handleIntersection(...[entries]) {
+        entries.forEach(entry => {
+            const index = entry.target.getAttribute("data-tag-element");
+            const indexNumber = Number(index);
+            if (!index || isNaN(indexNumber))
+                return;
+            setVisibleIndex(prevState => {
+                const newState = [...prevState];
+                newState[indexNumber] = entry.intersectionRatio !== 1;
+                return newState;
+            });
+        });
+    }
+}
+function buildIntersectionThreshold(items) {
+    const thresholds = [];
+    const totalItems = items.length;
+    for (let i = 1.0; i <= totalItems; i++) {
+        const ratio = i / totalItems;
+        thresholds.push(ratio);
+    }
+    thresholds.push(0);
+    return thresholds;
+}
+
+exports.DataListTags = DataListTags;

package/dist/DataListTotalCount-BSKvK2VG.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var React = require('react');
+var Text = require('./Text-DSPNdx-G.js');
+var Glimmer = require('./Glimmer-xvDsD6N9.js');
+
+var styles = {"results":"F56prQsXm3A-"};
+
+const DATALIST_TOTALCOUNT_TEST_ID = "ATL-DataList-TotalCount";
+function DataListTotalCount({ totalCount, loading, }) {
+    if (totalCount === undefined)
+        return null;
+    let output = null;
+    if (totalCount === null && loading) {
+        output = React.createElement(Glimmer.Glimmer, { size: "auto", shape: "rectangle" });
+    }
+    if (typeof totalCount === "number") {
+        output = (React.createElement(Text.Text, { variation: "subdued" },
+            "(",
+            totalCount.toLocaleString(),
+            " results)"));
+    }
+    return (React.createElement("div", { className: styles.results, "data-testid": DATALIST_TOTALCOUNT_TEST_ID }, output));
+}
+
+exports.DATALIST_TOTALCOUNT_TEST_ID = DATALIST_TOTALCOUNT_TEST_ID;
+exports.DataListTotalCount = DataListTotalCount;

package/dist/DataListTotalCount-CwForL_-.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { T as Text } from './Text-BCjpwsQZ.js';
+import { G as Glimmer } from './Glimmer-LoAEnc8h.js';
+
+var styles = {"results":"F56prQsXm3A-"};
+
+const DATALIST_TOTALCOUNT_TEST_ID = "ATL-DataList-TotalCount";
+function DataListTotalCount({ totalCount, loading, }) {
+    if (totalCount === undefined)
+        return null;
+    let output = null;
+    if (totalCount === null && loading) {
+        output = React.createElement(Glimmer, { size: "auto", shape: "rectangle" });
+    }
+    if (typeof totalCount === "number") {
+        output = (React.createElement(Text, { variation: "subdued" },
+            "(",
+            totalCount.toLocaleString(),
+            " results)"));
+    }
+    return (React.createElement("div", { className: styles.results, "data-testid": DATALIST_TOTALCOUNT_TEST_ID }, output));
+}
+
+export { DATALIST_TOTALCOUNT_TEST_ID as D, DataListTotalCount as a };

package/dist/DataTable/BodyLoading.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { Table } from "@tanstack/react-table";
 interface BodyLoadingProps<T> {
-    table: Table<T>;
+    readonly table: Table<T>;
 }
 export declare function BodyLoading<T extends object>({ table }: BodyLoadingProps<T>): JSX.Element;
 export {};

package/dist/DataTable/Footer.d.ts

@@ -1,7 +1,7 @@
 import { Table } from "@tanstack/react-table";
 export type ViewType = "desktop" | "handheld";
 export interface FooterProps<T> {
-    table: Table<T>;
-    viewType?: ViewType;
+    readonly table: Table<T>;
+    readonly viewType?: ViewType;
 }
 export declare const Footer: <T extends object>({ table, viewType, }: FooterProps<T>) => JSX.Element | null;

package/dist/DataTable/SortIcon.d.ts

@@ -5,7 +5,7 @@ export declare enum SortDirection {
     equilibrium = 2
 }
 interface SortIconProps {
-    direction: SortDirection;
+    readonly direction: SortDirection;
 }
 export declare function SortIcon({ direction }: SortIconProps): JSX.Element;
 export {};

package/dist/DataTable/index.cjs

@@ -0,0 +1,36 @@
+'use strict';
+
+var DataTable = require('../DataTable-DuXAtQBM.js');
+var helpers = require('../helpers-C2mRtIJl.js');
+var reactTable = require('@tanstack/react-table');
+require('classnames');
+require('react');
+require('../useResizeObserver-sV7ZZKSP.js');
+require('../_commonjsHelpers-C9K4YQdM.js');
+require('../debounce-1muae-Ut.js');
+require('../isObjectLike-YWtFvxic.js');
+require('../isSymbol-CJDTfNDS.js');
+require('../Glimmer-xvDsD6N9.js');
+require('../tslib.es6-B4nBbkFK.js');
+require('../Content-CsMsjQR8.js');
+require('../Option-DyhTSKDZ.js');
+require('../FormField-dnMo50u0.js');
+require('react-hook-form');
+require('../Button-jIxCW0ny.js');
+require('react-router-dom');
+require('../Icon-BrJTp9Vt.js');
+require('@jobber/design');
+require('../Typography-CM061MDN.js');
+require('../Text-DSPNdx-G.js');
+require('../InputValidation-B42k7Thv.js');
+require('framer-motion');
+require('../Spinner-CybMa8fZ.js');
+
+
+
+exports.DataTable = DataTable.DataTable;
+exports.mockContainerWidth = helpers.mockContainerWidth;
+Object.defineProperty(exports, "createColumnHelper", {
+	enumerable: true,
+	get: function () { return reactTable.createColumnHelper; }
+});

package/dist/DataTable/index.mjs

@@ -0,0 +1,25 @@
+export { D as DataTable } from '../DataTable-CVkrZPmN.js';
+export { m as mockContainerWidth } from '../helpers-DecPU7Qv.js';
+export { createColumnHelper } from '@tanstack/react-table';
+import 'classnames';
+import 'react';
+import '../useResizeObserver-x39HEwvU.js';
+import '../_commonjsHelpers-BXnGpbsa.js';
+import '../debounce-D_4D9mM0.js';
+import '../isObjectLike-C3_86EK7.js';
+import '../isSymbol-DbK65Wqh.js';
+import '../Glimmer-LoAEnc8h.js';
+import '../tslib.es6-CI8-zPBP.js';
+import '../Content-CMw9uyuY.js';
+import '../Option-CY8u0QiP.js';
+import '../FormField-CvUwWHYU.js';
+import 'react-hook-form';
+import '../Button-D4ylkMVt.js';
+import 'react-router-dom';
+import '../Icon-DroGZxeN.js';
+import '@jobber/design';
+import '../Typography-DLd7_kJN.js';
+import '../Text-BCjpwsQZ.js';
+import '../InputValidation-B-4mgs5R.js';
+import 'framer-motion';
+import '../Spinner-WydT8fKP.js';