@jobber/components 4.79.1 → 4.79.2-JOB-88844-.5

package/dist/Combobox/hooks/useMakeComboboxHandlers.d.ts

@@ -4,4 +4,4 @@ export interface UseMakeComboboxHandlersReturn {
     handleClose: () => void;
     handleSelection: (selection: ComboboxOption) => void;
 }
-export declare function useMakeComboboxHandlers(setOpen: (open: boolean) => void, setSearchValue: (searchValue: string) => void, selectedOptions: ComboboxOption[], shouldScroll: React.MutableRefObject<boolean>, selectedStateSetter: (selected: ComboboxOption[]) => void, multiSelect?: boolean, onClose?: () => void): UseMakeComboboxHandlersReturn;
+export declare function useMakeComboboxHandlers(setOpen: (open: boolean) => void, setSearchValue: (searchValue: string) => void, selectedOptions: ComboboxOption[], shouldScroll: React.MutableRefObject<boolean>, selectedStateSetter: (selected: ComboboxOption[]) => void, multiSelect?: boolean, onClose?: () => void, onSearch?: (searchValue: string) => void): UseMakeComboboxHandlersReturn;

package/dist/Combobox/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Combobox = require('../Combobox-ca9ac94b.js');
+var Combobox = require('../Combobox-6edd91fa.js');
 require('react');
 require('classnames');
 require('react-dom');

package/dist/{Combobox-ca9ac94b.js → Combobox-6edd91fa.js}

@@ -351,15 +351,16 @@ var css_248z = ".W8qMZnORYxI- {\n  position: fixed;\n  top: 0;\n  right: 0;\n  b
 var styles = {"overlay":"W8qMZnORYxI-","wrapper":"_-0dkolvLF-Y-"};
 styleInject_es.styleInject(css_248z);
 
