@utilitywarehouse/hearth-react-native 0.27.3 → 0.28.0

package/src/components/Pagination/Pagination.tsx

@@ -0,0 +1,248 @@
+import {
+  ChevronLeftSmallIcon,
+  ChevronRightSmallIcon,
+  SkipFirstSmallIcon,
+  SkipLastSmallIcon,
+} from '@utilitywarehouse/hearth-react-native-icons';
+import { ComponentType, useState } from 'react';
+import { Pressable, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { UnstyledIconButton } from '../UnstyledIconButton';
+import type PaginationProps from './Pagination.props';
+import { ELLIPSIS, generatePageNumbers } from './Pagination.utils';
+
+interface PaginationItemProps {
+  label: number;
+  selected?: boolean;
+  onPress: () => void;
+}
+
+const PaginationItem = ({ label, selected = false, onPress }: PaginationItemProps) => {
+  const [isFocused, setIsFocused] = useState(false);
+
+  styles.useVariants({ selected });
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={`Go to page ${label}`}
+      accessibilityState={{ selected }}
+      onBlur={() => setIsFocused(false)}
+      onFocus={() => setIsFocused(true)}
+      onPress={onPress}
+      style={({ pressed }) => [
+        styles.pageItem,
+        pressed && !selected && styles.pageItemPressed,
+        isFocused && styles.pageItemFocused,
+      ]}
+    >
+      <BodyText size="md" style={styles.pageItemText}>
+        {label}
+      </BodyText>
+    </Pressable>
+  );
+};
+
+const PaginationArrowButton = ({
+  accessibilityLabel,
+  disabled,
+  icon,
+  onPress,
+}: {
+  accessibilityLabel: string;
+  disabled: boolean;
+  icon: ComponentType;
+  onPress: () => void;
+}) => {
+  return (
+    <UnstyledIconButton
+      accessibilityLabel={accessibilityLabel}
+      disabled={disabled}
+      icon={icon}
+      onPress={onPress}
+      size="sm"
+      style={styles.arrowButton}
+    />
+  );
+};
+
+const Pagination = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+  condensed = false,
+  hideSkipButtons = false,
+  style,
+  ...props
+}: PaginationProps) => {
+  const pages = generatePageNumbers(currentPage, totalPages);
+
+  const handleFirst = () => {
+    if (currentPage !== 1) {
+      onPageChange(1);
+    }
+  };
+
+  const handlePrevious = () => {
+    if (currentPage > 1) {
+      onPageChange(currentPage - 1);
+    }
+  };
+
+  const handleNext = () => {
+    if (currentPage < totalPages) {
+      onPageChange(currentPage + 1);
+    }
+  };
+
+  const handleLast = () => {
+    if (currentPage !== totalPages) {
+      onPageChange(totalPages);
+    }
+  };
+
+  return (
+    <View accessibilityLabel="Pagination" style={[styles.container, style]} {...props}>
+      <View style={styles.controllers}>
+        {!hideSkipButtons ? (
+          <PaginationArrowButton
+            accessibilityLabel="Go to first page"
+            disabled={currentPage === 1}
+            icon={SkipFirstSmallIcon}
+            onPress={handleFirst}
+          />
+        ) : null}
+        <PaginationArrowButton
+          accessibilityLabel="Go to previous page"
+          disabled={currentPage === 1}
+          icon={ChevronLeftSmallIcon}
+          onPress={handlePrevious}
+        />
+      </View>
+
+      {condensed ? (
+        <BodyText size="md">
+          Page {currentPage} of {totalPages}
+        </BodyText>
+      ) : (
+        <View style={styles.pages}>
+          {pages.map((page, index) => {
+            if (page === ELLIPSIS) {
+              return (
+                <BodyText key={`ellipsis-${index}`} size="md" style={styles.ellipsis}>
+                  {ELLIPSIS}
+                </BodyText>
+              );
+            }
+
+            return (
+              <PaginationItem
+                key={page}
+                label={page}
+                onPress={() => onPageChange(page)}
+                selected={page === currentPage}
+              />
+            );
+          })}
+        </View>
+      )}
+
+      <View style={styles.controllers}>
+        <PaginationArrowButton
+          accessibilityLabel="Go to next page"
+          disabled={currentPage === totalPages}
+          icon={ChevronRightSmallIcon}
+          onPress={handleNext}
+        />
+        {!hideSkipButtons ? (
+          <PaginationArrowButton
+            accessibilityLabel="Go to last page"
+            disabled={currentPage === totalPages}
+            icon={SkipLastSmallIcon}
+            onPress={handleLast}
+          />
+        ) : null}
+      </View>
+    </View>
+  );
+};
+
+PaginationItem.displayName = 'PaginationItem';
+Pagination.displayName = 'Pagination';
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    width: '100%',
+    minHeight: theme.components.pagination.item.height,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: theme.components.pagination.gap,
+  },
+  controllers: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: theme.components.pagination.gap,
+  },
+  arrowButton: {
+    width: theme.components.pagination.item.width,
+    height: theme.components.pagination.item.height,
+  },
+  pages: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexWrap: 'wrap',
+    gap: theme.components.pagination.gap,
+  },
+  pageItem: {
+    width: theme.components.pagination.item.width,
+    height: theme.components.pagination.item.height,
+    borderRadius: theme.components.pagination.item.radius,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'transparent',
+    _web: {
+      _hover: {
+        backgroundColor: theme.color.interactive.functional.surface.subtle.hover,
+      },
+    },
+    variants: {
+      selected: {
+        true: {
+          backgroundColor: theme.color.interactive.brand.surface.strong.default,
+        },
+      },
+    },
+  },
+  pageItemPressed: {
+    backgroundColor: theme.color.interactive.functional.surface.subtle.active,
+  },
+  pageItemFocused: {
+    outlineWidth: 2,
+    outlineOffset: -2,
+    outlineColor: theme.color.border.strong,
+    outlineStyle: 'solid',
+  },
+  pageItemText: {
+    variants: {
+      selected: {
+        true: {
+          color: theme.color.text.inverted,
+        },
+        false: {
+          color: theme.color.text.primary,
+        },
+      },
+    },
+  },
+  ellipsis: {
+    minWidth: theme.components.pagination.item.width,
+    textAlign: 'center',
+    color: theme.color.text.primary,
+  },
+}));
+
+export default Pagination;

