@tamagui/collapsible 1.0.1-beta.99 → 1.0.1-rc.0

package/src/Collapsible.tsx

@@ -1,254 +1,248 @@
-import { useComposedRefs } from '@tamagui/compose-refs'
-import {
-  Stack,
-  StackProps,
-  TamaguiElement,
-  composeEventHandlers,
-  useIsomorphicLayoutEffect,
-} from '@tamagui/core'
-import { useId } from '@tamagui/core'
-import { createContextScope } from '@tamagui/create-context'
-import type { Scope } from '@tamagui/create-context'
-// import { Presence } from '@tamagui/react-presence'
-import { useControllableState } from '@tamagui/use-controllable-state'
-import * as React from 'react'
-
-/* -------------------------------------------------------------------------------------------------
- * Collapsible
- * -----------------------------------------------------------------------------------------------*/
-
-const COLLAPSIBLE_NAME = 'Collapsible'
-
-type ScopedProps<P> = P & { __scopeCollapsible?: Scope }
-const [createCollapsibleContext, createCollapsibleScope] = createContextScope(COLLAPSIBLE_NAME)
-
-type CollapsibleContextValue = {
-  contentId: string
-  disabled?: boolean
-  open: boolean
-  onOpenToggle(): void
-}
-
-const [CollapsibleProvider, useCollapsibleContext] =
-  createCollapsibleContext<CollapsibleContextValue>(COLLAPSIBLE_NAME)
-
-type CollapsibleElement = TamaguiElement
-interface CollapsibleProps extends StackProps {
-  defaultOpen?: boolean
-  open?: boolean
-  disabled?: boolean
-  onOpenChange?(open: boolean): void
-}
-
-const Collapsible = React.forwardRef<CollapsibleElement, CollapsibleProps>(
-  (props: ScopedProps<CollapsibleProps>, forwardedRef) => {
-    const {
-      __scopeCollapsible,
-      open: openProp,
-      defaultOpen,
-      disabled,
-      onOpenChange,
-      ...collapsibleProps
-    } = props
-
-    const [open, setOpen] = useControllableState({
-      prop: openProp,
-      defaultProp: defaultOpen || false,
-      onChange: onOpenChange,
-    })
-
-    return (
-      <CollapsibleProvider
-        scope={__scopeCollapsible}
-        disabled={disabled}
-        contentId={useId() || ''}
-        open={open}
-        onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}
-      >
-        <Stack
-          data-state={getState(open)}
-          data-disabled={disabled ? '' : undefined}
-          {...collapsibleProps}
-          // @ts-expect-error
-          ref={forwardedRef}
-        />
-      </CollapsibleProvider>
-    )
-  }
-)
-
-Collapsible.displayName = COLLAPSIBLE_NAME
-
-/* -------------------------------------------------------------------------------------------------
- * CollapsibleTrigger
- * -----------------------------------------------------------------------------------------------*/
-
-const TRIGGER_NAME = 'CollapsibleTrigger'
-
-type CollapsibleTriggerElement = TamaguiElement
-interface CollapsibleTriggerProps extends StackProps {}
-
-const CollapsibleTrigger = React.forwardRef<CollapsibleTriggerElement, CollapsibleTriggerProps>(
-  (props: ScopedProps<CollapsibleTriggerProps>, forwardedRef) => {
-    const { __scopeCollapsible, ...triggerProps } = props
-    const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible)
-    return (
-      <Stack
-        type="button"
-        aria-controls={context.contentId}
-        aria-expanded={context.open || false}
-        data-state={getState(context.open)}
-        data-disabled={context.disabled ? '' : undefined}
-        disabled={context.disabled}
-        {...triggerProps}
-        // @ts-expect-error
-        ref={forwardedRef}
-        onPress={composeEventHandlers(props.onPress, context.onOpenToggle)}
-      />
-    )
-  }
-)
-
-CollapsibleTrigger.displayName = TRIGGER_NAME
-
-/* -------------------------------------------------------------------------------------------------
- * CollapsibleContent
- * -----------------------------------------------------------------------------------------------*/
-
-const CONTENT_NAME = 'CollapsibleContent'
-
-type CollapsibleContentElement = CollapsibleContentImplElement
-interface CollapsibleContentProps extends Omit<CollapsibleContentImplProps, 'present'> {
-  /**
-   * Used to force mounting when more control is needed. Useful when
-   * controlling animation with React animation libraries.
-   */
-  forceMount?: true
-}
-
-const CollapsibleContent = React.forwardRef<CollapsibleContentElement, CollapsibleContentProps>(
-  (props: ScopedProps<CollapsibleContentProps>, forwardedRef) => {
-    const { forceMount, ...contentProps } = props
-    const context = useCollapsibleContext(CONTENT_NAME, props.__scopeCollapsible)
-    return (
-      // <Presence present={forceMount || context.open}>
-      <>
-        {({ present }) => (
-          <CollapsibleContentImpl {...contentProps} ref={forwardedRef} present={present} />
-        )}
-      </>
-      // </Presence>
-    )
-  }
-)
-
-CollapsibleContent.displayName = CONTENT_NAME
-
-/* -----------------------------------------------------------------------------------------------*/
-
-type CollapsibleContentImplElement = TamaguiElement
-interface CollapsibleContentImplProps extends StackProps {
-  present: boolean
-}
-
-const CollapsibleContentImpl = React.forwardRef<
-  CollapsibleContentImplElement,
-  CollapsibleContentImplProps
->((props: ScopedProps<CollapsibleContentImplProps>, forwardedRef) => {
-  const { __scopeCollapsible, present, children, ...contentProps } = props
-  const context = useCollapsibleContext(CONTENT_NAME, __scopeCollapsible)
-  const [isPresent, setIsPresent] = React.useState(present)
-  const ref = React.useRef<CollapsibleContentImplElement>(null)
-  const composedRefs = useComposedRefs(forwardedRef, ref)
-  const heightRef = React.useRef<number | undefined>(0)
-  const height = heightRef.current
-  const widthRef = React.useRef<number | undefined>(0)
-  const width = widthRef.current
-  // when opening we want it to immediately open to retrieve dimensions
-  // when closing we delay `present` to retrieve dimensions before closing
-  const isOpen = context.open || isPresent
-  const isMountAnimationPreventedRef = React.useRef(isOpen)
-  const originalStylesRef = React.useRef<Record<string, string>>()
-
-  React.useEffect(() => {
-    const rAF = requestAnimationFrame(() => (isMountAnimationPreventedRef.current = false))
-    return () => cancelAnimationFrame(rAF)
-  }, [])
-
-  // useIsomorphicLayoutEffect(() => {
-  //   const node = ref.current
-  //   if (node) {
-  //     originalStylesRef.current = originalStylesRef.current || {
-  //       transitionDuration: node.style.transitionDuration,
-  //       animationDuration: node.style.animationDuration,
-  //       animationFillMode: node.style.animationFillMode,
-  //     }
-  //     // block any animations/transitions so the element renders at its full dimensions
-  //     node.style.transitionDuration = '0s'
-  //     node.style.animationDuration = '0s'
-  //     node.style.animationFillMode = 'none'
-
-  //     // get width and height from full dimensions
-  //     const rect = node.getBoundingClientRect()
-  //     heightRef.current = rect.height
-  //     widthRef.current = rect.width
-
-  //     // kick off any animations/transitions that were originally set up if it isn't the initial mount
-  //     if (!isMountAnimationPreventedRef.current) {
-  //       node.style.transitionDuration = originalStylesRef.current.transitionDuration
-  //       node.style.animationDuration = originalStylesRef.current.animationDuration
-  //       node.style.animationFillMode = originalStylesRef.current.animationFillMode
-  //     }
-
-  //     setIsPresent(present)
-  //   }
-  //   /**
-  //    * depends on `context.open` because it will change to `false`
-  //    * when a close is triggered but `present` will be `false` on
-  //    * animation end (so when close finishes). This allows us to
-  //    * retrieve the dimensions *before* closing.
-  //    */
-  // }, [context.open, present])
-
-  return (
-    <Stack
-      data-state={getState(context.open)}
-      data-disabled={context.disabled ? '' : undefined}
-      id={context.contentId}
-      hidden={!isOpen}
-      {...contentProps}
-      // @ts-expect-error
-      ref={composedRefs}
-      // style={{
-      //   [`--radix-collapsible-content-height` as any]: height ? `${height}px` : undefined,
-      //   [`--radix-collapsible-content-width` as any]: width ? `${width}px` : undefined,
-      //   ...props.style,
-      // }}
-    >
-      {isOpen && children}
-    </Stack>
-  )
-})
-
-/* -----------------------------------------------------------------------------------------------*/
-
-function getState(open?: boolean) {
-  return open ? 'open' : 'closed'
-}
-
-const Root = Collapsible
-const Trigger = CollapsibleTrigger
-const Content = CollapsibleContent
-
-export {
-  createCollapsibleScope,
-  //
-  Collapsible,
-  CollapsibleTrigger,
-  CollapsibleContent,
-  //
-  Root,
-  Trigger,
-  Content,
-}
-export type { CollapsibleProps, CollapsibleTriggerProps, CollapsibleContentProps }
+export const Collapsible = {}
+
+// import { useComposedRefs } from '@tamagui/compose-refs'
+// import { Stack, StackProps, TamaguiElement, composeEventHandlers, useId } from '@tamagui/core'
+// import type { Scope } from '@tamagui/create-context'
+// import { createContextScope } from '@tamagui/create-context'
+// // import { Presence } from '@tamagui/react-presence'
+// import { useControllableState } from '@tamagui/use-controllable-state'
+// import * as React from 'react'
+
+// /* -------------------------------------------------------------------------------------------------
+//  * Collapsible
+//  * -----------------------------------------------------------------------------------------------*/
+
+// const COLLAPSIBLE_NAME = 'Collapsible'
+
+// type ScopedProps<P> = P & { __scopeCollapsible?: Scope }
+// const [createCollapsibleContext, createCollapsibleScope] = createContextScope(COLLAPSIBLE_NAME)
+
+// type CollapsibleContextValue = {
+//   contentId: string
+//   disabled?: boolean
+//   open: boolean
+//   onOpenToggle(): void
+// }
+
+// const [CollapsibleProvider, useCollapsibleContext] =
+//   createCollapsibleContext<CollapsibleContextValue>(COLLAPSIBLE_NAME)
+
+// type CollapsibleElement = TamaguiElement
+// interface CollapsibleProps extends StackProps {
+//   defaultOpen?: boolean
+//   open?: boolean
+//   disabled?: boolean
+//   onOpenChange?(open: boolean): void
+// }
+
+// const Collapsible = React.forwardRef<CollapsibleElement, CollapsibleProps>(
+//   (props: ScopedProps<CollapsibleProps>, forwardedRef) => {
+//     const {
+//       __scopeCollapsible,
+//       open: openProp,
+//       defaultOpen,
+//       disabled,
+//       onOpenChange,
+//       ...collapsibleProps
+//     } = props
+
+//     const [open, setOpen] = useControllableState({
+//       prop: openProp,
+//       defaultProp: defaultOpen || false,
+//       onChange: onOpenChange,
+//     })
+
+//     return (
+//       <CollapsibleProvider
+//         scope={__scopeCollapsible}
+//         disabled={disabled}
+//         contentId={useId() || ''}
+//         open={open}
+//         onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}
+//       >
+//         <Stack
+//           data-state={getState(open)}
+//           data-disabled={disabled ? '' : undefined}
+//           {...collapsibleProps}
+//           ref={forwardedRef}
+//         />
+//       </CollapsibleProvider>
+//     )
+//   }
+// )
+
+// Collapsible.displayName = COLLAPSIBLE_NAME
+
+// /* -------------------------------------------------------------------------------------------------
+//  * CollapsibleTrigger
+//  * -----------------------------------------------------------------------------------------------*/
+
+// const TRIGGER_NAME = 'CollapsibleTrigger'
+
+// type CollapsibleTriggerElement = TamaguiElement
+// interface CollapsibleTriggerProps extends StackProps {}
+
+// const CollapsibleTrigger = React.forwardRef<CollapsibleTriggerElement, CollapsibleTriggerProps>(
+//   (props: ScopedProps<CollapsibleTriggerProps>, forwardedRef) => {
+//     const { __scopeCollapsible, ...triggerProps } = props
+//     const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible)
+//     return (
+//       <Stack
+//         type="button"
+//         aria-controls={context.contentId}
+//         aria-expanded={context.open || false}
+//         data-state={getState(context.open)}
+//         data-disabled={context.disabled ? '' : undefined}
+//         disabled={context.disabled}
+//         {...triggerProps}
+//         ref={forwardedRef}
+//         //
+//         // onPress={composeEventHandlers(props.onPress, context.onOpenToggle)}
+//       />
+//     )
+//   }
+// )
+
+// CollapsibleTrigger.displayName = TRIGGER_NAME
+
+// /* -------------------------------------------------------------------------------------------------
+//  * CollapsibleContent
+//  * -----------------------------------------------------------------------------------------------*/
+
+// const CONTENT_NAME = 'CollapsibleContent'
+
+// type CollapsibleContentElement = CollapsibleContentImplElement
+// interface CollapsibleContentProps extends Omit<CollapsibleContentImplProps, 'present'> {
+//   /**
+//    * Used to force mounting when more control is needed. Useful when
+//    * controlling animation with React animation libraries.
+//    */
+//   forceMount?: true
+// }
+
+// const CollapsibleContent = React.forwardRef<CollapsibleContentElement, CollapsibleContentProps>(
+//   (props: ScopedProps<CollapsibleContentProps>, forwardedRef) => {
+//     const { forceMount, ...contentProps } = props
+//     const context = useCollapsibleContext(CONTENT_NAME, props.__scopeCollapsible)
+//     return (
+//       // <Presence present={forceMount || context.open}>
+//       <>
+//         {({ present }) => (
+//           <CollapsibleContentImpl {...contentProps} ref={forwardedRef} present={present} />
+//         )}
+//       </>
+//       // </Presence>
+//     )
+//   }
+// )
+
+// CollapsibleContent.displayName = CONTENT_NAME
+
+// /* -----------------------------------------------------------------------------------------------*/
+
+// type CollapsibleContentImplElement = TamaguiElement
+// interface CollapsibleContentImplProps extends StackProps {
+//   present: boolean
+// }
+
+// const CollapsibleContentImpl = React.forwardRef<
+//   CollapsibleContentImplElement,
+//   CollapsibleContentImplProps
+// >((props: ScopedProps<CollapsibleContentImplProps>, forwardedRef) => {
+//   const { __scopeCollapsible, present, children, ...contentProps } = props
+//   const context = useCollapsibleContext(CONTENT_NAME, __scopeCollapsible)
+//   const [isPresent, setIsPresent] = React.useState(present)
+//   const ref = React.useRef<CollapsibleContentImplElement>(null)
+//   const composedRefs = useComposedRefs(forwardedRef, ref)
+//   const heightRef = React.useRef<number | undefined>(0)
+//   const height = heightRef.current
+//   const widthRef = React.useRef<number | undefined>(0)
+//   const width = widthRef.current
+//   // when opening we want it to immediately open to retrieve dimensions
+//   // when closing we delay `present` to retrieve dimensions before closing
+//   const isOpen = context.open || isPresent
+//   const isMountAnimationPreventedRef = React.useRef(isOpen)
+//   const originalStylesRef = React.useRef<Record<string, string>>()
+
+//   React.useEffect(() => {
+//     const rAF = requestAnimationFrame(() => (isMountAnimationPreventedRef.current = false))
+//     return () => cancelAnimationFrame(rAF)
+//   }, [])
+
+//   // useIsomorphicLayoutEffect(() => {
+//   //   const node = ref.current
+//   //   if (node) {
+//   //     originalStylesRef.current = originalStylesRef.current || {
+//   //       transitionDuration: node.style.transitionDuration,
+//   //       animationDuration: node.style.animationDuration,
+//   //       animationFillMode: node.style.animationFillMode,
+//   //     }
+//   //     // block any animations/transitions so the element renders at its full dimensions
+//   //     node.style.transitionDuration = '0s'
+//   //     node.style.animationDuration = '0s'
+//   //     node.style.animationFillMode = 'none'
+
+//   //     // get width and height from full dimensions
+//   //     const rect = node.getBoundingClientRect()
+//   //     heightRef.current = rect.height
+//   //     widthRef.current = rect.width
+
+//   //     // kick off any animations/transitions that were originally set up if it isn't the initial mount
+//   //     if (!isMountAnimationPreventedRef.current) {
+//   //       node.style.transitionDuration = originalStylesRef.current.transitionDuration
+//   //       node.style.animationDuration = originalStylesRef.current.animationDuration
+//   //       node.style.animationFillMode = originalStylesRef.current.animationFillMode
+//   //     }
+
+//   //     setIsPresent(present)
+//   //   }
+//   //   /**
+//   //    * depends on `context.open` because it will change to `false`
+//   //    * when a close is triggered but `present` will be `false` on
+//   //    * animation end (so when close finishes). This allows us to
+//   //    * retrieve the dimensions *before* closing.
+//   //    */
+//   // }, [context.open, present])
+
+//   return (
+//     <Stack
+//       data-state={getState(context.open)}
+//       data-disabled={context.disabled ? '' : undefined}
+//       id={context.contentId}
+//       hidden={!isOpen}
+//       {...contentProps}
+//       // @ts-expect-error
+//       ref={composedRefs}
+//       // style={{
+//       //   [`--radix-collapsible-content-height` as any]: height ? `${height}px` : undefined,
+//       //   [`--radix-collapsible-content-width` as any]: width ? `${width}px` : undefined,
+//       //   ...props.style,
+//       // }}
+//     >
+//       {isOpen && children}
+//     </Stack>
+//   )
+// })
+
+// /* -----------------------------------------------------------------------------------------------*/
+
+// function getState(open?: boolean) {
+//   return open ? 'open' : 'closed'
+// }
+
+// const Root = Collapsible
+// const Trigger = CollapsibleTrigger
+// const Content = CollapsibleContent
+
+// export {
+//   createCollapsibleScope,
+//   //
+//   Collapsible,
+//   CollapsibleTrigger,
+//   CollapsibleContent,
+//   //
+//   Root,
+//   Trigger,
+//   Content,
+// }
+// export type { CollapsibleProps, CollapsibleTriggerProps, CollapsibleContentProps }

