@sproutsocial/seeds-react-accordion 0.1.6 → 0.1.7

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.
@@ -8,14 +8,14 @@ $ tsup --dts
8
8
  CLI Cleaning output folder
9
9
  CJS Build start
10
10
  ESM Build start
11
- ESM dist/esm/index.js 11.29 KB
12
- ESM dist/esm/index.js.map 21.69 KB
13
- ESM ⚡️ Build success in 143ms
14
11
  CJS dist/index.js 14.87 KB
15
12
  CJS dist/index.js.map 22.08 KB
16
- CJS ⚡️ Build success in 148ms
13
+ CJS ⚡️ Build success in 119ms
14
+ ESM dist/esm/index.js 11.29 KB
15
+ ESM dist/esm/index.js.map 21.69 KB
16
+ ESM ⚡️ Build success in 124ms
17
17
  DTS Build start
18
- DTS ⚡️ Build success in 12577ms
18
+ DTS ⚡️ Build success in 12117ms
19
19
  DTS dist/index.d.ts 2.66 KB
20
20
  DTS dist/index.d.mts 2.66 KB
21
- Done in 15.30s.
21
+ Done in 14.94s.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @sproutsocial/seeds-react-accordion
2
2
 
3
+ ## 0.1.7
4
+
5
+ ### Patch Changes
6
+
7
+ - 6302712: Switched Accordion defaultValue prop type from [string] to string[]
8
+
3
9
  ## 0.1.6
4
10
 
