@tamagui/collapsible 1.0.1-beta.107 → 1.0.1-beta.110
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.
- package/dist/cjs/Collapsible.js +23 -55
- package/dist/cjs/Collapsible.js.map +1 -1
- package/dist/cjs/index.js +1 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/Collapsible.js +22 -57
- package/dist/esm/Collapsible.js.map +1 -1
- package/package.json +8 -8
package/dist/cjs/Collapsible.js
CHANGED
|
@@ -1,38 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
var __create = Object.create;
|
|
2
3
|
var __defProp = Object.defineProperty;
|
|
3
|
-
var __defProps = Object.defineProperties;
|
|
4
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
6
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
8
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
9
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
11
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
12
|
-
var __spreadValues = (a, b) => {
|
|
13
|
-
for (var prop in b || (b = {}))
|
|
14
|
-
if (__hasOwnProp.call(b, prop))
|
|
15
|
-
__defNormalProp(a, prop, b[prop]);
|
|
16
|
-
if (__getOwnPropSymbols)
|
|
17
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
18
|
-
if (__propIsEnum.call(b, prop))
|
|
19
|
-
__defNormalProp(a, prop, b[prop]);
|
|
20
|
-
}
|
|
21
|
-
return a;
|
|
22
|
-
};
|
|
23
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
24
|
-
var __objRest = (source, exclude) => {
|
|
25
|
-
var target = {};
|
|
26
|
-
for (var prop in source)
|
|
27
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
28
|
-
target[prop] = source[prop];
|
|
29
|
-
if (source != null && __getOwnPropSymbols)
|
|
30
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
31
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
32
|
-
target[prop] = source[prop];
|
|
33
|
-
}
|
|
34
|
-
return target;
|
|
35
|
-
};
|
|
36
8
|
var __export = (target, all) => {
|
|
37
9
|
for (var name in all)
|
|
38
10
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -68,19 +40,14 @@ const COLLAPSIBLE_NAME = "Collapsible";
|
|
|
68
40
|
const [createCollapsibleContext, createCollapsibleScope] = (0, import_create_context.createContextScope)(COLLAPSIBLE_NAME);
|
|
69
41
|
const [CollapsibleProvider, useCollapsibleContext] = createCollapsibleContext(COLLAPSIBLE_NAME);
|
|
70
42
|
const Collapsible = React.forwardRef((props, forwardedRef) => {
|
|
71
|
-
const
|
|
43
|
+
const {
|
|
72
44
|
__scopeCollapsible,
|
|
73
45
|
open: openProp,
|
|
74
46
|
defaultOpen,
|
|
75
47
|
disabled,
|
|
76
|
-
onOpenChange
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
"open",
|
|
80
|
-
"defaultOpen",
|
|
81
|
-
"disabled",
|
|
82
|
-
"onOpenChange"
|
|
83
|
-
]);
|
|
48
|
+
onOpenChange,
|
|
49
|
+
...collapsibleProps
|
|
50
|
+
} = props;
|
|
84
51
|
const [open, setOpen] = (0, import_use_controllable_state.useControllableState)({
|
|
85
52
|
prop: openProp,
|
|
86
53
|
defaultProp: defaultOpen || false,
|
|
@@ -92,43 +59,44 @@ const Collapsible = React.forwardRef((props, forwardedRef) => {
|
|
|
92
59
|
contentId: (0, import_core2.useId)() || "",
|
|
93
60
|
open,
|
|
94
61
|
onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])
|
|
95
|
-
}, /* @__PURE__ */ React.createElement(import_core.Stack,
|
|
62
|
+
}, /* @__PURE__ */ React.createElement(import_core.Stack, {
|
|
96
63
|
"data-state": getState(open),
|
|
97
|
-
"data-disabled": disabled ? "" : void 0
|
|
98
|
-
|
|
64
|
+
"data-disabled": disabled ? "" : void 0,
|
|
65
|
+
...collapsibleProps,
|
|
99
66
|
ref: forwardedRef
|
|
100
|
-
}))
|
|
67
|
+
}));
|
|
101
68
|
});
|
|
102
69
|
Collapsible.displayName = COLLAPSIBLE_NAME;
|
|
103
70
|
const TRIGGER_NAME = "CollapsibleTrigger";
|
|
104
71
|
const CollapsibleTrigger = React.forwardRef((props, forwardedRef) => {
|
|
105
|
-
const
|
|
72
|
+
const { __scopeCollapsible, ...triggerProps } = props;
|
|
106
73
|
const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible);
|
|
107
|
-
return /* @__PURE__ */ React.createElement(import_core.Stack,
|
|
74
|
+
return /* @__PURE__ */ React.createElement(import_core.Stack, {
|
|
108
75
|
type: "button",
|
|
109
76
|
"aria-controls": context.contentId,
|
|
110
77
|
"aria-expanded": context.open || false,
|
|
111
78
|
"data-state": getState(context.open),
|
|
112
79
|
"data-disabled": context.disabled ? "" : void 0,
|
|
113
|
-
disabled: context.disabled
|
|
114
|
-
|
|
80
|
+
disabled: context.disabled,
|
|
81
|
+
...triggerProps,
|
|
115
82
|
ref: forwardedRef,
|
|
116
83
|
onPress: (0, import_core.composeEventHandlers)(props.onPress, context.onOpenToggle)
|
|
117
|
-
})
|
|
84
|
+
});
|
|
118
85
|
});
|
|
119
86
|
CollapsibleTrigger.displayName = TRIGGER_NAME;
|
|
120
87
|
const CONTENT_NAME = "CollapsibleContent";
|
|
121
88
|
const CollapsibleContent = React.forwardRef((props, forwardedRef) => {
|
|
122
|
-
const
|
|
89
|
+
const { forceMount, ...contentProps } = props;
|
|
123
90
|
const context = useCollapsibleContext(CONTENT_NAME, props.__scopeCollapsible);
|
|
124
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null, ({ present }) => /* @__PURE__ */ React.createElement(CollapsibleContentImpl,
|
|
91
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, ({ present }) => /* @__PURE__ */ React.createElement(CollapsibleContentImpl, {
|
|
92
|
+
...contentProps,
|
|
125
93
|
ref: forwardedRef,
|
|
126
94
|
present
|
|
127
|
-
}))
|
|
95
|
+
}));
|
|
128
96
|
});
|
|
129
97
|
CollapsibleContent.displayName = CONTENT_NAME;
|
|
130
98
|
const CollapsibleContentImpl = React.forwardRef((props, forwardedRef) => {
|
|
131
|
-
const
|
|
99
|
+
const { __scopeCollapsible, present, children, ...contentProps } = props;
|
|
132
100
|
const context = useCollapsibleContext(CONTENT_NAME, __scopeCollapsible);
|
|
133
101
|
const [isPresent, setIsPresent] = React.useState(present);
|
|
134
102
|
const ref = React.useRef(null);
|
|
@@ -144,14 +112,14 @@ const CollapsibleContentImpl = React.forwardRef((props, forwardedRef) => {
|
|
|
144
112
|
const rAF = requestAnimationFrame(() => isMountAnimationPreventedRef.current = false);
|
|
145
113
|
return () => cancelAnimationFrame(rAF);
|
|
146
114
|
}, []);
|
|
147
|
-
return /* @__PURE__ */ React.createElement(import_core.Stack,
|
|
115
|
+
return /* @__PURE__ */ React.createElement(import_core.Stack, {
|
|
148
116
|
"data-state": getState(context.open),
|
|
149
117
|
"data-disabled": context.disabled ? "" : void 0,
|
|
150
118
|
id: context.contentId,
|
|
151
|
-
hidden: !isOpen
|
|
152
|
-
|
|
119
|
+
hidden: !isOpen,
|
|
120
|
+
...contentProps,
|
|
153
121
|
ref: composedRefs
|
|
154
|
-
}
|
|
122
|
+
}, isOpen && children);
|
|
155
123
|
});
|
|
156
124
|
function getState(open) {
|
|
157
125
|
return open ? "open" : "closed";
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Collapsible.tsx"],
|
|
4
4
|
"sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n Stack,\n StackProps,\n TamaguiElement,\n composeEventHandlers,\n useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { useId } from '@tamagui/core'\nimport { createContextScope } from '@tamagui/create-context'\nimport type { Scope } from '@tamagui/create-context'\n// import { Presence } from '@tamagui/react-presence'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\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 = TamaguiElement\ninterface CollapsibleProps extends StackProps {\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, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen || false,\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 <Stack\n data-state={getState(open)}\n data-disabled={disabled ? '' : undefined}\n {...collapsibleProps}\n // @ts-expect-error\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 = TamaguiElement\ninterface CollapsibleTriggerProps extends StackProps {}\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 <Stack\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 // @ts-expect-error\n ref={forwardedRef}\n onPress={composeEventHandlers(props.onPress, 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 <>\n {({ present }) => (\n <CollapsibleContentImpl {...contentProps} ref={forwardedRef} present={present} />\n )}\n </>\n // </Presence>\n )\n }\n)\n\nCollapsibleContent.displayName = CONTENT_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype CollapsibleContentImplElement = TamaguiElement\ninterface CollapsibleContentImplProps extends StackProps {\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 // useIsomorphicLayoutEffect(() => {\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 <Stack\n data-state={getState(context.open)}\n data-disabled={context.disabled ? '' : undefined}\n id={context.contentId}\n hidden={!isOpen}\n {...contentProps}\n // @ts-expect-error\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 </Stack>\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"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
package/dist/cjs/index.js.map
CHANGED
package/dist/esm/Collapsible.js
CHANGED
|
@@ -1,34 +1,3 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __defProps = Object.defineProperties;
|
|
3
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
-
var __spreadValues = (a, b) => {
|
|
9
|
-
for (var prop in b || (b = {}))
|
|
10
|
-
if (__hasOwnProp.call(b, prop))
|
|
11
|
-
__defNormalProp(a, prop, b[prop]);
|
|
12
|
-
if (__getOwnPropSymbols)
|
|
13
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
-
if (__propIsEnum.call(b, prop))
|
|
15
|
-
__defNormalProp(a, prop, b[prop]);
|
|
16
|
-
}
|
|
17
|
-
return a;
|
|
18
|
-
};
|
|
19
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
-
var __objRest = (source, exclude) => {
|
|
21
|
-
var target = {};
|
|
22
|
-
for (var prop in source)
|
|
23
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
-
target[prop] = source[prop];
|
|
25
|
-
if (source != null && __getOwnPropSymbols)
|
|
26
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
-
target[prop] = source[prop];
|
|
29
|
-
}
|
|
30
|
-
return target;
|
|
31
|
-
};
|
|
32
1
|
import { useComposedRefs } from "@tamagui/compose-refs";
|
|
33
2
|
import {
|
|
34
3
|
Stack,
|
|
@@ -42,19 +11,14 @@ const COLLAPSIBLE_NAME = "Collapsible";
|
|
|
42
11
|
const [createCollapsibleContext, createCollapsibleScope] = createContextScope(COLLAPSIBLE_NAME);
|
|
43
12
|
const [CollapsibleProvider, useCollapsibleContext] = createCollapsibleContext(COLLAPSIBLE_NAME);
|
|
44
13
|
const Collapsible = React.forwardRef((props, forwardedRef) => {
|
|
45
|
-
const
|
|
14
|
+
const {
|
|
46
15
|
__scopeCollapsible,
|
|
47
16
|
open: openProp,
|
|
48
17
|
defaultOpen,
|
|
49
18
|
disabled,
|
|
50
|
-
onOpenChange
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
"open",
|
|
54
|
-
"defaultOpen",
|
|
55
|
-
"disabled",
|
|
56
|
-
"onOpenChange"
|
|
57
|
-
]);
|
|
19
|
+
onOpenChange,
|
|
20
|
+
...collapsibleProps
|
|
21
|
+
} = props;
|
|
58
22
|
const [open, setOpen] = useControllableState({
|
|
59
23
|
prop: openProp,
|
|
60
24
|
defaultProp: defaultOpen || false,
|
|
@@ -66,43 +30,44 @@ const Collapsible = React.forwardRef((props, forwardedRef) => {
|
|
|
66
30
|
contentId: useId() || "",
|
|
67
31
|
open,
|
|
68
32
|
onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])
|
|
69
|
-
}, /* @__PURE__ */ React.createElement(Stack,
|
|
33
|
+
}, /* @__PURE__ */ React.createElement(Stack, {
|
|
70
34
|
"data-state": getState(open),
|
|
71
|
-
"data-disabled": disabled ? "" : void 0
|
|
72
|
-
|
|
35
|
+
"data-disabled": disabled ? "" : void 0,
|
|
36
|
+
...collapsibleProps,
|
|
73
37
|
ref: forwardedRef
|
|
74
|
-
}))
|
|
38
|
+
}));
|
|
75
39
|
});
|
|
76
40
|
Collapsible.displayName = COLLAPSIBLE_NAME;
|
|
77
41
|
const TRIGGER_NAME = "CollapsibleTrigger";
|
|
78
42
|
const CollapsibleTrigger = React.forwardRef((props, forwardedRef) => {
|
|
79
|
-
const
|
|
43
|
+
const { __scopeCollapsible, ...triggerProps } = props;
|
|
80
44
|
const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible);
|
|
81
|
-
return /* @__PURE__ */ React.createElement(Stack,
|
|
45
|
+
return /* @__PURE__ */ React.createElement(Stack, {
|
|
82
46
|
type: "button",
|
|
83
47
|
"aria-controls": context.contentId,
|
|
84
48
|
"aria-expanded": context.open || false,
|
|
85
49
|
"data-state": getState(context.open),
|
|
86
50
|
"data-disabled": context.disabled ? "" : void 0,
|
|
87
|
-
disabled: context.disabled
|
|
88
|
-
|
|
51
|
+
disabled: context.disabled,
|
|
52
|
+
...triggerProps,
|
|
89
53
|
ref: forwardedRef,
|
|
90
54
|
onPress: composeEventHandlers(props.onPress, context.onOpenToggle)
|
|
91
|
-
})
|
|
55
|
+
});
|
|
92
56
|
});
|
|
93
57
|
CollapsibleTrigger.displayName = TRIGGER_NAME;
|
|
94
58
|
const CONTENT_NAME = "CollapsibleContent";
|
|
95
59
|
const CollapsibleContent = React.forwardRef((props, forwardedRef) => {
|
|
96
|
-
const
|
|
60
|
+
const { forceMount, ...contentProps } = props;
|
|
97
61
|
const context = useCollapsibleContext(CONTENT_NAME, props.__scopeCollapsible);
|
|
98
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null, ({ present }) => /* @__PURE__ */ React.createElement(CollapsibleContentImpl,
|
|
62
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, ({ present }) => /* @__PURE__ */ React.createElement(CollapsibleContentImpl, {
|
|
63
|
+
...contentProps,
|
|
99
64
|
ref: forwardedRef,
|
|
100
65
|
present
|
|
101
|
-
}))
|
|
66
|
+
}));
|
|
102
67
|
});
|
|
103
68
|
CollapsibleContent.displayName = CONTENT_NAME;
|
|
104
69
|
const CollapsibleContentImpl = React.forwardRef((props, forwardedRef) => {
|
|
105
|
-
const
|
|
70
|
+
const { __scopeCollapsible, present, children, ...contentProps } = props;
|
|
106
71
|
const context = useCollapsibleContext(CONTENT_NAME, __scopeCollapsible);
|
|
107
72
|
const [isPresent, setIsPresent] = React.useState(present);
|
|
108
73
|
const ref = React.useRef(null);
|
|
@@ -118,14 +83,14 @@ const CollapsibleContentImpl = React.forwardRef((props, forwardedRef) => {
|
|
|
118
83
|
const rAF = requestAnimationFrame(() => isMountAnimationPreventedRef.current = false);
|
|
119
84
|
return () => cancelAnimationFrame(rAF);
|
|
120
85
|
}, []);
|
|
121
|
-
return /* @__PURE__ */ React.createElement(Stack,
|
|
86
|
+
return /* @__PURE__ */ React.createElement(Stack, {
|
|
122
87
|
"data-state": getState(context.open),
|
|
123
88
|
"data-disabled": context.disabled ? "" : void 0,
|
|
124
89
|
id: context.contentId,
|
|
125
|
-
hidden: !isOpen
|
|
126
|
-
|
|
90
|
+
hidden: !isOpen,
|
|
91
|
+
...contentProps,
|
|
127
92
|
ref: composedRefs
|
|
128
|
-
}
|
|
93
|
+
}, isOpen && children);
|
|
129
94
|
});
|
|
130
95
|
function getState(open) {
|
|
131
96
|
return open ? "open" : "closed";
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Collapsible.tsx"],
|
|
4
4
|
"sourcesContent": ["import { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n Stack,\n StackProps,\n TamaguiElement,\n composeEventHandlers,\n useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { useId } from '@tamagui/core'\nimport { createContextScope } from '@tamagui/create-context'\nimport type { Scope } from '@tamagui/create-context'\n// import { Presence } from '@tamagui/react-presence'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\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 = TamaguiElement\ninterface CollapsibleProps extends StackProps {\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, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen || false,\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 <Stack\n data-state={getState(open)}\n data-disabled={disabled ? '' : undefined}\n {...collapsibleProps}\n // @ts-expect-error\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 = TamaguiElement\ninterface CollapsibleTriggerProps extends StackProps {}\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 <Stack\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 // @ts-expect-error\n ref={forwardedRef}\n onPress={composeEventHandlers(props.onPress, 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 <>\n {({ present }) => (\n <CollapsibleContentImpl {...contentProps} ref={forwardedRef} present={present} />\n )}\n </>\n // </Presence>\n )\n }\n)\n\nCollapsibleContent.displayName = CONTENT_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype CollapsibleContentImplElement = TamaguiElement\ninterface CollapsibleContentImplProps extends StackProps {\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 // useIsomorphicLayoutEffect(() => {\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 <Stack\n data-state={getState(context.open)}\n data-disabled={context.disabled ? '' : undefined}\n id={context.contentId}\n hidden={!isOpen}\n {...contentProps}\n // @ts-expect-error\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 </Stack>\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"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "AAAA;AACA;AAAA;AAAA;AAAA;AAOA;AACA;AAGA;AACA;AAMA,MAAM,mBAAmB;AAGzB,MAAM,CAAC,0BAA0B,0BAA0B,mBAAmB,gBAAgB;AAS9F,MAAM,CAAC,qBAAqB,yBAC1B,yBAAkD,gBAAgB;AAUpE,MAAM,cAAc,MAAM,WACxB,CAAC,OAAsC,iBAAiB;AACtD,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,OACG;AAAA,MACD;AAEJ,QAAM,CAAC,MAAM,WAAW,qBAAqB;AAAA,IAC3C,MAAM;AAAA,IACN,aAAa,eAAe;AAAA,IAC5B,UAAU;AAAA,EACZ,CAAC;AAED,SACE,oCAAC;AAAA,IACC,OAAO;AAAA,IACP;AAAA,IACA,WAAW,MAAM,KAAK;AAAA,IACtB;AAAA,IACA,cAAc,MAAM,YAAY,MAAM,QAAQ,CAAC,aAAa,CAAC,QAAQ,GAAG,CAAC,OAAO,CAAC;AAAA,KAEjF,oCAAC;AAAA,IACC,cAAY,SAAS,IAAI;AAAA,IACzB,iBAAe,WAAW,KAAK;AAAA,IAC9B,GAAG;AAAA,IAEJ,KAAK;AAAA,GACP,CACF;AAEJ,CACF;AAEA,YAAY,cAAc;AAM1B,MAAM,eAAe;AAKrB,MAAM,qBAAqB,MAAM,WAC/B,CAAC,OAA6C,iBAAiB;AAC7D,QAAM,EAAE,uBAAuB,iBAAiB;AAChD,QAAM,UAAU,sBAAsB,cAAc,kBAAkB;AACtE,SACE,oCAAC;AAAA,IACC,MAAK;AAAA,IACL,iBAAe,QAAQ;AAAA,IACvB,iBAAe,QAAQ,QAAQ;AAAA,IAC/B,cAAY,SAAS,QAAQ,IAAI;AAAA,IACjC,iBAAe,QAAQ,WAAW,KAAK;AAAA,IACvC,UAAU,QAAQ;AAAA,IACjB,GAAG;AAAA,IAEJ,KAAK;AAAA,IACL,SAAS,qBAAqB,MAAM,SAAS,QAAQ,YAAY;AAAA,GACnE;AAEJ,CACF;AAEA,mBAAmB,cAAc;AAMjC,MAAM,eAAe;AAWrB,MAAM,qBAAqB,MAAM,WAC/B,CAAC,OAA6C,iBAAiB;AAC7D,QAAM,EAAE,eAAe,iBAAiB;AACxC,QAAM,UAAU,sBAAsB,cAAc,MAAM,kBAAkB;AAC5E,SAEE,0DACG,CAAC,EAAE,cACF,oCAAC;AAAA,IAAwB,GAAG;AAAA,IAAc,KAAK;AAAA,IAAc;AAAA,GAAkB,CAEnF;AAGJ,CACF;AAEA,mBAAmB,cAAc;AASjC,MAAM,yBAAyB,MAAM,WAGnC,CAAC,OAAiD,iBAAiB;AACnE,QAAM,EAAE,oBAAoB,SAAS,aAAa,iBAAiB;AACnE,QAAM,UAAU,sBAAsB,cAAc,kBAAkB;AACtE,QAAM,CAAC,WAAW,gBAAgB,MAAM,SAAS,OAAO;AACxD,QAAM,MAAM,MAAM,OAAsC,IAAI;AAC5D,QAAM,eAAe,gBAAgB,cAAc,GAAG;AACtD,QAAM,YAAY,MAAM,OAA2B,CAAC;AACpD,QAAM,SAAS,UAAU;AACzB,QAAM,WAAW,MAAM,OAA2B,CAAC;AACnD,QAAM,QAAQ,SAAS;AAGvB,QAAM,SAAS,QAAQ,QAAQ;AAC/B,QAAM,+BAA+B,MAAM,OAAO,MAAM;AACxD,QAAM,oBAAoB,MAAM,OAA+B;AAE/D,QAAM,UAAU,MAAM;AACpB,UAAM,MAAM,sBAAsB,MAAO,6BAA6B,UAAU,KAAM;AACtF,WAAO,MAAM,qBAAqB,GAAG;AAAA,EACvC,GAAG,CAAC,CAAC;AAqCL,SACE,oCAAC;AAAA,IACC,cAAY,SAAS,QAAQ,IAAI;AAAA,IACjC,iBAAe,QAAQ,WAAW,KAAK;AAAA,IACvC,IAAI,QAAQ;AAAA,IACZ,QAAQ,CAAC;AAAA,IACR,GAAG;AAAA,IAEJ,KAAK;AAAA,KAOJ,UAAU,QACb;AAEJ,CAAC;AAID,kBAAkB,MAAgB;AAChC,SAAO,OAAO,SAAS;AACzB;AAEA,MAAM,OAAO;AACb,MAAM,UAAU;AAChB,MAAM,UAAU;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/collapsible",
|
|
3
|
-
"version": "1.0.1-beta.
|
|
3
|
+
"version": "1.0.1-beta.110",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"source": "src/index.ts",
|
|
6
6
|
"types": "./types/index.d.ts",
|
|
@@ -17,12 +17,12 @@
|
|
|
17
17
|
"watch": "tamagui-build --watch"
|
|
18
18
|
},
|
|
19
19
|
"dependencies": {
|
|
20
|
-
"@tamagui/compose-refs": "^1.0.1-beta.
|
|
21
|
-
"@tamagui/core": "^1.0.1-beta.
|
|
22
|
-
"@tamagui/create-context": "^1.0.1-beta.
|
|
23
|
-
"@tamagui/polyfill-dev": "^1.0.1-beta.
|
|
24
|
-
"@tamagui/stacks": "^1.0.1-beta.
|
|
25
|
-
"@tamagui/use-controllable-state": "^1.0.1-beta.
|
|
20
|
+
"@tamagui/compose-refs": "^1.0.1-beta.110",
|
|
21
|
+
"@tamagui/core": "^1.0.1-beta.110",
|
|
22
|
+
"@tamagui/create-context": "^1.0.1-beta.110",
|
|
23
|
+
"@tamagui/polyfill-dev": "^1.0.1-beta.110",
|
|
24
|
+
"@tamagui/stacks": "^1.0.1-beta.110",
|
|
25
|
+
"@tamagui/use-controllable-state": "^1.0.1-beta.110",
|
|
26
26
|
"react-native-reanimated": "^2.8.0"
|
|
27
27
|
},
|
|
28
28
|
"peerDependencies": {
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"react-native-gesture-handler": "*"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
34
|
+
"@tamagui/build": "^1.0.1-beta.110",
|
|
35
35
|
"react": "*",
|
|
36
36
|
"react-dom": "*",
|
|
37
37
|
"react-native-gesture-handler": "*"
|