@tamagui/accordion 1.0.1-beta.65
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/LICENSE +21 -0
- package/dist/cjs/Accordion.js +28 -0
- package/dist/cjs/Accordion.js.map +7 -0
- package/dist/cjs/index.js +18 -0
- package/dist/cjs/index.js.map +7 -0
- package/dist/esm/Accordion.js +5 -0
- package/dist/esm/Accordion.js.map +7 -0
- package/dist/esm/index.js +2 -0
- package/dist/esm/index.js.map +7 -0
- package/dist/jsx/Accordion.js +4 -0
- package/dist/jsx/index.js +1 -0
- package/package.json +44 -0
- package/src/Accordion.tsx +491 -0
- package/src/index.ts +1 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2021 Radix
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
+
};
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
+
var Accordion_exports = {};
|
|
19
|
+
__export(Accordion_exports, {
|
|
20
|
+
Accordion: () => Accordion
|
|
21
|
+
});
|
|
22
|
+
module.exports = __toCommonJS(Accordion_exports);
|
|
23
|
+
const Accordion = {};
|
|
24
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
25
|
+
0 && (module.exports = {
|
|
26
|
+
Accordion
|
|
27
|
+
});
|
|
28
|
+
//# sourceMappingURL=Accordion.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Accordion.tsx"],
|
|
4
|
+
"sourcesContent": ["export const Accordion = {}\n\n// import { useComposedRefs } from '@tamagui/compose-refs'\n// import { Stack, StackProps, TamaguiElement, composeEventHandlers } from '@tamagui/core'\n// import { useId } from '@tamagui/core'\n// import { createContextScope } from '@tamagui/create-context'\n// import type { Scope } from '@tamagui/create-context'\n// import { useControllableState } from '@tamagui/use-controllable-state'\n// import React from 'react'\n\n// const COLLAPSIBLE_NAME = 'Collapsible'\n\n// const [_createCollapsibleContext, createCollapsibleScope] = createContextScope(COLLAPSIBLE_NAME)\n\n// /* -------------------------------------------------------------------------------------------------\n// * Accordion\n// * -----------------------------------------------------------------------------------------------*/\n\n// const ACCORDION_NAME = 'Accordion'\n// const ACCORDION_KEYS = ['Home', 'End', 'ArrowDown', 'ArrowUp']\n\n// type ScopedProps<P> = P & { __scopeAccordion?: Scope }\n// const [createAccordionContext, createAccordionScope] = createContextScope(ACCORDION_NAME, [\n// createCollapsibleScope,\n// ])\n// const useCollapsibleScope = createCollapsibleScope()\n\n// type AccordionElement = AccordionImplMultipleElement | AccordionImplSingleElement\n// interface AccordionSingleProps extends AccordionImplSingleProps {\n// type: 'single'\n// }\n// interface AccordionMultipleProps extends AccordionImplMultipleProps {\n// type: 'multiple'\n// }\n\n// const Accordion = React.forwardRef<AccordionElement, AccordionSingleProps | AccordionMultipleProps>(\n// (props: ScopedProps<AccordionSingleProps | AccordionMultipleProps>, forwardedRef) => {\n// const { type, ...accordionProps } = props\n// const singleProps = accordionProps as AccordionImplSingleProps\n// const multipleProps = accordionProps as AccordionImplMultipleProps\n// return (\n// <>\n// {type === 'multiple' ? (\n// <AccordionImplMultiple {...multipleProps} ref={forwardedRef} />\n// ) : (\n// <AccordionImplSingle {...singleProps} ref={forwardedRef} />\n// )}\n// </>\n// )\n// }\n// )\n\n// Accordion.displayName = ACCORDION_NAME\n\n// Accordion.propTypes = {\n// type(props) {\n// const value = props.value || props.defaultValue\n// if (props.type && !['single', 'multiple'].includes(props.type)) {\n// return new Error(\n// 'Invalid prop `type` supplied to `Accordion`. Expected one of `single | multiple`.'\n// )\n// }\n// if (props.type === 'multiple' && typeof value === 'string') {\n// return new Error(\n// 'Invalid prop `type` supplied to `Accordion`. Expected `single` when `defaultValue` or `value` is type `string`.'\n// )\n// }\n// if (props.type === 'single' && Array.isArray(value)) {\n// return new Error(\n// 'Invalid prop `type` supplied to `Accordion`. Expected `multiple` when `defaultValue` or `value` is type `string[]`.'\n// )\n// }\n// return null\n// },\n// }\n\n// /* -----------------------------------------------------------------------------------------------*/\n\n// type AccordionValueContextValue = {\n// value: string[]\n// onItemOpen(value: string): void\n// onItemClose(value: string): void\n// }\n\n// const [AccordionValueProvider, useAccordionValueContext] =\n// createAccordionContext<AccordionValueContextValue>(ACCORDION_NAME)\n\n// const [AccordionCollapsibleProvider, useAccordionCollapsibleContext] = createAccordionContext(\n// ACCORDION_NAME,\n// { collapsible: false }\n// )\n\n// type AccordionImplSingleElement = AccordionImplElement\n// interface AccordionImplSingleProps extends AccordionImplProps {\n// /**\n// * The controlled stateful value of the accordion item whose content is expanded.\n// */\n// value?: string\n// /**\n// * The value of the item whose content is expanded when the accordion is initially rendered. Use\n// * `defaultValue` if you do not need to control the state of an accordion.\n// */\n// defaultValue?: string\n// /**\n// * The callback that fires when the state of the accordion changes.\n// */\n// onValueChange?(value: string): void\n// /**\n// * Whether an accordion item can be collapsed after it has been opened.\n// * @default false\n// */\n// collapsible?: boolean\n// }\n\n// const AccordionImplSingle = React.forwardRef<AccordionImplSingleElement, AccordionImplSingleProps>(\n// (props: ScopedProps<AccordionImplSingleProps>, forwardedRef) => {\n// const {\n// value: valueProp,\n// defaultValue,\n// onValueChange = () => {},\n// collapsible = false,\n// ...accordionSingleProps\n// } = props\n\n// const [value, setValue] = useControllableState({\n// prop: valueProp,\n// defaultProp: defaultValue || '',\n// onChange: onValueChange,\n// })\n\n// return (\n// <AccordionValueProvider\n// scope={props.__scopeAccordion}\n// value={value ? [value] : []}\n// onItemOpen={setValue}\n// onItemClose={React.useCallback(() => collapsible && setValue(''), [collapsible, setValue])}\n// >\n// <AccordionCollapsibleProvider scope={props.__scopeAccordion} collapsible={collapsible}>\n// <AccordionImpl {...accordionSingleProps} ref={forwardedRef} />\n// </AccordionCollapsibleProvider>\n// </AccordionValueProvider>\n// )\n// }\n// )\n\n// /* -----------------------------------------------------------------------------------------------*/\n\n// type AccordionImplMultipleElement = AccordionImplElement\n// interface AccordionImplMultipleProps extends AccordionImplProps {\n// /**\n// * The controlled stateful value of the accordion items whose contents are expanded.\n// */\n// value?: string[]\n// /**\n// * The value of the items whose contents are expanded when the accordion is initially rendered. Use\n// * `defaultValue` if you do not need to control the state of an accordion.\n// */\n// defaultValue?: string[]\n// /**\n// * The callback that fires when the state of the accordion changes.\n// */\n// onValueChange?(value: string[]): void\n// }\n\n// const AccordionImplMultiple = React.forwardRef<\n// AccordionImplMultipleElement,\n// AccordionImplMultipleProps\n// >((props: ScopedProps<AccordionImplMultipleProps>, forwardedRef) => {\n// const {\n// value: valueProp,\n// defaultValue,\n// onValueChange = () => {},\n// ...accordionMultipleProps\n// } = props\n\n// const [value, setValue] = useControllableState({\n// prop: valueProp,\n// defaultProp: defaultValue || [],\n// onChange: onValueChange,\n// })\n\n// const handleItemOpen = React.useCallback(\n// (itemValue: string) => setValue((prevValue = []) => [...prevValue, itemValue]),\n// [setValue]\n// )\n\n// const handleItemClose = React.useCallback(\n// (itemValue: string) =>\n// setValue((prevValue = []) => prevValue.filter((value) => value !== itemValue)),\n// [setValue]\n// )\n\n// return (\n// <AccordionValueProvider\n// scope={props.__scopeAccordion}\n// value={value}\n// onItemOpen={handleItemOpen}\n// onItemClose={handleItemClose}\n// >\n// <AccordionCollapsibleProvider scope={props.__scopeAccordion} collapsible={true}>\n// <AccordionImpl {...accordionMultipleProps} ref={forwardedRef} />\n// </AccordionCollapsibleProvider>\n// </AccordionValueProvider>\n// )\n// })\n\n// /* -----------------------------------------------------------------------------------------------*/\n\n// type AccordionImplContextValue = {\n// disabled?: boolean\n// }\n\n// const [AccordionImplProvider, useAccordionContext] =\n// createAccordionContext<AccordionImplContextValue>(ACCORDION_NAME)\n\n// type AccordionImplElement = TamaguiElement\n// type PrimitiveDivProps = StackProps\n\n// interface AccordionImplProps extends PrimitiveDivProps {\n// /**\n// * Whether or not an accordion is disabled from user interaction.\n// *\n// * @defaultValue false\n// */\n// disabled?: boolean\n// }\n\n// const AccordionImpl = React.forwardRef<AccordionImplElement, AccordionImplProps>(\n// (props: ScopedProps<AccordionImplProps>, forwardedRef) => {\n// const { __scopeAccordion, disabled, ...accordionProps } = props\n// const accordionRef = React.useRef<AccordionImplElement>(null)\n// const composedRefs = useComposedRefs(accordionRef, forwardedRef)\n// // const getItems = useCollection(__scopeAccordion)\n\n// const handleKeyDown = (event: KeyboardEvent) => {\n// if (!ACCORDION_KEYS.includes(event.key)) return\n// const target = event.target as HTMLElement\n// const triggerCollection = [] //getItems().filter((item) => !item.ref.current?.disabled)\n// const triggerIndex = triggerCollection.findIndex((item) => item.ref.current === target)\n// const triggerCount = triggerCollection.length\n\n// if (triggerIndex === -1) return\n\n// // Prevents page scroll while user is navigating\n// event.preventDefault()\n\n// let nextIndex = triggerIndex\n// switch (event.key) {\n// case 'Home':\n// nextIndex = 0\n// break\n// case 'End':\n// nextIndex = triggerCount - 1\n// break\n// case 'ArrowDown':\n// nextIndex = triggerIndex + 1\n// break\n// case 'ArrowUp':\n// nextIndex = triggerIndex - 1\n// if (nextIndex < 0) {\n// nextIndex = triggerCount - 1\n// }\n// break\n// }\n\n// const clampedIndex = nextIndex % triggerCount\n// triggerCollection[clampedIndex].ref.current?.focus()\n// }\n\n// return (\n// <AccordionImplProvider scope={__scopeAccordion} disabled={disabled}>\n// <Stack\n// {...accordionProps}\n// // @ts-ignore\n// ref={composedRefs}\n// // @ts-ignore\n// onKeyDown={disabled ? undefined : handleKeyDown}\n// />\n// </AccordionImplProvider>\n// )\n// }\n// )\n\n// /* -------------------------------------------------------------------------------------------------\n// * AccordionItem\n// * -----------------------------------------------------------------------------------------------*/\n\n// const ITEM_NAME = 'AccordionItem'\n\n// type AccordionItemContextValue = { open?: boolean; disabled?: boolean; triggerId: string }\n// const [AccordionItemProvider, useAccordionItemContext] =\n// createAccordionContext<AccordionItemContextValue>(ITEM_NAME)\n\n// type AccordionItemElement = TamaguiElement\n// type CollapsibleProps = Radix.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root>\n\n// interface AccordionItemProps\n// extends Omit<CollapsibleProps, 'open' | 'defaultOpen' | 'onOpenChange'> {\n// /**\n// * Whether or not an accordion item is disabled from user interaction.\n// *\n// * @defaultValue false\n// */\n// disabled?: boolean\n// /**\n// * A string value for the accordion item. All items within an accordion should use a unique value.\n// */\n// value: string\n// }\n\n// /**\n// * `AccordionItem` contains all of the parts of a collapsible section inside of an `Accordion`.\n// */\n// const AccordionItem = React.forwardRef<AccordionItemElement, AccordionItemProps>(\n// (props: ScopedProps<AccordionItemProps>, forwardedRef) => {\n// const { __scopeAccordion, value, ...accordionItemProps } = props\n// const accordionContext = useAccordionContext(ITEM_NAME, __scopeAccordion)\n// const valueContext = useAccordionValueContext(ITEM_NAME, __scopeAccordion)\n// const collapsibleScope = useCollapsibleScope(__scopeAccordion)\n// const triggerId = useId()\n// const open = (value && valueContext.value.includes(value)) || false\n// const disabled = accordionContext.disabled || props.disabled\n\n// return (\n// <AccordionItemProvider\n// scope={__scopeAccordion}\n// open={open}\n// disabled={disabled}\n// triggerId={triggerId}\n// >\n// <CollapsiblePrimitive.Root\n// data-state={open ? 'open' : 'closed'}\n// {...collapsibleScope}\n// {...accordionItemProps}\n// ref={forwardedRef}\n// disabled={disabled}\n// open={open}\n// onOpenChange={(open) => {\n// if (open) {\n// valueContext.onItemOpen(value)\n// } else {\n// valueContext.onItemClose(value)\n// }\n// }}\n// />\n// </AccordionItemProvider>\n// )\n// }\n// )\n\n// AccordionItem.displayName = ITEM_NAME\n\n// /* -------------------------------------------------------------------------------------------------\n// * AccordionHeader\n// * -----------------------------------------------------------------------------------------------*/\n\n// const HEADER_NAME = 'AccordionHeader'\n\n// type AccordionHeaderElement = React.ElementRef<typeof Primitive.h3>\n// type PrimitiveHeading3Props = Radix.ComponentPropsWithoutRef<typeof Primitive.h3>\n// interface AccordionHeaderProps extends PrimitiveHeading3Props {}\n\n// /**\n// * `AccordionHeader` contains the content for the parts of an `AccordionItem` that will be visible\n// * whether or not its content is collapsed.\n// */\n// const AccordionHeader = React.forwardRef<AccordionHeaderElement, AccordionHeaderProps>(\n// (props: ScopedProps<AccordionHeaderProps>, forwardedRef) => {\n// const { __scopeAccordion, ...headerProps } = props\n// const itemContext = useAccordionItemContext(HEADER_NAME, __scopeAccordion)\n// return (\n// <Primitive.h3\n// data-state={getState(itemContext.open)}\n// data-disabled={itemContext.disabled ? '' : undefined}\n// {...headerProps}\n// ref={forwardedRef}\n// />\n// )\n// }\n// )\n\n// AccordionHeader.displayName = HEADER_NAME\n\n// /* -------------------------------------------------------------------------------------------------\n// * AccordionTrigger\n// * -----------------------------------------------------------------------------------------------*/\n\n// const TRIGGER_NAME = 'AccordionTrigger'\n\n// type AccordionTriggerElement = React.ElementRef<typeof CollapsiblePrimitive.Trigger>\n// type CollapsibleTriggerProps = Radix.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Trigger>\n// interface AccordionTriggerProps extends CollapsibleTriggerProps {}\n\n// /**\n// * `AccordionTrigger` is the trigger that toggles the collapsed state of an `AccordionItem`. It\n// * should always be nested inside of an `AccordionHeader`.\n// */\n// const AccordionTrigger = React.forwardRef<AccordionTriggerElement, AccordionTriggerProps>(\n// (props: ScopedProps<AccordionTriggerProps>, forwardedRef) => {\n// const { __scopeAccordion, ...triggerProps } = props\n// const itemContext = useAccordionItemContext(TRIGGER_NAME, __scopeAccordion)\n// const collapsibleContext = useAccordionCollapsibleContext(TRIGGER_NAME, __scopeAccordion)\n// const collapsibleScope = useCollapsibleScope(__scopeAccordion)\n// return (\n// <Collection.ItemSlot scope={__scopeAccordion}>\n// <CollapsiblePrimitive.Trigger\n// aria-disabled={(itemContext.open && !collapsibleContext.collapsible) || undefined}\n// id={itemContext.triggerId}\n// {...collapsibleScope}\n// {...triggerProps}\n// ref={forwardedRef}\n// />\n// </Collection.ItemSlot>\n// )\n// }\n// )\n\n// AccordionTrigger.displayName = TRIGGER_NAME\n\n// /* -------------------------------------------------------------------------------------------------\n// * AccordionContent\n// * -----------------------------------------------------------------------------------------------*/\n\n// const CONTENT_NAME = 'AccordionContent'\n\n// type AccordionContentElement = React.ElementRef<typeof CollapsiblePrimitive.Content>\n// type CollapsibleContentProps = Radix.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content>\n// interface AccordionContentProps extends CollapsibleContentProps {}\n\n// /**\n// * `AccordionContent` contains the collapsible content for an `AccordionItem`.\n// */\n// const AccordionContent = React.forwardRef<AccordionContentElement, AccordionContentProps>(\n// (props: ScopedProps<AccordionContentProps>, forwardedRef) => {\n// const { __scopeAccordion, ...contentProps } = props\n// const itemContext = useAccordionItemContext(CONTENT_NAME, __scopeAccordion)\n// const collapsibleScope = useCollapsibleScope(__scopeAccordion)\n// return (\n// <CollapsiblePrimitive.Content\n// role=\"region\"\n// aria-labelledby={itemContext.triggerId}\n// {...collapsibleScope}\n// {...contentProps}\n// ref={forwardedRef}\n// style={{\n// ['--radix-accordion-content-height' as any]: 'var(--radix-collapsible-content-height)',\n// ['--radix-accordion-content-width' as any]: 'var(--radix-collapsible-content-width)',\n// ...props.style,\n// }}\n// />\n// )\n// }\n// )\n\n// AccordionContent.displayName = CONTENT_NAME\n\n// /* -----------------------------------------------------------------------------------------------*/\n\n// function getState(open?: boolean) {\n// return open ? 'open' : 'closed'\n// }\n\n// const Root = Accordion\n// const Item = AccordionItem\n// const Header = AccordionHeader\n// const Trigger = AccordionTrigger\n// const Content = AccordionContent\n\n// export {\n// createAccordionScope,\n// //\n// Accordion,\n// AccordionItem,\n// AccordionHeader,\n// AccordionTrigger,\n// AccordionContent,\n// //\n// Root,\n// Item,\n// Header,\n// Trigger,\n// Content,\n// }\n// export type {\n// AccordionSingleProps,\n// AccordionMultipleProps,\n// AccordionItemProps,\n// AccordionHeaderProps,\n// AccordionTriggerProps,\n// AccordionContentProps,\n// }\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,MAAM,YAAY,CAAC;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __copyProps = (to, from, except, desc) => {
|
|
6
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
7
|
+
for (let key of __getOwnPropNames(from))
|
|
8
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
9
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
10
|
+
}
|
|
11
|
+
return to;
|
|
12
|
+
};
|
|
13
|
+
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
14
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
15
|
+
var src_exports = {};
|
|
16
|
+
module.exports = __toCommonJS(src_exports);
|
|
17
|
+
__reExport(src_exports, require("./Accordion"), module.exports);
|
|
18
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Accordion.tsx"],
|
|
4
|
+
"sourcesContent": ["export const Accordion = {}\n\n// import { useComposedRefs } from '@tamagui/compose-refs'\n// import { Stack, StackProps, TamaguiElement, composeEventHandlers } from '@tamagui/core'\n// import { useId } from '@tamagui/core'\n// import { createContextScope } from '@tamagui/create-context'\n// import type { Scope } from '@tamagui/create-context'\n// import { useControllableState } from '@tamagui/use-controllable-state'\n// import React from 'react'\n\n// const COLLAPSIBLE_NAME = 'Collapsible'\n\n// const [_createCollapsibleContext, createCollapsibleScope] = createContextScope(COLLAPSIBLE_NAME)\n\n// /* -------------------------------------------------------------------------------------------------\n// * Accordion\n// * -----------------------------------------------------------------------------------------------*/\n\n// const ACCORDION_NAME = 'Accordion'\n// const ACCORDION_KEYS = ['Home', 'End', 'ArrowDown', 'ArrowUp']\n\n// type ScopedProps<P> = P & { __scopeAccordion?: Scope }\n// const [createAccordionContext, createAccordionScope] = createContextScope(ACCORDION_NAME, [\n// createCollapsibleScope,\n// ])\n// const useCollapsibleScope = createCollapsibleScope()\n\n// type AccordionElement = AccordionImplMultipleElement | AccordionImplSingleElement\n// interface AccordionSingleProps extends AccordionImplSingleProps {\n// type: 'single'\n// }\n// interface AccordionMultipleProps extends AccordionImplMultipleProps {\n// type: 'multiple'\n// }\n\n// const Accordion = React.forwardRef<AccordionElement, AccordionSingleProps | AccordionMultipleProps>(\n// (props: ScopedProps<AccordionSingleProps | AccordionMultipleProps>, forwardedRef) => {\n// const { type, ...accordionProps } = props\n// const singleProps = accordionProps as AccordionImplSingleProps\n// const multipleProps = accordionProps as AccordionImplMultipleProps\n// return (\n// <>\n// {type === 'multiple' ? (\n// <AccordionImplMultiple {...multipleProps} ref={forwardedRef} />\n// ) : (\n// <AccordionImplSingle {...singleProps} ref={forwardedRef} />\n// )}\n// </>\n// )\n// }\n// )\n\n// Accordion.displayName = ACCORDION_NAME\n\n// Accordion.propTypes = {\n// type(props) {\n// const value = props.value || props.defaultValue\n// if (props.type && !['single', 'multiple'].includes(props.type)) {\n// return new Error(\n// 'Invalid prop `type` supplied to `Accordion`. Expected one of `single | multiple`.'\n// )\n// }\n// if (props.type === 'multiple' && typeof value === 'string') {\n// return new Error(\n// 'Invalid prop `type` supplied to `Accordion`. Expected `single` when `defaultValue` or `value` is type `string`.'\n// )\n// }\n// if (props.type === 'single' && Array.isArray(value)) {\n// return new Error(\n// 'Invalid prop `type` supplied to `Accordion`. Expected `multiple` when `defaultValue` or `value` is type `string[]`.'\n// )\n// }\n// return null\n// },\n// }\n\n// /* -----------------------------------------------------------------------------------------------*/\n\n// type AccordionValueContextValue = {\n// value: string[]\n// onItemOpen(value: string): void\n// onItemClose(value: string): void\n// }\n\n// const [AccordionValueProvider, useAccordionValueContext] =\n// createAccordionContext<AccordionValueContextValue>(ACCORDION_NAME)\n\n// const [AccordionCollapsibleProvider, useAccordionCollapsibleContext] = createAccordionContext(\n// ACCORDION_NAME,\n// { collapsible: false }\n// )\n\n// type AccordionImplSingleElement = AccordionImplElement\n// interface AccordionImplSingleProps extends AccordionImplProps {\n// /**\n// * The controlled stateful value of the accordion item whose content is expanded.\n// */\n// value?: string\n// /**\n// * The value of the item whose content is expanded when the accordion is initially rendered. Use\n// * `defaultValue` if you do not need to control the state of an accordion.\n// */\n// defaultValue?: string\n// /**\n// * The callback that fires when the state of the accordion changes.\n// */\n// onValueChange?(value: string): void\n// /**\n// * Whether an accordion item can be collapsed after it has been opened.\n// * @default false\n// */\n// collapsible?: boolean\n// }\n\n// const AccordionImplSingle = React.forwardRef<AccordionImplSingleElement, AccordionImplSingleProps>(\n// (props: ScopedProps<AccordionImplSingleProps>, forwardedRef) => {\n// const {\n// value: valueProp,\n// defaultValue,\n// onValueChange = () => {},\n// collapsible = false,\n// ...accordionSingleProps\n// } = props\n\n// const [value, setValue] = useControllableState({\n// prop: valueProp,\n// defaultProp: defaultValue || '',\n// onChange: onValueChange,\n// })\n\n// return (\n// <AccordionValueProvider\n// scope={props.__scopeAccordion}\n// value={value ? [value] : []}\n// onItemOpen={setValue}\n// onItemClose={React.useCallback(() => collapsible && setValue(''), [collapsible, setValue])}\n// >\n// <AccordionCollapsibleProvider scope={props.__scopeAccordion} collapsible={collapsible}>\n// <AccordionImpl {...accordionSingleProps} ref={forwardedRef} />\n// </AccordionCollapsibleProvider>\n// </AccordionValueProvider>\n// )\n// }\n// )\n\n// /* -----------------------------------------------------------------------------------------------*/\n\n// type AccordionImplMultipleElement = AccordionImplElement\n// interface AccordionImplMultipleProps extends AccordionImplProps {\n// /**\n// * The controlled stateful value of the accordion items whose contents are expanded.\n// */\n// value?: string[]\n// /**\n// * The value of the items whose contents are expanded when the accordion is initially rendered. Use\n// * `defaultValue` if you do not need to control the state of an accordion.\n// */\n// defaultValue?: string[]\n// /**\n// * The callback that fires when the state of the accordion changes.\n// */\n// onValueChange?(value: string[]): void\n// }\n\n// const AccordionImplMultiple = React.forwardRef<\n// AccordionImplMultipleElement,\n// AccordionImplMultipleProps\n// >((props: ScopedProps<AccordionImplMultipleProps>, forwardedRef) => {\n// const {\n// value: valueProp,\n// defaultValue,\n// onValueChange = () => {},\n// ...accordionMultipleProps\n// } = props\n\n// const [value, setValue] = useControllableState({\n// prop: valueProp,\n// defaultProp: defaultValue || [],\n// onChange: onValueChange,\n// })\n\n// const handleItemOpen = React.useCallback(\n// (itemValue: string) => setValue((prevValue = []) => [...prevValue, itemValue]),\n// [setValue]\n// )\n\n// const handleItemClose = React.useCallback(\n// (itemValue: string) =>\n// setValue((prevValue = []) => prevValue.filter((value) => value !== itemValue)),\n// [setValue]\n// )\n\n// return (\n// <AccordionValueProvider\n// scope={props.__scopeAccordion}\n// value={value}\n// onItemOpen={handleItemOpen}\n// onItemClose={handleItemClose}\n// >\n// <AccordionCollapsibleProvider scope={props.__scopeAccordion} collapsible={true}>\n// <AccordionImpl {...accordionMultipleProps} ref={forwardedRef} />\n// </AccordionCollapsibleProvider>\n// </AccordionValueProvider>\n// )\n// })\n\n// /* -----------------------------------------------------------------------------------------------*/\n\n// type AccordionImplContextValue = {\n// disabled?: boolean\n// }\n\n// const [AccordionImplProvider, useAccordionContext] =\n// createAccordionContext<AccordionImplContextValue>(ACCORDION_NAME)\n\n// type AccordionImplElement = TamaguiElement\n// type PrimitiveDivProps = StackProps\n\n// interface AccordionImplProps extends PrimitiveDivProps {\n// /**\n// * Whether or not an accordion is disabled from user interaction.\n// *\n// * @defaultValue false\n// */\n// disabled?: boolean\n// }\n\n// const AccordionImpl = React.forwardRef<AccordionImplElement, AccordionImplProps>(\n// (props: ScopedProps<AccordionImplProps>, forwardedRef) => {\n// const { __scopeAccordion, disabled, ...accordionProps } = props\n// const accordionRef = React.useRef<AccordionImplElement>(null)\n// const composedRefs = useComposedRefs(accordionRef, forwardedRef)\n// // const getItems = useCollection(__scopeAccordion)\n\n// const handleKeyDown = (event: KeyboardEvent) => {\n// if (!ACCORDION_KEYS.includes(event.key)) return\n// const target = event.target as HTMLElement\n// const triggerCollection = [] //getItems().filter((item) => !item.ref.current?.disabled)\n// const triggerIndex = triggerCollection.findIndex((item) => item.ref.current === target)\n// const triggerCount = triggerCollection.length\n\n// if (triggerIndex === -1) return\n\n// // Prevents page scroll while user is navigating\n// event.preventDefault()\n\n// let nextIndex = triggerIndex\n// switch (event.key) {\n// case 'Home':\n// nextIndex = 0\n// break\n// case 'End':\n// nextIndex = triggerCount - 1\n// break\n// case 'ArrowDown':\n// nextIndex = triggerIndex + 1\n// break\n// case 'ArrowUp':\n// nextIndex = triggerIndex - 1\n// if (nextIndex < 0) {\n// nextIndex = triggerCount - 1\n// }\n// break\n// }\n\n// const clampedIndex = nextIndex % triggerCount\n// triggerCollection[clampedIndex].ref.current?.focus()\n// }\n\n// return (\n// <AccordionImplProvider scope={__scopeAccordion} disabled={disabled}>\n// <Stack\n// {...accordionProps}\n// // @ts-ignore\n// ref={composedRefs}\n// // @ts-ignore\n// onKeyDown={disabled ? undefined : handleKeyDown}\n// />\n// </AccordionImplProvider>\n// )\n// }\n// )\n\n// /* -------------------------------------------------------------------------------------------------\n// * AccordionItem\n// * -----------------------------------------------------------------------------------------------*/\n\n// const ITEM_NAME = 'AccordionItem'\n\n// type AccordionItemContextValue = { open?: boolean; disabled?: boolean; triggerId: string }\n// const [AccordionItemProvider, useAccordionItemContext] =\n// createAccordionContext<AccordionItemContextValue>(ITEM_NAME)\n\n// type AccordionItemElement = TamaguiElement\n// type CollapsibleProps = Radix.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root>\n\n// interface AccordionItemProps\n// extends Omit<CollapsibleProps, 'open' | 'defaultOpen' | 'onOpenChange'> {\n// /**\n// * Whether or not an accordion item is disabled from user interaction.\n// *\n// * @defaultValue false\n// */\n// disabled?: boolean\n// /**\n// * A string value for the accordion item. All items within an accordion should use a unique value.\n// */\n// value: string\n// }\n\n// /**\n// * `AccordionItem` contains all of the parts of a collapsible section inside of an `Accordion`.\n// */\n// const AccordionItem = React.forwardRef<AccordionItemElement, AccordionItemProps>(\n// (props: ScopedProps<AccordionItemProps>, forwardedRef) => {\n// const { __scopeAccordion, value, ...accordionItemProps } = props\n// const accordionContext = useAccordionContext(ITEM_NAME, __scopeAccordion)\n// const valueContext = useAccordionValueContext(ITEM_NAME, __scopeAccordion)\n// const collapsibleScope = useCollapsibleScope(__scopeAccordion)\n// const triggerId = useId()\n// const open = (value && valueContext.value.includes(value)) || false\n// const disabled = accordionContext.disabled || props.disabled\n\n// return (\n// <AccordionItemProvider\n// scope={__scopeAccordion}\n// open={open}\n// disabled={disabled}\n// triggerId={triggerId}\n// >\n// <CollapsiblePrimitive.Root\n// data-state={open ? 'open' : 'closed'}\n// {...collapsibleScope}\n// {...accordionItemProps}\n// ref={forwardedRef}\n// disabled={disabled}\n// open={open}\n// onOpenChange={(open) => {\n// if (open) {\n// valueContext.onItemOpen(value)\n// } else {\n// valueContext.onItemClose(value)\n// }\n// }}\n// />\n// </AccordionItemProvider>\n// )\n// }\n// )\n\n// AccordionItem.displayName = ITEM_NAME\n\n// /* -------------------------------------------------------------------------------------------------\n// * AccordionHeader\n// * -----------------------------------------------------------------------------------------------*/\n\n// const HEADER_NAME = 'AccordionHeader'\n\n// type AccordionHeaderElement = React.ElementRef<typeof Primitive.h3>\n// type PrimitiveHeading3Props = Radix.ComponentPropsWithoutRef<typeof Primitive.h3>\n// interface AccordionHeaderProps extends PrimitiveHeading3Props {}\n\n// /**\n// * `AccordionHeader` contains the content for the parts of an `AccordionItem` that will be visible\n// * whether or not its content is collapsed.\n// */\n// const AccordionHeader = React.forwardRef<AccordionHeaderElement, AccordionHeaderProps>(\n// (props: ScopedProps<AccordionHeaderProps>, forwardedRef) => {\n// const { __scopeAccordion, ...headerProps } = props\n// const itemContext = useAccordionItemContext(HEADER_NAME, __scopeAccordion)\n// return (\n// <Primitive.h3\n// data-state={getState(itemContext.open)}\n// data-disabled={itemContext.disabled ? '' : undefined}\n// {...headerProps}\n// ref={forwardedRef}\n// />\n// )\n// }\n// )\n\n// AccordionHeader.displayName = HEADER_NAME\n\n// /* -------------------------------------------------------------------------------------------------\n// * AccordionTrigger\n// * -----------------------------------------------------------------------------------------------*/\n\n// const TRIGGER_NAME = 'AccordionTrigger'\n\n// type AccordionTriggerElement = React.ElementRef<typeof CollapsiblePrimitive.Trigger>\n// type CollapsibleTriggerProps = Radix.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Trigger>\n// interface AccordionTriggerProps extends CollapsibleTriggerProps {}\n\n// /**\n// * `AccordionTrigger` is the trigger that toggles the collapsed state of an `AccordionItem`. It\n// * should always be nested inside of an `AccordionHeader`.\n// */\n// const AccordionTrigger = React.forwardRef<AccordionTriggerElement, AccordionTriggerProps>(\n// (props: ScopedProps<AccordionTriggerProps>, forwardedRef) => {\n// const { __scopeAccordion, ...triggerProps } = props\n// const itemContext = useAccordionItemContext(TRIGGER_NAME, __scopeAccordion)\n// const collapsibleContext = useAccordionCollapsibleContext(TRIGGER_NAME, __scopeAccordion)\n// const collapsibleScope = useCollapsibleScope(__scopeAccordion)\n// return (\n// <Collection.ItemSlot scope={__scopeAccordion}>\n// <CollapsiblePrimitive.Trigger\n// aria-disabled={(itemContext.open && !collapsibleContext.collapsible) || undefined}\n// id={itemContext.triggerId}\n// {...collapsibleScope}\n// {...triggerProps}\n// ref={forwardedRef}\n// />\n// </Collection.ItemSlot>\n// )\n// }\n// )\n\n// AccordionTrigger.displayName = TRIGGER_NAME\n\n// /* -------------------------------------------------------------------------------------------------\n// * AccordionContent\n// * -----------------------------------------------------------------------------------------------*/\n\n// const CONTENT_NAME = 'AccordionContent'\n\n// type AccordionContentElement = React.ElementRef<typeof CollapsiblePrimitive.Content>\n// type CollapsibleContentProps = Radix.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content>\n// interface AccordionContentProps extends CollapsibleContentProps {}\n\n// /**\n// * `AccordionContent` contains the collapsible content for an `AccordionItem`.\n// */\n// const AccordionContent = React.forwardRef<AccordionContentElement, AccordionContentProps>(\n// (props: ScopedProps<AccordionContentProps>, forwardedRef) => {\n// const { __scopeAccordion, ...contentProps } = props\n// const itemContext = useAccordionItemContext(CONTENT_NAME, __scopeAccordion)\n// const collapsibleScope = useCollapsibleScope(__scopeAccordion)\n// return (\n// <CollapsiblePrimitive.Content\n// role=\"region\"\n// aria-labelledby={itemContext.triggerId}\n// {...collapsibleScope}\n// {...contentProps}\n// ref={forwardedRef}\n// style={{\n// ['--radix-accordion-content-height' as any]: 'var(--radix-collapsible-content-height)',\n// ['--radix-accordion-content-width' as any]: 'var(--radix-collapsible-content-width)',\n// ...props.style,\n// }}\n// />\n// )\n// }\n// )\n\n// AccordionContent.displayName = CONTENT_NAME\n\n// /* -----------------------------------------------------------------------------------------------*/\n\n// function getState(open?: boolean) {\n// return open ? 'open' : 'closed'\n// }\n\n// const Root = Accordion\n// const Item = AccordionItem\n// const Header = AccordionHeader\n// const Trigger = AccordionTrigger\n// const Content = AccordionContent\n\n// export {\n// createAccordionScope,\n// //\n// Accordion,\n// AccordionItem,\n// AccordionHeader,\n// AccordionTrigger,\n// AccordionContent,\n// //\n// Root,\n// Item,\n// Header,\n// Trigger,\n// Content,\n// }\n// export type {\n// AccordionSingleProps,\n// AccordionMultipleProps,\n// AccordionItemProps,\n// AccordionHeaderProps,\n// AccordionTriggerProps,\n// AccordionContentProps,\n// }\n"],
|
|
5
|
+
"mappings": "AAAO,MAAM,YAAY,CAAC;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./Accordion";
|
package/package.json
ADDED
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@tamagui/accordion",
|
|
3
|
+
"version": "1.0.1-beta.65",
|
|
4
|
+
"sideEffects": true,
|
|
5
|
+
"source": "src/index.ts",
|
|
6
|
+
"types": "./types/index.d.ts",
|
|
7
|
+
"main": "dist/cjs",
|
|
8
|
+
"module": "dist/esm",
|
|
9
|
+
"module:jsx": "dist/jsx",
|
|
10
|
+
"files": [
|
|
11
|
+
"src",
|
|
12
|
+
"types",
|
|
13
|
+
"dist"
|
|
14
|
+
],
|
|
15
|
+
"scripts": {
|
|
16
|
+
"build": "tamagui-build",
|
|
17
|
+
"watch": "tamagui-build --watch"
|
|
18
|
+
},
|
|
19
|
+
"dependencies": {
|
|
20
|
+
"@gorhom/bottom-sheet": "^4.3.1",
|
|
21
|
+
"@tamagui/compose-refs": "^1.0.1-beta.65",
|
|
22
|
+
"@tamagui/core": "^1.0.1-beta.65",
|
|
23
|
+
"@tamagui/create-context": "^1.0.1-beta.65",
|
|
24
|
+
"@tamagui/polyfill-dev": "^1.0.1-beta.65",
|
|
25
|
+
"@tamagui/stacks": "^1.0.1-beta.65",
|
|
26
|
+
"@tamagui/use-controllable-state": "^1.0.1-beta.65",
|
|
27
|
+
"react-native-reanimated": "~2.8.0"
|
|
28
|
+
},
|
|
29
|
+
"peerDependencies": {
|
|
30
|
+
"react": "*",
|
|
31
|
+
"react-dom": "*",
|
|
32
|
+
"react-native-gesture-handler": "*"
|
|
33
|
+
},
|
|
34
|
+
"devDependencies": {
|
|
35
|
+
"@tamagui/build": "^1.0.1-beta.65",
|
|
36
|
+
"react": "*",
|
|
37
|
+
"react-dom": "*",
|
|
38
|
+
"react-native-gesture-handler": "*"
|
|
39
|
+
},
|
|
40
|
+
"publishConfig": {
|
|
41
|
+
"access": "public"
|
|
42
|
+
},
|
|
43
|
+
"gitHead": "a49cc7ea6b93ba384e77a4880ae48ac4a5635c14"
|
|
44
|
+
}
|
|
@@ -0,0 +1,491 @@
|
|
|
1
|
+
export const Accordion = {}
|
|
2
|
+
|
|
3
|
+
// import { useComposedRefs } from '@tamagui/compose-refs'
|
|
4
|
+
// import { Stack, StackProps, TamaguiElement, composeEventHandlers } from '@tamagui/core'
|
|
5
|
+
// import { useId } from '@tamagui/core'
|
|
6
|
+
// import { createContextScope } from '@tamagui/create-context'
|
|
7
|
+
// import type { Scope } from '@tamagui/create-context'
|
|
8
|
+
// import { useControllableState } from '@tamagui/use-controllable-state'
|
|
9
|
+
// import React from 'react'
|
|
10
|
+
|
|
11
|
+
// const COLLAPSIBLE_NAME = 'Collapsible'
|
|
12
|
+
|
|
13
|
+
// const [_createCollapsibleContext, createCollapsibleScope] = createContextScope(COLLAPSIBLE_NAME)
|
|
14
|
+
|
|
15
|
+
// /* -------------------------------------------------------------------------------------------------
|
|
16
|
+
// * Accordion
|
|
17
|
+
// * -----------------------------------------------------------------------------------------------*/
|
|
18
|
+
|
|
19
|
+
// const ACCORDION_NAME = 'Accordion'
|
|
20
|
+
// const ACCORDION_KEYS = ['Home', 'End', 'ArrowDown', 'ArrowUp']
|
|
21
|
+
|
|
22
|
+
// type ScopedProps<P> = P & { __scopeAccordion?: Scope }
|
|
23
|
+
// const [createAccordionContext, createAccordionScope] = createContextScope(ACCORDION_NAME, [
|
|
24
|
+
// createCollapsibleScope,
|
|
25
|
+
// ])
|
|
26
|
+
// const useCollapsibleScope = createCollapsibleScope()
|
|
27
|
+
|
|
28
|
+
// type AccordionElement = AccordionImplMultipleElement | AccordionImplSingleElement
|
|
29
|
+
// interface AccordionSingleProps extends AccordionImplSingleProps {
|
|
30
|
+
// type: 'single'
|
|
31
|
+
// }
|
|
32
|
+
// interface AccordionMultipleProps extends AccordionImplMultipleProps {
|
|
33
|
+
// type: 'multiple'
|
|
34
|
+
// }
|
|
35
|
+
|
|
36
|
+
// const Accordion = React.forwardRef<AccordionElement, AccordionSingleProps | AccordionMultipleProps>(
|
|
37
|
+
// (props: ScopedProps<AccordionSingleProps | AccordionMultipleProps>, forwardedRef) => {
|
|
38
|
+
// const { type, ...accordionProps } = props
|
|
39
|
+
// const singleProps = accordionProps as AccordionImplSingleProps
|
|
40
|
+
// const multipleProps = accordionProps as AccordionImplMultipleProps
|
|
41
|
+
// return (
|
|
42
|
+
// <>
|
|
43
|
+
// {type === 'multiple' ? (
|
|
44
|
+
// <AccordionImplMultiple {...multipleProps} ref={forwardedRef} />
|
|
45
|
+
// ) : (
|
|
46
|
+
// <AccordionImplSingle {...singleProps} ref={forwardedRef} />
|
|
47
|
+
// )}
|
|
48
|
+
// </>
|
|
49
|
+
// )
|
|
50
|
+
// }
|
|
51
|
+
// )
|
|
52
|
+
|
|
53
|
+
// Accordion.displayName = ACCORDION_NAME
|
|
54
|
+
|
|
55
|
+
// Accordion.propTypes = {
|
|
56
|
+
// type(props) {
|
|
57
|
+
// const value = props.value || props.defaultValue
|
|
58
|
+
// if (props.type && !['single', 'multiple'].includes(props.type)) {
|
|
59
|
+
// return new Error(
|
|
60
|
+
// 'Invalid prop `type` supplied to `Accordion`. Expected one of `single | multiple`.'
|
|
61
|
+
// )
|
|
62
|
+
// }
|
|
63
|
+
// if (props.type === 'multiple' && typeof value === 'string') {
|
|
64
|
+
// return new Error(
|
|
65
|
+
// 'Invalid prop `type` supplied to `Accordion`. Expected `single` when `defaultValue` or `value` is type `string`.'
|
|
66
|
+
// )
|
|
67
|
+
// }
|
|
68
|
+
// if (props.type === 'single' && Array.isArray(value)) {
|
|
69
|
+
// return new Error(
|
|
70
|
+
// 'Invalid prop `type` supplied to `Accordion`. Expected `multiple` when `defaultValue` or `value` is type `string[]`.'
|
|
71
|
+
// )
|
|
72
|
+
// }
|
|
73
|
+
// return null
|
|
74
|
+
// },
|
|
75
|
+
// }
|
|
76
|
+
|
|
77
|
+
// /* -----------------------------------------------------------------------------------------------*/
|
|
78
|
+
|
|
79
|
+
// type AccordionValueContextValue = {
|
|
80
|
+
// value: string[]
|
|
81
|
+
// onItemOpen(value: string): void
|
|
82
|
+
// onItemClose(value: string): void
|
|
83
|
+
// }
|
|
84
|
+
|
|
85
|
+
// const [AccordionValueProvider, useAccordionValueContext] =
|
|
86
|
+
// createAccordionContext<AccordionValueContextValue>(ACCORDION_NAME)
|
|
87
|
+
|
|
88
|
+
// const [AccordionCollapsibleProvider, useAccordionCollapsibleContext] = createAccordionContext(
|
|
89
|
+
// ACCORDION_NAME,
|
|
90
|
+
// { collapsible: false }
|
|
91
|
+
// )
|
|
92
|
+
|
|
93
|
+
// type AccordionImplSingleElement = AccordionImplElement
|
|
94
|
+
// interface AccordionImplSingleProps extends AccordionImplProps {
|
|
95
|
+
// /**
|
|
96
|
+
// * The controlled stateful value of the accordion item whose content is expanded.
|
|
97
|
+
// */
|
|
98
|
+
// value?: string
|
|
99
|
+
// /**
|
|
100
|
+
// * The value of the item whose content is expanded when the accordion is initially rendered. Use
|
|
101
|
+
// * `defaultValue` if you do not need to control the state of an accordion.
|
|
102
|
+
// */
|
|
103
|
+
// defaultValue?: string
|
|
104
|
+
// /**
|
|
105
|
+
// * The callback that fires when the state of the accordion changes.
|
|
106
|
+
// */
|
|
107
|
+
// onValueChange?(value: string): void
|
|
108
|
+
// /**
|
|
109
|
+
// * Whether an accordion item can be collapsed after it has been opened.
|
|
110
|
+
// * @default false
|
|
111
|
+
// */
|
|
112
|
+
// collapsible?: boolean
|
|
113
|
+
// }
|
|
114
|
+
|
|
115
|
+
// const AccordionImplSingle = React.forwardRef<AccordionImplSingleElement, AccordionImplSingleProps>(
|
|
116
|
+
// (props: ScopedProps<AccordionImplSingleProps>, forwardedRef) => {
|
|
117
|
+
// const {
|
|
118
|
+
// value: valueProp,
|
|
119
|
+
// defaultValue,
|
|
120
|
+
// onValueChange = () => {},
|
|
121
|
+
// collapsible = false,
|
|
122
|
+
// ...accordionSingleProps
|
|
123
|
+
// } = props
|
|
124
|
+
|
|
125
|
+
// const [value, setValue] = useControllableState({
|
|
126
|
+
// prop: valueProp,
|
|
127
|
+
// defaultProp: defaultValue || '',
|
|
128
|
+
// onChange: onValueChange,
|
|
129
|
+
// })
|
|
130
|
+
|
|
131
|
+
// return (
|
|
132
|
+
// <AccordionValueProvider
|
|
133
|
+
// scope={props.__scopeAccordion}
|
|
134
|
+
// value={value ? [value] : []}
|
|
135
|
+
// onItemOpen={setValue}
|
|
136
|
+
// onItemClose={React.useCallback(() => collapsible && setValue(''), [collapsible, setValue])}
|
|
137
|
+
// >
|
|
138
|
+
// <AccordionCollapsibleProvider scope={props.__scopeAccordion} collapsible={collapsible}>
|
|
139
|
+
// <AccordionImpl {...accordionSingleProps} ref={forwardedRef} />
|
|
140
|
+
// </AccordionCollapsibleProvider>
|
|
141
|
+
// </AccordionValueProvider>
|
|
142
|
+
// )
|
|
143
|
+
// }
|
|
144
|
+
// )
|
|
145
|
+
|
|
146
|
+
// /* -----------------------------------------------------------------------------------------------*/
|
|
147
|
+
|
|
148
|
+
// type AccordionImplMultipleElement = AccordionImplElement
|
|
149
|
+
// interface AccordionImplMultipleProps extends AccordionImplProps {
|
|
150
|
+
// /**
|
|
151
|
+
// * The controlled stateful value of the accordion items whose contents are expanded.
|
|
152
|
+
// */
|
|
153
|
+
// value?: string[]
|
|
154
|
+
// /**
|
|
155
|
+
// * The value of the items whose contents are expanded when the accordion is initially rendered. Use
|
|
156
|
+
// * `defaultValue` if you do not need to control the state of an accordion.
|
|
157
|
+
// */
|
|
158
|
+
// defaultValue?: string[]
|
|
159
|
+
// /**
|
|
160
|
+
// * The callback that fires when the state of the accordion changes.
|
|
161
|
+
// */
|
|
162
|
+
// onValueChange?(value: string[]): void
|
|
163
|
+
// }
|
|
164
|
+
|
|
165
|
+
// const AccordionImplMultiple = React.forwardRef<
|
|
166
|
+
// AccordionImplMultipleElement,
|
|
167
|
+
// AccordionImplMultipleProps
|
|
168
|
+
// >((props: ScopedProps<AccordionImplMultipleProps>, forwardedRef) => {
|
|
169
|
+
// const {
|
|
170
|
+
// value: valueProp,
|
|
171
|
+
// defaultValue,
|
|
172
|
+
// onValueChange = () => {},
|
|
173
|
+
// ...accordionMultipleProps
|
|
174
|
+
// } = props
|
|
175
|
+
|
|
176
|
+
// const [value, setValue] = useControllableState({
|
|
177
|
+
// prop: valueProp,
|
|
178
|
+
// defaultProp: defaultValue || [],
|
|
179
|
+
// onChange: onValueChange,
|
|
180
|
+
// })
|
|
181
|
+
|
|
182
|
+
// const handleItemOpen = React.useCallback(
|
|
183
|
+
// (itemValue: string) => setValue((prevValue = []) => [...prevValue, itemValue]),
|
|
184
|
+
// [setValue]
|
|
185
|
+
// )
|
|
186
|
+
|
|
187
|
+
// const handleItemClose = React.useCallback(
|
|
188
|
+
// (itemValue: string) =>
|
|
189
|
+
// setValue((prevValue = []) => prevValue.filter((value) => value !== itemValue)),
|
|
190
|
+
// [setValue]
|
|
191
|
+
// )
|
|
192
|
+
|
|
193
|
+
// return (
|
|
194
|
+
// <AccordionValueProvider
|
|
195
|
+
// scope={props.__scopeAccordion}
|
|
196
|
+
// value={value}
|
|
197
|
+
// onItemOpen={handleItemOpen}
|
|
198
|
+
// onItemClose={handleItemClose}
|
|
199
|
+
// >
|
|
200
|
+
// <AccordionCollapsibleProvider scope={props.__scopeAccordion} collapsible={true}>
|
|
201
|
+
// <AccordionImpl {...accordionMultipleProps} ref={forwardedRef} />
|
|
202
|
+
// </AccordionCollapsibleProvider>
|
|
203
|
+
// </AccordionValueProvider>
|
|
204
|
+
// )
|
|
205
|
+
// })
|
|
206
|
+
|
|
207
|
+
// /* -----------------------------------------------------------------------------------------------*/
|
|
208
|
+
|
|
209
|
+
// type AccordionImplContextValue = {
|
|
210
|
+
// disabled?: boolean
|
|
211
|
+
// }
|
|
212
|
+
|
|
213
|
+
// const [AccordionImplProvider, useAccordionContext] =
|
|
214
|
+
// createAccordionContext<AccordionImplContextValue>(ACCORDION_NAME)
|
|
215
|
+
|
|
216
|
+
// type AccordionImplElement = TamaguiElement
|
|
217
|
+
// type PrimitiveDivProps = StackProps
|
|
218
|
+
|
|
219
|
+
// interface AccordionImplProps extends PrimitiveDivProps {
|
|
220
|
+
// /**
|
|
221
|
+
// * Whether or not an accordion is disabled from user interaction.
|
|
222
|
+
// *
|
|
223
|
+
// * @defaultValue false
|
|
224
|
+
// */
|
|
225
|
+
// disabled?: boolean
|
|
226
|
+
// }
|
|
227
|
+
|
|
228
|
+
// const AccordionImpl = React.forwardRef<AccordionImplElement, AccordionImplProps>(
|
|
229
|
+
// (props: ScopedProps<AccordionImplProps>, forwardedRef) => {
|
|
230
|
+
// const { __scopeAccordion, disabled, ...accordionProps } = props
|
|
231
|
+
// const accordionRef = React.useRef<AccordionImplElement>(null)
|
|
232
|
+
// const composedRefs = useComposedRefs(accordionRef, forwardedRef)
|
|
233
|
+
// // const getItems = useCollection(__scopeAccordion)
|
|
234
|
+
|
|
235
|
+
// const handleKeyDown = (event: KeyboardEvent) => {
|
|
236
|
+
// if (!ACCORDION_KEYS.includes(event.key)) return
|
|
237
|
+
// const target = event.target as HTMLElement
|
|
238
|
+
// const triggerCollection = [] //getItems().filter((item) => !item.ref.current?.disabled)
|
|
239
|
+
// const triggerIndex = triggerCollection.findIndex((item) => item.ref.current === target)
|
|
240
|
+
// const triggerCount = triggerCollection.length
|
|
241
|
+
|
|
242
|
+
// if (triggerIndex === -1) return
|
|
243
|
+
|
|
244
|
+
// // Prevents page scroll while user is navigating
|
|
245
|
+
// event.preventDefault()
|
|
246
|
+
|
|
247
|
+
// let nextIndex = triggerIndex
|
|
248
|
+
// switch (event.key) {
|
|
249
|
+
// case 'Home':
|
|
250
|
+
// nextIndex = 0
|
|
251
|
+
// break
|
|
252
|
+
// case 'End':
|
|
253
|
+
// nextIndex = triggerCount - 1
|
|
254
|
+
// break
|
|
255
|
+
// case 'ArrowDown':
|
|
256
|
+
// nextIndex = triggerIndex + 1
|
|
257
|
+
// break
|
|
258
|
+
// case 'ArrowUp':
|
|
259
|
+
// nextIndex = triggerIndex - 1
|
|
260
|
+
// if (nextIndex < 0) {
|
|
261
|
+
// nextIndex = triggerCount - 1
|
|
262
|
+
// }
|
|
263
|
+
// break
|
|
264
|
+
// }
|
|
265
|
+
|
|
266
|
+
// const clampedIndex = nextIndex % triggerCount
|
|
267
|
+
// triggerCollection[clampedIndex].ref.current?.focus()
|
|
268
|
+
// }
|
|
269
|
+
|
|
270
|
+
// return (
|
|
271
|
+
// <AccordionImplProvider scope={__scopeAccordion} disabled={disabled}>
|
|
272
|
+
// <Stack
|
|
273
|
+
// {...accordionProps}
|
|
274
|
+
// // @ts-ignore
|
|
275
|
+
// ref={composedRefs}
|
|
276
|
+
// // @ts-ignore
|
|
277
|
+
// onKeyDown={disabled ? undefined : handleKeyDown}
|
|
278
|
+
// />
|
|
279
|
+
// </AccordionImplProvider>
|
|
280
|
+
// )
|
|
281
|
+
// }
|
|
282
|
+
// )
|
|
283
|
+
|
|
284
|
+
// /* -------------------------------------------------------------------------------------------------
|
|
285
|
+
// * AccordionItem
|
|
286
|
+
// * -----------------------------------------------------------------------------------------------*/
|
|
287
|
+
|
|
288
|
+
// const ITEM_NAME = 'AccordionItem'
|
|
289
|
+
|
|
290
|
+
// type AccordionItemContextValue = { open?: boolean; disabled?: boolean; triggerId: string }
|
|
291
|
+
// const [AccordionItemProvider, useAccordionItemContext] =
|
|
292
|
+
// createAccordionContext<AccordionItemContextValue>(ITEM_NAME)
|
|
293
|
+
|
|
294
|
+
// type AccordionItemElement = TamaguiElement
|
|
295
|
+
// type CollapsibleProps = Radix.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root>
|
|
296
|
+
|
|
297
|
+
// interface AccordionItemProps
|
|
298
|
+
// extends Omit<CollapsibleProps, 'open' | 'defaultOpen' | 'onOpenChange'> {
|
|
299
|
+
// /**
|
|
300
|
+
// * Whether or not an accordion item is disabled from user interaction.
|
|
301
|
+
// *
|
|
302
|
+
// * @defaultValue false
|
|
303
|
+
// */
|
|
304
|
+
// disabled?: boolean
|
|
305
|
+
// /**
|
|
306
|
+
// * A string value for the accordion item. All items within an accordion should use a unique value.
|
|
307
|
+
// */
|
|
308
|
+
// value: string
|
|
309
|
+
// }
|
|
310
|
+
|
|
311
|
+
// /**
|
|
312
|
+
// * `AccordionItem` contains all of the parts of a collapsible section inside of an `Accordion`.
|
|
313
|
+
// */
|
|
314
|
+
// const AccordionItem = React.forwardRef<AccordionItemElement, AccordionItemProps>(
|
|
315
|
+
// (props: ScopedProps<AccordionItemProps>, forwardedRef) => {
|
|
316
|
+
// const { __scopeAccordion, value, ...accordionItemProps } = props
|
|
317
|
+
// const accordionContext = useAccordionContext(ITEM_NAME, __scopeAccordion)
|
|
318
|
+
// const valueContext = useAccordionValueContext(ITEM_NAME, __scopeAccordion)
|
|
319
|
+
// const collapsibleScope = useCollapsibleScope(__scopeAccordion)
|
|
320
|
+
// const triggerId = useId()
|
|
321
|
+
// const open = (value && valueContext.value.includes(value)) || false
|
|
322
|
+
// const disabled = accordionContext.disabled || props.disabled
|
|
323
|
+
|
|
324
|
+
// return (
|
|
325
|
+
// <AccordionItemProvider
|
|
326
|
+
// scope={__scopeAccordion}
|
|
327
|
+
// open={open}
|
|
328
|
+
// disabled={disabled}
|
|
329
|
+
// triggerId={triggerId}
|
|
330
|
+
// >
|
|
331
|
+
// <CollapsiblePrimitive.Root
|
|
332
|
+
// data-state={open ? 'open' : 'closed'}
|
|
333
|
+
// {...collapsibleScope}
|
|
334
|
+
// {...accordionItemProps}
|
|
335
|
+
// ref={forwardedRef}
|
|
336
|
+
// disabled={disabled}
|
|
337
|
+
// open={open}
|
|
338
|
+
// onOpenChange={(open) => {
|
|
339
|
+
// if (open) {
|
|
340
|
+
// valueContext.onItemOpen(value)
|
|
341
|
+
// } else {
|
|
342
|
+
// valueContext.onItemClose(value)
|
|
343
|
+
// }
|
|
344
|
+
// }}
|
|
345
|
+
// />
|
|
346
|
+
// </AccordionItemProvider>
|
|
347
|
+
// )
|
|
348
|
+
// }
|
|
349
|
+
// )
|
|
350
|
+
|
|
351
|
+
// AccordionItem.displayName = ITEM_NAME
|
|
352
|
+
|
|
353
|
+
// /* -------------------------------------------------------------------------------------------------
|
|
354
|
+
// * AccordionHeader
|
|
355
|
+
// * -----------------------------------------------------------------------------------------------*/
|
|
356
|
+
|
|
357
|
+
// const HEADER_NAME = 'AccordionHeader'
|
|
358
|
+
|
|
359
|
+
// type AccordionHeaderElement = React.ElementRef<typeof Primitive.h3>
|
|
360
|
+
// type PrimitiveHeading3Props = Radix.ComponentPropsWithoutRef<typeof Primitive.h3>
|
|
361
|
+
// interface AccordionHeaderProps extends PrimitiveHeading3Props {}
|
|
362
|
+
|
|
363
|
+
// /**
|
|
364
|
+
// * `AccordionHeader` contains the content for the parts of an `AccordionItem` that will be visible
|
|
365
|
+
// * whether or not its content is collapsed.
|
|
366
|
+
// */
|
|
367
|
+
// const AccordionHeader = React.forwardRef<AccordionHeaderElement, AccordionHeaderProps>(
|
|
368
|
+
// (props: ScopedProps<AccordionHeaderProps>, forwardedRef) => {
|
|
369
|
+
// const { __scopeAccordion, ...headerProps } = props
|
|
370
|
+
// const itemContext = useAccordionItemContext(HEADER_NAME, __scopeAccordion)
|
|
371
|
+
// return (
|
|
372
|
+
// <Primitive.h3
|
|
373
|
+
// data-state={getState(itemContext.open)}
|
|
374
|
+
// data-disabled={itemContext.disabled ? '' : undefined}
|
|
375
|
+
// {...headerProps}
|
|
376
|
+
// ref={forwardedRef}
|
|
377
|
+
// />
|
|
378
|
+
// )
|
|
379
|
+
// }
|
|
380
|
+
// )
|
|
381
|
+
|
|
382
|
+
// AccordionHeader.displayName = HEADER_NAME
|
|
383
|
+
|
|
384
|
+
// /* -------------------------------------------------------------------------------------------------
|
|
385
|
+
// * AccordionTrigger
|
|
386
|
+
// * -----------------------------------------------------------------------------------------------*/
|
|
387
|
+
|
|
388
|
+
// const TRIGGER_NAME = 'AccordionTrigger'
|
|
389
|
+
|
|
390
|
+
// type AccordionTriggerElement = React.ElementRef<typeof CollapsiblePrimitive.Trigger>
|
|
391
|
+
// type CollapsibleTriggerProps = Radix.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Trigger>
|
|
392
|
+
// interface AccordionTriggerProps extends CollapsibleTriggerProps {}
|
|
393
|
+
|
|
394
|
+
// /**
|
|
395
|
+
// * `AccordionTrigger` is the trigger that toggles the collapsed state of an `AccordionItem`. It
|
|
396
|
+
// * should always be nested inside of an `AccordionHeader`.
|
|
397
|
+
// */
|
|
398
|
+
// const AccordionTrigger = React.forwardRef<AccordionTriggerElement, AccordionTriggerProps>(
|
|
399
|
+
// (props: ScopedProps<AccordionTriggerProps>, forwardedRef) => {
|
|
400
|
+
// const { __scopeAccordion, ...triggerProps } = props
|
|
401
|
+
// const itemContext = useAccordionItemContext(TRIGGER_NAME, __scopeAccordion)
|
|
402
|
+
// const collapsibleContext = useAccordionCollapsibleContext(TRIGGER_NAME, __scopeAccordion)
|
|
403
|
+
// const collapsibleScope = useCollapsibleScope(__scopeAccordion)
|
|
404
|
+
// return (
|
|
405
|
+
// <Collection.ItemSlot scope={__scopeAccordion}>
|
|
406
|
+
// <CollapsiblePrimitive.Trigger
|
|
407
|
+
// aria-disabled={(itemContext.open && !collapsibleContext.collapsible) || undefined}
|
|
408
|
+
// id={itemContext.triggerId}
|
|
409
|
+
// {...collapsibleScope}
|
|
410
|
+
// {...triggerProps}
|
|
411
|
+
// ref={forwardedRef}
|
|
412
|
+
// />
|
|
413
|
+
// </Collection.ItemSlot>
|
|
414
|
+
// )
|
|
415
|
+
// }
|
|
416
|
+
// )
|
|
417
|
+
|
|
418
|
+
// AccordionTrigger.displayName = TRIGGER_NAME
|
|
419
|
+
|
|
420
|
+
// /* -------------------------------------------------------------------------------------------------
|
|
421
|
+
// * AccordionContent
|
|
422
|
+
// * -----------------------------------------------------------------------------------------------*/
|
|
423
|
+
|
|
424
|
+
// const CONTENT_NAME = 'AccordionContent'
|
|
425
|
+
|
|
426
|
+
// type AccordionContentElement = React.ElementRef<typeof CollapsiblePrimitive.Content>
|
|
427
|
+
// type CollapsibleContentProps = Radix.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content>
|
|
428
|
+
// interface AccordionContentProps extends CollapsibleContentProps {}
|
|
429
|
+
|
|
430
|
+
// /**
|
|
431
|
+
// * `AccordionContent` contains the collapsible content for an `AccordionItem`.
|
|
432
|
+
// */
|
|
433
|
+
// const AccordionContent = React.forwardRef<AccordionContentElement, AccordionContentProps>(
|
|
434
|
+
// (props: ScopedProps<AccordionContentProps>, forwardedRef) => {
|
|
435
|
+
// const { __scopeAccordion, ...contentProps } = props
|
|
436
|
+
// const itemContext = useAccordionItemContext(CONTENT_NAME, __scopeAccordion)
|
|
437
|
+
// const collapsibleScope = useCollapsibleScope(__scopeAccordion)
|
|
438
|
+
// return (
|
|
439
|
+
// <CollapsiblePrimitive.Content
|
|
440
|
+
// role="region"
|
|
441
|
+
// aria-labelledby={itemContext.triggerId}
|
|
442
|
+
// {...collapsibleScope}
|
|
443
|
+
// {...contentProps}
|
|
444
|
+
// ref={forwardedRef}
|
|
445
|
+
// style={{
|
|
446
|
+
// ['--radix-accordion-content-height' as any]: 'var(--radix-collapsible-content-height)',
|
|
447
|
+
// ['--radix-accordion-content-width' as any]: 'var(--radix-collapsible-content-width)',
|
|
448
|
+
// ...props.style,
|
|
449
|
+
// }}
|
|
450
|
+
// />
|
|
451
|
+
// )
|
|
452
|
+
// }
|
|
453
|
+
// )
|
|
454
|
+
|
|
455
|
+
// AccordionContent.displayName = CONTENT_NAME
|
|
456
|
+
|
|
457
|
+
// /* -----------------------------------------------------------------------------------------------*/
|
|
458
|
+
|
|
459
|
+
// function getState(open?: boolean) {
|
|
460
|
+
// return open ? 'open' : 'closed'
|
|
461
|
+
// }
|
|
462
|
+
|
|
463
|
+
// const Root = Accordion
|
|
464
|
+
// const Item = AccordionItem
|
|
465
|
+
// const Header = AccordionHeader
|
|
466
|
+
// const Trigger = AccordionTrigger
|
|
467
|
+
// const Content = AccordionContent
|
|
468
|
+
|
|
469
|
+
// export {
|
|
470
|
+
// createAccordionScope,
|
|
471
|
+
// //
|
|
472
|
+
// Accordion,
|
|
473
|
+
// AccordionItem,
|
|
474
|
+
// AccordionHeader,
|
|
475
|
+
// AccordionTrigger,
|
|
476
|
+
// AccordionContent,
|
|
477
|
+
// //
|
|
478
|
+
// Root,
|
|
479
|
+
// Item,
|
|
480
|
+
// Header,
|
|
481
|
+
// Trigger,
|
|
482
|
+
// Content,
|
|
483
|
+
// }
|
|
484
|
+
// export type {
|
|
485
|
+
// AccordionSingleProps,
|
|
486
|
+
// AccordionMultipleProps,
|
|
487
|
+
// AccordionItemProps,
|
|
488
|
+
// AccordionHeaderProps,
|
|
489
|
+
// AccordionTriggerProps,
|
|
490
|
+
// AccordionContentProps,
|
|
491
|
+
// }
|
package/src/index.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Accordion'
|