@react-native-reusables/cli 0.0.9 → 0.0.10

package/dist/generated/components/primitives/dropdown-menu/dropdown-menu.web.tsx

@@ -0,0 +1,521 @@
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import * as React from 'react';
+import { GestureResponderEvent, Pressable, Text, View } from 'react-native';
+import { useAugmentedRef } from '@rnr/hooks';
+import * as Slot from '@rnr/slot';
+import type {
+  ForceMountable,
+  PositionedContentProps,
+  PressableRef,
+  SlottablePressableProps,
+  SlottableTextProps,
+  SlottableViewProps,
+  TextRef,
+  ViewRef,
+} from '@rnr/types';
+import { EmptyGestureResponderEvent } from '@rnr/utils';
+import type {
+  DropdownMenuCheckboxItemProps,
+  DropdownMenuItemProps,
+  DropdownMenuOverlayProps,
+  DropdownMenuPortalProps,
+  DropdownMenuRadioGroupProps,
+  DropdownMenuRadioItemProps,
+  DropdownMenuRootProps,
+  DropdownMenuSeparatorProps,
+  DropdownMenuSubProps,
+  DropdownMenuSubTriggerProps,
+} from './types';
+
+const DropdownMenuContext = React.createContext<DropdownMenuRootProps | null>(null);
+
+const Root = React.forwardRef<ViewRef, SlottableViewProps & DropdownMenuRootProps>(
+  ({ asChild, open, onOpenChange, ...viewProps }, ref) => {
+    const Component = asChild ? Slot.View : View;
+    return (
+      <DropdownMenuContext.Provider value={{ open, onOpenChange }}>
+        <DropdownMenu.Root open={open} onOpenChange={onOpenChange}>
+          <Component ref={ref} {...viewProps} />
+        </DropdownMenu.Root>
+      </DropdownMenuContext.Provider>
+    );
+  }
+);
+
+Root.displayName = 'RootWebDropdownMenu';
+
+function useRootContext() {
+  const context = React.useContext(DropdownMenuContext);
+  if (!context) {
+    throw new Error(
+      'DropdownMenu compound components cannot be rendered outside the DropdownMenu component'
+    );
+  }
+  return context;
+}
+
+const Trigger = React.forwardRef<PressableRef, SlottablePressableProps>(
+  ({ asChild, disabled = false, ...props }, ref) => {
+    const augmentedRef = useAugmentedRef({ ref });
+    const { open } = useRootContext();
+
+    React.useLayoutEffect(() => {
+      if (augmentedRef.current) {
+        const augRef = augmentedRef.current as unknown as HTMLDivElement;
+        augRef.dataset.state = open ? 'open' : 'closed';
+      }
+    }, [open]);
+
+    React.useLayoutEffect(() => {
+      if (augmentedRef.current) {
+        const augRef = augmentedRef.current as unknown as HTMLDivElement;
+        if (disabled) {
+          augRef.dataset.disabled = 'true';
+        } else {
+          augRef.dataset.disabled = undefined;
+        }
+      }
+    }, [disabled]);
+
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return (
+      <DropdownMenu.Trigger disabled={disabled ?? undefined} asChild>
+        <Component ref={augmentedRef} {...props} />
+      </DropdownMenu.Trigger>
+    );
+  }
+);
+
+Trigger.displayName = 'TriggerWebDropdownMenu';
+
+function Portal({ forceMount, container, children }: DropdownMenuPortalProps) {
+  return <DropdownMenu.Portal forceMount={forceMount} container={container} children={children} />;
+}
+
+const Overlay = React.forwardRef<PressableRef, SlottablePressableProps & DropdownMenuOverlayProps>(
+  ({ asChild, ...props }, ref) => {
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return <Component ref={ref} {...props} />;
+  }
+);
+
+Overlay.displayName = 'OverlayWebDropdownMenu';
+
+const DropdownMenuContentContext = React.createContext<{
+  close: () => void;
+} | null>(null);
+
+const Content = React.forwardRef<PressableRef, SlottablePressableProps & PositionedContentProps>(
+  (
+    {
+      asChild = false,
+      forceMount,
+      align,
+      side,
+      sideOffset,
+      alignOffset = 0,
+      avoidCollisions = true,
+      insets,
+      loop = true,
+      onCloseAutoFocus,
+      onEscapeKeyDown,
+      onPointerDownOutside,
+      onFocusOutside,
+      onInteractOutside,
+      collisionBoundary,
+      sticky,
+      hideWhenDetached,
+      ...props
+    },
+    ref
+  ) => {
+    const itemRef = React.useRef<HTMLDivElement>(null);
+
+    function close() {
+      itemRef.current?.click();
+    }
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return (
+      <DropdownMenuContentContext.Provider value={{ close }}>
+        <DropdownMenu.Content
+          forceMount={forceMount}
+          alignOffset={alignOffset}
+          avoidCollisions={avoidCollisions}
+          collisionPadding={insets}
+          loop={loop}
+          onCloseAutoFocus={onCloseAutoFocus}
+          onEscapeKeyDown={onEscapeKeyDown}
+          onPointerDownOutside={onPointerDownOutside}
+          onFocusOutside={onFocusOutside}
+          onInteractOutside={onInteractOutside}
+          collisionBoundary={collisionBoundary}
+          sticky={sticky}
+          hideWhenDetached={hideWhenDetached}
+          align={align}
+          side={side}
+          sideOffset={sideOffset}
+        >
+          <Component ref={ref} {...props} />
+          <DropdownMenu.Item
+            ref={itemRef}
+            aria-hidden
+            style={{ position: 'fixed', top: 0, left: 0, zIndex: -999999999 }}
+            aria-disabled
+            tabIndex={-1}
+            hidden
+          />
+        </DropdownMenu.Content>
+      </DropdownMenuContentContext.Provider>
+    );
+  }
+);
+
+Content.displayName = 'ContentWebDropdownMenu';
+
+function useDropdownMenuContentContext() {
+  const context = React.useContext(DropdownMenuContentContext);
+  if (!context) {
+    throw new Error(
+      'DropdownMenu compound components cannot be rendered outside the DropdownMenu component'
+    );
+  }
+  return context;
+}
+
+const Item = React.forwardRef<PressableRef, SlottablePressableProps & DropdownMenuItemProps>(
+  (
+    {
+      asChild,
+      textValue,
+      closeOnPress = true,
+      onPress: onPressProp,
+      onKeyDown: onKeyDownProp,
+      ...props
+    },
+    ref
+  ) => {
+    const { close } = useDropdownMenuContentContext();
+
+    function onKeyDown(ev: React.KeyboardEvent) {
+      onKeyDownProp?.(ev);
+      if (ev.key === 'Enter' || ev.key === ' ') {
+        onPressProp?.(EmptyGestureResponderEvent);
+        if (closeOnPress) {
+          close();
+        }
+      }
+    }
+
+    function onPress(ev: GestureResponderEvent) {
+      onPressProp?.(ev);
+      if (closeOnPress) {
+        close();
+      }
+    }
+
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return (
+      <DropdownMenu.Item
+        textValue={textValue}
+        disabled={props.disabled ?? undefined}
+        onSelect={closeOnPress ? undefined : onSelected}
+        asChild
+      >
+        <Component
+          ref={ref}
+          // @ts-expect-error web only
+          onKeyDown={onKeyDown}
+          onPress={onPress}
+          {...props}
+        />
+      </DropdownMenu.Item>
+    );
+  }
+);
+
+Item.displayName = 'ItemWebDropdownMenu';
+
+const Group = React.forwardRef<ViewRef, SlottableViewProps>(({ asChild, ...props }, ref) => {
+  const Component = asChild ? Slot.View : View;
+  return (
+    <DropdownMenu.Group asChild>
+      <Component ref={ref} {...props} />
+    </DropdownMenu.Group>
+  );
+});
+
+Group.displayName = 'GroupWebDropdownMenu';
+
+const Label = React.forwardRef<TextRef, SlottableTextProps>(({ asChild, ...props }, ref) => {
+  const Component = asChild ? Slot.Text : Text;
+  return (
+    <DropdownMenu.Label asChild>
+      <Component ref={ref} {...props} />
+    </DropdownMenu.Label>
+  );
+});
+
+Label.displayName = 'LabelWebDropdownMenu';
+
+const CheckboxItem = React.forwardRef<
+  PressableRef,
+  SlottablePressableProps & DropdownMenuCheckboxItemProps
+>(
+  (
+    {
+      asChild,
+      checked,
+      onCheckedChange,
+      textValue,
+      disabled = false,
+      closeOnPress = true,
+      onPress: onPressProp,
+      onKeyDown: onKeyDownProp,
+      ...props
+    },
+    ref
+  ) => {
+    const { close } = useDropdownMenuContentContext();
+
+    function onKeyDown(ev: React.KeyboardEvent) {
+      onKeyDownProp?.(ev);
+      if (ev.key === 'Enter' || ev.key === ' ') {
+        onPressProp?.(EmptyGestureResponderEvent);
+        onCheckedChange?.(!checked);
+        if (closeOnPress) {
+          close();
+        }
+      }
+    }
+
+    function onPress(ev: GestureResponderEvent) {
+      onPressProp?.(ev);
+      onCheckedChange?.(!checked);
+      if (closeOnPress) {
+        close();
+      }
+    }
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return (
+      <DropdownMenu.CheckboxItem
+        textValue={textValue}
+        checked={checked}
+        onCheckedChange={onCheckedChange}
+        onSelect={closeOnPress ? undefined : onSelected}
+        disabled={disabled ?? undefined}
+        asChild
+      >
+        <Component
+          ref={ref}
+          // @ts-expect-error web only
+          onKeyDown={onKeyDown}
+          onPress={onPress}
+          role='button'
+          {...props}
+        />
+      </DropdownMenu.CheckboxItem>
+    );
+  }
+);
+
+CheckboxItem.displayName = 'CheckboxItemWebDropdownMenu';
+
+const DropdownMenuRadioGroupContext = React.createContext<{
+  value?: string;
+  onValueChange?: (value: string) => void;
+} | null>(null);
+
+const RadioGroup = React.forwardRef<ViewRef, SlottableViewProps & DropdownMenuRadioGroupProps>(
+  ({ asChild, value, onValueChange, ...props }, ref) => {
+    const Component = asChild ? Slot.View : View;
+    return (
+      <DropdownMenuRadioGroupContext.Provider value={{ value, onValueChange }}>
+        <DropdownMenu.RadioGroup value={value} onValueChange={onValueChange} asChild>
+          <Component ref={ref} {...props} />
+        </DropdownMenu.RadioGroup>
+      </DropdownMenuRadioGroupContext.Provider>
+    );
+  }
+);
+
+RadioGroup.displayName = 'RadioGroupWebDropdownMenu';
+
+function useDropdownMenuRadioGroupContext() {
+  const context = React.useContext(DropdownMenuRadioGroupContext);
+  if (!context) {
+    throw new Error(
+      'DropdownMenuRadioGroup compound components cannot be rendered outside the DropdownMenuRadioGroup component'
+    );
+  }
+  return context;
+}
+
+const RadioItem = React.forwardRef<
+  PressableRef,
+  SlottablePressableProps & DropdownMenuRadioItemProps
+>(
+  (
+    {
+      asChild,
+      value,
+      textValue,
+      closeOnPress = true,
+      onPress: onPressProp,
+      onKeyDown: onKeyDownProp,
+      ...props
+    },
+    ref
+  ) => {
+    const { onValueChange } = useDropdownMenuRadioGroupContext();
+    const { close } = useDropdownMenuContentContext();
+
+    function onKeyDown(ev: React.KeyboardEvent) {
+      onKeyDownProp?.(ev);
+      if (ev.key === 'Enter' || ev.key === ' ') {
+        onValueChange?.(value);
+        onPressProp?.(EmptyGestureResponderEvent);
+        if (closeOnPress) {
+          close();
+        }
+      }
+    }
+
+    function onPress(ev: GestureResponderEvent) {
+      onValueChange?.(value);
+      onPressProp?.(ev);
+      if (closeOnPress) {
+        close();
+      }
+    }
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return (
+      <DropdownMenu.RadioItem
+        value={value}
+        textValue={textValue}
+        disabled={props.disabled ?? undefined}
+        onSelect={closeOnPress ? undefined : onSelected}
+        asChild
+      >
+        <Component
+          ref={ref}
+          // @ts-expect-error web only
+          onKeyDown={onKeyDown}
+          onPress={onPress}
+          {...props}
+        />
+      </DropdownMenu.RadioItem>
+    );
+  }
+);
+
+RadioItem.displayName = 'RadioItemWebDropdownMenu';
+
+const ItemIndicator = React.forwardRef<ViewRef, SlottableViewProps & ForceMountable>(
+  ({ asChild, forceMount, ...props }, ref) => {
+    const Component = asChild ? Slot.View : View;
+    return (
+      <DropdownMenu.ItemIndicator forceMount={forceMount} asChild>
+        <Component ref={ref} {...props} />
+      </DropdownMenu.ItemIndicator>
+    );
+  }
+);
+
+ItemIndicator.displayName = 'ItemIndicatorWebDropdownMenu';
+
+const Separator = React.forwardRef<ViewRef, SlottableViewProps & DropdownMenuSeparatorProps>(
+  ({ asChild, decorative, ...props }, ref) => {
+    const Component = asChild ? Slot.View : View;
+    return (
+      <DropdownMenu.Separator asChild>
+        <Component ref={ref} {...props} />
+      </DropdownMenu.Separator>
+    );
+  }
+);
+
+Separator.displayName = 'SeparatorWebDropdownMenu';
+
+const DropdownMenuSubContext = React.createContext<{
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+} | null>(null);
+
+const Sub = React.forwardRef<ViewRef, SlottableViewProps & DropdownMenuSubProps>(
+  ({ asChild, open, onOpenChange, ...props }, ref) => {
+    const Component = asChild ? Slot.View : View;
+    return (
+      <DropdownMenuSubContext.Provider value={{ open, onOpenChange }}>
+        <DropdownMenu.Sub open={open} onOpenChange={onOpenChange}>
+          <Component ref={ref} {...props} />
+        </DropdownMenu.Sub>
+      </DropdownMenuSubContext.Provider>
+    );
+  }
+);
+
+Sub.displayName = 'SubWebDropdownMenu';
+
+function useSubContext() {
+  const context = React.useContext(DropdownMenuSubContext);
+  if (!context) {
+    throw new Error(
+      'DropdownMenu compound components cannot be rendered outside the DropdownMenu component'
+    );
+  }
+  return context;
+}
+
+const SubTrigger = React.forwardRef<
+  PressableRef,
+  SlottablePressableProps & DropdownMenuSubTriggerProps
+>(({ asChild, textValue, disabled = false, ...props }, ref) => {
+  const Component = asChild ? Slot.Pressable : Pressable;
+  return (
+    <DropdownMenu.SubTrigger disabled={disabled ?? undefined} textValue={textValue} asChild>
+      <Component ref={ref} {...props} />
+    </DropdownMenu.SubTrigger>
+  );
+});
+
+SubTrigger.displayName = 'SubTriggerWebDropdownMenu';
+
+const SubContent = React.forwardRef<PressableRef, SlottablePressableProps & ForceMountable>(
+  ({ asChild = false, forceMount, ...props }, ref) => {
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return (
+      <DropdownMenu.Portal>
+        <DropdownMenu.SubContent forceMount={forceMount}>
+          <Component ref={ref} {...props} />
+        </DropdownMenu.SubContent>
+      </DropdownMenu.Portal>
+    );
+  }
+);
+
+Content.displayName = 'ContentWebDropdownMenu';
+
+export {
+  CheckboxItem,
+  Content,
+  Group,
+  Item,
+  ItemIndicator,
+  Label,
+  Overlay,
+  Portal,
+  RadioGroup,
+  RadioItem,
+  Root,
+  Separator,
+  Sub,
+  SubContent,
+  SubTrigger,
+  Trigger,
+  useRootContext,
+  useSubContext,
+};
+
+function onSelected(ev: Event) {
+  ev.preventDefault();
+}

