@jobber/components 4.26.3 → 4.26.5-pre.33

package/DataList.d.ts

@@ -0,0 +1 @@
+export * from "./dist/DataList";

package/DataList.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var DataList = require("./dist/DataList");
+
+Object.keys(DataList).forEach(function(key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return DataList[key];
+    },
+  });
+});

package/dist/DataList/DataList.const.d.ts

@@ -0,0 +1,13 @@
+/**
+ *  Grab the type from breakpoints const
+ */
+type ValuesOf<T extends readonly unknown[]> = T[number];
+export type Breakpoints = ValuesOf<typeof BREAKPOINTS>;
+export declare const EMPTY_FILTER_RESULTS_MESSAGE = "No Results for Selected Filters";
+export declare const EMPTY_FILTER_RESULTS_ACTION_LABEL = "Clear Filters";
+/**
+ * Breakpoints that we support
+ */
+export declare const BREAKPOINTS: readonly ["xs", "sm", "md", "lg", "xl"];
+export declare const BREAKPOINT_SIZES: Record<Breakpoints, number>;
+export {};

package/dist/DataList/DataList.d.ts

@@ -1,21 +1,8 @@
-import React from "react";
-export interface DataListProps {
-    /**
-     * Tell the DataList if the data loading
-     * @default false
-     */
-    loading?: boolean;
-    items: any[];
-    /**
-     * Temporary prop for setting default state for if filters are applied
-     * @default false
-     */
-    filterApplied?: boolean;
-    children?: React.ReactElement | React.ReactElement[];
-}
-export declare const EMPTY_FILTER_RESULTS_MESSAGE = "No Results for Selected Filters";
-export declare const EMPTY_FILTER_RESULTS_ACTION_LABEL = "Clear Filters";
-export declare function DataList({ loading, items, filterApplied, children, }: DataListProps): JSX.Element;
+/// <reference types="react" />
+import { DataListLayout } from "./components/DataListLayout";
+import { DataListObject, DataListProps } from "./DataList.types";
+export declare function DataList<T extends DataListObject>({ data, headers, loading, filterApplied, children, title, totalCount, headerVisibility, }: DataListProps<T>): JSX.Element;
 export declare namespace DataList {
+    var Layout: typeof DataListLayout;
     var EmptyState: typeof import("./components/EmptyState").EmptyState;
 }

package/dist/DataList/DataList.stories.d.ts

@@ -4,3 +4,4 @@ declare const _default: ComponentMeta<typeof DataList>;
 export default _default;
 export declare const Basic: ComponentStory<typeof DataList>;
 export declare const EmptyState: ComponentStory<typeof DataList>;
+export declare const Breakpoints: ComponentStory<typeof DataList>;

package/dist/DataList/DataList.types.d.ts

@@ -0,0 +1,67 @@
+import { ReactElement, ReactNode } from "react";
+import { Breakpoints } from "./DataList.const";
+export { Breakpoints } from "./DataList.const";
+export type DataListItemType<T extends DataListObject[]> = Record<keyof T[number], ReactElement>;
+export type DataListItemTypeFromHeader<TData extends DataListObject, THeader extends DataListHeader<TData>> = Record<keyof THeader, ReactElement>;
+export interface DataListObject {
+    /**
+     * The ID of the data.
+     *
+     * This is used as a key when looping through the data to prevent accidental
+     * rerender when the order of data changes.
+     */
+    readonly id: string | number;
+    /**
+     * Styles the string as an emphasized text that differs from other keys.
+     */
+    readonly label?: string | ReactElement;
+    /**
+     * Creates a styled list of tags that overflows and is truncated with a +N.
+     */
+    readonly tags?: string[];
+    /**
+     * Support any key. The keys in this object are used as way to determine the
+     * keys you can use on the DataList header, layout, etc.
+     */
+    readonly [key: string]: ReactNode | Date;
+}
+export type DataListHeader<T extends DataListObject> = {
+    readonly [K in keyof T]?: string;
+};
+export interface DataListProps<T extends DataListObject> {
+    readonly data: T[];
+    readonly headers: DataListHeader<T>;
+    /**
+     * Shows the loading state of the DataList.
+     *
+     * @default false
+     */
+    readonly loading?: boolean;
+    /**
+     * Temporary prop for setting default state for if filters are applied
+     *
+     * @default false
+     */
+    readonly filterApplied?: boolean;
+    readonly children: ReactElement | ReactElement[];
+    /**
+     * The title of the DataList.
+     */
+    readonly title?: string;
+    /**
+     * Total number of items in the DataList.
+     *
+     * This renders an "N result" text with the DataList
+     * that helps users know how many items they have
+     * in the list
+     */
+    readonly totalCount?: number | null;
+    /**
+     * Determine if the header is visible at a given breakpoint. If one isn't provided,
+     * it will use the value from the next smallest breakpoint that has a value.
+     * @default { xs: true, sm: true, md: true, lg: true, xl: true }
+     */
+    readonly headerVisibility?: {
+        [Breakpoint in Breakpoints]?: boolean;
+    };
+}

package/dist/DataList/DataList.utils.d.ts

