@react-native-reusables/cli 0.0.8 → 0.0.10

package/dist/generated/components/primitives/dialog/dialog.tsx

@@ -0,0 +1,211 @@
+import { useControllableState } from '@rnr/hooks';
+import { Portal as RNPPortal } from '@rnr/portal';
+import * as Slot from '@rnr/slot';
+import type {
+  PressableRef,
+  SlottablePressableProps,
+  SlottableTextProps,
+  SlottableViewProps,
+  TextRef,
+  ViewRef,
+} from '@rnr/types';
+import * as React from 'react';
+import { BackHandler, GestureResponderEvent, Pressable, Text, View } from 'react-native';
+import type {
+  DialogContentProps,
+  DialogOverlayProps,
+  DialogPortalProps,
+  DialogRootProps,
+  RootContext,
+} from './types';
+
+const DialogContext = React.createContext<(RootContext & { nativeID: string }) | null>(null);
+
+const Root = React.forwardRef<ViewRef, SlottableViewProps & DialogRootProps>(
+  ({ asChild, open: openProp, defaultOpen, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
+    const nativeID = React.useId();
+    const [open = false, onOpenChange] = useControllableState({
+      prop: openProp,
+      defaultProp: defaultOpen,
+      onChange: onOpenChangeProp,
+    });
+
+    const Component = asChild ? Slot.View : View;
+    return (
+      <DialogContext.Provider
+        value={{
+          open,
+          onOpenChange,
+          nativeID,
+        }}
+      >
+        <Component ref={ref} {...viewProps} />
+      </DialogContext.Provider>
+    );
+  }
+);
+
+Root.displayName = 'RootNativeDialog';
+
+function useRootContext() {
+  const context = React.useContext(DialogContext);
+  if (!context) {
+    throw new Error('Dialog compound components cannot be rendered outside the Dialog component');
+  }
+  return context;
+}
+
+const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
+  ({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
+    const { open, onOpenChange } = useRootContext();
+
+    function onPress(ev: GestureResponderEvent) {
+      if (disabled) return;
+      const newValue = !open;
+      onOpenChange(newValue);
+      onPressProp?.(ev);
+    }
+
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return (
+      <Component
+        ref={ref}
+        aria-disabled={disabled ?? undefined}
+        role='button'
+        onPress={onPress}
+        disabled={disabled ?? undefined}
+        {...props}
+      />
+    );
+  }
+);
+
+Trigger.displayName = 'TriggerNativeDialog';
+
+/**
+ * @warning when using a custom `<PortalHost />`, you might have to adjust the Content's sideOffset to account for nav elements like headers.
+ */
+function Portal({ forceMount, hostName, children }: DialogPortalProps) {
+  const value = useRootContext();
+
+  if (!forceMount) {
+    if (!value.open) {
+      return null;
+    }
+  }
+
+  return (
+    <RNPPortal hostName={hostName} name={`${value.nativeID}_portal`}>
+      <DialogContext.Provider value={value}>{children}</DialogContext.Provider>
+    </RNPPortal>
+  );
+}
+
+const Overlay = React.forwardRef<PressableRef, SlottablePressableProps & DialogOverlayProps>(
+  ({ asChild, forceMount, closeOnPress = true, onPress: OnPressProp, ...props }, ref) => {
+    const { open, onOpenChange } = useRootContext();
+
+    function onPress(ev: GestureResponderEvent) {
+      if (closeOnPress) {
+        onOpenChange(!open);
+      }
+      OnPressProp?.(ev);
+    }
+
+    if (!forceMount) {
+      if (!open) {
+        return null;
+      }
+    }
+
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return <Component ref={ref} onPress={onPress} {...props} />;
+  }
+);
+
+Overlay.displayName = 'OverlayNativeDialog';
+
+const Content = React.forwardRef<ViewRef, SlottableViewProps & DialogContentProps>(
+  ({ asChild, forceMount, ...props }, ref) => {
+    const { open, nativeID, onOpenChange } = useRootContext();
+
+    React.useEffect(() => {
+      const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
+        onOpenChange(false);
+        return true;
+      });
+
+      return () => {
+        backHandler.remove();
+      };
+    }, []);
+
+    if (!forceMount) {
+      if (!open) {
+        return null;
+      }
+    }
+
+    const Component = asChild ? Slot.View : View;
+    return (
+      <Component
+        ref={ref}
+        role='dialog'
+        nativeID={nativeID}
+        aria-labelledby={`${nativeID}_label`}
+        aria-describedby={`${nativeID}_desc`}
+        aria-modal={true}
+        onStartShouldSetResponder={onStartShouldSetResponder}
+        {...props}
+      />
+    );
+  }
+);
+
+Content.displayName = 'ContentNativeDialog';
+
+const Close = React.forwardRef<PressableRef, SlottablePressableProps>(
+  ({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
+    const { onOpenChange } = useRootContext();
+
+    function onPress(ev: GestureResponderEvent) {
+      if (disabled) return;
+      onOpenChange(false);
+      onPressProp?.(ev);
+    }
+
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return (
+      <Component
+        ref={ref}
+        aria-disabled={disabled ?? undefined}
+        role='button'
+        onPress={onPress}
+        disabled={disabled ?? undefined}
+        {...props}
+      />
+    );
+  }
+);
+
+Close.displayName = 'CloseNativeDialog';
+
+const Title = React.forwardRef<TextRef, SlottableTextProps>((props, ref) => {
+  const { nativeID } = useRootContext();
+  return <Text ref={ref} role='heading' nativeID={`${nativeID}_label`} {...props} />;
+});
+
+Title.displayName = 'TitleNativeDialog';
+
+const Description = React.forwardRef<TextRef, SlottableTextProps>((props, ref) => {
+  const { nativeID } = useRootContext();
+  return <Text ref={ref} nativeID={`${nativeID}_desc`} {...props} />;
+});
+
+Description.displayName = 'DescriptionNativeDialog';
+
+export { Close, Content, Description, Overlay, Portal, Root, Title, Trigger, useRootContext };
+
+function onStartShouldSetResponder() {
+  return true;
+}

package/dist/generated/components/primitives/dialog/dialog.web.tsx

@@ -0,0 +1,197 @@
+import * as Dialog from '@radix-ui/react-dialog';
+import { useAugmentedRef, useControllableState } from '@rnr/hooks';
+import * as Slot from '@rnr/slot';
+import type {
+  PressableRef,
+  SlottablePressableProps,
+  SlottableTextProps,
+  SlottableViewProps,
+  TextRef,
+  ViewRef,
+} from '@rnr/types';
+import * as React from 'react';
+import { Pressable, Text, View, type GestureResponderEvent } from 'react-native';
+import type {
+  DialogContentProps,
+  DialogOverlayProps,
+  DialogPortalProps,
+  DialogRootProps,
+  RootContext,
+} from './types';
+
+const DialogContext = React.createContext<RootContext | null>(null);
+
+const Root = React.forwardRef<ViewRef, SlottableViewProps & DialogRootProps>(
+  ({ asChild, open: openProp, defaultOpen, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
+    const [open = false, onOpenChange] = useControllableState({
+      prop: openProp,
+      defaultProp: defaultOpen,
+      onChange: onOpenChangeProp,
+    });
+    const Component = asChild ? Slot.View : View;
+    return (
+      <DialogContext.Provider value={{ open, onOpenChange }}>
+        <Dialog.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
+          <Component ref={ref} {...viewProps} />
+        </Dialog.Root>
+      </DialogContext.Provider>
+    );
+  }
+);
+
+Root.displayName = 'RootWebDialog';
+
+function useRootContext() {
+  const context = React.useContext(DialogContext);
+  if (!context) {
+    throw new Error('Dialog compound components cannot be rendered outside the Dialog component');
+  }
+  return context;
+}
+
+const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
+  ({ asChild, onPress: onPressProp, role: _role, disabled, ...props }, ref) => {
+    const augmentedRef = useAugmentedRef({ ref });
+    const { onOpenChange, open } = useRootContext();
+    function onPress(ev: GestureResponderEvent) {
+      if (onPressProp) {
+        onPressProp(ev);
+      }
+      onOpenChange(!open);
+    }
+
+    React.useLayoutEffect(() => {
+      if (augmentedRef.current) {
+        const augRef = augmentedRef.current as unknown as HTMLButtonElement;
+        augRef.dataset.state = open ? 'open' : 'closed';
+        augRef.type = 'button';
+      }
+    }, [open]);
+
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return (
+      <Dialog.Trigger disabled={disabled ?? undefined} asChild>
+        <Component
+          ref={augmentedRef}
+          onPress={onPress}
+          role='button'
+          disabled={disabled}
+          {...props}
+        />
+      </Dialog.Trigger>
+    );
+  }
+);
+
+Trigger.displayName = 'TriggerWebDialog';
+
+function Portal({ forceMount, container, children }: DialogPortalProps) {
+  return <Dialog.Portal forceMount={forceMount} children={children} container={container} />;
+}
+
+const Overlay = React.forwardRef<PressableRef, SlottablePressableProps & DialogOverlayProps>(
+  ({ asChild, forceMount, ...props }, ref) => {
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return (
+      <Dialog.Overlay forceMount={forceMount}>
+        <Component ref={ref} {...props} />
+      </Dialog.Overlay>
+    );
+  }
+);
+
+Overlay.displayName = 'OverlayWebDialog';
+
+const Content = React.forwardRef<ViewRef, SlottableViewProps & DialogContentProps>(
+  (
+    {
+      asChild,
+      forceMount,
+      onOpenAutoFocus,
+      onCloseAutoFocus,
+      onEscapeKeyDown,
+      onInteractOutside,
+      onPointerDownOutside,
+      ...props
+    },
+    ref
+  ) => {
+    const Component = asChild ? Slot.View : View;
+    return (
+      <Dialog.Content
+        onOpenAutoFocus={onOpenAutoFocus}
+        onCloseAutoFocus={onCloseAutoFocus}
+        onEscapeKeyDown={onEscapeKeyDown}
+        onInteractOutside={onInteractOutside}
+        onPointerDownOutside={onPointerDownOutside}
+        forceMount={forceMount}
+      >
+        <Component ref={ref} {...props} />
+      </Dialog.Content>
+    );
+  }
+);
+
+Content.displayName = 'ContentWebDialog';
+
+const Close = React.forwardRef<PressableRef, SlottablePressableProps>(
+  ({ asChild, onPress: onPressProp, disabled, ...props }, ref) => {
+    const augmentedRef = useAugmentedRef({ ref });
+    const { onOpenChange, open } = useRootContext();
+
+    function onPress(ev: GestureResponderEvent) {
+      if (onPressProp) {
+        onPressProp(ev);
+      }
+      onOpenChange(!open);
+    }
+
+    React.useLayoutEffect(() => {
+      if (augmentedRef.current) {
+        const augRef = augmentedRef.current as unknown as HTMLButtonElement;
+        augRef.type = 'button';
+      }
+    }, []);
+
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return (
+      <>
+        <Dialog.Close disabled={disabled ?? undefined} asChild>
+          <Component
+            ref={augmentedRef}
+            onPress={onPress}
+            role='button'
+            disabled={disabled}
+            {...props}
+          />
+        </Dialog.Close>
+      </>
+    );
+  }
+);
+
+Close.displayName = 'CloseWebDialog';
+
+const Title = React.forwardRef<TextRef, SlottableTextProps>(({ asChild, ...props }, ref) => {
+  const Component = asChild ? Slot.Text : Text;
+  return (
+    <Dialog.Title asChild>
+      <Component ref={ref} {...props} />
+    </Dialog.Title>
+  );
+});
+
+Title.displayName = 'TitleWebDialog';
+
+const Description = React.forwardRef<TextRef, SlottableTextProps>(({ asChild, ...props }, ref) => {
+  const Component = asChild ? Slot.Text : Text;
+  return (
+    <Dialog.Description asChild>
+      <Component ref={ref} {...props} />
+    </Dialog.Description>
+  );
+});
+
+Description.displayName = 'DescriptionWebDialog';
+
+export { Close, Content, Description, Overlay, Portal, Root, Title, Trigger, useRootContext };

package/dist/generated/components/primitives/dialog/index.ts

@@ -0,0 +1 @@
+export * from './dialog';

package/dist/generated/components/primitives/dialog/types.ts

@@ -0,0 +1,60 @@
+import type { ForceMountable } from '@rnr/types';
+
+type RootContext = {
+  open: boolean;
+  onOpenChange: (value: boolean) => void;
+};
+
+type DialogRootProps = {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (value: boolean) => void;
+};
+
+interface DialogPortalProps extends ForceMountable {
+  children: React.ReactNode;
+  /**
+   * Platform: NATIVE ONLY
+   */
+  hostName?: string;
+  /**
+   * Platform: WEB ONLY
+   */
+  container?: HTMLElement | null | undefined;
+}
+type DialogOverlayProps = ForceMountable & {
+  /**
+   * Platform: NATIVE ONLY - default: true
+   */
+  closeOnPress?: boolean;
+};
+type DialogContentProps = ForceMountable & {
+  /**
+   * Platform: WEB ONLY
+   */
+  onOpenAutoFocus?: (ev: Event) => void;
+  /**
+   * Platform: WEB ONLY
+   */
+  onCloseAutoFocus?: (ev: Event) => void;
+  /**
+   * Platform: WEB ONLY
+   */
+  onEscapeKeyDown?: (ev: Event) => void;
+  /**
+   * Platform: WEB ONLY
+   */
+  onInteractOutside?: (ev: Event) => void;
+  /**
+   * Platform: WEB ONLY
+   */
+  onPointerDownOutside?: (ev: Event) => void;
+};
+
+export type {
+  DialogContentProps,
+  DialogOverlayProps,
+  DialogPortalProps,
+  DialogRootProps,
+  RootContext,
+};