package/types/Collapsible.d.ts

@@ -1,26 +1,2 @@
-import { StackProps, TamaguiElement } from '@tamagui/core';
-import * as React from 'react';
-declare const createCollapsibleScope: import("@tamagui/create-context").CreateScope;
-interface CollapsibleProps extends StackProps {
-    defaultOpen?: boolean;
-    open?: boolean;
-    disabled?: boolean;
-    onOpenChange?(open: boolean): void;
-}
-declare const Collapsible: React.ForwardRefExoticComponent<CollapsibleProps & React.RefAttributes<TamaguiElement>>;
-interface CollapsibleTriggerProps extends StackProps {
-}
-declare const CollapsibleTrigger: React.ForwardRefExoticComponent<CollapsibleTriggerProps & React.RefAttributes<TamaguiElement>>;
-interface CollapsibleContentProps extends Omit<CollapsibleContentImplProps, 'present'> {
-    forceMount?: true;
-}
-declare const CollapsibleContent: React.ForwardRefExoticComponent<CollapsibleContentProps & React.RefAttributes<TamaguiElement>>;
-interface CollapsibleContentImplProps extends StackProps {
-    present: boolean;
-}
-declare const Root: React.ForwardRefExoticComponent<CollapsibleProps & React.RefAttributes<TamaguiElement>>;
-declare const Trigger: React.ForwardRefExoticComponent<CollapsibleTriggerProps & React.RefAttributes<TamaguiElement>>;
-declare const Content: React.ForwardRefExoticComponent<CollapsibleContentProps & React.RefAttributes<TamaguiElement>>;
-export { createCollapsibleScope, Collapsible, CollapsibleTrigger, CollapsibleContent, Root, Trigger, Content, };
-export type { CollapsibleProps, CollapsibleTriggerProps, CollapsibleContentProps };
+export declare const Collapsible: {};
 //# sourceMappingURL=Collapsible.d.ts.map

