@sproutsocial/seeds-react-accordion 0.4.31 → 0.4.46
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/accordion.css +159 -0
- package/dist/esm/index.js +236 -78
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.mts +21 -10
- package/dist/index.d.ts +21 -10
- package/dist/index.js +235 -79
- package/dist/index.js.map +1 -1
- package/package.json +21 -10
- package/.eslintignore +0 -6
- package/.eslintrc.js +0 -4
- package/.turbo/turbo-build.log +0 -21
- package/CHANGELOG.md +0 -519
- package/jest.config.js +0 -9
- package/src/Accordion.stories.tsx +0 -844
- package/src/Accordion.tsx +0 -83
- package/src/AccordionContent.tsx +0 -23
- package/src/AccordionItem.tsx +0 -11
- package/src/AccordionTrigger.tsx +0 -161
- package/src/AccordionTypes.ts +0 -80
- package/src/__tests__/accordion.test.tsx +0 -536
- package/src/index.ts +0 -7
- package/src/styled.d.ts +0 -7
- package/src/styles.ts +0 -164
- package/tsconfig.json +0 -9
- package/tsup.config.ts +0 -12
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Accordion.tsx","../../src/AccordionTypes.ts","../../src/AccordionItem.tsx","../../src/styles.ts","../../src/AccordionContent.tsx","../../src/AccordionTrigger.tsx"],"sourcesContent":["import React, { createContext, type ReactElement } from \"react\";\nimport * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport { type TypeAccordionProps } from \"./AccordionTypes\";\n\nexport const AccordionContext = createContext<{\n triggerIcon: ReactElement | null;\n triggerPosition: string;\n styled: boolean;\n}>({\n triggerIcon: null,\n triggerPosition: \"\",\n styled: false,\n});\n\nexport const Accordion = ({\n children,\n collapsible,\n defaultValue = [\"item-0\"],\n triggerPosition = \"right\",\n triggerIcon = <Icon className=\"triggerIcon\" name=\"chevron-down-outline\" />,\n type = \"multiple\",\n styled = true,\n value,\n onValueChange,\n}: TypeAccordionProps) => {\n const contextValue = {\n triggerIcon: React.isValidElement(triggerIcon) ? triggerIcon : null,\n triggerPosition,\n styled,\n };\n\n if (type === \"single\") {\n // Determine if controlled or uncontrolled\n const isControlled = value !== undefined;\n\n return (\n <RadixAccordion.Root\n type=\"single\"\n value={\n isControlled ? (Array.isArray(value) ? value[0] : value) : undefined\n }\n defaultValue={\n !isControlled && defaultValue\n ? Array.isArray(defaultValue)\n ? defaultValue[0]\n : defaultValue\n : undefined\n }\n onValueChange={onValueChange as ((value: string) => void) | undefined}\n collapsible={collapsible}\n >\n <AccordionContext.Provider value={contextValue}>\n {children}\n </AccordionContext.Provider>\n </RadixAccordion.Root>\n );\n }\n\n // Multiple mode\n const isControlled = value !== undefined;\n\n return (\n <RadixAccordion.Root\n type=\"multiple\"\n value={\n isControlled ? (Array.isArray(value) ? value : [value]) : undefined\n }\n defaultValue={\n !isControlled && defaultValue\n ? Array.isArray(defaultValue)\n ? defaultValue\n : [defaultValue]\n : undefined\n }\n onValueChange={onValueChange as ((value: string[]) => void) | undefined}\n >\n <AccordionContext.Provider value={contextValue}>\n {children}\n </AccordionContext.Provider>\n </RadixAccordion.Root>\n );\n};\n","import * as React from \"react\";\nimport {\n type TypeSystemCommonProps,\n type TypeBorderSystemProps,\n type TypeFlexboxSystemProps,\n type TypeLayoutSystemProps,\n type TypeStyledComponentsCommonProps,\n type TypeSystemTypographyProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { type TypeIconName } from \"@sproutsocial/seeds-react-icon\";\nimport { type TypeMenuItemProps } from \"@sproutsocial/seeds-react-menu\";\nimport { type TypeHeadingLevel } from \"@sproutsocial/seeds-react-content-header\";\n\nexport interface TypeAccordionSystemProps\n extends Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\">,\n TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n TypeBorderSystemProps,\n TypeFlexboxSystemProps,\n TypeLayoutSystemProps,\n TypeSystemTypographyProps {}\n\nexport interface TypeAccordionProps {\n children?: React.ReactNode;\n collapsible?: boolean;\n defaultValue?: string | string[];\n triggerIcon?: React.ReactNode;\n triggerPosition?: \"left\" | \"right\";\n type?: \"single\" | \"multiple\";\n styled?: boolean;\n /** Controlled value for open accordion items (single mode: string, multiple mode: string[]) */\n value?: string | string[];\n /** Callback fired when accordion items change (single mode: string, multiple mode: string[]) */\n onValueChange?: (value: string | string[]) => void;\n}\n\nexport interface TypeRelatedAction {\n iconName: TypeIconName;\n onClick: () => void;\n \"aria-label\": string;\n}\n\nexport interface TypeOverflowMenuItem extends TypeMenuItemProps {\n iconName?: TypeIconName;\n}\n\nexport interface TypeOverflowMenuConfig {\n /** Menu items to be rendered in the overflow menu */\n items: TypeOverflowMenuItem[];\n /** Aria label for the overflow menu trigger button. Defaults to \"More actions\" */\n \"aria-label\"?: string;\n}\n\nexport interface TypeAccordionItemProps {\n children: React.ReactNode;\n relatedActions?: TypeRelatedAction[];\n overflowMenu?: TypeOverflowMenuConfig;\n value: string;\n}\n\n/**\n * Props for AccordionTrigger component\n *\n * @example\n * ```tsx\n * <AccordionTrigger\n * title=\"My Accordion Title\"\n * headingLevel=\"h2\"\n * />\n * ```\n */\nexport interface TypeAccordionTriggerProps extends TypeAccordionSystemProps {\n title: string;\n leftSlot?: React.ReactNode;\n relatedActions?: TypeRelatedAction[];\n overflowMenu?: TypeOverflowMenuConfig;\n rightSlot?: React.ReactNode;\n /** The semantic heading level for the accordion title. Defaults to \"h4\" */\n headingLevel?: TypeHeadingLevel;\n}\n","import * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { type TypeAccordionItemProps } from \"./AccordionTypes\";\nimport { StyledAccordionItem } from \"./styles\";\n\nexport const AccordionItem = ({ children, value }: TypeAccordionItemProps) => {\n return (\n <StyledAccordionItem className=\"accordion-item\" value={value}>\n {children}\n </StyledAccordionItem>\n );\n};\n","import styled, { css } from \"styled-components\";\nimport * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport {\n BORDER,\n COMMON,\n FLEXBOX,\n LAYOUT,\n TYPOGRAPHY,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { type TypeAccordionSystemProps } from \"./AccordionTypes\";\n\ninterface StyledAccordionProps extends TypeAccordionSystemProps {\n $styled?: boolean;\n}\n\nexport const StyledAccordionItem = styled(RadixAccordion.Item)``;\n\nconst animations = css`\n @keyframes slideDown {\n from {\n height: 0;\n }\n to {\n height: var(--radix-accordion-content-height);\n }\n }\n\n @keyframes slideUp {\n from {\n height: var(--radix-accordion-content-height);\n }\n to {\n height: 0;\n }\n }\n`;\n\nexport const StyledRadixAccordionContent = styled(\n RadixAccordion.Content\n)<StyledAccordionProps>`\n ${animations}\n\n overflow: hidden;\n\n &[data-state=\"open\"] {\n animation: slideDown 300ms ease-in-out;\n }\n\n &[data-state=\"closed\"] {\n animation: slideUp 300ms ease-in-out;\n }\n\n &[data-styled=\"true\"] {\n border-left: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n border-right: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n background: ${({ theme }) => theme.colors.container.background.base};\n }\n\n .accordion-item:last-child[data-state=\"open\"] &[data-styled=\"true\"],\n .accordion-item:last-child[data-state=\"closed\"] &[data-styled=\"true\"] {\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n border-bottom-left-radius: ${({ theme }) => theme.radii.outer};\n border-bottom-right-radius: ${({ theme }) => theme.radii.outer};\n }\n`;\n\nexport const ContentContainer = styled.div<StyledAccordionProps>`\n color: ${({ theme }) => theme.colors.text.body};\n background: transparent;\n font-family: ${({ theme }) => theme.fontFamily};\n\n &[data-styled=\"true\"] {\n padding: ${({ theme }) => theme.space[400]};\n ${({ theme }) => theme.typography[200]};\n }\n\n .accordion-item:last-child[data-state=\"open\"] &[data-styled=\"true\"],\n .accordion-item:last-child[data-state=\"closed\"] &[data-styled=\"true\"] {\n border-bottom-left-radius: ${({ theme }) => theme.radii.outer};\n border-bottom-right-radius: ${({ theme }) => theme.radii.outer};\n }\n\n ${COMMON}\n ${TYPOGRAPHY}\n ${BORDER}\n\t${LAYOUT}\n\t${FLEXBOX}\n`;\n\nexport const TriggerContainer = styled.div<StyledAccordionProps>`\n display: flex;\n align-items: center;\n color: ${({ theme }) => theme.colors.text.body};\n ${({ theme }) => theme.typography[200]};\n\n /* Override Text.Headline styles to match original accordion trigger typography */\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-size: inherit;\n font-weight: normal;\n line-height: inherit;\n color: inherit;\n }\n\n &[data-styled=\"true\"] {\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n color: ${({ theme }) => theme.colors.text.headline};\n }\n }\n\n ${({ $styled, theme }) =>\n $styled &&\n `\n border-top: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};\n border-left: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};\n border-right: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};\n background: ${theme.colors.container.background.base};\n `}\n\n .accordion-item[data-state=\"open\"] &[data-styled=\"true\"] {\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n }\n\n .accordion-item[data-state=\"closed\"] &[data-styled=\"true\"] {\n transition: border-bottom-color 0s ease-in-out 0.3s;\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid transparent`};\n }\n\n .accordion-item:first-child &[data-styled=\"true\"] {\n border-top-left-radius: ${({ theme }) => theme.radii.outer};\n border-top-right-radius: ${({ theme }) => theme.radii.outer};\n }\n\n .accordion-item:last-child &[data-styled=\"true\"] {\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n }\n\n .accordion-item:last-child[data-state=\"closed\"] &[data-styled=\"true\"] {\n transition: border-radius 0s linear 0.3s;\n border-bottom-left-radius: ${({ theme }) => theme.radii.outer};\n border-bottom-right-radius: ${({ theme }) => theme.radii.outer};\n }\n\n ${COMMON}\n ${BORDER}\n\t${LAYOUT}\n\t${FLEXBOX}\n`;\n","import { StyledRadixAccordionContent, ContentContainer } from \"./styles\";\nimport { type TypeAccordionSystemProps } from \"./AccordionTypes\";\nimport { AccordionContext } from \"./Accordion\";\nimport { useContext } from \"react\";\n\ninterface TypeAccordionContentProps extends TypeAccordionSystemProps {\n children?: React.ReactNode;\n}\n\nexport const AccordionContent = ({\n children,\n ...rest\n}: TypeAccordionContentProps) => {\n const { styled } = useContext(AccordionContext);\n\n return (\n <StyledRadixAccordionContent data-styled={styled}>\n <ContentContainer data-styled={styled} {...rest}>\n {children}\n </ContentContainer>\n </StyledRadixAccordionContent>\n );\n};\n","import { TriggerContainer } from \"./styles\";\nimport { type TypeAccordionTriggerProps } from \"./AccordionTypes\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport { Button } from \"@sproutsocial/seeds-react-button\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport {\n ActionMenu,\n MenuContent,\n MenuItem,\n MenuGroup,\n MenuToggleButton,\n} from \"@sproutsocial/seeds-react-menu\";\nimport React, { useContext } from \"react\";\nimport { AccordionContext } from \"./Accordion\";\nimport { CollapsibleContentHeader } from \"@sproutsocial/seeds-react-content-header\";\nimport * as RadixAccordion from \"@radix-ui/react-accordion\";\n\nconst MAX_RELATED_ACTIONS = 2;\n\n// Wrapper to adapt RadixAccordion.Trigger to the ContentHeader trigger interface\nconst AccordionTriggerWrapper = ({\n children,\n}: {\n children: React.ReactElement;\n}) => <RadixAccordion.Trigger asChild>{children}</RadixAccordion.Trigger>;\n\nexport const AccordionTrigger = ({\n children,\n leftSlot,\n relatedActions,\n overflowMenu,\n rightSlot,\n title,\n headingLevel = \"h4\",\n ...rest\n}: TypeAccordionTriggerProps) => {\n const { triggerIcon, triggerPosition, styled } = useContext(AccordionContext);\n\n // Validate and limit related actions\n const validatedActions = relatedActions?.slice(0, MAX_RELATED_ACTIONS);\n\n // Extract system props to distribute to appropriate container\n const {\n color,\n padding,\n paddingBottom,\n paddingTop,\n paddingX,\n paddingY,\n paddingLeft,\n paddingRight,\n p,\n pb,\n pt,\n pr,\n pl,\n px,\n py,\n fontFamily,\n fontSize,\n fontStyle,\n fontWeight,\n lineHeight,\n textAlign,\n ...triggerProps\n } = rest;\n\n const shouldRenderActionsBlock = Boolean(overflowMenu || validatedActions);\n\n // Render overflow menu from config\n const renderedOverflowMenu = overflowMenu && (\n <ActionMenu\n menuToggleElement={\n <MenuToggleButton\n aria-label={overflowMenu[\"aria-label\"]}\n appearance=\"unstyled\"\n color={color}\n >\n <Icon name=\"ellipsis-horizontal-outline\" aria-hidden=\"true\" />\n </MenuToggleButton>\n }\n >\n <MenuContent>\n <MenuGroup id=\"overflow-actions\">\n {overflowMenu.items.map((item, index) => {\n const { iconName, id, onClick, children, ...menuItemProps } = item;\n return (\n <MenuItem\n key={id || `overflow-item-${index}`}\n id={id || `overflow-item-${index}`}\n onClick={onClick}\n {...menuItemProps}\n >\n {iconName ? (\n <Box\n display=\"flex\"\n alignItems=\"center\"\n gap=\"300\"\n color={color}\n >\n <Icon name={iconName} />\n {children}\n </Box>\n ) : (\n children\n )}\n </MenuItem>\n );\n })}\n </MenuGroup>\n </MenuContent>\n </ActionMenu>\n );\n\n // Render related actions from config\n const renderedRelatedActions = validatedActions &&\n validatedActions.length > 0 && (\n <Box display=\"flex\">\n {validatedActions.map((action, index) => (\n <Button\n key={`${action.iconName}-${index}`}\n onClick={action.onClick}\n aria-label={action[\"aria-label\"]}\n color={color}\n >\n <Icon name={action.iconName} aria-hidden=\"true\" />\n </Button>\n ))}\n </Box>\n );\n\n // Compose actions into a single ReactNode for ContentHeader\n const renderedActions = shouldRenderActionsBlock ? (\n <Box mr={300} display=\"flex\">\n {renderedOverflowMenu}\n {renderedRelatedActions}\n </Box>\n ) : undefined;\n\n return (\n <TriggerContainer\n data-styled={styled}\n $styled={styled}\n data-qa-trigger=\"HERE\"\n color={color}\n {...triggerProps}\n >\n <CollapsibleContentHeader\n title={title}\n headingLevel={headingLevel}\n leftSlot={leftSlot}\n rightSlot={rightSlot}\n headerActions={renderedActions}\n trigger={AccordionTriggerWrapper}\n triggerPosition={triggerPosition as \"left\" | \"right\"}\n triggerIcon={triggerIcon}\n bordered={false}\n />\n </TriggerContainer>\n );\n};\n"],"mappings":"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","names":["React","styled","React","isControlled","RadixAccordion","jsx","jsx","styled","Icon","useContext","RadixAccordion","jsx","styled","useContext","Icon","children"]}
|
|
1
|
+
{"version":3,"sources":["../../src/Accordion.tsx","../../src/AccordionTypes.ts","../../src/AccordionItem.tsx","../../src/AccordionContent.tsx","../../src/AccordionContentHybrid.tsx","../../src/styles.ts","../../src/AccordionContentTailwind.tsx","../../src/AccordionTriggerHybrid.tsx","../../src/AccordionTriggerInner.tsx","../../src/AccordionTriggerTailwind.tsx","../../src/AccordionTrigger.tsx"],"sourcesContent":["import React, { createContext, type ReactElement } from \"react\";\nimport * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport { type TypeAccordionProps } from \"./AccordionTypes\";\n\nexport const AccordionContext = createContext<{\n triggerIcon: ReactElement | null;\n triggerPosition: string;\n styled: boolean;\n}>({\n triggerIcon: null,\n triggerPosition: \"\",\n styled: false,\n});\n\nexport const Accordion = ({\n children,\n collapsible,\n defaultValue = [\"item-0\"],\n triggerPosition = \"right\",\n triggerIcon = <Icon className=\"triggerIcon\" name=\"chevron-down-outline\" />,\n type = \"multiple\",\n styled = true,\n value,\n onValueChange,\n}: TypeAccordionProps) => {\n const contextValue = {\n triggerIcon: React.isValidElement(triggerIcon) ? triggerIcon : null,\n triggerPosition,\n styled,\n };\n\n if (type === \"single\") {\n // Determine if controlled or uncontrolled\n const isControlled = value !== undefined;\n\n return (\n <RadixAccordion.Root\n type=\"single\"\n value={\n isControlled ? (Array.isArray(value) ? value[0] : value) : undefined\n }\n defaultValue={\n !isControlled && defaultValue\n ? Array.isArray(defaultValue)\n ? defaultValue[0]\n : defaultValue\n : undefined\n }\n onValueChange={onValueChange as ((value: string) => void) | undefined}\n collapsible={collapsible}\n >\n <AccordionContext.Provider value={contextValue}>\n {children}\n </AccordionContext.Provider>\n </RadixAccordion.Root>\n );\n }\n\n // Multiple mode\n const isControlled = value !== undefined;\n\n return (\n <RadixAccordion.Root\n type=\"multiple\"\n value={\n isControlled ? (Array.isArray(value) ? value : [value]) : undefined\n }\n defaultValue={\n !isControlled && defaultValue\n ? Array.isArray(defaultValue)\n ? defaultValue\n : [defaultValue]\n : undefined\n }\n onValueChange={onValueChange as ((value: string[]) => void) | undefined}\n >\n <AccordionContext.Provider value={contextValue}>\n {children}\n </AccordionContext.Provider>\n </RadixAccordion.Root>\n );\n};\n","import * as React from \"react\";\nimport {\n type TypeSystemCommonProps,\n type TypeBorderSystemProps,\n type TypeFlexboxSystemProps,\n type TypeLayoutSystemProps,\n type TypeStyledComponentsCommonProps,\n type TypeSystemTypographyProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { type TypeIconName } from \"@sproutsocial/seeds-react-icon\";\nimport { type TypeMenuItemProps } from \"@sproutsocial/seeds-react-menu\";\nimport { type TypeHeadingLevel } from \"@sproutsocial/seeds-react-content-header\";\n\nexport interface TypeAccordionSystemProps\n extends Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\">,\n TypeStyledComponentsCommonProps,\n TypeSystemCommonProps,\n TypeBorderSystemProps,\n TypeFlexboxSystemProps,\n TypeLayoutSystemProps,\n TypeSystemTypographyProps {}\n\nexport interface TypeAccordionProps {\n children?: React.ReactNode;\n collapsible?: boolean;\n defaultValue?: string | string[];\n triggerIcon?: React.ReactNode;\n triggerPosition?: \"left\" | \"right\";\n type?: \"single\" | \"multiple\";\n styled?: boolean;\n /** Controlled value for open accordion items (single mode: string, multiple mode: string[]) */\n value?: string | string[];\n /** Callback fired when accordion items change (single mode: string, multiple mode: string[]) */\n onValueChange?: (value: string | string[]) => void;\n}\n\nexport interface TypeRelatedAction {\n iconName: TypeIconName;\n onClick: () => void;\n \"aria-label\": string;\n}\n\nexport interface TypeOverflowMenuItem extends TypeMenuItemProps {\n iconName?: TypeIconName;\n}\n\nexport interface TypeOverflowMenuConfig {\n /** Menu items to be rendered in the overflow menu */\n items: TypeOverflowMenuItem[];\n /** Aria label for the overflow menu trigger button. Defaults to \"More actions\" */\n \"aria-label\"?: string;\n}\n\nexport interface TypeAccordionItemProps {\n children: React.ReactNode;\n relatedActions?: TypeRelatedAction[];\n overflowMenu?: TypeOverflowMenuConfig;\n value: string;\n}\n\n/**\n * Props for AccordionTrigger component\n *\n * @example\n * ```tsx\n * <AccordionTrigger\n * title=\"My Accordion Title\"\n * headingLevel=\"h2\"\n * />\n * ```\n */\nexport interface TypeAccordionTriggerProps extends TypeAccordionSystemProps {\n title: string;\n leftSlot?: React.ReactNode;\n relatedActions?: TypeRelatedAction[];\n overflowMenu?: TypeOverflowMenuConfig;\n rightSlot?: React.ReactNode;\n /** The semantic heading level for the accordion title. Defaults to \"h4\" */\n headingLevel?: TypeHeadingLevel;\n}\n","import * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { type TypeAccordionItemProps } from \"./AccordionTypes\";\n\nexport const AccordionItem = ({ children, value }: TypeAccordionItemProps) => {\n return (\n <RadixAccordion.Item className=\"accordion-item\" value={value}>\n {children}\n </RadixAccordion.Item>\n );\n};\n","import React from \"react\";\nimport { type TypeAccordionSystemProps } from \"./AccordionTypes\";\nimport { AccordionContentHybrid } from \"./AccordionContentHybrid\";\n\ninterface TypeAccordionContentProps extends TypeAccordionSystemProps {\n children?: React.ReactNode;\n}\n\n/**\n * AccordionContent. Automatically routes between the Tailwind implementation\n * (preferred) and the styled-components implementation (for consumers using\n * system props or a styled() extension).\n */\nexport const AccordionContent = (props: TypeAccordionContentProps) => (\n <AccordionContentHybrid {...props} />\n);\n","/**\n * Hybrid AccordionContent.\n * Automatically chooses between the Tailwind and styled-components rendering\n * based on whether styled-system props or a styled() extension are present.\n */\n\nimport React, { useContext } from \"react\";\nimport { needsStyledComponents } from \"@sproutsocial/seeds-react-system-props\";\nimport { StyledRadixAccordionContent, ContentContainer } from \"./styles\";\nimport { AccordionContext } from \"./Accordion\";\nimport { AccordionContentTailwind } from \"./AccordionContentTailwind\";\nimport { type TypeAccordionSystemProps } from \"./AccordionTypes\";\n\ninterface TypeAccordionContentProps extends TypeAccordionSystemProps {\n children?: React.ReactNode;\n}\n\nexport const AccordionContentHybrid = ({\n children,\n ...rest\n}: TypeAccordionContentProps) => {\n const { styled } = useContext(AccordionContext);\n\n if (needsStyledComponents(rest)) {\n // Styled-components branch — identical to the legacy AccordionContent body.\n return (\n <StyledRadixAccordionContent data-styled={styled}>\n <ContentContainer data-styled={styled} {...rest}>\n {children}\n </ContentContainer>\n </StyledRadixAccordionContent>\n );\n }\n\n // Tailwind path (preferred — no styled-components runtime).\n return (\n <AccordionContentTailwind {...rest}>{children}</AccordionContentTailwind>\n );\n};\n","import styled, { css } from \"styled-components\";\nimport * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport {\n BORDER,\n COMMON,\n FLEXBOX,\n LAYOUT,\n TYPOGRAPHY,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { type TypeAccordionSystemProps } from \"./AccordionTypes\";\n\ninterface StyledAccordionProps extends TypeAccordionSystemProps {\n $styled?: boolean;\n}\n\nexport const StyledAccordionItem = styled(RadixAccordion.Item)``;\n\nconst animations = css`\n @keyframes slideDown {\n from {\n height: 0;\n }\n to {\n height: var(--radix-accordion-content-height);\n }\n }\n\n @keyframes slideUp {\n from {\n height: var(--radix-accordion-content-height);\n }\n to {\n height: 0;\n }\n }\n`;\n\nexport const StyledRadixAccordionContent = styled(\n RadixAccordion.Content\n)<StyledAccordionProps>`\n ${animations}\n\n overflow: hidden;\n\n &[data-state=\"open\"] {\n animation: slideDown 300ms ease-in-out;\n }\n\n &[data-state=\"closed\"] {\n animation: slideUp 300ms ease-in-out;\n }\n\n &[data-styled=\"true\"] {\n border-left: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n border-right: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n background: ${({ theme }) => theme.colors.container.background.base};\n }\n\n .accordion-item:last-child[data-state=\"open\"] &[data-styled=\"true\"],\n .accordion-item:last-child[data-state=\"closed\"] &[data-styled=\"true\"] {\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n border-bottom-left-radius: ${({ theme }) => theme.radii.outer};\n border-bottom-right-radius: ${({ theme }) => theme.radii.outer};\n }\n`;\n\nexport const ContentContainer = styled.div<StyledAccordionProps>`\n color: ${({ theme }) => theme.colors.text.body};\n background: transparent;\n font-family: ${({ theme }) => theme.fontFamily};\n\n &[data-styled=\"true\"] {\n padding: 0 ${({ theme }) => theme.space[400]}\n ${({ theme }) => theme.space[400]};\n ${({ theme }) => theme.typography[200]};\n }\n\n .accordion-item:last-child[data-state=\"open\"] &[data-styled=\"true\"],\n .accordion-item:last-child[data-state=\"closed\"] &[data-styled=\"true\"] {\n border-bottom-left-radius: ${({ theme }) => theme.radii.outer};\n border-bottom-right-radius: ${({ theme }) => theme.radii.outer};\n }\n\n ${COMMON}\n ${TYPOGRAPHY}\n ${BORDER}\n\t${LAYOUT}\n\t${FLEXBOX}\n`;\n\nexport const TriggerContainer = styled.div<StyledAccordionProps>`\n display: flex;\n align-items: center;\n color: ${({ theme }) => theme.colors.text.body};\n ${({ theme }) => theme.typography[200]};\n\n /* Override Text.Headline styles to match original accordion trigger typography */\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-size: inherit;\n font-weight: normal;\n line-height: inherit;\n color: inherit;\n }\n\n &[data-styled=\"true\"] {\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n color: ${({ theme }) => theme.colors.text.headline};\n }\n }\n\n ${({ $styled, theme }) =>\n $styled &&\n `\n border-top: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};\n border-left: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};\n border-right: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};\n background: ${theme.colors.container.background.base};\n `}\n\n .accordion-item[data-state=\"open\"] &[data-styled=\"true\"] {\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid transparent`};\n }\n\n .accordion-item[data-state=\"closed\"] &[data-styled=\"true\"] {\n transition: border-bottom-color 0s ease-in-out 0.3s;\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid transparent`};\n }\n\n .accordion-item:first-child &[data-styled=\"true\"] {\n border-top-left-radius: ${({ theme }) => theme.radii.outer};\n border-top-right-radius: ${({ theme }) => theme.radii.outer};\n }\n\n .accordion-item:last-child[data-state=\"closed\"] &[data-styled=\"true\"] {\n transition: border-radius 0s linear 0.3s,\n border-bottom-color 0s ease-in-out 0.3s;\n border-bottom: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\n border-bottom-left-radius: ${({ theme }) => theme.radii.outer};\n border-bottom-right-radius: ${({ theme }) => theme.radii.outer};\n }\n\n ${COMMON}\n ${BORDER}\n\t${LAYOUT}\n\t${FLEXBOX}\n`;\n","/**\n * Tailwind/CSS-class implementation of AccordionContent.\n * Uses the Seeds accordion CSS classes from accordion.css.\n */\n\nimport React, { useContext } from \"react\";\nimport * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { AccordionContext } from \"./Accordion\";\nimport { type TypeAccordionSystemProps } from \"./AccordionTypes\";\n\n// Utility for merging class names properly\nfunction cn(\n ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n const classes: string[] = [];\n\n for (const input of inputs) {\n if (!input) continue;\n\n if (typeof input === \"string\") {\n classes.push(input);\n } else if (typeof input === \"object\") {\n for (const [key, value] of Object.entries(input)) {\n if (value) {\n classes.push(key);\n }\n }\n }\n }\n\n return classes.join(\" \");\n}\n\ninterface TypeAccordionContentTailwindProps extends TypeAccordionSystemProps {\n children?: React.ReactNode;\n}\n\nexport const AccordionContentTailwind = ({\n children,\n className,\n ...rest\n}: TypeAccordionContentTailwindProps) => {\n const { styled } = useContext(AccordionContext);\n\n // data-styled is forwarded to the Radix Content element via spread: React\n // component prop types have no data-* index signature, so spreading (which is\n // not subject to excess-property checks) keeps this type-safe. Radix forwards\n // the attribute to the underlying DOM node so the CSS [data-styled] rules fire.\n const contentDataAttrs = { \"data-styled\": styled };\n\n return (\n <RadixAccordion.Content\n className={cn(\"seeds-accordion-content\", className)}\n {...contentDataAttrs}\n >\n <div\n className=\"seeds-accordion-content-inner\"\n data-styled={styled}\n {...(rest as React.HTMLAttributes<HTMLDivElement>)}\n >\n {children}\n </div>\n </RadixAccordion.Content>\n );\n};\n","/**\n * Hybrid AccordionTrigger wrapper.\n * Automatically chooses between the Tailwind and styled-components rendering\n * based on whether styled-system props or a styled() extension are present.\n */\n\nimport { useContext } from \"react\";\nimport { needsStyledComponents } from \"@sproutsocial/seeds-react-system-props\";\nimport { TriggerContainer } from \"./styles\";\nimport { AccordionContext } from \"./Accordion\";\nimport { AccordionTriggerInner } from \"./AccordionTriggerInner\";\nimport { AccordionTriggerTailwind } from \"./AccordionTriggerTailwind\";\nimport { type TypeAccordionTriggerProps } from \"./AccordionTypes\";\n\nexport const AccordionTriggerHybrid = (props: TypeAccordionTriggerProps) => {\n const {\n children,\n leftSlot,\n relatedActions,\n overflowMenu,\n rightSlot,\n title,\n headingLevel = \"h4\",\n ...rest\n } = props;\n const { triggerIcon, triggerPosition, styled } = useContext(AccordionContext);\n\n if (needsStyledComponents(rest)) {\n // Styled-components branch — mirrors the legacy AccordionTrigger exactly:\n // the styled-system props are destructured out and only `color` plus the\n // remaining triggerProps are forwarded to TriggerContainer.\n const {\n color,\n padding,\n paddingBottom,\n paddingTop,\n paddingX,\n paddingY,\n paddingLeft,\n paddingRight,\n p,\n pb,\n pt,\n pr,\n pl,\n px,\n py,\n fontFamily,\n fontSize,\n fontStyle,\n fontWeight,\n lineHeight,\n textAlign,\n ...triggerProps\n } = rest;\n\n return (\n <TriggerContainer\n data-styled={styled}\n $styled={styled}\n data-qa-trigger=\"HERE\"\n color={color}\n {...triggerProps}\n >\n <AccordionTriggerInner\n title={title}\n headingLevel={headingLevel}\n leftSlot={leftSlot}\n rightSlot={rightSlot}\n relatedActions={relatedActions}\n overflowMenu={overflowMenu}\n color={color}\n triggerIcon={triggerIcon}\n triggerPosition={triggerPosition}\n />\n </TriggerContainer>\n );\n }\n\n // Tailwind path (preferred — no styled-components runtime).\n return <AccordionTriggerTailwind {...props} />;\n};\n","import React from \"react\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport { Button } from \"@sproutsocial/seeds-react-button\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport {\n ActionMenu,\n MenuContent,\n MenuItem,\n MenuGroup,\n MenuToggleButton,\n} from \"@sproutsocial/seeds-react-menu\";\nimport {\n CollapsibleContentHeader,\n type TypeHeadingLevel,\n} from \"@sproutsocial/seeds-react-content-header\";\nimport * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport {\n type TypeRelatedAction,\n type TypeOverflowMenuConfig,\n type TypeAccordionSystemProps,\n} from \"./AccordionTypes\";\n\nconst MAX_RELATED_ACTIONS = 2;\n\n// Wrapper to adapt RadixAccordion.Trigger to the ContentHeader trigger interface\nconst AccordionTriggerWrapper = ({\n children,\n}: {\n children: React.ReactElement;\n}) => <RadixAccordion.Trigger asChild>{children}</RadixAccordion.Trigger>;\n\nexport interface TypeAccordionTriggerInnerProps {\n title: string;\n headingLevel: TypeHeadingLevel;\n leftSlot?: React.ReactNode;\n rightSlot?: React.ReactNode;\n relatedActions?: TypeRelatedAction[];\n overflowMenu?: TypeOverflowMenuConfig;\n color?: TypeAccordionSystemProps[\"color\"];\n triggerIcon: React.ReactElement | null;\n triggerPosition: string;\n}\n\n/**\n * Wrapper-agnostic inner subtree of the accordion trigger (overflow menu,\n * related actions, and CollapsibleContentHeader). Shared by both the\n * styled-components and Tailwind trigger wrappers so they render an identical\n * subtree and guarantee visual parity.\n */\nexport const AccordionTriggerInner = ({\n title,\n headingLevel,\n leftSlot,\n rightSlot,\n relatedActions,\n overflowMenu,\n color,\n triggerIcon,\n triggerPosition,\n}: TypeAccordionTriggerInnerProps) => {\n // Validate and limit related actions\n const validatedActions = relatedActions?.slice(0, MAX_RELATED_ACTIONS);\n\n const shouldRenderActionsBlock = Boolean(overflowMenu || validatedActions);\n\n // Render overflow menu from config\n const renderedOverflowMenu = overflowMenu && (\n <ActionMenu\n menuToggleElement={\n <MenuToggleButton\n aria-label={overflowMenu[\"aria-label\"]}\n appearance=\"unstyled\"\n color={color}\n >\n <Icon name=\"ellipsis-horizontal-outline\" aria-hidden=\"true\" />\n </MenuToggleButton>\n }\n >\n <MenuContent>\n <MenuGroup id=\"overflow-actions\">\n {overflowMenu.items.map((item, index) => {\n const { iconName, id, onClick, children, ...menuItemProps } = item;\n return (\n <MenuItem\n key={id || `overflow-item-${index}`}\n id={id || `overflow-item-${index}`}\n onClick={onClick}\n {...menuItemProps}\n >\n {iconName ? (\n <Box\n display=\"flex\"\n alignItems=\"center\"\n gap=\"300\"\n color={color}\n >\n <Icon name={iconName} />\n {children}\n </Box>\n ) : (\n children\n )}\n </MenuItem>\n );\n })}\n </MenuGroup>\n </MenuContent>\n </ActionMenu>\n );\n\n // Render related actions from config\n const renderedRelatedActions = validatedActions &&\n validatedActions.length > 0 && (\n <Box display=\"flex\">\n {validatedActions.map((action, index) => (\n <Button\n key={`${action.iconName}-${index}`}\n onClick={action.onClick}\n aria-label={action[\"aria-label\"]}\n color={color}\n >\n <Icon name={action.iconName} aria-hidden=\"true\" />\n </Button>\n ))}\n </Box>\n );\n\n // Compose actions into a single ReactNode for ContentHeader\n const renderedActions = shouldRenderActionsBlock ? (\n <Box mr={300} display=\"flex\">\n {renderedOverflowMenu}\n {renderedRelatedActions}\n </Box>\n ) : undefined;\n\n return (\n <CollapsibleContentHeader\n title={title}\n headingLevel={headingLevel}\n leftSlot={leftSlot}\n rightSlot={rightSlot}\n headerActions={renderedActions}\n trigger={AccordionTriggerWrapper}\n triggerPosition={triggerPosition as \"left\" | \"right\"}\n triggerIcon={triggerIcon}\n bordered={false}\n />\n );\n};\n","/**\n * Tailwind/CSS-class implementation of the AccordionTrigger wrapper.\n * Uses the Seeds accordion CSS classes from accordion.css.\n */\n\nimport React, { useContext } from \"react\";\nimport { AccordionContext } from \"./Accordion\";\nimport { AccordionTriggerInner } from \"./AccordionTriggerInner\";\nimport { type TypeAccordionTriggerProps } from \"./AccordionTypes\";\n\n// Utility for merging class names properly\nfunction cn(\n ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n const classes: string[] = [];\n\n for (const input of inputs) {\n if (!input) continue;\n\n if (typeof input === \"string\") {\n classes.push(input);\n } else if (typeof input === \"object\") {\n for (const [key, value] of Object.entries(input)) {\n if (value) {\n classes.push(key);\n }\n }\n }\n }\n\n return classes.join(\" \");\n}\n\nexport const AccordionTriggerTailwind = ({\n children,\n leftSlot,\n relatedActions,\n overflowMenu,\n rightSlot,\n title,\n headingLevel = \"h4\",\n className,\n // In the Tailwind path the hybrid gate guarantees no styled-system props are\n // present. `color` is still pulled out so it is forwarded to the inner content\n // (overflow menu / related actions) but not onto the wrapper div.\n color,\n ...triggerProps\n}: TypeAccordionTriggerProps) => {\n const { triggerIcon, triggerPosition, styled } = useContext(AccordionContext);\n\n return (\n <div\n className={cn(\"seeds-accordion-trigger\", className)}\n data-styled={styled}\n data-qa-trigger=\"HERE\"\n {...(triggerProps as React.HTMLAttributes<HTMLDivElement>)}\n >\n <AccordionTriggerInner\n title={title}\n headingLevel={headingLevel}\n leftSlot={leftSlot}\n rightSlot={rightSlot}\n relatedActions={relatedActions}\n overflowMenu={overflowMenu}\n color={color}\n triggerIcon={triggerIcon}\n triggerPosition={triggerPosition}\n />\n </div>\n );\n};\n","import { type TypeAccordionTriggerProps } from \"./AccordionTypes\";\nimport { AccordionTriggerHybrid } from \"./AccordionTriggerHybrid\";\n\n/**\n * AccordionTrigger. Automatically routes between the Tailwind implementation\n * (preferred) and the styled-components implementation (for consumers using\n * system props or a styled() extension).\n */\nexport const AccordionTrigger = (props: TypeAccordionTriggerProps) => (\n <AccordionTriggerHybrid {...props} />\n);\n"],"mappings":"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","names":["React","styled","React","isControlled","RadixAccordion","jsx","useContext","RadixAccordion","RadixAccordion","jsx","styled","jsx","styled","useContext","jsx","useContext","needsStyledComponents","Icon","RadixAccordion","jsx","Icon","useContext","jsx","cn","styled","useContext","jsx","styled","useContext","needsStyledComponents","jsx"]}
|
package/dist/index.d.mts
CHANGED
|
@@ -1,17 +1,18 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import * as React
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import React__default from 'react';
|
|
3
4
|
import { TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeBorderSystemProps, TypeFlexboxSystemProps, TypeLayoutSystemProps, TypeSystemTypographyProps } from '@sproutsocial/seeds-react-system-props';
|
|
4
5
|
import { TypeIconName } from '@sproutsocial/seeds-react-icon';
|
|
5
6
|
import { TypeMenuItemProps } from '@sproutsocial/seeds-react-menu';
|
|
6
7
|
import { TypeHeadingLevel } from '@sproutsocial/seeds-react-content-header';
|
|
7
8
|
|
|
8
|
-
interface TypeAccordionSystemProps extends Omit<React
|
|
9
|
+
interface TypeAccordionSystemProps extends Omit<React.ComponentPropsWithoutRef<"div">, "color">, TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeBorderSystemProps, TypeFlexboxSystemProps, TypeLayoutSystemProps, TypeSystemTypographyProps {
|
|
9
10
|
}
|
|
10
11
|
interface TypeAccordionProps {
|
|
11
|
-
children?: React
|
|
12
|
+
children?: React.ReactNode;
|
|
12
13
|
collapsible?: boolean;
|
|
13
14
|
defaultValue?: string | string[];
|
|
14
|
-
triggerIcon?: React
|
|
15
|
+
triggerIcon?: React.ReactNode;
|
|
15
16
|
triggerPosition?: "left" | "right";
|
|
16
17
|
type?: "single" | "multiple";
|
|
17
18
|
styled?: boolean;
|
|
@@ -35,7 +36,7 @@ interface TypeOverflowMenuConfig {
|
|
|
35
36
|
"aria-label"?: string;
|
|
36
37
|
}
|
|
37
38
|
interface TypeAccordionItemProps {
|
|
38
|
-
children: React
|
|
39
|
+
children: React.ReactNode;
|
|
39
40
|
relatedActions?: TypeRelatedAction[];
|
|
40
41
|
overflowMenu?: TypeOverflowMenuConfig;
|
|
41
42
|
value: string;
|
|
@@ -53,10 +54,10 @@ interface TypeAccordionItemProps {
|
|
|
53
54
|
*/
|
|
54
55
|
interface TypeAccordionTriggerProps extends TypeAccordionSystemProps {
|
|
55
56
|
title: string;
|
|
56
|
-
leftSlot?: React
|
|
57
|
+
leftSlot?: React.ReactNode;
|
|
57
58
|
relatedActions?: TypeRelatedAction[];
|
|
58
59
|
overflowMenu?: TypeOverflowMenuConfig;
|
|
59
|
-
rightSlot?: React
|
|
60
|
+
rightSlot?: React.ReactNode;
|
|
60
61
|
/** The semantic heading level for the accordion title. Defaults to "h4" */
|
|
61
62
|
headingLevel?: TypeHeadingLevel;
|
|
62
63
|
}
|
|
@@ -66,10 +67,20 @@ declare const Accordion: ({ children, collapsible, defaultValue, triggerPosition
|
|
|
66
67
|
declare const AccordionItem: ({ children, value }: TypeAccordionItemProps) => react_jsx_runtime.JSX.Element;
|
|
67
68
|
|
|
68
69
|
interface TypeAccordionContentProps extends TypeAccordionSystemProps {
|
|
69
|
-
children?:
|
|
70
|
+
children?: React__default.ReactNode;
|
|
70
71
|
}
|
|
71
|
-
|
|
72
|
+
/**
|
|
73
|
+
* AccordionContent. Automatically routes between the Tailwind implementation
|
|
74
|
+
* (preferred) and the styled-components implementation (for consumers using
|
|
75
|
+
* system props or a styled() extension).
|
|
76
|
+
*/
|
|
77
|
+
declare const AccordionContent: (props: TypeAccordionContentProps) => react_jsx_runtime.JSX.Element;
|
|
72
78
|
|
|
73
|
-
|
|
79
|
+
/**
|
|
80
|
+
* AccordionTrigger. Automatically routes between the Tailwind implementation
|
|
81
|
+
* (preferred) and the styled-components implementation (for consumers using
|
|
82
|
+
* system props or a styled() extension).
|
|
83
|
+
*/
|
|
84
|
+
declare const AccordionTrigger: (props: TypeAccordionTriggerProps) => react_jsx_runtime.JSX.Element;
|
|
74
85
|
|
|
75
86
|
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, type TypeAccordionItemProps, type TypeAccordionProps, type TypeAccordionSystemProps, type TypeAccordionTriggerProps, type TypeOverflowMenuConfig, type TypeOverflowMenuItem, type TypeRelatedAction };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,17 +1,18 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import * as React
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import React__default from 'react';
|
|
3
4
|
import { TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeBorderSystemProps, TypeFlexboxSystemProps, TypeLayoutSystemProps, TypeSystemTypographyProps } from '@sproutsocial/seeds-react-system-props';
|
|
4
5
|
import { TypeIconName } from '@sproutsocial/seeds-react-icon';
|
|
5
6
|
import { TypeMenuItemProps } from '@sproutsocial/seeds-react-menu';
|
|
6
7
|
import { TypeHeadingLevel } from '@sproutsocial/seeds-react-content-header';
|
|
7
8
|
|
|
8
|
-
interface TypeAccordionSystemProps extends Omit<React
|
|
9
|
+
interface TypeAccordionSystemProps extends Omit<React.ComponentPropsWithoutRef<"div">, "color">, TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeBorderSystemProps, TypeFlexboxSystemProps, TypeLayoutSystemProps, TypeSystemTypographyProps {
|
|
9
10
|
}
|
|
10
11
|
interface TypeAccordionProps {
|
|
11
|
-
children?: React
|
|
12
|
+
children?: React.ReactNode;
|
|
12
13
|
collapsible?: boolean;
|
|
13
14
|
defaultValue?: string | string[];
|
|
14
|
-
triggerIcon?: React
|
|
15
|
+
triggerIcon?: React.ReactNode;
|
|
15
16
|
triggerPosition?: "left" | "right";
|
|
16
17
|
type?: "single" | "multiple";
|
|
17
18
|
styled?: boolean;
|
|
@@ -35,7 +36,7 @@ interface TypeOverflowMenuConfig {
|
|
|
35
36
|
"aria-label"?: string;
|
|
36
37
|
}
|
|
37
38
|
interface TypeAccordionItemProps {
|
|
38
|
-
children: React
|
|
39
|
+
children: React.ReactNode;
|
|
39
40
|
relatedActions?: TypeRelatedAction[];
|
|
40
41
|
overflowMenu?: TypeOverflowMenuConfig;
|
|
41
42
|
value: string;
|
|
@@ -53,10 +54,10 @@ interface TypeAccordionItemProps {
|
|
|
53
54
|
*/
|
|
54
55
|
interface TypeAccordionTriggerProps extends TypeAccordionSystemProps {
|
|
55
56
|
title: string;
|
|
56
|
-
leftSlot?: React
|
|
57
|
+
leftSlot?: React.ReactNode;
|
|
57
58
|
relatedActions?: TypeRelatedAction[];
|
|
58
59
|
overflowMenu?: TypeOverflowMenuConfig;
|
|
59
|
-
rightSlot?: React
|
|
60
|
+
rightSlot?: React.ReactNode;
|
|
60
61
|
/** The semantic heading level for the accordion title. Defaults to "h4" */
|
|
61
62
|
headingLevel?: TypeHeadingLevel;
|
|
62
63
|
}
|
|
@@ -66,10 +67,20 @@ declare const Accordion: ({ children, collapsible, defaultValue, triggerPosition
|
|
|
66
67
|
declare const AccordionItem: ({ children, value }: TypeAccordionItemProps) => react_jsx_runtime.JSX.Element;
|
|
67
68
|
|
|
68
69
|
interface TypeAccordionContentProps extends TypeAccordionSystemProps {
|
|
69
|
-
children?:
|
|
70
|
+
children?: React__default.ReactNode;
|
|
70
71
|
}
|
|
71
|
-
|
|
72
|
+
/**
|
|
73
|
+
* AccordionContent. Automatically routes between the Tailwind implementation
|
|
74
|
+
* (preferred) and the styled-components implementation (for consumers using
|
|
75
|
+
* system props or a styled() extension).
|
|
76
|
+
*/
|
|
77
|
+
declare const AccordionContent: (props: TypeAccordionContentProps) => react_jsx_runtime.JSX.Element;
|
|
72
78
|
|
|
73
|
-
|
|
79
|
+
/**
|
|
80
|
+
* AccordionTrigger. Automatically routes between the Tailwind implementation
|
|
81
|
+
* (preferred) and the styled-components implementation (for consumers using
|
|
82
|
+
* system props or a styled() extension).
|
|
83
|
+
*/
|
|
84
|
+
declare const AccordionTrigger: (props: TypeAccordionTriggerProps) => react_jsx_runtime.JSX.Element;
|
|
74
85
|
|
|
75
86
|
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, type TypeAccordionItemProps, type TypeAccordionProps, type TypeAccordionSystemProps, type TypeAccordionTriggerProps, type TypeOverflowMenuConfig, type TypeOverflowMenuItem, type TypeRelatedAction };
|