@jobber/components-native 0.105.4 → 0.105.5-contentove-4cd673f.10

package/dist/docs/Chip/Chip.md

@@ -4,7 +4,7 @@ Chip is a flexible component that can be used for
 
 * inline single- or multi-selection of items
 * triggering filtering and selection components like
-  [Combobox](/components/Combobox)
+  [FilterPicker](/components/FilterPicker)
 * presenting grouped items that can be added or removed
 
 ```tsx
@@ -236,8 +236,8 @@ export function ChipInvalidExample(
 
 * [Chips](/components/Chips) is a convenience wrapper that offers the
   single-select, multi-select, and add/dismiss functionality "out of the box"
-* [Combobox](/components/Combobox) is most commonly triggered by a Chip, but is
-  a separate component
+* [FilterPicker](/components/FilterPicker) is most commonly triggered by a Chip,
+  but is a separate component
 * [Select](../Select/Select.md) is a simpler single-select "dropdown" that
   presents as a form element and should be preferred in forms
 * [RadioGroup](/components/RadioGroup) should be used to allow the user to
@@ -256,7 +256,7 @@ ideally 1–2 words. If any of the options in the group may have longer labels,
 consider Checkbox or Radio as necessary for your selection type.
 
 In cases where a Chip displays name of its selections, such as when used to
-trigger a Combobox or a date range selector, use the heading to identify the
+trigger a FilterPicker or a date range selector, use the heading to identify the
 "category" and the label to identify the selected items.
 
 ## Accessibility

package/dist/docs/ContentOverlay/ContentOverlay.md

@@ -50,6 +50,7 @@ where it will be a maximum width of 640px and be centered on the screen.
 | `children` | `ReactNode` | Yes | — | Content to be passed into the overlay |
 | `accessibilityLabel` | `string` | No | `"Close {title} modal"` | Optional accessibilityLabel describing the overlay. This will read out when the overlay is opened. |
 | `adjustToContentHeight` | `boolean` | No | `false` | If true, automatically adjusts the overlay height to the content height. This will disable the ability to drag the ov... |
+| `footerComponent` | `ReactNode` | No | `undefined` | Content pinned to the bottom of the overlay, above the keyboard — e.g. a persistent search input (results scroll abov... |
 | `fullScreen` | `boolean` | No | `false` | Force overlay height to fill the screen. Width not impacted. |
 | `isDraggable` | `boolean` | No | `true` | If false, hides the handle and turns off dragging. |
 | `keyboardShouldPersistTaps` | `boolean` | No | `false` | Allows taps to be registered behind keyboard if enabled |

package/dist/docs/usage-guidelines/usage-guidelines.md

@@ -17,10 +17,10 @@ deprecated.
 
 ## Deprecated components — do not use
 
-| Deprecated            | Replacement                                        | Notes                                    |
-| --------------------- | -------------------------------------------------- | ---------------------------------------- |
-| `MultiSelect`         | `Autocomplete` with `multiple` prop, or `Combobox` | Fully deprecated, no longer supported.   |
-| `Chips` (dismissible) | `Autocomplete` with `multiple` prop                | Dismissible Chips variant is deprecated. |
+| Deprecated            | Replacement                                            | Notes                                    |
+| --------------------- | ------------------------------------------------------ | ---------------------------------------- |
+| `MultiSelect`         | `Autocomplete` with `multiple` prop, or `FilterPicker` | Fully deprecated, no longer supported.   |
+| `Chips` (dismissible) | `Autocomplete` with `multiple` prop                    | Dismissible Chips variant is deprecated. |
 
 ### Deprecated props on still-supported components
 
@@ -77,7 +77,7 @@ parent reads its compound children to wire up state, accessibility, and styling.
 | `Modal` v2              | `Modal.Provider`, `Modal.Activator`, `Modal.Content`, `Modal.Header`, `Modal.Actions`                                                                                                                                                                                                        | Wrap with `Modal.Provider`. `Modal.Header` and `Modal.Actions` must be **direct children** of `Modal.Content` for sticky behavior to work. Use `Modal.Activator` to control focus return when the trigger element unmounts.                                                                                                  |
 | `Banner`                | `Banner.Provider`, `Banner.Content`, `Banner.Icon`, `Banner.DismissButton`, `Banner.Action`                                                                                                                                                                                                  | Either the simple `<Banner type="...">children</Banner>` form, or the Provider form: `Banner.Provider` > `Banner.Content` (+ optional `Banner.Icon` / `Banner.Action` / `Banner.DismissButton`).                                                                                                                             |
 | `Card`                  | `Card.Header`, `Card.Body`                                                                                                                                                                                                                                                                   | `Card` > `Card.Header` + `Card.Body`. The legacy `header` string/element prop still works for simple cases. Use composition for any header that needs richer markup.                                                                                                                                                         |
-| `Combobox`              | `Combobox.Activator`, `Combobox.Option`, `Combobox.Action`                                                                                                                                                                                                                                   | `Combobox` > optional `Combobox.Activator`, one or more `Combobox.Option`, optional `Combobox.Action`. Omitting `Combobox.Activator` renders the default activator.                                                                                                                                                          |
+| `FilterPicker`          | `FilterPicker.Activator`, `FilterPicker.Option`, `FilterPicker.Action`                                                                                                                                                                                                                       | `FilterPicker` > optional `FilterPicker.Activator`, one or more `FilterPicker.Option`, optional `FilterPicker.Action`. Omitting `FilterPicker.Activator` renders the default activator.                                                                                                                                      |
 | `DataTable`             | `DataTable.Container`, `DataTable.Table`, `DataTable.Header`, `DataTable.HeaderCell`, `DataTable.SortableHeader`, `DataTable.Body`, `DataTable.Row`, `DataTable.Cell`, `DataTable.RowActions`, `DataTable.Actions`, `DataTable.Footer`, `DataTable.Pagination`, `DataTable.PaginationButton` | `DataTable.Footer` is a sibling of `DataTable.Body`, not a child. Place pagination outside the table (not inside the footer). For `layout="fixed"`, pass explicit widths via `style={{ width: "..." }}` on each `HeaderCell`.                                                                                                |
 | `Menu` (web composable) | `Menu.Trigger`, `Menu.Content`, `Menu.Section`, `Menu.Header`, `Menu.HeaderLabel`, `Menu.Item`, `Menu.ItemIcon`, `Menu.ItemLabel`, `Menu.Separator`                                                                                                                                          | `Menu` > `Menu.Trigger` + `Menu.Content` containing `Menu.Item`s (optionally grouped in `Menu.Section`s). Each `Menu.Item` must include `textValue` for type-ahead and screen readers.                                                                                                                                       |
 | `Page`                  | `Page.Header`, `Page.HeaderContent`, `Page.TitleBar`, `Page.Title`, `Page.Subtitle`, `Page.Intro`, `Page.Actions`, `Page.ActionPrimary`, `Page.ActionSecondary`, `Page.ActionMenu`, `Page.PrimaryButton`, `Page.SecondaryButton`, `Page.Menu`, `Page.Body`                                   | Composable `Page` API: `Page` > `Page.Header` (containing `Page.HeaderContent` with `Page.TitleBar` > `Page.Title` / `Page.Subtitle`, and `Page.Actions` with `Page.ActionPrimary` / `Page.ActionSecondary` / `Page.ActionMenu`) + `Page.Body`. The legacy props-based API (`title`, `subtitle`, `intro`, etc.) still works. |

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.105.4",
+    "version": "0.105.5-contentove-4cd673f.10+4cd673ff",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -122,5 +122,5 @@
         "react-native-screens": ">=4.18.0",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "7fb12fadcd1c5e1440bccccae13dd29cf74dae28"
+    "gitHead": "4cd673ff20841cf9e6ea375cf0577310ffaae365"
 }

package/dist/src/ContentOverlay/ContentOverlay.js

@@ -12,11 +12,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { createContext, useContext, useImperativeHandle, useMemo, useRef, useState, } from "react";
 import { AccessibilityInfo, Platform, View, findNodeHandle, useWindowDimensions, } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { BottomSheetBackdrop, BottomSheetModal, BottomSheetView, } from "@gorhom/bottom-sheet";
+import { BottomSheetBackdrop, BottomSheetModal, BottomSheetScrollView, BottomSheetView, } from "@gorhom/bottom-sheet";
 import { FullWindowOverlay } from "react-native-screens";
 import { BottomSheetKeyboardAwareScrollView } from "./BottomSheetKeyboardAwareScrollView";
 import { useStyles } from "./ContentOverlay.style";
 import { useBottomSheetModalBackHandler } from "./hooks/useBottomSheetModalBackHandler";
+import { useKeyboardVisibility } from "./hooks/useKeyboardVisibility";
 import { computeContentOverlayBehavior } from "./computeContentOverlayBehavior";
 import { KEYBOARD_TOP_PADDING_AUTO_SCROLL } from "./constants";
 import { useIsScreenReaderEnabled } from "../hooks";
@@ -46,8 +47,9 @@ function getModalBackgroundColor(variation, tokens) {
     }
 }
 // eslint-disable-next-line max-statements
-export function ContentOverlay({ children, title, accessibilityLabel, fullScreen = false, showDismiss = false, isDraggable = true, adjustToContentHeight = false, keyboardShouldPersistTaps = false, scrollEnabled = false, modalBackgroundColor = "surface", onClose, onOpen, onBeforeExit, loading = false, ref, }) {
+export function ContentOverlay({ children, title, accessibilityLabel, fullScreen = false, showDismiss = false, isDraggable = true, adjustToContentHeight = false, keyboardShouldPersistTaps = false, scrollEnabled = false, modalBackgroundColor = "surface", footerComponent, onClose, onOpen, onBeforeExit, loading = false, ref, }) {
     const insets = useSafeAreaInsets();
+    const { isKeyboardVisible } = useKeyboardVisibility();
     const { width: windowWidth } = useWindowDimensions();
     const bottomSheetModalRef = useRef(null);
     const previousIndexRef = useRef(-1);
@@ -68,18 +70,22 @@ export function ContentOverlay({ children, title, accessibilityLabel, fullScreen
     });
     const effectiveIsDraggable = behavior.isDraggable;
     const shouldShowDismiss = behavior.showDismiss;
+    const hasHeader = Boolean(title || shouldShowDismiss);
+    const stickyHeaderIndices = hasHeader ? [0] : undefined;
     const isCloseableOnOverlayTap = onBeforeExit === undefined;
     // Prevent the Overlay from being flush with the top of the screen, even if we are "100%" or "fullscreen"
     const topInset = insets.top || tokens["space-larger"];
     const [showHeaderShadow, setShowHeaderShadow] = useState(false);
     const overlayHeader = useRef(null);
     const scrollViewRef = useRef(null);
+    const hasFooter = footerComponent !== undefined;
     // enableDynamicSizing will add another snap point of the content height
     const snapPoints = useMemo(() => {
-        // There is a bug with "restore" behavior after keyboard is dismissed.
+        // There is a bug with "restore" behavior after the keyboard is dismissed.
         // https://github.com/gorhom/react-native-bottom-sheet/issues/2465
-        // providing a 100% snap point "fixes" it for now, but there is an approved PR to fix it
-        // that just needs to be merged and released: https://github.com/gorhom/react-native-bottom-sheet/pull/2511
+        // Providing a 100% snap point "fixes" it for now. The upstream fix
+        // (https://github.com/gorhom/react-native-bottom-sheet/pull/2511) was
+        // closed without merging, so there is no released fix to wait for.
         return ["100%"];
     }, []);
     const onCloseController = () => {
@@ -174,8 +180,16 @@ export function ContentOverlay({ children, title, accessibilityLabel, fullScreen
     const backdropComponent = useMemo(() => function ContentOverlayBackdrop(props) {
         return (React.createElement(Backdrop, Object.assign({}, props, { pressBehavior: isCloseableOnOverlayTap ? "close" : "none" })));
     }, [isCloseableOnOverlayTap]);
-    return (React.createElement(BottomSheetModal, { ref: bottomSheetModalRef, containerComponent: Platform.OS === "ios" ? Container : undefined, onChange: handleChange, style: sheetStyle, backgroundStyle: backgroundStyle, handleStyle: styles.handleWrapper, handleIndicatorStyle: handleIndicatorStyles, backdropComponent: backdropComponent, snapPoints: snapPoints, enablePanDownToClose: effectiveIsDraggable, enableContentPanningGesture: effectiveIsDraggable, enableHandlePanningGesture: effectiveIsDraggable, enableDynamicSizing: behavior.initialHeight === "contentHeight", keyboardBehavior: "interactive", keyboardBlurBehavior: "restore", topInset: topInset, onDismiss: () => onClose === null || onClose === void 0 ? void 0 : onClose() },
-        React.createElement(ContentOverlayKeyboardContext.Provider, { value: scrollEnabled }, scrollEnabled ? (React.createElement(BottomSheetKeyboardAwareScrollView, { ref: scrollViewRef, contentContainerStyle: { paddingBottom: insets.bottom }, keyboardShouldPersistTaps: keyboardShouldPersistTaps ? "handled" : "never", showsVerticalScrollIndicator: false, onScroll: handleOnScroll, stickyHeaderIndices: [0], bottomOffset: KEYBOARD_TOP_PADDING_AUTO_SCROLL },
+    return (React.createElement(BottomSheetModal, { ref: bottomSheetModalRef, containerComponent: Platform.OS === "ios" ? Container : undefined, onChange: handleChange, style: sheetStyle, backgroundStyle: backgroundStyle, handleStyle: styles.handleWrapper, handleIndicatorStyle: handleIndicatorStyles, backdropComponent: backdropComponent, snapPoints: snapPoints, enablePanDownToClose: effectiveIsDraggable, enableContentPanningGesture: effectiveIsDraggable || scrollEnabled, enableHandlePanningGesture: effectiveIsDraggable, enableDynamicSizing: behavior.initialHeight === "contentHeight", keyboardBehavior: "interactive", keyboardBlurBehavior: "restore", topInset: topInset, onDismiss: () => onClose === null || onClose === void 0 ? void 0 : onClose() },
+        React.createElement(ContentOverlayKeyboardContext.Provider, { value: scrollEnabled && !hasFooter }, hasFooter ? (React.createElement(View, { style: { flex: 1 } },
+            scrollEnabled ? (React.createElement(BottomSheetScrollView, { ref: scrollViewRef, style: { flex: 1 }, keyboardShouldPersistTaps: keyboardShouldPersistTaps ? "handled" : "never", showsVerticalScrollIndicator: false, onScroll: handleOnScroll, stickyHeaderIndices: stickyHeaderIndices },
+                renderHeader(),
+                React.createElement(View, { testID: "ATL-Overlay-Children" }, children))) : (React.createElement(BottomSheetView, { style: { flex: 1 } },
+                renderHeader(),
+                React.createElement(View, { testID: "ATL-Overlay-Children" }, children))),
+            React.createElement(View, { style: {
+                    paddingBottom: isKeyboardVisible ? 0 : insets.bottom,
+                } }, footerComponent))) : scrollEnabled ? (React.createElement(BottomSheetKeyboardAwareScrollView, { ref: scrollViewRef, contentContainerStyle: { paddingBottom: insets.bottom }, keyboardShouldPersistTaps: keyboardShouldPersistTaps ? "handled" : "never", showsVerticalScrollIndicator: false, onScroll: handleOnScroll, stickyHeaderIndices: stickyHeaderIndices, bottomOffset: KEYBOARD_TOP_PADDING_AUTO_SCROLL },
             renderHeader(),
             React.createElement(View, { testID: "ATL-Overlay-Children" }, children))) : (React.createElement(BottomSheetView, null,
             renderHeader(),

package/dist/src/ContentOverlay/ContentOverlay.test.js

@@ -295,3 +295,38 @@ describe("title prop", () => {
         }));
     });
 });
+describe("when a footerComponent is provided", () => {
+    function renderWithFooter() {
+        const contentOverlayRef = createRef();
+        render(React.createElement(AtlantisOverlayProvider, null,
+            React.createElement(View, null,
+                React.createElement(Button, { label: "Open Content Overlay", onPress: () => { var _a, _b; return (_b = (_a = contentOverlayRef.current) === null || _a === void 0 ? void 0 : _a.open) === null || _b === void 0 ? void 0 : _b.call(_a); } }),
+                React.createElement(ContentOverlay, { ref: contentOverlayRef, adjustToContentHeight: true, scrollEnabled: true, onOpen: jest.fn(), footerComponent: React.createElement(Text, null, "Search team") },
+                    React.createElement(Content, null,
+                        React.createElement(Text, null, "Marty Fayes"))))));
+        return contentOverlayRef;
+    }
+    function openWithFooter() {
+        return __awaiter(this, void 0, void 0, function* () {
+            jest.useFakeTimers();
+            renderWithFooter();
+            yield user.press(screen.getByLabelText("Open Content Overlay"));
+            yield act(() => __awaiter(this, void 0, void 0, function* () {
+                jest.runAllTimers();
+            }));
+        });
+    }
+    it("renders the footer content alongside the body content", () => __awaiter(void 0, void 0, void 0, function* () {
+        yield openWithFooter();
+        yield waitFor(() => {
+            expect(screen.getByText("Search team")).toBeDefined();
+            expect(screen.getByText("Marty Fayes")).toBeDefined();
+        });
+    }));
+    it("still exposes the overlay body content container", () => __awaiter(void 0, void 0, void 0, function* () {
+        yield openWithFooter();
+        yield waitFor(() => {
+            expect(screen.getByTestId("ATL-Overlay-Children")).toBeDefined();
+        });
+    }));
+});