package/types/Collapsible.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Collapsible.d.ts","sourceRoot":"","sources":["../src/Collapsible.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,UAAU,EACV,cAAc,EAGf,MAAM,eAAe,CAAA;AAMtB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,QAAA,MAAiC,sBAAsB,+CAAwC,CAAA;AAa/F,UAAU,gBAAiB,SAAQ,UAAU;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAA;CACnC;AAED,QAAA,MAAM,WAAW,yFAmChB,CAAA;AAWD,UAAU,uBAAwB,SAAQ,UAAU;CAAG;AAEvD,QAAA,MAAM,kBAAkB,gGAmBvB,CAAA;AAWD,UAAU,uBAAwB,SAAQ,IAAI,CAAC,2BAA2B,EAAE,SAAS,CAAC;IAKpF,UAAU,CAAC,EAAE,IAAI,CAAA;CAClB;AAED,QAAA,MAAM,kBAAkB,gGAcvB,CAAA;AAOD,UAAU,2BAA4B,SAAQ,UAAU;IACtD,OAAO,EAAE,OAAO,CAAA;CACjB;AAuFD,QAAA,MAAM,IAAI,yFAAc,CAAA;AACxB,QAAA,MAAM,OAAO,gGAAqB,CAAA;AAClC,QAAA,MAAM,OAAO,gGAAqB,CAAA;AAElC,OAAO,EACL,sBAAsB,EAEtB,WAAW,EACX,kBAAkB,EAClB,kBAAkB,EAElB,IAAI,EACJ,OAAO,EACP,OAAO,GACR,CAAA;AACD,YAAY,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,CAAA"}

package/types/index.d.ts.map

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