@radix-ui/react-collapsible 1.1.12 → 1.1.13-rc.1780278394130
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.map +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +12 -13
package/dist/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/index.ts", "../src/collapsible.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client';\nexport {\n createCollapsibleScope,\n //\n Collapsible,\n CollapsibleTrigger,\n CollapsibleContent,\n //\n Root,\n Trigger,\n Content,\n} from './collapsible';\nexport type {\n CollapsibleProps,\n CollapsibleTriggerProps,\n CollapsibleContentProps,\n} from './collapsible';\n", "import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { Presence } from '@radix-ui/react-presence';\nimport { useId } from '@radix-ui/react-id';\n\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * Collapsible\n * -----------------------------------------------------------------------------------------------*/\n\nconst COLLAPSIBLE_NAME = 'Collapsible';\n\ntype ScopedProps<P> = P & { __scopeCollapsible?: Scope };\nconst [createCollapsibleContext, createCollapsibleScope] = createContextScope(COLLAPSIBLE_NAME);\n\ntype CollapsibleContextValue = {\n contentId: string;\n disabled?: boolean;\n open: boolean;\n onOpenToggle(): void;\n};\n\nconst [CollapsibleProvider, useCollapsibleContext] =\n createCollapsibleContext<CollapsibleContextValue>(COLLAPSIBLE_NAME);\n\ntype CollapsibleElement = React.ComponentRef<typeof Primitive.div>;\ntype 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, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen ?? false,\n onChange: onOpenChange,\n caller: COLLAPSIBLE_NAME,\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 }
|
|
4
|
+
"sourcesContent": ["'use client';\nexport {\n createCollapsibleScope,\n //\n Collapsible,\n CollapsibleTrigger,\n CollapsibleContent,\n //\n Root,\n Trigger,\n Content,\n} from './collapsible';\nexport type {\n CollapsibleProps,\n CollapsibleTriggerProps,\n CollapsibleContentProps,\n} from './collapsible';\n", "import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { Presence } from '@radix-ui/react-presence';\nimport { useId } from '@radix-ui/react-id';\n\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * Collapsible\n * -----------------------------------------------------------------------------------------------*/\n\nconst COLLAPSIBLE_NAME = 'Collapsible';\n\ntype ScopedProps<P> = P & { __scopeCollapsible?: Scope };\nconst [createCollapsibleContext, createCollapsibleScope] = createContextScope(COLLAPSIBLE_NAME);\n\ntype CollapsibleContextValue = {\n contentId: string;\n disabled?: boolean;\n open: boolean;\n onOpenToggle(): void;\n};\n\nconst [CollapsibleProvider, useCollapsibleContext] =\n createCollapsibleContext<CollapsibleContextValue>(COLLAPSIBLE_NAME);\n\ntype CollapsibleElement = React.ComponentRef<typeof Primitive.div>;\ntype 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, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen ?? false,\n onChange: onOpenChange,\n caller: COLLAPSIBLE_NAME,\n });\n\n return (\n <CollapsibleProvider\n scope={__scopeCollapsible}\n disabled={disabled}\n contentId={useId()}\n open={open}\n onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}\n >\n <Primitive.div\n data-state={getState(open)}\n data-disabled={disabled ? '' : undefined}\n {...collapsibleProps}\n ref={forwardedRef}\n />\n </CollapsibleProvider>\n );\n },\n);\n\nCollapsible.displayName = COLLAPSIBLE_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * CollapsibleTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'CollapsibleTrigger';\n\ntype CollapsibleTriggerElement = React.ComponentRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface CollapsibleTriggerProps extends PrimitiveButtonProps {}\n\nconst CollapsibleTrigger = React.forwardRef<CollapsibleTriggerElement, CollapsibleTriggerProps>(\n (props: ScopedProps<CollapsibleTriggerProps>, forwardedRef) => {\n const { __scopeCollapsible, ...triggerProps } = props;\n const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible);\n return (\n <Primitive.button\n type=\"button\"\n aria-controls={context.contentId}\n aria-expanded={context.open || false}\n data-state={getState(context.open)}\n data-disabled={context.disabled ? '' : undefined}\n disabled={context.disabled}\n {...triggerProps}\n ref={forwardedRef}\n onClick={composeEventHandlers(props.onClick, context.onOpenToggle)}\n />\n );\n },\n);\n\nCollapsibleTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * CollapsibleContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'CollapsibleContent';\n\ntype CollapsibleContentElement = CollapsibleContentImplElement;\ninterface CollapsibleContentProps extends Omit<CollapsibleContentImplProps, 'present'> {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst CollapsibleContent = React.forwardRef<CollapsibleContentElement, CollapsibleContentProps>(\n (props: ScopedProps<CollapsibleContentProps>, forwardedRef) => {\n const { forceMount, ...contentProps } = props;\n const context = useCollapsibleContext(CONTENT_NAME, props.__scopeCollapsible);\n return (\n <Presence present={forceMount || context.open}>\n {({ present }) => (\n <CollapsibleContentImpl {...contentProps} ref={forwardedRef} present={present} />\n )}\n </Presence>\n );\n },\n);\n\nCollapsibleContent.displayName = CONTENT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype CollapsibleContentImplElement = React.ComponentRef<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>>(undefined);\n\n React.useEffect(() => {\n const rAF = requestAnimationFrame(() => (isMountAnimationPreventedRef.current = false));\n return () => cancelAnimationFrame(rAF);\n }, []);\n\n useLayoutEffect(() => {\n const node = ref.current;\n if (node) {\n originalStylesRef.current = originalStylesRef.current || {\n transitionDuration: node.style.transitionDuration,\n 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 = 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 [`--radix-collapsible-content-height` as any]: height ? `${height}px` : undefined,\n [`--radix-collapsible-content-width` as any]: width ? `${width}px` : undefined,\n ...props.style,\n }}\n >\n {isOpen && children}\n </Primitive.div>\n );\n});\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open?: boolean) {\n return open ? 'open' : 'closed';\n}\n\nconst Root = Collapsible;\nconst Trigger = CollapsibleTrigger;\nconst Content = CollapsibleContent;\n\nexport {\n createCollapsibleScope,\n //\n Collapsible,\n CollapsibleTrigger,\n CollapsibleContent,\n //\n Root,\n Trigger,\n Content,\n};\nexport type { CollapsibleProps, CollapsibleTriggerProps, CollapsibleContentProps };\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/index.mjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/collapsible.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { Presence } from '@radix-ui/react-presence';\nimport { useId } from '@radix-ui/react-id';\n\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * Collapsible\n * -----------------------------------------------------------------------------------------------*/\n\nconst COLLAPSIBLE_NAME = 'Collapsible';\n\ntype ScopedProps<P> = P & { __scopeCollapsible?: Scope };\nconst [createCollapsibleContext, createCollapsibleScope] = createContextScope(COLLAPSIBLE_NAME);\n\ntype CollapsibleContextValue = {\n contentId: string;\n disabled?: boolean;\n open: boolean;\n onOpenToggle(): void;\n};\n\nconst [CollapsibleProvider, useCollapsibleContext] =\n createCollapsibleContext<CollapsibleContextValue>(COLLAPSIBLE_NAME);\n\ntype CollapsibleElement = React.ComponentRef<typeof Primitive.div>;\ntype 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, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen ?? false,\n onChange: onOpenChange,\n caller: COLLAPSIBLE_NAME,\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 }
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { Presence } from '@radix-ui/react-presence';\nimport { useId } from '@radix-ui/react-id';\n\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * Collapsible\n * -----------------------------------------------------------------------------------------------*/\n\nconst COLLAPSIBLE_NAME = 'Collapsible';\n\ntype ScopedProps<P> = P & { __scopeCollapsible?: Scope };\nconst [createCollapsibleContext, createCollapsibleScope] = createContextScope(COLLAPSIBLE_NAME);\n\ntype CollapsibleContextValue = {\n contentId: string;\n disabled?: boolean;\n open: boolean;\n onOpenToggle(): void;\n};\n\nconst [CollapsibleProvider, useCollapsibleContext] =\n createCollapsibleContext<CollapsibleContextValue>(COLLAPSIBLE_NAME);\n\ntype CollapsibleElement = React.ComponentRef<typeof Primitive.div>;\ntype 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, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen ?? false,\n onChange: onOpenChange,\n caller: COLLAPSIBLE_NAME,\n });\n\n return (\n <CollapsibleProvider\n scope={__scopeCollapsible}\n disabled={disabled}\n contentId={useId()}\n open={open}\n onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}\n >\n <Primitive.div\n data-state={getState(open)}\n data-disabled={disabled ? '' : undefined}\n {...collapsibleProps}\n ref={forwardedRef}\n />\n </CollapsibleProvider>\n );\n },\n);\n\nCollapsible.displayName = COLLAPSIBLE_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * CollapsibleTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'CollapsibleTrigger';\n\ntype CollapsibleTriggerElement = React.ComponentRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface CollapsibleTriggerProps extends PrimitiveButtonProps {}\n\nconst CollapsibleTrigger = React.forwardRef<CollapsibleTriggerElement, CollapsibleTriggerProps>(\n (props: ScopedProps<CollapsibleTriggerProps>, forwardedRef) => {\n const { __scopeCollapsible, ...triggerProps } = props;\n const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible);\n return (\n <Primitive.button\n type=\"button\"\n aria-controls={context.contentId}\n aria-expanded={context.open || false}\n data-state={getState(context.open)}\n data-disabled={context.disabled ? '' : undefined}\n disabled={context.disabled}\n {...triggerProps}\n ref={forwardedRef}\n onClick={composeEventHandlers(props.onClick, context.onOpenToggle)}\n />\n );\n },\n);\n\nCollapsibleTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * CollapsibleContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'CollapsibleContent';\n\ntype CollapsibleContentElement = CollapsibleContentImplElement;\ninterface CollapsibleContentProps extends Omit<CollapsibleContentImplProps, 'present'> {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst CollapsibleContent = React.forwardRef<CollapsibleContentElement, CollapsibleContentProps>(\n (props: ScopedProps<CollapsibleContentProps>, forwardedRef) => {\n const { forceMount, ...contentProps } = props;\n const context = useCollapsibleContext(CONTENT_NAME, props.__scopeCollapsible);\n return (\n <Presence present={forceMount || context.open}>\n {({ present }) => (\n <CollapsibleContentImpl {...contentProps} ref={forwardedRef} present={present} />\n )}\n </Presence>\n );\n },\n);\n\nCollapsibleContent.displayName = CONTENT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype CollapsibleContentImplElement = React.ComponentRef<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>>(undefined);\n\n React.useEffect(() => {\n const rAF = requestAnimationFrame(() => (isMountAnimationPreventedRef.current = false));\n return () => cancelAnimationFrame(rAF);\n }, []);\n\n useLayoutEffect(() => {\n const node = ref.current;\n if (node) {\n originalStylesRef.current = originalStylesRef.current || {\n transitionDuration: node.style.transitionDuration,\n 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 = 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 [`--radix-collapsible-content-height` as any]: height ? `${height}px` : undefined,\n [`--radix-collapsible-content-width` as any]: width ? `${width}px` : undefined,\n ...props.style,\n }}\n >\n {isOpen && children}\n </Primitive.div>\n );\n});\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open?: boolean) {\n return open ? 'open' : 'closed';\n}\n\nconst Root = Collapsible;\nconst Trigger = CollapsibleTrigger;\nconst Content = CollapsibleContent;\n\nexport {\n createCollapsibleScope,\n //\n Collapsible,\n CollapsibleTrigger,\n CollapsibleContent,\n //\n Root,\n Trigger,\n Content,\n};\nexport type { CollapsibleProps, CollapsibleTriggerProps, CollapsibleContentProps };\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@radix-ui/react-collapsible",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.13-rc.1780278394130",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"source": "./src/index.ts",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -12,23 +12,21 @@
|
|
|
12
12
|
"sideEffects": false,
|
|
13
13
|
"dependencies": {
|
|
14
14
|
"@radix-ui/primitive": "1.1.3",
|
|
15
|
-
"@radix-ui/react-
|
|
16
|
-
"@radix-ui/react-context": "1.1.2",
|
|
15
|
+
"@radix-ui/react-context": "1.1.3",
|
|
17
16
|
"@radix-ui/react-id": "1.1.1",
|
|
17
|
+
"@radix-ui/react-compose-refs": "1.1.2",
|
|
18
18
|
"@radix-ui/react-presence": "1.1.5",
|
|
19
|
-
"@radix-ui/react-primitive": "2.1.3",
|
|
20
19
|
"@radix-ui/react-use-controllable-state": "1.2.2",
|
|
21
|
-
"@radix-ui/react-use-layout-effect": "1.1.1"
|
|
20
|
+
"@radix-ui/react-use-layout-effect": "1.1.1",
|
|
21
|
+
"@radix-ui/react-primitive": "2.1.5-rc.1780278394130"
|
|
22
22
|
},
|
|
23
23
|
"devDependencies": {
|
|
24
|
-
"@types/react": "^19.
|
|
25
|
-
"@types/react-dom": "^19.
|
|
26
|
-
"
|
|
27
|
-
"react": "^19.
|
|
28
|
-
"
|
|
29
|
-
"typescript": "^5.7.3",
|
|
24
|
+
"@types/react": "^19.2.2",
|
|
25
|
+
"@types/react-dom": "^19.2.2",
|
|
26
|
+
"react": "^19.2.0",
|
|
27
|
+
"react-dom": "^19.2.0",
|
|
28
|
+
"typescript": "^5.9.3",
|
|
30
29
|
"@repo/builder": "0.0.0",
|
|
31
|
-
"@repo/eslint-config": "0.0.0",
|
|
32
30
|
"@repo/typescript-config": "0.0.0"
|
|
33
31
|
},
|
|
34
32
|
"peerDependencies": {
|
|
@@ -54,8 +52,9 @@
|
|
|
54
52
|
"url": "https://github.com/radix-ui/primitives/issues"
|
|
55
53
|
},
|
|
56
54
|
"scripts": {
|
|
57
|
-
"lint": "
|
|
55
|
+
"lint": "oxlint --max-warnings 0 src",
|
|
58
56
|
"clean": "rm -rf dist",
|
|
57
|
+
"reset": "rm -rf dist node_modules",
|
|
59
58
|
"typecheck": "tsc --noEmit",
|
|
60
59
|
"build": "radix-build"
|
|
61
60
|
},
|