@@ -0,0 +1,31 @@
+import React, { ReactElement } from "react";
+import { DataListHeader, DataListItemType, DataListItemTypeFromHeader, DataListObject } from "./DataList.types";
+import { EmptyStateProps } from "./components/EmptyState";
+import { Breakpoints } from "./DataList.const";
+/**
+ * Return the child component that matches the `type` provided
+ */
+export declare function getCompoundComponent<T>(children: ReactElement | ReactElement[], type: ReactElement<T>["type"]): ReactElement<T> | undefined;
+/**
+ * Return all instances child component that matches the `type` provided
+ */
+export declare function getCompoundComponents<T>(children: ReactElement | ReactElement[], type: ReactElement<T>["type"]): ReactElement<T>[];
+/**
+ * Generate the default elements the DataList would use on the data provided.
+ */
+export declare function generateListItemElements<T extends DataListObject>(data: T[]): DataListItemType<T[]>[];
+/**
+ * Generate the header elements with the default styling
+ */
+export declare function generateHeaderElements<T extends DataListObject>(headers: DataListHeader<T>): DataListItemTypeFromHeader<T, DataListHeader<T>> | undefined;
+interface UseDataListEmptyStateProps {
+    readonly children?: ReactElement | ReactElement[];
+    readonly isFilterApplied: boolean;
+    readonly setIsFilterApplied: (isFilterApplied: boolean) => void;
+}
+/**
+ * Modify EmptyState to include an empty filter results when filtering happens
+ */
+export declare function generateDataListEmptyState({ children, isFilterApplied, setIsFilterApplied, }: UseDataListEmptyStateProps): React.ReactElement<EmptyStateProps> | undefined;
+export declare function sortSizeProp(sizeProp: Breakpoints[]): ("xs" | "sm" | "md" | "lg" | "xl")[];
+export {};

package/dist/DataList/components/DataListLayout/DataListLayout.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { Breakpoints, DataListItemType, DataListObject } from "../../DataList.types";
+export interface DataListLayoutProps<T extends DataListObject> {
+    readonly children: (item: DataListItemType<T[]>) => JSX.Element;
+    /**
+     * The breakpoint at which the layout should be displayed. It will be rendered until a layout with a larger breakpoint is found.
+     * @default "xs"
+     */
+    readonly size?: Breakpoints;
+}
+export declare function DataListLayout<T extends DataListObject>(_: DataListLayoutProps<T>): JSX.Element;

package/dist/DataList/components/DataListLayout/index.d.ts

@@ -0,0 +1 @@
+export * from "./DataListLayout";

package/dist/DataList/components/DataListLayoutInternal/DataListHeader.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { Breakpoints } from "../../DataList.const";
+import { DataListHeader as DataListHeaderType, DataListItemTypeFromHeader, DataListObject, DataListProps } from "../../DataList.types";
+import { DataListLayoutProps } from "../DataListLayout/DataListLayout";
+interface DataListHeaderProps<T extends DataListObject> {
+    readonly layouts: React.ReactElement<DataListLayoutProps<T>>[] | undefined;
+    readonly mediaMatches?: Record<Breakpoints, boolean>;
+    readonly headerData?: DataListItemTypeFromHeader<T, DataListHeaderType<T>>;
+    readonly headerVisibility: NonNullable<DataListProps<T>["headerVisibility"]>;
+}
+export declare function DataListHeader<T extends DataListObject>({ layouts, mediaMatches, headerData, headerVisibility, }: DataListHeaderProps<T>): JSX.Element;
+export {};

package/dist/DataList/components/DataListLayoutInternal/DataListItems.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { Breakpoints } from "../../DataList.const";
+import { DataListObject } from "../../DataList.types";
+import { DataListLayoutProps } from "../DataListLayout/DataListLayout";
+interface DataListItemsProps<T extends DataListObject> {
+    layouts: React.ReactElement<DataListLayoutProps<T>>[] | undefined;
+    mediaMatches?: Record<Breakpoints, boolean>;
+    data: T[];
+}
+export declare function DataListItems<T extends DataListObject>({ layouts, mediaMatches, data, }: DataListItemsProps<T>): JSX.Element;
+export {};

package/dist/DataList/components/DataListLayoutInternal/DataListLayoutInternal.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { Breakpoints } from "../../DataList.const";
+import { DataListObject } from "../../DataList.types";
+import { DataListLayoutProps } from "../DataListLayout/DataListLayout";
+interface DataListLayoutInternalProps<T extends DataListObject> {
+    layouts: React.ReactElement<DataListLayoutProps<T>>[] | undefined;
+    renderLayout: (layout: React.ReactElement<DataListLayoutProps<T>>) => JSX.Element;
+    mediaMatches?: Record<Breakpoints, boolean>;
+}
+export declare function DataListLayoutInternal<T extends DataListObject>({ layouts, renderLayout, mediaMatches, }: DataListLayoutInternalProps<T>): JSX.Element;
+export {};

package/dist/DataList/components/DataListLayoutInternal/index.d.ts

@@ -0,0 +1,2 @@
+export { DataListItems } from "./DataListItems";
+export { DataListHeader } from "./DataListHeader";

package/dist/DataList/components/DataListTags/DataListTags.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface DataListTagsProps {
+    readonly items: string[];
+}
+export declare function DataListTags({ items }: DataListTagsProps): JSX.Element;
+export {};

package/dist/DataList/components/DataListTags/index.d.ts

@@ -0,0 +1 @@
+export * from "./DataListTags";

package/dist/DataList/components/DataListTotalCount/DataListTotalCount.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const DATALIST_TOTALCOUNT_TEST_ID = "ATL-DataList-TotalCount";
+interface DataListTotalCountProps {
+    totalCount?: number | null;
+    loading?: boolean;
+}
+export declare function DataListTotalCount({ totalCount, loading, }: DataListTotalCountProps): JSX.Element | null;
+export {};

package/dist/DataList/components/DataListTotalCount/index.d.ts

@@ -0,0 +1 @@
+export * from "./DataListTotalCount";

