npm - @contentful/f36-accordion - Versions diffs - 5.6.0 → 6.0.0-alpha.1 - Mend

@contentful/f36-accordion 5.6.0 → 6.0.0-alpha.1

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.

Files changed (7) hide show

package/dist/esm/index.js CHANGED Viewed

@@ -1,14 +1,3 @@
-import g from 'react';
-import { Box, useId, useControllableState } from '@contentful/f36-core';
-import { cx, css } from 'emotion';
-import n from '@contentful/f36-tokens';
-import { Subheading } from '@contentful/f36-typography';
-import { CaretDownIcon } from '@contentful/f36-icons';
-import { Collapse } from '@contentful/f36-collapse';
-var _=Object.defineProperty,j=Object.defineProperties;var U=Object.getOwnPropertyDescriptors;var y=Object.getOwnPropertySymbols;var $=Object.prototype.hasOwnProperty,k=Object.prototype.propertyIsEnumerable;var R=(o,e,r)=>e in o?_(o,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):o[e]=r,a=(o,e)=>{for(var r in e||(e={}))$.call(e,r)&&R(o,r,e[r]);if(y)for(var r of y(e))k.call(e,r)&&R(o,r,e[r]);return o},l=(o,e)=>j(o,U(e));var d=(o,e)=>{var r={};for(var t in o)$.call(o,t)&&e.indexOf(t)<0&&(r[t]=o[t]);if(o!=null&&y)for(var t of y(o))e.indexOf(t)<0&&k.call(o,t)&&(r[t]=o[t]);return r};var w=({className:o})=>({accordion:cx(css({boxSizing:"border-box",padding:"0",margin:"0",listStyle:"none","&:first-child":{borderTop:`1px solid ${n.gray300}`}}),o)});var K=(p,m)=>{var i=p,{align:o="end",children:e,className:r,testId:t="cf-ui-accordion"}=i,s=d(i,["align","children","className","testId"]);let x=w({className:r});return g.createElement(Box,l(a({as:"ul",className:x.accordion,testId:t},s),{ref:m}),g.Children.map(e,c=>g.isValidElement(c)?g.cloneElement(c,{align:o}):c))},D=g.forwardRef(K);var Q=({align:o})=>cx(css({display:"flex",flexDirection:"row",alignItems:"center",border:"0",margin:0,padding:n.spacingM,backgroundColor:"transparent",fontFamily:n.fontStackPrimary,fontSize:n.fontSizeL,fontWeight:n.fontWeightDemiBold,lineHeight:n.lineHeightL,color:n.gray800,width:"100%",minWidth:"9px",cursor:"pointer",transition:`background-color ${n.transitionDurationDefault} ${n.transitionEasingDefault},
-        box-shadow ${n.transitionDurationShort} ${n.transitionEasingDefault}`,"&:focus":{backgroundColor:n.gray100,borderRadius:n.borderRadiusMedium,boxShadow:n.glowPrimary,outline:"none"},"&:focus:not(:focus-visible)":{backgroundColor:"transparent",borderRadius:"unset",boxShadow:"unset"},"&:focus-visible":{backgroundColor:n.gray100,borderRadius:n.borderRadiusMedium,boxShadow:n.glowPrimary},"&:hover, &:focus:hover, &:focus-visible:hover":{backgroundColor:n.gray100}}),o==="end"&&css({flexDirection:"row-reverse",justifyContent:"space-between"})),Y=({align:o,isExpanded:e})=>cx(css({transform:"rotate(0deg)",transition:`transform ${n.transitionDurationDefault} ${n.transitionEasingDefault}`}),o==="end"&&css({marginLeft:n.spacingM}),o==="start"&&css({marginRight:n.spacingM}),e&&css({transform:"rotate(180deg)"})),v=o=>({accordionHeader:Q(o),accordionHeaderIcon:Y(o)});var h=x=>{var c=x,{children:o,onClick:e,isExpanded:r=!1,ariaId:t,element:s="h2",align:m="end",testId:p="cf-ui-accordion-header"}=c,i=d(c,["children","onClick","isExpanded","ariaId","element","align","testId"]);let u=v({align:m,isExpanded:r});return g.createElement(Subheading,l(a({},i),{testId:p,marginBottom:"none",as:s}),g.createElement("button",{type:"button","aria-expanded":r,"aria-controls":`accordion-panel--${t}`,id:`accordion--${t}`,className:u.accordionHeader,onClick:e},g.createElement(CaretDownIcon,{size:"tiny",className:u.accordionHeaderIcon,color:n.gray900}),o))};var M=()=>({accordionPanelContent:css({width:"100%",padding:`${n.spacingXs} ${n.spacingM} ${n.spacingM}`})});var E=m=>{var p=m,{children:o,isExpanded:e=!1,ariaId:r,testId:t="cf-ui-accordion-panel"}=p,s=d(p,["children","isExpanded","ariaId","testId"]);let i=M();return g.createElement(Collapse,a({"data-test-id":t,"aria-labelledby":`accordion--${r}`,isExpanded:e},s),g.createElement("div",{className:i.accordionPanelContent},o))};var O=({className:o})=>({accordionItem:cx(css({padding:"0",margin:"0",borderBottom:`1px solid ${n.colorElementMid}`,"&:first-child":{borderTop:`1px solid ${n.colorElementMid}`}}),o)});var po=(mo,u)=>{var H=mo,{title:o="Accordion Title",titleElement:e="h2",testId:r="cf-ui-accordion-item",onExpand:t,onCollapse:s,children:m,align:p="end",className:i,isExpanded:x}=H,c=d(H,["title","titleElement","testId","onExpand","onCollapse","children","align","className","isExpanded"]);let z=O({className:i}),P=useId(),{isOpen:b,handleOpen:F,handleClose:W}=useControllableState({isOpen:x,onOpen:t,onClose:s}),V=()=>{b?W():F();};return g.createElement(Box,l(a({as:"li",className:z.accordionItem,testId:`${r}-${P}`},c),{ref:u}),g.createElement(h,{onClick:V,isExpanded:b,element:e,ariaId:P,align:p},o),g.createElement(E,{ariaId:P,isExpanded:b},m))},S=g.forwardRef(po);var T=D;T.Item=S;
-export { T as Accordion, h as AccordionHeader, S as AccordionItem, E as AccordionPanel };
-//# sourceMappingURL=out.js.map
+import y,{useMemo}from'react';import {Box,useId,useControllableState}from'@contentful/f36-core';import n from'@contentful/f36-tokens';import {cx,css}from'@emotion/css';import {Subheading}from'@contentful/f36-typography';import {CaretDownIcon}from'@contentful/f36-icons';import {Collapse}from'@contentful/f36-collapse';var K=Object.defineProperty,Q=Object.defineProperties;var Y=Object.getOwnPropertyDescriptors;var g=Object.getOwnPropertySymbols;var R=Object.prototype.hasOwnProperty,$=Object.prototype.propertyIsEnumerable;var w=(o,e,r)=>e in o?K(o,e,{enumerable:true,configurable:true,writable:true,value:r}):o[e]=r,i=(o,e)=>{for(var r in e||(e={}))R.call(e,r)&&w(o,r,e[r]);if(g)for(var r of g(e))$.call(e,r)&&w(o,r,e[r]);return o},l=(o,e)=>Q(o,Y(e));var c=(o,e)=>{var r={};for(var t in o)R.call(o,t)&&e.indexOf(t)<0&&(r[t]=o[t]);if(o!=null&&g)for(var t of g(o))e.indexOf(t)<0&&$.call(o,t)&&(r[t]=o[t]);return r};var v=y.createContext(void 0),N=()=>{let o=y.useContext(v);if(o===void 0)throw new Error("component must be rendered within a Accordion component");return o},D=v.Provider;var M=({className:o})=>({accordion:cx(css({boxSizing:"border-box",padding:"0",margin:"0",listStyle:"none","&:first-child":{borderTop:`1px solid ${n.gray300}`}}),o)});var B=(a,p)=>{var s=a,{align:o="end",children:e,className:r,testId:t="cf-ui-accordion"}=s,d=c(s,["align","children","className","testId"]);let m=M({className:r}),x=useMemo(()=>({align:o}),[o]);return y.createElement(D,{value:x},y.createElement(Box,l(i({as:"ul",className:m.accordion,testId:t},d),{ref:p}),e))};B.displayName="Accordion";var T=y.forwardRef(B);var no=({align:o})=>cx(css({display:"flex",flexDirection:"row",alignItems:"center",border:"0",margin:0,padding:n.spacingM,backgroundColor:"transparent",fontFamily:n.fontStackPrimary,fontSize:n.fontSizeL,fontWeight:n.fontWeightDemiBold,lineHeight:n.lineHeightL,color:n.gray800,width:"100%",minWidth:"9px",cursor:"pointer",transition:`background-color ${n.transitionDurationDefault} ${n.transitionEasingDefault},
+        box-shadow ${n.transitionDurationShort} ${n.transitionEasingDefault}`,"&:focus":{backgroundColor:n.gray100,borderRadius:n.borderRadiusMedium,boxShadow:n.glowPrimary,outline:"none"},"&:focus:not(:focus-visible)":{backgroundColor:"transparent",borderRadius:"unset",boxShadow:"unset"},"&:focus-visible":{backgroundColor:n.gray100,borderRadius:n.borderRadiusMedium,boxShadow:n.glowPrimary},"&:hover, &:focus:hover, &:focus-visible:hover":{backgroundColor:n.gray100}}),o==="end"&&css({flexDirection:"row-reverse",justifyContent:"space-between"})),to=({align:o,isExpanded:e})=>cx(css({transform:"rotate(0deg)",transition:`transform ${n.transitionDurationDefault} ${n.transitionEasingDefault}`}),o==="end"&&css({marginLeft:n.spacingM}),o==="start"&&css({marginRight:n.spacingM}),e&&css({transform:"rotate(180deg)"})),O=o=>({accordionHeader:no(o),accordionHeaderIcon:to(o)});var u=s=>{var m=s,{children:o,onClick:e,isExpanded:r=false,ariaId:t,element:d="h2",testId:p="cf-ui-accordion-header"}=m,a=c(m,["children","onClick","isExpanded","ariaId","element","testId"]);let{align:x}=N(),P=O({align:x,isExpanded:r});return y.createElement(Subheading,l(i({testId:p},a),{marginBottom:"none",as:d}),y.createElement("button",{type:"button","aria-expanded":r,"aria-controls":`accordion-panel--${t}`,id:`accordion--${t}`,className:P.accordionHeader,onClick:e},y.createElement(CaretDownIcon,{size:"tiny",className:P.accordionHeaderIcon,color:n.gray900}),o))};u.displayName="AccordionHeader";var z=()=>({accordionPanelContent:css({width:"100%",padding:`${n.spacingXs} ${n.spacingM} ${n.spacingM}`})});var A=p=>{var a=p,{children:o,isExpanded:e=false,ariaId:r,testId:t="cf-ui-accordion-panel"}=a,d=c(a,["children","isExpanded","ariaId","testId"]);let s=z();return y.createElement(Collapse,i({testId:t,"aria-labelledby":`accordion--${r}`,isExpanded:e},d),y.createElement("div",{className:s.accordionPanelContent},o))};A.displayName="AccordionPanel";var V=({className:o})=>({accordionItem:cx(css({padding:"0",margin:"0",borderBottom:`1px solid ${n.colorElementMid}`,"&:first-child":{borderTop:`1px solid ${n.colorElementMid}`}}),o)});var j=(P,x)=>{var H=P,{title:o="Accordion Title",titleElement:e="h2",testId:r="cf-ui-accordion-item",onExpand:t,onCollapse:d,children:p,className:a,isExpanded:s}=H,m=c(H,["title","titleElement","testId","onExpand","onCollapse","children","className","isExpanded"]);let X=V({className:a}),C=useId(),{isOpen:b,handleOpen:q,handleClose:G}=useControllableState({isOpen:s,onOpen:t,onClose:d}),J=()=>{b?G():q();};return y.createElement(Box,l(i({as:"li",className:X.accordionItem,testId:`${r}-${C}`},m),{ref:x}),y.createElement(u,{onClick:J,isExpanded:b,element:e,ariaId:C},o),y.createElement(A,{ariaId:C,isExpanded:b},p))};j.displayName="AccordionItem";var S=y.forwardRef(j);var U=T;U.Item=S;export{U as Accordion,u as AccordionHeader,S as AccordionItem,A as AccordionPanel};//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/Accordion.tsx","../../src/Accordion.styles.ts","../../src/AccordionItem/AccordionItem.tsx","../../src/AccordionHeader/AccordionHeader.tsx","../../src/AccordionHeader/AccordionHeader.styles.ts","../../src/AccordionPanel/AccordionPanel.tsx","../../src/AccordionPanel/AccordionPanel.styles.ts","../../src/AccordionItem/AccordionItem.styles.ts","../../src/CompoundAccordion.tsx"],"names":["React","Box","css","cx","tokens","getAccordionStyles","className","_Accordion","_a","ref","_b","align","children","testId","otherProps","__objRest","styles","__spreadProps","__spreadValues","child","Accordion","useId","useControllableState","Subheading","CaretDownIcon","getHeaderStyles","getIconStyles","isExpanded","getAccordionHeaderStyles","props","AccordionHeader","onClick","ariaId","element","rest","Collapse","getAccordionPanelStyles","AccordionPanel","getAccordionItemStyles","_AccordionItem","title","titleElement","onExpand","onCollapse","id","isOpen","handleOpen","handleClose","handleOnClick","AccordionItem"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Box, type CommonProps, type ExpandProps } from '@contentful/f36-core';\n\nimport { getAccordionStyles } from './Accordion.styles';\n\nexport interface AccordionProps extends CommonProps {\n /*\n Specify the alignment of the chevron inside the accordion header\n * @default end\n /\n align?: 'start' \| 'end';\n /\n Child nodes to be rendered in the component\n /\n children?: React.ReactNode;\n}\n\nconst _Accordion = (\n {\n align = 'end',\n children,\n className,\n testId = 'cf-ui-accordion',\n ...otherProps\n }: ExpandProps<AccordionProps>,\n ref: React.Ref<HTMLUListElement>,\n) => {\n const styles = getAccordionStyles({ className });\n return (\n <Box\n as=\"ul\"\n className={styles.accordion}\n testId={testId}\n {...otherProps}\n ref={ref}\n >\n {React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return React.cloneElement(child, {\n align,\n });\n }\n return child;\n })}\n </Box>\n );\n};\n\nexport const Accordion = React.forwardRef(_Accordion);\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionStyles = ({ className }: { className?: string }) => ({\n accordion: cx(\n css({\n boxSizing: 'border-box',\n padding: '0',\n margin: '0',\n listStyle: 'none',\n '&:first-child': {\n borderTop: `1px solid ${tokens.gray300}`,\n },\n }),\n className,\n ),\n});\n","import React from 'react';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport {\n useId,\n Box,\n useControllableState,\n type CommonProps,\n type ExpandProps,\n} from '@contentful/f36-core';\n\nimport { AccordionHeader } from '../AccordionHeader/AccordionHeader';\nimport { AccordionPanel } from '../AccordionPanel/AccordionPanel';\nimport { getAccordionItemStyles } from './AccordionItem.styles';\n\nexport interface AccordionItemProps extends CommonProps {\n /\n The accordion title\n /\n title?: React.ReactNode;\n /\n The heading element that will be used by the AccordionHeader\n /\n titleElement?: HeadingElement;\n /\n The children of the AccordionItem are in fact the content of the accordion\n /\n children?: React.ReactNode;\n /\n A function to be called when the accordion item is opened\n /\n onExpand?: () => void;\n /\n A function to be called when the accordion item is closed\n /\n onCollapse?: () => void;\n /\n Specify the alignment of the chevron inside the accordion header\n /\n align?: 'start' \| 'end';\n\n /\n By default, the AccordionItem is uncontrolled (manage it's expanded state by itself)\n * But you can make it controlled by providing boolean\n /\n isExpanded?: boolean;\n}\n\nconst _AccordionItem = (\n {\n title = 'Accordion Title',\n titleElement = 'h2',\n testId = 'cf-ui-accordion-item',\n onExpand,\n onCollapse,\n children,\n align = 'end',\n className,\n isExpanded,\n ...otherProps\n }: ExpandProps<AccordionItemProps>,\n ref: React.Ref<HTMLLIElement>,\n) => {\n const styles = getAccordionItemStyles({ className });\n const id = useId();\n const { isOpen, handleOpen, handleClose } = useControllableState({\n isOpen: isExpanded,\n onOpen: onExpand,\n onClose: onCollapse,\n });\n\n const handleOnClick = () => {\n if (isOpen) {\n handleClose();\n } else {\n handleOpen();\n }\n };\n\n return (\n <Box\n as=\"li\"\n className={styles.accordionItem}\n testId={`${testId}-${id}`}\n {...otherProps}\n ref={ref}\n >\n <AccordionHeader\n onClick={handleOnClick}\n isExpanded={isOpen}\n element={titleElement}\n ariaId={id}\n align={align}\n >\n {title}\n </AccordionHeader>\n\n <AccordionPanel ariaId={id} isExpanded={isOpen}>\n {children}\n </AccordionPanel>\n </Box>\n );\n};\n\nexport const AccordionItem = React.forwardRef(_AccordionItem);\n","import React from 'react';\nimport tokens from '@contentful/f36-tokens';\nimport { Subheading, type HeadingElement } from '@contentful/f36-typography';\nimport { CaretDownIcon } from '@contentful/f36-icons';\nimport type { CommonProps } from '@contentful/f36-core';\n\nimport { getAccordionHeaderStyles } from './AccordionHeader.styles';\n\nexport interface AccordionHeaderProps extends CommonProps {\n /\n Child nodes to be rendered in the component\n /\n children?: React.ReactNode;\n /\n The function that will be called once the user clicks on the accordion title\n /\n onClick: VoidFunction;\n /\n A boolean that tells if the accordion should be expanded or collapsed\n /\n isExpanded: boolean;\n /\n An unique id that is necessary for the aria roles and properties\n /\n ariaId: string;\n /\n The heading element that will be used by the Subheading component\n /\n element?: HeadingElement;\n /\n Specify the alignment of the chevron inside the accordion header\n /\n align?: 'start' \| 'end';\n}\n\nexport const AccordionHeader = ({\n children,\n onClick,\n isExpanded = false,\n ariaId,\n element = 'h2',\n align = 'end',\n testId = 'cf-ui-accordion-header',\n ...rest\n}: AccordionHeaderProps) => {\n const styles = getAccordionHeaderStyles({ align, isExpanded });\n\n return (\n <Subheading {...rest} testId={testId} marginBottom=\"none\" as={element}>\n <button\n type=\"button\"\n aria-expanded={isExpanded}\n aria-controls={`accordion-panel--${ariaId}`}\n id={`accordion--${ariaId}`}\n className={styles.accordionHeader}\n onClick={onClick}\n >\n <CaretDownIcon\n size=\"tiny\"\n className={styles.accordionHeaderIcon}\n color={tokens.gray900}\n />\n {children}\n </button>\n </Subheading>\n );\n};\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\ntype StyleProps = {\n align: 'start' \| 'end';\n isExpanded: boolean;\n};\n\nconst getHeaderStyles = ({ align }: StyleProps) =>\n cx(\n css({\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n border: '0',\n margin: 0, // remove the default button margin in Safari.\n padding: tokens.spacingM,\n backgroundColor: 'transparent',\n fontFamily: tokens.fontStackPrimary,\n fontSize: tokens.fontSizeL,\n fontWeight: tokens.fontWeightDemiBold,\n lineHeight: tokens.lineHeightL,\n color: tokens.gray800,\n width: '100%',\n minWidth: '9px',\n cursor: 'pointer',\n transition: `background-color ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault},\n box-shadow ${tokens.transitionDurationShort} ${tokens.transitionEasingDefault}`,\n '&:focus': {\n backgroundColor: tokens.gray100,\n borderRadius: tokens.borderRadiusMedium,\n boxShadow: tokens.glowPrimary,\n outline: 'none',\n },\n '&:focus:not(:focus-visible)': {\n backgroundColor: 'transparent',\n borderRadius: 'unset',\n boxShadow: 'unset',\n },\n '&:focus-visible': {\n backgroundColor: tokens.gray100,\n borderRadius: tokens.borderRadiusMedium,\n boxShadow: tokens.glowPrimary,\n },\n '&:hover, &:focus:hover, &:focus-visible:hover': {\n backgroundColor: tokens.gray100,\n },\n }),\n align === 'end' &&\n css({\n flexDirection: 'row-reverse',\n justifyContent: 'space-between',\n }),\n );\n\nconst getIconStyles = ({ align, isExpanded }: StyleProps) =>\n cx(\n css({\n transform: 'rotate(0deg)',\n transition: `transform ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n }),\n align === 'end' && css({ marginLeft: tokens.spacingM }),\n align === 'start' && css({ marginRight: tokens.spacingM }),\n isExpanded &&\n css({\n transform: 'rotate(180deg)',\n }),\n );\n\nexport const getAccordionHeaderStyles = (props: StyleProps) => ({\n accordionHeader: getHeaderStyles(props),\n accordionHeaderIcon: getIconStyles(props),\n});\n","import React, { FC } from 'react';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\nimport { Collapse } from '@contentful/f36-collapse';\n\nimport { getAccordionPanelStyles } from './AccordionPanel.styles';\n\nexport interface AccordionPanelProps extends CommonProps {\n /\n Child nodes to be rendered in the component\n /\n children?: React.ReactNode;\n /\n A boolean that tells if the accordion should be expanded or collapsed\n /\n isExpanded: boolean;\n /\n An unique id that is necessary for the aria roles and properties\n */\n ariaId: string;\n}\n\nexport const AccordionPanel: FC<ExpandProps<AccordionPanelProps>> = ({\n children,\n isExpanded = false,\n ariaId,\n testId = 'cf-ui-accordion-panel',\n ...otherProps\n}: AccordionPanelProps) => {\n const styles = getAccordionPanelStyles();\n\n return (\n <Collapse\n data-test-id={testId}\n aria-labelledby={`accordion--${ariaId}`}\n isExpanded={isExpanded}\n {...otherProps}\n >\n <div className={styles.accordionPanelContent}>{children}</div>\n </Collapse>\n );\n};\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionPanelStyles = () => {\n return {\n accordionPanelContent: css({\n width: '100%',\n padding: `${tokens.spacingXs} ${tokens.spacingM} ${tokens.spacingM}`,\n }),\n };\n};\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionItemStyles = ({\n className,\n}: {\n className?: string;\n}) => ({\n accordionItem: cx(\n css({\n padding: '0',\n margin: '0',\n borderBottom: `1px solid ${tokens.colorElementMid}`,\n '&:first-child': {\n borderTop: `1px solid ${tokens.colorElementMid}`,\n },\n }),\n className,\n ),\n});\n","import { Accordion as OriginalAccordion } from './Accordion';\nimport { AccordionItem } from './AccordionItem/AccordionItem';\n\ntype CompoundAccordion = typeof OriginalAccordion & {\n Item: typeof AccordionItem;\n};\n\nexport const Accordion = OriginalAccordion as CompoundAccordion;\nAccordion.Item = AccordionItem;\n"]}
1	+ {"version":3,"sources":["../../src/Accordion.tsx","../../src/AccordionContext.ts","../../src/Accordion.styles.ts","../../src/AccordionHeader/AccordionHeader.styles.ts","../../src/AccordionHeader/AccordionHeader.tsx","../../src/AccordionPanel/AccordionPanel.styles.ts","../../src/AccordionPanel/AccordionPanel.tsx","../../src/AccordionItem/AccordionItem.styles.ts","../../src/AccordionItem/AccordionItem.tsx","../../src/CompoundAccordion.tsx"],"names":["AccordionContext","React","useAccordionContext","context","AccordionContextProvider","getAccordionStyles","className","cx","css","tokens","AccordionBase","_a","ref","_b","align","children","testId","otherProps","__objRest","styles","contextValue","useMemo","Box","__spreadProps","__spreadValues","Accordion","getHeaderStyles","getIconStyles","isExpanded","getAccordionHeaderStyles","props","AccordionHeader","onClick","ariaId","element","rest","Subheading","CaretDownIcon","getAccordionPanelStyles","AccordionPanel","Collapse","getAccordionItemStyles","AccordionItemBase","title","titleElement","onExpand","onCollapse","id","useId","isOpen","handleOpen","handleClose","useControllableState","handleOnClick","AccordionItem"],"mappings":"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","file":"index.js","sourcesContent":["import React, { useMemo } from 'react';\nimport { Box, type CommonProps, type ExpandProps } from '@contentful/f36-core';\nimport {\n AccordionContextProvider,\n AccordionContextType,\n} from './AccordionContext';\nimport { getAccordionStyles } from './Accordion.styles';\n\nexport interface AccordionProps extends CommonProps {\n /*\n Specify the alignment of the chevron inside the accordion header\n * @default end\n /\n align?: 'start' \| 'end';\n /\n Child nodes to be rendered in the component\n /\n children?: React.ReactNode;\n}\n\nconst AccordionBase = (\n {\n align = 'end',\n children,\n className,\n testId = 'cf-ui-accordion',\n ...otherProps\n }: ExpandProps<AccordionProps>,\n ref: React.Ref<HTMLUListElement>,\n) => {\n const styles = getAccordionStyles({ className });\n\n const contextValue: AccordionContextType = useMemo(\n () => ({\n align,\n }),\n [align],\n );\n\n return (\n <AccordionContextProvider value={contextValue}>\n <Box\n as=\"ul\"\n className={styles.accordion}\n testId={testId}\n {...otherProps}\n ref={ref}\n >\n {children}\n </Box>\n </AccordionContextProvider>\n );\n};\n\nAccordionBase.displayName = 'Accordion';\n\nexport const Accordion = React.forwardRef(AccordionBase);\n","import React from 'react';\n\nexport type AccordionContextType = {\n align: 'start' \| 'end';\n};\n\nconst AccordionContext = React.createContext<AccordionContextType \| undefined>(\n undefined,\n);\n\nexport const useAccordionContext = () => {\n const context = React.useContext(AccordionContext);\n\n if (context === undefined) {\n throw new Error('component must be rendered within a Accordion component');\n }\n\n return context;\n};\n\nexport const AccordionContextProvider = AccordionContext.Provider;\n","import tokens from '@contentful/f36-tokens';\nimport { css, cx } from '@emotion/css';\n\nexport const getAccordionStyles = ({ className }: { className?: string }) => ({\n accordion: cx(\n css({\n boxSizing: 'border-box',\n padding: '0',\n margin: '0',\n listStyle: 'none',\n '&:first-child': {\n borderTop: `1px solid ${tokens.gray300}`,\n },\n }),\n className,\n ),\n});\n","import { css, cx } from '@emotion/css';\nimport tokens from '@contentful/f36-tokens';\n\ntype StyleProps = {\n align: 'start' \| 'end';\n isExpanded: boolean;\n};\n\nconst getHeaderStyles = ({ align }: StyleProps) =>\n cx(\n css({\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n border: '0',\n margin: 0, // remove the default button margin in Safari.\n padding: tokens.spacingM,\n backgroundColor: 'transparent',\n fontFamily: tokens.fontStackPrimary,\n fontSize: tokens.fontSizeL,\n fontWeight: tokens.fontWeightDemiBold,\n lineHeight: tokens.lineHeightL,\n color: tokens.gray800,\n width: '100%',\n minWidth: '9px',\n cursor: 'pointer',\n transition: `background-color ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault},\n box-shadow ${tokens.transitionDurationShort} ${tokens.transitionEasingDefault}`,\n '&:focus': {\n backgroundColor: tokens.gray100,\n borderRadius: tokens.borderRadiusMedium,\n boxShadow: tokens.glowPrimary,\n outline: 'none',\n },\n '&:focus:not(:focus-visible)': {\n backgroundColor: 'transparent',\n borderRadius: 'unset',\n boxShadow: 'unset',\n },\n '&:focus-visible': {\n backgroundColor: tokens.gray100,\n borderRadius: tokens.borderRadiusMedium,\n boxShadow: tokens.glowPrimary,\n },\n '&:hover, &:focus:hover, &:focus-visible:hover': {\n backgroundColor: tokens.gray100,\n },\n }),\n align === 'end' &&\n css({\n flexDirection: 'row-reverse',\n justifyContent: 'space-between',\n }),\n );\n\nconst getIconStyles = ({ align, isExpanded }: StyleProps) =>\n cx(\n css({\n transform: 'rotate(0deg)',\n transition: `transform ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n }),\n align === 'end' && css({ marginLeft: tokens.spacingM }),\n align === 'start' && css({ marginRight: tokens.spacingM }),\n isExpanded &&\n css({\n transform: 'rotate(180deg)',\n }),\n );\n\nexport const getAccordionHeaderStyles = (props: StyleProps) => ({\n accordionHeader: getHeaderStyles(props),\n accordionHeaderIcon: getIconStyles(props),\n});\n","import React from 'react';\nimport tokens from '@contentful/f36-tokens';\nimport { Subheading, type HeadingElement } from '@contentful/f36-typography';\nimport { CaretDownIcon } from '@contentful/f36-icons';\nimport type { CommonProps } from '@contentful/f36-core';\n\nimport { getAccordionHeaderStyles } from './AccordionHeader.styles';\nimport { useAccordionContext } from '../AccordionContext';\n\nexport interface AccordionHeaderProps extends CommonProps {\n /\n Child nodes to be rendered in the component\n /\n children?: React.ReactNode;\n /\n The function that will be called once the user clicks on the accordion title\n /\n onClick: VoidFunction;\n /\n A boolean that tells if the accordion should be expanded or collapsed\n /\n isExpanded: boolean;\n /\n An unique id that is necessary for the aria roles and properties\n /\n ariaId: string;\n /\n The heading element that will be used by the Subheading component\n /\n element?: HeadingElement;\n}\n\nexport const AccordionHeader = ({\n children,\n onClick,\n isExpanded = false,\n ariaId,\n element = 'h2',\n testId = 'cf-ui-accordion-header',\n ...rest\n}: AccordionHeaderProps) => {\n const { align } = useAccordionContext();\n const styles = getAccordionHeaderStyles({ align, isExpanded });\n\n return (\n <Subheading testId={testId} {...rest} marginBottom=\"none\" as={element}>\n <button\n type=\"button\"\n aria-expanded={isExpanded}\n aria-controls={`accordion-panel--${ariaId}`}\n id={`accordion--${ariaId}`}\n className={styles.accordionHeader}\n onClick={onClick}\n >\n <CaretDownIcon\n size=\"tiny\"\n className={styles.accordionHeaderIcon}\n color={tokens.gray900}\n />\n {children}\n </button>\n </Subheading>\n );\n};\n\nAccordionHeader.displayName = 'AccordionHeader';\n","import { css } from '@emotion/css';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionPanelStyles = () => {\n return {\n accordionPanelContent: css({\n width: '100%',\n padding: `${tokens.spacingXs} ${tokens.spacingM} ${tokens.spacingM}`,\n }),\n };\n};\n","import React, { FC } from 'react';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\nimport { Collapse } from '@contentful/f36-collapse';\n\nimport { getAccordionPanelStyles } from './AccordionPanel.styles';\n\nexport interface AccordionPanelProps extends CommonProps {\n /\n Child nodes to be rendered in the component\n /\n children?: React.ReactNode;\n /\n A boolean that tells if the accordion should be expanded or collapsed\n /\n isExpanded: boolean;\n /\n An unique id that is necessary for the aria roles and properties\n /\n ariaId: string;\n}\n\nexport const AccordionPanel: FC<ExpandProps<AccordionPanelProps>> = ({\n children,\n isExpanded = false,\n ariaId,\n testId = 'cf-ui-accordion-panel',\n ...otherProps\n}: AccordionPanelProps) => {\n const styles = getAccordionPanelStyles();\n\n return (\n <Collapse\n testId={testId}\n aria-labelledby={`accordion--${ariaId}`}\n isExpanded={isExpanded}\n {...otherProps}\n >\n <div className={styles.accordionPanelContent}>{children}</div>\n </Collapse>\n );\n};\n\nAccordionPanel.displayName = 'AccordionPanel';\n","import { css, cx } from '@emotion/css';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionItemStyles = ({\n className,\n}: {\n className?: string;\n}) => ({\n accordionItem: cx(\n css({\n padding: '0',\n margin: '0',\n borderBottom: `1px solid ${tokens.colorElementMid}`,\n '&:first-child': {\n borderTop: `1px solid ${tokens.colorElementMid}`,\n },\n }),\n className,\n ),\n});\n","import React from 'react';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport {\n useId,\n Box,\n useControllableState,\n type CommonProps,\n type ExpandProps,\n} from '@contentful/f36-core';\n\nimport { AccordionHeader } from '../AccordionHeader/AccordionHeader';\nimport { AccordionPanel } from '../AccordionPanel/AccordionPanel';\nimport { getAccordionItemStyles } from './AccordionItem.styles';\n\nexport interface AccordionItemProps extends CommonProps {\n /\n The accordion title\n /\n title?: React.ReactNode;\n /\n The heading element that will be used by the AccordionHeader\n /\n titleElement?: HeadingElement;\n /\n The children of the AccordionItem are in fact the content of the accordion\n /\n children?: React.ReactNode;\n /\n A function to be called when the accordion item is opened\n /\n onExpand?: () => void;\n /\n A function to be called when the accordion item is closed\n /\n onCollapse?: () => void;\n /\n By default, the AccordionItem is uncontrolled (manage it's expanded state by itself)\n * But you can make it controlled by providing boolean\n */\n isExpanded?: boolean;\n}\n\nconst AccordionItemBase = (\n {\n title = 'Accordion Title',\n titleElement = 'h2',\n testId = 'cf-ui-accordion-item',\n onExpand,\n onCollapse,\n children,\n className,\n isExpanded,\n ...otherProps\n }: ExpandProps<AccordionItemProps>,\n ref: React.Ref<HTMLLIElement>,\n) => {\n const styles = getAccordionItemStyles({ className });\n const id = useId();\n const { isOpen, handleOpen, handleClose } = useControllableState({\n isOpen: isExpanded,\n onOpen: onExpand,\n onClose: onCollapse,\n });\n\n const handleOnClick = () => {\n if (isOpen) {\n handleClose();\n } else {\n handleOpen();\n }\n };\n\n return (\n <Box\n as=\"li\"\n className={styles.accordionItem}\n testId={`${testId}-${id}`}\n {...otherProps}\n ref={ref}\n >\n <AccordionHeader\n onClick={handleOnClick}\n isExpanded={isOpen}\n element={titleElement}\n ariaId={id}\n >\n {title}\n </AccordionHeader>\n\n <AccordionPanel ariaId={id} isExpanded={isOpen}>\n {children}\n </AccordionPanel>\n </Box>\n );\n};\n\nAccordionItemBase.displayName = 'AccordionItem';\n\nexport const AccordionItem = React.forwardRef(AccordionItemBase);\n","import { Accordion as OriginalAccordion } from './Accordion';\nimport { AccordionItem } from './AccordionItem/AccordionItem';\n\ntype CompoundAccordion = typeof OriginalAccordion & {\n Item: typeof AccordionItem;\n};\n\nexport const Accordion = OriginalAccordion as CompoundAccordion;\nAccordion.Item = AccordionItem;\n"]}

