@tamagui/dismissable 1.0.1-beta.100

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@tamagui/dismissable",
+  "version": "1.0.1-beta.100",
+  "sideEffects": true,
+  "source": "src/index.ts",
+  "types": "./types/index.d.ts",
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "module:jsx": "dist/jsx",
+  "files": [
+    "src",
+    "types",
+    "dist"
+  ],
+  "scripts": {
+    "build": "tamagui-build",
+    "watch": "tamagui-build --watch",
+    "clean": "tamagui-build clean",
+    "clean:build": "tamagui-build clean:build"
+  },
+  "dependencies": {
+    "@radix-ui/react-use-callback-ref": "^0.1.0",
+    "@radix-ui/react-use-escape-keydown": "^0.1.0",
+    "@tamagui/compose-refs": "^1.0.1-beta.100",
+    "@tamagui/core": "^1.0.1-beta.100"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  },
+  "devDependencies": {
+    "@tamagui/build": "^1.0.1-beta.100",
+    "react": "*",
+    "react-dom": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/Dismissable.native.tsx

@@ -0,0 +1,11 @@
+import { forwardRef } from 'react'
+
+import { DismissableBranchProps, DismissableProps } from './DismissableProps'
+
+export const Dismissable = forwardRef((props: DismissableProps, _ref) => {
+  return props.children as any
+})
+
+export const DismissableBranch = forwardRef((props: DismissableBranchProps, _ref) => {
+  return props.children as any
+})

package/src/Dismissable.tsx

@@ -0,0 +1,330 @@
+// forked from radix-ui
+// https://github.com/radix-ui/primitives/blob/cfd8dcba5fa6a0e751486af418d05a7b88a7f541/packages/react/dismissable-layer/src/DismissableLayer.tsx#L324
+
+import { useCallbackRef } from '@radix-ui/react-use-callback-ref'
+import { useEscapeKeydown } from '@radix-ui/react-use-escape-keydown'
+import { useComposedRefs } from '@tamagui/compose-refs'
+import { composeEventHandlers } from '@tamagui/core'
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
+
+import { DismissableBranchProps, DismissableProps } from './DismissableProps'
+
+function dispatchDiscreteCustomEvent<E extends CustomEvent>(target: E['target'], event: E) {
+  if (target) ReactDOM.flushSync(() => target.dispatchEvent(event))
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Dismissable
+ * -----------------------------------------------------------------------------------------------*/
+
+const DISMISSABLE_LAYER_NAME = 'Dismissable'
+const CONTEXT_UPDATE = 'dismissable.update'
+const POINTER_DOWN_OUTSIDE = 'dismissable.pointerDownOutside'
+const FOCUS_OUTSIDE = 'dismissable.focusOutside'
+
+let originalBodyPointerEvents: string
+
+const DismissableContext = React.createContext({
+  layers: new Set<HTMLDivElement>(),
+  layersWithOutsidePointerEventsDisabled: new Set<HTMLDivElement>(),
+  branches: new Set<HTMLDivElement>(),
+})
+
+const Dismissable = React.forwardRef<HTMLDivElement, DismissableProps>((props, forwardedRef) => {
+  const {
+    disableOutsidePointerEvents = false,
+    onEscapeKeyDown,
+    onPointerDownOutside,
+    onFocusOutside,
+    onInteractOutside,
+    onDismiss,
+    ...layerProps
+  } = props
+  const context = React.useContext(DismissableContext)
+  const [node, setNode] = React.useState<HTMLDivElement | null>(null)
+  const [, force] = React.useState({})
+  const composedRefs = useComposedRefs(forwardedRef, (node) => setNode(node))
+  const layers = Array.from(context.layers)
+  const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1); // prettier-ignore
+  const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled); // prettier-ignore
+  const index = node ? layers.indexOf(node) : -1
+  const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0
+  const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex
+
+  const pointerDownOutside = usePointerDownOutside((event) => {
+    const target = event.target as HTMLDivElement
+    const isPointerDownOnBranch = [...context.branches].some((branch) => branch.contains(target))
+    if (!isPointerEventsEnabled || isPointerDownOnBranch) return
+    onPointerDownOutside?.(event)
+    onInteractOutside?.(event)
+    if (!event.defaultPrevented) onDismiss?.()
+  })
+
+  const focusOutside = useFocusOutside((event) => {
+    const target = event.target as HTMLDivElement
+    const isFocusInBranch = [...context.branches].some((branch) => branch.contains(target))
+    if (isFocusInBranch) return
+    onFocusOutside?.(event)
+    onInteractOutside?.(event)
+    if (!event.defaultPrevented) onDismiss?.()
+  })
+
+  useEscapeKeydown((event) => {
+    const isHighestLayer = index === context.layers.size - 1
+    if (!isHighestLayer) return
+    onEscapeKeyDown?.(event)
+    if (!event.defaultPrevented && onDismiss) {
+      event.preventDefault()
+      onDismiss()
+    }
+  })
+
+  React.useEffect(() => {
+    if (!node) return
+    if (disableOutsidePointerEvents) {
+      if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
+        originalBodyPointerEvents = document.body.style.pointerEvents
+        document.body.style.pointerEvents = 'none'
+      }
+      context.layersWithOutsidePointerEventsDisabled.add(node)
+    }
+    context.layers.add(node)
+    dispatchUpdate()
+    return () => {
+      if (
+        disableOutsidePointerEvents &&
+        context.layersWithOutsidePointerEventsDisabled.size === 1
+      ) {
+        document.body.style.pointerEvents = originalBodyPointerEvents
+      }
+    }
+  }, [node, disableOutsidePointerEvents, context])
+
+  /**
+   * We purposefully prevent combining this effect with the `disableOutsidePointerEvents` effect
+   * because a change to `disableOutsidePointerEvents` would remove this layer from the stack
+   * and add it to the end again so the layering order wouldn't be _creation order_.
+   * We only want them to be removed from context stacks when unmounted.
+   */
+  React.useEffect(() => {
+    return () => {
+      if (!node) return
+      context.layers.delete(node)
+      context.layersWithOutsidePointerEventsDisabled.delete(node)
+      dispatchUpdate()
+    }
+  }, [node, context])
+
+  React.useEffect(() => {
+    const handleUpdate = () => force({})
+    document.addEventListener(CONTEXT_UPDATE, handleUpdate)
+    return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate)
+  }, [])
+
+  return (
+    <div
+      {...layerProps}
+      // @ts-ignore
+      ref={composedRefs}
+      style={{
+        display: 'contents',
+        pointerEvents: isBodyPointerEventsDisabled
+          ? isPointerEventsEnabled
+            ? 'auto'
+            : 'none'
+          : undefined,
+        // @ts-ignore
+        ...props.style,
+      }}
+      onFocusCapture={composeEventHandlers(
+        // @ts-ignore
+        props.onFocusCapture,
+        focusOutside.onFocusCapture
+      )}
+      onBlurCapture={composeEventHandlers(
+        // @ts-ignore
+        props.onBlurCapture,
+        focusOutside.onBlurCapture
+      )}
+      // @ts-ignore
+      onPointerDownCapture={composeEventHandlers(
+        // @ts-ignore
+        props.onPointerDownCapture,
+        pointerDownOutside.onPointerDownCapture
+      )}
+    />
+  )
+})
+
+Dismissable.displayName = DISMISSABLE_LAYER_NAME
+
+/* -------------------------------------------------------------------------------------------------
+ * DismissableBranch
+ * -----------------------------------------------------------------------------------------------*/
+
+const BRANCH_NAME = 'DismissableBranch'
+
+const DismissableBranch = React.forwardRef<HTMLDivElement, DismissableBranchProps>(
+  (props, forwardedRef) => {
+    const context = React.useContext(DismissableContext)
+    const ref = React.useRef<HTMLDivElement>(null)
+    const composedRefs = useComposedRefs(forwardedRef, ref)
+
+    React.useEffect(() => {
+      const node = ref.current
+      if (node) {
+        context.branches.add(node)
+        return () => {
+          context.branches.delete(node)
+        }
+      }
+    }, [context.branches])
+
+    return <div style={{ display: 'contents' }} {...props} ref={composedRefs} />
+  }
+)
+
+DismissableBranch.displayName = BRANCH_NAME
+
+/* -----------------------------------------------------------------------------------------------*/
+
+export type PointerDownOutsideEvent = CustomEvent<{ originalEvent: PointerEvent }>
+export type FocusOutsideEvent = CustomEvent<{ originalEvent: FocusEvent }>
+
+/**
+ * Listens for `pointerdown` outside a react subtree. We use `pointerdown` rather than `pointerup`
+ * to mimic layer dismissing behaviour present in OS.
+ * Returns props to pass to the node we want to check for outside events.
+ */
+function usePointerDownOutside(onPointerDownOutside?: (event: PointerDownOutsideEvent) => void) {
+  const handlePointerDownOutside = useCallbackRef(onPointerDownOutside) as EventListener
+  const isPointerInsideReactTreeRef = React.useRef(false)
+  const handleClickRef = React.useRef(() => {})
+
+  React.useEffect(() => {
+    const handlePointerDown = (event: PointerEvent) => {
+      if (event.target && !isPointerInsideReactTreeRef.current) {
+        const eventDetail = { originalEvent: event }
+
+        function handleAndDispatchPointerDownOutsideEvent() {
+          handleAndDispatchCustomEvent(
+            POINTER_DOWN_OUTSIDE,
+            handlePointerDownOutside,
+            eventDetail,
+            { discrete: true }
+          )
+        }
+
+        /**
+         * On touch devices, we need to wait for a click event because browsers implement
+         * a ~350ms delay between the time the user stops touching the display and when the
+         * browser executres events. We need to ensure we don't reactivate pointer-events within
+         * this timeframe otherwise the browser may execute events that should have been prevented.
+         *
+         * Additionally, this also lets us deal automatically with cancellations when a click event
+         * isn't raised because the page was considered scrolled/drag-scrolled, long-pressed, etc.
+         *
+         * This is why we also continuously remove the previous listener, because we cannot be
+         * certain that it was raised, and therefore cleaned-up.
+         */
+        if (event.pointerType === 'touch') {
+          document.removeEventListener('click', handleClickRef.current)
+          handleClickRef.current = handleAndDispatchPointerDownOutsideEvent
+          document.addEventListener('click', handleClickRef.current, { once: true })
+        } else {
+          handleAndDispatchPointerDownOutsideEvent()
+        }
+      }
+      isPointerInsideReactTreeRef.current = false
+    }
+    /**
+     * if this hook executes in a component that mounts via a `pointerdown` event, the event
+     * would bubble up to the document and trigger a `pointerDownOutside` event. We avoid
+     * this by delaying the event listener registration on the document.
+     * This is not React specific, but rather how the DOM works, ie:
+     * ```
+     * button.addEventListener('pointerdown', () => {
+     *   console.log('I will log');
+     *   document.addEventListener('pointerdown', () => {
+     *     console.log('I will also log');
+     *   })
+     * });
+     */
+    const timerId = window.setTimeout(() => {
+      document.addEventListener('pointerdown', handlePointerDown)
+    }, 0)
+    return () => {
+      window.clearTimeout(timerId)
+      document.removeEventListener('pointerdown', handlePointerDown)
+      document.removeEventListener('click', handleClickRef.current)
+    }
+  }, [handlePointerDownOutside])
+
+  return {
+    // ensures we check React component tree (not just DOM tree)
+    onPointerDownCapture: () => (isPointerInsideReactTreeRef.current = true),
+  }
+}
+
+/**
+ * Listens for when focus happens outside a react subtree.
+ * Returns props to pass to the root (node) of the subtree we want to check.
+ */
+function useFocusOutside(onFocusOutside?: (event: FocusOutsideEvent) => void) {
+  const handleFocusOutside = useCallbackRef(onFocusOutside) as EventListener
+  const isFocusInsideReactTreeRef = React.useRef(false)
+
+  React.useEffect(() => {
+    const handleFocus = (event: FocusEvent) => {
+      if (event.target && !isFocusInsideReactTreeRef.current) {
+        const eventDetail = { originalEvent: event }
+        handleAndDispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {
+          discrete: false,
+        })
+      }
+    }
+    document.addEventListener('focusin', handleFocus)
+    return () => document.removeEventListener('focusin', handleFocus)
+  }, [handleFocusOutside])
+
+  return {
+    onFocusCapture: () => (isFocusInsideReactTreeRef.current = true),
+    onBlurCapture: () => (isFocusInsideReactTreeRef.current = false),
+  }
+}
+
+function dispatchUpdate() {
+  const event = new CustomEvent(CONTEXT_UPDATE)
+  document.dispatchEvent(event)
+}
+
+function handleAndDispatchCustomEvent<E extends CustomEvent, OriginalEvent extends Event>(
+  name: string,
+  handler: ((event: E) => void) | undefined,
+  detail: { originalEvent: OriginalEvent } & (E extends CustomEvent<infer D> ? D : never),
+  { discrete }: { discrete: boolean }
+) {
+  const target = detail.originalEvent.target
+  const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail })
+  if (handler) target.addEventListener(name, handler as EventListener, { once: true })
+
+  if (discrete) {
+    dispatchDiscreteCustomEvent(target, event)
+  } else {
+    target.dispatchEvent(event)
+  }
+}
+
+const Root = Dismissable
+const Branch = DismissableBranch
+
+export {
+  Dismissable,
+  DismissableBranch,
+  //
+  Root,
+  Branch,
+}
+
+export type { DismissableProps }