package/src/components/Pagination/Pagination.utils.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'vitest';
+import { ELLIPSIS, generatePageNumbers } from './Pagination.utils';
+
+describe('generatePageNumbers', () => {
+  it('returns all pages when the total fits within the visible limit', () => {
+    expect(generatePageNumbers(1, 7)).toEqual([1, 2, 3, 4, 5, 6, 7]);
+  });
+
+  it('returns the leading window when the current page is near the start', () => {
+    expect(generatePageNumbers(2, 10)).toEqual([1, 2, 3, 4, 5, ELLIPSIS, 10]);
+  });
+
+  it('returns the centered window when the current page is in the middle', () => {
+    expect(generatePageNumbers(5, 10)).toEqual([1, ELLIPSIS, 4, 5, 6, ELLIPSIS, 10]);
+  });
+
+  it('returns the trailing window when the current page is near the end', () => {
+    expect(generatePageNumbers(9, 10)).toEqual([1, ELLIPSIS, 6, 7, 8, 9, 10]);
+  });
+});

package/src/components/Pagination/Pagination.utils.ts

@@ -0,0 +1,37 @@
+export const ELLIPSIS = '...';
+
+const MAX_VISIBLE_ITEMS = 7;
+
+export const generatePageNumbers = (
+  currentPage: number,
+  totalPages: number
+): Array<number | typeof ELLIPSIS> => {
+  if (totalPages <= MAX_VISIBLE_ITEMS) {
+    return Array.from({ length: totalPages }, (_, index) => index + 1);
+  }
+
+  const pages: Array<number | typeof ELLIPSIS> = [];
+  const isNearStart = currentPage <= 4;
+  const isNearEnd = currentPage > totalPages - 4;
+
+  if (isNearStart) {
+    pages.push(1, 2, 3, 4, 5, ELLIPSIS, totalPages);
+    return pages;
+  }
+
+  if (isNearEnd) {
+    pages.push(
+      1,
+      ELLIPSIS,
+      totalPages - 4,
+      totalPages - 3,
+      totalPages - 2,
+      totalPages - 1,
+      totalPages
+    );
+    return pages;
+  }
+
+  pages.push(1, ELLIPSIS, currentPage - 1, currentPage, currentPage + 1, ELLIPSIS, totalPages);
+  return pages;
+};

