@jobber/components 6.4.0 → 6.5.0

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

@@ -192,6 +192,13 @@ export interface DataListEmptyStateProps {
      * to the DataList component.
      */
     readonly type?: "filtered" | "empty";
+    /**
+     * Custom render function for the empty state.
+     *
+     * If provided, this function will be used to render the empty state instead
+     * of the default rendering logic.
+     */
+    readonly customRender?: (emptyState: Omit<DataListEmptyStateProps, "customRender">) => ReactNode;
 }
 export interface DataListContextProps<T extends DataListObject> extends DataListProps<T> {
     readonly filterComponent?: ReactElement<DataListFiltersProps>;

package/dist/DataList/components/DataListEmptyState/index.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var DataListEmptyState = require('../../../DataListEmptyState-cjs.js');
+require('../../../tslib.es6-cjs.js');
 require('react');
 require('../../../DataListContext-cjs.js');
 require('../../../noop-cjs.js');

package/dist/DataList/components/DataListEmptyState/index.mjs

@@ -1,4 +1,5 @@
 export { D as DataListEmptyState, I as InternalDataListEmptyState } from '../../../DataListEmptyState-es.js';
+import '../../../tslib.es6-es.js';
 import 'react';
 import '../../../DataListContext-es.js';
 import '../../../noop-es.js';

package/dist/DataList/index.d.ts

@@ -1,2 +1,2 @@
 export * from "./DataList";
-export { DataListItemType, DataListObject, DataListSorting, DataListSortable, DataListSelectedType, DataListSelectedAllType, } from "./DataList.types";
+export { DataListItemType, DataListObject, DataListSorting, DataListSortable, DataListSelectedType, DataListSelectedAllType, DataListEmptyStateProps, } from "./DataList.types";

package/dist/DataListEmptyState-cjs.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var tslib_es6 = require('./tslib.es6-cjs.js');
 var React = require('react');
 var DataListContext = require('./DataListContext-cjs.js');
 var Text = require('./Text-cjs.js');
@@ -14,21 +15,23 @@ function DataListEmptyState(_) {
 }
 function InternalDataListEmptyState() {
     const { emptyStateComponents: components, filtered } = React.useContext(DataListContext.DataListContext);
-    const { message, action } = getMessages();
-    return (React.createElement("div", { className: styles.emptyStateWrapper },
-        React.createElement(Text.Text, { align: "center" }, message),
-        renderButton(action)));
-    function getMessages() {
+    const _a = getEmptyStateContent(), { customRender } = _a, contentProps = tslib_es6.__rest(_a, ["customRender"]);
+    return (React.createElement("div", { className: styles.emptyStateWrapper }, customRender ? (customRender(Object.assign({}, contentProps))) : (React.createElement(React.Fragment, null,
+        React.createElement(Text.Text, { align: "center" }, contentProps.message),
+        renderButton(contentProps.action)))));
+    function getEmptyStateContent() {
         const { defaultEmptyState, filteredEmptyState } = getEmptyStates(components);
         if (filtered) {
             return {
                 message: (filteredEmptyState === null || filteredEmptyState === void 0 ? void 0 : filteredEmptyState.props.message) || DataList_const.EMPTY_FILTER_RESULTS_MESSAGE,
                 action: filteredEmptyState === null || filteredEmptyState === void 0 ? void 0 : filteredEmptyState.props.action,
+                customRender: filteredEmptyState === null || filteredEmptyState === void 0 ? void 0 : filteredEmptyState.props.customRender,
             };
         }
         return {
             message: (defaultEmptyState === null || defaultEmptyState === void 0 ? void 0 : defaultEmptyState.props.message) || DataList_const.EMPTY_RESULTS_MESSAGE,
             action: defaultEmptyState === null || defaultEmptyState === void 0 ? void 0 : defaultEmptyState.props.action,
+            customRender: defaultEmptyState === null || defaultEmptyState === void 0 ? void 0 : defaultEmptyState.props.customRender,
         };
     }
 }

package/dist/DataListEmptyState-es.js

@@ -1,3 +1,4 @@
+import { _ as __rest } from './tslib.es6-es.js';
 import React, { useContext, cloneElement } from 'react';
 import { D as DataListContext } from './DataListContext-es.js';
 import { T as Text } from './Text-es.js';
@@ -12,21 +13,23 @@ function DataListEmptyState(_) {
 }
 function InternalDataListEmptyState() {
     const { emptyStateComponents: components, filtered } = useContext(DataListContext);
-    const { message, action } = getMessages();
-    return (React.createElement("div", { className: styles.emptyStateWrapper },
-        React.createElement(Text, { align: "center" }, message),
-        renderButton(action)));
-    function getMessages() {
+    const _a = getEmptyStateContent(), { customRender } = _a, contentProps = __rest(_a, ["customRender"]);
+    return (React.createElement("div", { className: styles.emptyStateWrapper }, customRender ? (customRender(Object.assign({}, contentProps))) : (React.createElement(React.Fragment, null,
+        React.createElement(Text, { align: "center" }, contentProps.message),
+        renderButton(contentProps.action)))));
+    function getEmptyStateContent() {
         const { defaultEmptyState, filteredEmptyState } = getEmptyStates(components);
         if (filtered) {
             return {
                 message: (filteredEmptyState === null || filteredEmptyState === void 0 ? void 0 : filteredEmptyState.props.message) || EMPTY_FILTER_RESULTS_MESSAGE,
                 action: filteredEmptyState === null || filteredEmptyState === void 0 ? void 0 : filteredEmptyState.props.action,
+                customRender: filteredEmptyState === null || filteredEmptyState === void 0 ? void 0 : filteredEmptyState.props.customRender,
             };
         }
         return {
             message: (defaultEmptyState === null || defaultEmptyState === void 0 ? void 0 : defaultEmptyState.props.message) || EMPTY_RESULTS_MESSAGE,
             action: defaultEmptyState === null || defaultEmptyState === void 0 ? void 0 : defaultEmptyState.props.action,
+            customRender: defaultEmptyState === null || defaultEmptyState === void 0 ? void 0 : defaultEmptyState.props.customRender,
         };
     }
 }

package/dist/styles.css

@@ -8991,18 +8991,26 @@ ul.LfIIg9bwrhQ- {
   padding: 4px 8px;
   padding: var(--space-smaller) var(--space-small);
   border: none;
+  border-radius: 8px 8px 0 0;
+  border-radius: var(--radius-base) var(--radius-base) 0 0;
   outline: none;
   color: hsl(197, 15%, 45%);
   color: var(--color-text--secondary);
-  background: rgba(255, 255, 255, 1);
-  background: var(--color-surface);
+  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--color-surface);
   cursor: pointer;
-  transition: all 200ms;
-  transition: all var(--timing-base);
+  transition: all 200ms ease;
+  transition: all var(--timing-base) ease;
   -ms-flex: 0 0 auto;
       flex: 0 0 auto;
 }
 
+.DEdzikxlAkw-:focus-visible {
+  outline: transparent;
+  background-color: hsl(53, 21%, 93%);
+  background-color: var(--color-surface--hover);
+}
+
 .DEdzikxlAkw-.VDB94VYoyB0-,
 .DEdzikxlAkw-:not(.VDB94VYoyB0-):hover,
 .DEdzikxlAkw-:not(.VDB94VYoyB0-):focus {
@@ -9010,12 +9018,6 @@ ul.LfIIg9bwrhQ- {
   color: var(--color-heading);
 }
 
-.DEdzikxlAkw-:not(.VDB94VYoyB0-):focus-within {
-  outline: none;
-  background: hsl(53, 21%, 93%);
-  background: var(--color-surface--hover);
-}
-
 .VDB94VYoyB0-::after {
   content: " ";
   display: block;
@@ -9029,10 +9031,6 @@ ul.LfIIg9bwrhQ- {
   background-color: var(--color-interactive);
 }
 
-.VDB94VYoyB0-:focus {
-  background-color: transparent;
-}
-
 .htdKg6As4bY- {
   padding-top: var(--tab--vertical-inset);
   padding-bottom: var(--tab--vertical-inset);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.4.0",
+  "version": "6.5.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -487,5 +487,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "02286ab24efc02123650b3d92d6b9be8a0c988f3"
+  "gitHead": "33aaa4d714b638f6272b2dcf4a2cfe2525b595e6"
 }