@radix-ui/react-collapsible 0.1.6 → 0.1.7-rc.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- {"mappings":"A;A;A;AAoBA,OAAA,6FAA+F,CAAC;AAahG,yBAAyB,MAAM,wBAAwB,CAAC,OAAO,UAAU,GAAG,CAAC,CAAC;AAC9E,iCAA2B,SAAQ,iBAAiB;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;CACpC;AAED,OAAA,MAAM,oGAkCL,CAAC;AAWF,4BAA4B,MAAM,wBAAwB,CAAC,OAAO,UAAU,MAAM,CAAC,CAAC;AACpF,wCAAkC,SAAQ,oBAAoB;CAAG;AAEjE,OAAA,MAAM,qHAkBL,CAAC;AAWF,wCAAkC,SAAQ,IAAI,CAAC,2BAA2B,EAAE,SAAS,CAAC;IACpF;A;A;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC;CACnB;AAED,OAAA,MAAM,kHAYL,CAAC;AAOF,qCAAsC,SAAQ,iBAAiB;IAC7D,OAAO,EAAE,OAAO,CAAC;CAClB;AAsFD,OAAA,MAAM,6FAAkB,CAAC;AACzB,OAAA,MAAM,0GAA4B,CAAC;AACnC,OAAA,MAAM,uGAA4B,CAAC","sources":["./packages/react/collapsible/src/packages/react/collapsible/src/Collapsible.tsx","./packages/react/collapsible/src/packages/react/collapsible/src/index.ts"],"sourcesContent":[null,null],"names":[],"version":3,"file":"index.d.ts.map"}
1
+ {"mappings":";;;AAoBA,OAAA,6FAA+F,CAAC;AAahG,yBAAyB,MAAM,wBAAwB,CAAC,OAAO,UAAU,GAAG,CAAC,CAAC;AAC9E,iCAA2B,SAAQ,iBAAiB;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;CACpC;AAED,OAAA,MAAM,oGAkCL,CAAC;AAWF,4BAA4B,MAAM,wBAAwB,CAAC,OAAO,UAAU,MAAM,CAAC,CAAC;AACpF,wCAAkC,SAAQ,oBAAoB;CAAG;AAEjE,OAAA,MAAM,qHAkBL,CAAC;AAWF,wCAAkC,SAAQ,IAAI,CAAC,2BAA2B,EAAE,SAAS,CAAC;IACpF;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC;CACnB;AAED,OAAA,MAAM,kHAYL,CAAC;AAOF,qCAAsC,SAAQ,iBAAiB;IAC7D,OAAO,EAAE,OAAO,CAAC;CAClB;AAsFD,OAAA,MAAM,6FAAkB,CAAC;AACzB,OAAA,MAAM,0GAA4B,CAAC;AACnC,OAAA,MAAM,uGAA4B,CAAC","sources":["packages/react/collapsible/src/packages/react/collapsible/src/Collapsible.tsx","packages/react/collapsible/src/packages/react/collapsible/src/index.ts","packages/react/collapsible/src/index.ts"],"sourcesContent":[null,null,"export * from './Collapsible';\n"],"names":[],"version":3,"file":"index.d.ts.map"}
package/dist/index.js CHANGED
@@ -1,2 +1,198 @@
1
- var e,t,n,r=require("@radix-ui/react-id").useId,o=require("@radix-ui/react-presence").Presence,i=require("@radix-ui/react-primitive").Primitive,a=require("@radix-ui/react-compose-refs").useComposedRefs,l=require("@radix-ui/react-use-layout-effect").useLayoutEffect,s=require("@radix-ui/react-use-controllable-state").useControllableState,c=require("@radix-ui/react-context").createContextScope,u=require("@radix-ui/primitive").composeEventHandlers,d=(e={},t=require("react"),Object.keys(t).forEach((function(n){"default"!==n&&"__esModule"!==n&&Object.defineProperty(e,n,{enumerable:!0,get:function(){return t[n]}})})),e),p=(n=require("@babel/runtime/helpers/extends"))&&n.__esModule?n.default:n;const[f,b]=c("Collapsible");exports.createCollapsibleScope=b;const[m,C]=f("Collapsible"),x=/*#__PURE__*/d.forwardRef(((e,t)=>{const{__scopeCollapsible:n,open:o,defaultOpen:a,disabled:l,onOpenChange:c,...u}=e,[f=!1,b]=s({prop:o,defaultProp:a,onChange:c});/*#__PURE__*/return d.createElement(m,{scope:n,disabled:l,contentId:r(),open:f,onOpenToggle:d.useCallback((()=>b((e=>!e))),[b])},/*#__PURE__*/d.createElement(i.div,p({"data-state":v(f),"data-disabled":l?"":void 0},u,{ref:t})))}));exports.Collapsible=x;const g=/*#__PURE__*/d.forwardRef(((e,t)=>{const{__scopeCollapsible:n,...r}=e,o=C("CollapsibleTrigger",n);/*#__PURE__*/return d.createElement(i.button,p({type:"button","aria-controls":o.contentId,"aria-expanded":o.open||!1,"data-state":v(o.open),"data-disabled":o.disabled?"":void 0,disabled:o.disabled},r,{ref:t,onClick:u(e.onClick,o.onOpenToggle)}))}));exports.CollapsibleTrigger=g;const y=/*#__PURE__*/d.forwardRef(((e,t)=>{const{forceMount:n,...r}=e,i=C("CollapsibleContent",e.__scopeCollapsible);/*#__PURE__*/return d.createElement(o,{present:n||i.open},(({present:e})=>/*#__PURE__*/d.createElement(h,p({},r,{ref:t,present:e}))))}));exports.CollapsibleContent=y;const h=/*#__PURE__*/d.forwardRef(((e,t)=>{const{__scopeCollapsible:n,present:r,children:o,...s}=e,c=C("CollapsibleContent",n),[u,f]=d.useState(r),b=d.useRef(null),m=a(t,b),x=d.useRef(0),g=x.current,y=d.useRef(0),h=y.current,R=c.open||u,_=d.useRef(R),q=d.useRef();return d.useEffect((()=>{const e=requestAnimationFrame((()=>_.current=!1));return()=>cancelAnimationFrame(e)}),[]),l((()=>{const e=b.current;if(e){q.current=q.current||{transitionDuration:e.style.transitionDuration,animationDuration:e.style.animationDuration,animationFillMode:e.style.animationFillMode},e.style.transitionDuration="0s",e.style.animationDuration="0s",e.style.animationFillMode="none";const t=e.getBoundingClientRect();x.current=t.height,y.current=t.width,_.current||(e.style.transitionDuration=q.current.transitionDuration,e.style.animationDuration=q.current.animationDuration,e.style.animationFillMode=q.current.animationFillMode),f(r)}}),[c.open,r]),/*#__PURE__*/d.createElement(i.div,p({"data-state":v(c.open),"data-disabled":c.disabled?"":void 0,id:c.contentId,hidden:!R},s,{ref:m,style:{"--radix-collapsible-content-height":g?`${g}px`:void 0,"--radix-collapsible-content-width":h?`${h}px`:void 0,...e.style}}),R&&o)}));function v(e){return e?"open":"closed"}const R=x;exports.Root=R;const _=g;exports.Trigger=_;const q=y;exports.Content=q;
1
+ var $f0mF1$babelruntimehelpersextends = require("@babel/runtime/helpers/extends");
2
+ var $f0mF1$react = require("react");
3
+ var $f0mF1$radixuiprimitive = require("@radix-ui/primitive");
4
+ var $f0mF1$radixuireactcontext = require("@radix-ui/react-context");
5
+ var $f0mF1$radixuireactusecontrollablestate = require("@radix-ui/react-use-controllable-state");
6
+ var $f0mF1$radixuireactuselayouteffect = require("@radix-ui/react-use-layout-effect");
7
+ var $f0mF1$radixuireactcomposerefs = require("@radix-ui/react-compose-refs");
8
+ var $f0mF1$radixuireactprimitive = require("@radix-ui/react-primitive");
9
+ var $f0mF1$radixuireactpresence = require("@radix-ui/react-presence");
10
+ var $f0mF1$radixuireactid = require("@radix-ui/react-id");
11
+
12
+ function $parcel$exportWildcard(dest, source) {
13
+ Object.keys(source).forEach(function(key) {
14
+ if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {
15
+ return;
16
+ }
17
+
18
+ Object.defineProperty(dest, key, {
19
+ enumerable: true,
20
+ get: function get() {
21
+ return source[key];
22
+ }
23
+ });
24
+ });
25
+
26
+ return dest;
27
+ }
28
+ function $parcel$interopDefault(a) {
29
+ return a && a.__esModule ? a.default : a;
30
+ }
31
+ function $parcel$export(e, n, v, s) {
32
+ Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
33
+ }
34
+ var $e729681ae85df948$exports = {};
35
+
36
+ $parcel$export($e729681ae85df948$exports, "createCollapsibleScope", () => $e729681ae85df948$export$952b32dcbe73087a);
37
+ $parcel$export($e729681ae85df948$exports, "Collapsible", () => $e729681ae85df948$export$6eb0f7ddcda6131f);
38
+ $parcel$export($e729681ae85df948$exports, "CollapsibleTrigger", () => $e729681ae85df948$export$c135dce7b15bbbdc);
39
+ $parcel$export($e729681ae85df948$exports, "CollapsibleContent", () => $e729681ae85df948$export$aadde00976f34151);
40
+ $parcel$export($e729681ae85df948$exports, "Root", () => $e729681ae85df948$export$be92b6f5f03c0fe9);
41
+ $parcel$export($e729681ae85df948$exports, "Trigger", () => $e729681ae85df948$export$41fb9f06171c75f4);
42
+ $parcel$export($e729681ae85df948$exports, "Content", () => $e729681ae85df948$export$7c6e2c02157bb7d2);
43
+
44
+
45
+
46
+
47
+
48
+
49
+
50
+
51
+
52
+
53
+ /* -------------------------------------------------------------------------------------------------
54
+ * Collapsible
55
+ * -----------------------------------------------------------------------------------------------*/ const $e729681ae85df948$var$COLLAPSIBLE_NAME = 'Collapsible';
56
+ const [$e729681ae85df948$var$createCollapsibleContext, $e729681ae85df948$export$952b32dcbe73087a] = $f0mF1$radixuireactcontext.createContextScope($e729681ae85df948$var$COLLAPSIBLE_NAME);
57
+ const [$e729681ae85df948$var$CollapsibleProvider, $e729681ae85df948$var$useCollapsibleContext] = $e729681ae85df948$var$createCollapsibleContext($e729681ae85df948$var$COLLAPSIBLE_NAME);
58
+ const $e729681ae85df948$export$6eb0f7ddcda6131f = /*#__PURE__*/ $f0mF1$react.forwardRef((props, forwardedRef)=>{
59
+ const { __scopeCollapsible: __scopeCollapsible , open: openProp , defaultOpen: defaultOpen , disabled: disabled , onOpenChange: onOpenChange , ...collapsibleProps } = props;
60
+ const [open = false, setOpen] = $f0mF1$radixuireactusecontrollablestate.useControllableState({
61
+ prop: openProp,
62
+ defaultProp: defaultOpen,
63
+ onChange: onOpenChange
64
+ });
65
+ return /*#__PURE__*/ $f0mF1$react.createElement($e729681ae85df948$var$CollapsibleProvider, {
66
+ scope: __scopeCollapsible,
67
+ disabled: disabled,
68
+ contentId: $f0mF1$radixuireactid.useId(),
69
+ open: open,
70
+ onOpenToggle: $f0mF1$react.useCallback(()=>setOpen((prevOpen)=>!prevOpen
71
+ )
72
+ , [
73
+ setOpen
74
+ ])
75
+ }, /*#__PURE__*/ $f0mF1$react.createElement($f0mF1$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($f0mF1$babelruntimehelpersextends))({
76
+ "data-state": $e729681ae85df948$var$getState(open),
77
+ "data-disabled": disabled ? '' : undefined
78
+ }, collapsibleProps, {
79
+ ref: forwardedRef
80
+ })));
81
+ });
82
+ /*#__PURE__*/ Object.assign($e729681ae85df948$export$6eb0f7ddcda6131f, {
83
+ displayName: $e729681ae85df948$var$COLLAPSIBLE_NAME
84
+ });
85
+ /* -------------------------------------------------------------------------------------------------
86
+ * CollapsibleTrigger
87
+ * -----------------------------------------------------------------------------------------------*/ const $e729681ae85df948$var$TRIGGER_NAME = 'CollapsibleTrigger';
88
+ const $e729681ae85df948$export$c135dce7b15bbbdc = /*#__PURE__*/ $f0mF1$react.forwardRef((props, forwardedRef)=>{
89
+ const { __scopeCollapsible: __scopeCollapsible , ...triggerProps } = props;
90
+ const context = $e729681ae85df948$var$useCollapsibleContext($e729681ae85df948$var$TRIGGER_NAME, __scopeCollapsible);
91
+ return /*#__PURE__*/ $f0mF1$react.createElement($f0mF1$radixuireactprimitive.Primitive.button, ($parcel$interopDefault($f0mF1$babelruntimehelpersextends))({
92
+ type: "button",
93
+ "aria-controls": context.contentId,
94
+ "aria-expanded": context.open || false,
95
+ "data-state": $e729681ae85df948$var$getState(context.open),
96
+ "data-disabled": context.disabled ? '' : undefined,
97
+ disabled: context.disabled
98
+ }, triggerProps, {
99
+ ref: forwardedRef,
100
+ onClick: $f0mF1$radixuiprimitive.composeEventHandlers(props.onClick, context.onOpenToggle)
101
+ }));
102
+ });
103
+ /*#__PURE__*/ Object.assign($e729681ae85df948$export$c135dce7b15bbbdc, {
104
+ displayName: $e729681ae85df948$var$TRIGGER_NAME
105
+ });
106
+ /* -------------------------------------------------------------------------------------------------
107
+ * CollapsibleContent
108
+ * -----------------------------------------------------------------------------------------------*/ const $e729681ae85df948$var$CONTENT_NAME = 'CollapsibleContent';
109
+ const $e729681ae85df948$export$aadde00976f34151 = /*#__PURE__*/ $f0mF1$react.forwardRef((props, forwardedRef)=>{
110
+ const { forceMount: forceMount , ...contentProps } = props;
111
+ const context = $e729681ae85df948$var$useCollapsibleContext($e729681ae85df948$var$CONTENT_NAME, props.__scopeCollapsible);
112
+ return /*#__PURE__*/ $f0mF1$react.createElement($f0mF1$radixuireactpresence.Presence, {
113
+ present: forceMount || context.open
114
+ }, ({ present: present })=>/*#__PURE__*/ $f0mF1$react.createElement($e729681ae85df948$var$CollapsibleContentImpl, ($parcel$interopDefault($f0mF1$babelruntimehelpersextends))({}, contentProps, {
115
+ ref: forwardedRef,
116
+ present: present
117
+ }))
118
+ );
119
+ });
120
+ /*#__PURE__*/ Object.assign($e729681ae85df948$export$aadde00976f34151, {
121
+ displayName: $e729681ae85df948$var$CONTENT_NAME
122
+ });
123
+ /* -----------------------------------------------------------------------------------------------*/ const $e729681ae85df948$var$CollapsibleContentImpl = /*#__PURE__*/ $f0mF1$react.forwardRef((props, forwardedRef)=>{
124
+ const { __scopeCollapsible: __scopeCollapsible , present: present , children: children , ...contentProps } = props;
125
+ const context = $e729681ae85df948$var$useCollapsibleContext($e729681ae85df948$var$CONTENT_NAME, __scopeCollapsible);
126
+ const [isPresent, setIsPresent] = $f0mF1$react.useState(present);
127
+ const ref = $f0mF1$react.useRef(null);
128
+ const composedRefs = $f0mF1$radixuireactcomposerefs.useComposedRefs(forwardedRef, ref);
129
+ const heightRef = $f0mF1$react.useRef(0);
130
+ const height = heightRef.current;
131
+ const widthRef = $f0mF1$react.useRef(0);
132
+ const width = widthRef.current; // when opening we want it to immediately open to retrieve dimensions
133
+ // when closing we delay `present` to retrieve dimensions before closing
134
+ const isOpen = context.open || isPresent;
135
+ const isMountAnimationPreventedRef = $f0mF1$react.useRef(isOpen);
136
+ const originalStylesRef = $f0mF1$react.useRef();
137
+ $f0mF1$react.useEffect(()=>{
138
+ const rAF = requestAnimationFrame(()=>isMountAnimationPreventedRef.current = false
139
+ );
140
+ return ()=>cancelAnimationFrame(rAF)
141
+ ;
142
+ }, []);
143
+ $f0mF1$radixuireactuselayouteffect.useLayoutEffect(()=>{
144
+ const node = ref.current;
145
+ if (node) {
146
+ originalStylesRef.current = originalStylesRef.current || {
147
+ transitionDuration: node.style.transitionDuration,
148
+ animationDuration: node.style.animationDuration,
149
+ animationFillMode: node.style.animationFillMode
150
+ }; // block any animations/transitions so the element renders at its full dimensions
151
+ node.style.transitionDuration = '0s';
152
+ node.style.animationDuration = '0s';
153
+ node.style.animationFillMode = 'none'; // get width and height from full dimensions
154
+ const rect = node.getBoundingClientRect();
155
+ heightRef.current = rect.height;
156
+ widthRef.current = rect.width; // kick off any animations/transitions that were originally set up if it isn't the initial mount
157
+ if (!isMountAnimationPreventedRef.current) {
158
+ node.style.transitionDuration = originalStylesRef.current.transitionDuration;
159
+ node.style.animationDuration = originalStylesRef.current.animationDuration;
160
+ node.style.animationFillMode = originalStylesRef.current.animationFillMode;
161
+ }
162
+ setIsPresent(present);
163
+ }
164
+ /**
165
+ * depends on `context.open` because it will change to `false`
166
+ * when a close is triggered but `present` will be `false` on
167
+ * animation end (so when close finishes). This allows us to
168
+ * retrieve the dimensions *before* closing.
169
+ */ }, [
170
+ context.open,
171
+ present
172
+ ]);
173
+ return /*#__PURE__*/ $f0mF1$react.createElement($f0mF1$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($f0mF1$babelruntimehelpersextends))({
174
+ "data-state": $e729681ae85df948$var$getState(context.open),
175
+ "data-disabled": context.disabled ? '' : undefined,
176
+ id: context.contentId,
177
+ hidden: !isOpen
178
+ }, contentProps, {
179
+ ref: composedRefs,
180
+ style: {
181
+ [`--radix-collapsible-content-height`]: height ? `${height}px` : undefined,
182
+ [`--radix-collapsible-content-width`]: width ? `${width}px` : undefined,
183
+ ...props.style
184
+ }
185
+ }), isOpen && children);
186
+ });
187
+ /* -----------------------------------------------------------------------------------------------*/ function $e729681ae85df948$var$getState(open) {
188
+ return open ? 'open' : 'closed';
189
+ }
190
+ const $e729681ae85df948$export$be92b6f5f03c0fe9 = $e729681ae85df948$export$6eb0f7ddcda6131f;
191
+ const $e729681ae85df948$export$41fb9f06171c75f4 = $e729681ae85df948$export$c135dce7b15bbbdc;
192
+ const $e729681ae85df948$export$7c6e2c02157bb7d2 = $e729681ae85df948$export$aadde00976f34151;
193
+
194
+
195
+ $parcel$exportWildcard(module.exports, $e729681ae85df948$exports);
196
+
197
+
2
198
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"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","sources":["./node_modules/@parcel/scope-hoisting/lib/helpers.js","./packages/react/collapsible/src/Collapsible.tsx"],"sourcesContent":["function $parcel$interopDefault(a) {\n return a && a.__esModule ? a.default : a;\n}\n\nfunction $parcel$defineInteropFlag(a) {\n Object.defineProperty(a, '__esModule', {value: true});\n}\n\nfunction $parcel$reexport(e, n, v) {\n Object.defineProperty(e, n, {get: v, enumerable: true});\n}\n\nfunction $parcel$exportWildcard(dest, source) {\n Object.keys(source).forEach(function(key) {\n if (key === 'default' || key === '__esModule') {\n return;\n }\n\n Object.defineProperty(dest, key, {\n enumerable: true,\n get: function get() {\n return source[key];\n },\n });\n });\n\n return dest;\n}\n\nfunction $parcel$missingModule(name) {\n var err = new Error(\"Cannot find module '\" + name + \"'\");\n err.code = 'MODULE_NOT_FOUND';\n throw err;\n}\n\nvar $parcel$global =\n typeof globalThis !== 'undefined'\n ? globalThis\n : typeof self !== 'undefined'\n ? self\n : typeof window !== 'undefined'\n ? window\n : typeof global !== 'undefined'\n ? global\n : {};\n","import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { Presence } from '@radix-ui/react-presence';\nimport { useId } from '@radix-ui/react-id';\n\nimport type * as Radix from '@radix-ui/react-primitive';\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * Collapsible\n * -----------------------------------------------------------------------------------------------*/\n\nconst COLLAPSIBLE_NAME = 'Collapsible';\n\ntype ScopedProps<P> = P & { __scopeCollapsible?: Scope };\nconst [createCollapsibleContext, createCollapsibleScope] = createContextScope(COLLAPSIBLE_NAME);\n\ntype CollapsibleContextValue = {\n contentId: string;\n disabled?: boolean;\n open: boolean;\n onOpenToggle(): void;\n};\n\nconst [CollapsibleProvider, useCollapsibleContext] =\n createCollapsibleContext<CollapsibleContextValue>(COLLAPSIBLE_NAME);\n\ntype CollapsibleElement = React.ElementRef<typeof Primitive.div>;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface CollapsibleProps extends PrimitiveDivProps {\n defaultOpen?: boolean;\n open?: boolean;\n disabled?: boolean;\n onOpenChange?(open: boolean): void;\n}\n\nconst Collapsible = React.forwardRef<CollapsibleElement, CollapsibleProps>(\n (props: ScopedProps<CollapsibleProps>, forwardedRef) => {\n const {\n __scopeCollapsible,\n open: openProp,\n defaultOpen,\n disabled,\n onOpenChange,\n ...collapsibleProps\n } = props;\n\n const [open = false, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen,\n onChange: onOpenChange,\n });\n\n return (\n <CollapsibleProvider\n scope={__scopeCollapsible}\n disabled={disabled}\n contentId={useId()}\n open={open}\n onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}\n >\n <Primitive.div\n data-state={getState(open)}\n data-disabled={disabled ? '' : undefined}\n {...collapsibleProps}\n ref={forwardedRef}\n />\n </CollapsibleProvider>\n );\n }\n);\n\nCollapsible.displayName = COLLAPSIBLE_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * CollapsibleTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'CollapsibleTrigger';\n\ntype CollapsibleTriggerElement = React.ElementRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = Radix.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface CollapsibleTriggerProps extends PrimitiveButtonProps {}\n\nconst CollapsibleTrigger = React.forwardRef<CollapsibleTriggerElement, CollapsibleTriggerProps>(\n (props: ScopedProps<CollapsibleTriggerProps>, forwardedRef) => {\n const { __scopeCollapsible, ...triggerProps } = props;\n const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible);\n return (\n <Primitive.button\n type=\"button\"\n aria-controls={context.contentId}\n aria-expanded={context.open || false}\n data-state={getState(context.open)}\n data-disabled={context.disabled ? '' : undefined}\n disabled={context.disabled}\n {...triggerProps}\n ref={forwardedRef}\n onClick={composeEventHandlers(props.onClick, context.onOpenToggle)}\n />\n );\n }\n);\n\nCollapsibleTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * CollapsibleContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'CollapsibleContent';\n\ntype CollapsibleContentElement = CollapsibleContentImplElement;\ninterface CollapsibleContentProps extends Omit<CollapsibleContentImplProps, 'present'> {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst CollapsibleContent = React.forwardRef<CollapsibleContentElement, CollapsibleContentProps>(\n (props: ScopedProps<CollapsibleContentProps>, forwardedRef) => {\n const { forceMount, ...contentProps } = props;\n const context = useCollapsibleContext(CONTENT_NAME, props.__scopeCollapsible);\n return (\n <Presence present={forceMount || context.open}>\n {({ present }) => (\n <CollapsibleContentImpl {...contentProps} ref={forwardedRef} present={present} />\n )}\n </Presence>\n );\n }\n);\n\nCollapsibleContent.displayName = CONTENT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype CollapsibleContentImplElement = React.ElementRef<typeof Primitive.div>;\ninterface CollapsibleContentImplProps extends PrimitiveDivProps {\n present: boolean;\n}\n\nconst CollapsibleContentImpl = React.forwardRef<\n CollapsibleContentImplElement,\n CollapsibleContentImplProps\n>((props: ScopedProps<CollapsibleContentImplProps>, forwardedRef) => {\n const { __scopeCollapsible, present, children, ...contentProps } = props;\n const context = useCollapsibleContext(CONTENT_NAME, __scopeCollapsible);\n const [isPresent, setIsPresent] = React.useState(present);\n const ref = React.useRef<CollapsibleContentImplElement>(null);\n const composedRefs = useComposedRefs(forwardedRef, ref);\n const heightRef = React.useRef<number | undefined>(0);\n const height = heightRef.current;\n const widthRef = React.useRef<number | undefined>(0);\n const width = widthRef.current;\n // when opening we want it to immediately open to retrieve dimensions\n // when closing we delay `present` to retrieve dimensions before closing\n const isOpen = context.open || isPresent;\n const isMountAnimationPreventedRef = React.useRef(isOpen);\n const originalStylesRef = React.useRef<Record<string, string>>();\n\n React.useEffect(() => {\n const rAF = requestAnimationFrame(() => (isMountAnimationPreventedRef.current = false));\n return () => cancelAnimationFrame(rAF);\n }, []);\n\n useLayoutEffect(() => {\n const node = ref.current;\n if (node) {\n originalStylesRef.current = originalStylesRef.current || {\n transitionDuration: node.style.transitionDuration,\n animationDuration: node.style.animationDuration,\n animationFillMode: node.style.animationFillMode,\n };\n // block any animations/transitions so the element renders at its full dimensions\n node.style.transitionDuration = '0s';\n node.style.animationDuration = '0s';\n node.style.animationFillMode = 'none';\n\n // get width and height from full dimensions\n const rect = node.getBoundingClientRect();\n heightRef.current = rect.height;\n widthRef.current = rect.width;\n\n // kick off any animations/transitions that were originally set up if it isn't the initial mount\n if (!isMountAnimationPreventedRef.current) {\n node.style.transitionDuration = originalStylesRef.current.transitionDuration;\n node.style.animationDuration = originalStylesRef.current.animationDuration;\n node.style.animationFillMode = originalStylesRef.current.animationFillMode;\n }\n\n setIsPresent(present);\n }\n /**\n * depends on `context.open` because it will change to `false`\n * when a close is triggered but `present` will be `false` on\n * animation end (so when close finishes). This allows us to\n * retrieve the dimensions *before* closing.\n */\n }, [context.open, present]);\n\n return (\n <Primitive.div\n data-state={getState(context.open)}\n data-disabled={context.disabled ? '' : undefined}\n id={context.contentId}\n hidden={!isOpen}\n {...contentProps}\n ref={composedRefs}\n style={{\n [`--radix-collapsible-content-height` as any]: height ? `${height}px` : undefined,\n [`--radix-collapsible-content-width` as any]: width ? `${width}px` : undefined,\n ...props.style,\n }}\n >\n {isOpen && children}\n </Primitive.div>\n );\n});\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open?: boolean) {\n return open ? 'open' : 'closed';\n}\n\nconst Root = Collapsible;\nconst Trigger = CollapsibleTrigger;\nconst Content = CollapsibleContent;\n\nexport {\n createCollapsibleScope,\n //\n Collapsible,\n CollapsibleTrigger,\n CollapsibleContent,\n //\n Root,\n Trigger,\n Content,\n};\nexport type { CollapsibleProps, CollapsibleTriggerProps, CollapsibleContentProps };\n"],"names":["dest","source","a","Object","keys","forEach","key","defineProperty","enumerable","get","__esModule","default","createCollapsibleContext","createCollapsibleScope","createContextScope","CollapsibleProvider","useCollapsibleContext","Collapsible","React","forwardRef","props","forwardedRef","__scopeCollapsible","open","openProp","defaultOpen","disabled","onOpenChange","collapsibleProps","setOpen","useControllableState","prop","defaultProp","onChange","_react","createElement","$b3500ea45ffd0ee38cf4aace5a106ff9$var$CollapsibleProvider","scope","contentId","useId","onOpenToggle","useCallback","prevOpen","Primitive","div","_babelRuntimeHelpersExtends","getState","undefined","ref","CollapsibleTrigger","triggerProps","context","button","type","onClick","composeEventHandlers","CollapsibleContent","forceMount","contentProps","Presence","present","$b3500ea45ffd0ee38cf4aace5a106ff9$var$CollapsibleContentImpl","CollapsibleContentImpl","children","isPresent","setIsPresent","useState","useRef","composedRefs","useComposedRefs","heightRef","height","current","widthRef","width","isOpen","isMountAnimationPreventedRef","originalStylesRef","useEffect","rAF","requestAnimationFrame","cancelAnimationFrame","useLayoutEffect","node","transitionDuration","style","animationDuration","animationFillMode","rect","getBoundingClientRect","id","hidden","Root","Trigger","Content"],"version":3,"file":"index.js.map"}
1
+ {"mappings":"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","sources":["packages/react/collapsible/src/index.ts","packages/react/collapsible/src/Collapsible.tsx"],"sourcesContent":["export * from './Collapsible';\n","import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { Presence } from '@radix-ui/react-presence';\nimport { useId } from '@radix-ui/react-id';\n\nimport type * as Radix from '@radix-ui/react-primitive';\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * Collapsible\n * -----------------------------------------------------------------------------------------------*/\n\nconst COLLAPSIBLE_NAME = 'Collapsible';\n\ntype ScopedProps<P> = P & { __scopeCollapsible?: Scope };\nconst [createCollapsibleContext, createCollapsibleScope] = createContextScope(COLLAPSIBLE_NAME);\n\ntype CollapsibleContextValue = {\n contentId: string;\n disabled?: boolean;\n open: boolean;\n onOpenToggle(): void;\n};\n\nconst [CollapsibleProvider, useCollapsibleContext] =\n createCollapsibleContext<CollapsibleContextValue>(COLLAPSIBLE_NAME);\n\ntype CollapsibleElement = React.ElementRef<typeof Primitive.div>;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface CollapsibleProps extends PrimitiveDivProps {\n defaultOpen?: boolean;\n open?: boolean;\n disabled?: boolean;\n onOpenChange?(open: boolean): void;\n}\n\nconst Collapsible = React.forwardRef<CollapsibleElement, CollapsibleProps>(\n (props: ScopedProps<CollapsibleProps>, forwardedRef) => {\n const {\n __scopeCollapsible,\n open: openProp,\n defaultOpen,\n disabled,\n onOpenChange,\n ...collapsibleProps\n } = props;\n\n const [open = false, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen,\n onChange: onOpenChange,\n });\n\n return (\n <CollapsibleProvider\n scope={__scopeCollapsible}\n disabled={disabled}\n contentId={useId()}\n open={open}\n onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}\n >\n <Primitive.div\n data-state={getState(open)}\n data-disabled={disabled ? '' : undefined}\n {...collapsibleProps}\n ref={forwardedRef}\n />\n </CollapsibleProvider>\n );\n }\n);\n\nCollapsible.displayName = COLLAPSIBLE_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * CollapsibleTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'CollapsibleTrigger';\n\ntype CollapsibleTriggerElement = React.ElementRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = Radix.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface CollapsibleTriggerProps extends PrimitiveButtonProps {}\n\nconst CollapsibleTrigger = React.forwardRef<CollapsibleTriggerElement, CollapsibleTriggerProps>(\n (props: ScopedProps<CollapsibleTriggerProps>, forwardedRef) => {\n const { __scopeCollapsible, ...triggerProps } = props;\n const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible);\n return (\n <Primitive.button\n type=\"button\"\n aria-controls={context.contentId}\n aria-expanded={context.open || false}\n data-state={getState(context.open)}\n data-disabled={context.disabled ? '' : undefined}\n disabled={context.disabled}\n {...triggerProps}\n ref={forwardedRef}\n onClick={composeEventHandlers(props.onClick, context.onOpenToggle)}\n />\n );\n }\n);\n\nCollapsibleTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * CollapsibleContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'CollapsibleContent';\n\ntype CollapsibleContentElement = CollapsibleContentImplElement;\ninterface CollapsibleContentProps extends Omit<CollapsibleContentImplProps, 'present'> {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst CollapsibleContent = React.forwardRef<CollapsibleContentElement, CollapsibleContentProps>(\n (props: ScopedProps<CollapsibleContentProps>, forwardedRef) => {\n const { forceMount, ...contentProps } = props;\n const context = useCollapsibleContext(CONTENT_NAME, props.__scopeCollapsible);\n return (\n <Presence present={forceMount || context.open}>\n {({ present }) => (\n <CollapsibleContentImpl {...contentProps} ref={forwardedRef} present={present} />\n )}\n </Presence>\n );\n }\n);\n\nCollapsibleContent.displayName = CONTENT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype CollapsibleContentImplElement = React.ElementRef<typeof Primitive.div>;\ninterface CollapsibleContentImplProps extends PrimitiveDivProps {\n present: boolean;\n}\n\nconst CollapsibleContentImpl = React.forwardRef<\n CollapsibleContentImplElement,\n CollapsibleContentImplProps\n>((props: ScopedProps<CollapsibleContentImplProps>, forwardedRef) => {\n const { __scopeCollapsible, present, children, ...contentProps } = props;\n const context = useCollapsibleContext(CONTENT_NAME, __scopeCollapsible);\n const [isPresent, setIsPresent] = React.useState(present);\n const ref = React.useRef<CollapsibleContentImplElement>(null);\n const composedRefs = useComposedRefs(forwardedRef, ref);\n const heightRef = React.useRef<number | undefined>(0);\n const height = heightRef.current;\n const widthRef = React.useRef<number | undefined>(0);\n const width = widthRef.current;\n // when opening we want it to immediately open to retrieve dimensions\n // when closing we delay `present` to retrieve dimensions before closing\n const isOpen = context.open || isPresent;\n const isMountAnimationPreventedRef = React.useRef(isOpen);\n const originalStylesRef = React.useRef<Record<string, string>>();\n\n React.useEffect(() => {\n const rAF = requestAnimationFrame(() => (isMountAnimationPreventedRef.current = false));\n return () => cancelAnimationFrame(rAF);\n }, []);\n\n useLayoutEffect(() => {\n const node = ref.current;\n if (node) {\n originalStylesRef.current = originalStylesRef.current || {\n transitionDuration: node.style.transitionDuration,\n animationDuration: node.style.animationDuration,\n animationFillMode: node.style.animationFillMode,\n };\n // block any animations/transitions so the element renders at its full dimensions\n node.style.transitionDuration = '0s';\n node.style.animationDuration = '0s';\n node.style.animationFillMode = 'none';\n\n // get width and height from full dimensions\n const rect = node.getBoundingClientRect();\n heightRef.current = rect.height;\n widthRef.current = rect.width;\n\n // kick off any animations/transitions that were originally set up if it isn't the initial mount\n if (!isMountAnimationPreventedRef.current) {\n node.style.transitionDuration = originalStylesRef.current.transitionDuration;\n node.style.animationDuration = originalStylesRef.current.animationDuration;\n node.style.animationFillMode = originalStylesRef.current.animationFillMode;\n }\n\n setIsPresent(present);\n }\n /**\n * depends on `context.open` because it will change to `false`\n * when a close is triggered but `present` will be `false` on\n * animation end (so when close finishes). This allows us to\n * retrieve the dimensions *before* closing.\n */\n }, [context.open, present]);\n\n return (\n <Primitive.div\n data-state={getState(context.open)}\n data-disabled={context.disabled ? '' : undefined}\n id={context.contentId}\n hidden={!isOpen}\n {...contentProps}\n ref={composedRefs}\n style={{\n [`--radix-collapsible-content-height` as any]: height ? `${height}px` : undefined,\n [`--radix-collapsible-content-width` as any]: width ? `${width}px` : undefined,\n ...props.style,\n }}\n >\n {isOpen && children}\n </Primitive.div>\n );\n});\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open?: boolean) {\n return open ? 'open' : 'closed';\n}\n\nconst Root = Collapsible;\nconst Trigger = CollapsibleTrigger;\nconst Content = CollapsibleContent;\n\nexport {\n createCollapsibleScope,\n //\n Collapsible,\n CollapsibleTrigger,\n CollapsibleContent,\n //\n Root,\n Trigger,\n Content,\n};\nexport type { CollapsibleProps, CollapsibleTriggerProps, CollapsibleContentProps };\n"],"names":["React","composeEventHandlers","createContextScope","useControllableState","useLayoutEffect","useComposedRefs","Primitive","Presence","useId","COLLAPSIBLE_NAME","createCollapsibleContext","createCollapsibleScope","CollapsibleProvider","useCollapsibleContext","Collapsible","forwardRef","props","forwardedRef","__scopeCollapsible","open","openProp","defaultOpen","disabled","onOpenChange","collapsibleProps","setOpen","prop","defaultProp","onChange","useCallback","prevOpen","getState","undefined","TRIGGER_NAME","CollapsibleTrigger","triggerProps","context","contentId","onClick","onOpenToggle","CONTENT_NAME","CollapsibleContent","forceMount","contentProps","present","CollapsibleContentImpl","children","isPresent","setIsPresent","useState","ref","useRef","composedRefs","heightRef","height","current","widthRef","width","isOpen","isMountAnimationPreventedRef","originalStylesRef","useEffect","rAF","requestAnimationFrame","cancelAnimationFrame","node","transitionDuration","style","animationDuration","animationFillMode","rect","getBoundingClientRect","Root","Trigger","Content"],"version":3,"file":"index.js.map"}
@@ -1,2 +1,179 @@
1
- import{useId as e}from"@radix-ui/react-id";import{Presence as t}from"@radix-ui/react-presence";import{Primitive as o}from"@radix-ui/react-primitive";import{useComposedRefs as n}from"@radix-ui/react-compose-refs";import{useLayoutEffect as r}from"@radix-ui/react-use-layout-effect";import{useControllableState as i}from"@radix-ui/react-use-controllable-state";import{createContextScope as a}from"@radix-ui/react-context";import{composeEventHandlers as l}from"@radix-ui/primitive";import*as s from"react";import c from"@babel/runtime/helpers/esm/extends";const[p,d]=a("Collapsible");export{d as createCollapsibleScope};const[u,m]=p("Collapsible");export const Collapsible=/*#__PURE__*/s.forwardRef(((t,n)=>{const{__scopeCollapsible:r,open:a,defaultOpen:l,disabled:p,onOpenChange:d,...m}=t,[f=!1,C]=i({prop:a,defaultProp:l,onChange:d});/*#__PURE__*/return s.createElement(u,{scope:r,disabled:p,contentId:e(),open:f,onOpenToggle:s.useCallback((()=>C((e=>!e))),[C])},/*#__PURE__*/s.createElement(o.div,c({"data-state":b(f),"data-disabled":p?"":void 0},m,{ref:n})))}));/*#__PURE__*/export const CollapsibleTrigger=/*#__PURE__*/s.forwardRef(((e,t)=>{const{__scopeCollapsible:n,...r}=e,i=m("CollapsibleTrigger",n);/*#__PURE__*/return s.createElement(o.button,c({type:"button","aria-controls":i.contentId,"aria-expanded":i.open||!1,"data-state":b(i.open),"data-disabled":i.disabled?"":void 0,disabled:i.disabled},r,{ref:t,onClick:l(e.onClick,i.onOpenToggle)}))}));/*#__PURE__*/export const CollapsibleContent=/*#__PURE__*/s.forwardRef(((e,o)=>{const{forceMount:n,...r}=e,i=m("CollapsibleContent",e.__scopeCollapsible);/*#__PURE__*/return s.createElement(t,{present:n||i.open},(({present:e})=>/*#__PURE__*/s.createElement(f,c({},r,{ref:o,present:e}))))}));/*#__PURE__*/const f=/*#__PURE__*/s.forwardRef(((e,t)=>{const{__scopeCollapsible:i,present:a,children:l,...p}=e,d=m("CollapsibleContent",i),[u,f]=s.useState(a),C=s.useRef(null),x=n(t,C),g=s.useRef(0),y=g.current,h=s.useRef(0),R=h.current,D=d.open||u,v=s.useRef(D),_=s.useRef();return s.useEffect((()=>{const e=requestAnimationFrame((()=>v.current=!1));return()=>cancelAnimationFrame(e)}),[]),r((()=>{const e=C.current;if(e){_.current=_.current||{transitionDuration:e.style.transitionDuration,animationDuration:e.style.animationDuration,animationFillMode:e.style.animationFillMode},e.style.transitionDuration="0s",e.style.animationDuration="0s",e.style.animationFillMode="none";const t=e.getBoundingClientRect();g.current=t.height,h.current=t.width,v.current||(e.style.transitionDuration=_.current.transitionDuration,e.style.animationDuration=_.current.animationDuration,e.style.animationFillMode=_.current.animationFillMode),f(a)}}),[d.open,a]),/*#__PURE__*/s.createElement(o.div,c({"data-state":b(d.open),"data-disabled":d.disabled?"":void 0,id:d.contentId,hidden:!D},p,{ref:x,style:{"--radix-collapsible-content-height":y?`${y}px`:void 0,"--radix-collapsible-content-width":R?`${R}px`:void 0,...e.style}}),D&&l)}));function b(e){return e?"open":"closed"}export const Root=Collapsible;export const Trigger=CollapsibleTrigger;export const Content=CollapsibleContent;
1
+ import $73KQ4$babelruntimehelpersesmextends from "@babel/runtime/helpers/esm/extends";
2
+ import {forwardRef as $73KQ4$forwardRef, createElement as $73KQ4$createElement, useCallback as $73KQ4$useCallback, useState as $73KQ4$useState, useRef as $73KQ4$useRef, useEffect as $73KQ4$useEffect} from "react";
3
+ import {composeEventHandlers as $73KQ4$composeEventHandlers} from "@radix-ui/primitive";
4
+ import {createContextScope as $73KQ4$createContextScope} from "@radix-ui/react-context";
5
+ import {useControllableState as $73KQ4$useControllableState} from "@radix-ui/react-use-controllable-state";
6
+ import {useLayoutEffect as $73KQ4$useLayoutEffect} from "@radix-ui/react-use-layout-effect";
7
+ import {useComposedRefs as $73KQ4$useComposedRefs} from "@radix-ui/react-compose-refs";
8
+ import {Primitive as $73KQ4$Primitive} from "@radix-ui/react-primitive";
9
+ import {Presence as $73KQ4$Presence} from "@radix-ui/react-presence";
10
+ import {useId as $73KQ4$useId} from "@radix-ui/react-id";
11
+
12
+ function $parcel$export(e, n, v, s) {
13
+ Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
14
+ }
15
+ var $409067139f391064$exports = {};
16
+
17
+ $parcel$export($409067139f391064$exports, "createCollapsibleScope", () => $409067139f391064$export$952b32dcbe73087a);
18
+ $parcel$export($409067139f391064$exports, "Collapsible", () => $409067139f391064$export$6eb0f7ddcda6131f);
19
+ $parcel$export($409067139f391064$exports, "CollapsibleTrigger", () => $409067139f391064$export$c135dce7b15bbbdc);
20
+ $parcel$export($409067139f391064$exports, "CollapsibleContent", () => $409067139f391064$export$aadde00976f34151);
21
+ $parcel$export($409067139f391064$exports, "Root", () => $409067139f391064$export$be92b6f5f03c0fe9);
22
+ $parcel$export($409067139f391064$exports, "Trigger", () => $409067139f391064$export$41fb9f06171c75f4);
23
+ $parcel$export($409067139f391064$exports, "Content", () => $409067139f391064$export$7c6e2c02157bb7d2);
24
+
25
+
26
+
27
+
28
+
29
+
30
+
31
+
32
+
33
+
34
+ /* -------------------------------------------------------------------------------------------------
35
+ * Collapsible
36
+ * -----------------------------------------------------------------------------------------------*/ const $409067139f391064$var$COLLAPSIBLE_NAME = 'Collapsible';
37
+ const [$409067139f391064$var$createCollapsibleContext, $409067139f391064$export$952b32dcbe73087a] = $73KQ4$createContextScope($409067139f391064$var$COLLAPSIBLE_NAME);
38
+ const [$409067139f391064$var$CollapsibleProvider, $409067139f391064$var$useCollapsibleContext] = $409067139f391064$var$createCollapsibleContext($409067139f391064$var$COLLAPSIBLE_NAME);
39
+ const $409067139f391064$export$6eb0f7ddcda6131f = /*#__PURE__*/ $73KQ4$forwardRef((props, forwardedRef)=>{
40
+ const { __scopeCollapsible: __scopeCollapsible , open: openProp , defaultOpen: defaultOpen , disabled: disabled , onOpenChange: onOpenChange , ...collapsibleProps } = props;
41
+ const [open = false, setOpen] = $73KQ4$useControllableState({
42
+ prop: openProp,
43
+ defaultProp: defaultOpen,
44
+ onChange: onOpenChange
45
+ });
46
+ return /*#__PURE__*/ $73KQ4$createElement($409067139f391064$var$CollapsibleProvider, {
47
+ scope: __scopeCollapsible,
48
+ disabled: disabled,
49
+ contentId: $73KQ4$useId(),
50
+ open: open,
51
+ onOpenToggle: $73KQ4$useCallback(()=>setOpen((prevOpen)=>!prevOpen
52
+ )
53
+ , [
54
+ setOpen
55
+ ])
56
+ }, /*#__PURE__*/ $73KQ4$createElement($73KQ4$Primitive.div, $73KQ4$babelruntimehelpersesmextends({
57
+ "data-state": $409067139f391064$var$getState(open),
58
+ "data-disabled": disabled ? '' : undefined
59
+ }, collapsibleProps, {
60
+ ref: forwardedRef
61
+ })));
62
+ });
63
+ /*#__PURE__*/ Object.assign($409067139f391064$export$6eb0f7ddcda6131f, {
64
+ displayName: $409067139f391064$var$COLLAPSIBLE_NAME
65
+ });
66
+ /* -------------------------------------------------------------------------------------------------
67
+ * CollapsibleTrigger
68
+ * -----------------------------------------------------------------------------------------------*/ const $409067139f391064$var$TRIGGER_NAME = 'CollapsibleTrigger';
69
+ const $409067139f391064$export$c135dce7b15bbbdc = /*#__PURE__*/ $73KQ4$forwardRef((props, forwardedRef)=>{
70
+ const { __scopeCollapsible: __scopeCollapsible , ...triggerProps } = props;
71
+ const context = $409067139f391064$var$useCollapsibleContext($409067139f391064$var$TRIGGER_NAME, __scopeCollapsible);
72
+ return /*#__PURE__*/ $73KQ4$createElement($73KQ4$Primitive.button, $73KQ4$babelruntimehelpersesmextends({
73
+ type: "button",
74
+ "aria-controls": context.contentId,
75
+ "aria-expanded": context.open || false,
76
+ "data-state": $409067139f391064$var$getState(context.open),
77
+ "data-disabled": context.disabled ? '' : undefined,
78
+ disabled: context.disabled
79
+ }, triggerProps, {
80
+ ref: forwardedRef,
81
+ onClick: $73KQ4$composeEventHandlers(props.onClick, context.onOpenToggle)
82
+ }));
83
+ });
84
+ /*#__PURE__*/ Object.assign($409067139f391064$export$c135dce7b15bbbdc, {
85
+ displayName: $409067139f391064$var$TRIGGER_NAME
86
+ });
87
+ /* -------------------------------------------------------------------------------------------------
88
+ * CollapsibleContent
89
+ * -----------------------------------------------------------------------------------------------*/ const $409067139f391064$var$CONTENT_NAME = 'CollapsibleContent';
90
+ const $409067139f391064$export$aadde00976f34151 = /*#__PURE__*/ $73KQ4$forwardRef((props, forwardedRef)=>{
91
+ const { forceMount: forceMount , ...contentProps } = props;
92
+ const context = $409067139f391064$var$useCollapsibleContext($409067139f391064$var$CONTENT_NAME, props.__scopeCollapsible);
93
+ return /*#__PURE__*/ $73KQ4$createElement($73KQ4$Presence, {
94
+ present: forceMount || context.open
95
+ }, ({ present: present })=>/*#__PURE__*/ $73KQ4$createElement($409067139f391064$var$CollapsibleContentImpl, $73KQ4$babelruntimehelpersesmextends({}, contentProps, {
96
+ ref: forwardedRef,
97
+ present: present
98
+ }))
99
+ );
100
+ });
101
+ /*#__PURE__*/ Object.assign($409067139f391064$export$aadde00976f34151, {
102
+ displayName: $409067139f391064$var$CONTENT_NAME
103
+ });
104
+ /* -----------------------------------------------------------------------------------------------*/ const $409067139f391064$var$CollapsibleContentImpl = /*#__PURE__*/ $73KQ4$forwardRef((props, forwardedRef)=>{
105
+ const { __scopeCollapsible: __scopeCollapsible , present: present , children: children , ...contentProps } = props;
106
+ const context = $409067139f391064$var$useCollapsibleContext($409067139f391064$var$CONTENT_NAME, __scopeCollapsible);
107
+ const [isPresent, setIsPresent] = $73KQ4$useState(present);
108
+ const ref = $73KQ4$useRef(null);
109
+ const composedRefs = $73KQ4$useComposedRefs(forwardedRef, ref);
110
+ const heightRef = $73KQ4$useRef(0);
111
+ const height = heightRef.current;
112
+ const widthRef = $73KQ4$useRef(0);
113
+ const width = widthRef.current; // when opening we want it to immediately open to retrieve dimensions
114
+ // when closing we delay `present` to retrieve dimensions before closing
115
+ const isOpen = context.open || isPresent;
116
+ const isMountAnimationPreventedRef = $73KQ4$useRef(isOpen);
117
+ const originalStylesRef = $73KQ4$useRef();
118
+ $73KQ4$useEffect(()=>{
119
+ const rAF = requestAnimationFrame(()=>isMountAnimationPreventedRef.current = false
120
+ );
121
+ return ()=>cancelAnimationFrame(rAF)
122
+ ;
123
+ }, []);
124
+ $73KQ4$useLayoutEffect(()=>{
125
+ const node = ref.current;
126
+ if (node) {
127
+ originalStylesRef.current = originalStylesRef.current || {
128
+ transitionDuration: node.style.transitionDuration,
129
+ animationDuration: node.style.animationDuration,
130
+ animationFillMode: node.style.animationFillMode
131
+ }; // block any animations/transitions so the element renders at its full dimensions
132
+ node.style.transitionDuration = '0s';
133
+ node.style.animationDuration = '0s';
134
+ node.style.animationFillMode = 'none'; // get width and height from full dimensions
135
+ const rect = node.getBoundingClientRect();
136
+ heightRef.current = rect.height;
137
+ widthRef.current = rect.width; // kick off any animations/transitions that were originally set up if it isn't the initial mount
138
+ if (!isMountAnimationPreventedRef.current) {
139
+ node.style.transitionDuration = originalStylesRef.current.transitionDuration;
140
+ node.style.animationDuration = originalStylesRef.current.animationDuration;
141
+ node.style.animationFillMode = originalStylesRef.current.animationFillMode;
142
+ }
143
+ setIsPresent(present);
144
+ }
145
+ /**
146
+ * depends on `context.open` because it will change to `false`
147
+ * when a close is triggered but `present` will be `false` on
148
+ * animation end (so when close finishes). This allows us to
149
+ * retrieve the dimensions *before* closing.
150
+ */ }, [
151
+ context.open,
152
+ present
153
+ ]);
154
+ return /*#__PURE__*/ $73KQ4$createElement($73KQ4$Primitive.div, $73KQ4$babelruntimehelpersesmextends({
155
+ "data-state": $409067139f391064$var$getState(context.open),
156
+ "data-disabled": context.disabled ? '' : undefined,
157
+ id: context.contentId,
158
+ hidden: !isOpen
159
+ }, contentProps, {
160
+ ref: composedRefs,
161
+ style: {
162
+ [`--radix-collapsible-content-height`]: height ? `${height}px` : undefined,
163
+ [`--radix-collapsible-content-width`]: width ? `${width}px` : undefined,
164
+ ...props.style
165
+ }
166
+ }), isOpen && children);
167
+ });
168
+ /* -----------------------------------------------------------------------------------------------*/ function $409067139f391064$var$getState(open) {
169
+ return open ? 'open' : 'closed';
170
+ }
171
+ const $409067139f391064$export$be92b6f5f03c0fe9 = $409067139f391064$export$6eb0f7ddcda6131f;
172
+ const $409067139f391064$export$41fb9f06171c75f4 = $409067139f391064$export$c135dce7b15bbbdc;
173
+ const $409067139f391064$export$7c6e2c02157bb7d2 = $409067139f391064$export$aadde00976f34151;
174
+
175
+
176
+
177
+
178
+ export {$409067139f391064$export$952b32dcbe73087a as createCollapsibleScope, $409067139f391064$export$6eb0f7ddcda6131f as Collapsible, $409067139f391064$export$c135dce7b15bbbdc as CollapsibleTrigger, $409067139f391064$export$aadde00976f34151 as CollapsibleContent, $409067139f391064$export$be92b6f5f03c0fe9 as Root, $409067139f391064$export$41fb9f06171c75f4 as Trigger, $409067139f391064$export$7c6e2c02157bb7d2 as Content};
2
179
  //# sourceMappingURL=index.module.js.map
