@atom-learning/components 5.2.0-beta.1 → 5.2.0

package/dist/components/scrollable-container/ScrollableContainer.js

@@ -1,2 +0,0 @@
-import{styled as t}from"@atom-learning/stitches-react";import*as e from"react";import{useCallbackRefState as d}from"../../utilities/hooks/useCallbackRef.js";import{Box as l}from"../box/Box.js";import{ScrollableContainerShadow as p}from"./ScrollableContainerShadow.js";import{useScrollableContainer as b}from"./useScrollableContainer.js";const C=t(l,{position:"relative",overflow:"hidden"}),S=t(l,{width:"100%",height:"100%",overflow:"auto"}),a=e.forwardRef(({children:n,scrollContainerCss:i,...s},c)=>{const{setScrollableEl:m,setContainerEl:r}=b(),[o,f]=d();return e.useEffect(()=>r==null?void 0:r(o),[o,r]),e.useImperativeHandle(c,()=>o,[o]),e.createElement(C,{...s,ref:f,"data-testid":"scrollable-container"},e.createElement(S,{ref:m,css:i},n))}),h=Object.assign(a,{Shadow:p});export{h as ScrollableContainer,a as ScrollableContainerComponent};
-//# sourceMappingURL=ScrollableContainer.js.map

package/dist/components/scrollable-container/ScrollableContainer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ScrollableContainer.js","sources":["../../../src/components/scrollable-container/ScrollableContainer.tsx"],"sourcesContent":["import { styled } from '@atom-learning/stitches-react'\nimport * as React from 'react'\n\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\n\nimport { Box } from '../box'\nimport { ScrollableContainerShadow } from './ScrollableContainerShadow'\nimport { useScrollableContainer } from './useScrollableContainer'\n\nconst ContainerBox = styled(Box, {\n  position: 'relative',\n  overflow: 'hidden'\n})\n\nconst ScrollableBox = styled(Box, {\n  width: '100%',\n  height: '100%',\n  overflow: 'auto'\n})\n\nexport const ScrollableContainerComponent = React.forwardRef<HTMLDivElement, React.ComponentProps<typeof ContainerBox> & {\n  scrollContainerCss?: React.ComponentProps<typeof ScrollableBox>['css']\n}>(({ children, scrollContainerCss, ...rest }, ref\n) => {\n  const { setScrollableEl, setContainerEl: setContainerElContext } = useScrollableContainer()\n  const [containerEl, setContainerEl] = useCallbackRefState()\n  React.useEffect(() => setContainerElContext?.(containerEl), [containerEl, setContainerElContext])\n\n  React.useImperativeHandle(ref, () => containerEl as HTMLDivElement, [containerEl])\n\n  return (\n    <ContainerBox {...rest} ref={setContainerEl} data-testid=\"scrollable-container\">\n      <ScrollableBox ref={setScrollableEl} css={scrollContainerCss}>\n        {children}\n      </ScrollableBox>\n    </ContainerBox>\n  )\n})\n\nexport const ScrollableContainer = Object.assign(ScrollableContainerComponent, {\n  Shadow: ScrollableContainerShadow\n})\n"],"names":["ContainerBox","styled","Box","ScrollableBox","ScrollableContainerComponent","React","children","scrollContainerCss","rest","ref","setScrollableEl","setContainerElContext","useScrollableContainer","containerEl","setContainerEl","useCallbackRefState","ScrollableContainer","ScrollableContainerShadow"],"mappings":"iVASA,MAAMA,EAAeC,EAAOC,EAAK,CAC/B,SAAU,WACV,SAAU,QACZ,CAAC,EAEKC,EAAgBF,EAAOC,EAAK,CAChC,MAAO,OACP,OAAQ,OACR,SAAU,MACZ,CAAC,EAEYE,EAA+BC,EAAM,WAE/C,CAAC,CAAE,SAAAC,EAAU,mBAAAC,KAAuBC,CAAK,EAAGC,IAC1C,CACH,KAAM,CAAE,gBAAAC,EAAiB,eAAgBC,CAAsB,EAAIC,EAC7D,EAAA,CAACC,EAAaC,CAAc,EAAIC,EACtC,EAAA,OAAAV,EAAM,UAAU,IAAMM,GAAA,KAAAA,OAAAA,EAAwBE,CAAc,EAAA,CAACA,EAAaF,CAAqB,CAAC,EAEhGN,EAAM,oBAAoBI,EAAK,IAAMI,EAA+B,CAACA,CAAW,CAAC,EAG/ER,EAAA,cAACL,EAAA,CAAc,GAAGQ,EAAM,IAAKM,EAAgB,cAAY,sBACvDT,EAAAA,EAAA,cAACF,EAAA,CAAc,IAAKO,EAAiB,IAAKH,CACvCD,EAAAA,CACH,CACF,CAEJ,CAAC,EAEYU,EAAsB,OAAO,OAAOZ,EAA8B,CAC7E,OAAQa,CACV,CAAC"}

package/dist/components/scrollable-container/ScrollableContainerShadow.d.ts

@@ -1,10 +0,0 @@
-import * as React from 'react';
-import { Box } from '../box';
-export declare const ScrollableContainerShadow: ({ inset, css, ...rest }: React.ComponentProps<typeof Box> & {
-    inset?: {
-        top?: number;
-        right?: number;
-        bottom?: number;
-        left?: number;
-    };
-}) => React.JSX.Element;

package/dist/components/scrollable-container/ScrollableContainerShadow.js

@@ -1,2 +0,0 @@
-import*as o from"react";import{Box as i}from"../box/Box.js";import{ScrollableContainerContext as x}from"./ScrollableContainer.context.js";import{styled as h}from"@atom-learning/stitches-react";const e=h(i,{position:"absolute",height:"100%",width:"100%",pointerEvents:"none",boxShadow:"$3",opacity:0}),d=({inset:t,css:a,...n})=>{const{scrollbarWidthXAxis:p,scrollbarWidthYAxis:m,hasScrollYAxis:l,hasScrollXAxis:r,scrollProgressXAxis:s,scrollProgressYAxis:c}=o.useContext(x);return o.createElement(i,{css:{width:`calc(100% - ${p}px)`,height:`calc(100% - ${m}px)`,position:"absolute",left:0,top:0,pointerEvents:"none",overflow:"hidden",...a},...n},o.createElement(e,{css:{bottom:`calc(100% + ${-((t==null?void 0:t.top)||0)+1}px)`,opacity:l?c*1:0}}),o.createElement(e,{css:{top:`calc(100% + ${-((t==null?void 0:t.bottom)||0)+1}px)`,transform:"rotate(180deg)",opacity:l?(1-c)*1:0}}),o.createElement(e,{css:{right:`calc(100% + ${-((t==null?void 0:t.left)||0)+1}px)`,opacity:r?s*1:0}}),o.createElement(e,{css:{left:`calc(100% + ${-((t==null?void 0:t.right)||0)+1}px)`,transform:"rotate(180deg)",opacity:r?(1-s)*1:0}}))};export{d as ScrollableContainerShadow};
-//# sourceMappingURL=ScrollableContainerShadow.js.map

package/dist/components/scrollable-container/ScrollableContainerShadow.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ScrollableContainerShadow.js","sources":["../../../src/components/scrollable-container/ScrollableContainerShadow.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Box } from '../box'\n\nimport { ScrollableContainerContext } from './ScrollableContainer.context'\nimport { styled } from '@atom-learning/stitches-react'\n\n\nconst Shadow = styled(Box, {\n  position: 'absolute',\n  height: '100%',\n  width: '100%',\n  pointerEvents: 'none',\n  boxShadow: '$3',\n  opacity: 0\n})\n\nexport const ScrollableContainerShadow = (\n  { inset, css, ...rest }: React.ComponentProps<typeof Box> & { inset?: { top?: number, right?: number, bottom?: number, left?: number } }\n) => {\n  const { scrollbarWidthXAxis, scrollbarWidthYAxis, hasScrollYAxis, hasScrollXAxis, scrollProgressXAxis, scrollProgressYAxis } = React.useContext(ScrollableContainerContext)\n\n  return (\n    <Box css={{\n      width: `calc(100% - ${scrollbarWidthXAxis}px)`,\n      height: `calc(100% - ${scrollbarWidthYAxis}px)`,\n      position: 'absolute',\n      left: 0,\n      top: 0,\n      pointerEvents: 'none',\n      overflow: 'hidden',\n      ...css\n    }}\n      {...rest}>\n      <Shadow\n        css={{\n          /** Had to add 1px as a fix for Safari, which rounds down and sometimes causes 1px difference */\n          bottom: `calc(100% + ${-(inset?.top || 0) + 1}px)`,\n          opacity: hasScrollYAxis ? scrollProgressYAxis * 1 : 0\n        }}\n      />\n\n      <Shadow\n        css={{\n          /** Had to add 1px as a fix for Safari, which rounds down and sometimes causes 1px difference */\n          top: `calc(100% + ${-(inset?.bottom || 0) + 1}px)`,\n          transform: 'rotate(180deg)',\n          opacity: hasScrollYAxis ? (1 - scrollProgressYAxis) * 1 : 0\n        }}\n      />\n      <Shadow\n        css={{\n          /** Had to add 1px as a fix for Safari, which rounds down and sometimes causes 1px difference */\n          right: `calc(100% + ${-(inset?.left || 0) + 1}px)`,\n          opacity: hasScrollXAxis ? scrollProgressXAxis * 1 : 0\n        }}\n      />\n      <Shadow\n        css={{\n          /** Had to add 1px as a fix for Safari, which rounds down and sometimes causes 1px difference */\n          left: `calc(100% + ${-(inset?.right || 0) + 1}px)`,\n          transform: 'rotate(180deg)',\n          opacity: hasScrollXAxis ? (1 - scrollProgressXAxis) * 1 : 0\n        }}\n      />\n    </Box>\n  )\n}\n"],"names":["Shadow","styled","Box","ScrollableContainerShadow","inset","css","rest","scrollbarWidthXAxis","scrollbarWidthYAxis","hasScrollYAxis","hasScrollXAxis","scrollProgressXAxis","scrollProgressYAxis","React","ScrollableContainerContext"],"mappings":"iMAQA,MAAMA,EAASC,EAAOC,EAAK,CACzB,SAAU,WACV,OAAQ,OACR,MAAO,OACP,cAAe,OACf,UAAW,KACX,QAAS,CACX,CAAC,EAEYC,EAA4B,CACvC,CAAE,MAAAC,EAAO,IAAAC,KAAQC,CAAK,IACnB,CACH,KAAM,CAAE,oBAAAC,EAAqB,oBAAAC,EAAqB,eAAAC,EAAgB,eAAAC,EAAgB,oBAAAC,EAAqB,oBAAAC,CAAoB,EAAIC,EAAM,WAAWC,CAA0B,EAE1K,OACED,EAAA,cAACX,EAAA,CAAI,IAAK,CACR,MAAO,eAAeK,OACtB,OAAQ,eAAeC,OACvB,SAAU,WACV,KAAM,EACN,IAAK,EACL,cAAe,OACf,SAAU,SACV,GAAGH,CACL,EACG,GAAGC,CACJO,EAAAA,EAAA,cAACb,EAAA,CACC,IAAK,CAEH,OAAQ,eAAe,GAAEI,GAAA,KAAAA,OAAAA,EAAO,MAAO,GAAK,OAC5C,QAASK,EAAiBG,EAAsB,EAAI,CACtD,CAAA,CACF,EAEAC,EAAA,cAACb,EAAA,CACC,IAAK,CAEH,IAAK,eAAe,GAAEI,GAAA,KAAA,OAAAA,EAAO,SAAU,GAAK,OAC5C,UAAW,iBACX,QAASK,GAAkB,EAAIG,GAAuB,EAAI,CAC5D,EACF,EACAC,EAAA,cAACb,EAAA,CACC,IAAK,CAEH,MAAO,eAAe,GAAEI,GAAA,YAAAA,EAAO,OAAQ,GAAK,OAC5C,QAASM,EAAiBC,EAAsB,EAAI,CACtD,CACF,CAAA,EACAE,EAAA,cAACb,EAAA,CACC,IAAK,CAEH,KAAM,eAAe,GAAEI,GAAA,KAAAA,OAAAA,EAAO,QAAS,GAAK,OAC5C,UAAW,iBACX,QAASM,GAAkB,EAAIC,GAAuB,EAAI,CAC5D,CAAA,CACF,CACF,CAEJ"}

