@swan-io/lake 1.4.4 → 1.5.0

package/src/components/PlainListView.js

@@ -75,6 +75,7 @@ const styles = StyleSheet.create({
         backgroundColor: backgroundColor.default,
     },
     scrollTracker: {
+        pointerEvents: "none",
         position: "absolute",
         left: 0,
         bottom: 0,
@@ -102,7 +103,7 @@ const Row = ({ id, item, index, rowHeight, columns, extraInfo, isActive, isHover
                     width: typeof width === "number" ? width : ONE,
                     flexGrow: width === "grow" ? ONE : ZERO,
                 },
-            ], nativeID: columnId, children: renderCell({ columnId, item, index, extraInfo, isHovered }) }, columnId))) }));
+            ], id: columnId, children: renderCell({ columnId, item, index, extraInfo, isHovered }) }, columnId))) }));
 };
 export const PlainListView = ({ data: originalData, keyExtractor, rowHeight, groupHeaderHeight, headerHeight, columns, smallColumns = columns, extraInfo, onEndReached, onEndReachedThresholdPx = 200, getRowLink, activeRowId, renderEmptyList, onActiveRowChange, groupBy, loading, breakpoint = breakpoints.large, withoutScroll = false, stickyOffset = 0, }) => {
     const viewId = useId();
@@ -172,7 +173,7 @@ export const PlainListView = ({ data: originalData, keyExtractor, rowHeight, gro
                                         flexGrow: width === "grow" ? ONE : ZERO,
                                         height: headerHeight,
                                     },
-                                ], nativeID: columnId, children: renderTitle({ title, extraInfo, id }) }, columnId));
+                                ], id: columnId, children: renderTitle({ title, extraInfo, id }) }, columnId));
                         }) })) : null, cloneElement(listWrapper, {
                         children: (_jsxs(_Fragment, { children: [Array.from(groups.entries()).map(([groupName, items]) => {
                                     return (_jsxs(Fragment, { children: [groupName != null ? (_jsx(View, { style: [
@@ -195,7 +196,7 @@ export const PlainListView = ({ data: originalData, keyExtractor, rowHeight, gro
                                                     children: (_jsx(Row, { id: key, rowHeight: rowHeight, columns: displayColumns, item: item, index: index, extraInfo: extraInfo, isActive: isActive, isHovered: isHovered, large: large, onMouseEnter: setHoveredRow, onMouseLeave: removeHoveredRow })),
                                                 });
                                             })] }, groupName));
-                                }), _jsx(View, { children: _jsx(View, { accessibilityBusy: isLoading, style: styles.loadingPlaceholder, children: isLoading ? (_jsx(PlainListViewPlaceholder, { count: loading.count, rowHeight: rowHeight, rowVerticalSpacing: 0, paddingHorizontal: 0 })) : null }) }), isEmpty && isNotNullish(renderEmptyList) && !isLoading ? (_jsx(View, { style: styles.emptyListContainer, children: renderEmptyList() })) : null, _jsx(View, { pointerEvents: "none", style: [styles.scrollTracker, { height: onEndReachedThresholdPx }], ref: scrollTrackerRef })] })),
+                                }), _jsx(View, { children: _jsx(View, { "aria-busy": isLoading, style: styles.loadingPlaceholder, children: isLoading ? (_jsx(PlainListViewPlaceholder, { count: loading.count, rowHeight: rowHeight, rowVerticalSpacing: 0, paddingHorizontal: 0 })) : null }) }), isEmpty && isNotNullish(renderEmptyList) && !isLoading ? (_jsx(View, { style: styles.emptyListContainer, children: renderEmptyList() })) : null, _jsx(View, { style: [styles.scrollTracker, { height: onEndReachedThresholdPx }], ref: scrollTrackerRef })] })),
                     })] }));
         } }));
 };

package/src/components/Popover.js

