@atom-learning/components 3.2.0 → 3.3.0-beta.1

package/dist/components/side-bar/SideBar.js

@@ -0,0 +1,2 @@
+import t from"react";import{useInteractOutside as v,useFocusWithin as y,useHover as B}from"react-aria";import{createTheme as g,styled as r}from"../../stitches.js";import{SideBarBrand as S,SideBarBrandLogo as w,SideBarBrandName as E,SideBarHeader as H,SideBarBody as N,SideBarFooter as $}from"./SideBarComponents.js";import{SideBarContext as F}from"./SideBarContext.js";const n="88px",I="256px",W=g({colors:{background:"white",text:"$grey400",border:"$grey200"}}),k=r("div",{position:"sticky",zIndex:1,variants:{type:{static:{},expandable:{width:n}}}}),D=r("div",{bg:"$background",borderRight:"1px solid $border",boxShadow:"4px 0 4px -2px rgba(31, 31, 31, 0)",display:"flex",flexDirection:"column",height:"100%",overflow:"hidden",willChange:"width","@allowMotion":{transition:"width 125ms ease-out, box-shadow 125ms ease-out"},variants:{type:{static:{},expandable:{}},isExpanded:{true:{width:I},false:{width:n}}},compoundVariants:[{isExpanded:!0,type:"expandable",css:{boxShadow:"4px 0 4px -2px rgba(31, 31, 31, 0.1)"}}]}),L=r("div",{bottom:0,left:0,position:"absolute",right:0,top:0,transition:"all",variants:{isVisible:{true:{visibility:"visible",transitionDelay:"0s"},false:{visibility:"hidden",transitionDelay:"50ms"}}}}),e=({className:l=W,children:p,type:a="expandable",offset:s="0px",css:c,...x})=>{const[o,i]=t.useState(a==="static"),d=t.useRef(null);v({ref:d,onInteractOutside:f=>i(!1)});const{focusWithinProps:h}=y({onFocusWithin:f=>i(!0),onBlurWithin:()=>i(!1)}),{hoverProps:m,isHovered:u}=B({onHoverStart:()=>i(!0),onHoverEnd:()=>i(!1)}),b=a==="expandable"?{...h,...m,onTouchEnd:()=>i(!0),ref:d}:{};return t.createElement(F.Provider,{value:{isExpanded:o}},t.createElement(k,{...x,className:l,css:{height:`calc(100svh - ${s})`,top:s,...c},type:a},t.createElement(D,{...b,isExpanded:o,type:a},p,a==="expandable"&&t.createElement(L,{isVisible:!u&&!o}))))};e.Brand=S,e.BrandLogo=w,e.BrandName=E,e.Header=H,e.Body=N,e.Footer=$,e.displayName="SideBar";export{e as SideBar};
+//# sourceMappingURL=SideBar.js.map