package/dist/index.d.mts CHANGED Viewed

@@ -36,10 +36,6 @@ interface AccordionItemProps extends CommonProps {
      * A function to be called when the accordion item is closed
      */
     onCollapse?: () => void;
-    /**
-     * Specify the alignment of the chevron inside the accordion header
-     */
-    align?: 'start' | 'end';
     /**
      * By default, the AccordionItem is uncontrolled (manage it's expanded state by itself)
      * But you can make it controlled by providing boolean
@@ -48,7 +44,7 @@ interface AccordionItemProps extends CommonProps {
 }
 declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLLIElement>>;
-declare type CompoundAccordion = typeof Accordion$1 & {
+type CompoundAccordion = typeof Accordion$1 & {
     Item: typeof AccordionItem;
 };
 declare const Accordion: CompoundAccordion;
@@ -74,12 +70,11 @@ interface AccordionHeaderProps extends CommonProps {
      * The heading element that will be used by the Subheading component
      */
     element?: HeadingElement;
-    /**
-     * Specify the alignment of the chevron inside the accordion header
-     */
-    align?: 'start' | 'end';
 }
-declare const AccordionHeader: ({ children, onClick, isExpanded, ariaId, element, align, testId, ...rest }: AccordionHeaderProps) => JSX.Element;
+declare const AccordionHeader: {
+    ({ children, onClick, isExpanded, ariaId, element, testId, ...rest }: AccordionHeaderProps): React.JSX.Element;
+    displayName: string;
+};
 interface AccordionPanelProps extends CommonProps {
     /**
@@ -97,4 +92,4 @@ interface AccordionPanelProps extends CommonProps {
 }
 declare const AccordionPanel: FC<ExpandProps<AccordionPanelProps>>;
-export { Accordion, AccordionHeader, AccordionHeaderProps, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, AccordionProps };
+export { Accordion, AccordionHeader, type AccordionHeaderProps, AccordionItem, type AccordionItemProps, AccordionPanel, type AccordionPanelProps, type AccordionProps };

package/dist/index.d.ts CHANGED Viewed

@@ -36,10 +36,6 @@ interface AccordionItemProps extends CommonProps {
      * A function to be called when the accordion item is closed
      */
     onCollapse?: () => void;
-    /**
-     * Specify the alignment of the chevron inside the accordion header
-     */
-    align?: 'start' | 'end';
     /**
      * By default, the AccordionItem is uncontrolled (manage it's expanded state by itself)
      * But you can make it controlled by providing boolean
@@ -48,7 +44,7 @@ interface AccordionItemProps extends CommonProps {
 }
 declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLLIElement>>;
-declare type CompoundAccordion = typeof Accordion$1 & {
+type CompoundAccordion = typeof Accordion$1 & {
     Item: typeof AccordionItem;
 };
 declare const Accordion: CompoundAccordion;
@@ -74,12 +70,11 @@ interface AccordionHeaderProps extends CommonProps {
      * The heading element that will be used by the Subheading component
      */
     element?: HeadingElement;
-    /**
-     * Specify the alignment of the chevron inside the accordion header
-     */
-    align?: 'start' | 'end';
 }
