@cdx-ui/primitives 0.0.1-beta.79 → 0.0.1-beta.80

package/src/index.ts

@@ -5,6 +5,7 @@ export * from './checkbox';
 export * from './dialog';
 export * from './field';
 export * from './form';
+export * from './full-window-overlay';
 export * from './input';
 export * from './otp-input';
 export * from './link';
@@ -13,6 +14,8 @@ export { type EdgeInsets, OverlayInsetsProvider } from './overlay';
 export * from './select';
 export * from './switch';
 export * from './tile';
+export * from './toast';
+export * from './portal';
 export * from './progress-bar';
 export * from './radio';
 export type { InteractionState } from './types';

package/src/list-item/index.ts

@@ -1,7 +1,6 @@
 export type {
   IListItemPressablePassthrough,
   IListItemProps,
-  InterfaceListItemProps,
   ListItemCrossAlign,
   ListItemSize,
 } from './types';

package/src/portal/index.ts

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

package/src/portal/portal.tsx

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import { useEffect, useSyncExternalStore } from 'react';
+import { Platform, type View, type ViewStyle } from 'react-native';
+
+const DEFAULT_PORTAL_HOST = 'FORGE_UI_DEFAULT_HOST_NAME';
+
+type PortalMap = Map<string, React.ReactNode>;
+type PortalHostMap = Map<string, PortalMap>;
+
+interface PortalStore {
+  map: PortalHostMap;
+  listeners: Set<() => void>;
+}
+
+const store: PortalStore = {
+  map: new Map<string, PortalMap>().set(DEFAULT_PORTAL_HOST, new Map<string, React.ReactNode>()),
+  listeners: new Set(),
+};
+
+// --------------------------------------------------
+
+function emit() {
+  for (const cb of store.listeners) cb();
+}
+
+function getSnapshot() {
+  return store.map;
+}
+
+function subscribe(cb: () => void) {
+  store.listeners.add(cb);
+  return () => {
+    store.listeners.delete(cb);
+  };
+}
+
+function updatePortal(hostName: string, name: string, children: React.ReactNode) {
+  const next = new Map(store.map);
+  const portal = next.get(hostName) ?? new Map<string, React.ReactNode>();
+  portal.set(name, children);
+  next.set(hostName, portal);
+  store.map = next;
+  emit();
+}
+
+function removePortal(hostName: string, name: string) {
+  const next = new Map(store.map);
+  const portal = next.get(hostName) ?? new Map<string, React.ReactNode>();
+  portal.delete(name);
+  next.set(hostName, portal);
+  store.map = next;
+  emit();
+}
+
+// --------------------------------------------------
+
+export function PortalHost({ name = DEFAULT_PORTAL_HOST }: { name?: string }) {
+  const map = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const portalMap = map.get(name) ?? new Map<string, React.ReactNode>();
+  if (portalMap.size === 0) return null;
+  return <>{Array.from(portalMap.values())}</>;
+}
+
+// --------------------------------------------------
+
+export function Portal({
+  name,
+  hostName = DEFAULT_PORTAL_HOST,
+  children,
+}: {
+  name: string;
+  hostName?: string;
+  children: React.ReactNode;
+}) {
+  useEffect(() => {
+    updatePortal(hostName, name, children);
+    return () => {
+      removePortal(hostName, name);
+    };
+  }, [hostName, name, children]);
+
+  return null;
+}
+
+// --------------------------------------------------
+
+const ROOT: ViewStyle = {
+  flex: 1,
+};
+
+/**
+ * @deprecated use `FullWindowOverlay` from `react-native-screens` instead
+ * @example
+import { FullWindowOverlay } from "react-native-screens"
+const WindowOverlay = Platform.OS === "ios" ? FullWindowOverlay : Fragment
+// Wrap the `<PortalHost/>` with `<WindowOverlay/>`
+<WindowOverlay><PortalHost/></WindowOverlay>
+ */
+export function useModalPortalRoot() {
+  const ref = React.useRef<View>(null);
+  const [offset, setSideOffSet] = React.useState(0);
+
+  const onLayout = React.useCallback(() => {
+    if (Platform.OS === 'web') return;
+    ref.current?.measure((_x, _y, _width, _height, _pageX, pageY) => {
+      setSideOffSet(-pageY);
+    });
+  }, []);
+
+  return {
+    ref,
+    offset,
+    onLayout,
+    style: ROOT,
+  };
+}