package/src/DismissableProps.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+
+import { FocusOutsideEvent, PointerDownOutsideEvent } from './Dismissable'
+
+export interface DismissableProps {
+  /**
+   * When `true`, hover/focus/click interactions will be disabled on elements outside
+   * the `Dismissable`. Users will need to click twice on outside elements to
+   * interact with them: once to close the `Dismissable`, and again to trigger the element.
+   */
+  disableOutsidePointerEvents?: boolean
+  /**
+   * Event handler called when the escape key is down.
+   * Can be prevented.
+   */
+  onEscapeKeyDown?: (event: KeyboardEvent) => void
+  /**
+   * Event handler called when the a `pointerdown` event happens outside of the `Dismissable`.
+   * Can be prevented.
+   */
+  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void
+  /**
+   * Event handler called when the focus moves outside of the `Dismissable`.
+   * Can be prevented.
+   */
+  onFocusOutside?: (event: FocusOutsideEvent) => void
+  /**
+   * Event handler called when an interaction happens outside the `Dismissable`.
+   * Specifically, when a `pointerdown` event happens outside or focus moves outside of it.
+   * Can be prevented.
+   */
+  onInteractOutside?: (event: PointerDownOutsideEvent | FocusOutsideEvent) => void
+  /**
+   * Handler called when the `Dismissable` should be dismissed
+   */
+  onDismiss?: () => void
+
+  children?: React.ReactNode
+}
+
+export interface DismissableBranchProps {
+  children?: React.ReactNode
+}