package/dist/components/side-bar/SideBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideBar.js","sources":["../../../src/components/side-bar/SideBar.tsx"],"sourcesContent":["import React from 'react'\nimport { useFocusWithin, useHover, useInteractOutside } from 'react-aria'\n\nimport { createTheme, styled } from '~/stitches'\n\nimport {\n  SideBarBody,\n  SideBarBrand,\n  SideBarBrandLogo,\n  SideBarBrandName,\n  SideBarFooter,\n  SideBarHeader\n} from './SideBarComponents'\nimport { SideBarContext } from './SideBarContext'\n\nconst SIZE_COLLAPSED = '88px'\nconst SIZE_EXPANDED = '256px'\n\nconst light = createTheme({\n  colors: {\n    background: 'white',\n    text: '$grey400',\n    border: '$grey200'\n  }\n})\n\nconst Root = styled('div', {\n  position: 'sticky',\n  zIndex: 1,\n  variants: {\n    type: {\n      static: {},\n      expandable: { width: SIZE_COLLAPSED }\n    }\n  }\n})\n\nconst Content = styled('div', {\n  bg: '$background',\n  borderRight: '1px solid $border',\n  boxShadow: '4px 0 4px -2px rgba(31, 31, 31, 0)',\n  display: 'flex',\n  flexDirection: 'column',\n  height: '100%',\n  overflow: 'hidden',\n  willChange: 'width',\n  '@allowMotion': {\n    transition: 'width 125ms ease-out, box-shadow 125ms ease-out'\n  },\n  variants: {\n    type: {\n      static: {},\n      expandable: {}\n    },\n    isExpanded: {\n      true: { width: SIZE_EXPANDED },\n      false: { width: SIZE_COLLAPSED }\n    }\n  },\n  compoundVariants: [\n    {\n      isExpanded: true,\n      type: 'expandable',\n      css: { boxShadow: '4px 0 4px -2px rgba(31, 31, 31, 0.1)' }\n    }\n  ]\n})\n\nconst PointerBlocker = styled('div', {\n  bottom: 0,\n  left: 0,\n  position: 'absolute',\n  right: 0,\n  top: 0,\n  transition: 'all',\n  variants: {\n    isVisible: {\n      true: { visibility: 'visible', transitionDelay: '0s' },\n      false: { visibility: 'hidden', transitionDelay: '50ms' }\n    }\n  }\n})\n\ntype SideBarProps = React.ComponentProps<typeof Root> & {\n  offset?: number | string\n}\n\nexport const SideBar = ({\n  className = light,\n  children,\n  type = 'expandable',\n  offset = '0px',\n  css,\n  ...rest\n}: SideBarProps) => {\n  const [isExpanded, setIsExpanded] = React.useState(type === 'static')\n  const ref = React.useRef<HTMLDivElement>(null)\n\n  useInteractOutside({\n    ref,\n    onInteractOutside: (e) => setIsExpanded(false)\n  })\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithin: (e) => setIsExpanded(true),\n    onBlurWithin: () => setIsExpanded(false)\n  })\n  const { hoverProps, isHovered } = useHover({\n    onHoverStart: () => setIsExpanded(true),\n    onHoverEnd: () => setIsExpanded(false)\n  })\n  const touchProps = {\n    onTouchEnd: () => setIsExpanded(true)\n  }\n\n  const expandableProps =\n    type === 'expandable'\n      ? {\n          ...focusWithinProps,\n          ...hoverProps,\n          ...touchProps,\n          ref\n        }\n      : {}\n\n  return (\n    <SideBarContext.Provider value={{ isExpanded }}>\n      <Root\n        {...rest}\n        className={className}\n        css={{ height: `calc(100svh - ${offset})`, top: offset, ...css }}\n        type={type}\n      >\n        <Content {...expandableProps} isExpanded={isExpanded} type={type}>\n          {children}\n          {/**\n           * When the SideBar is collapsed, ensure that the initial tap event\n           * is used to expand the nav first before making the items available\n           */}\n          {type === 'expandable' && (\n            <PointerBlocker isVisible={!isHovered && !isExpanded} />\n          )}\n        </Content>\n      </Root>\n    </SideBarContext.Provider>\n  )\n}\n\nSideBar.Brand = SideBarBrand\nSideBar.BrandLogo = SideBarBrandLogo\nSideBar.BrandName = SideBarBrandName\nSideBar.Header = SideBarHeader\nSideBar.Body = SideBarBody\nSideBar.Footer = SideBarFooter\n\nSideBar.displayName = 'SideBar'\n"],"names":["SIZE_COLLAPSED","SIZE_EXPANDED","light","createTheme","Root","styled","Content","PointerBlocker","SideBar","className","children","type","offset","css","rest","isExpanded","setIsExpanded","React","ref","useInteractOutside","e","focusWithinProps","useFocusWithin","hoverProps","isHovered","useHover","expandableProps","SideBarContext","SideBarBrand","SideBarBrandLogo","SideBarBrandName","SideBarHeader","SideBarBody","SideBarFooter"],"mappings":"iXAeA,MAAMA,EAAiB,OACjBC,EAAgB,QAEhBC,EAAQC,EAAY,CACxB,OAAQ,CACN,WAAY,QACZ,KAAM,WACN,OAAQ,UACV,CACF,CAAC,EAEKC,EAAOC,EAAO,MAAO,CACzB,SAAU,SACV,OAAQ,EACR,SAAU,CACR,KAAM,CACJ,OAAQ,CACR,EAAA,WAAY,CAAE,MAAOL,CAAe,CACtC,CACF,CACF,CAAC,EAEKM,EAAUD,EAAO,MAAO,CAC5B,GAAI,cACJ,YAAa,oBACb,UAAW,qCACX,QAAS,OACT,cAAe,SACf,OAAQ,OACR,SAAU,SACV,WAAY,QACZ,eAAgB,CACd,WAAY,iDACd,EACA,SAAU,CACR,KAAM,CACJ,OAAQ,CACR,EAAA,WAAY,EACd,EACA,WAAY,CACV,KAAM,CAAE,MAAOJ,CAAc,EAC7B,MAAO,CAAE,MAAOD,CAAe,CACjC,CACF,EACA,iBAAkB,CAChB,CACE,WAAY,GACZ,KAAM,aACN,IAAK,CAAE,UAAW,sCAAuC,CAC3D,CACF,CACF,CAAC,EAEKO,EAAiBF,EAAO,MAAO,CACnC,OAAQ,EACR,KAAM,EACN,SAAU,WACV,MAAO,EACP,IAAK,EACL,WAAY,MACZ,SAAU,CACR,UAAW,CACT,KAAM,CAAE,WAAY,UAAW,gBAAiB,IAAK,EACrD,MAAO,CAAE,WAAY,SAAU,gBAAiB,MAAO,CACzD,CACF,CACF,CAAC,EAMYG,EAAU,CAAC,CACtB,UAAAC,EAAYP,EACZ,SAAAQ,EACA,KAAAC,EAAO,aACP,OAAAC,EAAS,MACT,IAAAC,KACGC,CACL,IAAoB,CAClB,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAM,SAASN,IAAS,QAAQ,EAC9DO,EAAMD,EAAM,OAAuB,IAAI,EAE7CE,EAAmB,CACjB,IAAAD,EACA,kBAAoBE,GAAMJ,EAAc,EAAK,CAC/C,CAAC,EACD,KAAM,CAAE,iBAAAK,CAAiB,EAAIC,EAAe,CAC1C,cAAgBF,GAAMJ,EAAc,EAAI,EACxC,aAAc,IAAMA,EAAc,EAAK,CACzC,CAAC,EACK,CAAE,WAAAO,EAAY,UAAAC,CAAU,EAAIC,EAAS,CACzC,aAAc,IAAMT,EAAc,EAAI,EACtC,WAAY,IAAMA,EAAc,EAAK,CACvC,CAAC,EAKKU,EACJf,IAAS,aACL,CACE,GAAGU,EACH,GAAGE,EAPT,WAAY,IAAMP,EAAc,EAAI,EAS9B,IAAAE,CACF,EACA,CAAA,EAEN,OACED,EAAA,cAACU,EAAe,SAAf,CAAwB,MAAO,CAAE,WAAAZ,CAAW,CAC3CE,EAAAA,EAAA,cAACb,EAAA,CACE,GAAGU,EACJ,UAAWL,EACX,IAAK,CAAE,OAAQ,iBAAiBG,KAAW,IAAKA,EAAQ,GAAGC,CAAI,EAC/D,KAAMF,GAENM,EAAA,cAACX,EAAA,CAAS,GAAGoB,EAAiB,WAAYX,EAAY,KAAMJ,CAAAA,EACzDD,EAKAC,IAAS,cACRM,EAAA,cAACV,EAAA,CAAe,UAAW,CAACiB,GAAa,CAACT,CAAAA,CAAY,CAE1D,CACF,CACF,CAEJ,EAEAP,EAAQ,MAAQoB,EAChBpB,EAAQ,UAAYqB,EACpBrB,EAAQ,UAAYsB,EACpBtB,EAAQ,OAASuB,EACjBvB,EAAQ,KAAOwB,EACfxB,EAAQ,OAASyB,EAEjBzB,EAAQ,YAAc"}