package/dist/generated/components/primitives/dropdown-menu/index.ts

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

package/dist/generated/components/primitives/dropdown-menu/types.ts

@@ -0,0 +1,71 @@
+import type { ForceMountable } from '@rnr/types';
+
+interface DropdownMenuRootProps {
+  open: boolean;
+  onOpenChange: (value: boolean) => void;
+}
+
+interface DropdownMenuPortalProps extends ForceMountable {
+  children: React.ReactNode;
+  /**
+   * Platform: NATIVE ONLY
+   */
+  hostName?: string;
+  /**
+   * Platform: WEB ONLY
+   */
+  container?: HTMLElement | null | undefined;
+}
+
+interface DropdownMenuOverlayProps extends ForceMountable {
+  closeOnPress?: boolean;
+}
+
+interface DropdownMenuItemProps {
+  textValue?: string;
+  closeOnPress?: boolean;
+}
+
+interface DropdownMenuCheckboxItemProps {
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+  closeOnPress?: boolean;
+  textValue?: string;
+}
+
+interface DropdownMenuRadioGroupProps {
+  value: string | undefined;
+  onValueChange: (value: string) => void;
+}
+
+interface DropdownMenuRadioItemProps {
+  value: string;
+  textValue?: string;
+  closeOnPress?: boolean;
+}
+
+interface DropdownMenuSeparatorProps {
+  decorative?: boolean;
+}
+
+interface DropdownMenuSubProps {
+  open: boolean;
+  onOpenChange: (value: boolean) => void;
+}
+
+interface DropdownMenuSubTriggerProps {
+  textValue?: string;
+}
+
+export type {
+  DropdownMenuCheckboxItemProps,
+  DropdownMenuItemProps,
+  DropdownMenuOverlayProps,
+  DropdownMenuPortalProps,
+  DropdownMenuRadioGroupProps,
+  DropdownMenuRadioItemProps,
+  DropdownMenuRootProps,
+  DropdownMenuSeparatorProps,
+  DropdownMenuSubProps,
+  DropdownMenuSubTriggerProps,
+};

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