package/src/components/Pagination/index.ts

@@ -0,0 +1,2 @@
+export { default as Pagination } from './Pagination';
+export type { default as PaginationProps } from './Pagination.props';

package/src/components/SafeAreaView/SafeAreaView.props.ts

@@ -0,0 +1,20 @@
+import { ViewProps } from 'react-native';
+
+export type SafeAreaEdge = 'top' | 'right' | 'bottom' | 'left';
+
+interface SafeAreaViewProps extends ViewProps {
+  /**
+   * Which edges should receive safe area compensation.
+   *
+   * @default ['top', 'right', 'bottom', 'left']
+   */
+  edges?: SafeAreaEdge[];
+  /**
+   * Whether safe area compensation should be applied as padding or margin.
+   *
+   * @default 'padding'
+   */
+  mode?: 'padding' | 'margin';
+}
+
+export default SafeAreaViewProps;

package/src/components/SafeAreaView/SafeAreaView.tsx

@@ -0,0 +1,173 @@
+import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  LayoutChangeEvent,
+  StyleSheet as RNStyleSheet,
+  useWindowDimensions,
+  View,
+  ViewStyle,
+} from 'react-native';
+import { UnistylesRuntime } from '../../core';
+import SafeAreaViewProps, { SafeAreaEdge } from './SafeAreaView.props';
+
+type EdgeInsets = Record<SafeAreaEdge, number>;
+
+const DEFAULT_EDGES: SafeAreaEdge[] = ['top', 'right', 'bottom', 'left'];
+const EMPTY_INSETS: EdgeInsets = { top: 0, right: 0, bottom: 0, left: 0 };
+const EDGE_EPSILON = 1;
+
+const getNumericStyleValue = (value: unknown): number => {
+  return typeof value === 'number' ? value : 0;
+};
+
+const getStyleInsetValue = (
+  style: ViewStyle | undefined,
+  mode: SafeAreaViewProps['mode'],
+  edge: SafeAreaEdge
+): number => {
+  const prefix = mode === 'margin' ? 'margin' : 'padding';
+
+  if (!style) {
+    // No style specified at all; treat as zero inset for safe-area calculations.
+    return 0;
+  }
+
+  if (edge === 'top') {
+    const raw = style[`${prefix}Top`] ?? style[`${prefix}Vertical`] ?? style[prefix];
+    if (raw == null) {
+      return 0;
+    }
+    return getNumericStyleValue(raw);
+  }
+
+  if (edge === 'bottom') {
+    const raw = style[`${prefix}Bottom`] ?? style[`${prefix}Vertical`] ?? style[prefix];
+    if (raw == null) {
+      return 0;
+    }
+    return getNumericStyleValue(raw);
+  }
+
+  if (edge === 'left') {
+    const raw = style[`${prefix}Left`] ?? style[`${prefix}Horizontal`] ?? style[prefix];
+    if (raw == null) {
+      return 0;
+    }
+    return getNumericStyleValue(raw);
+  }
+
+  const raw = style[`${prefix}Right`] ?? style[`${prefix}Horizontal`] ?? style[prefix];
+  if (raw == null) {
+    return 0;
+  }
+  return getNumericStyleValue(raw);
+};
+
+const SafeAreaView = forwardRef<View, SafeAreaViewProps>(
+  ({ children, edges = DEFAULT_EDGES, mode = 'padding', onLayout, style, ...props }, ref) => {
+    const viewRef = useRef<View>(null);
+    const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+    const [edgeInsets, setEdgeInsets] = useState<EdgeInsets>(EMPTY_INSETS);
+
+    const flattenedStyle = useMemo(
+      () => RNStyleSheet.flatten(style) as ViewStyle | undefined,
+      [style]
+    );
+
+    const updateEdgeInsets = useCallback(() => {
+      const currentView = viewRef.current;
+
+      if (!currentView) {
+        return;
+      }
+
+      currentView.measureInWindow((x, y, width, height) => {
+        const runtimeInsets = UnistylesRuntime.insets ?? EMPTY_INSETS;
+        const nextEdgeInsets: EdgeInsets = {
+          top: edges.includes('top') ? Math.max(runtimeInsets.top - Math.max(y, 0), 0) : 0,
+          right: edges.includes('right')
+            ? Math.max(runtimeInsets.right - Math.max(windowWidth - (x + width), 0), 0)
+            : 0,
+          bottom: edges.includes('bottom')
+            ? Math.max(runtimeInsets.bottom - Math.max(windowHeight - (y + height), 0), 0)
+            : 0,
+          left: edges.includes('left') ? Math.max(runtimeInsets.left - Math.max(x, 0), 0) : 0,
+        };
+
+        setEdgeInsets(previousInsets => {
+          const hasChanged = (Object.keys(nextEdgeInsets) as SafeAreaEdge[]).some(
+            edge => Math.abs(previousInsets[edge] - nextEdgeInsets[edge]) > EDGE_EPSILON
+          );
+
+          return hasChanged ? nextEdgeInsets : previousInsets;
+        });
+      });
+    }, [edges, windowHeight, windowWidth]);
+
+    useEffect(() => {
+      const frame = requestAnimationFrame(updateEdgeInsets);
+
+      return () => cancelAnimationFrame(frame);
+    }, [updateEdgeInsets]);
+
+    const handleRef = useCallback(
+      (node: View | null) => {
+        viewRef.current = node;
+
+        if (typeof ref === 'function') {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+
+    const handleLayout = useCallback(
+      (event: LayoutChangeEvent) => {
+        onLayout?.(event);
+        requestAnimationFrame(updateEdgeInsets);
+      },
+      [onLayout, updateEdgeInsets]
+    );
+
+    const safeAreaStyle = useMemo(() => {
+      const nextStyle: ViewStyle = {};
+
+      if (mode === 'padding') {
+        nextStyle.paddingTop = getStyleInsetValue(flattenedStyle, mode, 'top') + edgeInsets.top;
+        nextStyle.paddingRight =
+          getStyleInsetValue(flattenedStyle, mode, 'right') + edgeInsets.right;
+        nextStyle.paddingBottom =
+          getStyleInsetValue(flattenedStyle, mode, 'bottom') + edgeInsets.bottom;
+        nextStyle.paddingLeft = getStyleInsetValue(flattenedStyle, mode, 'left') + edgeInsets.left;
+
+        return nextStyle;
+      }
+
+      nextStyle.marginTop = getStyleInsetValue(flattenedStyle, mode, 'top') + edgeInsets.top;
+      nextStyle.marginRight = getStyleInsetValue(flattenedStyle, mode, 'right') + edgeInsets.right;
+      nextStyle.marginBottom =
+        getStyleInsetValue(flattenedStyle, mode, 'bottom') + edgeInsets.bottom;
+      nextStyle.marginLeft = getStyleInsetValue(flattenedStyle, mode, 'left') + edgeInsets.left;
+
+      return nextStyle;
+    }, [
+      edgeInsets.bottom,
+      edgeInsets.left,
+      edgeInsets.right,
+      edgeInsets.top,
+      flattenedStyle,
+      mode,
+    ]);
+
+    return (
+      <View ref={handleRef} onLayout={handleLayout} style={[style, safeAreaStyle]} {...props}>
+        {children}
+      </View>
+    );
+  }
+);
+
+SafeAreaView.displayName = 'SafeAreaView';
+
+export default SafeAreaView;

package/src/components/SafeAreaView/index.ts

@@ -0,0 +1,2 @@
+export { default as SafeAreaView } from './SafeAreaView';
+export type { default as SafeAreaViewProps, SafeAreaEdge } from './SafeAreaView.props';

package/src/components/Select/Select.tsx

@@ -16,6 +16,7 @@ import { Input } from '../Input';
 import { SelectContext } from './Select.context';
 import SelectProps, { SelectOptionItemProps } from './Select.props';
 import SelectOption from './SelectOption';
+import { SafeAreaView } from '../SafeAreaView';
 
 const Select = ({
   options = [],
@@ -179,34 +180,36 @@ const Select = ({
             close: closeBottomSheet,
           }}
         >
-          {menuHeading && (
-            <View style={styles.headingContainer}>
-              <DetailText size="lg">{menuHeading}</DetailText>
-            </View>
-          )}
-          {searchable && (
-            <View style={styles.searchContainer}>
-              <Input
-                placeholder={searchPlaceholder}
-                value={search}
-                inBottomSheet
-                onChangeText={setSearch}
-                type="search"
-              />
-            </View>
-          )}
+          <SafeAreaView edges={['top']} style={{ flex: 1 }}>
+            {menuHeading && (
+              <View style={styles.headingContainer}>
+                <DetailText size="lg">{menuHeading}</DetailText>
+              </View>
+            )}
+            {searchable && (
+              <View style={styles.searchContainer}>
+                <Input
+                  placeholder={searchPlaceholder}
+                  value={search}
+                  inBottomSheet
+                  onChangeText={setSearch}
+                  type="search"
+                />
+              </View>
+            )}
 
-          {children ? (
-            <BottomSheetScrollView>{children}</BottomSheetScrollView>
-          ) : (
-            <BottomSheetFlatList
-              data={filteredOptions}
-              keyExtractor={(option: any) => option.value}
-              renderItem={renderSelectOption}
-              ListEmptyComponent={renderEmptyComponent}
-              {...listProps}
-            />
-          )}
+            {children ? (
+              <BottomSheetScrollView>{children}</BottomSheetScrollView>
+            ) : (
+              <BottomSheetFlatList
+                data={filteredOptions}
+                keyExtractor={(option: any) => option.value}
+                renderItem={renderSelectOption}
+                ListEmptyComponent={renderEmptyComponent}
+                {...listProps}
+              />
+            )}
+          </SafeAreaView>
         </SelectContext.Provider>
       </BottomSheetModal>
     </View>

package/src/components/Table/Table.context.tsx

@@ -0,0 +1,23 @@
+import { createContext, useContext } from 'react';
+import type { TableProps } from './Table.props';
+
+type TableContainer = TableProps['container'];
+type TableColumnWidths = NonNullable<TableProps['columnWidths']>;
+
+interface TableContextValue {
+  columnWidths: TableColumnWidths;
+  container: TableContainer;
+  columnCount: number;
+  hasPagination: boolean;
+}
+
+const TableContext = createContext<TableContextValue>({
+  columnWidths: [],
+  container: 'none',
+  columnCount: 1,
+  hasPagination: false,
+});
+
+export const TableContextProvider = TableContext.Provider;
+
+export const useTableContext = () => useContext(TableContext);