@butternutbox/pawprint-native 1.3.0 → 1.4.0

package/src/components/molecules/NavigationHeader/NavigationHeaderButton.tsx

@@ -0,0 +1,87 @@
+import React from "react"
+import { View } from "react-native"
+import { Button, type ButtonProps } from "../../atoms/Button"
+import { IconButton, type IconButtonProps } from "../../atoms/IconButton"
+import {
+  getButtonDefaults,
+  getIconButtonColour,
+  useNavigationHeaderContext
+} from "./NavigationHeaderContext"
+
+export type NavigationHeaderButtonProps = Omit<
+  ButtonProps,
+  "size" | "fullWidth"
+>
+
+export type NavigationHeaderIconButtonProps = Omit<IconButtonProps, "size">
+
+/**
+ * Text button for the navigation header action group. A medium `Button` with
+ * the header defaults: white `filled` / `tertiary` on the `brand` surface and
+ * `outlined` on other surfaces.
+ *
+ * Passing `variant` or `colour` overrides the default.
+ *
+ * @param {"filled" | "outlined" | "text"} [variant] - Button style.
+ * @param {"primary" | "secondary" | "tertiary"} [colour] - Filled colour.
+ *
+ * @example
+ * ```tsx
+ * <NavigationHeader.Button onPress={editQuantity}>
+ *   Pouch quantity
+ * </NavigationHeader.Button>
+ * ```
+ */
+export const NavigationHeaderButton = React.forwardRef<
+  View,
+  NavigationHeaderButtonProps
+>(({ variant, colour, ...props }, ref) => {
+  const defaults = getButtonDefaults(useNavigationHeaderContext())
+
+  return (
+    <Button
+      ref={ref}
+      size="md"
+      variant={variant ?? defaults.variant}
+      colour={colour ?? defaults.colour}
+      {...props}
+    />
+  )
+})
+
+NavigationHeaderButton.displayName = "NavigationHeader.Button"
+
+/**
+ * Icon button for the navigation header action group. A medium filled
+ * `IconButton`, `tertiary` on the `brand` surface and `secondary` on other
+ * surfaces.
+ *
+ * Passing `variant` or `colour` overrides the default.
+ *
+ * @param {PawprintIcon} icon - **(required)** Icon component.
+ * @param {string} aria-label - **(required)** Accessible label.
+ * @param {"filled" | "outlined" | "text"} [variant="filled"] - Button style.
+ * @param {"primary" | "secondary" | "tertiary"} [colour] - Filled colour.
+ *
+ * @example
+ * ```tsx
+ * <NavigationHeader.IconButton icon={Add} aria-label="Add dog" />
+ * ```
+ */
+export const NavigationHeaderIconButton = React.forwardRef<
+  View,
+  NavigationHeaderIconButtonProps
+>(({ colour, ...props }, ref) => {
+  const context = useNavigationHeaderContext()
+
+  return (
+    <IconButton
+      ref={ref}
+      size="md"
+      colour={colour ?? getIconButtonColour(context)}
+      {...props}
+    />
+  )
+})
+
+NavigationHeaderIconButton.displayName = "NavigationHeader.IconButton"

package/src/components/molecules/NavigationHeader/NavigationHeaderContext.ts

@@ -0,0 +1,38 @@
+import React from "react"
+import type { ButtonColour, ButtonVariant } from "../../atoms/Button"
+import type { IconButtonColour } from "../../atoms/IconButton"
+
+type NavigationHeaderSurface = "brand" | "subtle" | "plain"
+
+type NavigationHeaderContextValue = {
+  surface: NavigationHeaderSurface
+}
+
+const NavigationHeaderContext =
+  React.createContext<NavigationHeaderContextValue>({ surface: "brand" })
+
+const useNavigationHeaderContext = () =>
+  React.useContext(NavigationHeaderContext)
+
+const getButtonDefaults = ({
+  surface
+}: NavigationHeaderContextValue): {
+  variant: ButtonVariant
+  colour: ButtonColour
+} =>
+  surface === "brand"
+    ? { variant: "filled", colour: "tertiary" }
+    : { variant: "outlined", colour: "primary" }
+
+const getIconButtonColour = ({
+  surface
+}: NavigationHeaderContextValue): IconButtonColour =>
+  surface === "brand" ? "tertiary" : "secondary"
+
+export {
+  NavigationHeaderContext,
+  useNavigationHeaderContext,
+  getButtonDefaults,
+  getIconButtonColour
+}
+export type { NavigationHeaderSurface, NavigationHeaderContextValue }

package/src/components/molecules/NavigationHeader/index.ts

@@ -0,0 +1,14 @@
+export { NavigationHeader } from "./NavigationHeader"
+export type {
+  NavigationHeaderProps,
+  NavigationHeaderVariant,
+  NavigationHeaderSurface
+} from "./NavigationHeader"
+export {
+  NavigationHeaderButton,
+  NavigationHeaderIconButton
+} from "./NavigationHeaderButton"
+export type {
+  NavigationHeaderButtonProps,
+  NavigationHeaderIconButtonProps
+} from "./NavigationHeaderButton"

package/src/components/molecules/SelectField/SelectField.test.tsx

@@ -375,6 +375,24 @@ describe("SelectField", () => {
       fireEvent.click(screen.getByTestId("select-overlay"))
       expect(screen.queryByPlaceholderText("Search...")).not.toBeInTheDocument()
     })
+
+    it("re-focuses the search input when it blurs while the dropdown is open", () => {
+      renderWithTheme(
+        <SelectField label="Country" placeholder="Select a country" searchable>
+          <SelectField.Item value="uk">United Kingdom</SelectField.Item>
+        </SelectField>
+      )
+
+      openDropdownWithContent()
+      const input = screen.getByPlaceholderText("Search...")
+      vi.useFakeTimers()
+      input.blur()
+      expect(input).not.toHaveFocus()
+
+      act(() => vi.advanceTimersByTime(50))
+      vi.useRealTimers()
+      expect(input).toHaveFocus()
+    })
   })
 
   describe("when searchable with an async query", () => {

package/src/components/molecules/SelectField/SelectField.tsx

@@ -315,6 +315,17 @@ const SelectFieldRoot = React.forwardRef<View, SelectFieldProps>(
       // Re-running here re-focuses the input so typing is not interrupted.
     }, [isOpen, searchable, isSearching, searchQuery])
 
+    const isOpenRef = React.useRef(isOpen)
+    React.useEffect(() => {
+      isOpenRef.current = isOpen
+    })
+
+    const handleSearchBlur = () => {
+      setTimeout(() => {
+        if (isOpenRef.current) searchInputRef.current?.focus()
+      }, 50)
+    }
+
     const isCompound = React.Children.toArray(children).some(
       (child) =>
         React.isValidElement(child) && child.type === SelectFieldContent
@@ -447,6 +458,7 @@ const SelectFieldRoot = React.forwardRef<View, SelectFieldProps>(
                 ref={searchInputRef}
                 value={searchQuery}
                 onChangeText={setSearchQuery}
+                onBlur={handleSearchBlur}
                 placeholder={searchPlaceholder ?? "Search..."}
                 returnKeyType="search"
                 clearButtonMode="never"

package/src/components/molecules/index.ts

@@ -27,3 +27,4 @@ export * from "./ProductListingCard"
 export * from "./ProductDisplayCard"
 export * from "./TabNavigation"
 export * from "./FloatingActionButton"
+export * from "./NavigationHeader"