@huin-core/react-collapsible 1.0.1 → 1.0.3
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.d.mts +44 -0
- package/dist/index.d.ts +44 -0
- package/dist/index.js +197 -0
- package/dist/index.js.map +7 -0
- package/dist/index.mjs +165 -0
- package/dist/index.mjs.map +7 -0
- package/package.json +9 -9
package/dist/index.d.mts
ADDED
@@ -0,0 +1,44 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import React__default from 'react';
|
3
|
+
import { Primitive } from '@huin-core/react-primitive';
|
4
|
+
|
5
|
+
type Scope<C = any> = {
|
6
|
+
[scopeName: string]: React.Context<C>[];
|
7
|
+
} | undefined;
|
8
|
+
type ScopeHook = (scope: Scope) => {
|
9
|
+
[__scopeProp: string]: Scope;
|
10
|
+
};
|
11
|
+
interface CreateScope {
|
12
|
+
scopeName: string;
|
13
|
+
(): ScopeHook;
|
14
|
+
}
|
15
|
+
|
16
|
+
declare const createCollapsibleScope: CreateScope;
|
17
|
+
type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;
|
18
|
+
interface CollapsibleProps extends PrimitiveDivProps {
|
19
|
+
defaultOpen?: boolean;
|
20
|
+
open?: boolean;
|
21
|
+
disabled?: boolean;
|
22
|
+
onOpenChange?(open: boolean): void;
|
23
|
+
}
|
24
|
+
declare const Collapsible: React.ForwardRefExoticComponent<CollapsibleProps & React.RefAttributes<HTMLDivElement>>;
|
25
|
+
declare const Root: React.ForwardRefExoticComponent<CollapsibleProps & React.RefAttributes<HTMLDivElement>>;
|
26
|
+
|
27
|
+
type PrimitiveButtonProps = React__default.ComponentPropsWithoutRef<typeof Primitive.button>;
|
28
|
+
interface CollapsibleTriggerProps extends PrimitiveButtonProps {
|
29
|
+
}
|
30
|
+
declare const CollapsibleTrigger: React__default.ForwardRefExoticComponent<CollapsibleTriggerProps & React__default.RefAttributes<HTMLButtonElement>>;
|
31
|
+
|
32
|
+
interface CollapsibleContentProps extends Omit<CollapsibleContentImplProps, "present"> {
|
33
|
+
/**
|
34
|
+
* Used to force mounting when more control is needed. Useful when
|
35
|
+
* controlling animation with React animation libraries.
|
36
|
+
*/
|
37
|
+
forceMount?: true;
|
38
|
+
}
|
39
|
+
declare const CollapsibleContent: React__default.ForwardRefExoticComponent<CollapsibleContentProps & React__default.RefAttributes<HTMLDivElement>>;
|
40
|
+
interface CollapsibleContentImplProps extends PrimitiveDivProps {
|
41
|
+
present: boolean;
|
42
|
+
}
|
43
|
+
|
44
|
+
export { Collapsible, CollapsibleContent, type CollapsibleContentProps, type CollapsibleProps, CollapsibleTrigger, type CollapsibleTriggerProps, Root, createCollapsibleScope };
|
package/dist/index.d.ts
ADDED
@@ -0,0 +1,44 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import React__default from 'react';
|
3
|
+
import { Primitive } from '@huin-core/react-primitive';
|
4
|
+
|
5
|
+
type Scope<C = any> = {
|
6
|
+
[scopeName: string]: React.Context<C>[];
|
7
|
+
} | undefined;
|
8
|
+
type ScopeHook = (scope: Scope) => {
|
9
|
+
[__scopeProp: string]: Scope;
|
10
|
+
};
|
11
|
+
interface CreateScope {
|
12
|
+
scopeName: string;
|
13
|
+
(): ScopeHook;
|
14
|
+
}
|
15
|
+
|
16
|
+
declare const createCollapsibleScope: CreateScope;
|
17
|
+
type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;
|
18
|
+
interface CollapsibleProps extends PrimitiveDivProps {
|
19
|
+
defaultOpen?: boolean;
|
20
|
+
open?: boolean;
|
21
|
+
disabled?: boolean;
|
22
|
+
onOpenChange?(open: boolean): void;
|
23
|
+
}
|
24
|
+
declare const Collapsible: React.ForwardRefExoticComponent<CollapsibleProps & React.RefAttributes<HTMLDivElement>>;
|
25
|
+
declare const Root: React.ForwardRefExoticComponent<CollapsibleProps & React.RefAttributes<HTMLDivElement>>;
|
26
|
+
|
27
|
+
type PrimitiveButtonProps = React__default.ComponentPropsWithoutRef<typeof Primitive.button>;
|
28
|
+
interface CollapsibleTriggerProps extends PrimitiveButtonProps {
|
29
|
+
}
|
30
|
+
declare const CollapsibleTrigger: React__default.ForwardRefExoticComponent<CollapsibleTriggerProps & React__default.RefAttributes<HTMLButtonElement>>;
|
31
|
+
|
32
|
+
interface CollapsibleContentProps extends Omit<CollapsibleContentImplProps, "present"> {
|
33
|
+
/**
|
34
|
+
* Used to force mounting when more control is needed. Useful when
|
35
|
+
* controlling animation with React animation libraries.
|
36
|
+
*/
|
37
|
+
forceMount?: true;
|
38
|
+
}
|
39
|
+
declare const CollapsibleContent: React__default.ForwardRefExoticComponent<CollapsibleContentProps & React__default.RefAttributes<HTMLDivElement>>;
|
40
|
+
interface CollapsibleContentImplProps extends PrimitiveDivProps {
|
41
|
+
present: boolean;
|
42
|
+
}
|
43
|
+
|
44
|
+
export { Collapsible, CollapsibleContent, type CollapsibleContentProps, type CollapsibleProps, CollapsibleTrigger, type CollapsibleTriggerProps, Root, createCollapsibleScope };
|
package/dist/index.js
ADDED
@@ -0,0 +1,197 @@
|
|
1
|
+
"use strict";
|
2
|
+
"use client";
|
3
|
+
var __create = Object.create;
|
4
|
+
var __defProp = Object.defineProperty;
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
7
|
+
var __getProtoOf = Object.getPrototypeOf;
|
8
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
9
|
+
var __export = (target, all) => {
|
10
|
+
for (var name in all)
|
11
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
12
|
+
};
|
13
|
+
var __copyProps = (to, from, except, desc) => {
|
14
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
15
|
+
for (let key of __getOwnPropNames(from))
|
16
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
17
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
18
|
+
}
|
19
|
+
return to;
|
20
|
+
};
|
21
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
22
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
23
|
+
// file that has been converted to a CommonJS file using a Babel-
|
24
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
25
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
26
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
27
|
+
mod
|
28
|
+
));
|
29
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
30
|
+
|
31
|
+
// packages/react/collapsible/src/index.ts
|
32
|
+
var src_exports = {};
|
33
|
+
__export(src_exports, {
|
34
|
+
Collapsible: () => Collapsible,
|
35
|
+
CollapsibleContent: () => CollapsibleContent,
|
36
|
+
CollapsibleTrigger: () => CollapsibleTrigger,
|
37
|
+
Root: () => Root,
|
38
|
+
createCollapsibleScope: () => createCollapsibleScope
|
39
|
+
});
|
40
|
+
module.exports = __toCommonJS(src_exports);
|
41
|
+
|
42
|
+
// packages/react/collapsible/src/Collapsible.tsx
|
43
|
+
var React = __toESM(require("react"));
|
44
|
+
var import_react_context = require("@huin-core/react-context");
|
45
|
+
var import_react_primitive = require("@huin-core/react-primitive");
|
46
|
+
var import_react_use_controllable_state = require("@huin-core/react-use-controllable-state");
|
47
|
+
var import_react_id = require("@huin-core/react-id");
|
48
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
49
|
+
var COLLAPSIBLE_NAME = "Collapsible";
|
50
|
+
var [createCollapsibleContext, createCollapsibleScope] = (0, import_react_context.createContextScope)(COLLAPSIBLE_NAME);
|
51
|
+
var [CollapsibleProvider, useCollapsibleContext] = createCollapsibleContext(COLLAPSIBLE_NAME);
|
52
|
+
var Collapsible = React.forwardRef(
|
53
|
+
(props, forwardedRef) => {
|
54
|
+
const {
|
55
|
+
__scopeCollapsible,
|
56
|
+
open: openProp,
|
57
|
+
defaultOpen,
|
58
|
+
disabled,
|
59
|
+
onOpenChange,
|
60
|
+
...collapsibleProps
|
61
|
+
} = props;
|
62
|
+
const [open = false, setOpen] = (0, import_react_use_controllable_state.useControllableState)({
|
63
|
+
prop: openProp,
|
64
|
+
defaultProp: defaultOpen,
|
65
|
+
onChange: onOpenChange
|
66
|
+
});
|
67
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
68
|
+
CollapsibleProvider,
|
69
|
+
{
|
70
|
+
scope: __scopeCollapsible,
|
71
|
+
disabled,
|
72
|
+
contentId: (0, import_react_id.useId)(),
|
73
|
+
open,
|
74
|
+
onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
|
75
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
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
|
+
)
|
84
|
+
}
|
85
|
+
);
|
86
|
+
}
|
87
|
+
);
|
88
|
+
Collapsible.displayName = COLLAPSIBLE_NAME;
|
89
|
+
function getState(open) {
|
90
|
+
return open ? "open" : "closed";
|
91
|
+
}
|
92
|
+
var Root = Collapsible;
|
93
|
+
|
94
|
+
// packages/react/collapsible/src/CollapsibleTrigger.tsx
|
95
|
+
var import_react = __toESM(require("react"));
|
96
|
+
var import_react_primitive2 = require("@huin-core/react-primitive");
|
97
|
+
var import_primitive = require("@huin-core/primitive");
|
98
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
99
|
+
var TRIGGER_NAME = "CollapsibleTrigger";
|
100
|
+
var CollapsibleTrigger = import_react.default.forwardRef((props, forwardedRef) => {
|
101
|
+
const { __scopeCollapsible, ...triggerProps } = props;
|
102
|
+
const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible);
|
103
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
104
|
+
import_react_primitive2.Primitive.button,
|
105
|
+
{
|
106
|
+
type: "button",
|
107
|
+
"aria-controls": context.contentId,
|
108
|
+
"aria-expanded": context.open || false,
|
109
|
+
"data-state": getState(context.open),
|
110
|
+
"data-disabled": context.disabled ? "" : void 0,
|
111
|
+
disabled: context.disabled,
|
112
|
+
...triggerProps,
|
113
|
+
ref: forwardedRef,
|
114
|
+
onClick: (0, import_primitive.composeEventHandlers)(props.onClick, context.onOpenToggle)
|
115
|
+
}
|
116
|
+
);
|
117
|
+
});
|
118
|
+
CollapsibleTrigger.displayName = TRIGGER_NAME;
|
119
|
+
|
120
|
+
// packages/react/collapsible/src/CollapsibleContent.tsx
|
121
|
+
var import_react2 = __toESM(require("react"));
|
122
|
+
var import_react_presence = require("@huin-core/react-presence");
|
123
|
+
var import_react_primitive3 = require("@huin-core/react-primitive");
|
124
|
+
var import_react_compose_refs = require("@huin-core/react-compose-refs");
|
125
|
+
var import_react_use_layout_effect = require("@huin-core/react-use-layout-effect");
|
126
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
127
|
+
var CONTENT_NAME = "CollapsibleContent";
|
128
|
+
var CollapsibleContent = import_react2.default.forwardRef((props, forwardedRef) => {
|
129
|
+
const { forceMount, ...contentProps } = props;
|
130
|
+
const context = useCollapsibleContext(CONTENT_NAME, props.__scopeCollapsible);
|
131
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_presence.Presence, { present: forceMount || context.open, children: ({ present }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
132
|
+
CollapsibleContentImpl,
|
133
|
+
{
|
134
|
+
...contentProps,
|
135
|
+
ref: forwardedRef,
|
136
|
+
present
|
137
|
+
}
|
138
|
+
) });
|
139
|
+
});
|
140
|
+
CollapsibleContent.displayName = CONTENT_NAME;
|
141
|
+
var CollapsibleContentImpl = import_react2.default.forwardRef((props, forwardedRef) => {
|
142
|
+
const { __scopeCollapsible, present, children, ...contentProps } = props;
|
143
|
+
const context = useCollapsibleContext(CONTENT_NAME, __scopeCollapsible);
|
144
|
+
const [isPresent, setIsPresent] = import_react2.default.useState(present);
|
145
|
+
const ref = import_react2.default.useRef(null);
|
146
|
+
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, ref);
|
147
|
+
const heightRef = import_react2.default.useRef(0);
|
148
|
+
const height = heightRef.current;
|
149
|
+
const widthRef = import_react2.default.useRef(0);
|
150
|
+
const width = widthRef.current;
|
151
|
+
const isOpen = context.open || isPresent;
|
152
|
+
const isMountAnimationPreventedRef = import_react2.default.useRef(isOpen);
|
153
|
+
const originalStylesRef = import_react2.default.useRef();
|
154
|
+
import_react2.default.useEffect(() => {
|
155
|
+
const rAF = requestAnimationFrame(
|
156
|
+
() => isMountAnimationPreventedRef.current = false
|
157
|
+
);
|
158
|
+
return () => cancelAnimationFrame(rAF);
|
159
|
+
}, []);
|
160
|
+
(0, import_react_use_layout_effect.useLayoutEffect)(() => {
|
161
|
+
const node = ref.current;
|
162
|
+
if (node) {
|
163
|
+
originalStylesRef.current = originalStylesRef.current || {
|
164
|
+
transitionDuration: node.style.transitionDuration,
|
165
|
+
animationName: node.style.animationName
|
166
|
+
};
|
167
|
+
node.style.transitionDuration = "0s";
|
168
|
+
node.style.animationName = "none";
|
169
|
+
const rect = node.getBoundingClientRect();
|
170
|
+
heightRef.current = rect.height;
|
171
|
+
widthRef.current = rect.width;
|
172
|
+
if (!isMountAnimationPreventedRef.current) {
|
173
|
+
node.style.transitionDuration = originalStylesRef.current.transitionDuration;
|
174
|
+
node.style.animationName = originalStylesRef.current.animationName;
|
175
|
+
}
|
176
|
+
setIsPresent(present);
|
177
|
+
}
|
178
|
+
}, [context.open, present]);
|
179
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
180
|
+
import_react_primitive3.Primitive.div,
|
181
|
+
{
|
182
|
+
"data-state": getState(context.open),
|
183
|
+
"data-disabled": context.disabled ? "" : void 0,
|
184
|
+
id: context.contentId,
|
185
|
+
hidden: !isOpen,
|
186
|
+
...contentProps,
|
187
|
+
ref: composedRefs,
|
188
|
+
style: {
|
189
|
+
[`--huin-core-collapsible-content-height`]: height ? `${height}px` : void 0,
|
190
|
+
[`--huin-core-collapsible-content-width`]: width ? `${width}px` : void 0,
|
191
|
+
...props.style
|
192
|
+
},
|
193
|
+
children: isOpen && children
|
194
|
+
}
|
195
|
+
);
|
196
|
+
});
|
197
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1,7 @@
|
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["../src/index.ts", "../src/Collapsible.tsx", "../src/CollapsibleTrigger.tsx", "../src/CollapsibleContent.tsx"],
|
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;AAyDd;AAjDR,IAAM,mBAAmB;AAGzB,IAAM,CAAC,0BAA0B,sBAAsB,QAAI,yCAAmB,gBAAgB;AASvF,IAAM,CAAC,qBAAqB,qBAAqB,IACtD,yBAAkD,gBAAgB;AAWpE,IAAM,cAAoB;AAAA,EACxB,CAAC,OAAsC,iBAAiB;AACtD,UAAM;AAAA,MACJ;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,CAAC,OAAO,OAAO,OAAO,QAAI,0DAAqB;AAAA,MACnD,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,IACZ,CAAC;AAED,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP;AAAA,QACA,eAAW,uBAAM;AAAA,QACjB;AAAA,QACA,cAAoB,kBAAY,MAAM,QAAQ,CAAC,aAAa,CAAC,QAAQ,GAAG,CAAC,OAAO,CAAC;AAAA,QAEjF;AAAA,UAAC,iCAAU;AAAA,UAAV;AAAA,YACC,cAAY,SAAS,IAAI;AAAA,YACzB,iBAAe,WAAW,KAAK;AAAA,YAC9B,GAAG;AAAA,YACJ,KAAK;AAAA;AAAA,QACP;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;AAMnB,SAAS,SAAS,MAAgB;AACvC,SAAO,OAAO,SAAS;AACzB;AAEA,IAAM,OAAO;;;AClFb,mBAAkB;AAClB,IAAAA,0BAA0B;AAE1B,uBAAqC;AAiBjC,IAAAC,sBAAA;AAfJ,IAAM,eAAe;AAQrB,IAAM,qBAAqB,aAAAC,QAAM,WAG/B,CAAC,OAA6C,iBAAiB;AAC/D,QAAM,EAAE,oBAAoB,GAAG,aAAa,IAAI;AAChD,QAAM,UAAU,sBAAsB,cAAc,kBAAkB;AACtE,SACE;AAAA,IAAC,kCAAU;AAAA,IAAV;AAAA,MACC,MAAK;AAAA,MACL,iBAAe,QAAQ;AAAA,MACvB,iBAAe,QAAQ,QAAQ;AAAA,MAC/B,cAAY,SAAS,QAAQ,IAAI;AAAA,MACjC,iBAAe,QAAQ,WAAW,KAAK;AAAA,MACvC,UAAU,QAAQ;AAAA,MACjB,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,aAAS,uCAAqB,MAAM,SAAS,QAAQ,YAAY;AAAA;AAAA,EACnE;AAEJ,CAAC;AAED,mBAAmB,cAAc;;;AClCjC,IAAAC,gBAAkB;AAClB,4BAAyB;AAOzB,IAAAC,0BAA0B;AAC1B,gCAAgC;AAChC,qCAAgC;AAuBxB,IAAAC,sBAAA;AArBR,IAAM,eAAe;AAYrB,IAAM,qBAAqB,cAAAC,QAAM,WAG/B,CAAC,OAA6C,iBAAiB;AAC/D,QAAM,EAAE,YAAY,GAAG,aAAa,IAAI;AACxC,QAAM,UAAU,sBAAsB,cAAc,MAAM,kBAAkB;AAC5E,SACE,6CAAC,kCAAS,SAAS,cAAc,QAAQ,MACtC,WAAC,EAAE,QAAQ,MACV;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL;AAAA;AAAA,EACF,GAEJ;AAEJ,CAAC;AAED,mBAAmB,cAAc;AASjC,IAAM,yBAAyB,cAAAA,QAAM,WAGnC,CAAC,OAAiD,iBAAiB;AACnE,QAAM,EAAE,oBAAoB,SAAS,UAAU,GAAG,aAAa,IAAI;AACnE,QAAM,UAAU,sBAAsB,cAAc,kBAAkB;AACtE,QAAM,CAAC,WAAW,YAAY,IAAI,cAAAA,QAAM,SAAS,OAAO;AACxD,QAAM,MAAM,cAAAA,QAAM,OAAsC,IAAI;AAC5D,QAAM,mBAAe,2CAAgB,cAAc,GAAG;AACtD,QAAM,YAAY,cAAAA,QAAM,OAA2B,CAAC;AACpD,QAAM,SAAS,UAAU;AACzB,QAAM,WAAW,cAAAA,QAAM,OAA2B,CAAC;AACnD,QAAM,QAAQ,SAAS;AAGvB,QAAM,SAAS,QAAQ,QAAQ;AAC/B,QAAM,+BAA+B,cAAAA,QAAM,OAAO,MAAM;AACxD,QAAM,oBAAoB,cAAAA,QAAM,OAA+B;AAE/D,gBAAAA,QAAM,UAAU,MAAM;AACpB,UAAM,MAAM;AAAA,MACV,MAAO,6BAA6B,UAAU;AAAA,IAChD;AACA,WAAO,MAAM,qBAAqB,GAAG;AAAA,EACvC,GAAG,CAAC,CAAC;AAEL,sDAAgB,MAAM;AACpB,UAAM,OAAO,IAAI;AACjB,QAAI,MAAM;AACR,wBAAkB,UAAU,kBAAkB,WAAW;AAAA,QACvD,oBAAoB,KAAK,MAAM;AAAA,QAC/B,eAAe,KAAK,MAAM;AAAA,MAC5B;AAEA,WAAK,MAAM,qBAAqB;AAChC,WAAK,MAAM,gBAAgB;AAG3B,YAAM,OAAO,KAAK,sBAAsB;AACxC,gBAAU,UAAU,KAAK;AACzB,eAAS,UAAU,KAAK;AAGxB,UAAI,CAAC,6BAA6B,SAAS;AACzC,aAAK,MAAM,qBACT,kBAAkB,QAAQ;AAC5B,aAAK,MAAM,gBAAgB,kBAAkB,QAAQ;AAAA,MACvD;AAEA,mBAAa,OAAO;AAAA,IACtB;AAAA,EAOF,GAAG,CAAC,QAAQ,MAAM,OAAO,CAAC;AAE1B,SACE;AAAA,IAAC,kCAAU;AAAA,IAAV;AAAA,MACC,cAAY,SAAS,QAAQ,IAAI;AAAA,MACjC,iBAAe,QAAQ,WAAW,KAAK;AAAA,MACvC,IAAI,QAAQ;AAAA,MACZ,QAAQ,CAAC;AAAA,MACR,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,OAAO;AAAA,QACL,CAAC,wCAA+C,GAAG,SAC/C,GAAG,MAAM,OACT;AAAA,QACJ,CAAC,uCAA8C,GAAG,QAC9C,GAAG,KAAK,OACR;AAAA,QACJ,GAAG,MAAM;AAAA,MACX;AAAA,MAEC,oBAAU;AAAA;AAAA,EACb;AAEJ,CAAC;",
|
6
|
+
"names": ["import_react_primitive", "import_jsx_runtime", "React", "import_react", "import_react_primitive", "import_jsx_runtime", "React"]
|
7
|
+
}
|
package/dist/index.mjs
ADDED
@@ -0,0 +1,165 @@
|
|
1
|
+
"use client";
|
2
|
+
|
3
|
+
// packages/react/collapsible/src/Collapsible.tsx
|
4
|
+
import * as React from "react";
|
5
|
+
import { createContextScope } from "@huin-core/react-context";
|
6
|
+
import { Primitive } from "@huin-core/react-primitive";
|
7
|
+
import { useControllableState } from "@huin-core/react-use-controllable-state";
|
8
|
+
import { useId } from "@huin-core/react-id";
|
9
|
+
import { jsx } from "react/jsx-runtime";
|
10
|
+
var COLLAPSIBLE_NAME = "Collapsible";
|
11
|
+
var [createCollapsibleContext, createCollapsibleScope] = createContextScope(COLLAPSIBLE_NAME);
|
12
|
+
var [CollapsibleProvider, useCollapsibleContext] = createCollapsibleContext(COLLAPSIBLE_NAME);
|
13
|
+
var Collapsible = React.forwardRef(
|
14
|
+
(props, forwardedRef) => {
|
15
|
+
const {
|
16
|
+
__scopeCollapsible,
|
17
|
+
open: openProp,
|
18
|
+
defaultOpen,
|
19
|
+
disabled,
|
20
|
+
onOpenChange,
|
21
|
+
...collapsibleProps
|
22
|
+
} = props;
|
23
|
+
const [open = false, setOpen] = useControllableState({
|
24
|
+
prop: openProp,
|
25
|
+
defaultProp: defaultOpen,
|
26
|
+
onChange: onOpenChange
|
27
|
+
});
|
28
|
+
return /* @__PURE__ */ jsx(
|
29
|
+
CollapsibleProvider,
|
30
|
+
{
|
31
|
+
scope: __scopeCollapsible,
|
32
|
+
disabled,
|
33
|
+
contentId: useId(),
|
34
|
+
open,
|
35
|
+
onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
|
36
|
+
children: /* @__PURE__ */ jsx(
|
37
|
+
Primitive.div,
|
38
|
+
{
|
39
|
+
"data-state": getState(open),
|
40
|
+
"data-disabled": disabled ? "" : void 0,
|
41
|
+
...collapsibleProps,
|
42
|
+
ref: forwardedRef
|
43
|
+
}
|
44
|
+
)
|
45
|
+
}
|
46
|
+
);
|
47
|
+
}
|
48
|
+
);
|
49
|
+
Collapsible.displayName = COLLAPSIBLE_NAME;
|
50
|
+
function getState(open) {
|
51
|
+
return open ? "open" : "closed";
|
52
|
+
}
|
53
|
+
var Root = Collapsible;
|
54
|
+
|
55
|
+
// packages/react/collapsible/src/CollapsibleTrigger.tsx
|
56
|
+
import React2 from "react";
|
57
|
+
import { Primitive as Primitive2 } from "@huin-core/react-primitive";
|
58
|
+
import { composeEventHandlers } from "@huin-core/primitive";
|
59
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
60
|
+
var TRIGGER_NAME = "CollapsibleTrigger";
|
61
|
+
var CollapsibleTrigger = React2.forwardRef((props, forwardedRef) => {
|
62
|
+
const { __scopeCollapsible, ...triggerProps } = props;
|
63
|
+
const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible);
|
64
|
+
return /* @__PURE__ */ jsx2(
|
65
|
+
Primitive2.button,
|
66
|
+
{
|
67
|
+
type: "button",
|
68
|
+
"aria-controls": context.contentId,
|
69
|
+
"aria-expanded": context.open || false,
|
70
|
+
"data-state": getState(context.open),
|
71
|
+
"data-disabled": context.disabled ? "" : void 0,
|
72
|
+
disabled: context.disabled,
|
73
|
+
...triggerProps,
|
74
|
+
ref: forwardedRef,
|
75
|
+
onClick: composeEventHandlers(props.onClick, context.onOpenToggle)
|
76
|
+
}
|
77
|
+
);
|
78
|
+
});
|
79
|
+
CollapsibleTrigger.displayName = TRIGGER_NAME;
|
80
|
+
|
81
|
+
// packages/react/collapsible/src/CollapsibleContent.tsx
|
82
|
+
import React3 from "react";
|
83
|
+
import { Presence } from "@huin-core/react-presence";
|
84
|
+
import { Primitive as Primitive3 } from "@huin-core/react-primitive";
|
85
|
+
import { useComposedRefs } from "@huin-core/react-compose-refs";
|
86
|
+
import { useLayoutEffect } from "@huin-core/react-use-layout-effect";
|
87
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
88
|
+
var CONTENT_NAME = "CollapsibleContent";
|
89
|
+
var CollapsibleContent = React3.forwardRef((props, forwardedRef) => {
|
90
|
+
const { forceMount, ...contentProps } = props;
|
91
|
+
const context = useCollapsibleContext(CONTENT_NAME, props.__scopeCollapsible);
|
92
|
+
return /* @__PURE__ */ jsx3(Presence, { present: forceMount || context.open, children: ({ present }) => /* @__PURE__ */ jsx3(
|
93
|
+
CollapsibleContentImpl,
|
94
|
+
{
|
95
|
+
...contentProps,
|
96
|
+
ref: forwardedRef,
|
97
|
+
present
|
98
|
+
}
|
99
|
+
) });
|
100
|
+
});
|
101
|
+
CollapsibleContent.displayName = CONTENT_NAME;
|
102
|
+
var CollapsibleContentImpl = React3.forwardRef((props, forwardedRef) => {
|
103
|
+
const { __scopeCollapsible, present, children, ...contentProps } = props;
|
104
|
+
const context = useCollapsibleContext(CONTENT_NAME, __scopeCollapsible);
|
105
|
+
const [isPresent, setIsPresent] = React3.useState(present);
|
106
|
+
const ref = React3.useRef(null);
|
107
|
+
const composedRefs = useComposedRefs(forwardedRef, ref);
|
108
|
+
const heightRef = React3.useRef(0);
|
109
|
+
const height = heightRef.current;
|
110
|
+
const widthRef = React3.useRef(0);
|
111
|
+
const width = widthRef.current;
|
112
|
+
const isOpen = context.open || isPresent;
|
113
|
+
const isMountAnimationPreventedRef = React3.useRef(isOpen);
|
114
|
+
const originalStylesRef = React3.useRef();
|
115
|
+
React3.useEffect(() => {
|
116
|
+
const rAF = requestAnimationFrame(
|
117
|
+
() => isMountAnimationPreventedRef.current = false
|
118
|
+
);
|
119
|
+
return () => cancelAnimationFrame(rAF);
|
120
|
+
}, []);
|
121
|
+
useLayoutEffect(() => {
|
122
|
+
const node = ref.current;
|
123
|
+
if (node) {
|
124
|
+
originalStylesRef.current = originalStylesRef.current || {
|
125
|
+
transitionDuration: node.style.transitionDuration,
|
126
|
+
animationName: node.style.animationName
|
127
|
+
};
|
128
|
+
node.style.transitionDuration = "0s";
|
129
|
+
node.style.animationName = "none";
|
130
|
+
const rect = node.getBoundingClientRect();
|
131
|
+
heightRef.current = rect.height;
|
132
|
+
widthRef.current = rect.width;
|
133
|
+
if (!isMountAnimationPreventedRef.current) {
|
134
|
+
node.style.transitionDuration = originalStylesRef.current.transitionDuration;
|
135
|
+
node.style.animationName = originalStylesRef.current.animationName;
|
136
|
+
}
|
137
|
+
setIsPresent(present);
|
138
|
+
}
|
139
|
+
}, [context.open, present]);
|
140
|
+
return /* @__PURE__ */ jsx3(
|
141
|
+
Primitive3.div,
|
142
|
+
{
|
143
|
+
"data-state": getState(context.open),
|
144
|
+
"data-disabled": context.disabled ? "" : void 0,
|
145
|
+
id: context.contentId,
|
146
|
+
hidden: !isOpen,
|
147
|
+
...contentProps,
|
148
|
+
ref: composedRefs,
|
149
|
+
style: {
|
150
|
+
[`--huin-core-collapsible-content-height`]: height ? `${height}px` : void 0,
|
151
|
+
[`--huin-core-collapsible-content-width`]: width ? `${width}px` : void 0,
|
152
|
+
...props.style
|
153
|
+
},
|
154
|
+
children: isOpen && children
|
155
|
+
}
|
156
|
+
);
|
157
|
+
});
|
158
|
+
export {
|
159
|
+
Collapsible,
|
160
|
+
CollapsibleContent,
|
161
|
+
CollapsibleTrigger,
|
162
|
+
Root,
|
163
|
+
createCollapsibleScope
|
164
|
+
};
|
165
|
+
//# sourceMappingURL=index.mjs.map
|
@@ -0,0 +1,7 @@
|
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["../src/Collapsible.tsx", "../src/CollapsibleTrigger.tsx", "../src/CollapsibleContent.tsx"],
|
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": "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",
|
6
|
+
"names": ["React", "Primitive", "jsx", "React", "Primitive", "React", "Primitive", "jsx", "React"]
|
7
|
+
}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@huin-core/react-collapsible",
|
3
|
-
"version": "1.0.
|
3
|
+
"version": "1.0.3",
|
4
4
|
"license": "MIT",
|
5
5
|
"exports": {
|
6
6
|
".": {
|
@@ -28,14 +28,14 @@
|
|
28
28
|
"version": "yarn version"
|
29
29
|
},
|
30
30
|
"dependencies": {
|
31
|
-
"@huin-core/primitive": "
|
32
|
-
"@huin-core/react-compose-refs": "
|
33
|
-
"@huin-core/react-context": "
|
34
|
-
"@huin-core/react-id": "
|
35
|
-
"@huin-core/react-presence": "
|
36
|
-
"@huin-core/react-primitive": "
|
37
|
-
"@huin-core/react-use-controllable-state": "
|
38
|
-
"@huin-core/react-use-layout-effect": "
|
31
|
+
"@huin-core/primitive": "latest",
|
32
|
+
"@huin-core/react-compose-refs": "latest",
|
33
|
+
"@huin-core/react-context": "latest",
|
34
|
+
"@huin-core/react-id": "latest",
|
35
|
+
"@huin-core/react-presence": "latest",
|
36
|
+
"@huin-core/react-primitive": "latest",
|
37
|
+
"@huin-core/react-use-controllable-state": "latest",
|
38
|
+
"@huin-core/react-use-layout-effect": "latest"
|
39
39
|
},
|
40
40
|
"peerDependencies": {
|
41
41
|
"@types/react": "*",
|