5
11
  ### Patch Changes
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Accordion.tsx","../../src/AccordionTypes.ts","../../src/AccordionItem.tsx","../../src/styles.ts","../../src/AccordionContent.tsx","../../src/AccordionTrigger.tsx"],"sourcesContent":["import React, { createContext, type ReactElement } from \"react\";\nimport * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport { type TypeAccordionProps } from \"./AccordionTypes\";\n\nexport const AccordionContext = createContext<{\n triggerIcon: ReactElement | null;\n triggerPosition: string;\n styled: boolean;\n}>({\n triggerIcon: null,\n triggerPosition: \"\",\n styled: false,\n});\n\nexport const Accordion = ({\n children,\n collapsible,\n defaultValue = [\"item-0\"],\n triggerPosition = \"right\",\n triggerIcon = <Icon className=\"triggerIcon\" name=\"chevron-down-outline\" />,\n type = \"multiple\",\n styled = true,\n}: 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 TypeTypographySystemProps,\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 TypeTypographySystemProps {}\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","import * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { type TypeAccordionItemProps } from \"./AccordionTypes\";\nimport { StyledAccordionItem } from \"./styles\";\n\nexport const AccordionItem = ({ children, value }: TypeAccordionItemProps) => {\n return (\n <StyledAccordionItem className=\"accordion-item\" value={value}>\n {children}\n </StyledAccordionItem>\n );\n};\n","import styled, { css } from \"styled-components\";\nimport * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport {\n BORDER,\n COMMON,\n FLEXBOX,\n LAYOUT,\n TYPOGRAPHY,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { type TypeAccordionSystemProps } from \"./AccordionTypes\";\n\ninterface StyledAccordionProps extends TypeAccordionSystemProps {\n $styled?: boolean;\n}\n\nexport const StyledAccordionItem = styled(RadixAccordion.Item)``;\n\nconst animations = css`\n @keyframes slideDown {\n from {\n height: 0;\n }\n to {\n height: var(--radix-accordion-content-height);\n }\n }\n\n @keyframes slideUp {\n from {\n height: var(--radix-accordion-content-height);\n }\n to {\n height: 0;\n }\n }\n`;\n\nexport const StyledRadixAccordionTrigger = styled(\n RadixAccordion.Trigger\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 ${({ theme }) => theme.typography[200]};\n\n .triggerIcon {\n color: ${({ theme }) => theme.colors.icon.base};\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 ${COMMON}\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 ${({ theme }) => theme.typography[200]};\n\n &[data-styled=\"true\"] {\n padding: ${({ theme }) => theme.space[400]};\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 ${BORDER}\n\t${LAYOUT}\n\t${FLEXBOX}\n`;\n\nexport const TriggerContainer = styled.div<StyledAccordionProps>`\n display: flex;\n align-items: center;\n\n &[data-styled=\"true\"] {\n border-top: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\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[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<StyledAccordionProps>`\n margin: 0;\n font-size: ${({ theme }) => theme.fontSizes[200]};\n font-weight: normal;\n\n &[data-styled=\"true\"] {\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n color: ${({ theme }) => theme.colors.text.headline};\n }\n\n ${COMMON}\n ${TYPOGRAPHY}\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 TypeAccordionSystemProps,\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\ninterface TypeAccordionTriggerProps extends TypeAccordionSystemProps {\n title: string;\n leftSlot?: React.ReactNode;\n relatedActions?: TypeRelatedAction[];\n overflowMenu?: TypeOverflowMenuConfig;\n rightSlot?: React.ReactNode;\n}\n\nexport const AccordionTrigger = ({\n children,\n leftSlot,\n relatedActions,\n overflowMenu,\n rightSlot,\n title,\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 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 fontStyle,\n fontWeight,\n lineHeight,\n textAlign,\n }).filter(([_, value]) => value != null)\n );\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 >\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 display=\"flex\" alignItems=\"center\" gap=\"300\">\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 >\n <Icon name={action.iconName} aria-hidden=\"true\" />\n </Button>\n ))}\n </Box>\n );\n\n return (\n <TriggerContainer data-styled={styled} {...triggerProps}>\n <StyledRadixAccordionTrigger data-styled={styled} {...spacingProps}>\n {triggerPosition === \"right\" ? (\n <StyledAccordionArea>\n <FlexCenter>\n {leftSlot}\n <TitleStyles data-styled={styled} {...typographyProps}>\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 data-styled={styled} {...typographyProps}>\n {title}\n </TitleStyles>\n </FlexCenter>\n {rightSlot}\n </StyledAccordionArea>\n )}\n </StyledRadixAccordionTrigger>\n <Box mr={300} display=\"flex\">\n {renderedOverflowMenu}\n {renderedRelatedActions}\n </Box>\n </TriggerContainer>\n );\n};\n"],"mappings":"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","names":["React","styled","React","RadixAccordion","jsx","jsx","styled","Icon","useContext","jsx","styled","useContext","Icon","children"]}
1
+ {"version":3,"sources":["../../src/Accordion.tsx","../../src/AccordionTypes.ts","../../src/AccordionItem.tsx","../../src/styles.ts","../../src/AccordionContent.tsx","../../src/AccordionTrigger.tsx"],"sourcesContent":["import React, { createContext, type ReactElement } from \"react\";\nimport * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport { type TypeAccordionProps } from \"./AccordionTypes\";\n\nexport const AccordionContext = createContext<{\n triggerIcon: ReactElement | null;\n triggerPosition: string;\n styled: boolean;\n}>({\n triggerIcon: null,\n triggerPosition: \"\",\n styled: false,\n});\n\nexport const Accordion = ({\n children,\n collapsible,\n defaultValue = [\"item-0\"],\n triggerPosition = \"right\",\n triggerIcon = <Icon className=\"triggerIcon\" name=\"chevron-down-outline\" />,\n type = \"multiple\",\n styled = true,\n}: 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 TypeTypographySystemProps,\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 TypeTypographySystemProps {}\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","import * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { type TypeAccordionItemProps } from \"./AccordionTypes\";\nimport { StyledAccordionItem } from \"./styles\";\n\nexport const AccordionItem = ({ children, value }: TypeAccordionItemProps) => {\n return (\n <StyledAccordionItem className=\"accordion-item\" value={value}>\n {children}\n </StyledAccordionItem>\n );\n};\n","import styled, { css } from \"styled-components\";\nimport * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport {\n BORDER,\n COMMON,\n FLEXBOX,\n LAYOUT,\n TYPOGRAPHY,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { type TypeAccordionSystemProps } from \"./AccordionTypes\";\n\ninterface StyledAccordionProps extends TypeAccordionSystemProps {\n $styled?: boolean;\n}\n\nexport const StyledAccordionItem = styled(RadixAccordion.Item)``;\n\nconst animations = css`\n @keyframes slideDown {\n from {\n height: 0;\n }\n to {\n height: var(--radix-accordion-content-height);\n }\n }\n\n @keyframes slideUp {\n from {\n height: var(--radix-accordion-content-height);\n }\n to {\n height: 0;\n }\n }\n`;\n\nexport const StyledRadixAccordionTrigger = styled(\n RadixAccordion.Trigger\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 ${({ theme }) => theme.typography[200]};\n\n .triggerIcon {\n color: ${({ theme }) => theme.colors.icon.base};\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 ${COMMON}\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 ${({ theme }) => theme.typography[200]};\n\n &[data-styled=\"true\"] {\n padding: ${({ theme }) => theme.space[400]};\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 ${BORDER}\n\t${LAYOUT}\n\t${FLEXBOX}\n`;\n\nexport const TriggerContainer = styled.div<StyledAccordionProps>`\n display: flex;\n align-items: center;\n\n &[data-styled=\"true\"] {\n border-top: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\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[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<StyledAccordionProps>`\n margin: 0;\n font-size: ${({ theme }) => theme.fontSizes[200]};\n font-weight: normal;\n\n &[data-styled=\"true\"] {\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n color: ${({ theme }) => theme.colors.text.headline};\n }\n\n ${COMMON}\n ${TYPOGRAPHY}\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 TypeAccordionSystemProps,\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\ninterface TypeAccordionTriggerProps extends TypeAccordionSystemProps {\n title: string;\n leftSlot?: React.ReactNode;\n relatedActions?: TypeRelatedAction[];\n overflowMenu?: TypeOverflowMenuConfig;\n rightSlot?: React.ReactNode;\n}\n\nexport const AccordionTrigger = ({\n children,\n leftSlot,\n relatedActions,\n overflowMenu,\n rightSlot,\n title,\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 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 fontStyle,\n fontWeight,\n lineHeight,\n textAlign,\n }).filter(([_, value]) => value != null)\n );\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 >\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 display=\"flex\" alignItems=\"center\" gap=\"300\">\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 >\n <Icon name={action.iconName} aria-hidden=\"true\" />\n </Button>\n ))}\n </Box>\n );\n\n return (\n <TriggerContainer data-styled={styled} {...triggerProps}>\n <StyledRadixAccordionTrigger data-styled={styled} {...spacingProps}>\n {triggerPosition === \"right\" ? (\n <StyledAccordionArea>\n <FlexCenter>\n {leftSlot}\n <TitleStyles data-styled={styled} {...typographyProps}>\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 data-styled={styled} {...typographyProps}>\n {title}\n </TitleStyles>\n </FlexCenter>\n {rightSlot}\n </StyledAccordionArea>\n )}\n </StyledRadixAccordionTrigger>\n <Box mr={300} display=\"flex\">\n {renderedOverflowMenu}\n {renderedRelatedActions}\n </Box>\n </TriggerContainer>\n );\n};\n"],"mappings":"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","names":["React","styled","React","RadixAccordion","jsx","jsx","styled","Icon","useContext","jsx","styled","useContext","Icon","children"]}
package/dist/index.d.mts CHANGED
@@ -9,7 +9,7 @@ interface TypeAccordionSystemProps extends Omit<React$1.ComponentPropsWithoutRef
9
9
  interface TypeAccordionProps {
10
10
  children?: React$1.ReactNode;
11
11
  collapsible?: boolean;
12
- defaultValue: string | [string];
12
+ defaultValue: string | string[];
13
13
  triggerIcon?: React$1.ReactNode;
14
14
  triggerPosition?: "left" | "right";
15
15
  type?: "single" | "multiple";
package/dist/index.d.ts CHANGED
@@ -9,7 +9,7 @@ interface TypeAccordionSystemProps extends Omit<React$1.ComponentPropsWithoutRef
9
9
  interface TypeAccordionProps {
10
10
  children?: React$1.ReactNode;
11
11
  collapsible?: boolean;
12
- defaultValue: string | [string];
12
+ defaultValue: string | string[];
13
13
  triggerIcon?: React$1.ReactNode;
14
14
  triggerPosition?: "left" | "right";
15
15
  type?: "single" | "multiple";
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","../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 TypeTypographySystemProps,\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 TypeTypographySystemProps {}\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","import * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { type TypeAccordionItemProps } from \"./AccordionTypes\";\nimport { StyledAccordionItem } from \"./styles\";\n\nexport const AccordionItem = ({ children, value }: TypeAccordionItemProps) => {\n return (\n <StyledAccordionItem className=\"accordion-item\" value={value}>\n {children}\n </StyledAccordionItem>\n );\n};\n","import styled, { css } from \"styled-components\";\nimport * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport {\n BORDER,\n COMMON,\n FLEXBOX,\n LAYOUT,\n TYPOGRAPHY,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { type TypeAccordionSystemProps } from \"./AccordionTypes\";\n\ninterface StyledAccordionProps extends TypeAccordionSystemProps {\n $styled?: boolean;\n}\n\nexport const StyledAccordionItem = styled(RadixAccordion.Item)``;\n\nconst animations = css`\n @keyframes slideDown {\n from {\n height: 0;\n }\n to {\n height: var(--radix-accordion-content-height);\n }\n }\n\n @keyframes slideUp {\n from {\n height: var(--radix-accordion-content-height);\n }\n to {\n height: 0;\n }\n }\n`;\n\nexport const StyledRadixAccordionTrigger = styled(\n RadixAccordion.Trigger\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 ${({ theme }) => theme.typography[200]};\n\n .triggerIcon {\n color: ${({ theme }) => theme.colors.icon.base};\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 ${COMMON}\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 ${({ theme }) => theme.typography[200]};\n\n &[data-styled=\"true\"] {\n padding: ${({ theme }) => theme.space[400]};\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 ${BORDER}\n\t${LAYOUT}\n\t${FLEXBOX}\n`;\n\nexport const TriggerContainer = styled.div<StyledAccordionProps>`\n display: flex;\n align-items: center;\n\n &[data-styled=\"true\"] {\n border-top: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\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[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<StyledAccordionProps>`\n margin: 0;\n font-size: ${({ theme }) => theme.fontSizes[200]};\n font-weight: normal;\n\n &[data-styled=\"true\"] {\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n color: ${({ theme }) => theme.colors.text.headline};\n }\n\n ${COMMON}\n ${TYPOGRAPHY}\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 TypeAccordionSystemProps,\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\ninterface TypeAccordionTriggerProps extends TypeAccordionSystemProps {\n title: string;\n leftSlot?: React.ReactNode;\n relatedActions?: TypeRelatedAction[];\n overflowMenu?: TypeOverflowMenuConfig;\n rightSlot?: React.ReactNode;\n}\n\nexport const AccordionTrigger = ({\n children,\n leftSlot,\n relatedActions,\n overflowMenu,\n rightSlot,\n title,\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 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 fontStyle,\n fontWeight,\n lineHeight,\n textAlign,\n }).filter(([_, value]) => value != null)\n );\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 >\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 display=\"flex\" alignItems=\"center\" gap=\"300\">\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 >\n <Icon name={action.iconName} aria-hidden=\"true\" />\n </Button>\n ))}\n </Box>\n );\n\n return (\n <TriggerContainer data-styled={styled} {...triggerProps}>\n <StyledRadixAccordionTrigger data-styled={styled} {...spacingProps}>\n {triggerPosition === \"right\" ? (\n <StyledAccordionArea>\n <FlexCenter>\n {leftSlot}\n <TitleStyles data-styled={styled} {...typographyProps}>\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 data-styled={styled} {...typographyProps}>\n {title}\n </TitleStyles>\n </FlexCenter>\n {rightSlot}\n </StyledAccordionArea>\n )}\n </StyledRadixAccordionTrigger>\n <Box mr={300} display=\"flex\">\n {renderedOverflowMenu}\n {renderedRelatedActions}\n </Box>\n </TriggerContainer>\n );\n};\n"],"mappings":"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","names":["import_seeds_react_icon","styled","React","RadixAccordion","RadixAccordion","import_seeds_react_system_props","styled","import_jsx_runtime","import_react","import_jsx_runtime","styled","import_seeds_react_icon","import_seeds_react_menu","import_react","import_jsx_runtime","styled","children"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/Accordion.tsx","../src/AccordionTypes.ts","../src/AccordionItem.tsx","../src/styles.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 TypeTypographySystemProps,\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 TypeTypographySystemProps {}\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","import * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport { type TypeAccordionItemProps } from \"./AccordionTypes\";\nimport { StyledAccordionItem } from \"./styles\";\n\nexport const AccordionItem = ({ children, value }: TypeAccordionItemProps) => {\n return (\n <StyledAccordionItem className=\"accordion-item\" value={value}>\n {children}\n </StyledAccordionItem>\n );\n};\n","import styled, { css } from \"styled-components\";\nimport * as RadixAccordion from \"@radix-ui/react-accordion\";\nimport {\n BORDER,\n COMMON,\n FLEXBOX,\n LAYOUT,\n TYPOGRAPHY,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport { type TypeAccordionSystemProps } from \"./AccordionTypes\";\n\ninterface StyledAccordionProps extends TypeAccordionSystemProps {\n $styled?: boolean;\n}\n\nexport const StyledAccordionItem = styled(RadixAccordion.Item)``;\n\nconst animations = css`\n @keyframes slideDown {\n from {\n height: 0;\n }\n to {\n height: var(--radix-accordion-content-height);\n }\n }\n\n @keyframes slideUp {\n from {\n height: var(--radix-accordion-content-height);\n }\n to {\n height: 0;\n }\n }\n`;\n\nexport const StyledRadixAccordionTrigger = styled(\n RadixAccordion.Trigger\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 ${({ theme }) => theme.typography[200]};\n\n .triggerIcon {\n color: ${({ theme }) => theme.colors.icon.base};\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 ${COMMON}\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 ${({ theme }) => theme.typography[200]};\n\n &[data-styled=\"true\"] {\n padding: ${({ theme }) => theme.space[400]};\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 ${BORDER}\n\t${LAYOUT}\n\t${FLEXBOX}\n`;\n\nexport const TriggerContainer = styled.div<StyledAccordionProps>`\n display: flex;\n align-items: center;\n\n &[data-styled=\"true\"] {\n border-top: ${({ theme }) =>\n `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};\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[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<StyledAccordionProps>`\n margin: 0;\n font-size: ${({ theme }) => theme.fontSizes[200]};\n font-weight: normal;\n\n &[data-styled=\"true\"] {\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n color: ${({ theme }) => theme.colors.text.headline};\n }\n\n ${COMMON}\n ${TYPOGRAPHY}\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 TypeAccordionSystemProps,\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\ninterface TypeAccordionTriggerProps extends TypeAccordionSystemProps {\n title: string;\n leftSlot?: React.ReactNode;\n relatedActions?: TypeRelatedAction[];\n overflowMenu?: TypeOverflowMenuConfig;\n rightSlot?: React.ReactNode;\n}\n\nexport const AccordionTrigger = ({\n children,\n leftSlot,\n relatedActions,\n overflowMenu,\n rightSlot,\n title,\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 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 fontStyle,\n fontWeight,\n lineHeight,\n textAlign,\n }).filter(([_, value]) => value != null)\n );\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 >\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 display=\"flex\" alignItems=\"center\" gap=\"300\">\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 >\n <Icon name={action.iconName} aria-hidden=\"true\" />\n </Button>\n ))}\n </Box>\n );\n\n return (\n <TriggerContainer data-styled={styled} {...triggerProps}>\n <StyledRadixAccordionTrigger data-styled={styled} {...spacingProps}>\n {triggerPosition === \"right\" ? (\n <StyledAccordionArea>\n <FlexCenter>\n {leftSlot}\n <TitleStyles data-styled={styled} {...typographyProps}>\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 data-styled={styled} {...typographyProps}>\n {title}\n </TitleStyles>\n </FlexCenter>\n {rightSlot}\n </StyledAccordionArea>\n )}\n </StyledRadixAccordionTrigger>\n <Box mr={300} display=\"flex\">\n {renderedOverflowMenu}\n {renderedRelatedActions}\n </Box>\n </TriggerContainer>\n );\n};\n"],"mappings":"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","names":["import_seeds_react_icon","styled","React","RadixAccordion","RadixAccordion","import_seeds_react_system_props","styled","import_jsx_runtime","import_react","import_jsx_runtime","styled","import_seeds_react_icon","import_seeds_react_menu","import_react","import_jsx_runtime","styled","children"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sproutsocial/seeds-react-accordion",
3
- "version": "0.1.6",
3
+ "version": "0.1.7",
4
4
  "description": "Seeds React Accordion",
5
5
  "author": "Sprout Social, Inc.",
6
6
  "license": "MIT",
@@ -22,7 +22,7 @@ export interface TypeAccordionSystemProps
22
22
  export interface TypeAccordionProps {
23
23
  children?: React.ReactNode;
24
24
  collapsible?: boolean;
25
- defaultValue: string | [string];
25
+ defaultValue: string | string[];
26
26
  triggerIcon?: React.ReactNode;
27
27
  triggerPosition?: "left" | "right";
28
28
  type?: "single" | "multiple";