@utilitywarehouse/hearth-react-native 0.27.3 → 0.28.0-testid-fix-1

package/.turbo/turbo-build.log

@@ -1,4 +1,5 @@
-
-> @utilitywarehouse/hearth-react-native@0.27.3 build /home/runner/work/hearth/hearth/packages/react-native
-> tsc
-
+
+
+> @utilitywarehouse/hearth-react-native@0.28.0-testid-fix-1 build /Users/filmondaniels/Projects/Work/hearth/packages/react-native
+> tsc
+

package/.turbo/turbo-lint.log

@@ -1,69 +1,70 @@
-
-> @utilitywarehouse/hearth-react-native@0.27.3 lint /home/runner/work/hearth/hearth/packages/react-native
-> TIMING=1 eslint .
-
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Carousel/Carousel.context.tsx
-  6:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Carousel/Carousel.tsx
-  146:6  warning  React Hook useMemo has a missing dependency: 'hasCarouselControlsInTree'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePicker.tsx
-  109:6  warning  React Hook useCallback has an unnecessary dependency: 'modalRef.current'. Either exclude it or remove the dependency array. Mutable values like 'modalRef.current' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
-  259:6  warning  React Hook useEffect has a missing dependency: 'initialState'. Either include it or remove the dependency array                                                                                                                                     react-hooks/exhaustive-deps
-  346:6  warning  React Hook useEffect has a missing dependency: 'onChange'. Either include it or remove the dependency array                                                                                                                                         react-hooks/exhaustive-deps
-  468:5  warning  React Hook useCallback has a missing dependency: 'onChange'. Either include it or remove the dependency array                                                                                                                                       react-hooks/exhaustive-deps
-  536:6  warning  React Hook useEffect has a missing dependency: 'onSelectMonth'. Either include it or remove the dependency array                                                                                                                                    react-hooks/exhaustive-deps
-  542:6  warning  React Hook useEffect has a missing dependency: 'onSelectYear'. Either include it or remove the dependency array                                                                                                                                     react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePickerDay.tsx
-  76:6  warning  React Hook useMemo has an unnecessary dependency: 'styles.rangeRoot'. Either exclude it or remove the dependency array. Outer scope values like 'styles.rangeRoot' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
-  84:6  warning  React Hook useMemo has a missing dependency: 'isSelected'. Either include it or remove the dependency array                                                                                                                                         react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePickerDays.tsx
-  179:6  warning  React Hook useMemo has unnecessary dependencies: 'month' and 'year'. Either exclude them or remove the dependency array  react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/DatePicker/DatePickerYears.tsx
-  52:6  warning  React Hook useCallback has a missing dependency: 'containerHeight'. Either include it or remove the dependency array. Outer scope values like 'styles' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Input/Input.tsx
-  78:8  warning  React Hook useEffect has a missing dependency: 'formFieldContext'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Modal/Modal.tsx
-   93:6  warning  React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
-  330:5  warning  React Hook useCallback has a missing dependency: 'footer'. Either include it or remove the dependency array                                                                                                                                   react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Modal/Modal.web.tsx
-  66:6  warning  React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/PillGroup/PillGroup.tsx
-  17:9  warning  The 'normalizedValue' conditional could make the dependencies of useMemo Hook (at line 33) change on every render. Move it inside the useMemo callback. Alternatively, wrap the initialization of 'normalizedValue' in its own useMemo() Hook  react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Tabs/Tabs.tsx
-   53:6   warning  React Hook useEffect has a missing dependency: 'tabValues'. Either include it or remove the dependency array                              react-hooks/exhaustive-deps
-   53:7   warning  React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked  react-hooks/exhaustive-deps
-  104:5   warning  React Hook useMemo has an unnecessary dependency: 'tabValues'. Either exclude it or remove the dependency array                           react-hooks/exhaustive-deps
-  127:62  warning  React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked  react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Textarea/Textarea.tsx
-  45:6  warning  React Hook useEffect has a missing dependency: 'formFieldContext'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
-
-/home/runner/work/hearth/hearth/packages/react-native/src/components/Toast/Toast.context.tsx
-   14:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
-  106:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
-
-✖ 24 problems (0 errors, 24 warnings)
-
-Rule                                      | Time (ms) | Relative
-:-----------------------------------------|----------:|--------:
-@typescript-eslint/no-unused-vars         |  1647.829 |    61.5%
-react-hooks/exhaustive-deps               |   126.846 |     4.7%
-no-global-assign                          |    85.087 |     3.2%
-react-hooks/rules-of-hooks                |    75.260 |     2.8%
-no-misleading-character-class             |    68.283 |     2.6%
-no-unexpected-multiline                   |    54.599 |     2.0%
-@typescript-eslint/ban-ts-comment         |    52.506 |     2.0%
-no-useless-escape                         |    31.809 |     1.2%
-no-loss-of-precision                      |    30.517 |     1.1%
-@typescript-eslint/triple-slash-reference |    29.522 |     1.1%
+
+
+> @utilitywarehouse/hearth-react-native@0.27.2 lint /Users/filmondaniels/Projects/Work/hearth/packages/react-native
+> TIMING=1 eslint .
+
+
+/Users/filmondaniels/Projects/Work/hearth/packages/react-native/src/components/Carousel/Carousel.context.tsx
+  6:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
+
+/Users/filmondaniels/Projects/Work/hearth/packages/react-native/src/components/Carousel/Carousel.tsx
+  146:6  warning  React Hook useMemo has a missing dependency: 'hasCarouselControlsInTree'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
+
+/Users/filmondaniels/Projects/Work/hearth/packages/react-native/src/components/DatePicker/DatePicker.tsx
+  109:6  warning  React Hook useCallback has an unnecessary dependency: 'modalRef.current'. Either exclude it or remove the dependency array. Mutable values like 'modalRef.current' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
+  259:6  warning  React Hook useEffect has a missing dependency: 'initialState'. Either include it or remove the dependency array                                                                                                                                     react-hooks/exhaustive-deps
+  346:6  warning  React Hook useEffect has a missing dependency: 'onChange'. Either include it or remove the dependency array                                                                                                                                         react-hooks/exhaustive-deps
+  468:5  warning  React Hook useCallback has a missing dependency: 'onChange'. Either include it or remove the dependency array                                                                                                                                       react-hooks/exhaustive-deps
+  536:6  warning  React Hook useEffect has a missing dependency: 'onSelectMonth'. Either include it or remove the dependency array                                                                                                                                    react-hooks/exhaustive-deps
+  542:6  warning  React Hook useEffect has a missing dependency: 'onSelectYear'. Either include it or remove the dependency array                                                                                                                                     react-hooks/exhaustive-deps
+
+/Users/filmondaniels/Projects/Work/hearth/packages/react-native/src/components/DatePicker/DatePickerDay.tsx
+  76:6  warning  React Hook useMemo has an unnecessary dependency: 'styles.rangeRoot'. Either exclude it or remove the dependency array. Outer scope values like 'styles.rangeRoot' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
+  84:6  warning  React Hook useMemo has a missing dependency: 'isSelected'. Either include it or remove the dependency array                                                                                                                                         react-hooks/exhaustive-deps
+
+/Users/filmondaniels/Projects/Work/hearth/packages/react-native/src/components/DatePicker/DatePickerDays.tsx
+  179:6  warning  React Hook useMemo has unnecessary dependencies: 'month' and 'year'. Either exclude them or remove the dependency array  react-hooks/exhaustive-deps
+
+/Users/filmondaniels/Projects/Work/hearth/packages/react-native/src/components/DatePicker/DatePickerYears.tsx
+  52:6  warning  React Hook useCallback has a missing dependency: 'containerHeight'. Either include it or remove the dependency array. Outer scope values like 'styles' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
+
+/Users/filmondaniels/Projects/Work/hearth/packages/react-native/src/components/Input/Input.tsx
+  78:8  warning  React Hook useEffect has a missing dependency: 'formFieldContext'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
+
+/Users/filmondaniels/Projects/Work/hearth/packages/react-native/src/components/Modal/Modal.tsx
+   93:6  warning  React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
+  330:5  warning  React Hook useCallback has a missing dependency: 'footer'. Either include it or remove the dependency array                                                                                                                                   react-hooks/exhaustive-deps
+
+/Users/filmondaniels/Projects/Work/hearth/packages/react-native/src/components/Modal/Modal.web.tsx
+  66:6  warning  React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
+
+/Users/filmondaniels/Projects/Work/hearth/packages/react-native/src/components/PillGroup/PillGroup.tsx
+  17:9  warning  The 'normalizedValue' conditional could make the dependencies of useMemo Hook (at line 33) change on every render. Move it inside the useMemo callback. Alternatively, wrap the initialization of 'normalizedValue' in its own useMemo() Hook  react-hooks/exhaustive-deps
+
+/Users/filmondaniels/Projects/Work/hearth/packages/react-native/src/components/Tabs/Tabs.tsx
+   53:6   warning  React Hook useEffect has a missing dependency: 'tabValues'. Either include it or remove the dependency array                              react-hooks/exhaustive-deps
+   53:7   warning  React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked  react-hooks/exhaustive-deps
+  104:5   warning  React Hook useMemo has an unnecessary dependency: 'tabValues'. Either exclude it or remove the dependency array                           react-hooks/exhaustive-deps
+  127:62  warning  React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked  react-hooks/exhaustive-deps
+
+/Users/filmondaniels/Projects/Work/hearth/packages/react-native/src/components/Textarea/Textarea.tsx
+  45:6  warning  React Hook useEffect has a missing dependency: 'formFieldContext'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
+
+/Users/filmondaniels/Projects/Work/hearth/packages/react-native/src/components/Toast/Toast.context.tsx
+   14:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
+  106:14  warning  Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components  react-refresh/only-export-components
+
+✖ 24 problems (0 errors, 24 warnings)
+
+Rule                                      | Time (ms) | Relative
+:-----------------------------------------|----------:|--------:
+@typescript-eslint/no-unused-vars         |   436.390 |    62.5%
+react-hooks/exhaustive-deps               |    28.433 |     4.1%
+no-global-assign                          |    25.595 |     3.7%
+react-hooks/rules-of-hooks                |    20.152 |     2.9%
+@typescript-eslint/ban-ts-comment         |    17.023 |     2.4%
+no-misleading-character-class             |    12.606 |     1.8%
+@typescript-eslint/no-unused-expressions  |     9.189 |     1.3%
+no-unexpected-multiline                   |     8.943 |     1.3%
+@typescript-eslint/triple-slash-reference |     8.378 |     1.2%
+no-loss-of-precision                      |     8.049 |     1.2%

