@atom-learning/components 5.0.1 → 5.1.1

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

@@ -1,2 +0,0 @@
-import t from"react";import{useInteractOutside as f,useFocusWithin as v,useHover as y}from"react-aria";import{createTheme as B,styled as r}from"../../stitches.js";import{SideBarBrand as g,SideBarBrandLogo as S,SideBarBrandName as w,SideBarHeader as E,SideBarBody as H,SideBarFooter as N}from"./SideBarComponents.js";import{SideBarContext as $}from"./SideBarContext.js";const n="5.5rem",D="16rem",F=B({colors:{background:"white",text:"$grey800",border:"$grey200"}}),I=r("div",{position:"sticky",zIndex:1,variants:{type:{static:{},expandable:{width:n}}}}),W=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:D},false:{width:n}}},compoundVariants:[{isExpanded:!0,type:"expandable",css:{boxShadow:"4px 0 4px -2px rgba(31, 31, 31, 0.1)"}}]}),k=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=F,children:p,type:a="expandable",offset:s="0px",css:c,...h})=>{const[o,i]=t.useState(a==="static"),d=t.useRef(null);f({ref:d,onInteractOutside:()=>i(!1)});const{focusWithinProps:m}=v({onFocusWithin:()=>i(!0),onBlurWithin:()=>i(!1)}),{hoverProps:x,isHovered:u}=y({onHoverStart:()=>i(!0),onHoverEnd:()=>i(!1)}),b=a==="expandable"?{...m,...x,onTouchEnd:()=>i(!0),ref:d}:{};return t.createElement($.Provider,{value:{isExpanded:o}},t.createElement(I,{...h,className:l,css:{height:`calc(100svh - ${s})`,top:s,...c},type:a},t.createElement(W,{...b,isExpanded:o,type:a},p,a==="expandable"&&t.createElement(k,{isVisible:!u&&!o}))))};e.Brand=g,e.BrandLogo=S,e.BrandName=w,e.Header=E,e.Body=H,e.Footer=N,e.displayName="SideBar";export{e as SideBar};
-//# sourceMappingURL=SideBar.js.map

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

@@ -1 +0,0 @@
-{"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 = '5.5rem'\nconst SIZE_EXPANDED = '16rem'\n\nconst light = createTheme({\n  colors: {\n    background: 'white',\n    text: '$grey800',\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: () => setIsExpanded(false)\n  })\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithin: () => 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","focusWithinProps","useFocusWithin","hoverProps","isHovered","useHover","expandableProps","SideBarContext","SideBarBrand","SideBarBrandLogo","SideBarBrandName","SideBarHeader","SideBarBody","SideBarFooter"],"mappings":"iXAeA,MAAMA,EAAiB,SACjBC,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,CAAA,EACR,WAAY,CACd,CAAA,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,kBAAmB,IAAMF,EAAc,EAAK,CAC9C,CAAC,EACD,KAAM,CAAE,iBAAAI,CAAiB,EAAIC,EAAe,CAC1C,cAAe,IAAML,EAAc,EAAI,EACvC,aAAc,IAAMA,EAAc,EAAK,CACzC,CAAC,EACK,CAAE,WAAAM,EAAY,UAAAC,CAAU,EAAIC,EAAS,CACzC,aAAc,IAAMR,EAAc,EAAI,EACtC,WAAY,IAAMA,EAAc,EAAK,CACvC,CAAC,EAKKS,EACJd,IAAS,aACL,CACE,GAAGS,EACH,GAAGE,EAPT,WAAY,IAAMN,EAAc,EAAI,EAS9B,IAAAE,CACF,EACA,CAEN,EAAA,OACED,EAAA,cAACS,EAAe,SAAf,CAAwB,MAAO,CAAE,WAAAX,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,GAAGmB,EAAiB,WAAYV,EAAY,KAAMJ,CAAAA,EACzDD,EAKAC,IAAS,cACRM,EAAA,cAACV,EAAA,CAAe,UAAW,CAACgB,GAAa,CAACR,CAAAA,CAAY,CAE1D,CACF,CACF,CAEJ,EAEAP,EAAQ,MAAQmB,EAChBnB,EAAQ,UAAYoB,EACpBpB,EAAQ,UAAYqB,EACpBrB,EAAQ,OAASsB,EACjBtB,EAAQ,KAAOuB,EACfvB,EAAQ,OAASwB,EAEjBxB,EAAQ,YAAc"}