package/dist/DataList/hooks/useLayoutMediaQueries.d.ts

@@ -0,0 +1 @@
+export declare function useLayoutMediaQueries(): Record<"xs" | "sm" | "md" | "lg" | "xl", boolean>;

package/dist/DataList/index.d.ts

@@ -0,0 +1 @@
+export * from "./DataList";

package/dist/DataList/index.js

@@ -0,0 +1,324 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
+var Button = require('../Button-7698424c.js');
+var Text = require('../Text-e7ed0974.js');
+var isEmpty = require('lodash/isEmpty');
+var InlineLabel = require('../InlineLabel-afd5fc6f.js');
+var FormatDate = require('../FormatDate-70ea5b43.js');
+var Glimmer = require('../Glimmer-a14ad7fd.js');
+var Heading = require('../Heading-a1191b15.js');
+require('classnames');
+require('react-router-dom');
+require('../Icon-405a216c.js');
+require('@jobber/design');
+require('../Typography-fd6f932a.js');
+require('../tslib.es6-5b8768b7.js');
+require('../Content-a6590328.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
+
+var css_248z$3 = ".TkdrExYnvcY- {\n  -ms-flex: 1;\n      flex: 1;\n}\n\n.IcAlZHoB4LI- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n  margin-bottom: calc(16px / 2);\n  margin-bottom: var(--space-small);\n}\n\n.Z8C7qJtq5Xc- {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  z-index: var(--elevation-base);\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 8) solid rgb(225, 225, 225);\n  border-bottom: var(--border-thick) solid var(--color-border);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.Gj9kAGnfKco- > * {\n  font-weight: 500;\n}\n\n.ise8kHCfhCY- {\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-bottom: calc(16px / 16) solid rgb(225, 225, 225);\n  border-bottom: var(--border-base) solid var(--color-border);\n}\n";
+var styles$3 = {"wrapper":"TkdrExYnvcY-","titleContainer":"IcAlZHoB4LI-","header":"Z8C7qJtq5Xc-","headerLabel":"Gj9kAGnfKco-","listItem":"ise8kHCfhCY-"};
+styleInject_es.styleInject(css_248z$3);
+
+var css_248z$2 = "._--dXJma0jX0- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: center;\n      justify-content: center;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  row-gap: calc(16px * 1);\n  row-gap: var(--space-base);\n  -ms-flex-align: center;\n      align-items: center;\n  height: 100%;\n}\n";
+var styles$2 = {"emptyStateWrapper":"_--dXJma0jX0-"};
+styleInject_es.styleInject(css_248z$2);
+
+function DataListEmptyState({ message, action }) {
+    return (React__default["default"].createElement("div", { className: styles$2.emptyStateWrapper },
+        React__default["default"].createElement(Text.Text, { align: "center" }, message),
+        action && (React__default["default"].createElement(Button.Button, Object.assign({}, Object.assign(Object.assign({}, action), { type: "secondary", variation: "subtle" }))))));
+}
+
+function DataListLayout(
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+_) {
+    return React__default["default"].createElement(React__default["default"].Fragment, null);
+}
+
+const EMPTY_FILTER_RESULTS_MESSAGE = "No Results for Selected Filters";
+const EMPTY_FILTER_RESULTS_ACTION_LABEL = "Clear Filters";
+/**
+ * Breakpoints that we support
+ */
+const BREAKPOINTS = ["xs", "sm", "md", "lg", "xl"];
+const BREAKPOINT_SIZES = {
+    xs: 0,
+    sm: 490,
+    md: 768,
+    lg: 1080,
+    xl: 1440,
+};
+
+var css_248z$1 = ".WRV-UmQmPzo- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  z-index: 0;\n  z-index: var(--elevation-default);\n  overflow: hidden;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.liQeWCMenD0- {\n  --overflow-bg: var(--color-white);\n\n  display: -ms-flexbox;\n\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 100%;\n  padding-left: calc(16px * 1);\n  padding-left: var(--space-base);\n  background-image: linear-gradient(\n    90deg,\n    transparent 0,\n    rgba(255, 255, 255, 1) calc(16px * 1),\n    rgba(255, 255, 255, 1) 100%\n  );\n  background-image: linear-gradient(\n    90deg,\n    transparent 0,\n    var(--overflow-bg) var(--space-base),\n    var(--overflow-bg) 100%\n  );\n  -ms-flex-align: center;\n      align-items: center;\n}\n";
+var styles$1 = {"tags":"WRV-UmQmPzo-","tagCount":"liQeWCMenD0-"};
+styleInject_es.styleInject(css_248z$1);
+
+function DataListTags({ items }) {
+    const ref = React.useRef(null);
+    const [visibleIndex, setVisibleIndex] = React.useState([]);
+    const visibleItems = visibleIndex.filter(Boolean).length;
+    React.useEffect(() => {
+        var _a;
+        if (!window.IntersectionObserver)
+            return;
+        // Reset counter every time the items change
+        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__default["default"].createElement("div", { className: styles$1.tags, ref: ref },
+        items.filter(Boolean).map((tag, index) => (React__default["default"].createElement("div", { key: tag, "data-tag-element": index },
+            React__default["default"].createElement(InlineLabel.InlineLabel, null, tag)))),
+        Boolean(visibleItems) && (React__default["default"].createElement("div", { className: styles$1.tagCount },
+            React__default["default"].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;
+}
+
+/**
+ * Return the child component that matches the `type` provided
+ */
+function getCompoundComponent(children, type) {
+    const childrenArray = React.Children.toArray(children);
+    const element = childrenArray.find(child => React.isValidElement(child) && child.type === type);
+    // Comply with the return type without casting it
+    return React.isValidElement(element) ? element : undefined;
+}
+/**
+ * Return all instances child component that matches the `type` provided
+ */
+function getCompoundComponents(children, type) {
+    const childrenArray = React.Children.toArray(children);
+    const elements = childrenArray.filter((child) => React.isValidElement(child) && child.type === type);
+    // Comply with the return type without casting it
+    return elements;
+}
+/**
+ * Generate the default elements the DataList would use on the data provided.
+ */
+function generateListItemElements(data) {
+    return data.map(item => Object.keys(item).reduce((acc, key) => {
+        const currentItem = item[key];
+        if (!currentItem) {
+            return acc;
+        }
+        if (key === "tags" && Array.isArray(currentItem)) {
+            acc[key] = React__default["default"].createElement(DataListTags, { items: currentItem });
+        }
+        else if (key === "label" && typeof currentItem === "string") {
+            acc[key] = React__default["default"].createElement(Text.Text, null, currentItem);
+        }
+        else if (React.isValidElement(currentItem)) {
+            acc[key] = currentItem;
+        }
+        else if (currentItem instanceof Date) {
+            acc[key] = (React__default["default"].createElement(Text.Text, { variation: "subdued" },
+                React__default["default"].createElement(FormatDate.FormatDate, { date: currentItem })));
+        }
+        else {
+            acc[key] = React__default["default"].createElement(Text.Text, { variation: "subdued" }, currentItem);
+        }
+        return acc;
+    }, {}));
+}
+/**
+ * Generate the header elements with the default styling
+ */
+function generateHeaderElements(headers) {
+    const headerElements = Object.keys(headers).reduce((acc, key) => (Object.assign(Object.assign({}, acc), { [key]: (React__default["default"].createElement("div", { className: styles$3.headerLabel },
+            React__default["default"].createElement(Text.Text, { variation: "subdued", maxLines: "single", size: "small" }, headers[key]))) })), {});
+    return isEmpty__default["default"](headerElements) ? undefined : headerElements;
+}
+/**
+ * Modify EmptyState to include an empty filter results when filtering happens
+ */
+function generateDataListEmptyState({ children, isFilterApplied, setIsFilterApplied, }) {
+    if (!children)
+        return;
+    const EmptyStateComponent = getCompoundComponent(children, DataListEmptyState);
+    if (isFilterApplied && React.isValidElement(EmptyStateComponent)) {
+        let overrideEmptyStateProps;
+        if (isFilterApplied) {
+            overrideEmptyStateProps = {
+                message: EMPTY_FILTER_RESULTS_MESSAGE,
+                action: {
+                    label: EMPTY_FILTER_RESULTS_ACTION_LABEL,
+                    onClick: () => {
+                        setIsFilterApplied(false);
+                        alert("Filters Cleared");
+                    },
+                },
+            };
+        }
+        return React__default["default"].cloneElement(EmptyStateComponent, overrideEmptyStateProps);
+    }
+    return EmptyStateComponent;
+}
+function sortSizeProp(sizeProp) {
+    return sizeProp.sort((a, b) => BREAKPOINTS.indexOf(a) - BREAKPOINTS.indexOf(b));
+}
+
+var css_248z = ".F56prQsXm3A- {\n  min-width: 80px;\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n}\n";
+var styles = {"results":"F56prQsXm3A-"};
+styleInject_es.styleInject(css_248z);
+
+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__default["default"].createElement(Glimmer.Glimmer, { size: "auto", shape: "rectangle" });
+    }
+    if (typeof totalCount === "number") {
+        output = (React__default["default"].createElement(Text.Text, { variation: "subdued" },
+            "(",
+            totalCount.toLocaleString(),
+            " results)"));
+    }
+    return (React__default["default"].createElement("div", { className: styles.results, "data-testid": DATALIST_TOTALCOUNT_TEST_ID }, output));
+}
+
+function DataListLayoutInternal({ layouts, renderLayout, mediaMatches, }) {
+    const sizePropsOfLayouts = layouts === null || layouts === void 0 ? void 0 : layouts.map(layout => layout.props.size || "xs");
+    const layoutToRender = layouts === null || layouts === void 0 ? void 0 : layouts.find(layout => {
+        const layoutSize = layout.props.size || "xs";
+        const isVisible = isLayoutVisible({
+            layoutSize,
+            mediaMatches,
+            sizePropsOfLayouts,
+        });
+        return isVisible;
+    });
+    return (layoutToRender && renderLayout(layoutToRender)) || React__default["default"].createElement(React__default["default"].Fragment, null);
+}
+/**
+ * Determine is layout is visible by checking a media query matches for the
+ * visible sizes of the layout and there isn't a larger layout that should be rendered
+ */
+function isLayoutVisible({ layoutSize, mediaMatches, sizePropsOfLayouts, }) {
+    const largerBreakpointsToHide = sizePropsOfLayouts === null || sizePropsOfLayouts === void 0 ? void 0 : sizePropsOfLayouts.filter(size => BREAKPOINTS.indexOf(size) > BREAKPOINTS.indexOf(layoutSize));
+    const sortedLargerBreakpoints = sortSizeProp(largerBreakpointsToHide || []);
+    const visibleBreakpoints = BREAKPOINTS.slice(BREAKPOINTS.indexOf(layoutSize), sortedLargerBreakpoints[0]
+        ? BREAKPOINTS.indexOf(sortedLargerBreakpoints[0])
+        : undefined);
+    const isVisibleBreakpoint = visibleBreakpoints.some(breakpoint => {
+        return Boolean(mediaMatches === null || mediaMatches === void 0 ? void 0 : mediaMatches[breakpoint]);
+    });
+    const largerLayoutIsNotVisible = largerBreakpointsToHide === null || largerBreakpointsToHide === void 0 ? void 0 : largerBreakpointsToHide.reduce((acc, breakpoint) => {
+        return acc && !(mediaMatches === null || mediaMatches === void 0 ? void 0 : mediaMatches[breakpoint]);
+    }, true);
+    return isVisibleBreakpoint && largerLayoutIsNotVisible;
+}
+
+function DataListItems({ layouts, mediaMatches, data, }) {
+    const elementData = generateListItemElements(data);
+    return (React__default["default"].createElement(DataListLayoutInternal, { layouts: layouts, mediaMatches: mediaMatches, renderLayout: layout => {
+            return (React__default["default"].createElement(React__default["default"].Fragment, null, elementData.map((child, i) => {
+                return (React__default["default"].createElement("div", { className: styles$3.listItem, key: `${data[i].id}` }, layout.props.children(child)));
+            })));
+        } }));
+}
+
+function DataListHeader({ layouts, mediaMatches, headerData, headerVisibility, }) {
+    const matchingMediaQueries = Object.keys(mediaMatches || {}).filter((key) => !!(mediaMatches === null || mediaMatches === void 0 ? void 0 : mediaMatches[key]));
+    const sortedVisibleBreakpoints = sortSizeProp(matchingMediaQueries);
+    // Determines if the header should be visible based on the headerVisibility
+    const showHeader = sortedVisibleBreakpoints.reduce((previousVisibility, breakpoint) => {
+        var _a;
+        return (_a = headerVisibility[breakpoint]) !== null && _a !== void 0 ? _a : previousVisibility;
+    }, true);
+    if (!showHeader || !headerData)
+        return React__default["default"].createElement(React__default["default"].Fragment, null);
+    return (React__default["default"].createElement(DataListLayoutInternal, { layouts: layouts, renderLayout: layout => {
+            return (React__default["default"].createElement("div", { className: styles$3.header }, layout.props.children(headerData)));
+        }, mediaMatches: mediaMatches }));
+}
+
+function useLayoutMediaQueries() {
+    const mediaQueries = BREAKPOINTS.reduce((previous, breakpoint) => (Object.assign(Object.assign({}, previous), { [breakpoint]: window.matchMedia(breakpointToMediaQuery(breakpoint)) })), {});
+    const initialMatches = BREAKPOINTS.reduce((previous, breakpoint) => (Object.assign(Object.assign({}, previous), { [breakpoint]: mediaQueries[breakpoint].matches })), {});
+    const [matches, setMatches] = React.useState(initialMatches);
+    const handlers = BREAKPOINTS.reduce((previous, breakpoint) => {
+        const handler = (e) => setMatches(previousMatches => (Object.assign(Object.assign({}, previousMatches), { [breakpoint]: e.matches })));
+        return Object.assign(Object.assign({}, previous), { [breakpoint]: handler });
+    }, {});
+    // Set up mediaQuery event handlers
+    React.useEffect(() => {
+        BREAKPOINTS.forEach(breakpoint => {
+            mediaQueries[breakpoint].addEventListener("change", handlers[breakpoint]);
+        });
+        return () => {
+            BREAKPOINTS.forEach(breakpoint => {
+                mediaQueries[breakpoint].removeEventListener("change", handlers[breakpoint]);
+            });
+        };
+    }, [mediaQueries]);
+    return matches;
+}
+function breakpointToMediaQuery(breakpoint) {
+    return `(min-width: ${BREAKPOINT_SIZES[breakpoint]}px)`;
+}
+
+function DataList({ data, headers, loading = false, filterApplied = false, children, title, totalCount, headerVisibility = { xs: true, sm: true, md: true, lg: true, xl: true }, }) {
+    const allLayouts = getCompoundComponents(children, DataListLayout);
+    const headerData = generateHeaderElements(headers);
+    const mediaMatches = useLayoutMediaQueries();
+    const showEmptyState = !loading && data.length === 0;
+    const [isFilterApplied, setIsFilterApplied] = React.useState(filterApplied);
+    const EmptyStateComponent = generateDataListEmptyState({
+        children,
+        isFilterApplied,
+        setIsFilterApplied,
+    });
+    return (React__default["default"].createElement("div", { className: styles$3.wrapper },
+        React__default["default"].createElement("div", { className: styles$3.titleContainer },
+            title && React__default["default"].createElement(Heading.Heading, { level: 3 }, title),
+            React__default["default"].createElement(DataListTotalCount, { totalCount: totalCount, loading: loading })),
+        headerData && (React__default["default"].createElement(DataListHeader, { layouts: allLayouts, headerData: headerData, headerVisibility: headerVisibility, mediaMatches: mediaMatches })),
+        React__default["default"].createElement(DataListItems, { data: data, layouts: allLayouts, mediaMatches: mediaMatches }),
+        showEmptyState && EmptyStateComponent));
+}
+DataList.Layout = DataListLayout;
+DataList.EmptyState = DataListEmptyState;
+
+exports.DataList = DataList;

package/dist/DataList/storyUtils.d.ts

@@ -0,0 +1,38 @@
+import { ApolloClient } from "@apollo/client";
+export interface ListQueryType {
+    allPeople: {
+        __typename?: "PeopleConnection";
+        pageInfo: {
+            hasNextPage: boolean;
+            endCursor: string;
+        };
+        edges: Array<{
+            __typename?: "PeopleEdge";
+            node: {
+                created: string;
+                id: string;
+                name: string;
+                gender: string;
+                hairColor: string;
+                skinColor: string;
+                homeworld: {
+                    name: string;
+                    id: string;
+                    population: number;
+                };
+            };
+            cursor: string;
+        }>;
+        totalCount?: number;
+    };
+}
+export type ListEdges = ListQueryType["allPeople"]["edges"];
+export type ListNode = ListEdges[number]["node"];
+export declare const LIST_QUERY: import("@apollo/client").DocumentNode;
+export declare const apolloClient: ApolloClient<import("@apollo/client").NormalizedCacheObject>;
+interface LoadingState {
+    loadingStatus: string;
+    loading: boolean;
+}
+export declare function getLoadingState(loadingInitialContent: boolean, loadingRefresh: boolean, loadingNextPage: boolean): LoadingState;
+export {};

package/dist/FormatDate/index.js

@@ -2,35 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+var FormatDate = require('../FormatDate-70ea5b43.js');
+require('react');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function FormatDate({ date: inputDate, showYear = true, }) {
-    let dateObject;
-    if (inputDate instanceof Date) {
-        dateObject = inputDate;
-    }
-    else if (typeof inputDate === "string") {
-        dateObject = new Date(inputDate);
-    }
-    else {
-        dateObject = new Date(inputDate.year, inputDate.month - 1, inputDate.day);
-    }
-    return React__default["default"].createElement(React__default["default"].Fragment, null, strFormatDate(dateObject, showYear));
-}
-function strFormatDate(date, showYear = true) {
-    let formatOptions = {
-        month: "short",
-        day: "numeric",
-    };
-    if (showYear) {
-        formatOptions = Object.assign(Object.assign({}, formatOptions), { year: "numeric" });
-    }
-    return date.toLocaleDateString(undefined, formatOptions);
-}
-
-exports.FormatDate = FormatDate;
-exports.strFormatDate = strFormatDate;
+exports.FormatDate = FormatDate.FormatDate;
+exports.strFormatDate = FormatDate.strFormatDate;

package/dist/FormatDate-70ea5b43.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function FormatDate({ date: inputDate, showYear = true, }) {
+    let dateObject;
+    if (inputDate instanceof Date) {
+        dateObject = inputDate;
+    }
+    else if (typeof inputDate === "string") {
+        dateObject = new Date(inputDate);
+    }
+    else {
+        dateObject = new Date(inputDate.year, inputDate.month - 1, inputDate.day);
+    }
+    return React__default["default"].createElement(React__default["default"].Fragment, null, strFormatDate(dateObject, showYear));
+}
+function strFormatDate(date, showYear = true) {
+    let formatOptions = {
+        month: "short",
+        day: "numeric",
+    };
+    if (showYear) {
+        formatOptions = Object.assign(Object.assign({}, formatOptions), { year: "numeric" });
+    }
+    return date.toLocaleDateString(undefined, formatOptions);
+}
+
+exports.FormatDate = FormatDate;
+exports.strFormatDate = strFormatDate;

package/dist/InlineLabel/index.js

@@ -2,29 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
-var classnames = require('classnames');
-var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
-var Typography = require('../Typography-fd6f932a.js');
+var InlineLabel = require('../InlineLabel-afd5fc6f.js');
+require('react');
+require('classnames');
+require('../style-inject.es-9d2f5f4e.js');
+require('../Typography-fd6f932a.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-var css_248z = ".S72WkdRbhc0- {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  border-radius: calc(16px / 4);\n  border-radius: var(--radius-large);\n}\n\n.bMWuAXJHkbw- {\n  padding: calc((16px / 4) * 1.5) calc((16px / 2) * 1.25);\n  padding: calc(calc(16px / 4) * 1.5) calc(calc(16px / 2) * 1.25);\n  padding: calc(var(--space-smaller) * 1.5) calc(var(--space-small) * 1.25);\n}\n\n.ui07veHjPII- {\n  padding: calc((16px / 4) * 1.5) calc((16px / 2) * 1.25);\n  padding: calc(calc(16px / 4) * 1.5) calc(calc(16px / 2) * 1.25);\n  padding: calc(var(--space-smaller) * 1.5) calc(var(--space-small) * 1.25);\n}\n\n.WIXhLSQ7z8A- {\n  padding: calc((16px / 2) * 1.25) calc((16px / 4) * 3.5);\n  padding: calc(calc(16px / 2) * 1.25) calc(calc(16px / 4) * 3.5);\n  padding: calc(var(--space-small) * 1.25) calc(var(--space-smaller) * 3.5);\n}\n\n._8RuKvOhj-Ro- {\n  color: rgb(66, 78, 86);\n  color: var(--color-greyBlue--dark);\n  background-color: rgb(232, 235, 237);\n  background-color: var(--color-greyBlue--lightest);\n}\n\n._2vEF1nvVWm8- {\n  color: rgb(128, 25, 0);\n  color: var(--color-red--dark);\n  background-color: rgb(255, 226, 219);\n  background-color: var(--color-red--lightest);\n}\n\n.Wt305sIAeoE- {\n  color: rgb(158, 98, 23);\n  color: var(--color-orange--dark);\n  background-color: rgb(253, 239, 222);\n  background-color: var(--color-orange--lightest);\n}\n\n.F8KkNxz8W3A- {\n  color: rgb(81, 114, 9);\n  color: var(--color-green--dark);\n  background-color: rgb(236, 243, 219);\n  background-color: var(--color-green--lightest);\n}\n\n.URZZoKSX4So- {\n  color: rgb(1, 27, 37);\n  color: var(--color-blue--dark);\n  background-color: rgb(217, 223, 225);\n  background-color: var(--color-blue--lightest);\n}\n\n.OeLBV-9i0Rs- {\n  color: rgb(49, 69, 98);\n  color: var(--color-navy--dark);\n  background-color: rgb(228, 233, 239);\n  background-color: var(--color-navy--lightest);\n}\n\n._2Xwx5tarf1w- {\n  color: rgb(144, 127, 10);\n  color: var(--color-yellow--dark);\n  background-color: rgb(250, 246, 219);\n  background-color: var(--color-yellow--lightest);\n}\n\n.iCqIjI7GkEk- {\n  color: rgb(99, 125, 46);\n  color: var(--color-lime--dark);\n  background-color: rgb(240, 246, 227);\n  background-color: var(--color-lime--lightest);\n}\n\n._4iEIjiZj9oA- {\n  color: rgb(88, 73, 127);\n  color: var(--color-purple--dark);\n  background-color: rgb(237, 234, 246);\n  background-color: var(--color-purple--lightest);\n}\n\n.JRW9QFSjLTA- {\n  color: rgb(116, 62, 98);\n  color: var(--color-pink--dark);\n  background-color: rgb(244, 231, 239);\n  background-color: var(--color-pink--lightest);\n}\n\n.fbhprd-Gl8k- {\n  color: rgb(40, 112, 95);\n  color: var(--color-teal--dark);\n  background-color: rgb(226, 243, 239);\n  background-color: var(--color-teal--lightest);\n}\n\n.yrF9aZSaTdw- {\n  color: rgb(122, 128, 21);\n  color: var(--color-yellowGreen--dark);\n  background-color: rgb(245, 246, 222);\n  background-color: var(--color-yellowGreen--lightest);\n}\n\n.RPvjah0FdjI- {\n  color: rgba(255, 255, 255, 1);\n  color: var(--color-white);\n  background-color: rgb(77, 105, 116);\n  background-color: var(--color-blue--light);\n}\n\n.apwauWJ6ITc- {\n  color: rgb(39, 105, 146);\n  color: var(--color-lightBlue--dark);\n  background-color: rgb(226, 241, 250);\n  background-color: var(--color-lightBlue--lightest);\n}\n\n.n8qJynvE-n0- {\n  color: rgb(55, 69, 132);\n  color: var(--color-indigo--dark);\n  background-color: rgb(230, 233, 247);\n  background-color: var(--color-indigo--lightest);\n}\n";
-var styles = {"inlineLabel":"S72WkdRbhc0-","base":"bMWuAXJHkbw-","large":"ui07veHjPII-","larger":"WIXhLSQ7z8A-","greyBlue":"_8RuKvOhj-Ro-","red":"_2vEF1nvVWm8-","orange":"Wt305sIAeoE-","green":"F8KkNxz8W3A-","blue":"URZZoKSX4So-","navy":"OeLBV-9i0Rs-","yellow":"_2Xwx5tarf1w-","lime":"iCqIjI7GkEk-","purple":"_4iEIjiZj9oA-","pink":"JRW9QFSjLTA-","teal":"fbhprd-Gl8k-","yellowGreen":"yrF9aZSaTdw-","blueDark":"RPvjah0FdjI-","lightBlue":"apwauWJ6ITc-","indigo":"n8qJynvE-n0-"};
-styleInject_es.styleInject(css_248z);
-
-function InlineLabel({ size = "base", color = "greyBlue", children, }) {
-    const className = classnames__default["default"](styles.inlineLabel, styles[size], styles[color]);
-    const sizeMapper = {
-        base: "small",
-        large: "large",
-        larger: "large",
-    };
-    return (React__default["default"].createElement("span", { className: className },
-        React__default["default"].createElement(Typography.Typography, { element: "span", size: sizeMapper[size] }, children)));
-}
-
-exports.InlineLabel = InlineLabel;
+exports.InlineLabel = InlineLabel.InlineLabel;

package/dist/InlineLabel-afd5fc6f.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
+var Typography = require('./Typography-fd6f932a.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+var css_248z = ".S72WkdRbhc0- {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  border-radius: calc(16px / 4);\n  border-radius: var(--radius-large);\n}\n\n.bMWuAXJHkbw- {\n  padding: calc((16px / 4) * 1.5) calc((16px / 2) * 1.25);\n  padding: calc(calc(16px / 4) * 1.5) calc(calc(16px / 2) * 1.25);\n  padding: calc(var(--space-smaller) * 1.5) calc(var(--space-small) * 1.25);\n}\n\n.ui07veHjPII- {\n  padding: calc((16px / 4) * 1.5) calc((16px / 2) * 1.25);\n  padding: calc(calc(16px / 4) * 1.5) calc(calc(16px / 2) * 1.25);\n  padding: calc(var(--space-smaller) * 1.5) calc(var(--space-small) * 1.25);\n}\n\n.WIXhLSQ7z8A- {\n  padding: calc((16px / 2) * 1.25) calc((16px / 4) * 3.5);\n  padding: calc(calc(16px / 2) * 1.25) calc(calc(16px / 4) * 3.5);\n  padding: calc(var(--space-small) * 1.25) calc(var(--space-smaller) * 3.5);\n}\n\n._8RuKvOhj-Ro- {\n  color: rgb(66, 78, 86);\n  color: var(--color-greyBlue--dark);\n  background-color: rgb(232, 235, 237);\n  background-color: var(--color-greyBlue--lightest);\n}\n\n._2vEF1nvVWm8- {\n  color: rgb(128, 25, 0);\n  color: var(--color-red--dark);\n  background-color: rgb(255, 226, 219);\n  background-color: var(--color-red--lightest);\n}\n\n.Wt305sIAeoE- {\n  color: rgb(158, 98, 23);\n  color: var(--color-orange--dark);\n  background-color: rgb(253, 239, 222);\n  background-color: var(--color-orange--lightest);\n}\n\n.F8KkNxz8W3A- {\n  color: rgb(81, 114, 9);\n  color: var(--color-green--dark);\n  background-color: rgb(236, 243, 219);\n  background-color: var(--color-green--lightest);\n}\n\n.URZZoKSX4So- {\n  color: rgb(1, 27, 37);\n  color: var(--color-blue--dark);\n  background-color: rgb(217, 223, 225);\n  background-color: var(--color-blue--lightest);\n}\n\n.OeLBV-9i0Rs- {\n  color: rgb(49, 69, 98);\n  color: var(--color-navy--dark);\n  background-color: rgb(228, 233, 239);\n  background-color: var(--color-navy--lightest);\n}\n\n._2Xwx5tarf1w- {\n  color: rgb(144, 127, 10);\n  color: var(--color-yellow--dark);\n  background-color: rgb(250, 246, 219);\n  background-color: var(--color-yellow--lightest);\n}\n\n.iCqIjI7GkEk- {\n  color: rgb(99, 125, 46);\n  color: var(--color-lime--dark);\n  background-color: rgb(240, 246, 227);\n  background-color: var(--color-lime--lightest);\n}\n\n._4iEIjiZj9oA- {\n  color: rgb(88, 73, 127);\n  color: var(--color-purple--dark);\n  background-color: rgb(237, 234, 246);\n  background-color: var(--color-purple--lightest);\n}\n\n.JRW9QFSjLTA- {\n  color: rgb(116, 62, 98);\n  color: var(--color-pink--dark);\n  background-color: rgb(244, 231, 239);\n  background-color: var(--color-pink--lightest);\n}\n\n.fbhprd-Gl8k- {\n  color: rgb(40, 112, 95);\n  color: var(--color-teal--dark);\n  background-color: rgb(226, 243, 239);\n  background-color: var(--color-teal--lightest);\n}\n\n.yrF9aZSaTdw- {\n  color: rgb(122, 128, 21);\n  color: var(--color-yellowGreen--dark);\n  background-color: rgb(245, 246, 222);\n  background-color: var(--color-yellowGreen--lightest);\n}\n\n.RPvjah0FdjI- {\n  color: rgba(255, 255, 255, 1);\n  color: var(--color-white);\n  background-color: rgb(77, 105, 116);\n  background-color: var(--color-blue--light);\n}\n\n.apwauWJ6ITc- {\n  color: rgb(39, 105, 146);\n  color: var(--color-lightBlue--dark);\n  background-color: rgb(226, 241, 250);\n  background-color: var(--color-lightBlue--lightest);\n}\n\n.n8qJynvE-n0- {\n  color: rgb(55, 69, 132);\n  color: var(--color-indigo--dark);\n  background-color: rgb(230, 233, 247);\n  background-color: var(--color-indigo--lightest);\n}\n";
+var styles = {"inlineLabel":"S72WkdRbhc0-","base":"bMWuAXJHkbw-","large":"ui07veHjPII-","larger":"WIXhLSQ7z8A-","greyBlue":"_8RuKvOhj-Ro-","red":"_2vEF1nvVWm8-","orange":"Wt305sIAeoE-","green":"F8KkNxz8W3A-","blue":"URZZoKSX4So-","navy":"OeLBV-9i0Rs-","yellow":"_2Xwx5tarf1w-","lime":"iCqIjI7GkEk-","purple":"_4iEIjiZj9oA-","pink":"JRW9QFSjLTA-","teal":"fbhprd-Gl8k-","yellowGreen":"yrF9aZSaTdw-","blueDark":"RPvjah0FdjI-","lightBlue":"apwauWJ6ITc-","indigo":"n8qJynvE-n0-"};
+styleInject_es.styleInject(css_248z);
+
+function InlineLabel({ size = "base", color = "greyBlue", children, }) {
+    const className = classnames__default["default"](styles.inlineLabel, styles[size], styles[color]);
+    const sizeMapper = {
+        base: "small",
+        large: "large",
+        larger: "large",
+    };
+    return (React__default["default"].createElement("span", { className: className },
+        React__default["default"].createElement(Typography.Typography, { element: "span", size: sizeMapper[size] }, children)));
+}
+
+exports.InlineLabel = InlineLabel;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.26.3",
+  "version": "4.26.5-pre.33+26d435f3",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,7 +20,7 @@
   ],
   "dependencies": {
     "@jobber/design": "^0.44.4",
-    "@jobber/formatters": "*",
+    "@jobber/formatters": "^0.2.2",
     "@jobber/hooks": "^2.1.5",
     "@popperjs/core": "^2.0.6",
     "@std-proposal/temporal": "0.0.1",
@@ -64,6 +64,7 @@
     "autoprefixer": "^9.5.1",
     "copyfiles": "^2.4.1",
     "glob": "^7.1.4",
+    "jsdom-testing-mocks": "^1.9.0",
     "postcss": "^8.4.21",
     "postcss-import": "^12.0.1",
     "postcss-preset-env": "^8.3.0",
@@ -83,5 +84,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "4af41f0d6352d5c2fcf5ad4ab90c73e20063bdcb"
+  "gitHead": "26d435f3e7458095842a4cd11f312deffd1d4547"
 }