@@ -1 +1 @@
1
- {"mappings":"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","sources":["./packages/react/collapsible/src/Collapsible.tsx"],"sourcesContent":["import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { Presence } from '@radix-ui/react-presence';\nimport { useId } from '@radix-ui/react-id';\n\nimport type * as Radix from '@radix-ui/react-primitive';\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * Collapsible\n * -----------------------------------------------------------------------------------------------*/\n\nconst COLLAPSIBLE_NAME = 'Collapsible';\n\ntype ScopedProps<P> = P & { __scopeCollapsible?: Scope };\nconst [createCollapsibleContext, createCollapsibleScope] = createContextScope(COLLAPSIBLE_NAME);\n\ntype CollapsibleContextValue = {\n contentId: string;\n disabled?: boolean;\n open: boolean;\n onOpenToggle(): void;\n};\n\nconst [CollapsibleProvider, useCollapsibleContext] =\n createCollapsibleContext<CollapsibleContextValue>(COLLAPSIBLE_NAME);\n\ntype CollapsibleElement = React.ElementRef<typeof Primitive.div>;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface CollapsibleProps extends PrimitiveDivProps {\n defaultOpen?: boolean;\n open?: boolean;\n disabled?: boolean;\n onOpenChange?(open: boolean): void;\n}\n\nconst Collapsible = React.forwardRef<CollapsibleElement, CollapsibleProps>(\n (props: ScopedProps<CollapsibleProps>, forwardedRef) => {\n const {\n __scopeCollapsible,\n open: openProp,\n defaultOpen,\n disabled,\n onOpenChange,\n ...collapsibleProps\n } = props;\n\n const [open = false, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen,\n onChange: onOpenChange,\n });\n\n return (\n <CollapsibleProvider\n scope={__scopeCollapsible}\n disabled={disabled}\n contentId={useId()}\n open={open}\n onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}\n >\n <Primitive.div\n data-state={getState(open)}\n data-disabled={disabled ? '' : undefined}\n {...collapsibleProps}\n ref={forwardedRef}\n />\n </CollapsibleProvider>\n );\n }\n);\n\nCollapsible.displayName = COLLAPSIBLE_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * CollapsibleTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'CollapsibleTrigger';\n\ntype CollapsibleTriggerElement = React.ElementRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = Radix.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface CollapsibleTriggerProps extends PrimitiveButtonProps {}\n\nconst CollapsibleTrigger = React.forwardRef<CollapsibleTriggerElement, CollapsibleTriggerProps>(\n (props: ScopedProps<CollapsibleTriggerProps>, forwardedRef) => {\n const { __scopeCollapsible, ...triggerProps } = props;\n const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible);\n return (\n <Primitive.button\n type=\"button\"\n aria-controls={context.contentId}\n aria-expanded={context.open || false}\n data-state={getState(context.open)}\n data-disabled={context.disabled ? '' : undefined}\n disabled={context.disabled}\n {...triggerProps}\n ref={forwardedRef}\n onClick={composeEventHandlers(props.onClick, context.onOpenToggle)}\n />\n );\n }\n);\n\nCollapsibleTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * CollapsibleContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'CollapsibleContent';\n\ntype CollapsibleContentElement = CollapsibleContentImplElement;\ninterface CollapsibleContentProps extends Omit<CollapsibleContentImplProps, 'present'> {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst CollapsibleContent = React.forwardRef<CollapsibleContentElement, CollapsibleContentProps>(\n (props: ScopedProps<CollapsibleContentProps>, forwardedRef) => {\n const { forceMount, ...contentProps } = props;\n const context = useCollapsibleContext(CONTENT_NAME, props.__scopeCollapsible);\n return (\n <Presence present={forceMount || context.open}>\n {({ present }) => (\n <CollapsibleContentImpl {...contentProps} ref={forwardedRef} present={present} />\n )}\n </Presence>\n );\n }\n);\n\nCollapsibleContent.displayName = CONTENT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype CollapsibleContentImplElement = React.ElementRef<typeof Primitive.div>;\ninterface CollapsibleContentImplProps extends PrimitiveDivProps {\n present: boolean;\n}\n\nconst CollapsibleContentImpl = React.forwardRef<\n CollapsibleContentImplElement,\n CollapsibleContentImplProps\n>((props: ScopedProps<CollapsibleContentImplProps>, forwardedRef) => {\n const { __scopeCollapsible, present, children, ...contentProps } = props;\n const context = useCollapsibleContext(CONTENT_NAME, __scopeCollapsible);\n const [isPresent, setIsPresent] = React.useState(present);\n const ref = React.useRef<CollapsibleContentImplElement>(null);\n const composedRefs = useComposedRefs(forwardedRef, ref);\n const heightRef = React.useRef<number | undefined>(0);\n const height = heightRef.current;\n const widthRef = React.useRef<number | undefined>(0);\n const width = widthRef.current;\n // when opening we want it to immediately open to retrieve dimensions\n // when closing we delay `present` to retrieve dimensions before closing\n const isOpen = context.open || isPresent;\n const isMountAnimationPreventedRef = React.useRef(isOpen);\n const originalStylesRef = React.useRef<Record<string, string>>();\n\n React.useEffect(() => {\n const rAF = requestAnimationFrame(() => (isMountAnimationPreventedRef.current = false));\n return () => cancelAnimationFrame(rAF);\n }, []);\n\n useLayoutEffect(() => {\n const node = ref.current;\n if (node) {\n originalStylesRef.current = originalStylesRef.current || {\n transitionDuration: node.style.transitionDuration,\n animationDuration: node.style.animationDuration,\n animationFillMode: node.style.animationFillMode,\n };\n // block any animations/transitions so the element renders at its full dimensions\n node.style.transitionDuration = '0s';\n node.style.animationDuration = '0s';\n node.style.animationFillMode = 'none';\n\n // get width and height from full dimensions\n const rect = node.getBoundingClientRect();\n heightRef.current = rect.height;\n widthRef.current = rect.width;\n\n // kick off any animations/transitions that were originally set up if it isn't the initial mount\n if (!isMountAnimationPreventedRef.current) {\n node.style.transitionDuration = originalStylesRef.current.transitionDuration;\n node.style.animationDuration = originalStylesRef.current.animationDuration;\n node.style.animationFillMode = originalStylesRef.current.animationFillMode;\n }\n\n setIsPresent(present);\n }\n /**\n * depends on `context.open` because it will change to `false`\n * when a close is triggered but `present` will be `false` on\n * animation end (so when close finishes). This allows us to\n * retrieve the dimensions *before* closing.\n */\n }, [context.open, present]);\n\n return (\n <Primitive.div\n data-state={getState(context.open)}\n data-disabled={context.disabled ? '' : undefined}\n id={context.contentId}\n hidden={!isOpen}\n {...contentProps}\n ref={composedRefs}\n style={{\n [`--radix-collapsible-content-height` as any]: height ? `${height}px` : undefined,\n [`--radix-collapsible-content-width` as any]: width ? `${width}px` : undefined,\n ...props.style,\n }}\n >\n {isOpen && children}\n </Primitive.div>\n );\n});\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open?: boolean) {\n return open ? 'open' : 'closed';\n}\n\nconst Root = Collapsible;\nconst Trigger = CollapsibleTrigger;\nconst Content = CollapsibleContent;\n\nexport {\n createCollapsibleScope,\n //\n Collapsible,\n CollapsibleTrigger,\n CollapsibleContent,\n //\n Root,\n Trigger,\n Content,\n};\nexport type { CollapsibleProps, CollapsibleTriggerProps, CollapsibleContentProps };\n"],"names":["createCollapsibleContext","createCollapsibleScope","createContextScope","CollapsibleProvider","useCollapsibleContext","Collapsible","React","forwardRef","props","forwardedRef","__scopeCollapsible","open","openProp","defaultOpen","disabled","onOpenChange","collapsibleProps","setOpen","useControllableState","prop","defaultProp","onChange","_react","createElement","$a5c9ff236b90360c7963e374990ad39$var$CollapsibleProvider","scope","contentId","useId","onOpenToggle","useCallback","prevOpen","Primitive","div","_babelRuntimeHelpersEsmExtends","getState","undefined","ref","CollapsibleTrigger","triggerProps","context","button","type","onClick","composeEventHandlers","CollapsibleContent","forceMount","contentProps","Presence","present","$a5c9ff236b90360c7963e374990ad39$var$CollapsibleContentImpl","CollapsibleContentImpl","children","isPresent","setIsPresent","useState","useRef","composedRefs","useComposedRefs","heightRef","height","current","widthRef","width","isOpen","isMountAnimationPreventedRef","originalStylesRef","useEffect","rAF","requestAnimationFrame","cancelAnimationFrame","useLayoutEffect","node","transitionDuration","style","animationDuration","animationFillMode","rect","getBoundingClientRect","id","hidden","Root","Trigger","Content"],"version":3,"file":"index.module.js.map"}
1
+ {"mappings":"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","sources":["packages/react/collapsible/src/index.ts","packages/react/collapsible/src/Collapsible.tsx"],"sourcesContent":["export * from './Collapsible';\n","import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { Presence } from '@radix-ui/react-presence';\nimport { useId } from '@radix-ui/react-id';\n\nimport type * as Radix from '@radix-ui/react-primitive';\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * Collapsible\n * -----------------------------------------------------------------------------------------------*/\n\nconst COLLAPSIBLE_NAME = 'Collapsible';\n\ntype ScopedProps<P> = P & { __scopeCollapsible?: Scope };\nconst [createCollapsibleContext, createCollapsibleScope] = createContextScope(COLLAPSIBLE_NAME);\n\ntype CollapsibleContextValue = {\n contentId: string;\n disabled?: boolean;\n open: boolean;\n onOpenToggle(): void;\n};\n\nconst [CollapsibleProvider, useCollapsibleContext] =\n createCollapsibleContext<CollapsibleContextValue>(COLLAPSIBLE_NAME);\n\ntype CollapsibleElement = React.ElementRef<typeof Primitive.div>;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface CollapsibleProps extends PrimitiveDivProps {\n defaultOpen?: boolean;\n open?: boolean;\n disabled?: boolean;\n onOpenChange?(open: boolean): void;\n}\n\nconst Collapsible = React.forwardRef<CollapsibleElement, CollapsibleProps>(\n (props: ScopedProps<CollapsibleProps>, forwardedRef) => {\n const {\n __scopeCollapsible,\n open: openProp,\n defaultOpen,\n disabled,\n onOpenChange,\n ...collapsibleProps\n } = props;\n\n const [open = false, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen,\n onChange: onOpenChange,\n });\n\n return (\n <CollapsibleProvider\n scope={__scopeCollapsible}\n disabled={disabled}\n contentId={useId()}\n open={open}\n onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}\n >\n <Primitive.div\n data-state={getState(open)}\n data-disabled={disabled ? '' : undefined}\n {...collapsibleProps}\n ref={forwardedRef}\n />\n </CollapsibleProvider>\n );\n }\n);\n\nCollapsible.displayName = COLLAPSIBLE_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * CollapsibleTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'CollapsibleTrigger';\n\ntype CollapsibleTriggerElement = React.ElementRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = Radix.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface CollapsibleTriggerProps extends PrimitiveButtonProps {}\n\nconst CollapsibleTrigger = React.forwardRef<CollapsibleTriggerElement, CollapsibleTriggerProps>(\n (props: ScopedProps<CollapsibleTriggerProps>, forwardedRef) => {\n const { __scopeCollapsible, ...triggerProps } = props;\n const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible);\n return (\n <Primitive.button\n type=\"button\"\n aria-controls={context.contentId}\n aria-expanded={context.open || false}\n data-state={getState(context.open)}\n data-disabled={context.disabled ? '' : undefined}\n disabled={context.disabled}\n {...triggerProps}\n ref={forwardedRef}\n onClick={composeEventHandlers(props.onClick, context.onOpenToggle)}\n />\n );\n }\n);\n\nCollapsibleTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * CollapsibleContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'CollapsibleContent';\n\ntype CollapsibleContentElement = CollapsibleContentImplElement;\ninterface CollapsibleContentProps extends Omit<CollapsibleContentImplProps, 'present'> {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst CollapsibleContent = React.forwardRef<CollapsibleContentElement, CollapsibleContentProps>(\n (props: ScopedProps<CollapsibleContentProps>, forwardedRef) => {\n const { forceMount, ...contentProps } = props;\n const context = useCollapsibleContext(CONTENT_NAME, props.__scopeCollapsible);\n return (\n <Presence present={forceMount || context.open}>\n {({ present }) => (\n <CollapsibleContentImpl {...contentProps} ref={forwardedRef} present={present} />\n )}\n </Presence>\n );\n }\n);\n\nCollapsibleContent.displayName = CONTENT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype CollapsibleContentImplElement = React.ElementRef<typeof Primitive.div>;\ninterface CollapsibleContentImplProps extends PrimitiveDivProps {\n present: boolean;\n}\n\nconst CollapsibleContentImpl = React.forwardRef<\n CollapsibleContentImplElement,\n CollapsibleContentImplProps\n>((props: ScopedProps<CollapsibleContentImplProps>, forwardedRef) => {\n const { __scopeCollapsible, present, children, ...contentProps } = props;\n const context = useCollapsibleContext(CONTENT_NAME, __scopeCollapsible);\n const [isPresent, setIsPresent] = React.useState(present);\n const ref = React.useRef<CollapsibleContentImplElement>(null);\n const composedRefs = useComposedRefs(forwardedRef, ref);\n const heightRef = React.useRef<number | undefined>(0);\n const height = heightRef.current;\n const widthRef = React.useRef<number | undefined>(0);\n const width = widthRef.current;\n // when opening we want it to immediately open to retrieve dimensions\n // when closing we delay `present` to retrieve dimensions before closing\n const isOpen = context.open || isPresent;\n const isMountAnimationPreventedRef = React.useRef(isOpen);\n const originalStylesRef = React.useRef<Record<string, string>>();\n\n React.useEffect(() => {\n const rAF = requestAnimationFrame(() => (isMountAnimationPreventedRef.current = false));\n return () => cancelAnimationFrame(rAF);\n }, []);\n\n useLayoutEffect(() => {\n const node = ref.current;\n if (node) {\n originalStylesRef.current = originalStylesRef.current || {\n transitionDuration: node.style.transitionDuration,\n animationDuration: node.style.animationDuration,\n animationFillMode: node.style.animationFillMode,\n };\n // block any animations/transitions so the element renders at its full dimensions\n node.style.transitionDuration = '0s';\n node.style.animationDuration = '0s';\n node.style.animationFillMode = 'none';\n\n // get width and height from full dimensions\n const rect = node.getBoundingClientRect();\n heightRef.current = rect.height;\n widthRef.current = rect.width;\n\n // kick off any animations/transitions that were originally set up if it isn't the initial mount\n if (!isMountAnimationPreventedRef.current) {\n node.style.transitionDuration = originalStylesRef.current.transitionDuration;\n node.style.animationDuration = originalStylesRef.current.animationDuration;\n node.style.animationFillMode = originalStylesRef.current.animationFillMode;\n }\n\n setIsPresent(present);\n }\n /**\n * depends on `context.open` because it will change to `false`\n * when a close is triggered but `present` will be `false` on\n * animation end (so when close finishes). This allows us to\n * retrieve the dimensions *before* closing.\n */\n }, [context.open, present]);\n\n return (\n <Primitive.div\n data-state={getState(context.open)}\n data-disabled={context.disabled ? '' : undefined}\n id={context.contentId}\n hidden={!isOpen}\n {...contentProps}\n ref={composedRefs}\n style={{\n [`--radix-collapsible-content-height` as any]: height ? `${height}px` : undefined,\n [`--radix-collapsible-content-width` as any]: width ? `${width}px` : undefined,\n ...props.style,\n }}\n >\n {isOpen && children}\n </Primitive.div>\n );\n});\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open?: boolean) {\n return open ? 'open' : 'closed';\n}\n\nconst Root = Collapsible;\nconst Trigger = CollapsibleTrigger;\nconst Content = CollapsibleContent;\n\nexport {\n createCollapsibleScope,\n //\n Collapsible,\n CollapsibleTrigger,\n CollapsibleContent,\n //\n Root,\n Trigger,\n Content,\n};\nexport type { CollapsibleProps, CollapsibleTriggerProps, CollapsibleContentProps };\n"],"names":["React","composeEventHandlers","createContextScope","useControllableState","useLayoutEffect","useComposedRefs","Primitive","Presence","useId","COLLAPSIBLE_NAME","createCollapsibleContext","createCollapsibleScope","CollapsibleProvider","useCollapsibleContext","Collapsible","forwardRef","props","forwardedRef","__scopeCollapsible","open","openProp","defaultOpen","disabled","onOpenChange","collapsibleProps","setOpen","prop","defaultProp","onChange","useCallback","prevOpen","getState","undefined","TRIGGER_NAME","CollapsibleTrigger","triggerProps","context","contentId","onClick","onOpenToggle","CONTENT_NAME","CollapsibleContent","forceMount","contentProps","present","CollapsibleContentImpl","children","isPresent","setIsPresent","useState","ref","useRef","composedRefs","heightRef","height","current","widthRef","width","isOpen","isMountAnimationPreventedRef","originalStylesRef","useEffect","rAF","requestAnimationFrame","cancelAnimationFrame","node","transitionDuration","style","animationDuration","animationFillMode","rect","getBoundingClientRect","Root","Trigger","Content"],"version":3,"file":"index.module.js.map"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@radix-ui/react-collapsible",
3
- "version": "0.1.6",
3
+ "version": "0.1.7-rc.3",
4
4
  "license": "MIT",
5
5
  "source": "src/index.ts",
6
6
  "main": "dist/index.js",
@@ -18,16 +18,16 @@
18
18
  "dependencies": {
19
19
  "@babel/runtime": "^7.13.10",
20
20
  "@radix-ui/primitive": "0.1.0",
21
- "@radix-ui/react-compose-refs": "0.1.0",
22
- "@radix-ui/react-context": "0.1.1",
23
- "@radix-ui/react-id": "0.1.5",
24
- "@radix-ui/react-presence": "0.1.2",
25
- "@radix-ui/react-primitive": "0.1.4",
26
- "@radix-ui/react-use-controllable-state": "0.1.0",
27
- "@radix-ui/react-use-layout-effect": "0.1.0"
21
+ "@radix-ui/react-compose-refs": "0.1.1-rc.3",
22
+ "@radix-ui/react-context": "0.1.2-rc.3",
23
+ "@radix-ui/react-id": "0.1.6-rc.3",
24
+ "@radix-ui/react-presence": "0.1.3-rc.3",
25
+ "@radix-ui/react-primitive": "0.1.5-rc.3",
26
+ "@radix-ui/react-use-controllable-state": "0.1.1-rc.3",
27
+ "@radix-ui/react-use-layout-effect": "0.1.1-rc.3"
28
28
  },
29
29
  "peerDependencies": {
30
- "react": "^16.8 || ^17.0"
30
+ "react": "^16.8 || ^17.0 || ^18.0"
31
31
  },
32
32
  "homepage": "https://radix-ui.com/primitives",
33
33
  "repository": {
@@ -36,5 +36,6 @@
36
36
  },
37
37
  "bugs": {
38
38
  "url": "https://github.com/radix-ui/primitives/issues"
39
- }
39
+ },
40
+ "stableVersion": "0.1.6"
40
41
  }