@sproutsocial/seeds-react-accordion 0.3.2 → 0.4.0
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/.turbo/turbo-build.log +10 -10
- package/CHANGELOG.md +6 -0
- package/dist/esm/index.js +18 -25
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.mts +6 -2
- package/dist/index.d.ts +6 -2
- package/dist/index.js +18 -25
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/Accordion.stories.tsx +140 -1
- package/src/Accordion.tsx +36 -16
- package/src/AccordionTypes.ts +5 -1
package/.turbo/turbo-build.log
CHANGED
|
@@ -8,14 +8,14 @@ $ tsup --dts
|
|
|
8
8
|
[34mCLI[39m Cleaning output folder
|
|
9
9
|
[34mCJS[39m Build start
|
|
10
10
|
[34mESM[39m Build start
|
|
11
|
-
[
|
|
12
|
-
[
|
|
13
|
-
[
|
|
14
|
-
[
|
|
15
|
-
[
|
|
16
|
-
[
|
|
11
|
+
[32mESM[39m [1mdist/esm/index.js [22m[32m13.69 KB[39m
|
|
12
|
+
[32mESM[39m [1mdist/esm/index.js.map [22m[32m26.41 KB[39m
|
|
13
|
+
[32mESM[39m ⚡️ Build success in 150ms
|
|
14
|
+
[32mCJS[39m [1mdist/index.js [22m[32m17.66 KB[39m
|
|
15
|
+
[32mCJS[39m [1mdist/index.js.map [22m[32m26.82 KB[39m
|
|
16
|
+
[32mCJS[39m ⚡️ Build success in 151ms
|
|
17
17
|
[34mDTS[39m Build start
|
|
18
|
-
[32mDTS[39m ⚡️ Build success in
|
|
19
|
-
[32mDTS[39m [1mdist/index.d.ts [22m[32m3.
|
|
20
|
-
[32mDTS[39m [1mdist/index.d.mts [22m[32m3.
|
|
21
|
-
Done in
|
|
18
|
+
[32mDTS[39m ⚡️ Build success in 10466ms
|
|
19
|
+
[32mDTS[39m [1mdist/index.d.ts [22m[32m3.41 KB[39m
|
|
20
|
+
[32mDTS[39m [1mdist/index.d.mts [22m[32m3.41 KB[39m
|
|
21
|
+
Done in 13.29s.
|
package/CHANGELOG.md
CHANGED
package/dist/esm/index.js
CHANGED
|
@@ -23,45 +23,38 @@ var Accordion = ({
|
|
|
23
23
|
triggerPosition = "right",
|
|
24
24
|
triggerIcon = /* @__PURE__ */ jsx(Icon, { className: "triggerIcon", name: "chevron-down-outline" }),
|
|
25
25
|
type = "multiple",
|
|
26
|
-
styled: styled2 = true
|
|
26
|
+
styled: styled2 = true,
|
|
27
|
+
value,
|
|
28
|
+
onValueChange
|
|
27
29
|
}) => {
|
|
30
|
+
const contextValue = {
|
|
31
|
+
triggerIcon: React2.isValidElement(triggerIcon) ? triggerIcon : null,
|
|
32
|
+
triggerPosition,
|
|
33
|
+
styled: styled2
|
|
34
|
+
};
|
|
28
35
|
if (type === "single") {
|
|
36
|
+
const isControlled2 = value !== void 0;
|
|
29
37
|
return /* @__PURE__ */ jsx(
|
|
30
38
|
RadixAccordion.Root,
|
|
31
39
|
{
|
|
32
40
|
type: "single",
|
|
33
|
-
|
|
41
|
+
value: isControlled2 ? Array.isArray(value) ? value[0] : value : void 0,
|
|
42
|
+
defaultValue: !isControlled2 && defaultValue ? Array.isArray(defaultValue) ? defaultValue[0] : defaultValue : void 0,
|
|
43
|
+
onValueChange,
|
|
34
44
|
collapsible,
|
|
35
|
-
children: /* @__PURE__ */ jsx(
|
|
36
|
-
AccordionContext.Provider,
|
|
37
|
-
{
|
|
38
|
-
value: {
|
|
39
|
-
triggerIcon: React2.isValidElement(triggerIcon) ? triggerIcon : null,
|
|
40
|
-
triggerPosition,
|
|
41
|
-
styled: styled2
|
|
42
|
-
},
|
|
43
|
-
children
|
|
44
|
-
}
|
|
45
|
-
)
|
|
45
|
+
children: /* @__PURE__ */ jsx(AccordionContext.Provider, { value: contextValue, children })
|
|
46
46
|
}
|
|
47
47
|
);
|
|
48
48
|
}
|
|
49
|
+
const isControlled = value !== void 0;
|
|
49
50
|
return /* @__PURE__ */ jsx(
|
|
50
51
|
RadixAccordion.Root,
|
|
51
52
|
{
|
|
52
53
|
type: "multiple",
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
value: {
|
|
58
|
-
triggerIcon: React2.isValidElement(triggerIcon) ? triggerIcon : null,
|
|
59
|
-
triggerPosition,
|
|
60
|
-
styled: styled2
|
|
61
|
-
},
|
|
62
|
-
children
|
|
63
|
-
}
|
|
64
|
-
)
|
|
54
|
+
value: isControlled ? Array.isArray(value) ? value : [value] : void 0,
|
|
55
|
+
defaultValue: !isControlled && defaultValue ? Array.isArray(defaultValue) ? defaultValue : [defaultValue] : void 0,
|
|
56
|
+
onValueChange,
|
|
57
|
+
children: /* @__PURE__ */ jsx(AccordionContext.Provider, { value: contextValue, children })
|
|
65
58
|
}
|
|
66
59
|
);
|
|
67
60
|
};
|
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","../../../seeds-react-mixins/src/index.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}: TypeAccordionProps) => {\n if (type === \"single\") {\n return (\n <RadixAccordion.Root\n type=\"single\"\n defaultValue={\n Array.isArray(defaultValue) ? defaultValue[0] : defaultValue\n }\n collapsible={collapsible}\n >\n <AccordionContext.Provider\n value={{\n triggerIcon: React.isValidElement(triggerIcon) ? triggerIcon : null,\n triggerPosition,\n styled,\n }}\n >\n {children}\n </AccordionContext.Provider>\n </RadixAccordion.Root>\n );\n }\n\n return (\n <RadixAccordion.Root\n type=\"multiple\"\n defaultValue={Array.isArray(defaultValue) ? defaultValue : [defaultValue]}\n >\n <AccordionContext.Provider\n value={{\n triggerIcon: React.isValidElement(triggerIcon) ? triggerIcon : null,\n triggerPosition,\n styled,\n }}\n >\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\";\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}\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 * Type for valid heading levels\n */\nexport type TypeHeadingLevel = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\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 * as React from \"react\";\nimport styled, { css } from \"styled-components\";\nimport * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { fontSize } from \"styled-system\";\nimport {\n BORDER,\n COMMON,\n FLEXBOX,\n LAYOUT,\n TYPOGRAPHY,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\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 StyledRadixAccordionTrigger = styled(\n RadixAccordion.Trigger as React.ComponentType<\n Omit<React.ComponentPropsWithoutRef<typeof RadixAccordion.Trigger>, \"color\">\n >\n)<StyledAccordionProps>`\n padding: 0;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n outline: none;\n border: none;\n background: transparent;\n color: ${({ theme }) => theme.colors.text.body};\n ${({ theme }) => theme.typography[200]};\n\n .triggerIcon {\n transition: transform 300ms ease-in-out;\n }\n\n &[data-state=\"open\"] {\n .triggerIcon {\n transform: rotate(-180deg);\n }\n }\n\n &[data-styled] {\n padding: ${({ theme }) => theme.space[400]};\n }\n\n &:focus {\n ${focusRing}\n }\n\n ${COMMON}\n ${TYPOGRAPHY}\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 StyledAccordionArea = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n`;\nexport const FlexCenter = styled.div`\n display: flex;\n align-items: center;\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\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\nexport const TitleStyles = styled.h4.attrs<\n StyledAccordionProps & { as?: string }\n>((props) => ({\n as: props.as || \"h4\",\n}))<StyledAccordionProps>`\n margin: 0;\n font-weight: normal;\n\n &[data-styled=\"true\"] {\n font-size: ${({ theme }) => theme.fontSizes[200]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n color: ${({ theme }) => theme.colors.text.headline};\n }\n\n ${COMMON}\n ${TYPOGRAPHY}\n ${fontSize}\n`;\n","import { css } from \"styled-components\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\n\nexport const svgToDataURL = (svgStr: string) => {\n const encoded = encodeURIComponent(svgStr)\n .replace(/'/g, \"%27\")\n .replace(/\"/g, \"%22\");\n\n const header = \"data:image/svg+xml,\";\n const dataUrl = header + encoded;\n\n return dataUrl;\n};\n\nexport const visuallyHidden = css`\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n border: 0;\n`;\n\nexport const focusRing = css`\n box-shadow: 0 0 0 1px ${theme.colors.button.primary.background.base},\n 0 0px 0px 4px\n color-mix(\n in srgb,\n ${theme.colors.button.primary.background.base},\n transparent 70%\n );\n outline: none;\n\n &::-moz-focus-inner {\n border: 0;\n }\n`;\n\nexport const pill = css`\n min-width: ${theme.space[600]};\n min-height: ${theme.space[600]};\n padding: ${theme.space[300]};\n border-radius: ${theme.radii.pill};\n`;\n\nexport const disabled = css`\n opacity: 0.4;\n pointer-events: none;\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 { StyledRadixAccordionTrigger, TitleStyles } from \"./styles\";\nimport {\n type TypeAccordionTriggerProps,\n type TypeRelatedAction,\n type TypeOverflowMenuConfig,\n} from \"./AccordionTypes\";\nimport { FlexCenter, StyledAccordionArea, TriggerContainer } from \"./styles\";\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 { useContext } from \"react\";\nimport { AccordionContext } from \"./Accordion\";\n\nconst MAX_RELATED_ACTIONS = 2;\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 spacingProps = {\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 };\n\n // When you destructure color from rest, it might be null, which is incompatible with what the styled component expects. We need to filter out null or undefined values from typographyProps before spreading them.\n\n const typographyProps = Object.fromEntries(\n Object.entries({\n color,\n fontFamily,\n fontSize,\n fontStyle,\n fontWeight,\n lineHeight,\n textAlign,\n }).filter(([_, value]) => value != null)\n );\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 return (\n <TriggerContainer\n data-styled={styled}\n $styled={styled}\n data-qa-trigger=\"HERE\"\n color={color}\n {...triggerProps}\n >\n <StyledRadixAccordionTrigger\n data-styled={styled}\n color={color}\n {...spacingProps}\n >\n {triggerPosition === \"right\" ? (\n <StyledAccordionArea>\n <FlexCenter>\n {leftSlot}\n <TitleStyles\n as={headingLevel}\n data-styled={styled}\n {...typographyProps}\n >\n {title}\n </TitleStyles>\n {rightSlot}\n </FlexCenter>\n {triggerIcon}\n </StyledAccordionArea>\n ) : (\n <StyledAccordionArea>\n <FlexCenter>\n <Box mr={300}>{triggerIcon}</Box>\n {leftSlot}\n <TitleStyles\n as={headingLevel}\n data-styled={styled}\n {...typographyProps}\n >\n {title}\n </TitleStyles>\n </FlexCenter>\n {rightSlot}\n </StyledAccordionArea>\n )}\n </StyledRadixAccordionTrigger>\n {shouldRenderActionsBlock && (\n <Box mr={300} display=\"flex\">\n {renderedOverflowMenu}\n {renderedRelatedActions}\n </Box>\n )}\n </TriggerContainer>\n );\n};\n"],"mappings":"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","names":["React","styled","React","css","RadixAccordion","css","theme","jsx","jsx","styled","Icon","useContext","jsx","styled","useContext","fontSize","Icon","children"]}
|
|
1
|
+
{"version":3,"sources":["../../src/Accordion.tsx","../../src/AccordionTypes.ts","../../src/AccordionItem.tsx","../../src/styles.ts","../../../seeds-react-mixins/src/index.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\";\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 * Type for valid heading levels\n */\nexport type TypeHeadingLevel = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\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 * as React from \"react\";\nimport styled, { css } from \"styled-components\";\nimport * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { fontSize } from \"styled-system\";\nimport {\n BORDER,\n COMMON,\n FLEXBOX,\n LAYOUT,\n TYPOGRAPHY,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\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 StyledRadixAccordionTrigger = styled(\n RadixAccordion.Trigger as React.ComponentType<\n Omit<React.ComponentPropsWithoutRef<typeof RadixAccordion.Trigger>, \"color\">\n >\n)<StyledAccordionProps>`\n padding: 0;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n outline: none;\n border: none;\n background: transparent;\n color: ${({ theme }) => theme.colors.text.body};\n ${({ theme }) => theme.typography[200]};\n\n .triggerIcon {\n transition: transform 300ms ease-in-out;\n }\n\n &[data-state=\"open\"] {\n .triggerIcon {\n transform: rotate(-180deg);\n }\n }\n\n &[data-styled] {\n padding: ${({ theme }) => theme.space[400]};\n }\n\n &:focus {\n ${focusRing}\n }\n\n ${COMMON}\n ${TYPOGRAPHY}\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 StyledAccordionArea = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n`;\nexport const FlexCenter = styled.div`\n display: flex;\n align-items: center;\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\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\nexport const TitleStyles = styled.h4.attrs<\n StyledAccordionProps & { as?: string }\n>((props) => ({\n as: props.as || \"h4\",\n}))<StyledAccordionProps>`\n margin: 0;\n font-weight: normal;\n\n &[data-styled=\"true\"] {\n font-size: ${({ theme }) => theme.fontSizes[200]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n color: ${({ theme }) => theme.colors.text.headline};\n }\n\n ${COMMON}\n ${TYPOGRAPHY}\n ${fontSize}\n`;\n","import { css } from \"styled-components\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\n\nexport const svgToDataURL = (svgStr: string) => {\n const encoded = encodeURIComponent(svgStr)\n .replace(/'/g, \"%27\")\n .replace(/\"/g, \"%22\");\n\n const header = \"data:image/svg+xml,\";\n const dataUrl = header + encoded;\n\n return dataUrl;\n};\n\nexport const visuallyHidden = css`\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n border: 0;\n`;\n\nexport const focusRing = css`\n box-shadow: 0 0 0 1px ${theme.colors.button.primary.background.base},\n 0 0px 0px 4px\n color-mix(\n in srgb,\n ${theme.colors.button.primary.background.base},\n transparent 70%\n );\n outline: none;\n\n &::-moz-focus-inner {\n border: 0;\n }\n`;\n\nexport const pill = css`\n min-width: ${theme.space[600]};\n min-height: ${theme.space[600]};\n padding: ${theme.space[300]};\n border-radius: ${theme.radii.pill};\n`;\n\nexport const disabled = css`\n opacity: 0.4;\n pointer-events: none;\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 { StyledRadixAccordionTrigger, TitleStyles } from \"./styles\";\nimport {\n type TypeAccordionTriggerProps,\n type TypeRelatedAction,\n type TypeOverflowMenuConfig,\n} from \"./AccordionTypes\";\nimport { FlexCenter, StyledAccordionArea, TriggerContainer } from \"./styles\";\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 { useContext } from \"react\";\nimport { AccordionContext } from \"./Accordion\";\n\nconst MAX_RELATED_ACTIONS = 2;\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 spacingProps = {\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 };\n\n // When you destructure color from rest, it might be null, which is incompatible with what the styled component expects. We need to filter out null or undefined values from typographyProps before spreading them.\n\n const typographyProps = Object.fromEntries(\n Object.entries({\n color,\n fontFamily,\n fontSize,\n fontStyle,\n fontWeight,\n lineHeight,\n textAlign,\n }).filter(([_, value]) => value != null)\n );\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 return (\n <TriggerContainer\n data-styled={styled}\n $styled={styled}\n data-qa-trigger=\"HERE\"\n color={color}\n {...triggerProps}\n >\n <StyledRadixAccordionTrigger\n data-styled={styled}\n color={color}\n {...spacingProps}\n >\n {triggerPosition === \"right\" ? (\n <StyledAccordionArea>\n <FlexCenter>\n {leftSlot}\n <TitleStyles\n as={headingLevel}\n data-styled={styled}\n {...typographyProps}\n >\n {title}\n </TitleStyles>\n {rightSlot}\n </FlexCenter>\n {triggerIcon}\n </StyledAccordionArea>\n ) : (\n <StyledAccordionArea>\n <FlexCenter>\n <Box mr={300}>{triggerIcon}</Box>\n {leftSlot}\n <TitleStyles\n as={headingLevel}\n data-styled={styled}\n {...typographyProps}\n >\n {title}\n </TitleStyles>\n </FlexCenter>\n {rightSlot}\n </StyledAccordionArea>\n )}\n </StyledRadixAccordionTrigger>\n {shouldRenderActionsBlock && (\n <Box mr={300} display=\"flex\">\n {renderedOverflowMenu}\n {renderedRelatedActions}\n </Box>\n )}\n </TriggerContainer>\n );\n};\n"],"mappings":"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","names":["React","styled","React","isControlled","css","RadixAccordion","css","theme","jsx","jsx","styled","Icon","useContext","jsx","styled","useContext","fontSize","Icon","children"]}
|
package/dist/index.d.mts
CHANGED
|
@@ -9,11 +9,15 @@ interface TypeAccordionSystemProps extends Omit<React$1.ComponentPropsWithoutRef
|
|
|
9
9
|
interface TypeAccordionProps {
|
|
10
10
|
children?: React$1.ReactNode;
|
|
11
11
|
collapsible?: boolean;
|
|
12
|
-
defaultValue
|
|
12
|
+
defaultValue?: string | string[];
|
|
13
13
|
triggerIcon?: React$1.ReactNode;
|
|
14
14
|
triggerPosition?: "left" | "right";
|
|
15
15
|
type?: "single" | "multiple";
|
|
16
16
|
styled?: boolean;
|
|
17
|
+
/** Controlled value for open accordion items (single mode: string, multiple mode: string[]) */
|
|
18
|
+
value?: string | string[];
|
|
19
|
+
/** Callback fired when accordion items change (single mode: string, multiple mode: string[]) */
|
|
20
|
+
onValueChange?: (value: string | string[]) => void;
|
|
17
21
|
}
|
|
18
22
|
interface TypeRelatedAction {
|
|
19
23
|
iconName: TypeIconName;
|
|
@@ -60,7 +64,7 @@ interface TypeAccordionTriggerProps extends TypeAccordionSystemProps {
|
|
|
60
64
|
headingLevel?: TypeHeadingLevel;
|
|
61
65
|
}
|
|
62
66
|
|
|
63
|
-
declare const Accordion: ({ children, collapsible, defaultValue, triggerPosition, triggerIcon, type, styled, }: TypeAccordionProps) => react_jsx_runtime.JSX.Element;
|
|
67
|
+
declare const Accordion: ({ children, collapsible, defaultValue, triggerPosition, triggerIcon, type, styled, value, onValueChange, }: TypeAccordionProps) => react_jsx_runtime.JSX.Element;
|
|
64
68
|
|
|
65
69
|
declare const AccordionItem: ({ children, value }: TypeAccordionItemProps) => react_jsx_runtime.JSX.Element;
|
|
66
70
|
|
package/dist/index.d.ts
CHANGED
|
@@ -9,11 +9,15 @@ interface TypeAccordionSystemProps extends Omit<React$1.ComponentPropsWithoutRef
|
|
|
9
9
|
interface TypeAccordionProps {
|
|
10
10
|
children?: React$1.ReactNode;
|
|
11
11
|
collapsible?: boolean;
|
|
12
|
-
defaultValue
|
|
12
|
+
defaultValue?: string | string[];
|
|
13
13
|
triggerIcon?: React$1.ReactNode;
|
|
14
14
|
triggerPosition?: "left" | "right";
|
|
15
15
|
type?: "single" | "multiple";
|
|
16
16
|
styled?: boolean;
|
|
17
|
+
/** Controlled value for open accordion items (single mode: string, multiple mode: string[]) */
|
|
18
|
+
value?: string | string[];
|
|
19
|
+
/** Callback fired when accordion items change (single mode: string, multiple mode: string[]) */
|
|
20
|
+
onValueChange?: (value: string | string[]) => void;
|
|
17
21
|
}
|
|
18
22
|
interface TypeRelatedAction {
|
|
19
23
|
iconName: TypeIconName;
|
|
@@ -60,7 +64,7 @@ interface TypeAccordionTriggerProps extends TypeAccordionSystemProps {
|
|
|
60
64
|
headingLevel?: TypeHeadingLevel;
|
|
61
65
|
}
|
|
62
66
|
|
|
63
|
-
declare const Accordion: ({ children, collapsible, defaultValue, triggerPosition, triggerIcon, type, styled, }: TypeAccordionProps) => react_jsx_runtime.JSX.Element;
|
|
67
|
+
declare const Accordion: ({ children, collapsible, defaultValue, triggerPosition, triggerIcon, type, styled, value, onValueChange, }: TypeAccordionProps) => react_jsx_runtime.JSX.Element;
|
|
64
68
|
|
|
65
69
|
declare const AccordionItem: ({ children, value }: TypeAccordionItemProps) => react_jsx_runtime.JSX.Element;
|
|
66
70
|
|
package/dist/index.js
CHANGED
|
@@ -62,45 +62,38 @@ var Accordion = ({
|
|
|
62
62
|
triggerPosition = "right",
|
|
63
63
|
triggerIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_icon2.Icon, { className: "triggerIcon", name: "chevron-down-outline" }),
|
|
64
64
|
type = "multiple",
|
|
65
|
-
styled: styled2 = true
|
|
65
|
+
styled: styled2 = true,
|
|
66
|
+
value,
|
|
67
|
+
onValueChange
|
|
66
68
|
}) => {
|
|
69
|
+
const contextValue = {
|
|
70
|
+
triggerIcon: import_react.default.isValidElement(triggerIcon) ? triggerIcon : null,
|
|
71
|
+
triggerPosition,
|
|
72
|
+
styled: styled2
|
|
73
|
+
};
|
|
67
74
|
if (type === "single") {
|
|
75
|
+
const isControlled2 = value !== void 0;
|
|
68
76
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
69
77
|
RadixAccordion.Root,
|
|
70
78
|
{
|
|
71
79
|
type: "single",
|
|
72
|
-
|
|
80
|
+
value: isControlled2 ? Array.isArray(value) ? value[0] : value : void 0,
|
|
81
|
+
defaultValue: !isControlled2 && defaultValue ? Array.isArray(defaultValue) ? defaultValue[0] : defaultValue : void 0,
|
|
82
|
+
onValueChange,
|
|
73
83
|
collapsible,
|
|
74
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
75
|
-
AccordionContext.Provider,
|
|
76
|
-
{
|
|
77
|
-
value: {
|
|
78
|
-
triggerIcon: import_react.default.isValidElement(triggerIcon) ? triggerIcon : null,
|
|
79
|
-
triggerPosition,
|
|
80
|
-
styled: styled2
|
|
81
|
-
},
|
|
82
|
-
children
|
|
83
|
-
}
|
|
84
|
-
)
|
|
84
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionContext.Provider, { value: contextValue, children })
|
|
85
85
|
}
|
|
86
86
|
);
|
|
87
87
|
}
|
|
88
|
+
const isControlled = value !== void 0;
|
|
88
89
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
89
90
|
RadixAccordion.Root,
|
|
90
91
|
{
|
|
91
92
|
type: "multiple",
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
value: {
|
|
97
|
-
triggerIcon: import_react.default.isValidElement(triggerIcon) ? triggerIcon : null,
|
|
98
|
-
triggerPosition,
|
|
99
|
-
styled: styled2
|
|
100
|
-
},
|
|
101
|
-
children
|
|
102
|
-
}
|
|
103
|
-
)
|
|
93
|
+
value: isControlled ? Array.isArray(value) ? value : [value] : void 0,
|
|
94
|
+
defaultValue: !isControlled && defaultValue ? Array.isArray(defaultValue) ? defaultValue : [defaultValue] : void 0,
|
|
95
|
+
onValueChange,
|
|
96
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionContext.Provider, { value: contextValue, children })
|
|
104
97
|
}
|
|
105
98
|
);
|
|
106
99
|
};
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/Accordion.tsx","../src/AccordionTypes.ts","../src/AccordionItem.tsx","../src/styles.ts","../../seeds-react-mixins/src/index.ts","../src/AccordionContent.tsx","../src/AccordionTrigger.tsx"],"sourcesContent":["import { Accordion } from \"./Accordion\";\nimport { AccordionItem } from \"./AccordionItem\";\nimport { AccordionContent } from \"./AccordionContent\";\nimport { AccordionTrigger } from \"./AccordionTrigger\";\n\nexport { Accordion, AccordionItem, AccordionContent, AccordionTrigger };\nexport * from \"./AccordionTypes\";\n","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}: TypeAccordionProps) => {\n if (type === \"single\") {\n return (\n <RadixAccordion.Root\n type=\"single\"\n defaultValue={\n Array.isArray(defaultValue) ? defaultValue[0] : defaultValue\n }\n collapsible={collapsible}\n >\n <AccordionContext.Provider\n value={{\n triggerIcon: React.isValidElement(triggerIcon) ? triggerIcon : null,\n triggerPosition,\n styled,\n }}\n >\n {children}\n </AccordionContext.Provider>\n </RadixAccordion.Root>\n );\n }\n\n return (\n <RadixAccordion.Root\n type=\"multiple\"\n defaultValue={Array.isArray(defaultValue) ? defaultValue : [defaultValue]}\n >\n <AccordionContext.Provider\n value={{\n triggerIcon: React.isValidElement(triggerIcon) ? triggerIcon : null,\n triggerPosition,\n styled,\n }}\n >\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\";\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}\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 * Type for valid heading levels\n */\nexport type TypeHeadingLevel = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\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 * as React from \"react\";\nimport styled, { css } from \"styled-components\";\nimport * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { fontSize } from \"styled-system\";\nimport {\n BORDER,\n COMMON,\n FLEXBOX,\n LAYOUT,\n TYPOGRAPHY,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\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 StyledRadixAccordionTrigger = styled(\n RadixAccordion.Trigger as React.ComponentType<\n Omit<React.ComponentPropsWithoutRef<typeof RadixAccordion.Trigger>, \"color\">\n >\n)<StyledAccordionProps>`\n padding: 0;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n outline: none;\n border: none;\n background: transparent;\n color: ${({ theme }) => theme.colors.text.body};\n ${({ theme }) => theme.typography[200]};\n\n .triggerIcon {\n transition: transform 300ms ease-in-out;\n }\n\n &[data-state=\"open\"] {\n .triggerIcon {\n transform: rotate(-180deg);\n }\n }\n\n &[data-styled] {\n padding: ${({ theme }) => theme.space[400]};\n }\n\n &:focus {\n ${focusRing}\n }\n\n ${COMMON}\n ${TYPOGRAPHY}\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 StyledAccordionArea = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n`;\nexport const FlexCenter = styled.div`\n display: flex;\n align-items: center;\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\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\nexport const TitleStyles = styled.h4.attrs<\n StyledAccordionProps & { as?: string }\n>((props) => ({\n as: props.as || \"h4\",\n}))<StyledAccordionProps>`\n margin: 0;\n font-weight: normal;\n\n &[data-styled=\"true\"] {\n font-size: ${({ theme }) => theme.fontSizes[200]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n color: ${({ theme }) => theme.colors.text.headline};\n }\n\n ${COMMON}\n ${TYPOGRAPHY}\n ${fontSize}\n`;\n","import { css } from \"styled-components\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\n\nexport const svgToDataURL = (svgStr: string) => {\n const encoded = encodeURIComponent(svgStr)\n .replace(/'/g, \"%27\")\n .replace(/\"/g, \"%22\");\n\n const header = \"data:image/svg+xml,\";\n const dataUrl = header + encoded;\n\n return dataUrl;\n};\n\nexport const visuallyHidden = css`\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n border: 0;\n`;\n\nexport const focusRing = css`\n box-shadow: 0 0 0 1px ${theme.colors.button.primary.background.base},\n 0 0px 0px 4px\n color-mix(\n in srgb,\n ${theme.colors.button.primary.background.base},\n transparent 70%\n );\n outline: none;\n\n &::-moz-focus-inner {\n border: 0;\n }\n`;\n\nexport const pill = css`\n min-width: ${theme.space[600]};\n min-height: ${theme.space[600]};\n padding: ${theme.space[300]};\n border-radius: ${theme.radii.pill};\n`;\n\nexport const disabled = css`\n opacity: 0.4;\n pointer-events: none;\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 { StyledRadixAccordionTrigger, TitleStyles } from \"./styles\";\nimport {\n type TypeAccordionTriggerProps,\n type TypeRelatedAction,\n type TypeOverflowMenuConfig,\n} from \"./AccordionTypes\";\nimport { FlexCenter, StyledAccordionArea, TriggerContainer } from \"./styles\";\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 { useContext } from \"react\";\nimport { AccordionContext } from \"./Accordion\";\n\nconst MAX_RELATED_ACTIONS = 2;\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 spacingProps = {\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 };\n\n // When you destructure color from rest, it might be null, which is incompatible with what the styled component expects. We need to filter out null or undefined values from typographyProps before spreading them.\n\n const typographyProps = Object.fromEntries(\n Object.entries({\n color,\n fontFamily,\n fontSize,\n fontStyle,\n fontWeight,\n lineHeight,\n textAlign,\n }).filter(([_, value]) => value != null)\n );\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 return (\n <TriggerContainer\n data-styled={styled}\n $styled={styled}\n data-qa-trigger=\"HERE\"\n color={color}\n {...triggerProps}\n >\n <StyledRadixAccordionTrigger\n data-styled={styled}\n color={color}\n {...spacingProps}\n >\n {triggerPosition === \"right\" ? (\n <StyledAccordionArea>\n <FlexCenter>\n {leftSlot}\n <TitleStyles\n as={headingLevel}\n data-styled={styled}\n {...typographyProps}\n >\n {title}\n </TitleStyles>\n {rightSlot}\n </FlexCenter>\n {triggerIcon}\n </StyledAccordionArea>\n ) : (\n <StyledAccordionArea>\n <FlexCenter>\n <Box mr={300}>{triggerIcon}</Box>\n {leftSlot}\n <TitleStyles\n as={headingLevel}\n data-styled={styled}\n {...typographyProps}\n >\n {title}\n </TitleStyles>\n </FlexCenter>\n {rightSlot}\n </StyledAccordionArea>\n )}\n </StyledRadixAccordionTrigger>\n {shouldRenderActionsBlock && (\n <Box mr={300} display=\"flex\">\n {renderedOverflowMenu}\n {renderedRelatedActions}\n </Box>\n )}\n </TriggerContainer>\n );\n};\n"],"mappings":"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","names":["import_seeds_react_icon","styled","React","RadixAccordion","React","import_styled_components","RadixAccordion","import_seeds_react_system_props","styled","theme","import_jsx_runtime","import_react","import_jsx_runtime","styled","import_seeds_react_icon","import_seeds_react_menu","import_react","import_jsx_runtime","styled","fontSize","children"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/Accordion.tsx","../src/AccordionTypes.ts","../src/AccordionItem.tsx","../src/styles.ts","../../seeds-react-mixins/src/index.ts","../src/AccordionContent.tsx","../src/AccordionTrigger.tsx"],"sourcesContent":["import { Accordion } from \"./Accordion\";\nimport { AccordionItem } from \"./AccordionItem\";\nimport { AccordionContent } from \"./AccordionContent\";\nimport { AccordionTrigger } from \"./AccordionTrigger\";\n\nexport { Accordion, AccordionItem, AccordionContent, AccordionTrigger };\nexport * from \"./AccordionTypes\";\n","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\";\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 * Type for valid heading levels\n */\nexport type TypeHeadingLevel = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\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 * as React from \"react\";\nimport styled, { css } from \"styled-components\";\nimport * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { fontSize } from \"styled-system\";\nimport {\n BORDER,\n COMMON,\n FLEXBOX,\n LAYOUT,\n TYPOGRAPHY,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\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 StyledRadixAccordionTrigger = styled(\n RadixAccordion.Trigger as React.ComponentType<\n Omit<React.ComponentPropsWithoutRef<typeof RadixAccordion.Trigger>, \"color\">\n >\n)<StyledAccordionProps>`\n padding: 0;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n outline: none;\n border: none;\n background: transparent;\n color: ${({ theme }) => theme.colors.text.body};\n ${({ theme }) => theme.typography[200]};\n\n .triggerIcon {\n transition: transform 300ms ease-in-out;\n }\n\n &[data-state=\"open\"] {\n .triggerIcon {\n transform: rotate(-180deg);\n }\n }\n\n &[data-styled] {\n padding: ${({ theme }) => theme.space[400]};\n }\n\n &:focus {\n ${focusRing}\n }\n\n ${COMMON}\n ${TYPOGRAPHY}\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 StyledAccordionArea = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n`;\nexport const FlexCenter = styled.div`\n display: flex;\n align-items: center;\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\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\nexport const TitleStyles = styled.h4.attrs<\n StyledAccordionProps & { as?: string }\n>((props) => ({\n as: props.as || \"h4\",\n}))<StyledAccordionProps>`\n margin: 0;\n font-weight: normal;\n\n &[data-styled=\"true\"] {\n font-size: ${({ theme }) => theme.fontSizes[200]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n color: ${({ theme }) => theme.colors.text.headline};\n }\n\n ${COMMON}\n ${TYPOGRAPHY}\n ${fontSize}\n`;\n","import { css } from \"styled-components\";\nimport { theme } from \"@sproutsocial/seeds-react-theme\";\n\nexport const svgToDataURL = (svgStr: string) => {\n const encoded = encodeURIComponent(svgStr)\n .replace(/'/g, \"%27\")\n .replace(/\"/g, \"%22\");\n\n const header = \"data:image/svg+xml,\";\n const dataUrl = header + encoded;\n\n return dataUrl;\n};\n\nexport const visuallyHidden = css`\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n border: 0;\n`;\n\nexport const focusRing = css`\n box-shadow: 0 0 0 1px ${theme.colors.button.primary.background.base},\n 0 0px 0px 4px\n color-mix(\n in srgb,\n ${theme.colors.button.primary.background.base},\n transparent 70%\n );\n outline: none;\n\n &::-moz-focus-inner {\n border: 0;\n }\n`;\n\nexport const pill = css`\n min-width: ${theme.space[600]};\n min-height: ${theme.space[600]};\n padding: ${theme.space[300]};\n border-radius: ${theme.radii.pill};\n`;\n\nexport const disabled = css`\n opacity: 0.4;\n pointer-events: none;\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 { StyledRadixAccordionTrigger, TitleStyles } from \"./styles\";\nimport {\n type TypeAccordionTriggerProps,\n type TypeRelatedAction,\n type TypeOverflowMenuConfig,\n} from \"./AccordionTypes\";\nimport { FlexCenter, StyledAccordionArea, TriggerContainer } from \"./styles\";\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 { useContext } from \"react\";\nimport { AccordionContext } from \"./Accordion\";\n\nconst MAX_RELATED_ACTIONS = 2;\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 spacingProps = {\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 };\n\n // When you destructure color from rest, it might be null, which is incompatible with what the styled component expects. We need to filter out null or undefined values from typographyProps before spreading them.\n\n const typographyProps = Object.fromEntries(\n Object.entries({\n color,\n fontFamily,\n fontSize,\n fontStyle,\n fontWeight,\n lineHeight,\n textAlign,\n }).filter(([_, value]) => value != null)\n );\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 return (\n <TriggerContainer\n data-styled={styled}\n $styled={styled}\n data-qa-trigger=\"HERE\"\n color={color}\n {...triggerProps}\n >\n <StyledRadixAccordionTrigger\n data-styled={styled}\n color={color}\n {...spacingProps}\n >\n {triggerPosition === \"right\" ? (\n <StyledAccordionArea>\n <FlexCenter>\n {leftSlot}\n <TitleStyles\n as={headingLevel}\n data-styled={styled}\n {...typographyProps}\n >\n {title}\n </TitleStyles>\n {rightSlot}\n </FlexCenter>\n {triggerIcon}\n </StyledAccordionArea>\n ) : (\n <StyledAccordionArea>\n <FlexCenter>\n <Box mr={300}>{triggerIcon}</Box>\n {leftSlot}\n <TitleStyles\n as={headingLevel}\n data-styled={styled}\n {...typographyProps}\n >\n {title}\n </TitleStyles>\n </FlexCenter>\n {rightSlot}\n </StyledAccordionArea>\n )}\n </StyledRadixAccordionTrigger>\n {shouldRenderActionsBlock && (\n <Box mr={300} display=\"flex\">\n {renderedOverflowMenu}\n {renderedRelatedActions}\n </Box>\n )}\n </TriggerContainer>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAwD;AACxD,qBAAgC;AAChC,IAAAA,2BAAqB;;;ACFrB,YAAuB;AACvB,sCAOO;AACP,8BAAkC;AAClC,8BAAuC;;;ADUvB;AAfT,IAAM,uBAAmB,4BAI7B;AAAA,EACD,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,QAAQ;AACV,CAAC;AAEM,IAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA,eAAe,CAAC,QAAQ;AAAA,EACxB,kBAAkB;AAAA,EAClB,cAAc,4CAAC,iCAAK,WAAU,eAAc,MAAK,wBAAuB;AAAA,EACxE,OAAO;AAAA,EACP,QAAAC,UAAS;AAAA,EACT;AAAA,EACA;AACF,MAA0B;AACxB,QAAM,eAAe;AAAA,IACnB,aAAa,aAAAC,QAAM,eAAe,WAAW,IAAI,cAAc;AAAA,IAC/D;AAAA,IACA,QAAAD;AAAA,EACF;AAEA,MAAI,SAAS,UAAU;AAErB,UAAME,gBAAe,UAAU;AAE/B,WACE;AAAA,MAAgB;AAAA,MAAf;AAAA,QACC,MAAK;AAAA,QACL,OACEA,gBAAgB,MAAM,QAAQ,KAAK,IAAI,MAAM,CAAC,IAAI,QAAS;AAAA,QAE7D,cACE,CAACA,iBAAgB,eACb,MAAM,QAAQ,YAAY,IACxB,aAAa,CAAC,IACd,eACF;AAAA,QAEN;AAAA,QACA;AAAA,QAEA,sDAAC,iBAAiB,UAAjB,EAA0B,OAAO,cAC/B,UACH;AAAA;AAAA,IACF;AAAA,EAEJ;AAGA,QAAM,eAAe,UAAU;AAE/B,SACE;AAAA,IAAgB;AAAA,IAAf;AAAA,MACC,MAAK;AAAA,MACL,OACE,eAAgB,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK,IAAK;AAAA,MAE5D,cACE,CAAC,gBAAgB,eACb,MAAM,QAAQ,YAAY,IACxB,eACA,CAAC,YAAY,IACf;AAAA,MAEN;AAAA,MAEA,sDAAC,iBAAiB,UAAjB,EAA0B,OAAO,cAC/B,UACH;AAAA;AAAA,EACF;AAEJ;;;AElFA,IAAAC,kBAAgC;;;ACAhC,IAAAC,SAAuB;AACvB,IAAAC,4BAA4B;AAC5B,IAAAC,kBAAgC;AAChC,2BAAyB;AACzB,IAAAC,mCAMO;;;ACVP,+BAAoB;AACpB,+BAAsB;AAaf,IAAM,iBAAiB;;;;;;;;;;AAWvB,IAAM,YAAY;0BACC,+BAAM,OAAO,OAAO,QAAQ,WAAW,IAAI;;;;UAI3D,+BAAM,OAAO,OAAO,QAAQ,WAAW,IAAI;;;;;;;;;AAU9C,IAAM,OAAO;eACL,+BAAM,MAAM,GAAG,CAAC;gBACf,+BAAM,MAAM,GAAG,CAAC;aACnB,+BAAM,MAAM,GAAG,CAAC;mBACV,+BAAM,MAAM,IAAI;;AAG5B,IAAM,WAAW;;;;;;AD7BjB,IAAM,0BAAsB,0BAAAC,SAAsB,oBAAI;AAE7D,IAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBZ,IAAM,kCAA8B,0BAAAA;AAAA,EAC1B;AAGjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAUW,CAAC,EAAE,OAAAC,OAAM,MAAMA,OAAM,OAAO,KAAK,IAAI;AAAA,IAC5C,CAAC,EAAE,OAAAA,OAAM,MAAMA,OAAM,WAAW,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAazB,CAAC,EAAE,OAAAA,OAAM,MAAMA,OAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,MAIxC,SAAS;AAAA;AAAA;AAAA,IAGX,uCAAM;AAAA,IACN,2CAAU;AAAA;AAGP,IAAM,kCAA8B,0BAAAD;AAAA,EAC1B;AACjB;AAAA,IACI,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAaK,CAAC,EAAE,OAAAC,OAAM,MACtB,GAAGA,OAAM,aAAa,GAAG,CAAC,UAAUA,OAAM,OAAO,UAAU,OAAO,IAAI,EAAE;AAAA,oBAC1D,CAAC,EAAE,OAAAA,OAAM,MACvB,GAAGA,OAAM,aAAa,GAAG,CAAC,UAAUA,OAAM,OAAO,UAAU,OAAO,IAAI,EAAE;AAAA,kBAC5D,CAAC,EAAE,OAAAA,OAAM,MAAMA,OAAM,OAAO,UAAU,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKlD,CAAC,EAAE,OAAAA,OAAM,MACxB,GAAGA,OAAM,aAAa,GAAG,CAAC,UAAUA,OAAM,OAAO,UAAU,OAAO,IAAI,EAAE;AAAA,iCAC7C,CAAC,EAAE,OAAAA,OAAM,MAAMA,OAAM,MAAM,KAAK;AAAA,kCAC/B,CAAC,EAAE,OAAAA,OAAM,MAAMA,OAAM,MAAM,KAAK;AAAA;AAAA;AAI3D,IAAM,sBAAsB,0BAAAD,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAMnC,IAAM,aAAa,0BAAAA,QAAO;AAAA;AAAA;AAAA;AAK1B,IAAM,mBAAmB,0BAAAA,QAAO;AAAA,WAC5B,CAAC,EAAE,OAAAC,OAAM,MAAMA,OAAM,OAAO,KAAK,IAAI;AAAA;AAAA,iBAE/B,CAAC,EAAE,OAAAA,OAAM,MAAMA,OAAM,UAAU;AAAA;AAAA;AAAA,eAGjC,CAAC,EAAE,OAAAA,OAAM,MAAMA,OAAM,MAAM,GAAG,CAAC;AAAA,MACxC,CAAC,EAAE,OAAAA,OAAM,MAAMA,OAAM,WAAW,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,iCAKT,CAAC,EAAE,OAAAA,OAAM,MAAMA,OAAM,MAAM,KAAK;AAAA,kCAC/B,CAAC,EAAE,OAAAA,OAAM,MAAMA,OAAM,MAAM,KAAK;AAAA;AAAA;AAAA,IAG9D,uCAAM;AAAA,IACN,2CAAU;AAAA,IACV,uCAAM;AAAA,GACP,uCAAM;AAAA,GACN,wCAAO;AAAA;AAGH,IAAM,mBAAmB,0BAAAD,QAAO;AAAA;AAAA;AAAA,WAG5B,CAAC,EAAE,OAAAC,OAAM,MAAMA,OAAM,OAAO,KAAK,IAAI;AAAA;AAAA,IAE5C,CAAC,EAAE,SAAS,OAAAA,OAAM,MAClB,WACA;AAAA,kBACcA,OAAM,aAAa,GAAG,CAAC,UAAUA,OAAM,OAAO,UAAU,OAAO,IAAI;AAAA,mBAClEA,OAAM,aAAa,GAAG,CAAC,UAAUA,OAAM,OAAO,UAAU,OAAO,IAAI;AAAA,oBAClEA,OAAM,aAAa,GAAG,CAAC,UAAUA,OAAM,OAAO,UAAU,OAAO,IAAI;AAAA,kBACrEA,OAAM,OAAO,UAAU,WAAW,IAAI;AAAA,GACrD;AAAA;AAAA;AAAA,qBAGkB,CAAC,EAAE,OAAAA,OAAM,MACxB,GAAGA,OAAM,aAAa,GAAG,CAAC,UAAUA,OAAM,OAAO,UAAU,OAAO,IAAI,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKzD,CAAC,EAAE,OAAAA,OAAM,MACxB,GAAGA,OAAM,aAAa,GAAG,CAAC,oBAAoB;AAAA;AAAA;AAAA;AAAA,8BAItB,CAAC,EAAE,OAAAA,OAAM,MAAMA,OAAM,MAAM,KAAK;AAAA,+BAC/B,CAAC,EAAE,OAAAA,OAAM,MAAMA,OAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,qBAI1C,CAAC,EAAE,OAAAA,OAAM,MACxB,GAAGA,OAAM,aAAa,GAAG,CAAC,UAAUA,OAAM,OAAO,UAAU,OAAO,IAAI,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,iCAK7C,CAAC,EAAE,OAAAA,OAAM,MAAMA,OAAM,MAAM,KAAK;AAAA,kCAC/B,CAAC,EAAE,OAAAA,OAAM,MAAMA,OAAM,MAAM,KAAK;AAAA;AAAA;AAAA,IAG9D,uCAAM;AAAA,IACN,uCAAM;AAAA,GACP,uCAAM;AAAA,GACN,wCAAO;AAAA;AAGH,IAAM,cAAc,0BAAAD,QAAO,GAAG,MAEnC,CAAC,WAAW;AAAA,EACZ,IAAI,MAAM,MAAM;AAClB,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,iBAKe,CAAC,EAAE,OAAAC,OAAM,MAAMA,OAAM,UAAU,GAAG,CAAC;AAAA,mBACjC,CAAC,EAAE,OAAAA,OAAM,MAAMA,OAAM,YAAY,QAAQ;AAAA,aAC/C,CAAC,EAAE,OAAAA,OAAM,MAAMA,OAAM,OAAO,KAAK,QAAQ;AAAA;AAAA;AAAA,IAGlD,uCAAM;AAAA,IACN,2CAAU;AAAA,IACV,6BAAQ;AAAA;;;AD1MR,IAAAC,sBAAA;AAFG,IAAM,gBAAgB,CAAC,EAAE,UAAU,MAAM,MAA8B;AAC5E,SACE,6CAAC,uBAAoB,WAAU,kBAAiB,OAC7C,UACH;AAEJ;;;AGPA,IAAAC,gBAA2B;AAcrB,IAAAC,sBAAA;AARC,IAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA,GAAG;AACL,MAAiC;AAC/B,QAAM,EAAE,QAAAC,QAAO,QAAI,0BAAW,gBAAgB;AAE9C,SACE,6CAAC,+BAA4B,eAAaA,SACxC,uDAAC,oBAAiB,eAAaA,SAAS,GAAG,MACxC,UACH,GACF;AAEJ;;;ACfA,6BAAoB;AACpB,gCAAuB;AACvB,IAAAC,2BAAqB;AACrB,IAAAC,2BAMO;AACP,IAAAC,gBAA2B;AAwFjB,IAAAC,sBAAA;AArFV,IAAM,sBAAsB;AAErB,IAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,GAAG;AACL,MAAiC;AAC/B,QAAM,EAAE,aAAa,iBAAiB,QAAAC,QAAO,QAAI,0BAAW,gBAAgB;AAG5E,QAAM,mBAAmB,gBAAgB,MAAM,GAAG,mBAAmB;AAGrE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAAC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,eAAe;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAIA,QAAM,kBAAkB,OAAO;AAAA,IAC7B,OAAO,QAAQ;AAAA,MACb;AAAA,MACA;AAAA,MACA,UAAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC,EAAE,OAAO,CAAC,CAAC,GAAG,KAAK,MAAM,SAAS,IAAI;AAAA,EACzC;AAEA,QAAM,2BAA2B,QAAQ,gBAAgB,gBAAgB;AAGzE,QAAM,uBAAuB,gBAC3B;AAAA,IAAC;AAAA;AAAA,MACC,mBACE;AAAA,QAAC;AAAA;AAAA,UACC,cAAY,aAAa,YAAY;AAAA,UACrC,YAAW;AAAA,UACX;AAAA,UAEA,uDAAC,iCAAK,MAAK,+BAA8B,eAAY,QAAO;AAAA;AAAA,MAC9D;AAAA,MAGF,uDAAC,wCACC,uDAAC,sCAAU,IAAG,oBACX,uBAAa,MAAM,IAAI,CAAC,MAAM,UAAU;AACvC,cAAM,EAAE,UAAU,IAAI,SAAS,UAAAC,WAAU,GAAG,cAAc,IAAI;AAC9D,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,IAAI,MAAM,iBAAiB,KAAK;AAAA,YAChC;AAAA,YACC,GAAG;AAAA,YAEH,qBACC;AAAA,cAAC;AAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,YAAW;AAAA,gBACX,KAAI;AAAA,gBACJ;AAAA,gBAEA;AAAA,+DAAC,iCAAK,MAAM,UAAU;AAAA,kBACrBA;AAAA;AAAA;AAAA,YACH,IAEAA;AAAA;AAAA,UAhBG,MAAM,iBAAiB,KAAK;AAAA,QAkBnC;AAAA,MAEJ,CAAC,GACH,GACF;AAAA;AAAA,EACF;AAIF,QAAM,yBAAyB,oBAC7B,iBAAiB,SAAS,KACxB,6CAAC,8BAAI,SAAQ,QACV,2BAAiB,IAAI,CAAC,QAAQ,UAC7B;AAAA,IAAC;AAAA;AAAA,MAEC,SAAS,OAAO;AAAA,MAChB,cAAY,OAAO,YAAY;AAAA,MAC/B;AAAA,MAEA,uDAAC,iCAAK,MAAM,OAAO,UAAU,eAAY,QAAO;AAAA;AAAA,IAL3C,GAAG,OAAO,QAAQ,IAAI,KAAK;AAAA,EAMlC,CACD,GACH;AAGJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAaF;AAAA,MACb,SAASA;AAAA,MACT,mBAAgB;AAAA,MAChB;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eAAaA;AAAA,YACb;AAAA,YACC,GAAG;AAAA,YAEH,8BAAoB,UACnB,8CAAC,uBACC;AAAA,4DAAC,cACE;AAAA;AAAA,gBACD;AAAA,kBAAC;AAAA;AAAA,oBACC,IAAI;AAAA,oBACJ,eAAaA;AAAA,oBACZ,GAAG;AAAA,oBAEH;AAAA;AAAA,gBACH;AAAA,gBACC;AAAA,iBACH;AAAA,cACC;AAAA,eACH,IAEA,8CAAC,uBACC;AAAA,4DAAC,cACC;AAAA,6DAAC,8BAAI,IAAI,KAAM,uBAAY;AAAA,gBAC1B;AAAA,gBACD;AAAA,kBAAC;AAAA;AAAA,oBACC,IAAI;AAAA,oBACJ,eAAaA;AAAA,oBACZ,GAAG;AAAA,oBAEH;AAAA;AAAA,gBACH;AAAA,iBACF;AAAA,cACC;AAAA,eACH;AAAA;AAAA,QAEJ;AAAA,QACC,4BACC,8CAAC,8BAAI,IAAI,KAAK,SAAQ,QACnB;AAAA;AAAA,UACA;AAAA,WACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":["import_seeds_react_icon","styled","React","isControlled","RadixAccordion","React","import_styled_components","RadixAccordion","import_seeds_react_system_props","styled","theme","import_jsx_runtime","import_react","import_jsx_runtime","styled","import_seeds_react_icon","import_seeds_react_menu","import_react","import_jsx_runtime","styled","fontSize","children"]}
|
package/package.json
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from "react";
|
|
1
|
+
import React, { useState } from "react";
|
|
2
2
|
import { type StoryFn, type Meta } from "@storybook/react";
|
|
3
3
|
import { Accordion } from "./Accordion";
|
|
4
4
|
import { AccordionTrigger } from "./AccordionTrigger";
|
|
@@ -703,3 +703,142 @@ export const BackwardsCompatibility = {
|
|
|
703
703
|
</Box>
|
|
704
704
|
),
|
|
705
705
|
};
|
|
706
|
+
|
|
707
|
+
export const ControlledSingle = {
|
|
708
|
+
name: "Controlled (Single Mode)",
|
|
709
|
+
render: () => {
|
|
710
|
+
const [value, setValue] = useState<string>("section-1");
|
|
711
|
+
|
|
712
|
+
return (
|
|
713
|
+
<Box p={300}>
|
|
714
|
+
<Text.SmallBodyCopy as="p" mb={400}>
|
|
715
|
+
Currently open: <strong>{value || "none"}</strong>
|
|
716
|
+
</Text.SmallBodyCopy>
|
|
717
|
+
<Accordion
|
|
718
|
+
type="single"
|
|
719
|
+
collapsible
|
|
720
|
+
value={value}
|
|
721
|
+
onValueChange={(newValue) => setValue(newValue as string)}
|
|
722
|
+
>
|
|
723
|
+
<AccordionItem value="section-1">
|
|
724
|
+
<AccordionTrigger title="Section 1" />
|
|
725
|
+
<AccordionContent>
|
|
726
|
+
<Text.SmallBodyCopy as="p">
|
|
727
|
+
This accordion is controlled externally. The parent component
|
|
728
|
+
manages which section is open using state.
|
|
729
|
+
</Text.SmallBodyCopy>
|
|
730
|
+
</AccordionContent>
|
|
731
|
+
</AccordionItem>
|
|
732
|
+
<AccordionItem value="section-2">
|
|
733
|
+
<AccordionTrigger title="Section 2" />
|
|
734
|
+
<AccordionContent>
|
|
735
|
+
<Text.SmallBodyCopy as="p">
|
|
736
|
+
When you click between sections, the state updates in the parent
|
|
737
|
+
component and is reflected here.
|
|
738
|
+
</Text.SmallBodyCopy>
|
|
739
|
+
</AccordionContent>
|
|
740
|
+
</AccordionItem>
|
|
741
|
+
<AccordionItem value="section-3">
|
|
742
|
+
<AccordionTrigger title="Section 3" />
|
|
743
|
+
<AccordionContent>
|
|
744
|
+
<Text.SmallBodyCopy as="p">
|
|
745
|
+
This allows you to programmatically control which section is
|
|
746
|
+
open or react to changes in the open state.
|
|
747
|
+
</Text.SmallBodyCopy>
|
|
748
|
+
</AccordionContent>
|
|
749
|
+
</AccordionItem>
|
|
750
|
+
</Accordion>
|
|
751
|
+
</Box>
|
|
752
|
+
);
|
|
753
|
+
},
|
|
754
|
+
};
|
|
755
|
+
|
|
756
|
+
export const ControlledMultiple = {
|
|
757
|
+
name: "Controlled (Multiple Mode)",
|
|
758
|
+
render: () => {
|
|
759
|
+
const [value, setValue] = useState<string[]>(["section-1", "section-2"]);
|
|
760
|
+
|
|
761
|
+
return (
|
|
762
|
+
<Box p={300}>
|
|
763
|
+
<Text.SmallBodyCopy as="p" mb={400}>
|
|
764
|
+
Currently open: <strong>{value.join(", ") || "none"}</strong>
|
|
765
|
+
</Text.SmallBodyCopy>
|
|
766
|
+
<Accordion
|
|
767
|
+
type="multiple"
|
|
768
|
+
value={value}
|
|
769
|
+
onValueChange={(newValue) => setValue(newValue as string[])}
|
|
770
|
+
>
|
|
771
|
+
<AccordionItem value="section-1">
|
|
772
|
+
<AccordionTrigger title="Section 1" />
|
|
773
|
+
<AccordionContent>
|
|
774
|
+
<Text.SmallBodyCopy as="p">
|
|
775
|
+
This accordion is in multiple mode, allowing multiple sections
|
|
776
|
+
to be open simultaneously.
|
|
777
|
+
</Text.SmallBodyCopy>
|
|
778
|
+
</AccordionContent>
|
|
779
|
+
</AccordionItem>
|
|
780
|
+
<AccordionItem value="section-2">
|
|
781
|
+
<AccordionTrigger title="Section 2" />
|
|
782
|
+
<AccordionContent>
|
|
783
|
+
<Text.SmallBodyCopy as="p">
|
|
784
|
+
The parent component tracks which sections are open in an array.
|
|
785
|
+
</Text.SmallBodyCopy>
|
|
786
|
+
</AccordionContent>
|
|
787
|
+
</AccordionItem>
|
|
788
|
+
<AccordionItem value="section-3">
|
|
789
|
+
<AccordionTrigger title="Section 3" />
|
|
790
|
+
<AccordionContent>
|
|
791
|
+
<Text.SmallBodyCopy as="p">
|
|
792
|
+
Try opening and closing different sections to see the state
|
|
793
|
+
update above.
|
|
794
|
+
</Text.SmallBodyCopy>
|
|
795
|
+
</AccordionContent>
|
|
796
|
+
</AccordionItem>
|
|
797
|
+
</Accordion>
|
|
798
|
+
</Box>
|
|
799
|
+
);
|
|
800
|
+
},
|
|
801
|
+
};
|
|
802
|
+
|
|
803
|
+
export const Uncontrolled = {
|
|
804
|
+
name: "Uncontrolled (Default Behavior)",
|
|
805
|
+
render: () => {
|
|
806
|
+
return (
|
|
807
|
+
<Box p={300}>
|
|
808
|
+
<Text.SmallBodyCopy as="p" mb={400}>
|
|
809
|
+
This accordion manages its own state internally. Just pass{" "}
|
|
810
|
+
<code>defaultValue</code> and the accordion handles the rest.
|
|
811
|
+
</Text.SmallBodyCopy>
|
|
812
|
+
<Accordion type="multiple" defaultValue={["section-1"]}>
|
|
813
|
+
<AccordionItem value="section-1">
|
|
814
|
+
<AccordionTrigger title="Section 1 (Open by default)" />
|
|
815
|
+
<AccordionContent>
|
|
816
|
+
<Text.SmallBodyCopy as="p">
|
|
817
|
+
No state management needed! The accordion component manages
|
|
818
|
+
which sections are open internally.
|
|
819
|
+
</Text.SmallBodyCopy>
|
|
820
|
+
</AccordionContent>
|
|
821
|
+
</AccordionItem>
|
|
822
|
+
<AccordionItem value="section-2">
|
|
823
|
+
<AccordionTrigger title="Section 2" />
|
|
824
|
+
<AccordionContent>
|
|
825
|
+
<Text.SmallBodyCopy as="p">
|
|
826
|
+
This is the simplest way to use the accordion when you don't
|
|
827
|
+
need to control or react to the open/closed state.
|
|
828
|
+
</Text.SmallBodyCopy>
|
|
829
|
+
</AccordionContent>
|
|
830
|
+
</AccordionItem>
|
|
831
|
+
<AccordionItem value="section-3">
|
|
832
|
+
<AccordionTrigger title="Section 3" />
|
|
833
|
+
<AccordionContent>
|
|
834
|
+
<Text.SmallBodyCopy as="p">
|
|
835
|
+
Perfect for most use cases where the accordion is purely
|
|
836
|
+
presentational.
|
|
837
|
+
</Text.SmallBodyCopy>
|
|
838
|
+
</AccordionContent>
|
|
839
|
+
</AccordionItem>
|
|
840
|
+
</Accordion>
|
|
841
|
+
</Box>
|
|
842
|
+
);
|
|
843
|
+
},
|
|
844
|
+
};
|
package/src/Accordion.tsx
CHANGED
|
@@ -21,41 +21,61 @@ export const Accordion = ({
|
|
|
21
21
|
triggerIcon = <Icon className="triggerIcon" name="chevron-down-outline" />,
|
|
22
22
|
type = "multiple",
|
|
23
23
|
styled = true,
|
|
24
|
+
value,
|
|
25
|
+
onValueChange,
|
|
24
26
|
}: TypeAccordionProps) => {
|
|
27
|
+
const contextValue = {
|
|
28
|
+
triggerIcon: React.isValidElement(triggerIcon) ? triggerIcon : null,
|
|
29
|
+
triggerPosition,
|
|
30
|
+
styled,
|
|
31
|
+
};
|
|
32
|
+
|
|
25
33
|
if (type === "single") {
|
|
34
|
+
// Determine if controlled or uncontrolled
|
|
35
|
+
const isControlled = value !== undefined;
|
|
36
|
+
|
|
26
37
|
return (
|
|
27
38
|
<RadixAccordion.Root
|
|
28
39
|
type="single"
|
|
40
|
+
value={
|
|
41
|
+
isControlled ? (Array.isArray(value) ? value[0] : value) : undefined
|
|
42
|
+
}
|
|
29
43
|
defaultValue={
|
|
30
|
-
|
|
44
|
+
!isControlled && defaultValue
|
|
45
|
+
? Array.isArray(defaultValue)
|
|
46
|
+
? defaultValue[0]
|
|
47
|
+
: defaultValue
|
|
48
|
+
: undefined
|
|
31
49
|
}
|
|
50
|
+
onValueChange={onValueChange as ((value: string) => void) | undefined}
|
|
32
51
|
collapsible={collapsible}
|
|
33
52
|
>
|
|
34
|
-
<AccordionContext.Provider
|
|
35
|
-
value={{
|
|
36
|
-
triggerIcon: React.isValidElement(triggerIcon) ? triggerIcon : null,
|
|
37
|
-
triggerPosition,
|
|
38
|
-
styled,
|
|
39
|
-
}}
|
|
40
|
-
>
|
|
53
|
+
<AccordionContext.Provider value={contextValue}>
|
|
41
54
|
{children}
|
|
42
55
|
</AccordionContext.Provider>
|
|
43
56
|
</RadixAccordion.Root>
|
|
44
57
|
);
|
|
45
58
|
}
|
|
46
59
|
|
|
60
|
+
// Multiple mode
|
|
61
|
+
const isControlled = value !== undefined;
|
|
62
|
+
|
|
47
63
|
return (
|
|
48
64
|
<RadixAccordion.Root
|
|
49
65
|
type="multiple"
|
|
50
|
-
|
|
66
|
+
value={
|
|
67
|
+
isControlled ? (Array.isArray(value) ? value : [value]) : undefined
|
|
68
|
+
}
|
|
69
|
+
defaultValue={
|
|
70
|
+
!isControlled && defaultValue
|
|
71
|
+
? Array.isArray(defaultValue)
|
|
72
|
+
? defaultValue
|
|
73
|
+
: [defaultValue]
|
|
74
|
+
: undefined
|
|
75
|
+
}
|
|
76
|
+
onValueChange={onValueChange as ((value: string[]) => void) | undefined}
|
|
51
77
|
>
|
|
52
|
-
<AccordionContext.Provider
|
|
53
|
-
value={{
|
|
54
|
-
triggerIcon: React.isValidElement(triggerIcon) ? triggerIcon : null,
|
|
55
|
-
triggerPosition,
|
|
56
|
-
styled,
|
|
57
|
-
}}
|
|
58
|
-
>
|
|
78
|
+
<AccordionContext.Provider value={contextValue}>
|
|
59
79
|
{children}
|
|
60
80
|
</AccordionContext.Provider>
|
|
61
81
|
</RadixAccordion.Root>
|
package/src/AccordionTypes.ts
CHANGED
|
@@ -22,11 +22,15 @@ export interface TypeAccordionSystemProps
|
|
|
22
22
|
export interface TypeAccordionProps {
|
|
23
23
|
children?: React.ReactNode;
|
|
24
24
|
collapsible?: boolean;
|
|
25
|
-
defaultValue
|
|
25
|
+
defaultValue?: string | string[];
|
|
26
26
|
triggerIcon?: React.ReactNode;
|
|
27
27
|
triggerPosition?: "left" | "right";
|
|
28
28
|
type?: "single" | "multiple";
|
|
29
29
|
styled?: boolean;
|
|
30
|
+
/** Controlled value for open accordion items (single mode: string, multiple mode: string[]) */
|
|
31
|
+
value?: string | string[];
|
|
32
|
+
/** Callback fired when accordion items change (single mode: string, multiple mode: string[]) */
|
|
33
|
+
onValueChange?: (value: string | string[]) => void;
|
|
30
34
|
}
|
|
31
35
|
|
|
32
36
|
export interface TypeRelatedAction {
|