@jobber/components-native 0.105.4 → 0.105.5-contentove-a24d18c.6

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/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-a24d18c.6+a24d18c5",
     "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": "a24d18c5b55ad4dcee34ba37652c831b13f89928"
 }

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, snapPoints: snapPointsProp, 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,20 +70,47 @@ export function ContentOverlay({ children, title, accessibilityLabel, fullScreen
     });
     const effectiveIsDraggable = behavior.isDraggable;
     const shouldShowDismiss = behavior.showDismiss;
+    // renderHeader() only renders when there's a title or dismiss button. Making a
+    // null first child "sticky" breaks the scroll view (phantom sticky layer that
+    // blocks scrolling), so only set sticky header indices when a header exists.
+    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);
+    // Footer/list pattern: footerComponent is rendered by us as the bottom row of
+    // a flex column (see the body below), not via gorhom's footer. gorhom owns the
+    // keyboard — the footer input registers with it, so focusing it lifts the whole
+    // sheet above the keyboard, carrying the footer with it. See OpenSpec change
+    // contentoverlay-footer-and-scroll-fix (design.md D1).
+    const hasFooter = footerComponent !== undefined;
+    const isContentHeight = behavior.initialHeight === "contentHeight";
+    const hasCustomSnapPoints = snapPointsProp !== undefined && snapPointsProp.length > 0;
     // enableDynamicSizing will add another snap point of the content height
     const snapPoints = useMemo(() => {
-        // There is a bug with "restore" behavior after keyboard is dismissed.
+        // A consumer-provided snap point gives the overlay a stable, fixed height
+        // (dynamic sizing is turned off below). This generalizes the hardcoded
+        // ["100%"]: any explicit detent also satisfies gorhom's keyboard "restore".
+        if (hasCustomSnapPoints) {
+            return snapPointsProp;
+        }
+        // Only drop the ["100%"] workaround in the footer path WHEN dynamic sizing
+        // is actually on — gorhom then provides the content-height detent. If we
+        // dropped it without dynamic sizing (e.g. footer + fullScreen) the sheet
+        // would have no detents at all.
+        if (hasFooter && isContentHeight) {
+            return undefined;
+        }
+        // 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%"];
-    }, []);
+    }, [hasCustomSnapPoints, snapPointsProp, hasFooter, isContentHeight]);
     const onCloseController = () => {
         var _a;
         if (!onBeforeExit) {
@@ -174,8 +203,30 @@ 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, 
+        // A scrollable body (gorhom's BottomSheetScrollView/KASV) only wires up its
+        // scroll gesture when content panning is enabled, so it must stay on even
+        // when the sheet itself isn't draggable — otherwise the list won't scroll.
+        // Drag-to-dismiss is still gated by enablePanDownToClose/handle panning.
+        enableContentPanningGesture: effectiveIsDraggable || scrollEnabled, enableHandlePanningGesture: effectiveIsDraggable, enableDynamicSizing: !hasCustomSnapPoints && isContentHeight, keyboardBehavior: "interactive", keyboardBlurBehavior: "restore", topInset: topInset, onDismiss: () => onClose === null || onClose === void 0 ? void 0 : onClose() },
+        React.createElement(ContentOverlayKeyboardContext.Provider, { value: scrollEnabled && !hasFooter }, hasFooter ? (
+        // Footer/list pattern: footerComponent is the bottom row of a flex
+        // column, so it stays pinned to the bottom of the sheet while the body
+        // scrolls above it. gorhom's interactive keyboardBehavior lifts the
+        // whole sheet when the footer input is focused, carrying the footer
+        // above the keyboard — no gorhom BottomSheetFooter needed.
+        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: {
+                    // Only reserve the safe-area inset when the keyboard is hidden;
+                    // while it's open the keyboard already bounds the bottom, so the
+                    // inset would just add a gap between the footer and the keyboard.
+                    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();
+        });
+    }));
+});