@huin-core/react-collapsible 1.0.4 → 1.0.6
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/index.js +19 -22
- package/dist/index.js.map +2 -2
- package/dist/index.mjs +19 -22
- package/dist/index.mjs.map +2 -2
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -45,7 +45,6 @@ var import_react_context = require("@huin-core/react-context");
|
|
|
45
45
|
var import_react_primitive = require("@huin-core/react-primitive");
|
|
46
46
|
var import_react_use_controllable_state = require("@huin-core/react-use-controllable-state");
|
|
47
47
|
var import_react_id = require("@huin-core/react-id");
|
|
48
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
49
48
|
var COLLAPSIBLE_NAME = "Collapsible";
|
|
50
49
|
var [createCollapsibleContext, createCollapsibleScope] = (0, import_react_context.createContextScope)(COLLAPSIBLE_NAME);
|
|
51
50
|
var [CollapsibleProvider, useCollapsibleContext] = createCollapsibleContext(COLLAPSIBLE_NAME);
|
|
@@ -64,24 +63,24 @@ var Collapsible = React.forwardRef(
|
|
|
64
63
|
defaultProp: defaultOpen,
|
|
65
64
|
onChange: onOpenChange
|
|
66
65
|
});
|
|
67
|
-
return /* @__PURE__ */
|
|
66
|
+
return /* @__PURE__ */ React.createElement(
|
|
68
67
|
CollapsibleProvider,
|
|
69
68
|
{
|
|
70
69
|
scope: __scopeCollapsible,
|
|
71
70
|
disabled,
|
|
72
71
|
contentId: (0, import_react_id.useId)(),
|
|
73
72
|
open,
|
|
74
|
-
onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
73
|
+
onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])
|
|
74
|
+
},
|
|
75
|
+
/* @__PURE__ */ React.createElement(
|
|
76
|
+
import_react_primitive.Primitive.div,
|
|
77
|
+
{
|
|
78
|
+
"data-state": getState(open),
|
|
79
|
+
"data-disabled": disabled ? "" : void 0,
|
|
80
|
+
...collapsibleProps,
|
|
81
|
+
ref: forwardedRef
|
|
82
|
+
}
|
|
83
|
+
)
|
|
85
84
|
);
|
|
86
85
|
}
|
|
87
86
|
);
|
|
@@ -95,12 +94,11 @@ var Root = Collapsible;
|
|
|
95
94
|
var import_react = __toESM(require("react"));
|
|
96
95
|
var import_react_primitive2 = require("@huin-core/react-primitive");
|
|
97
96
|
var import_primitive = require("@huin-core/primitive");
|
|
98
|
-
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
99
97
|
var TRIGGER_NAME = "CollapsibleTrigger";
|
|
100
98
|
var CollapsibleTrigger = import_react.default.forwardRef((props, forwardedRef) => {
|
|
101
99
|
const { __scopeCollapsible, ...triggerProps } = props;
|
|
102
100
|
const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible);
|
|
103
|
-
return /* @__PURE__ */
|
|
101
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
104
102
|
import_react_primitive2.Primitive.button,
|
|
105
103
|
{
|
|
106
104
|
type: "button",
|
|
@@ -123,19 +121,18 @@ var import_react_presence = require("@huin-core/react-presence");
|
|
|
123
121
|
var import_react_primitive3 = require("@huin-core/react-primitive");
|
|
124
122
|
var import_react_compose_refs = require("@huin-core/react-compose-refs");
|
|
125
123
|
var import_react_use_layout_effect = require("@huin-core/react-use-layout-effect");
|
|
126
|
-
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
127
124
|
var CONTENT_NAME = "CollapsibleContent";
|
|
128
125
|
var CollapsibleContent = import_react2.default.forwardRef((props, forwardedRef) => {
|
|
129
126
|
const { forceMount, ...contentProps } = props;
|
|
130
127
|
const context = useCollapsibleContext(CONTENT_NAME, props.__scopeCollapsible);
|
|
131
|
-
return /* @__PURE__ */
|
|
128
|
+
return /* @__PURE__ */ import_react2.default.createElement(import_react_presence.Presence, { present: forceMount || context.open }, ({ present }) => /* @__PURE__ */ import_react2.default.createElement(
|
|
132
129
|
CollapsibleContentImpl,
|
|
133
130
|
{
|
|
134
131
|
...contentProps,
|
|
135
132
|
ref: forwardedRef,
|
|
136
133
|
present
|
|
137
134
|
}
|
|
138
|
-
)
|
|
135
|
+
));
|
|
139
136
|
});
|
|
140
137
|
CollapsibleContent.displayName = CONTENT_NAME;
|
|
141
138
|
var CollapsibleContentImpl = import_react2.default.forwardRef((props, forwardedRef) => {
|
|
@@ -176,7 +173,7 @@ var CollapsibleContentImpl = import_react2.default.forwardRef((props, forwardedR
|
|
|
176
173
|
setIsPresent(present);
|
|
177
174
|
}
|
|
178
175
|
}, [context.open, present]);
|
|
179
|
-
return /* @__PURE__ */
|
|
176
|
+
return /* @__PURE__ */ import_react2.default.createElement(
|
|
180
177
|
import_react_primitive3.Primitive.div,
|
|
181
178
|
{
|
|
182
179
|
"data-state": getState(context.open),
|
|
@@ -189,9 +186,9 @@ var CollapsibleContentImpl = import_react2.default.forwardRef((props, forwardedR
|
|
|
189
186
|
[`--huin-core-collapsible-content-height`]: height ? `${height}px` : void 0,
|
|
190
187
|
[`--huin-core-collapsible-content-width`]: width ? `${width}px` : void 0,
|
|
191
188
|
...props.style
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
|
|
189
|
+
}
|
|
190
|
+
},
|
|
191
|
+
isOpen && children
|
|
195
192
|
);
|
|
196
193
|
});
|
|
197
194
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/index.ts", "../src/Collapsible.tsx", "../src/CollapsibleTrigger.tsx", "../src/CollapsibleContent.tsx"],
|
|
4
4
|
"sourcesContent": ["\"use client\";\nexport { createCollapsibleScope, Collapsible, Root } from \"./Collapsible\";\nexport { CollapsibleTrigger } from \"./CollapsibleTrigger\";\nexport { CollapsibleContent } from \"./CollapsibleContent\";\nexport type { CollapsibleTriggerProps } from \"./CollapsibleTrigger\";\nexport type { CollapsibleContentProps } from \"./CollapsibleContent\";\nexport type { CollapsibleProps } from \"./Collapsible\";\n", "import * as React from 'react';\nimport { createContextScope, Scope } from '@huin-core/react-context';\nimport { Primitive } from '@huin-core/react-primitive';\nimport { useControllableState } from '@huin-core/react-use-controllable-state';\nimport { useId } from '@huin-core/react-id';\n\n\n\n/* -------------------------------------------------------------------------------------------------\n * Collapsible\n * -----------------------------------------------------------------------------------------------*/\n\nconst COLLAPSIBLE_NAME = 'Collapsible';\n\nexport type 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\nexport const [CollapsibleProvider, useCollapsibleContext] =\n createCollapsibleContext<CollapsibleContextValue>(COLLAPSIBLE_NAME);\n\ntype CollapsibleElement = React.ElementRef<typeof Primitive.div>;\nexport type PrimitiveDivProps = React.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/* -----------------------------------------------------------------------------------------------*/\n\n\nexport function getState(open?: boolean) {\n return open ? 'open' : 'closed';\n}\n\nconst Root = Collapsible;\n\nexport {\n createCollapsibleScope,\n //\n Collapsible,\n //\n Root,\n \n};\nexport type { CollapsibleProps };\n", "import React from \"react\";\nimport { Primitive } from \"@huin-core/react-primitive\";\nimport { getState, ScopedProps, useCollapsibleContext } from \"./Collapsible\";\nimport { composeEventHandlers } from \"@huin-core/primitive\";\n\nconst TRIGGER_NAME = \"CollapsibleTrigger\";\n\ntype CollapsibleTriggerElement = React.ElementRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<\n typeof Primitive.button\n>;\ninterface CollapsibleTriggerProps extends PrimitiveButtonProps {}\n\nconst CollapsibleTrigger = React.forwardRef<\n CollapsibleTriggerElement,\n 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\nCollapsibleTrigger.displayName = TRIGGER_NAME;\n\nexport { CollapsibleTrigger };\nexport type { CollapsibleTriggerProps }\n", "import React from \"react\";\nimport { Presence } from \"@huin-core/react-presence\";\nimport {\n getState,\n PrimitiveDivProps,\n ScopedProps,\n useCollapsibleContext,\n} from \"./Collapsible\";\nimport { Primitive } from \"@huin-core/react-primitive\";\nimport { useComposedRefs } from \"@huin-core/react-compose-refs\";\nimport { useLayoutEffect } from \"@huin-core/react-use-layout-effect\";\n\nconst CONTENT_NAME = \"CollapsibleContent\";\n\ntype CollapsibleContentElement = CollapsibleContentImplElement;\ninterface CollapsibleContentProps\n 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<\n CollapsibleContentElement,\n 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\n {...contentProps}\n ref={forwardedRef}\n present={present}\n />\n )}\n </Presence>\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(\n () => (isMountAnimationPreventedRef.current = false)\n );\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 animationName: node.style.animationName,\n };\n // block any animations/transitions so the element renders at its full dimensions\n node.style.transitionDuration = \"0s\";\n node.style.animationName = \"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 =\n originalStylesRef.current.transitionDuration;\n node.style.animationName = originalStylesRef.current.animationName;\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 [`--huin-core-collapsible-content-height` as any]: height\n ? `${height}px`\n : undefined,\n [`--huin-core-collapsible-content-width` as any]: width\n ? `${width}px`\n : undefined,\n ...props.style,\n }}\n >\n {isOpen && children}\n </Primitive.div>\n );\n});\n\nexport { CollapsibleContent };\nexport type { CollapsibleContentProps };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,2BAA0C;AAC1C,6BAA0B;AAC1B,0CAAqC;AACrC,sBAAsB;
|
|
6
|
-
"names": ["import_react_primitive", "
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["import_react_primitive", "React", "import_react", "import_react_primitive", "React"]
|
|
7
7
|
}
|
package/dist/index.mjs
CHANGED
|
@@ -6,7 +6,6 @@ import { createContextScope } from "@huin-core/react-context";
|
|
|
6
6
|
import { Primitive } from "@huin-core/react-primitive";
|
|
7
7
|
import { useControllableState } from "@huin-core/react-use-controllable-state";
|
|
8
8
|
import { useId } from "@huin-core/react-id";
|
|
9
|
-
import { jsx } from "react/jsx-runtime";
|
|
10
9
|
var COLLAPSIBLE_NAME = "Collapsible";
|
|
11
10
|
var [createCollapsibleContext, createCollapsibleScope] = createContextScope(COLLAPSIBLE_NAME);
|
|
12
11
|
var [CollapsibleProvider, useCollapsibleContext] = createCollapsibleContext(COLLAPSIBLE_NAME);
|
|
@@ -25,24 +24,24 @@ var Collapsible = React.forwardRef(
|
|
|
25
24
|
defaultProp: defaultOpen,
|
|
26
25
|
onChange: onOpenChange
|
|
27
26
|
});
|
|
28
|
-
return /* @__PURE__ */
|
|
27
|
+
return /* @__PURE__ */ React.createElement(
|
|
29
28
|
CollapsibleProvider,
|
|
30
29
|
{
|
|
31
30
|
scope: __scopeCollapsible,
|
|
32
31
|
disabled,
|
|
33
32
|
contentId: useId(),
|
|
34
33
|
open,
|
|
35
|
-
onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
34
|
+
onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])
|
|
35
|
+
},
|
|
36
|
+
/* @__PURE__ */ React.createElement(
|
|
37
|
+
Primitive.div,
|
|
38
|
+
{
|
|
39
|
+
"data-state": getState(open),
|
|
40
|
+
"data-disabled": disabled ? "" : void 0,
|
|
41
|
+
...collapsibleProps,
|
|
42
|
+
ref: forwardedRef
|
|
43
|
+
}
|
|
44
|
+
)
|
|
46
45
|
);
|
|
47
46
|
}
|
|
48
47
|
);
|
|
@@ -56,12 +55,11 @@ var Root = Collapsible;
|
|
|
56
55
|
import React2 from "react";
|
|
57
56
|
import { Primitive as Primitive2 } from "@huin-core/react-primitive";
|
|
58
57
|
import { composeEventHandlers } from "@huin-core/primitive";
|
|
59
|
-
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
60
58
|
var TRIGGER_NAME = "CollapsibleTrigger";
|
|
61
59
|
var CollapsibleTrigger = React2.forwardRef((props, forwardedRef) => {
|
|
62
60
|
const { __scopeCollapsible, ...triggerProps } = props;
|
|
63
61
|
const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible);
|
|
64
|
-
return /* @__PURE__ */
|
|
62
|
+
return /* @__PURE__ */ React2.createElement(
|
|
65
63
|
Primitive2.button,
|
|
66
64
|
{
|
|
67
65
|
type: "button",
|
|
@@ -84,19 +82,18 @@ import { Presence } from "@huin-core/react-presence";
|
|
|
84
82
|
import { Primitive as Primitive3 } from "@huin-core/react-primitive";
|
|
85
83
|
import { useComposedRefs } from "@huin-core/react-compose-refs";
|
|
86
84
|
import { useLayoutEffect } from "@huin-core/react-use-layout-effect";
|
|
87
|
-
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
88
85
|
var CONTENT_NAME = "CollapsibleContent";
|
|
89
86
|
var CollapsibleContent = React3.forwardRef((props, forwardedRef) => {
|
|
90
87
|
const { forceMount, ...contentProps } = props;
|
|
91
88
|
const context = useCollapsibleContext(CONTENT_NAME, props.__scopeCollapsible);
|
|
92
|
-
return /* @__PURE__ */
|
|
89
|
+
return /* @__PURE__ */ React3.createElement(Presence, { present: forceMount || context.open }, ({ present }) => /* @__PURE__ */ React3.createElement(
|
|
93
90
|
CollapsibleContentImpl,
|
|
94
91
|
{
|
|
95
92
|
...contentProps,
|
|
96
93
|
ref: forwardedRef,
|
|
97
94
|
present
|
|
98
95
|
}
|
|
99
|
-
)
|
|
96
|
+
));
|
|
100
97
|
});
|
|
101
98
|
CollapsibleContent.displayName = CONTENT_NAME;
|
|
102
99
|
var CollapsibleContentImpl = React3.forwardRef((props, forwardedRef) => {
|
|
@@ -137,7 +134,7 @@ var CollapsibleContentImpl = React3.forwardRef((props, forwardedRef) => {
|
|
|
137
134
|
setIsPresent(present);
|
|
138
135
|
}
|
|
139
136
|
}, [context.open, present]);
|
|
140
|
-
return /* @__PURE__ */
|
|
137
|
+
return /* @__PURE__ */ React3.createElement(
|
|
141
138
|
Primitive3.div,
|
|
142
139
|
{
|
|
143
140
|
"data-state": getState(context.open),
|
|
@@ -150,9 +147,9 @@ var CollapsibleContentImpl = React3.forwardRef((props, forwardedRef) => {
|
|
|
150
147
|
[`--huin-core-collapsible-content-height`]: height ? `${height}px` : void 0,
|
|
151
148
|
[`--huin-core-collapsible-content-width`]: width ? `${width}px` : void 0,
|
|
152
149
|
...props.style
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
|
|
150
|
+
}
|
|
151
|
+
},
|
|
152
|
+
isOpen && children
|
|
156
153
|
);
|
|
157
154
|
});
|
|
158
155
|
export {
|
package/dist/index.mjs.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/Collapsible.tsx", "../src/CollapsibleTrigger.tsx", "../src/CollapsibleContent.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nimport { createContextScope, Scope } from '@huin-core/react-context';\nimport { Primitive } from '@huin-core/react-primitive';\nimport { useControllableState } from '@huin-core/react-use-controllable-state';\nimport { useId } from '@huin-core/react-id';\n\n\n\n/* -------------------------------------------------------------------------------------------------\n * Collapsible\n * -----------------------------------------------------------------------------------------------*/\n\nconst COLLAPSIBLE_NAME = 'Collapsible';\n\nexport type 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\nexport const [CollapsibleProvider, useCollapsibleContext] =\n createCollapsibleContext<CollapsibleContextValue>(COLLAPSIBLE_NAME);\n\ntype CollapsibleElement = React.ElementRef<typeof Primitive.div>;\nexport type PrimitiveDivProps = React.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/* -----------------------------------------------------------------------------------------------*/\n\n\nexport function getState(open?: boolean) {\n return open ? 'open' : 'closed';\n}\n\nconst Root = Collapsible;\n\nexport {\n createCollapsibleScope,\n //\n Collapsible,\n //\n Root,\n \n};\nexport type { CollapsibleProps };\n", "import React from \"react\";\nimport { Primitive } from \"@huin-core/react-primitive\";\nimport { getState, ScopedProps, useCollapsibleContext } from \"./Collapsible\";\nimport { composeEventHandlers } from \"@huin-core/primitive\";\n\nconst TRIGGER_NAME = \"CollapsibleTrigger\";\n\ntype CollapsibleTriggerElement = React.ElementRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<\n typeof Primitive.button\n>;\ninterface CollapsibleTriggerProps extends PrimitiveButtonProps {}\n\nconst CollapsibleTrigger = React.forwardRef<\n CollapsibleTriggerElement,\n 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\nCollapsibleTrigger.displayName = TRIGGER_NAME;\n\nexport { CollapsibleTrigger };\nexport type { CollapsibleTriggerProps }\n", "import React from \"react\";\nimport { Presence } from \"@huin-core/react-presence\";\nimport {\n getState,\n PrimitiveDivProps,\n ScopedProps,\n useCollapsibleContext,\n} from \"./Collapsible\";\nimport { Primitive } from \"@huin-core/react-primitive\";\nimport { useComposedRefs } from \"@huin-core/react-compose-refs\";\nimport { useLayoutEffect } from \"@huin-core/react-use-layout-effect\";\n\nconst CONTENT_NAME = \"CollapsibleContent\";\n\ntype CollapsibleContentElement = CollapsibleContentImplElement;\ninterface CollapsibleContentProps\n 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<\n CollapsibleContentElement,\n 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\n {...contentProps}\n ref={forwardedRef}\n present={present}\n />\n )}\n </Presence>\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(\n () => (isMountAnimationPreventedRef.current = false)\n );\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 animationName: node.style.animationName,\n };\n // block any animations/transitions so the element renders at its full dimensions\n node.style.transitionDuration = \"0s\";\n node.style.animationName = \"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 =\n originalStylesRef.current.transitionDuration;\n node.style.animationName = originalStylesRef.current.animationName;\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 [`--huin-core-collapsible-content-height` as any]: height\n ? `${height}px`\n : undefined,\n [`--huin-core-collapsible-content-width` as any]: width\n ? `${width}px`\n : undefined,\n ...props.style,\n }}\n >\n {isOpen && children}\n </Primitive.div>\n );\n});\n\nexport { CollapsibleContent };\nexport type { CollapsibleContentProps };\n"],
|
|
5
|
-
"mappings": ";;;AAAA,YAAY,WAAW;AACvB,SAAS,0BAAiC;AAC1C,SAAS,iBAAiB;AAC1B,SAAS,4BAA4B;AACrC,SAAS,aAAa;
|
|
6
|
-
"names": ["React", "Primitive", "
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["React", "Primitive", "React", "Primitive", "React", "Primitive", "React"]
|
|
7
7
|
}
|