panelui-native 0.32.0 → 0.34.0

package/src/components/select/index.tsx

@@ -514,10 +514,20 @@ function SelectRoot({
 
       {open && overlayPosition ? (
         <Portal>
-          {/* Full-screen catcher so a press anywhere else dismisses the list. */}
+          {/*
+           * Full-screen catcher so a press anywhere else dismisses the list.
+           *
+           * Hidden from assistive tech, and deliberately: it is a dismiss
+           * affordance for a pointer, and announcing it would put an unlabelled
+           * full-screen "button" ahead of the options in the reading order,
+           * where swiping through the list would land on it before the first
+           * one. Escaping the list is the back gesture's job, and on iOS the
+           * modal flag's.
+           */}
           <Pressable
-            accessibilityRole="button"
-            accessibilityLabel="Close"
+            accessible={false}
+            importantForAccessibility="no-hide-descendants"
+            accessibilityElementsHidden
             onPress={close}
             style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}
           />
@@ -527,6 +537,16 @@ function SelectRoot({
               exiting={FadeOut.duration(120)}
               onLayout={onListLayout}
               style={overlayPosition}
+              /*
+               * The floating list is a modal layer, the same as the sheet
+               * presentation's is — it covers the screen with a catcher and
+               * takes the back button. Without this the page behind it stays
+               * in the accessibility tree, so a screen reader could walk out
+               * of the open list into content the list is covering and act on
+               * it. The sheet gets this from BottomSheet; the anchored list
+               * has to say it itself.
+               */
+              accessibilityViewIsModal
               className={slots.list()}
             >
               {search}

package/src/icons/index.tsx

@@ -231,6 +231,20 @@ export function EllipsisIcon({ size = 16, color, ...props }: IconProps) {
   );
 }
 
+export function MenuIcon({ size = 20, color, ...props }: IconProps) {
+  const resolved = useResolvedColor(color, '#737373');
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="M4 6h16M4 12h16M4 18h16"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+      />
+    </Svg>
+  );
+}
+
 export function XIcon({ size = 16, color, ...props }: IconProps) {
   const resolved = useResolvedColor(color, '#737373');
   return (

package/src/index.ts

@@ -304,6 +304,18 @@ export {
   type ChipVariant,
   type ChipSize,
 } from './components/chip';
+export {
+  Drawer,
+  type DrawerProps,
+  type DrawerTriggerProps,
+  type DrawerContentProps,
+  type DrawerHeaderProps,
+  type DrawerBodyProps,
+  type DrawerFooterProps,
+  type DrawerCloseProps,
+  type DrawerSide,
+  type DrawerSize,
+} from './components/drawer';
 export {
   EmptyState,
   type EmptyStateProps,
@@ -349,6 +361,26 @@ export {
   type NumberInputProps,
 } from './components/number-input';
 export { OtpInput, type OtpInputProps } from './components/otp-input';
+export {
+  Panelside,
+  usePanelside,
+  type PanelsideProps,
+  type PanelsidePanelProps,
+  type PanelsideHeaderProps,
+  type PanelsideSearchProps,
+  type PanelsideContentProps,
+  type PanelsideGroupProps,
+  type PanelsideGroupLabelProps,
+  type PanelsideItemProps,
+  type PanelsideActionProps,
+  type PanelsideFooterProps,
+  type PanelsideCtaProps,
+  type PanelsideSceneProps,
+  type PanelsideTriggerProps,
+  type PanelsideMode,
+  type PanelsideSwipeFrom,
+  type UsePanelsideResult,
+} from './components/panelside';
 export { Textarea, type TextareaProps } from './components/textarea';
 export {
   Item,
@@ -670,6 +702,7 @@ export {
   ListChecksIcon,
   LockIcon,
   MaximizeIcon,
+  MenuIcon,
   MessageCircleIcon,
   MicIcon,
   MinusIcon,

package/src/native/index.ts

@@ -97,3 +97,54 @@ export function getNativeUI(): NativeUIModule | null {
 export function hasNativeUI(): boolean {
   return getNativeUI() !== null;
 }
+
+/**
+ * The SwiftUI view modifiers, for the handful of things the portable props
+ * cannot express.
+ *
+ * The universal components cover the common ground — a variant, a size, an
+ * enabled flag — but the platform has looks with no cross-platform equivalent,
+ * and Liquid Glass is the one that matters: it is the material iOS 26 draws its
+ * own floating controls in, and nothing in the portable API asks for it. A
+ * modifier is how SwiftUI is configured, so this is the door to it.
+ *
+ * iOS only, and lazily resolved like everything else here. Android's toolkit
+ * has its own modifier system and no equivalent material, so asking for glass
+ * there is not a downgrade — it is a different question.
+ */
+interface SwiftUIModifiers {
+  buttonStyle: (
+    style:
+      | 'automatic'
+      | 'bordered'
+      | 'borderedProminent'
+      | 'borderless'
+      | 'glass'
+      | 'glassProminent'
+      | 'plain'
+  ) => unknown;
+  buttonBorderShape: (
+    shape: 'automatic' | 'capsule' | 'roundedRectangle' | 'circle',
+    cornerRadius?: number
+  ) => unknown;
+  controlSize: (size: 'mini' | 'small' | 'regular' | 'large' | 'extraLarge') => unknown;
+}
+
+let modifiersResolved = false;
+let modifiers: SwiftUIModifiers | null = null;
+
+export function getSwiftUIModifiers(): SwiftUIModifiers | null {
+  if (modifiersResolved) return modifiers;
+  modifiersResolved = true;
+
+  if (Platform.OS !== 'ios') return null;
+
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    modifiers = require('@expo/ui/swift-ui/modifiers') as SwiftUIModifiers;
+  } catch {
+    modifiers = null;
+  }
+
+  return modifiers;
+}