package/dist/components/scrollable-container/index.d.ts

@@ -1,3 +0,0 @@
-export { ScrollableContainer } from './ScrollableContainer';
-export { ScrollableContainerContext, ScrollableContainerProvider } from './ScrollableContainer.context';
-export { useScrollableContainer } from './useScrollableContainer';

package/dist/components/scrollable-container/useScrollableContainer.d.ts

@@ -1,2 +0,0 @@
-import { type IScrollableContainerContext } from './ScrollableContainer.context';
-export declare const useScrollableContainer: () => IScrollableContainerContext;

package/dist/components/scrollable-container/useScrollableContainer.js

@@ -1,2 +0,0 @@
-import*as o from"react";import{ScrollableContainerContext as r}from"./ScrollableContainer.context.js";const t=()=>{const e=o.useContext(r);return e.hasProvider||console.warn("Ensure that you wrap components with the ScrollableContainerProvider component. Scroll related features may not work as expected."),e};export{t as useScrollableContainer};
-//# sourceMappingURL=useScrollableContainer.js.map

package/dist/components/scrollable-container/useScrollableContainer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useScrollableContainer.js","sources":["../../../src/components/scrollable-container/useScrollableContainer.ts"],"sourcesContent":["import * as React from 'react'\nimport { ScrollableContainerContext, type IScrollableContainerContext } from './ScrollableContainer.context'\n\nexport const useScrollableContainer = (): IScrollableContainerContext => {\n  const context = React.useContext(ScrollableContainerContext)\n\n  if (!context.hasProvider) {\n    console.warn('Ensure that you wrap components with the ScrollableContainerProvider component. Scroll related features may not work as expected.')\n  }\n\n  return context\n}\n\n"],"names":["useScrollableContainer","context","React","ScrollableContainerContext"],"mappings":"sGAGO,MAAMA,EAAyB,IAAmC,CACvE,MAAMC,EAAUC,EAAM,WAAWC,CAA0B,EAE3D,OAAKF,EAAQ,aACX,QAAQ,KAAK,mIAAmI,EAG3IA,CACT"}