@jobber/components 4.84.0 → 4.84.1

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

@@ -189,7 +189,6 @@ export interface DataListContextProps<T extends DataListObject> extends DataList
     readonly itemActionComponent?: ReactElement<DataListItemActionsProps<T>>;
     readonly bulkActionsComponent?: ReactElement<DataListItemActionsProps<T>>;
     readonly layoutBreakpoints: Breakpoints[];
-    readonly registerLayoutBreakpoints: (breakpoint: Breakpoints) => void;
     readonly layouts: {
         readonly [Breakpoint in Breakpoints]?: LayoutRenderer<T>;
     };

package/dist/DataList/index.js

@@ -85,7 +85,6 @@ const defaultValues$1 = {
     children: [],
     selected: [],
     layoutBreakpoints: [],
-    registerLayoutBreakpoints: noop__default["default"],
     layouts: {
         xs: children => React__default["default"].createElement(React__default["default"].Fragment, null, children),
         sm: children => React__default["default"].createElement(React__default["default"].Fragment, null, children),
@@ -766,17 +765,14 @@ function DataListItems({ size = "xs", }) {
 }
 
 function DataListLayout({ children, size = "xs", }) {
-    const { layoutBreakpoints, registerLayout, registerLayoutBreakpoints, loadingState, } = useDataListContext();
-    const breakpoints = useResponsiveSizing();
-    React.useEffect(() => {
-        registerLayoutBreakpoints(size);
-    }, [size]);
+    const { registerLayout, loadingState, layouts } = useDataListContext();
+    const { activeBreakpoint } = useActiveLayout();
     React.useEffect(() => {
+        if (layouts[size])
+            return;
         registerLayout(size, children);
     }, [size, children]);
-    const sizeIndex = layoutBreakpoints.indexOf(size);
-    const nextAvailableSize = layoutBreakpoints[sizeIndex + 1];
-    const shouldRenderList = breakpoints[size] && !breakpoints[nextAvailableSize];
+    const shouldRenderList = size === activeBreakpoint;
     if (loadingState !== "initial" && shouldRenderList) {
         return React__default["default"].createElement(DataListItems, { size: size });
     }
@@ -1224,8 +1220,8 @@ function InternalDataListStatusBar() {
 
 function DataList(_a) {
     var { selected = [], sorting } = _a, props = tslib_es6.__rest(_a, ["selected", "sorting"]);
-    const [layoutBreakpoints, setLayoutBreakpoints] = React.useState([]);
     const [layouts, setLayouts] = React.useState({});
+    const layoutBreakpoints = React.useMemo(() => sortBreakpoints(Object.keys(layouts)), [layouts]);
     const searchComponent = getCompoundComponent(props.children, DataListSearch);
     const filterComponent = getCompoundComponent(props.children, DataListFilters);
     const layoutComponents = getCompoundComponents(props.children, DataListLayout);
@@ -1241,15 +1237,11 @@ function DataList(_a) {
             itemActionComponent,
             bulkActionsComponent,
             layoutBreakpoints,
-            registerLayoutBreakpoints,
             layouts,
             registerLayout }, props), { selected, 
             // T !== DataListObject
             sorting: sorting }) },
         React__default["default"].createElement(InternalDataList, { shouldRenderStickyHeader: shouldRenderStickyHeader })));
-    function registerLayoutBreakpoints(size) {
-        setLayoutBreakpoints(prev => sortBreakpoints([...prev, size]));
-    }
     function registerLayout(size, children) {
         setLayouts(prev => (Object.assign(Object.assign({}, prev), { [size]: children })));
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.84.0",
+  "version": "4.84.1",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -80,5 +80,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "4780cde621bb770d24f6bd324ee868b302afc579"
+  "gitHead": "825421391c3feb7c30550303949e6f6f0c36535a"
 }