package/CHANGELOG.md

@@ -1,5 +1,115 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.28.0
+
+### Minor Changes
+
+- [#1014](https://github.com/utilitywarehouse/hearth/pull/1014) [`c10ff82`](https://github.com/utilitywarehouse/hearth/commit/c10ff82243265217acd95f687d48d803b3c7a4bd) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `Combobox` and `SafeAreaView` to the React Native library
+
+  The React Native package now includes a `Combobox` component for searchable selection in a bottom sheet, plus a `SafeAreaView` primitive that applies Unistyles runtime insets only when a view actually overlaps a screen edge. `Combobox` supports the built-in options API for fixed lists, controlled search values for dynamic results, and custom bottom sheet content for cases where you need to bring your own `BottomSheetFlatList` or bespoke option layout. `Modal` now uses `SafeAreaView` in its full-screen navigation modal path so content like search inputs no longer sits behind the dynamic island on iOS.
+
+  **Components affected**:
+  - `Combobox`
+  - `ComboboxOption`
+  - `SafeAreaView`
+  - `Modal`
+
+  **Developer changes**:
+
+  Import the new components from `@utilitywarehouse/hearth-react-native` and choose the API that fits your layout. Use `options` for straightforward searchable lists, render custom sheet content when you need virtualised or dynamic results, and wrap full-screen content in `SafeAreaView` when it should only pick up edge insets if it actually touches that edge.
+
+- [`8e37595`](https://github.com/utilitywarehouse/hearth/commit/8e375958559357ce5c1703505fa7438887d9e18e) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `Pagination` component
+
+  The package now includes a `Pagination` component for moving between pages of content. It supports numbered pagination, a condensed layout for smaller spaces, optional skip buttons for jumping to the first and last page, and controlled page state so it can be wired into lists, tables, or other paged views.
+
+  **Components affected**:
+  - `Pagination`
+
+  **Developer changes**:
+
+  Import `Pagination` from `@utilitywarehouse/hearth-react-native` and control the current page in your screen or feature state.
+
+  ```tsx
+  import { useState } from 'react';
+  import { Pagination } from '@utilitywarehouse/hearth-react-native';
+
+  const MyComponent = () => {
+    const [page, setPage] = useState(1);
+
+    return <Pagination currentPage={page} onPageChange={setPage} totalPages={10} />;
+  };
+  ```
+
+- [`8e37595`](https://github.com/utilitywarehouse/hearth/commit/8e375958559357ce5c1703505fa7438887d9e18e) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `Table` component
+
+  The package now includes a composable `Table` API for presenting structured data with headers, rows, cells, optional card-style containers, horizontal scrolling for narrow viewports, configurable column widths, and pagination support through `TablePagination`. Header cells support trailing actions such as sort controls, and the API is split into smaller building blocks so layouts can be assembled to fit different datasets.
+
+  **Components affected**:
+  - `Table`
+  - `TableHeader`
+  - `TableHeaderCell`
+  - `TableBody`
+  - `TableRow`
+  - `TableCell`
+  - `TablePagination`
+
+  **Developer changes**:
+
+  Import the table primitives from `@utilitywarehouse/hearth-react-native` and compose them to match your data shape. Add `columnWidths` when you need fixed or weighted columns, and pass `pagination` when rows should be paged.
+
+  ```tsx
+  import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHeader,
+    TableHeaderCell,
+    TableRow,
+  } from '@utilitywarehouse/hearth-react-native';
+
+  const MyComponent = () => (
+    <Table columnWidths={[180, '2fr', '1fr']} container="subtle">
+      <TableHeader color="purple">
+        <TableHeaderCell>Name</TableHeaderCell>
+        <TableHeaderCell>Email</TableHeaderCell>
+        <TableHeaderCell>Status</TableHeaderCell>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableHeaderCell row>Alex Morgan</TableHeaderCell>
+          <TableCell>alex@example.com</TableCell>
+          <TableCell>Active</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+  ```
+
+- [#1016](https://github.com/utilitywarehouse/hearth/pull/1016) [`33baa9e`](https://github.com/utilitywarehouse/hearth/commit/33baa9e8edb091bbd1d17c9a3838352a7f1b87ea) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Adds `Timeline` and `TimelineItem`
+
+  The package now includes `Timeline` and `TimelineItem` components for showing a sequence of static stops or progress steps. The new API supports labelled items, optional helper text, progress states for complete or active steps, and custom content within an item when you need to show extra context or actions.
+
+  **Components affected**:
+  - `Timeline`
+  - `TimelineItem`
+
+  **Developer changes**:
+
+  Import `Timeline` and `TimelineItem` from `@utilitywarehouse/hearth-react-native`. Use `variant="static"` for simple ordered events, or `variant="progress"` with item `state` values to communicate step progress.
+
+  ```tsx
+  import { Timeline, TimelineItem } from '@utilitywarehouse/hearth-react-native';
+
+  const MyComponent = () => (
+    <Timeline variant="progress">
+      <TimelineItem label="Ordered" helperText="We have received your order" state="complete" />
+      <TimelineItem label="Packed" helperText="Your items are ready" state="complete" />
+      <TimelineItem label="Out for delivery" helperText="Arriving today" state="active" />
+      <TimelineItem label="Delivered" helperText="Pending" state="incomplete" />
+    </Timeline>
+  );
+  ```
+
 ## 0.27.3
 
 ### Patch Changes

package/build/components/Combobox/Combobox.context.d.ts

@@ -0,0 +1,13 @@
+export interface ComboboxSelection {
+    label: string;
+    value: string;
+}
+export interface ComboboxContextValue {
+    close: () => void;
+    search: string;
+    selectedValue?: string | null;
+    selectOption: (option: ComboboxSelection) => void;
+    setSearch: (value: string) => void;
+}
+export declare const ComboboxContext: import("react").Context<ComboboxContextValue | undefined>;
+export declare const useComboboxContext: () => ComboboxContextValue;

package/build/components/Combobox/Combobox.context.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+export const ComboboxContext = createContext(undefined);
+export const useComboboxContext = () => {
+    const context = useContext(ComboboxContext);
+    if (!context) {
+        throw new Error('useComboboxContext must be used within a Combobox');
+    }
+    return context;
+};

package/build/components/Combobox/Combobox.d.ts

@@ -0,0 +1,6 @@
+import ComboboxProps from './Combobox.props';
+declare const Combobox: {
+    ({ options, value, onValueChange, inputValue, onInputValueChange, label, labelVariant, placeholder, searchPlaceholder, disabled, validationStatus, helperText, helperIcon, invalidText, validText, required, children, bottomSheetProps, menuHeading, noOptionsFoundText, listProps, loading, readonly, getValueLabel, filterOption, ...rest }: ComboboxProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Combobox;

package/build/components/Combobox/Combobox.js

@@ -0,0 +1,246 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CloseSmallIcon, SearchMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Pressable, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { useTheme } from '../../hooks';
+import { BodyText } from '../BodyText';
+import { BottomSheetFlatList, BottomSheetModal, BottomSheetView } from '../BottomSheet';
+import { DetailText } from '../DetailText';
+import { FormField, useFormFieldContext } from '../FormField';
+import { Icon } from '../Icon';
+import { Input } from '../Input';
+import { Spinner } from '../Spinner';
+import { UnstyledIconButton } from '../UnstyledIconButton';
+import { ComboboxContext } from './Combobox.context';
+import { SafeAreaView } from '../SafeAreaView';
+import ComboboxOption from './ComboboxOption';
+const DEFAULT_SNAP_POINTS = ['25%', '40%', '80%'];
+const Combobox = ({ options = [], value, onValueChange, inputValue, onInputValueChange, label, labelVariant = 'body', placeholder = 'Search', searchPlaceholder = 'Search', disabled = false, validationStatus = 'initial', helperText, helperIcon, invalidText, validText, required = true, children, bottomSheetProps, menuHeading, noOptionsFoundText = 'No options found', listProps, loading = false, readonly = false, getValueLabel, filterOption, ...rest }) => {
+    const formFieldContext = useFormFieldContext();
+    const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
+    const isRequired = formFieldContext?.required ?? required;
+    const isDisabled = formFieldContext?.disabled ?? disabled;
+    const isReadonly = formFieldContext?.readonly ?? readonly;
+    const { color } = useTheme();
+    const bottomSheetModalRef = useRef(null);
+    const searchInputRef = useRef(null);
+    const focusTimeoutRef = useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedChildLabel, setSelectedChildLabel] = useState(undefined);
+    const [uncontrolledInputValue, setUncontrolledInputValue] = useState('');
+    const isInputControlled = inputValue !== undefined;
+    const selectedOption = options.find(option => option.value === value);
+    useEffect(() => {
+        if (typeof children === 'function' || !children || selectedOption || !value || getValueLabel) {
+            setSelectedChildLabel(undefined);
+            return;
+        }
+        let nextLabel;
+        React.Children.forEach(children, child => {
+            if (!React.isValidElement(child) || nextLabel) {
+                return;
+            }
+            if (child.props.value === value) {
+                nextLabel = child.props.label;
+            }
+        });
+        setSelectedChildLabel(nextLabel);
+    }, [children, getValueLabel, selectedOption, value]);
+    const selectedLabel = useMemo(() => {
+        return getValueLabel?.(value) || selectedOption?.label || selectedChildLabel || '';
+    }, [getValueLabel, selectedChildLabel, selectedOption?.label, value]);
+    useEffect(() => {
+        if (isInputControlled) {
+            return;
+        }
+        setUncontrolledInputValue(selectedLabel);
+    }, [isInputControlled, selectedLabel]);
+    useEffect(() => {
+        return () => {
+            if (focusTimeoutRef.current) {
+                clearTimeout(focusTimeoutRef.current);
+            }
+        };
+    }, []);
+    const search = isInputControlled ? (inputValue ?? '') : uncontrolledInputValue;
+    const accessibilityLabel = useMemo(() => {
+        if (!label) {
+            return undefined;
+        }
+        return isRequired ? `${label}, required` : label;
+    }, [isRequired, label]);
+    const accessibilityHint = useMemo(() => {
+        const hints = [];
+        if (helperText) {
+            hints.push(helperText);
+        }
+        if (validationStatusFromContext === 'invalid' && invalidText) {
+            hints.push(invalidText);
+        }
+        if (validationStatusFromContext === 'valid' && validText) {
+            hints.push(validText);
+        }
+        return hints.length > 0 ? hints.join(', ') : undefined;
+    }, [helperText, invalidText, validText, validationStatusFromContext]);
+    styles.useVariants({
+        disabled: isDisabled,
+        hasValue: search.length > 0,
+        readonly: isReadonly,
+        validationStatus: validationStatusFromContext,
+    });
+    const setSearch = useCallback((nextValue) => {
+        if (!isInputControlled) {
+            setUncontrolledInputValue(nextValue);
+        }
+        onInputValueChange?.(nextValue);
+    }, [isInputControlled, onInputValueChange]);
+    const handleClose = useCallback((index) => {
+        if (index === -1) {
+            setIsOpen(false);
+            setSearch('');
+        }
+    }, [setSearch]);
+    const focusSearchInput = useCallback(() => {
+        if (focusTimeoutRef.current) {
+            clearTimeout(focusTimeoutRef.current);
+        }
+        focusTimeoutRef.current = setTimeout(() => {
+            searchInputRef.current?.focus();
+        }, 300);
+    }, []);
+    const openBottomSheet = useCallback(() => {
+        if (isDisabled || isReadonly) {
+            return;
+        }
+        bottomSheetModalRef.current?.present();
+        setIsOpen(true);
+        focusSearchInput();
+    }, [focusSearchInput, isDisabled, isReadonly]);
+    const closeBottomSheet = useCallback(() => {
+        bottomSheetModalRef.current?.dismiss();
+        setIsOpen(false);
+    }, []);
+    const selectOption = useCallback(({ label: optionLabel, value: optionValue }) => {
+        setSearch(optionLabel);
+        onValueChange?.(optionValue);
+        closeBottomSheet();
+    }, [closeBottomSheet, onValueChange, setSearch]);
+    const handleClear = useCallback(() => {
+        setSearch('');
+        onValueChange?.(null);
+    }, [onValueChange, setSearch]);
+    const handleClearPress = useCallback((event) => {
+        event.stopPropagation();
+        handleClear();
+    }, [handleClear]);
+    const defaultFilterOption = useCallback((option, query) => {
+        const normalizedQuery = query.trim().toLowerCase();
+        if (!normalizedQuery) {
+            return true;
+        }
+        const haystack = [option.label, ...(option.keywords ?? [])].map(term => term.toLowerCase());
+        return haystack.some(term => term.includes(normalizedQuery));
+    }, []);
+    const filteredOptions = useMemo(() => {
+        const optionFilter = filterOption ?? defaultFilterOption;
+        return options.filter(option => optionFilter(option, search));
+    }, [defaultFilterOption, filterOption, options, search]);
+    const renderSelectOption = useCallback(({ item }) => (_jsx(ComboboxOption, { label: item.label, value: item.value, disabled: item.disabled, leadingIcon: item.leadingIcon, trailingIcon: item.trailingIcon })), []);
+    const renderEmptyComponent = useCallback(() => (_jsx(BottomSheetView, { style: styles.emptyContainer, children: _jsx(DetailText, { children: noOptionsFoundText }) })), [noOptionsFoundText]);
+    const renderContentProps = useMemo(() => ({
+        close: closeBottomSheet,
+        search,
+        selectedValue: value,
+        selectOption,
+        setSearch,
+    }), [closeBottomSheet, search, selectOption, setSearch, value]);
+    const customContent = typeof children === 'function' ? children(renderContentProps) : children;
+    return (_jsxs(View, { ...rest, style: [styles.container, rest.style], children: [_jsx(FormField, { label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validationStatus: validationStatusFromContext, required: isRequired, disabled: isDisabled, readonly: isReadonly, invalidText: invalidText, validText: validText, accessibilityHandledByChildren: true, children: _jsxs(Pressable, { onPress: openBottomSheet, disabled: isDisabled || isReadonly, accessibilityRole: "button", accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, accessibilityState: { expanded: isOpen, disabled: isDisabled || isReadonly }, style: ({ pressed }) => [styles.trigger, (pressed || isOpen) && styles.triggerFocused], children: [_jsx(View, { style: styles.leadingIconContainer, children: _jsx(Icon, { as: SearchMediumIcon, style: styles.icon }) }), _jsx(View, { style: styles.valueContainer, children: _jsx(BodyText, { numberOfLines: 1, style: styles.valueText, children: search || placeholder }) }), loading && _jsx(Spinner, { size: "xs", color: color.icon.primary }), !!search && (_jsx(UnstyledIconButton, { accessibilityLabel: "Clear search", onPress: handleClearPress, icon: CloseSmallIcon }))] }) }), _jsx(BottomSheetModal, { ref: bottomSheetModalRef, snapPoints: DEFAULT_SNAP_POINTS, onChange: handleClose, enableDynamicSizing: false, ...bottomSheetProps, children: _jsxs(ComboboxContext.Provider, { value: {
+                        close: closeBottomSheet,
+                        search,
+                        selectedValue: value,
+                        selectOption,
+                        setSearch,
+                    }, children: [_jsxs(SafeAreaView, { edges: ['top'], children: [menuHeading && (_jsx(View, { style: styles.headingContainer, children: _jsx(DetailText, { size: "lg", children: menuHeading }) })), _jsx(View, { style: styles.searchContainer, children: _jsx(Input, { ref: searchInputRef, placeholder: searchPlaceholder, value: search, inBottomSheet: true, onChangeText: setSearch, type: "search", clearable: true, onClear: handleClear, loading: loading }) })] }), customContent || (_jsx(BottomSheetFlatList, { data: filteredOptions, keyExtractor: (option) => option.value, renderItem: renderSelectOption, ListEmptyComponent: renderEmptyComponent, ...listProps }))] }) })] }));
+};
+const styles = StyleSheet.create(theme => ({
+    container: {
+        gap: theme.components.select.gap,
+    },
+    trigger: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        minHeight: theme.components.input.height,
+        backgroundColor: theme.color.surface.neutral.strong,
+        borderWidth: theme.components.input.borderWidth,
+        borderColor: theme.color.border.strong,
+        borderRadius: theme.components.input.borderRadius,
+        paddingHorizontal: theme.components.input.paddingHorizontal,
+        gap: theme.components.input.gap,
+        outlineStyle: 'solid',
+        outlineWidth: theme.components.input.borderWidth,
+        outlineColor: theme.color.border.strong,
+        variants: {
+            disabled: {
+                true: {
+                    opacity: theme.opacity.disabled,
+                },
+            },
+            readonly: {
+                true: {
+                    borderColor: theme.color.border.subtle,
+                },
+            },
+            validationStatus: {
+                initial: {},
+                valid: {
+                    borderColor: theme.color.feedback.positive.border,
+                    outlineColor: theme.color.feedback.positive.border,
+                },
+                invalid: {
+                    borderColor: theme.color.feedback.danger.border,
+                    outlineColor: theme.color.feedback.danger.border,
+                },
+            },
+        },
+    },
+    triggerFocused: {
+        outlineWidth: theme.components.input.borderWidthFocused,
+    },
+    leadingIconContainer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    valueContainer: {
+        flex: 1,
+    },
+    valueText: {
+        variants: {
+            hasValue: {
+                false: {
+                    color: theme.color.text.secondary,
+                },
+            },
+        },
+    },
+    icon: {
+        color: theme.color.icon.primary,
+    },
+    headingContainer: {
+        paddingHorizontal: theme.components.bottomSheet.padding,
+        marginBottom: theme.components.select.gap,
+    },
+    searchContainer: {
+        paddingTop: 1,
+        paddingHorizontal: theme.components.bottomSheet.padding,
+        paddingBottom: theme.components.select.gap,
+    },
+    emptyContainer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginTop: theme.space.md,
+    },
+}));
+Combobox.displayName = 'Combobox';
+export default Combobox;