@cavilha/collapse/dist/index.cjs.js

A component used to organize and display releated information gradually to optimize screen space.

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@cavilha/theme"),o=require("@radix-ui/react-accordion"),l=require("@cavilha/flex"),r=require("@cavilha/text"),n=require("@fortawesome/pro-regular-svg-icons"),a=require("@fortawesome/pro-solid-svg-icons"),c=require("@cavilha/icon");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(o){if("default"!==o){var l=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,l.get?l:{enumerable:!0,get:function(){return e[o]}})}})),t.default=e,Object.freeze(t)}var d=s(e),u=i(o),p=s(l),m=s(r),f=s(c),b=function(){return b=Object.assign||function(e){for(var t,o=1,l=arguments.length;o<l;o++)for(var r in t=arguments[o])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e},b.apply(this,arguments)};function v(e,t){var o={};for(var l in e)Object.prototype.hasOwnProperty.call(e,l)&&t.indexOf(l)<0&&(o[l]=e[l]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(l=Object.getOwnPropertySymbols(e);r<l.length;r++)t.indexOf(l[r])<0&&Object.prototype.propertyIsEnumerable.call(e,l[r])&&(o[l[r]]=e[l[r]])}return o}var y,g,$,h=t.styled(u.Root,{mx:"$small1",columns:1,"@lg":{columnGap:"$space$medium3"},variants:{columns:{1:{"@lg":{columns:1,columnWidth:"100%"}},2:{"@lg":{columns:2,columnWidth:"50%"}},3:{"@lg":{columns:3,columnWidth:"calc(100% / 3)"}}}}}),x=t.styled(u.Header,{minHeight:"$large3",display:"flex",alignItems:"center",boxSizing:"border-box",breakInside:"avoid",cursor:"pointer",transition:"0.2s",margin:"$medium 10","&:hover":{bc:"$secondary0Hover"}}),O=t.styled(u.Trigger,{textAlign:"left",display:"flex",alignItems:"center",border:"none",padding:"$small3",minHeight:"$large3",outline:"none",background:"transparent",width:"100%",borderRadius:"$small",cursor:"pointer"}),I=t.styled(f.default,{mr:"$small3",mt:"$small1",color:"$secondary4 !important"}),k=t.styled(f.default,{color:"$secondary4",alignSelf:"center",mx:"$small2",mt:"calc($sizes$small1 / 2)"}),S=t.styled(u.Content,{overflow:"hidden",padding:"$small2 $small3 $small3 $small3",color:"$mono2",'[data-state="open"] &':{display:"block"},'[data-state="closed"] &':{display:"none"},variants:{special:{true:{padding:"$medium1"}}}}),j=t.styled(u.Item,{breakInside:"avoid",pageBreakInside:"avoid",borderBottom:"1px solid rgba($secondary3RGB, 0.12)",variants:{isOpen:{true:{}},special:{true:(y={bc:"$background1",borderRadius:"$small",border:"1px solid $secondary3","@lg":{marginBottom:"$medium1"},"&:last-of-type":{marginBottom:"$none"},"@sm":{marginBottom:"$medium1"}},y["& ".concat(S)]={borderTop:"1px solid $secondary3"},y)}},compoundVariants:[{special:!0,isOpen:!0,css:(g={},g["& ".concat(O)]={borderRadius:"$small"},g)},{special:!0,css:($={},$["& ".concat(O,":focus")]={borderRadius:"$small",boxShadow:"$focusPressed"},$)}]}),E=function(e){var t=e.headerAs,o=void 0===t?"span":t,l=e.special,r=e.openedIcon,c=void 0===r?a.faSortUp:r,s=e.closedIcon,i=void 0===s?a.faSortDown:s,u=e.children,f=e.value,y=e.subTitle,g=e.title,$=e.headerBackgroundColor,h=void 0===$?"$secondary0Hover":$,E=e.titleColor,C=void 0===E?"$secondary4":E,w=e.css,P=e.onClick,q=e.isOpen,B=e.icon,M=e.forceMount,R=v(e,["headerAs","special","openedIcon","closedIcon","children","value","subTitle","title","headerBackgroundColor","titleColor","css","onClick","isOpen","icon","forceMount"]),T=l?n.faMinus:c,V=l?n.faPlus:i,z=q?T:V,H=y?"flex-start":"center",A=y?"5px 10px 0 0":"0 10px 0 0";return d.default.createElement(j,b({special:l,isOpen:q,value:f,css:w,onClick:P},R),d.default.createElement(x,{as:o},d.default.createElement(O,{type:"button",css:{"&[data-state=open]":{bc:h}},tabIndex:0},B&&d.default.createElement(I,{css:{alignSelf:H,margin:A},icon:B,iconSize:14}),d.default.createElement(p.default,{direction:"column",css:{flexGrow:1,display:"flex",justifyContent:"center"}},d.default.createElement(m.default,{as:"p",css:{justifySelf:"center",color:C},textStyle:"bodyMediumSemibold"},g),y&&d.default.createElement(m.default,{as:"span",textStyle:"bodySmallRegular",css:{color:"$neutral5"}},y)),d.default.createElement(k,{css:{color:C},icon:z,iconSize:16}))),d.default.createElement(S,{special:l,forceMount:M},u))};exports.CollapseItem=E,exports.default=function(t){var o=t.special,l=void 0!==o&&o,r=t.children,n=void 0===r?[]:r,a=t.columns,c=void 0===a?1:a,s=t.css,i=t.openedIcon,u=t.closedIcon,p=v(t,["special","children","columns","css","openedIcon","closedIcon"]),m=d.default.useState((null==p?void 0:p.defaultValue)||""),f=m[0],y=m[1];return e.useEffect((function(){(null==p?void 0:p.defaultValue)&&y(p.defaultValue)}),[p.defaultValue]),d.default.createElement(h,b({css:function(){var e,t=n.length||0,o=Math.round(t/c);return Number(c)>1?b(b({},s),((e={})["& > div:nth-child(".concat(o,"n)")]={breakAfter:"column"},e)):b({},s)}(),columns:c,onValueChange:function(e){y(e)}},p),n&&n.map((function(e){return d.default.createElement(E,b({special:l,subTitle:e.props.subTitle,icon:e.props.icon,key:e.props.value,closedIcon:u,openedIcon:i,isOpen:f.includes(e.props.value),onClick:e.props.onClick},e.props),e.props.children)})))};