@@ -0,0 +1,3 @@
+export { useAugmentedRef } from './useAugmentedRef';
+export { useRelativePosition, type LayoutPosition } from './useRelativePosition';
+export { useControllableState } from './useControllableState';

package/dist/generated/components/primitives/hooks/useAugmentedRef.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+interface AugmentRefProps<T> {
+  ref: React.Ref<T>;
+  methods?: Record<string, (...args: any[]) => any>;
+  deps?: any[];
+}
+
+export function useAugmentedRef<T>({
+  ref,
+  methods,
+  deps = [],
+}: AugmentRefProps<T>) {
+  const augmentedRef = React.useRef<T>(null);
+  React.useImperativeHandle(
+    ref,
+    () => {
+      if (typeof augmentedRef === 'function' || !augmentedRef?.current) {
+        return {} as T;
+      }
+      return {
+        ...augmentedRef.current,
+        ...methods,
+      };
+    },
+    deps
+  );
+  return augmentedRef;
+}

package/dist/generated/components/primitives/hooks/useControllableState.tsx

@@ -0,0 +1,75 @@
+// This project uses code from WorkOS/Radix Primitives.
+// The code is licensed under the MIT License.
+// https://github.com/radix-ui/primitives/tree/main
+
+import * as React from 'react';
+
+type UseControllableStateParams<T> = {
+  prop?: T | undefined;
+  defaultProp?: T | undefined;
+  onChange?: (state: T) => void;
+};
+
+type SetStateFn<T> = (prevState?: T) => T;
+
+function useControllableState<T>({
+  prop,
+  defaultProp,
+  onChange = () => {},
+}: UseControllableStateParams<T>) {
+  const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({ defaultProp, onChange });
+  const isControlled = prop !== undefined;
+  const value = isControlled ? prop : uncontrolledProp;
+  const handleChange = useCallbackRef(onChange);
+
+  const setValue: React.Dispatch<React.SetStateAction<T | undefined>> = React.useCallback(
+    (nextValue) => {
+      if (isControlled) {
+        const setter = nextValue as SetStateFn<T>;
+        const value = typeof nextValue === 'function' ? setter(prop) : nextValue;
+        if (value !== prop) handleChange(value as T);
+      } else {
+        setUncontrolledProp(nextValue);
+      }
+    },
+    [isControlled, prop, setUncontrolledProp, handleChange]
+  );
+
+  return [value, setValue] as const;
+}
+
+function useUncontrolledState<T>({
+  defaultProp,
+  onChange,
+}: Omit<UseControllableStateParams<T>, 'prop'>) {
+  const uncontrolledState = React.useState<T | undefined>(defaultProp);
+  const [value] = uncontrolledState;
+  const prevValueRef = React.useRef(value);
+  const handleChange = useCallbackRef(onChange);
+
+  React.useEffect(() => {
+    if (prevValueRef.current !== value) {
+      handleChange(value as T);
+      prevValueRef.current = value;
+    }
+  }, [value, prevValueRef, handleChange]);
+
+  return uncontrolledState;
+}
+
+/**
+ * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a
+ * prop or avoid re-executing effects when passed as a dependency
+ */
+function useCallbackRef<T extends (...args: any[]) => any>(callback: T | undefined): T {
+  const callbackRef = React.useRef(callback);
+
+  React.useEffect(() => {
+    callbackRef.current = callback;
+  });
+
+  // https://github.com/facebook/react/issues/19240
+  return React.useMemo(() => ((...args) => callbackRef.current?.(...args)) as T, []);
+}
+
+export { useControllableState };