@jobber/components 4.49.2-JOB-80005.2 → 4.50.0

package/dist/Banner/Banner.d.ts

@@ -2,7 +2,7 @@ import { ReactNode } from "react";
 import { IconNames } from "@jobber/design";
 import { ButtonProps } from "../Button";
 export type BannerType = "notice" | "success" | "warning" | "error";
-export interface BannerProps {
+interface BannerProps {
     readonly children: ReactNode;
     readonly type: BannerType;
     /**
@@ -21,3 +21,4 @@ export interface BannerProps {
     onDismiss?(): void;
 }
 export declare function Banner({ children, type, primaryAction, dismissible, icon, onDismiss, }: BannerProps): JSX.Element;
+export {};

package/dist/Banner/index.d.ts

@@ -1 +1 @@
-export { Banner, BannerType, BannerProps } from "./Banner";
+export { Banner, BannerType } from "./Banner";

package/dist/Banner/index.js

@@ -2,18 +2,80 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Banner = require('../Banner-ecd9a7cf.js');
-require('react');
-require('classnames');
-require('@jobber/hooks/useResizeObserver');
-require('../style-inject.es-9d2f5f4e.js');
-require('../Icon-405a216c.js');
+var React = require('react');
+var classnames = require('classnames');
+var jobberHooks = require('@jobber/hooks/useResizeObserver');
+var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
+var Icon = require('../Icon-405a216c.js');
+var Text = require('../Text-54334431.js');
+var Button = require('../Button-db6114a6.js');
 require('@jobber/design');
-require('../Text-54334431.js');
 require('../Typography-83915c54.js');
-require('../Button-db6114a6.js');
 require('react-router-dom');
 
+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);
 
-exports.Banner = Banner.Banner;
+var css_248z$1 = ".meuT8gYQPJU- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-base);\n  padding: calc(16px * 1);\n  padding: var(--space-base);\n  color: rgb(66, 78, 86);\n  color: var(--color-text);\n  background-color: rgb(244, 244, 244);\n  background-color: var(--color-surface--background);\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.y4BapyZr-fo- > a {\n  color: rgb(66, 78, 86);\n  color: var(--color-text);\n}\n\n.y4BapyZr-fo- > a:hover {\n  color: rgb(1, 41, 57);\n  color: var(--color-blue);\n}\n\n._6v1woNSLEvc- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 1 1 auto;\n      flex: 1 1 auto;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n  -ms-flex-wrap: nowrap;\n      flex-wrap: nowrap;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: start;\n      align-items: flex-start;\n}\n\n@media (max-width: 489.98px) {\n\n._6v1woNSLEvc- {\n    -ms-flex-wrap: wrap;\n        flex-wrap: wrap;\n}\n  }\n\n@media (--small-screens-and-below) {\n\n._6v1woNSLEvc- {\n    -ms-flex-wrap: wrap;\n        flex-wrap: wrap;\n}\n  }\n\n.y4BapyZr-fo- {\n  -ms-flex: 1;\n      flex: 1;\n  -ms-flex-item-align: center;\n      align-self: center;\n}\n\n._6v1woNSLEvc- > *:last-child {\n  margin-bottom: 0;\n}\n\n.bocgLmEhcTU- .y4BapyZr-fo- {\n  -ms-flex: 1;\n      flex: 1;\n}\n\n.rtNjEzmABX4- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n}\n\n@media (max-width: 489.98px) {\n\n.rtNjEzmABX4- {\n    width: 100%;\n    margin-top: calc(16px / 2);\n    margin-top: var(--space-small);\n}\n  }\n\n@media (--small-screens-and-below) {\n\n.rtNjEzmABX4- {\n    width: 100%;\n    margin-top: calc(16px / 2);\n    margin-top: var(--space-small);\n}\n  }\n\n.lunQ5SOfyLg- {\n  margin: calc((16px / 8) * -1) 0;\n  margin: calc(calc(16px / 8) * -1) 0;\n  margin: calc(var(--space-smallest) * -1) 0;\n  padding: calc(16px / 8);\n  padding: var(--space-smallest);\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  -webkit-appearance: none;\n          appearance: none;\n  -ms-flex: 0;\n      flex: 0;\n  -ms-flex-item-align: start;\n      align-self: flex-start;\n}\n\n.lunQ5SOfyLg-:hover {\n  background: rgba(0, 0, 0, 0.025);\n}\n\n.lunQ5SOfyLg-:focus {\n  box-shadow: 0px 0px calc(16px / 4) calc(16px / 8)\n    rgb(231, 213, 87);\n  box-shadow: var(--shadow-focus);\n  outline: none;\n  background: rgba(0, 0, 0, 0.05);\n}\n";
+var styles = {"banner":"meuT8gYQPJU-","bannerChildren":"y4BapyZr-fo-","bannerContent":"_6v1woNSLEvc-","medium":"bocgLmEhcTU-","bannerAction":"rtNjEzmABX4-","closeButton":"lunQ5SOfyLg-"};
+styleInject_es.styleInject(css_248z$1);
+
+var css_248z = ".wWW-2T7rCV0- {\n  background-color: rgb(226, 241, 250);\n  background-color: var(--color-informative--surface);\n}\n\n/* Our Banner \"surface\" colors should be lighter than they are so we're leaving the following alone for now */\n\n._7h8FUHIkVjg- {\n  background-color: rgb(203, 223, 159);\n  background-color: var(--color-green--lighter);\n}\n\n.d5fXcE1L0lc- {\n  background-color: rgb(241, 231, 159);\n  background-color: var(--color-yellow--lighter);\n}\n\n.oYaw-T3c0IU- {\n  background-color: rgb(255, 206, 194);\n  background-color: var(--color-red--lighter);\n}\n";
+var types = {"notice":"wWW-2T7rCV0-","success":"_7h8FUHIkVjg-","warning":"d5fXcE1L0lc-","error":"oYaw-T3c0IU-"};
+styleInject_es.styleInject(css_248z);
+
+function BannerIcon({ icon }) {
+    return React__default["default"].createElement(Icon.Icon, { name: icon, color: "greyBlueDark" });
+}
+
+function Banner({ children, type, primaryAction, dismissible = true, icon, onDismiss, }) {
+    const [showBanner, setShowBanner] = React.useState(true);
+    const bannerWidths = {
+        small: 320,
+        medium: 480,
+    };
+    const [bannerRef, { width: bannerWidth = bannerWidths.small }] = jobberHooks.useResizeObserver({
+        widths: bannerWidths,
+    });
+    const iconColors = {
+        notice: "informative",
+        success: "success",
+        warning: "warning",
+        error: "critical",
+    };
+    if (primaryAction != undefined) {
+        primaryAction = Object.assign({
+            size: "small",
+            type: "tertiary",
+            variation: type === "notice" ? "learning" : "work",
+        }, primaryAction);
+    }
+    const bannerClassNames = classnames__default["default"](styles.banner, types[type], {
+        [styles.medium]: bannerWidth >= bannerWidths.medium,
+    });
+    return (React__default["default"].createElement(React__default["default"].Fragment, null, showBanner && (React__default["default"].createElement("div", { className: bannerClassNames, ref: bannerRef, role: type === "error" ? "alert" : "status" },
+        React__default["default"].createElement("div", { className: styles.bannerContent },
+            icon && React__default["default"].createElement(BannerIcon, { icon: icon }),
+            React__default["default"].createElement("div", { className: styles.bannerChildren },
+                React__default["default"].createElement(BannerChildren, null, children)),
+            primaryAction && (React__default["default"].createElement("div", { className: styles.bannerAction },
+                React__default["default"].createElement(Button.Button, Object.assign({}, primaryAction))))),
+        dismissible && (React__default["default"].createElement("button", { className: styles.closeButton, onClick: handleClose, "aria-label": "Close this notification" },
+            React__default["default"].createElement(Icon.Icon, { name: "cross", color: iconColors[type] })))))));
+    function handleClose() {
+        setShowBanner(!showBanner);
+        onDismiss && onDismiss();
+    }
+}
+function BannerChildren({ children }) {
+    if (!children)
+        return React__default["default"].createElement(React__default["default"].Fragment, null);
+    if (children && typeof children === "string") {
+        return React__default["default"].createElement(Text.Text, null, children);
+    }
+    return React__default["default"].createElement(React__default["default"].Fragment, null, children);
+}
+
+exports.Banner = Banner;

package/dist/DataList/DataList.d.ts

@@ -19,5 +19,4 @@ export declare namespace DataList {
     var BulkActions: typeof DataListBulkActions;
     var ItemAction: typeof DataListAction;
     var BatchAction: (props: DataListBulkActionProps) => JSX.Element;
-    var Banner: typeof import("../Banner").Banner;
 }

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

@@ -158,7 +158,6 @@ export interface DataListContextProps<T extends DataListObject> extends DataList
     readonly layoutComponents?: ReactElement<DataListLayoutProps<T>>[];
     readonly itemActionComponent?: ReactElement<DataListItemActionsProps<T>>;
     readonly bulkActionsComponent?: ReactElement<DataListItemActionsProps<T>>;
-    readonly bannerComponent?: ReactElement;
     readonly layoutBreakpoints: Breakpoints[];
     readonly registerLayoutBreakpoints: (breakpoint: Breakpoints) => void;
     readonly layouts: {

package/dist/DataList/index.js

@@ -37,7 +37,6 @@ var debounce = require('lodash/debounce');
 var InputText = require('../InputText-ab237501.js');
 var Spinner = require('../Spinner-9d8fc7ff.js');
 var Icon = require('../Icon-405a216c.js');
-var Banner = require('../Banner-ecd9a7cf.js');
 require('uuid');
 require('react-hook-form');
 require('../ButtonDismiss-1ccb84ec.js');
@@ -45,7 +44,6 @@ require('lodash/sortBy');
 require('@jobber/hooks/useLiveAnnounce');
 require('../FormField-fa9254dc.js');
 require('../InputValidation-377d6c62.js');
-require('@jobber/hooks/useResizeObserver');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -999,14 +997,12 @@ function DataList(_a) {
     const emptyStateComponents = getCompoundComponents(props.children, DataListEmptyState);
     const itemActionComponent = getCompoundComponent(props.children, DataListItemActions);
     const bulkActionsComponent = getCompoundComponent(props.children, DataListBulkActions);
-    const bannerComponent = getCompoundComponent(props.children, Banner.Banner);
     return (React__default["default"].createElement(DataListContext.Provider, { value: Object.assign(Object.assign({ searchComponent,
             filterComponent,
             layoutComponents,
             emptyStateComponents,
             itemActionComponent,
             bulkActionsComponent,
-            bannerComponent,
             layoutBreakpoints,
             registerLayoutBreakpoints,
             layouts,
@@ -1022,7 +1018,7 @@ function DataList(_a) {
     }
 }
 function InternalDataList() {
-    const { data, title, totalCount, loadingState = "none", layoutComponents, bannerComponent, } = useDataListContext();
+    const { data, title, totalCount, loadingState = "none", layoutComponents, } = useDataListContext();
     const backToTopRef = React.useRef(null);
     const initialLoading = loadingState === "initial";
     const showEmptyState = !initialLoading && data.length === 0;
@@ -1036,7 +1032,6 @@ function InternalDataList() {
             React__default["default"].createElement("div", { className: styles$e.headerFilters },
                 React__default["default"].createElement(InternalDataListFilters, null),
                 React__default["default"].createElement(InternalDataListSearch, null)),
-            bannerComponent,
             React__default["default"].createElement(DataListHeader, null)),
         initialLoading && React__default["default"].createElement(DataListLoadingState, null),
         showEmptyState && React__default["default"].createElement(InternalDataListEmptyState, null),
@@ -1103,9 +1098,5 @@ DataList.ItemAction = DataListAction;
 DataList.BatchAction = function DataListBatchAction(props) {
     return React__default["default"].createElement(DataListAction, Object.assign({}, props));
 };
-/**
- * Defines a banner that is going to rendered between the filters and the header.
- */
-DataList.Banner = Banner.Banner;
 
 exports.DataList = DataList;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.49.2-JOB-80005.2+c6633b76",
+  "version": "4.50.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,7 +20,7 @@
   ],
   "dependencies": {
     "@jobber/design": "^0.46.0",
-    "@jobber/formatters": "^0.2.2",
+    "@jobber/formatters": "*",
     "@jobber/hooks": "^2.6.1",
     "@popperjs/core": "^2.0.6",
     "@std-proposal/temporal": "0.0.1",
@@ -84,5 +84,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "c6633b76c850e8e2c32c3ef2966cf9a9b5745fd3"
+  "gitHead": "c1696e9d61aa0f7d34d97703337b96569be0589a"
 }

package/dist/Banner-ecd9a7cf.js

@@ -1,76 +0,0 @@
-'use strict';
-
-var React = require('react');
-var classnames = require('classnames');
-var jobberHooks = require('@jobber/hooks/useResizeObserver');
-var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
-var Icon = require('./Icon-405a216c.js');
-var Text = require('./Text-54334431.js');
-var Button = require('./Button-db6114a6.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$1 = ".meuT8gYQPJU- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  box-shadow: 0px calc(16px / 16) calc(16px / 4) 0px\n      rgba(0, 0, 0, 0.1),\n    0px calc(16px / 4) 12px 0px rgba(0, 0, 0, 0.05);\n  box-shadow: var(--shadow-base);\n  padding: calc(16px * 1);\n  padding: var(--space-base);\n  color: rgb(66, 78, 86);\n  color: var(--color-text);\n  background-color: rgb(244, 244, 244);\n  background-color: var(--color-surface--background);\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.y4BapyZr-fo- > a {\n  color: rgb(66, 78, 86);\n  color: var(--color-text);\n}\n\n.y4BapyZr-fo- > a:hover {\n  color: rgb(1, 41, 57);\n  color: var(--color-blue);\n}\n\n._6v1woNSLEvc- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 1 1 auto;\n      flex: 1 1 auto;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n  -ms-flex-wrap: nowrap;\n      flex-wrap: nowrap;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: start;\n      align-items: flex-start;\n}\n\n@media (max-width: 489.98px) {\n\n._6v1woNSLEvc- {\n    -ms-flex-wrap: wrap;\n        flex-wrap: wrap;\n}\n  }\n\n@media (--small-screens-and-below) {\n\n._6v1woNSLEvc- {\n    -ms-flex-wrap: wrap;\n        flex-wrap: wrap;\n}\n  }\n\n.y4BapyZr-fo- {\n  -ms-flex: 1;\n      flex: 1;\n  -ms-flex-item-align: center;\n      align-self: center;\n}\n\n._6v1woNSLEvc- > *:last-child {\n  margin-bottom: 0;\n}\n\n.bocgLmEhcTU- .y4BapyZr-fo- {\n  -ms-flex: 1;\n      flex: 1;\n}\n\n.rtNjEzmABX4- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n}\n\n@media (max-width: 489.98px) {\n\n.rtNjEzmABX4- {\n    width: 100%;\n    margin-top: calc(16px / 2);\n    margin-top: var(--space-small);\n}\n  }\n\n@media (--small-screens-and-below) {\n\n.rtNjEzmABX4- {\n    width: 100%;\n    margin-top: calc(16px / 2);\n    margin-top: var(--space-small);\n}\n  }\n\n.lunQ5SOfyLg- {\n  margin: calc((16px / 8) * -1) 0;\n  margin: calc(calc(16px / 8) * -1) 0;\n  margin: calc(var(--space-smallest) * -1) 0;\n  padding: calc(16px / 8);\n  padding: var(--space-smallest);\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  -webkit-appearance: none;\n          appearance: none;\n  -ms-flex: 0;\n      flex: 0;\n  -ms-flex-item-align: start;\n      align-self: flex-start;\n}\n\n.lunQ5SOfyLg-:hover {\n  background: rgba(0, 0, 0, 0.025);\n}\n\n.lunQ5SOfyLg-:focus {\n  box-shadow: 0px 0px calc(16px / 4) calc(16px / 8)\n    rgb(231, 213, 87);\n  box-shadow: var(--shadow-focus);\n  outline: none;\n  background: rgba(0, 0, 0, 0.05);\n}\n";
-var styles = {"banner":"meuT8gYQPJU-","bannerChildren":"y4BapyZr-fo-","bannerContent":"_6v1woNSLEvc-","medium":"bocgLmEhcTU-","bannerAction":"rtNjEzmABX4-","closeButton":"lunQ5SOfyLg-"};
-styleInject_es.styleInject(css_248z$1);
-
-var css_248z = ".wWW-2T7rCV0- {\n  background-color: rgb(226, 241, 250);\n  background-color: var(--color-informative--surface);\n}\n\n/* Our Banner \"surface\" colors should be lighter than they are so we're leaving the following alone for now */\n\n._7h8FUHIkVjg- {\n  background-color: rgb(203, 223, 159);\n  background-color: var(--color-green--lighter);\n}\n\n.d5fXcE1L0lc- {\n  background-color: rgb(241, 231, 159);\n  background-color: var(--color-yellow--lighter);\n}\n\n.oYaw-T3c0IU- {\n  background-color: rgb(255, 206, 194);\n  background-color: var(--color-red--lighter);\n}\n";
-var types = {"notice":"wWW-2T7rCV0-","success":"_7h8FUHIkVjg-","warning":"d5fXcE1L0lc-","error":"oYaw-T3c0IU-"};
-styleInject_es.styleInject(css_248z);
-
-function BannerIcon({ icon }) {
-    return React__default["default"].createElement(Icon.Icon, { name: icon, color: "greyBlueDark" });
-}
-
-function Banner({ children, type, primaryAction, dismissible = true, icon, onDismiss, }) {
-    const [showBanner, setShowBanner] = React.useState(true);
-    const bannerWidths = {
-        small: 320,
-        medium: 480,
-    };
-    const [bannerRef, { width: bannerWidth = bannerWidths.small }] = jobberHooks.useResizeObserver({
-        widths: bannerWidths,
-    });
-    const iconColors = {
-        notice: "informative",
-        success: "success",
-        warning: "warning",
-        error: "critical",
-    };
-    if (primaryAction != undefined) {
-        primaryAction = Object.assign({
-            size: "small",
-            type: "tertiary",
-            variation: type === "notice" ? "learning" : "work",
-        }, primaryAction);
-    }
-    const bannerClassNames = classnames__default["default"](styles.banner, types[type], {
-        [styles.medium]: bannerWidth >= bannerWidths.medium,
-    });
-    return (React__default["default"].createElement(React__default["default"].Fragment, null, showBanner && (React__default["default"].createElement("div", { className: bannerClassNames, ref: bannerRef, role: type === "error" ? "alert" : "status" },
-        React__default["default"].createElement("div", { className: styles.bannerContent },
-            icon && React__default["default"].createElement(BannerIcon, { icon: icon }),
-            React__default["default"].createElement("div", { className: styles.bannerChildren },
-                React__default["default"].createElement(BannerChildren, null, children)),
-            primaryAction && (React__default["default"].createElement("div", { className: styles.bannerAction },
-                React__default["default"].createElement(Button.Button, Object.assign({}, primaryAction))))),
-        dismissible && (React__default["default"].createElement("button", { className: styles.closeButton, onClick: handleClose, "aria-label": "Close this notification" },
-            React__default["default"].createElement(Icon.Icon, { name: "cross", color: iconColors[type] })))))));
-    function handleClose() {
-        setShowBanner(!showBanner);
-        onDismiss && onDismiss();
-    }
-}
-function BannerChildren({ children, }) {
-    if (!children)
-        return React__default["default"].createElement(React__default["default"].Fragment, null);
-    if (children && typeof children === "string") {
-        return React__default["default"].createElement(Text.Text, null, children);
-    }
-    return React__default["default"].createElement(React__default["default"].Fragment, null, children);
-}
-
-exports.Banner = Banner;