package/src/index.tsx

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

package/types/Dismissable.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { DismissableBranchProps, DismissableProps } from './DismissableProps';
+declare const Dismissable: React.ForwardRefExoticComponent<DismissableProps & React.RefAttributes<HTMLDivElement>>;
+declare const DismissableBranch: React.ForwardRefExoticComponent<DismissableBranchProps & React.RefAttributes<HTMLDivElement>>;
+export declare type PointerDownOutsideEvent = CustomEvent<{
+    originalEvent: PointerEvent;
+}>;
+export declare type FocusOutsideEvent = CustomEvent<{
+    originalEvent: FocusEvent;
+}>;
+declare const Root: React.ForwardRefExoticComponent<DismissableProps & React.RefAttributes<HTMLDivElement>>;
+declare const Branch: React.ForwardRefExoticComponent<DismissableBranchProps & React.RefAttributes<HTMLDivElement>>;
+export { Dismissable, DismissableBranch, Root, Branch, };
+export type { DismissableProps };
+//# sourceMappingURL=Dismissable.d.ts.map

package/types/Dismissable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dismissable.d.ts","sourceRoot":"","sources":["../src/Dismissable.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,sBAAsB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAuB7E,QAAA,MAAM,WAAW,yFA4Hf,CAAA;AAUF,QAAA,MAAM,iBAAiB,+FAkBtB,CAAA;AAMD,oBAAY,uBAAuB,GAAG,WAAW,CAAC;IAAE,aAAa,EAAE,YAAY,CAAA;CAAE,CAAC,CAAA;AAClF,oBAAY,iBAAiB,GAAG,WAAW,CAAC;IAAE,aAAa,EAAE,UAAU,CAAA;CAAE,CAAC,CAAA;AA8H1E,QAAA,MAAM,IAAI,yFAAc,CAAA;AACxB,QAAA,MAAM,MAAM,+FAAoB,CAAA;AAEhC,OAAO,EACL,WAAW,EACX,iBAAiB,EAEjB,IAAI,EACJ,MAAM,GACP,CAAA;AAED,YAAY,EAAE,gBAAgB,EAAE,CAAA"}