package/src/slot/index.tsx

@@ -0,0 +1,162 @@
+/* https://rn-primitives.vercel.app/slot */
+
+import * as React from 'react';
+import {
+  type PressableStateCallbackType,
+  type ImageStyle as RNImageStyle,
+  type PressableProps as RNPressableProps,
+  type StyleProp,
+} from 'react-native';
+
+export function Slot<T extends React.ElementType>(props: React.ComponentPropsWithRef<T>) {
+  const { children, ref: forwardedRef, ...restOfProps } = props;
+
+  if (!React.isValidElement(children)) {
+    console.log('Slot - Invalid asChild element', children);
+    return null;
+  }
+
+  if (isTextChildren(children)) {
+    console.log('Slot - Text children are not supported', children);
+    return null;
+  }
+
+  const childrenProps = (children.props as Record<string, any>) ?? {};
+
+  if (children.type === React.Fragment) {
+    return (
+      <>
+        {React.Children.toArray(childrenProps.children).map((child): any =>
+          React.isValidElement(child)
+            ? Slot({ ...restOfProps, ref: forwardedRef, children: child })
+            : child,
+        )}
+      </>
+    );
+  }
+
+  const { ref: childRef, ...childProps } = childrenProps;
+
+  return React.cloneElement(children, {
+    ...mergeProps(restOfProps, childProps),
+    ref: forwardedRef ? composeRefs(forwardedRef, childRef) : childRef,
+  } as unknown as Partial<React.ComponentPropsWithRef<T>>);
+}
+
+Slot.displayName = 'Slot';
+
+// eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+function setRef<T>(ref: React.Ref<T> | undefined, value: T | null): (() => void) | void {
+  if (typeof ref === 'function') {
+    const cleanup = ref(value);
+
+    if (typeof cleanup === 'function') {
+      return cleanup;
+    }
+
+    return;
+  }
+
+  if (ref != null) {
+    ref.current = value;
+    return () => {
+      ref.current = null;
+    };
+  }
+}
+
+function composeRefs<T>(...refs: (React.Ref<T> | undefined)[]): React.RefCallback<T> {
+  let cleanups: (() => void)[] = [];
+
+  return (node) => {
+    cleanups.forEach((cleanup) => cleanup());
+    cleanups = [];
+
+    if (node == null) {
+      refs.forEach((ref) => {
+        if (typeof ref === 'function') {
+          ref(null);
+        } else if (ref != null) {
+          ref.current = null;
+        }
+      });
+      return;
+    }
+
+    cleanups = refs
+      .map((ref) => setRef(ref, node))
+      .filter((cleanup): cleanup is () => void => cleanup != null);
+  };
+}
+
+type AnyProps = Record<string, any>;
+
+// TODO: Compare with mergeProps from @react-aria/utils
+function mergeProps(slotProps: AnyProps, childProps: AnyProps) {
+  // all child props should override
+  const overrideProps = { ...childProps };
+
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      // if the handler exists on both, we compose them
+      if (slotPropValue && childPropValue) {
+        overrideProps[propName] = (...args: unknown[]) => {
+          childPropValue(...args);
+          slotPropValue(...args);
+        };
+      }
+      // but if it exists only on the slot, we use only this one
+      else if (slotPropValue) {
+        overrideProps[propName] = slotPropValue;
+      }
+    }
+    // if it's `style`, we merge them
+    else if (propName === 'style') {
+      overrideProps[propName] = combineStyles(slotPropValue, childPropValue);
+    } else if (propName === 'className') {
+      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(' ');
+    }
+  }
+
+  return { ...slotProps, ...overrideProps };
+}
+
+type PressableStyle = RNPressableProps['style'];
+type ImageStyle = StyleProp<RNImageStyle>;
+type Style = PressableStyle | ImageStyle;
+
+function combineStyles(slotStyle?: Style, childValue?: Style) {
+  if (typeof slotStyle === 'function' && typeof childValue === 'function') {
+    return (state: PressableStateCallbackType) => {
+      return [slotStyle(state), childValue(state)];
+    };
+  }
+  if (typeof slotStyle === 'function') {
+    return (state: PressableStateCallbackType) => {
+      return childValue ? [slotStyle(state), childValue] : slotStyle(state);
+    };
+  }
+  if (typeof childValue === 'function') {
+    return (state: PressableStateCallbackType) => {
+      return slotStyle ? [slotStyle, childValue(state)] : childValue(state);
+    };
+  }
+
+  if (slotStyle && childValue) {
+    return [slotStyle, childValue];
+  }
+
+  return slotStyle ?? childValue;
+}
+
+export function isTextChildren(
+  children: React.ReactNode | ((state: PressableStateCallbackType) => React.ReactNode),
+) {
+  return Array.isArray(children)
+    ? children.every((child) => typeof child === 'string')
+    : typeof children === 'string';
+}