-function useMakeComboboxHandlers(setOpen, setSearchValue, selectedOptions, shouldScroll, selectedStateSetter, multiSelect, onClose) {
+function useMakeComboboxHandlers(setOpen, setSearchValue, selectedOptions, shouldScroll, selectedStateSetter, multiSelect, onClose, onSearch) {
     const handleClose = React.useCallback(() => {
         setOpen(false);
         setSearchValue("");
+        onSearch && onSearch("");
         onClose && onClose();
         if (selectedOptions.length > 0) {
             shouldScroll.current = true;
         }
-    }, [setOpen, setSearchValue, onClose, selectedOptions.length]);
+    }, [setOpen, setSearchValue, onClose, onSearch, selectedOptions.length]);
     const handleSelection = React.useCallback((selection) => {
         if (multiSelect) {
             handleMultiSelect(selectedStateSetter, selectedOptions, selection);
@@ -392,7 +393,7 @@ function useCombobox(selected, onSelect, options, onClose, multiSelect, onSearch
     const [open, setOpen] = React.useState(false);
     const [searchValue, setSearchValue] = React.useState("");
     const searchCallback = React.useCallback(debounce__default["default"]((value) => onSearch === null || onSearch === void 0 ? void 0 : onSearch(value), debounceTime), [onSearch, debounceTime]);
-    const { handleClose, handleSelection } = useMakeComboboxHandlers(setOpen, setSearchValue, selected, shouldScroll, onSelect, multiSelect, onClose);
+    const { handleClose, handleSelection } = useMakeComboboxHandlers(setOpen, setSearchValue, selected, shouldScroll, onSelect, multiSelect, onClose, onSearch);
     const internalFilteredOptions = options.filter(option => option.label.toLowerCase().includes(searchValue.toLowerCase()));
     return {
         wrapperRef,

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

@@ -15,6 +15,7 @@ export declare const SEARCH_DEBOUNCE_DELAY: number;
 export declare const DATA_LIST_FILTERING_SPINNER_TEST_ID = "ATL-DataList-filteringSpinner";
 export declare const DATA_LIST_LOADING_MORE_SPINNER_TEST_ID = "ATL-DataList-loadingMoreSpinner";
 export declare const DATA_LOAD_MORE_TEST_ID = "ATL-DataList-LoadMore-trigger";
+export declare const DATA_LIST_STICKY_HEADER_TEST_ID = "ATL-DataList-stickyHeader";
 export declare const TRANSITION_DURATION_IN_SECONDS: number;
 export declare const TRANSITION_DELAY_IN_SECONDS: number;
 export {};

package/dist/DataList/index.js

@@ -26,7 +26,7 @@ var ReactDOM = require('react-dom');
 var Checkbox = require('../Checkbox-99f6297f.js');
 var reactRouterDom = require('react-router-dom');
 var AnimatedSwitcher = require('../AnimatedSwitcher-3d45ec5d.js');
-var Combobox = require('../Combobox-ca9ac94b.js');
+var Combobox = require('../Combobox-6edd91fa.js');
 var Chip = require('../Chip-c91fd6c8.js');
 var debounce = require('lodash/debounce');
 var InputText = require('../InputText-6e356985.js');
@@ -145,6 +145,7 @@ const SEARCH_DEBOUNCE_DELAY = design.tokens["timing-slowest"];
 const DATA_LIST_FILTERING_SPINNER_TEST_ID = "ATL-DataList-filteringSpinner";
 const DATA_LIST_LOADING_MORE_SPINNER_TEST_ID = "ATL-DataList-loadingMoreSpinner";
 const DATA_LOAD_MORE_TEST_ID = "ATL-DataList-LoadMore-trigger";
+const DATA_LIST_STICKY_HEADER_TEST_ID = "ATL-DataList-stickyHeader";
 const TRANSITION_DURATION_IN_SECONDS = design.tokens["timing-base"] / 1000;
 const TRANSITION_DELAY_IN_SECONDS = design.tokens["timing-quick"] / 1000;
 
@@ -1017,7 +1018,7 @@ function DataListStickyHeader({ children }) {
             ref.current && observer.unobserve(ref.current);
         };
     }, [handleObserver, ref.current]);
-    return (React__default["default"].createElement("div", { ref: ref, className: classnames__default["default"](styles$5.header, { [styles$5.stuck]: isStuck }) }, children));
+    return (React__default["default"].createElement("div", { "data-testid": DATA_LIST_STICKY_HEADER_TEST_ID, ref: ref, className: classnames__default["default"](styles$5.header, { [styles$5.stuck]: isStuck }) }, children));
 }
 
 var css_248z$4 = ".tj0MOMhLEEY- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.SaPMOnvw-3c- {\n  --transition-properties: var(--timing-base) ease-in-out;\n  --button-offset: calc(var(--space-largest) - var(--space-smaller));\n\n  position: absolute;\n  top: 50%;\n  right: calc((16px * 3) - (16px / 4));\n  right: calc(calc(16px * 3) - calc(16px / 4));\n  right: var(--button-offset);\n  visibility: hidden;\n  width: 0;\n  padding: calc(16px / 4) 0;\n  padding: var(--space-smaller) 0;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n  opacity: 0;\n  -webkit-transform: translateY(-50%);\n          transform: translateY(-50%);\n  transition: opacity 200ms ease-in-out,\n    width 200ms ease-in-out, visibility 200ms ease-in-out;\n  transition: opacity var(--transition-properties),\n    width var(--transition-properties), visibility var(--transition-properties);\n}\n\n._3S1-91v2SYI- {\n  visibility: visible;\n  width: calc(100% - var(--button-offset));\n  opacity: 1;\n}\n\n@media (min-width: 768px) {\n\n.SaPMOnvw-3c-,\n._3S1-91v2SYI- {\n    position: static;\n    visibility: visible;\n    width: auto;\n    padding: 0;\n    background-color: transparent;\n    opacity: 1;\n    -webkit-transform: none;\n            transform: none;\n    transition: none;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n.SaPMOnvw-3c-,\n._3S1-91v2SYI- {\n    position: static;\n    visibility: visible;\n    width: auto;\n    padding: 0;\n    background-color: transparent;\n    opacity: 1;\n    -webkit-transform: none;\n            transform: none;\n    transition: none;\n}\n  }\n\n._9GlBktsUALw- {\n  display: block;\n}\n\n@media (min-width: 768px) {\n\n._9GlBktsUALw- {\n    display: none;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n._9GlBktsUALw- {\n    display: none;\n}\n  }\n\n/*\n * No Filters Styling\n *\n * When there are no filters, the search input is always visible.\n * ------------------------------------------------------------------------- */\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n  position: static;\n  visibility: visible;\n  width: auto;\n  opacity: 1;\n  transition: none;\n}\n\n@media (min-width: 768px) {\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n    max-width: 30%;\n}\n  }\n\n@media (--medium-screens-and-up) {\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n    max-width: 30%;\n}\n  }\n\n._3Pjrt42x454- ._9GlBktsUALw- {\n  display: none;\n}\n";
@@ -1231,6 +1232,7 @@ function DataList(_a) {
     const emptyStateComponents = getCompoundComponents(props.children, DataListEmptyState);
     const itemActionComponent = getCompoundComponent(props.children, DataListItemActions);
     const bulkActionsComponent = getCompoundComponent(props.children, DataListBulkActions);
+    const shouldRenderStickyHeader = !!filterComponent || !!searchComponent;
     return (React__default["default"].createElement(DataListContext.Provider, { value: Object.assign(Object.assign({ searchComponent,
             filterComponent,
             layoutComponents,
@@ -1243,7 +1245,7 @@ function DataList(_a) {
             registerLayout }, props), { selected, 
             // T !== DataListObject
             sorting: sorting }) },
-        React__default["default"].createElement(InternalDataList, null)));
+        React__default["default"].createElement(InternalDataList, { shouldRenderStickyHeader: shouldRenderStickyHeader })));
     function registerLayoutBreakpoints(size) {
         setLayoutBreakpoints(prev => sortBreakpoints([...prev, size]));
     }
@@ -1251,7 +1253,7 @@ function DataList(_a) {
         setLayouts(prev => (Object.assign(Object.assign({}, prev), { [size]: children })));
     }
 }
-function InternalDataList() {
+function InternalDataList({ shouldRenderStickyHeader, }) {
     const { data, title, totalCount, loadingState = "none", layoutComponents, } = useDataListContext();
     const backToTopRef = React.useRef(null);
     const initialLoading = loadingState === "initial";
@@ -1262,12 +1264,12 @@ function InternalDataList() {
             title && React__default["default"].createElement(Heading.Heading, { level: 3 }, title),
             React__default["default"].createElement(DataListTotalCount, { totalCount: totalCount, loading: initialLoading })),
         React__default["default"].createElement("div", { ref: backToTopRef }),
-        React__default["default"].createElement(DataListStickyHeader, null,
+        shouldRenderStickyHeader && (React__default["default"].createElement(DataListStickyHeader, null,
             React__default["default"].createElement("div", { className: styles$g.headerFilters },
                 React__default["default"].createElement(InternalDataListFilters, null),
                 React__default["default"].createElement(InternalDataListSearch, null)),
             React__default["default"].createElement(InternalDataListStatusBar, null),
-            React__default["default"].createElement(DataListHeader, null)),
+            React__default["default"].createElement(DataListHeader, null))),
         initialLoading && React__default["default"].createElement(DataListLoadingState, null),
         showEmptyState && React__default["default"].createElement(InternalDataListEmptyState, null),
         layoutComponents,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.79.1",
+  "version": "4.79.2-JOB-88844-.5+b7447611",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,7 +20,7 @@
   ],
   "dependencies": {
     "@jobber/design": "^0.53.0",
-    "@jobber/formatters": "*",
+    "@jobber/formatters": "^0.2.2",
     "@jobber/hooks": "^2.8.2",
     "@popperjs/core": "^2.0.6",
     "@std-proposal/temporal": "0.0.1",
@@ -84,5 +84,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "78a7f41466245e133f4966509bea0e4121c3e77c"
+  "gitHead": "b74476111dae7c641dcd2acae08dbf2aa4c45e69"
 }