package/types/Dismissable.native.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { DismissableBranchProps, DismissableProps } from './DismissableProps';
+export declare const Dismissable: import("react").ForwardRefExoticComponent<DismissableProps & import("react").RefAttributes<unknown>>;
+export declare const DismissableBranch: import("react").ForwardRefExoticComponent<DismissableBranchProps & import("react").RefAttributes<unknown>>;
+//# sourceMappingURL=Dismissable.native.d.ts.map

package/types/Dismissable.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dismissable.native.d.ts","sourceRoot":"","sources":["../src/Dismissable.native.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,sBAAsB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAE7E,eAAO,MAAM,WAAW,sGAEtB,CAAA;AAEF,eAAO,MAAM,iBAAiB,4GAE5B,CAAA"}

package/types/DismissableProps.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { FocusOutsideEvent, PointerDownOutsideEvent } from './Dismissable';
+export interface DismissableProps {
+    disableOutsidePointerEvents?: boolean;
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    onPointerDownOutside?: (event: PointerDownOutsideEvent) => void;
+    onFocusOutside?: (event: FocusOutsideEvent) => void;
+    onInteractOutside?: (event: PointerDownOutsideEvent | FocusOutsideEvent) => void;
+    onDismiss?: () => void;
+    children?: React.ReactNode;
+}
+export interface DismissableBranchProps {
+    children?: React.ReactNode;
+}
+//# sourceMappingURL=DismissableProps.d.ts.map

package/types/DismissableProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DismissableProps.d.ts","sourceRoot":"","sources":["../src/DismissableProps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAA;AAE1E,MAAM,WAAW,gBAAgB;IAM/B,2BAA2B,CAAC,EAAE,OAAO,CAAA;IAKrC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IAKhD,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,IAAI,CAAA;IAK/D,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAA;IAMnD,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,GAAG,iBAAiB,KAAK,IAAI,CAAA;IAIhF,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IAEtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B"}

package/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Dismissable';
+//# sourceMappingURL=index.d.ts.map

package/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA"}