package/src/toast/ToastRoot.tsx

@@ -0,0 +1,39 @@
+import { forwardRef, useId } from 'react';
+import { Platform, View } from 'react-native';
+import { Slot } from '../slot';
+import { ToastProvider } from './context';
+import type { IToastProps } from './types';
+
+export interface ToastRootProps extends IToastProps {
+  asChild?: boolean;
+}
+
+export const ToastRoot = forwardRef<View, ToastRootProps>(
+  ({ asChild, id, role = 'status', ...viewProps }, ref) => {
+    const generatedId = useId();
+    const nativeID = id || generatedId;
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <ToastProvider value={{ nativeID }}>
+        <Comp
+          ref={ref}
+          role={role}
+          {...(Platform.OS !== 'web' && {
+            'aria-live': role === 'alert' ? 'assertive' : 'polite',
+            'aria-atomic': true,
+          })}
+          {...(Platform.OS === 'web' &&
+            role === 'alert' && {
+              'aria-live': 'assertive',
+            })}
+          nativeID={nativeID}
+          {...viewProps}
+        />
+      </ToastProvider>
+    );
+  },
+);
+
+ToastRoot.displayName = 'ToastRoot';

package/src/toast/context.tsx

@@ -0,0 +1,4 @@
+import { createContext } from '@cdx-ui/utils';
+import type { IToastContextValue } from './types';
+
+export const [ToastProvider, useToastContext] = createContext<IToastContextValue>('ToastContext');

package/src/toast/index.ts

@@ -0,0 +1,2 @@
+export { ToastProvider, useToastContext } from './context';
+export { ToastRoot, type ToastRootProps } from './ToastRoot';

package/src/toast/types.ts

@@ -0,0 +1,17 @@
+import type { ViewProps } from 'react-native';
+
+export interface IToastContextValue {
+  /** Unique identifier for the toast */
+  nativeID: string;
+}
+
+export interface IToastProps extends ViewProps {
+  /** Unique identifier for the toast */
+  id?: string;
+  /**
+   * ARIA role for the toast element.
+   * Use `'alert'` for urgent/danger toasts that require assertive announcements.
+   * @default 'status'
+   */
+  role?: 'status' | 'alert';
+}

package/src/slot/index.ts

@@ -1 +0,0 @@
-export { Slot, isTextChildren } from '@rn-primitives/slot';