-declare const AccordionHeader: ({ children, onClick, isExpanded, ariaId, element, align, testId, ...rest }: AccordionHeaderProps) => JSX.Element;
+declare const AccordionHeader: {
+    ({ children, onClick, isExpanded, ariaId, element, testId, ...rest }: AccordionHeaderProps): React.JSX.Element;
+    displayName: string;
+};
 interface AccordionPanelProps extends CommonProps {
     /**
@@ -97,4 +92,4 @@ interface AccordionPanelProps extends CommonProps {
 }
 declare const AccordionPanel: FC<ExpandProps<AccordionPanelProps>>;
-export { Accordion, AccordionHeader, AccordionHeaderProps, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, AccordionProps };
+export { Accordion, AccordionHeader, type AccordionHeaderProps, AccordionItem, type AccordionItemProps, AccordionPanel, type AccordionPanelProps, type AccordionProps };

package/dist/index.js CHANGED Viewed

@@ -1,24 +1,3 @@
-'use strict';
-var g = require('react');
-var f36Core = require('@contentful/f36-core');
-var emotion = require('emotion');
-var n = require('@contentful/f36-tokens');
-var f36Typography = require('@contentful/f36-typography');
-var f36Icons = require('@contentful/f36-icons');
-var f36Collapse = require('@contentful/f36-collapse');
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-var g__default = /*#__PURE__*/_interopDefault(g);
-var n__default = /*#__PURE__*/_interopDefault(n);
-var _=Object.defineProperty,j=Object.defineProperties;var U=Object.getOwnPropertyDescriptors;var y=Object.getOwnPropertySymbols;var $=Object.prototype.hasOwnProperty,k=Object.prototype.propertyIsEnumerable;var R=(o,e,r)=>e in o?_(o,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):o[e]=r,a=(o,e)=>{for(var r in e||(e={}))$.call(e,r)&&R(o,r,e[r]);if(y)for(var r of y(e))k.call(e,r)&&R(o,r,e[r]);return o},l=(o,e)=>j(o,U(e));var d=(o,e)=>{var r={};for(var t in o)$.call(o,t)&&e.indexOf(t)<0&&(r[t]=o[t]);if(o!=null&&y)for(var t of y(o))e.indexOf(t)<0&&k.call(o,t)&&(r[t]=o[t]);return r};var w=({className:o})=>({accordion:emotion.cx(emotion.css({boxSizing:"border-box",padding:"0",margin:"0",listStyle:"none","&:first-child":{borderTop:`1px solid ${n__default.default.gray300}`}}),o)});var K=(p,m)=>{var i=p,{align:o="end",children:e,className:r,testId:t="cf-ui-accordion"}=i,s=d(i,["align","children","className","testId"]);let x=w({className:r});return g__default.default.createElement(f36Core.Box,l(a({as:"ul",className:x.accordion,testId:t},s),{ref:m}),g__default.default.Children.map(e,c=>g__default.default.isValidElement(c)?g__default.default.cloneElement(c,{align:o}):c))},D=g__default.default.forwardRef(K);var Q=({align:o})=>emotion.cx(emotion.css({display:"flex",flexDirection:"row",alignItems:"center",border:"0",margin:0,padding:n__default.default.spacingM,backgroundColor:"transparent",fontFamily:n__default.default.fontStackPrimary,fontSize:n__default.default.fontSizeL,fontWeight:n__default.default.fontWeightDemiBold,lineHeight:n__default.default.lineHeightL,color:n__default.default.gray800,width:"100%",minWidth:"9px",cursor:"pointer",transition:`background-color ${n__default.default.transitionDurationDefault} ${n__default.default.transitionEasingDefault},
-        box-shadow ${n__default.default.transitionDurationShort} ${n__default.default.transitionEasingDefault}`,"&:focus":{backgroundColor:n__default.default.gray100,borderRadius:n__default.default.borderRadiusMedium,boxShadow:n__default.default.glowPrimary,outline:"none"},"&:focus:not(:focus-visible)":{backgroundColor:"transparent",borderRadius:"unset",boxShadow:"unset"},"&:focus-visible":{backgroundColor:n__default.default.gray100,borderRadius:n__default.default.borderRadiusMedium,boxShadow:n__default.default.glowPrimary},"&:hover, &:focus:hover, &:focus-visible:hover":{backgroundColor:n__default.default.gray100}}),o==="end"&&emotion.css({flexDirection:"row-reverse",justifyContent:"space-between"})),Y=({align:o,isExpanded:e})=>emotion.cx(emotion.css({transform:"rotate(0deg)",transition:`transform ${n__default.default.transitionDurationDefault} ${n__default.default.transitionEasingDefault}`}),o==="end"&&emotion.css({marginLeft:n__default.default.spacingM}),o==="start"&&emotion.css({marginRight:n__default.default.spacingM}),e&&emotion.css({transform:"rotate(180deg)"})),v=o=>({accordionHeader:Q(o),accordionHeaderIcon:Y(o)});var h=x=>{var c=x,{children:o,onClick:e,isExpanded:r=!1,ariaId:t,element:s="h2",align:m="end",testId:p="cf-ui-accordion-header"}=c,i=d(c,["children","onClick","isExpanded","ariaId","element","align","testId"]);let u=v({align:m,isExpanded:r});return g__default.default.createElement(f36Typography.Subheading,l(a({},i),{testId:p,marginBottom:"none",as:s}),g__default.default.createElement("button",{type:"button","aria-expanded":r,"aria-controls":`accordion-panel--${t}`,id:`accordion--${t}`,className:u.accordionHeader,onClick:e},g__default.default.createElement(f36Icons.CaretDownIcon,{size:"tiny",className:u.accordionHeaderIcon,color:n__default.default.gray900}),o))};var M=()=>({accordionPanelContent:emotion.css({width:"100%",padding:`${n__default.default.spacingXs} ${n__default.default.spacingM} ${n__default.default.spacingM}`})});var E=m=>{var p=m,{children:o,isExpanded:e=!1,ariaId:r,testId:t="cf-ui-accordion-panel"}=p,s=d(p,["children","isExpanded","ariaId","testId"]);let i=M();return g__default.default.createElement(f36Collapse.Collapse,a({"data-test-id":t,"aria-labelledby":`accordion--${r}`,isExpanded:e},s),g__default.default.createElement("div",{className:i.accordionPanelContent},o))};var O=({className:o})=>({accordionItem:emotion.cx(emotion.css({padding:"0",margin:"0",borderBottom:`1px solid ${n__default.default.colorElementMid}`,"&:first-child":{borderTop:`1px solid ${n__default.default.colorElementMid}`}}),o)});var po=(mo,u)=>{var H=mo,{title:o="Accordion Title",titleElement:e="h2",testId:r="cf-ui-accordion-item",onExpand:t,onCollapse:s,children:m,align:p="end",className:i,isExpanded:x}=H,c=d(H,["title","titleElement","testId","onExpand","onCollapse","children","align","className","isExpanded"]);let z=O({className:i}),P=f36Core.useId(),{isOpen:b,handleOpen:F,handleClose:W}=f36Core.useControllableState({isOpen:x,onOpen:t,onClose:s}),V=()=>{b?W():F();};return g__default.default.createElement(f36Core.Box,l(a({as:"li",className:z.accordionItem,testId:`${r}-${P}`},c),{ref:u}),g__default.default.createElement(h,{onClick:V,isExpanded:b,element:e,ariaId:P,align:p},o),g__default.default.createElement(E,{ariaId:P,isExpanded:b},m))},S=g__default.default.forwardRef(po);var T=D;T.Item=S;
-exports.Accordion = T;
-exports.AccordionHeader = h;
-exports.AccordionItem = S;
-exports.AccordionPanel = E;
-//# sourceMappingURL=out.js.map
+'use strict';var y=require('react'),f36Core=require('@contentful/f36-core'),n=require('@contentful/f36-tokens'),css=require('@emotion/css'),f36Typography=require('@contentful/f36-typography'),f36Icons=require('@contentful/f36-icons'),f36Collapse=require('@contentful/f36-collapse');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var y__default=/*#__PURE__*/_interopDefault(y);var n__default=/*#__PURE__*/_interopDefault(n);var K=Object.defineProperty,Q=Object.defineProperties;var Y=Object.getOwnPropertyDescriptors;var g=Object.getOwnPropertySymbols;var R=Object.prototype.hasOwnProperty,$=Object.prototype.propertyIsEnumerable;var w=(o,e,r)=>e in o?K(o,e,{enumerable:true,configurable:true,writable:true,value:r}):o[e]=r,i=(o,e)=>{for(var r in e||(e={}))R.call(e,r)&&w(o,r,e[r]);if(g)for(var r of g(e))$.call(e,r)&&w(o,r,e[r]);return o},l=(o,e)=>Q(o,Y(e));var c=(o,e)=>{var r={};for(var t in o)R.call(o,t)&&e.indexOf(t)<0&&(r[t]=o[t]);if(o!=null&&g)for(var t of g(o))e.indexOf(t)<0&&$.call(o,t)&&(r[t]=o[t]);return r};var v=y__default.default.createContext(void 0),N=()=>{let o=y__default.default.useContext(v);if(o===void 0)throw new Error("component must be rendered within a Accordion component");return o},D=v.Provider;var M=({className:o})=>({accordion:css.cx(css.css({boxSizing:"border-box",padding:"0",margin:"0",listStyle:"none","&:first-child":{borderTop:`1px solid ${n__default.default.gray300}`}}),o)});var B=(a,p)=>{var s=a,{align:o="end",children:e,className:r,testId:t="cf-ui-accordion"}=s,d=c(s,["align","children","className","testId"]);let m=M({className:r}),x=y.useMemo(()=>({align:o}),[o]);return y__default.default.createElement(D,{value:x},y__default.default.createElement(f36Core.Box,l(i({as:"ul",className:m.accordion,testId:t},d),{ref:p}),e))};B.displayName="Accordion";var T=y__default.default.forwardRef(B);var no=({align:o})=>css.cx(css.css({display:"flex",flexDirection:"row",alignItems:"center",border:"0",margin:0,padding:n__default.default.spacingM,backgroundColor:"transparent",fontFamily:n__default.default.fontStackPrimary,fontSize:n__default.default.fontSizeL,fontWeight:n__default.default.fontWeightDemiBold,lineHeight:n__default.default.lineHeightL,color:n__default.default.gray800,width:"100%",minWidth:"9px",cursor:"pointer",transition:`background-color ${n__default.default.transitionDurationDefault} ${n__default.default.transitionEasingDefault},
+        box-shadow ${n__default.default.transitionDurationShort} ${n__default.default.transitionEasingDefault}`,"&:focus":{backgroundColor:n__default.default.gray100,borderRadius:n__default.default.borderRadiusMedium,boxShadow:n__default.default.glowPrimary,outline:"none"},"&:focus:not(:focus-visible)":{backgroundColor:"transparent",borderRadius:"unset",boxShadow:"unset"},"&:focus-visible":{backgroundColor:n__default.default.gray100,borderRadius:n__default.default.borderRadiusMedium,boxShadow:n__default.default.glowPrimary},"&:hover, &:focus:hover, &:focus-visible:hover":{backgroundColor:n__default.default.gray100}}),o==="end"&&css.css({flexDirection:"row-reverse",justifyContent:"space-between"})),to=({align:o,isExpanded:e})=>css.cx(css.css({transform:"rotate(0deg)",transition:`transform ${n__default.default.transitionDurationDefault} ${n__default.default.transitionEasingDefault}`}),o==="end"&&css.css({marginLeft:n__default.default.spacingM}),o==="start"&&css.css({marginRight:n__default.default.spacingM}),e&&css.css({transform:"rotate(180deg)"})),O=o=>({accordionHeader:no(o),accordionHeaderIcon:to(o)});var u=s=>{var m=s,{children:o,onClick:e,isExpanded:r=false,ariaId:t,element:d="h2",testId:p="cf-ui-accordion-header"}=m,a=c(m,["children","onClick","isExpanded","ariaId","element","testId"]);let{align:x}=N(),P=O({align:x,isExpanded:r});return y__default.default.createElement(f36Typography.Subheading,l(i({testId:p},a),{marginBottom:"none",as:d}),y__default.default.createElement("button",{type:"button","aria-expanded":r,"aria-controls":`accordion-panel--${t}`,id:`accordion--${t}`,className:P.accordionHeader,onClick:e},y__default.default.createElement(f36Icons.CaretDownIcon,{size:"tiny",className:P.accordionHeaderIcon,color:n__default.default.gray900}),o))};u.displayName="AccordionHeader";var z=()=>({accordionPanelContent:css.css({width:"100%",padding:`${n__default.default.spacingXs} ${n__default.default.spacingM} ${n__default.default.spacingM}`})});var A=p=>{var a=p,{children:o,isExpanded:e=false,ariaId:r,testId:t="cf-ui-accordion-panel"}=a,d=c(a,["children","isExpanded","ariaId","testId"]);let s=z();return y__default.default.createElement(f36Collapse.Collapse,i({testId:t,"aria-labelledby":`accordion--${r}`,isExpanded:e},d),y__default.default.createElement("div",{className:s.accordionPanelContent},o))};A.displayName="AccordionPanel";var V=({className:o})=>({accordionItem:css.cx(css.css({padding:"0",margin:"0",borderBottom:`1px solid ${n__default.default.colorElementMid}`,"&:first-child":{borderTop:`1px solid ${n__default.default.colorElementMid}`}}),o)});var j=(P,x)=>{var H=P,{title:o="Accordion Title",titleElement:e="h2",testId:r="cf-ui-accordion-item",onExpand:t,onCollapse:d,children:p,className:a,isExpanded:s}=H,m=c(H,["title","titleElement","testId","onExpand","onCollapse","children","className","isExpanded"]);let X=V({className:a}),C=f36Core.useId(),{isOpen:b,handleOpen:q,handleClose:G}=f36Core.useControllableState({isOpen:s,onOpen:t,onClose:d}),J=()=>{b?G():q();};return y__default.default.createElement(f36Core.Box,l(i({as:"li",className:X.accordionItem,testId:`${r}-${C}`},m),{ref:x}),y__default.default.createElement(u,{onClick:J,isExpanded:b,element:e,ariaId:C},o),y__default.default.createElement(A,{ariaId:C,isExpanded:b},p))};j.displayName="AccordionItem";var S=y__default.default.forwardRef(j);var U=T;U.Item=S;exports.Accordion=U;exports.AccordionHeader=u;exports.AccordionItem=S;exports.AccordionPanel=A;//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/Accordion.tsx","../src/Accordion.styles.ts","../src/AccordionItem/AccordionItem.tsx","../src/AccordionHeader/AccordionHeader.tsx","../src/AccordionHeader/AccordionHeader.styles.ts","../src/AccordionPanel/AccordionPanel.tsx","../src/AccordionPanel/AccordionPanel.styles.ts","../src/AccordionItem/AccordionItem.styles.ts","../src/CompoundAccordion.tsx"],"names":["React","Box","css","cx","tokens","getAccordionStyles","className","_Accordion","_a","ref","_b","align","children","testId","otherProps","__objRest","styles","__spreadProps","__spreadValues","child","Accordion","useId","useControllableState","Subheading","CaretDownIcon","getHeaderStyles","getIconStyles","isExpanded","getAccordionHeaderStyles","props","AccordionHeader","onClick","ariaId","element","rest","Collapse","getAccordionPanelStyles","AccordionPanel","getAccordionItemStyles","_AccordionItem","title","titleElement","onExpand","onCollapse","id","isOpen","handleOpen","handleClose","handleOnClick","AccordionItem"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Box, type CommonProps, type ExpandProps } from '@contentful/f36-core';\n\nimport { getAccordionStyles } from './Accordion.styles';\n\nexport interface AccordionProps extends CommonProps {\n /*\n Specify the alignment of the chevron inside the accordion header\n * @default end\n /\n align?: 'start' \| 'end';\n /\n Child nodes to be rendered in the component\n /\n children?: React.ReactNode;\n}\n\nconst _Accordion = (\n {\n align = 'end',\n children,\n className,\n testId = 'cf-ui-accordion',\n ...otherProps\n }: ExpandProps<AccordionProps>,\n ref: React.Ref<HTMLUListElement>,\n) => {\n const styles = getAccordionStyles({ className });\n return (\n <Box\n as=\"ul\"\n className={styles.accordion}\n testId={testId}\n {...otherProps}\n ref={ref}\n >\n {React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return React.cloneElement(child, {\n align,\n });\n }\n return child;\n })}\n </Box>\n );\n};\n\nexport const Accordion = React.forwardRef(_Accordion);\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionStyles = ({ className }: { className?: string }) => ({\n accordion: cx(\n css({\n boxSizing: 'border-box',\n padding: '0',\n margin: '0',\n listStyle: 'none',\n '&:first-child': {\n borderTop: `1px solid ${tokens.gray300}`,\n },\n }),\n className,\n ),\n});\n","import React from 'react';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport {\n useId,\n Box,\n useControllableState,\n type CommonProps,\n type ExpandProps,\n} from '@contentful/f36-core';\n\nimport { AccordionHeader } from '../AccordionHeader/AccordionHeader';\nimport { AccordionPanel } from '../AccordionPanel/AccordionPanel';\nimport { getAccordionItemStyles } from './AccordionItem.styles';\n\nexport interface AccordionItemProps extends CommonProps {\n /\n The accordion title\n /\n title?: React.ReactNode;\n /\n The heading element that will be used by the AccordionHeader\n /\n titleElement?: HeadingElement;\n /\n The children of the AccordionItem are in fact the content of the accordion\n /\n children?: React.ReactNode;\n /\n A function to be called when the accordion item is opened\n /\n onExpand?: () => void;\n /\n A function to be called when the accordion item is closed\n /\n onCollapse?: () => void;\n /\n Specify the alignment of the chevron inside the accordion header\n /\n align?: 'start' \| 'end';\n\n /\n By default, the AccordionItem is uncontrolled (manage it's expanded state by itself)\n * But you can make it controlled by providing boolean\n /\n isExpanded?: boolean;\n}\n\nconst _AccordionItem = (\n {\n title = 'Accordion Title',\n titleElement = 'h2',\n testId = 'cf-ui-accordion-item',\n onExpand,\n onCollapse,\n children,\n align = 'end',\n className,\n isExpanded,\n ...otherProps\n }: ExpandProps<AccordionItemProps>,\n ref: React.Ref<HTMLLIElement>,\n) => {\n const styles = getAccordionItemStyles({ className });\n const id = useId();\n const { isOpen, handleOpen, handleClose } = useControllableState({\n isOpen: isExpanded,\n onOpen: onExpand,\n onClose: onCollapse,\n });\n\n const handleOnClick = () => {\n if (isOpen) {\n handleClose();\n } else {\n handleOpen();\n }\n };\n\n return (\n <Box\n as=\"li\"\n className={styles.accordionItem}\n testId={`${testId}-${id}`}\n {...otherProps}\n ref={ref}\n >\n <AccordionHeader\n onClick={handleOnClick}\n isExpanded={isOpen}\n element={titleElement}\n ariaId={id}\n align={align}\n >\n {title}\n </AccordionHeader>\n\n <AccordionPanel ariaId={id} isExpanded={isOpen}>\n {children}\n </AccordionPanel>\n </Box>\n );\n};\n\nexport const AccordionItem = React.forwardRef(_AccordionItem);\n","import React from 'react';\nimport tokens from '@contentful/f36-tokens';\nimport { Subheading, type HeadingElement } from '@contentful/f36-typography';\nimport { CaretDownIcon } from '@contentful/f36-icons';\nimport type { CommonProps } from '@contentful/f36-core';\n\nimport { getAccordionHeaderStyles } from './AccordionHeader.styles';\n\nexport interface AccordionHeaderProps extends CommonProps {\n /\n Child nodes to be rendered in the component\n /\n children?: React.ReactNode;\n /\n The function that will be called once the user clicks on the accordion title\n /\n onClick: VoidFunction;\n /\n A boolean that tells if the accordion should be expanded or collapsed\n /\n isExpanded: boolean;\n /\n An unique id that is necessary for the aria roles and properties\n /\n ariaId: string;\n /\n The heading element that will be used by the Subheading component\n /\n element?: HeadingElement;\n /\n Specify the alignment of the chevron inside the accordion header\n /\n align?: 'start' \| 'end';\n}\n\nexport const AccordionHeader = ({\n children,\n onClick,\n isExpanded = false,\n ariaId,\n element = 'h2',\n align = 'end',\n testId = 'cf-ui-accordion-header',\n ...rest\n}: AccordionHeaderProps) => {\n const styles = getAccordionHeaderStyles({ align, isExpanded });\n\n return (\n <Subheading {...rest} testId={testId} marginBottom=\"none\" as={element}>\n <button\n type=\"button\"\n aria-expanded={isExpanded}\n aria-controls={`accordion-panel--${ariaId}`}\n id={`accordion--${ariaId}`}\n className={styles.accordionHeader}\n onClick={onClick}\n >\n <CaretDownIcon\n size=\"tiny\"\n className={styles.accordionHeaderIcon}\n color={tokens.gray900}\n />\n {children}\n </button>\n </Subheading>\n );\n};\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\ntype StyleProps = {\n align: 'start' \| 'end';\n isExpanded: boolean;\n};\n\nconst getHeaderStyles = ({ align }: StyleProps) =>\n cx(\n css({\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n border: '0',\n margin: 0, // remove the default button margin in Safari.\n padding: tokens.spacingM,\n backgroundColor: 'transparent',\n fontFamily: tokens.fontStackPrimary,\n fontSize: tokens.fontSizeL,\n fontWeight: tokens.fontWeightDemiBold,\n lineHeight: tokens.lineHeightL,\n color: tokens.gray800,\n width: '100%',\n minWidth: '9px',\n cursor: 'pointer',\n transition: `background-color ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault},\n box-shadow ${tokens.transitionDurationShort} ${tokens.transitionEasingDefault}`,\n '&:focus': {\n backgroundColor: tokens.gray100,\n borderRadius: tokens.borderRadiusMedium,\n boxShadow: tokens.glowPrimary,\n outline: 'none',\n },\n '&:focus:not(:focus-visible)': {\n backgroundColor: 'transparent',\n borderRadius: 'unset',\n boxShadow: 'unset',\n },\n '&:focus-visible': {\n backgroundColor: tokens.gray100,\n borderRadius: tokens.borderRadiusMedium,\n boxShadow: tokens.glowPrimary,\n },\n '&:hover, &:focus:hover, &:focus-visible:hover': {\n backgroundColor: tokens.gray100,\n },\n }),\n align === 'end' &&\n css({\n flexDirection: 'row-reverse',\n justifyContent: 'space-between',\n }),\n );\n\nconst getIconStyles = ({ align, isExpanded }: StyleProps) =>\n cx(\n css({\n transform: 'rotate(0deg)',\n transition: `transform ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n }),\n align === 'end' && css({ marginLeft: tokens.spacingM }),\n align === 'start' && css({ marginRight: tokens.spacingM }),\n isExpanded &&\n css({\n transform: 'rotate(180deg)',\n }),\n );\n\nexport const getAccordionHeaderStyles = (props: StyleProps) => ({\n accordionHeader: getHeaderStyles(props),\n accordionHeaderIcon: getIconStyles(props),\n});\n","import React, { FC } from 'react';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\nimport { Collapse } from '@contentful/f36-collapse';\n\nimport { getAccordionPanelStyles } from './AccordionPanel.styles';\n\nexport interface AccordionPanelProps extends CommonProps {\n /\n Child nodes to be rendered in the component\n /\n children?: React.ReactNode;\n /\n A boolean that tells if the accordion should be expanded or collapsed\n /\n isExpanded: boolean;\n /\n An unique id that is necessary for the aria roles and properties\n */\n ariaId: string;\n}\n\nexport const AccordionPanel: FC<ExpandProps<AccordionPanelProps>> = ({\n children,\n isExpanded = false,\n ariaId,\n testId = 'cf-ui-accordion-panel',\n ...otherProps\n}: AccordionPanelProps) => {\n const styles = getAccordionPanelStyles();\n\n return (\n <Collapse\n data-test-id={testId}\n aria-labelledby={`accordion--${ariaId}`}\n isExpanded={isExpanded}\n {...otherProps}\n >\n <div className={styles.accordionPanelContent}>{children}</div>\n </Collapse>\n );\n};\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionPanelStyles = () => {\n return {\n accordionPanelContent: css({\n width: '100%',\n padding: `${tokens.spacingXs} ${tokens.spacingM} ${tokens.spacingM}`,\n }),\n };\n};\n","import { css, cx } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionItemStyles = ({\n className,\n}: {\n className?: string;\n}) => ({\n accordionItem: cx(\n css({\n padding: '0',\n margin: '0',\n borderBottom: `1px solid ${tokens.colorElementMid}`,\n '&:first-child': {\n borderTop: `1px solid ${tokens.colorElementMid}`,\n },\n }),\n className,\n ),\n});\n","import { Accordion as OriginalAccordion } from './Accordion';\nimport { AccordionItem } from './AccordionItem/AccordionItem';\n\ntype CompoundAccordion = typeof OriginalAccordion & {\n Item: typeof AccordionItem;\n};\n\nexport const Accordion = OriginalAccordion as CompoundAccordion;\nAccordion.Item = AccordionItem;\n"]}
1	+ {"version":3,"sources":["../src/Accordion.tsx","../src/AccordionContext.ts","../src/Accordion.styles.ts","../src/AccordionHeader/AccordionHeader.styles.ts","../src/AccordionHeader/AccordionHeader.tsx","../src/AccordionPanel/AccordionPanel.styles.ts","../src/AccordionPanel/AccordionPanel.tsx","../src/AccordionItem/AccordionItem.styles.ts","../src/AccordionItem/AccordionItem.tsx","../src/CompoundAccordion.tsx"],"names":["AccordionContext","React","useAccordionContext","context","AccordionContextProvider","getAccordionStyles","className","cx","css","tokens","AccordionBase","_a","ref","_b","align","children","testId","otherProps","__objRest","styles","contextValue","useMemo","Box","__spreadProps","__spreadValues","Accordion","getHeaderStyles","getIconStyles","isExpanded","getAccordionHeaderStyles","props","AccordionHeader","onClick","ariaId","element","rest","Subheading","CaretDownIcon","getAccordionPanelStyles","AccordionPanel","Collapse","getAccordionItemStyles","AccordionItemBase","title","titleElement","onExpand","onCollapse","id","useId","isOpen","handleOpen","handleClose","useControllableState","handleOnClick","AccordionItem"],"mappings":"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","file":"index.js","sourcesContent":["import React, { useMemo } from 'react';\nimport { Box, type CommonProps, type ExpandProps } from '@contentful/f36-core';\nimport {\n AccordionContextProvider,\n AccordionContextType,\n} from './AccordionContext';\nimport { getAccordionStyles } from './Accordion.styles';\n\nexport interface AccordionProps extends CommonProps {\n /*\n Specify the alignment of the chevron inside the accordion header\n * @default end\n /\n align?: 'start' \| 'end';\n /\n Child nodes to be rendered in the component\n /\n children?: React.ReactNode;\n}\n\nconst AccordionBase = (\n {\n align = 'end',\n children,\n className,\n testId = 'cf-ui-accordion',\n ...otherProps\n }: ExpandProps<AccordionProps>,\n ref: React.Ref<HTMLUListElement>,\n) => {\n const styles = getAccordionStyles({ className });\n\n const contextValue: AccordionContextType = useMemo(\n () => ({\n align,\n }),\n [align],\n );\n\n return (\n <AccordionContextProvider value={contextValue}>\n <Box\n as=\"ul\"\n className={styles.accordion}\n testId={testId}\n {...otherProps}\n ref={ref}\n >\n {children}\n </Box>\n </AccordionContextProvider>\n );\n};\n\nAccordionBase.displayName = 'Accordion';\n\nexport const Accordion = React.forwardRef(AccordionBase);\n","import React from 'react';\n\nexport type AccordionContextType = {\n align: 'start' \| 'end';\n};\n\nconst AccordionContext = React.createContext<AccordionContextType \| undefined>(\n undefined,\n);\n\nexport const useAccordionContext = () => {\n const context = React.useContext(AccordionContext);\n\n if (context === undefined) {\n throw new Error('component must be rendered within a Accordion component');\n }\n\n return context;\n};\n\nexport const AccordionContextProvider = AccordionContext.Provider;\n","import tokens from '@contentful/f36-tokens';\nimport { css, cx } from '@emotion/css';\n\nexport const getAccordionStyles = ({ className }: { className?: string }) => ({\n accordion: cx(\n css({\n boxSizing: 'border-box',\n padding: '0',\n margin: '0',\n listStyle: 'none',\n '&:first-child': {\n borderTop: `1px solid ${tokens.gray300}`,\n },\n }),\n className,\n ),\n});\n","import { css, cx } from '@emotion/css';\nimport tokens from '@contentful/f36-tokens';\n\ntype StyleProps = {\n align: 'start' \| 'end';\n isExpanded: boolean;\n};\n\nconst getHeaderStyles = ({ align }: StyleProps) =>\n cx(\n css({\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n border: '0',\n margin: 0, // remove the default button margin in Safari.\n padding: tokens.spacingM,\n backgroundColor: 'transparent',\n fontFamily: tokens.fontStackPrimary,\n fontSize: tokens.fontSizeL,\n fontWeight: tokens.fontWeightDemiBold,\n lineHeight: tokens.lineHeightL,\n color: tokens.gray800,\n width: '100%',\n minWidth: '9px',\n cursor: 'pointer',\n transition: `background-color ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault},\n box-shadow ${tokens.transitionDurationShort} ${tokens.transitionEasingDefault}`,\n '&:focus': {\n backgroundColor: tokens.gray100,\n borderRadius: tokens.borderRadiusMedium,\n boxShadow: tokens.glowPrimary,\n outline: 'none',\n },\n '&:focus:not(:focus-visible)': {\n backgroundColor: 'transparent',\n borderRadius: 'unset',\n boxShadow: 'unset',\n },\n '&:focus-visible': {\n backgroundColor: tokens.gray100,\n borderRadius: tokens.borderRadiusMedium,\n boxShadow: tokens.glowPrimary,\n },\n '&:hover, &:focus:hover, &:focus-visible:hover': {\n backgroundColor: tokens.gray100,\n },\n }),\n align === 'end' &&\n css({\n flexDirection: 'row-reverse',\n justifyContent: 'space-between',\n }),\n );\n\nconst getIconStyles = ({ align, isExpanded }: StyleProps) =>\n cx(\n css({\n transform: 'rotate(0deg)',\n transition: `transform ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n }),\n align === 'end' && css({ marginLeft: tokens.spacingM }),\n align === 'start' && css({ marginRight: tokens.spacingM }),\n isExpanded &&\n css({\n transform: 'rotate(180deg)',\n }),\n );\n\nexport const getAccordionHeaderStyles = (props: StyleProps) => ({\n accordionHeader: getHeaderStyles(props),\n accordionHeaderIcon: getIconStyles(props),\n});\n","import React from 'react';\nimport tokens from '@contentful/f36-tokens';\nimport { Subheading, type HeadingElement } from '@contentful/f36-typography';\nimport { CaretDownIcon } from '@contentful/f36-icons';\nimport type { CommonProps } from '@contentful/f36-core';\n\nimport { getAccordionHeaderStyles } from './AccordionHeader.styles';\nimport { useAccordionContext } from '../AccordionContext';\n\nexport interface AccordionHeaderProps extends CommonProps {\n /\n Child nodes to be rendered in the component\n /\n children?: React.ReactNode;\n /\n The function that will be called once the user clicks on the accordion title\n /\n onClick: VoidFunction;\n /\n A boolean that tells if the accordion should be expanded or collapsed\n /\n isExpanded: boolean;\n /\n An unique id that is necessary for the aria roles and properties\n /\n ariaId: string;\n /\n The heading element that will be used by the Subheading component\n /\n element?: HeadingElement;\n}\n\nexport const AccordionHeader = ({\n children,\n onClick,\n isExpanded = false,\n ariaId,\n element = 'h2',\n testId = 'cf-ui-accordion-header',\n ...rest\n}: AccordionHeaderProps) => {\n const { align } = useAccordionContext();\n const styles = getAccordionHeaderStyles({ align, isExpanded });\n\n return (\n <Subheading testId={testId} {...rest} marginBottom=\"none\" as={element}>\n <button\n type=\"button\"\n aria-expanded={isExpanded}\n aria-controls={`accordion-panel--${ariaId}`}\n id={`accordion--${ariaId}`}\n className={styles.accordionHeader}\n onClick={onClick}\n >\n <CaretDownIcon\n size=\"tiny\"\n className={styles.accordionHeaderIcon}\n color={tokens.gray900}\n />\n {children}\n </button>\n </Subheading>\n );\n};\n\nAccordionHeader.displayName = 'AccordionHeader';\n","import { css } from '@emotion/css';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionPanelStyles = () => {\n return {\n accordionPanelContent: css({\n width: '100%',\n padding: `${tokens.spacingXs} ${tokens.spacingM} ${tokens.spacingM}`,\n }),\n };\n};\n","import React, { FC } from 'react';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\nimport { Collapse } from '@contentful/f36-collapse';\n\nimport { getAccordionPanelStyles } from './AccordionPanel.styles';\n\nexport interface AccordionPanelProps extends CommonProps {\n /\n Child nodes to be rendered in the component\n /\n children?: React.ReactNode;\n /\n A boolean that tells if the accordion should be expanded or collapsed\n /\n isExpanded: boolean;\n /\n An unique id that is necessary for the aria roles and properties\n /\n ariaId: string;\n}\n\nexport const AccordionPanel: FC<ExpandProps<AccordionPanelProps>> = ({\n children,\n isExpanded = false,\n ariaId,\n testId = 'cf-ui-accordion-panel',\n ...otherProps\n}: AccordionPanelProps) => {\n const styles = getAccordionPanelStyles();\n\n return (\n <Collapse\n testId={testId}\n aria-labelledby={`accordion--${ariaId}`}\n isExpanded={isExpanded}\n {...otherProps}\n >\n <div className={styles.accordionPanelContent}>{children}</div>\n </Collapse>\n );\n};\n\nAccordionPanel.displayName = 'AccordionPanel';\n","import { css, cx } from '@emotion/css';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAccordionItemStyles = ({\n className,\n}: {\n className?: string;\n}) => ({\n accordionItem: cx(\n css({\n padding: '0',\n margin: '0',\n borderBottom: `1px solid ${tokens.colorElementMid}`,\n '&:first-child': {\n borderTop: `1px solid ${tokens.colorElementMid}`,\n },\n }),\n className,\n ),\n});\n","import React from 'react';\nimport type { HeadingElement } from '@contentful/f36-typography';\nimport {\n useId,\n Box,\n useControllableState,\n type CommonProps,\n type ExpandProps,\n} from '@contentful/f36-core';\n\nimport { AccordionHeader } from '../AccordionHeader/AccordionHeader';\nimport { AccordionPanel } from '../AccordionPanel/AccordionPanel';\nimport { getAccordionItemStyles } from './AccordionItem.styles';\n\nexport interface AccordionItemProps extends CommonProps {\n /\n The accordion title\n /\n title?: React.ReactNode;\n /\n The heading element that will be used by the AccordionHeader\n /\n titleElement?: HeadingElement;\n /\n The children of the AccordionItem are in fact the content of the accordion\n /\n children?: React.ReactNode;\n /\n A function to be called when the accordion item is opened\n /\n onExpand?: () => void;\n /\n A function to be called when the accordion item is closed\n /\n onCollapse?: () => void;\n /\n By default, the AccordionItem is uncontrolled (manage it's expanded state by itself)\n * But you can make it controlled by providing boolean\n */\n isExpanded?: boolean;\n}\n\nconst AccordionItemBase = (\n {\n title = 'Accordion Title',\n titleElement = 'h2',\n testId = 'cf-ui-accordion-item',\n onExpand,\n onCollapse,\n children,\n className,\n isExpanded,\n ...otherProps\n }: ExpandProps<AccordionItemProps>,\n ref: React.Ref<HTMLLIElement>,\n) => {\n const styles = getAccordionItemStyles({ className });\n const id = useId();\n const { isOpen, handleOpen, handleClose } = useControllableState({\n isOpen: isExpanded,\n onOpen: onExpand,\n onClose: onCollapse,\n });\n\n const handleOnClick = () => {\n if (isOpen) {\n handleClose();\n } else {\n handleOpen();\n }\n };\n\n return (\n <Box\n as=\"li\"\n className={styles.accordionItem}\n testId={`${testId}-${id}`}\n {...otherProps}\n ref={ref}\n >\n <AccordionHeader\n onClick={handleOnClick}\n isExpanded={isOpen}\n element={titleElement}\n ariaId={id}\n >\n {title}\n </AccordionHeader>\n\n <AccordionPanel ariaId={id} isExpanded={isOpen}>\n {children}\n </AccordionPanel>\n </Box>\n );\n};\n\nAccordionItemBase.displayName = 'AccordionItem';\n\nexport const AccordionItem = React.forwardRef(AccordionItemBase);\n","import { Accordion as OriginalAccordion } from './Accordion';\nimport { AccordionItem } from './AccordionItem/AccordionItem';\n\ntype CompoundAccordion = typeof OriginalAccordion & {\n Item: typeof AccordionItem;\n};\n\nexport const Accordion = OriginalAccordion as CompoundAccordion;\nAccordion.Item = AccordionItem;\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/f36-accordion",
-  "version": "5.6.0",
+  "version": "6.0.0-alpha.1",
   "description": "Forma 36: Accordion React Component",
   "license": "MIT",
   "files": [
@@ -20,16 +20,16 @@
     "build": "tsup"
   },
   "dependencies": {
-    "@contentful/f36-collapse": "^5.6.0",
-    "@contentful/f36-core": "^5.6.0",
-    "@contentful/f36-icons": "^5.6.0",
-    "@contentful/f36-tokens": "^5.1.0",
-    "@contentful/f36-typography": "^5.6.0",
-    "emotion": "^10.0.17"
+    "@contentful/f36-collapse": "^6.0.0-alpha.0",
+    "@contentful/f36-core": "^6.0.0-alpha.0",
+    "@contentful/f36-icons": "^6.0.0-alpha.0",
+    "@contentful/f36-tokens": "^6.0.0-alpha.0",
+    "@contentful/f36-typography": "^6.0.0-alpha.0",
+    "@emotion/css": "^11.13.5"
   },
   "peerDependencies": {
-    "react": ">=16.8",
-    "react-dom": ">=16.8"
+    "react": ">=19.1.0",
+    "react-dom": ">=19.1.0"
   },
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/",