@@ -11,6 +11,7 @@ import { TransitionView } from "./TransitionView";
 const styles = StyleSheet.create({
     container: {
         ...StyleSheet.absoluteFillObject,
+        pointerEvents: "none",
     },
     contents: {
         ...StyleSheet.absoluteFillObject,
@@ -19,6 +20,7 @@ const styles = StyleSheet.create({
         cursor: "default",
     },
     underlay: {
+        pointerEvents: "auto",
         cursor: "default",
         position: "fixed",
         left: 0,
@@ -27,6 +29,7 @@ const styles = StyleSheet.create({
         right: 0,
     },
     popover: {
+        pointerEvents: "auto",
         position: "absolute",
         display: "flex",
         flexDirection: "column",
@@ -56,9 +59,10 @@ const FLEX_END = "flex-end";
 const FLEX_START = "flex-start";
 const animation = {
     ...animations.fadeAndSlideInFromBottom,
-    leave: StyleSheet.compose([animations.fadeAndSlideInFromBottom.leave], {
-        animationDuration: "100ms",
-    }),
+    leave: [
+        animations.fadeAndSlideInFromBottom.leave,
+        { animationDuration: "100ms" },
+    ],
 };
 export const VIEWPORT_WIDTH_THRESHOLD = 600;
 export const Popover = memo(({ children, id, label, role = "dialog", describedBy, matchReferenceWidth = false, matchReferenceMinWidth = false, onDismiss, referenceRef, returnFocus = true, autoFocus = true, visible, underlay = true, safetyMargin = 8, forcedMode, }) => {
@@ -129,7 +133,7 @@ export const Popover = memo(({ children, id, label, role = "dialog", describedBy
     if (mode === "BottomPanel") {
         return (_jsx(BottomPanel, { visible: visible, onPressClose: onDismiss, returnFocus: false, children: typeof children == "function" ? children({ mode: "panel" }) : children }));
     }
-    return (_jsx(Portal, { container: rootElement, children: _jsx(TransitionView, { pointerEvents: "none", style: styles.container, ...animation, children: visible ? (_jsxs(View, { style: styles.contents, children: [underlay ? (_jsx(Pressable, { ref: underlayRef, style: styles.underlay, onPress: onPressUnderlay, accessibilityRole: "button", accessibilityLabel: "Close", pointerEvents: "auto" })) : null, availableHeight > 0 ? (_jsx(ScrollView, { pointerEvents: "auto", style: [
+    return (_jsx(Portal, { container: rootElement, children: _jsx(TransitionView, { style: styles.container, ...animation, children: visible ? (_jsxs(View, { style: styles.contents, children: [underlay ? (_jsx(Pressable, { ref: underlayRef, style: styles.underlay, onPress: onPressUnderlay, role: "button", "aria-label": "Close" })) : null, availableHeight > 0 ? (_jsx(ScrollView, { style: [
                             styles.popover,
                             availableSpaceAbove <= availableSpaceBelow && { top },
                             availableSpaceAbove > availableSpaceBelow && { bottom },
@@ -143,5 +147,5 @@ export const Popover = memo(({ children, id, label, role = "dialog", describedBy
                             {
                                 justifyContent: availableSpaceAbove > availableSpaceBelow ? FLEX_END : FLEX_START,
                             },
-                        ], nativeID: id, accessibilityRole: role, accessibilityDescribedBy: describedBy, accessibilityLabel: label, children: _jsx(FocusTrap, { focusLock: true, returnFocus: returnFocus, autoFocus: autoFocus, onEscapeKey: onDismiss, onClickOutside: underlay ? undefined : onClickOutside, children: _jsx(Pressable, { focusable: false, onPress: onPress, style: styles.defaultCursor, children: typeof children == "function" ? children({ mode: "dropdown" }) : children }) }) })) : null] })) : null }) }));
+                        ], id: id, role: role, "aria-describedby": describedBy, "aria-label": label, children: _jsx(FocusTrap, { focusLock: true, returnFocus: returnFocus, autoFocus: autoFocus, onEscapeKey: onDismiss, onClickOutside: underlay ? undefined : onClickOutside, children: _jsx(Pressable, { tabIndex: -1, onPress: onPress, style: styles.defaultCursor, children: typeof children == "function" ? children({ mode: "dropdown" }) : children }) }) })) : null] })) : null }) }));
 });

package/src/components/Portal.js

@@ -1,9 +1,9 @@
 import { useContext, useRef } from "react";
-import * as ReactDOM from "react-dom";
+import { createPortal } from "react-dom";
 import { CurrentColorContext, useCurrentColor } from "./WithCurrentColor";
 export const Portal = ({ children, container }) => {
     const currentColor = useContext(CurrentColorContext);
     const containerRef = useRef(container);
     useCurrentColor(containerRef, currentColor);
-    return ReactDOM.createPortal(children, container);
+    return createPortal(children, container);
 };

package/src/components/Pressable.d.ts

@@ -8,7 +8,6 @@ type Props<BaseProps extends TextProps | TextInputProps> = Merge<BaseProps, {
     delayPressIn?: number;
     delayPressOut?: number;
     disabled?: boolean;
-    focusable?: boolean;
     onBlur?: (event: NativeSyntheticEvent<React.FocusEvent>) => void;
     onContextMenu?: (event: NativeSyntheticEvent<React.SyntheticEvent>) => void;
     onFocus?: (event: NativeSyntheticEvent<React.FocusEvent>) => void;
@@ -38,84 +37,87 @@ type ExtraProps = {
 };
 export type PressableViewProps = Except<Props<ViewProps>, "children">;
 export type PressableTextProps = Props<TextProps>;
-export type PressableTextInputProps = Except<Props<TextInputProps>, "children">;
+export type PressableTextInputProps = Except<Props<TextInputProps>, "children" | "editable" | "keyboardType" | "numberOfLines">;
 export declare const Pressable: FC<PressableProps & ExtraProps & {
     ref?: Ref<View> | undefined;
 }>;
 export declare const PressableText: FC<{
     testID?: string | undefined;
+    id?: string | undefined;
+    role?: import("react-native").WebRole | undefined;
     style?: false | import("react-native").TextStyle | import("react-native").RegisteredStyle<import("react-native").TextStyle> | import("react-native").RecursiveArray<import("react-native").TextStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<import("react-native").TextStyle>> | ((state: PressableStateCallbackType) => import("react-native").StyleProp<import("react-native").TextStyle>) | null | undefined;
+    tabIndex?: 0 | -1 | undefined;
     children?: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactFragment | import("react").ReactPortal | ((state: PressableStateCallbackType) => ReactNode) | null | undefined;
     onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
     nativeID?: string | undefined;
-    accessibilityRole?: import("react-native").WebAccessibilityRole | undefined;
     onKeyDown?: ((event: NativeSyntheticEvent<React.KeyboardEvent>) => void) | undefined;
-    focusable?: boolean | undefined;
     accessible?: boolean | undefined;
     accessibilityActions?: readonly Readonly<{
         name: string;
         label?: string | undefined;
     }>[] | undefined;
     accessibilityLabel?: string | undefined;
+    "aria-label"?: string | undefined;
+    accessibilityRole?: import("react-native").AccessibilityRole | undefined;
     accessibilityState?: import("react-native").AccessibilityState | undefined;
+    "aria-busy"?: boolean | undefined;
+    "aria-checked"?: boolean | "mixed" | undefined;
+    "aria-disabled"?: boolean | undefined;
+    "aria-expanded"?: boolean | undefined;
+    "aria-selected"?: boolean | undefined;
+    "aria-labelledby"?: string | undefined;
     accessibilityHint?: string | undefined;
     accessibilityValue?: import("react-native").AccessibilityValue | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
     onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
-    accessibilityLabelledBy?: string | string[] | undefined;
-    accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
     importantForAccessibility?: "auto" | "yes" | "no" | "no-hide-descendants" | undefined;
+    "aria-hidden"?: boolean | undefined;
+    "aria-live"?: "polite" | "assertive" | "off" | undefined;
+    "aria-modal"?: boolean | undefined;
+    accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
     accessibilityElementsHidden?: boolean | undefined;
-    accessibilityLanguage?: string | undefined;
     accessibilityViewIsModal?: boolean | undefined;
     onAccessibilityEscape?: (() => void) | undefined;
     onAccessibilityTap?: (() => void) | undefined;
     onMagicTap?: (() => void) | undefined;
     accessibilityIgnoresInvertColors?: boolean | undefined;
-    accessibilityActiveDescendant?: string | undefined;
-    accessibilityAtomic?: boolean | undefined;
-    accessibilityAutoComplete?: string | undefined;
-    accessibilityBusy?: boolean | undefined;
-    accessibilityChecked?: boolean | "mixed" | undefined;
-    accessibilityColumnCount?: number | undefined;
-    accessibilityColumnIndex?: number | undefined;
-    accessibilityColumnSpan?: number | undefined;
-    accessibilityControls?: string | undefined;
-    accessibilityCurrent?: boolean | "page" | "step" | "location" | "date" | "time" | undefined;
-    accessibilityDescribedBy?: string | undefined;
-    accessibilityDetails?: string | undefined;
-    accessibilityDisabled?: boolean | undefined;
-    accessibilityErrorMessage?: string | undefined;
-    accessibilityExpanded?: boolean | undefined;
-    accessibilityFlowTo?: string | undefined;
-    accessibilityHasPopup?: string | undefined;
-    accessibilityHidden?: boolean | undefined;
-    accessibilityInvalid?: boolean | undefined;
-    accessibilityKeyShortcuts?: string[] | undefined;
-    accessibilityLevel?: number | undefined;
-    accessibilityModal?: boolean | undefined;
-    accessibilityMultiSelectable?: boolean | undefined;
-    accessibilityMultiline?: boolean | undefined;
-    accessibilityOrientation?: "horizontal" | "vertical" | undefined;
-    accessibilityOwns?: string | undefined;
-    accessibilityPlaceholder?: string | undefined;
-    accessibilityPosInSet?: number | undefined;
-    accessibilityPressed?: boolean | undefined;
-    accessibilityReadOnly?: boolean | undefined;
-    accessibilityRequired?: boolean | undefined;
-    accessibilityRoleDescription?: string | undefined;
-    accessibilityRowCount?: number | undefined;
-    accessibilityRowIndex?: number | undefined;
-    accessibilityRowSpan?: number | undefined;
-    accessibilitySelected?: boolean | undefined;
-    accessibilitySetSize?: number | undefined;
-    accessibilitySort?: "none" | "ascending" | "descending" | "other" | undefined;
-    accessibilityValueMax?: number | undefined;
-    accessibilityValueMin?: number | undefined;
-    accessibilityValueNow?: number | undefined;
-    accessibilityValueText?: string | undefined;
+    "aria-activedescendant"?: string | undefined;
+    "aria-atomic"?: boolean | undefined;
+    "aria-autocomplete"?: string | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "time" | "page" | "step" | "location" | "date" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-details"?: string | undefined;
+    "aria-errormessage"?: string | undefined;
+    "aria-flowto"?: string | undefined;
+    "aria-haspopup"?: string | undefined;
+    "aria-invalid"?: boolean | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-multiline"?: boolean | undefined;
+    "aria-multiselectable"?: boolean | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | undefined;
+    "aria-readonly"?: boolean | undefined;
+    "aria-required"?: boolean | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowspan"?: number | undefined;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
     allowFontScaling?: boolean | undefined;
-    ellipsizeMode?: "clip" | "head" | "middle" | "tail" | undefined;
-    lineBreakMode?: "clip" | "head" | "middle" | "tail" | undefined;
+    ellipsizeMode?: "clip" | "middle" | "head" | "tail" | undefined;
+    lineBreakMode?: "clip" | "middle" | "head" | "tail" | undefined;
     numberOfLines?: number | undefined;
     onTextLayout?: ((event: NativeSyntheticEvent<import("react-native").TextLayoutEventData>) => void) | undefined;
     onPress?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
@@ -152,15 +154,18 @@ export declare const PressableText: FC<{
 export declare const PressableTextInput: FC<Except<{
     textAlign?: "left" | "right" | "center" | undefined;
     testID?: string | undefined;
-    textAlignVertical?: "auto" | "center" | "top" | "bottom" | undefined;
+    pointerEvents?: "auto" | "none" | "box-none" | "box-only" | undefined;
+    textAlignVertical?: "bottom" | "top" | "auto" | "center" | undefined;
+    verticalAlign?: "bottom" | "top" | "auto" | "middle" | undefined;
+    id?: string | undefined;
+    role?: import("react-native").WebRole | undefined;
     style?: false | import("react-native").TextStyle | import("react-native").RegisteredStyle<import("react-native").TextStyle> | import("react-native").RecursiveArray<import("react-native").TextStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<import("react-native").TextStyle>> | ((state: PressableStateCallbackType) => import("react-native").StyleProp<import("react-native").TextStyle>) | null | undefined;
+    tabIndex?: 0 | -1 | undefined;
     children?: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactFragment | import("react").ReactPortal | ((state: PressableStateCallbackType) => ReactNode) | null | undefined;
     hitSlop?: import("react-native").Insets | undefined;
     onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
-    pointerEvents?: "none" | "auto" | "box-none" | "box-only" | undefined;
     removeClippedSubviews?: boolean | undefined;
     nativeID?: string | undefined;
-    accessibilityRole?: import("react-native").WebAccessibilityRole | undefined;
     onKeyDown?: ((event: NativeSyntheticEvent<React.KeyboardEvent>) => void) | undefined;
     onKeyDownCapture?: ((event: NativeSyntheticEvent<import("react").KeyboardEvent<Element>>) => void) | undefined;
     onKeyUp?: ((event: NativeSyntheticEvent<import("react").KeyboardEvent<Element>>) => void) | undefined;
@@ -212,62 +217,64 @@ export declare const PressableTextInput: FC<Except<{
         label?: string | undefined;
     }>[] | undefined;
     accessibilityLabel?: string | undefined;
+    "aria-label"?: string | undefined;
+    accessibilityRole?: import("react-native").AccessibilityRole | undefined;
     accessibilityState?: import("react-native").AccessibilityState | undefined;
+    "aria-busy"?: boolean | undefined;
+    "aria-checked"?: boolean | "mixed" | undefined;
+    "aria-disabled"?: boolean | undefined;
+    "aria-expanded"?: boolean | undefined;
+    "aria-selected"?: boolean | undefined;
+    "aria-labelledby"?: string | undefined;
     accessibilityHint?: string | undefined;
     accessibilityValue?: import("react-native").AccessibilityValue | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
     onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
-    accessibilityLabelledBy?: string | string[] | undefined;
-    accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
     importantForAccessibility?: "auto" | "yes" | "no" | "no-hide-descendants" | undefined;
+    "aria-hidden"?: boolean | undefined;
+    "aria-live"?: "polite" | "assertive" | "off" | undefined;
+    "aria-modal"?: boolean | undefined;
+    accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
     accessibilityElementsHidden?: boolean | undefined;
-    accessibilityLanguage?: string | undefined;
     accessibilityViewIsModal?: boolean | undefined;
     onAccessibilityEscape?: (() => void) | undefined;
     onAccessibilityTap?: (() => void) | undefined;
     onMagicTap?: (() => void) | undefined;
     accessibilityIgnoresInvertColors?: boolean | undefined;
-    accessibilityActiveDescendant?: string | undefined;
-    accessibilityAtomic?: boolean | undefined;
-    accessibilityAutoComplete?: string | undefined;
-    accessibilityBusy?: boolean | undefined;
-    accessibilityChecked?: boolean | "mixed" | undefined;
-    accessibilityColumnCount?: number | undefined;
-    accessibilityColumnIndex?: number | undefined;
-    accessibilityColumnSpan?: number | undefined;
-    accessibilityControls?: string | undefined;
-    accessibilityCurrent?: boolean | "page" | "step" | "location" | "date" | "time" | undefined;
-    accessibilityDescribedBy?: string | undefined;
-    accessibilityDetails?: string | undefined;
-    accessibilityDisabled?: boolean | undefined;
-    accessibilityErrorMessage?: string | undefined;
-    accessibilityExpanded?: boolean | undefined;
-    accessibilityFlowTo?: string | undefined;
-    accessibilityHasPopup?: string | undefined;
-    accessibilityHidden?: boolean | undefined;
-    accessibilityInvalid?: boolean | undefined;
-    accessibilityKeyShortcuts?: string[] | undefined;
-    accessibilityLevel?: number | undefined;
-    accessibilityModal?: boolean | undefined;
-    accessibilityMultiSelectable?: boolean | undefined;
-    accessibilityMultiline?: boolean | undefined;
-    accessibilityOrientation?: "horizontal" | "vertical" | undefined;
-    accessibilityOwns?: string | undefined;
-    accessibilityPlaceholder?: string | undefined;
-    accessibilityPosInSet?: number | undefined;
-    accessibilityPressed?: boolean | undefined;
-    accessibilityReadOnly?: boolean | undefined;
-    accessibilityRequired?: boolean | undefined;
-    accessibilityRoleDescription?: string | undefined;
-    accessibilityRowCount?: number | undefined;
-    accessibilityRowIndex?: number | undefined;
-    accessibilityRowSpan?: number | undefined;
-    accessibilitySelected?: boolean | undefined;
-    accessibilitySetSize?: number | undefined;
-    accessibilitySort?: "none" | "ascending" | "descending" | "other" | undefined;
-    accessibilityValueMax?: number | undefined;
-    accessibilityValueMin?: number | undefined;
-    accessibilityValueNow?: number | undefined;
-    accessibilityValueText?: string | undefined;
+    "aria-activedescendant"?: string | undefined;
+    "aria-atomic"?: boolean | undefined;
+    "aria-autocomplete"?: string | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "time" | "page" | "step" | "location" | "date" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-details"?: string | undefined;
+    "aria-errormessage"?: string | undefined;
+    "aria-flowto"?: string | undefined;
+    "aria-haspopup"?: string | undefined;
+    "aria-invalid"?: boolean | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-multiline"?: boolean | undefined;
+    "aria-multiselectable"?: boolean | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | undefined;
+    "aria-readonly"?: boolean | undefined;
+    "aria-required"?: boolean | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowspan"?: number | undefined;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
     allowFontScaling?: boolean | undefined;
     numberOfLines?: number | undefined;
     onPress?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
@@ -292,6 +299,7 @@ export declare const PressableTextInput: FC<Except<{
     defaultValue?: string | undefined;
     editable?: boolean | undefined;
     keyboardType?: import("react-native").KeyboardTypeOptions | undefined;
+    inputMode?: import("react-native").InputModeOptions | undefined;
     maxLength?: number | undefined;
     multiline?: boolean | undefined;
     onBlur?: ((event: NativeSyntheticEvent<React.FocusEvent>) => void) | undefined;
@@ -314,7 +322,10 @@ export declare const PressableTextInput: FC<Except<{
     } | undefined;
     inputAccessoryViewID?: string | undefined;
     initialValue?: string | undefined;
-    autoComplete?: "name" | "email" | "url" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday" | "bday-day" | "bday-month" | "bday-year" | "cc-additional-name" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "impp" | "language" | "new-password" | "nickname" | "off" | "on" | "one-time-code" | "organization" | "organization-title" | "postal-code" | "sex" | "street-address" | "tel" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "transaction-amount" | "transaction-currency" | "username" | undefined;
+    autoComplete?: "off" | "name" | "email" | "url" | "tel" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday" | "bday-day" | "bday-month" | "bday-year" | "cc-additional-name" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "impp" | "language" | "new-password" | "nickname" | "on" | "one-time-code" | "organization" | "organization-title" | "postal-code" | "sex" | "street-address" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "transaction-amount" | "transaction-currency" | "username" | undefined;
+    enterKeyHint?: "enter" | "search" | "done" | "go" | "next" | "send" | "previous" | undefined;
+    rows?: number | undefined;
+    readOnly?: boolean | undefined;
     clearButtonMode?: "never" | "while-editing" | "unless-editing" | "always" | undefined;
     clearTextOnFocus?: boolean | undefined;
     dataDetectorTypes?: import("react-native").DataDetectorTypes | import("react-native").DataDetectorTypes[] | undefined;
@@ -342,7 +353,7 @@ export declare const PressableTextInput: FC<Except<{
     onHoverOut?: ((event: unknown) => void) | undefined;
     testOnly_hovered?: boolean | undefined;
     testOnly_pressed?: boolean | undefined;
-}, "children"> & {
+}, "children" | "numberOfLines" | "editable" | "keyboardType"> & {
     ref?: Ref<TextInput> | undefined;
 }>;
 export {};

package/src/components/Pressable.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/exports/Pressable/index.js
+// https://github.com/necolas/react-native-web/blob/0.19.1/packages/react-native-web/src/exports/Pressable/index.js
 import { forwardRef, memo, useCallback, useMemo, useRef, } from "react";
 import { StyleSheet, Text, TextInput, View, } from "react-native";
 import { useForceableState } from "../hooks/useForceableState";
@@ -7,17 +7,20 @@ import { useHover } from "../hooks/useHover";
 import { useMergeRefs } from "../hooks/useMergeRefs";
 import { usePressEvents } from "../hooks/usePressEvents";
 const styles = StyleSheet.create({
-    root: {
+    active: {
         cursor: "pointer",
         touchAction: "manipulation",
     },
+    disabled: {
+        pointerEvents: "none",
+    },
 });
 const getPressable = (
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 Component, config = {}) => {
     const { applyPressStyle = true } = config;
     return forwardRef((props, forwardedRef) => {
-        const { children, delayLongPress, delayPressIn, delayPressOut, disabled = false, focusable, onBlur, onContextMenu, onFocus, onHoverIn, onHoverOut, onKeyDown, onLongPress, onPress, onPressMove, onPressIn, onPressOut, style, testOnly_hovered, testOnly_pressed, ...rest } = props;
+        const { children, delayLongPress, delayPressIn, delayPressOut, disabled = false, onBlur, onContextMenu, onFocus, onHoverIn, onHoverOut, onKeyDown, onLongPress, onPress, onPressIn, onPressMove, onPressOut, style, tabIndex, testOnly_hovered, testOnly_pressed, ...rest } = props;
         const [hovered, setHovered] = useForceableState(testOnly_hovered === true);
         const [focused, setFocused] = useForceableState(false);
         const [pressed, setPressed] = useForceableState(testOnly_pressed === true);
@@ -78,10 +81,17 @@ Component, config = {}) => {
             onKeyDownPress?.(e);
             onKeyDown?.(e);
         }, [onKeyDown, onKeyDownPress]);
-        return (_jsx(Component, { ...rest, ...pressEventHandlers, accessibilityDisabled: disabled, focusable: !disabled && focusable !== false, onBlur: blurHandler, onContextmenu: contextMenuHandler, onFocus: focusHandler, onKeyDown: keyDownHandler, ref: setRef, style: [
-                !disabled && applyPressStyle && styles.root,
+        let _tabIndex;
+        if (tabIndex !== undefined) {
+            _tabIndex = tabIndex;
+        }
+        else {
+            _tabIndex = disabled ? -1 : 0;
+        }
+        return (_jsx(Component, { ...rest, ...pressEventHandlers, "aria-disabled": disabled, onBlur: blurHandler, onContextmenu: contextMenuHandler, onFocus: focusHandler, onKeyDown: keyDownHandler, ref: setRef, style: [
+                !disabled && applyPressStyle ? styles.active : styles.disabled,
                 typeof style === "function" ? style(interactionState) : style,
-            ], children: typeof children === "function" ? children(interactionState) : children }));
+            ], tabIndex: _tabIndex, children: typeof children === "function" ? children(interactionState) : children }));
     });
 };
 export const Pressable = memo(getPressable(View, { applyPressStyle: true }));

package/src/components/RightPanel.js

@@ -14,6 +14,9 @@ const styles = StyleSheet.create({
     root: {
         ...StyleSheet.absoluteFillObject,
     },
+    inert: {
+        pointerEvents: "none",
+    },
     fill: {
         ...StyleSheet.absoluteFillObject,
     },
@@ -33,14 +36,14 @@ const styles = StyleSheet.create({
     },
     containerEnter: {
         animationKeyframes: {
-            "0%": { opacity: 0, transform: [{ translateZ: 0 }, { translateX: 100 }] },
+            "0%": { opacity: 0, transform: "translateZ(0px) translateX(100px)" },
         },
         animationDuration: "500ms",
         animationTimingFunction: "ease-in-out",
     },
     containerLeave: {
         animationKeyframes: {
-            "100%": { opacity: 0, transform: [{ translateZ: 0 }, { translateX: 100 }] },
+            "100%": { opacity: 0, transform: "translateZ(0px) translateX(100px)" },
         },
         animationDuration: "500ms",
         animationTimingFunction: "ease-in-out",
@@ -51,7 +54,7 @@ const styles = StyleSheet.create({
     },
     container: {
         ...StyleSheet.absoluteFillObject,
-        transform: [{ translateZ: 0 }],
+        transform: "translateZ(0px)",
         flexDirection: "row",
         alignItems: "stretch",
         backgroundColor: backgroundColor.default,
@@ -66,14 +69,14 @@ const styles = StyleSheet.create({
     fillMaxLarge: { maxWidth: 700 },
     contentsEnter: {
         animationKeyframes: {
-            "0%": { transform: [{ translateZ: 0 }, { translateX: 25 }] },
+            "0%": { transform: "translateZ(0px) translateX(25px)" },
         },
         animationDuration: "500ms",
         animationTimingFunction: "ease-in-out",
     },
     contentsLeave: {
         animationKeyframes: {
-            "100%": { transform: [{ translateZ: 0 }, { translateX: 25 }] },
+            "100%": { transform: "translateZ(0px) translateX(25px)" },
         },
         animationDuration: "500ms",
         animationTimingFunction: "ease-in-out",
@@ -81,7 +84,7 @@ const styles = StyleSheet.create({
     contentsContainer: {
         ...StyleSheet.absoluteFillObject,
         zIndex: 2,
-        transform: [{ translateZ: 0 }],
+        transform: "translateZ(0px)",
         maxWidth: "100%",
         flexGrow: 1,
     },
@@ -98,5 +101,5 @@ export const RightPanel = forwardRef(({ visible, children, onPressClose }, ref)
         setDelayedVisible(visible);
     }, [visible]);
     useBodyClassName("RightPanelOpen", { enabled: visible });
-    return (_jsx(Portal, { container: rootNode, children: _jsx(View, { style: styles.root, pointerEvents: visible ? "auto" : "none", children: _jsx(ResponsiveContainer, { style: styles.root, breakpoint: breakpoints.small, children: ({ large }) => (_jsxs(_Fragment, { children: [_jsx(TransitionView, { style: styles.fill, enter: styles.overlayEnter, leave: styles.overlayLeave, children: visible ? (onPressClose != null ? (_jsx(Pressable, { style: styles.overlay, onPress: onPressClose })) : (_jsx(View, { style: styles.overlay }))) : null }), _jsx(Suspense, { fallback: _jsx(LoadingView, { color: backgroundColor.accented, delay: 0 }), children: _jsx(TransitionView, { style: [styles.fillMax, large && styles.fillMaxLarge], enter: styles.containerEnter, leave: styles.containerLeave, children: delayedVisible ? (_jsx(FocusTrap, { onEscapeKey: onPressClose, focusLock: true, autoFocus: true, returnFocus: true, ref: ref, style: styles.container, children: _jsx(TransitionView, { style: styles.contentsContainer, enter: styles.contentsEnter, leave: styles.contentsLeave, children: _jsx(View, { style: styles.contents, children: _jsx(View, { style: styles.contentsContainer, children: typeof children == "function" ? (_jsx(ResponsiveContainer, { style: styles.root, breakpoint: breakpoints.small, children: children })) : (children) }) }) }) })) : null }) })] })) }) }) }));
+    return (_jsx(Portal, { container: rootNode, children: _jsx(View, { style: [styles.root, !visible && styles.inert], children: _jsx(ResponsiveContainer, { style: styles.root, breakpoint: breakpoints.small, children: ({ large }) => (_jsxs(_Fragment, { children: [_jsx(TransitionView, { style: styles.fill, enter: styles.overlayEnter, leave: styles.overlayLeave, children: visible ? (onPressClose != null ? (_jsx(Pressable, { style: styles.overlay, onPress: onPressClose })) : (_jsx(View, { style: styles.overlay }))) : null }), _jsx(Suspense, { fallback: _jsx(LoadingView, { color: backgroundColor.accented, delay: 0 }), children: _jsx(TransitionView, { style: [styles.fillMax, large && styles.fillMaxLarge], enter: styles.containerEnter, leave: styles.containerLeave, children: delayedVisible ? (_jsx(FocusTrap, { onEscapeKey: onPressClose, focusLock: true, autoFocus: true, returnFocus: true, ref: ref, style: styles.container, children: _jsx(TransitionView, { style: styles.contentsContainer, enter: styles.contentsEnter, leave: styles.contentsLeave, children: _jsx(View, { style: styles.contents, children: _jsx(View, { style: styles.contentsContainer, children: typeof children == "function" ? (_jsx(ResponsiveContainer, { style: styles.root, breakpoint: breakpoints.small, children: children })) : (children) }) }) }) })) : null }) })] })) }) }) }));
 });

package/src/components/Separator.js

@@ -14,6 +14,6 @@ const styles = StyleSheet.create({
         alignSelf: "stretch",
     },
 });
-export const Separator = ({ horizontal = false, space, style }) => (_jsx(View, { accessibilityRole: "none", style: horizontal
+export const Separator = ({ horizontal = false, space, style }) => (_jsx(View, { role: "none", style: horizontal
         ? [styles.horizontal, isNotNullish(space) && { marginHorizontal: space }, style]
         : [styles.vertical, isNotNullish(space) && { marginVertical: space }, style] }));

package/src/components/SidebarNavigationTracker.js

@@ -10,6 +10,7 @@ const styles = StyleSheet.create({
         width: 3,
     },
     marker: {
+        pointerEvents: "none",
         position: "absolute",
         top: 0,
         right: 0,
@@ -68,10 +69,10 @@ export const SidebarNavigationTracker = ({ style, contentContainerStyle, childre
             });
         }
     }, [track]);
-    return (_jsx(Context.Provider, { value: setTrack, children: _jsxs(ScrollView, { scrollEventThrottle: 30, onLayout: onLayout, style: style, contentContainerStyle: contentContainerStyle, accessibilityRole: "banner", children: [children, _jsx(View, { style: styles.track, ref: trackRef, children: track != null ? (_jsx(View, { style: [
+    return (_jsx(Context.Provider, { value: setTrack, children: _jsxs(ScrollView, { scrollEventThrottle: 30, onLayout: onLayout, style: style, contentContainerStyle: contentContainerStyle, role: "banner", children: [children, _jsx(View, { style: styles.track, ref: trackRef, children: track != null ? (_jsx(View, { style: [
                             styles.trackIndicator,
                             {
-                                transform: [{ translateY: track.top }, { scaleY: track.height }],
+                                transform: `translateY(${track.top}px) scaleY(${track.height})`,
                                 backgroundColor: track.color,
                             },
                         ] })) : null })] }) }));
@@ -89,5 +90,5 @@ export const SidebarNavigationTrackerActiveMarker = ({ color }) => {
             setLayoutReference({ color, element: elementRef.current });
         }
     }, [setLayoutReference, color]);
-    return _jsx(View, { ref: elementRef, onLayout: onLayout, style: styles.marker, pointerEvents: "none" });
+    return _jsx(View, { ref: elementRef, onLayout: onLayout, style: styles.marker });
 };