@jobber/components 4.15.2 → 4.15.3-JOB-68798.4

package/dist/Grid/Grid.d.ts

@@ -1,5 +1,5 @@
-import { ReactElement } from "react";
-import { GridCell, GridCellProps } from "./GridCell";
+import { PropsWithChildren, ReactElement } from "react";
+import { GridCellProps } from "./InternalGridCell";
 import alignments from "./GridAlign.css";
 interface GridProps {
     /**
@@ -22,4 +22,5 @@ export declare function Grid({ alignItems, gap, children, }: GridProps): JSX.Ele
 export declare namespace Grid {
     var Cell: typeof GridCell;
 }
+declare function GridCell(props: PropsWithChildren<GridCellProps>): JSX.Element;
 export {};

package/dist/Grid/{GridCell/GridCell.d.ts → InternalGridCell/InternalGridCell.d.ts}

@@ -18,5 +18,5 @@ export interface GridCellProps {
     };
 }
 export declare const GRID_CELL_TEST_ID = "ATL-Grid-GridCell";
-export declare function GridCell({ size, children }: PropsWithChildren<GridCellProps>): JSX.Element;
+export declare function InternalGridCell({ size, children, }: PropsWithChildren<GridCellProps>): JSX.Element;
 export {};

package/dist/Grid/InternalGridCell/index.d.ts

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

package/dist/Grid/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var classnames = require('classnames');
+var useAssert = require('@jobber/hooks/useAssert');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -11,8 +12,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-var css_248z$2 = "._3ktwlV3aNFk- {\n  grid-column: initial;\n  grid-column-end: span var(--gridCell--size-xs);\n}@media (min-width:490px) {._3ktwlV3aNFk- {\n    grid-column-end: span var(--gridCell--size-sm);\n}\n  }@media (--small-screens-and-up) {._3ktwlV3aNFk- {\n    grid-column-end: span var(--gridCell--size-sm);\n}\n  }@media (min-width: 640px) {._3ktwlV3aNFk- {\n    grid-column-end: span var(--gridCell--size-md);\n}\n  }@media (--medium-screens) {._3ktwlV3aNFk- {\n    grid-column-end: span var(--gridCell--size-md);\n}\n  }@media (min-width:1440px) {._3ktwlV3aNFk- {\n    grid-column-end: span var(--gridCell--size-lg);\n}\n  }@media (--large-screens-and-up) {._3ktwlV3aNFk- {\n    grid-column-end: span var(--gridCell--size-lg);\n}\n  }@media (min-width:1680px) {._3ktwlV3aNFk- {\n    grid-column-end: span var(--gridCell--size-xl);\n}\n  }@media (--extra-large-screens-and-up) {._3ktwlV3aNFk- {\n    grid-column-end: span var(--gridCell--size-xl);\n}\n  }\n";
-var styles$1 = {"gridCell":"_3ktwlV3aNFk-"};
+var css_248z$2 = ".YJHtDDKq6WI- {\n  grid-column: initial;\n  grid-column-end: span var(--gridCell--size-xs);\n}@media (min-width:490px) {.YJHtDDKq6WI- {\n    grid-column-end: span var(--gridCell--size-sm);\n}\n  }@media (--small-screens-and-up) {.YJHtDDKq6WI- {\n    grid-column-end: span var(--gridCell--size-sm);\n}\n  }@media (min-width: 640px) {.YJHtDDKq6WI- {\n    grid-column-end: span var(--gridCell--size-md);\n}\n  }@media (--medium-screens) {.YJHtDDKq6WI- {\n    grid-column-end: span var(--gridCell--size-md);\n}\n  }@media (min-width:1440px) {.YJHtDDKq6WI- {\n    grid-column-end: span var(--gridCell--size-lg);\n}\n  }@media (--large-screens-and-up) {.YJHtDDKq6WI- {\n    grid-column-end: span var(--gridCell--size-lg);\n}\n  }@media (min-width:1680px) {.YJHtDDKq6WI- {\n    grid-column-end: span var(--gridCell--size-xl);\n}\n  }@media (--extra-large-screens-and-up) {.YJHtDDKq6WI- {\n    grid-column-end: span var(--gridCell--size-xl);\n}\n  }\n";
+var styles$1 = {"gridCell":"YJHtDDKq6WI-"};
 styleInject_es.styleInject(css_248z$2);
 
 /**
@@ -21,7 +22,7 @@ styleInject_es.styleInject(css_248z$2);
 const breakpoints = ["xs", "sm", "md", "lg", "xl"];
 const MAX_COLUMNS = 12;
 const GRID_CELL_TEST_ID = "ATL-Grid-GridCell";
-function GridCell({ size, children }) {
+function InternalGridCell({ size, children, }) {
     /**
      * Build CSS variables for column sizes for all possible breakpoints to size
      * the column
@@ -57,7 +58,16 @@ function Grid({ alignItems = "start", gap = true, children, }) {
     const classnames = classnames__default["default"](styles.grid, alignments[alignItems], {
         [styles.gap]: gap,
     });
-    return (React__default["default"].createElement("div", { "data-testid": GRID_TEST_ID, className: classnames }, children));
+    return (React__default["default"].createElement("div", { "data-testid": GRID_TEST_ID, className: classnames }, React__default["default"].Children.map(children, gridCell => {
+        return React__default["default"].createElement(InternalGridCell, Object.assign({}, gridCell.props));
+    })));
+}
+// Only need the component to pass in the data as a react children
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function GridCell(props) {
+    // Throw error when <Chip /> gets used outside of the <Chips />
+    useAssert.useAssert(true, "`<Grid.Cell>` can only be used inside of a `<Grid>` component!");
+    return React__default["default"].createElement(React__default["default"].Fragment, null);
 }
 Grid.Cell = GridCell;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.15.2",
+  "version": "4.15.3-JOB-68798.4+5073aba6",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,7 +20,7 @@
   ],
   "dependencies": {
     "@jobber/design": "^0.39.0",
-    "@jobber/formatters": "*",
+    "@jobber/formatters": "^0.2.2",
     "@jobber/hooks": "^2.1.2",
     "@popperjs/core": "^2.0.6",
     "@std-proposal/temporal": "0.0.1",
@@ -83,5 +83,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "52276106cc0538c532739bddf8a6a9ca5dec5e42"
+  "gitHead": "5073aba6a5928aa13deab513e3cd6aeac70db1f7"
 }

package/dist/Grid/GridCell/index.d.ts

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