@mirohq/design-system-scroll-area 0.2.12 → 0.3.0

package/dist/main.js

@@ -19,7 +19,30 @@ const StyledViewport = designSystemStitches.styled(reactScrollArea.Viewport, {
   // to not crop focus ring
 });
 
-const Viewport = React__default["default"].forwardRef((props, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledViewport, { ...props, ref: forwardRef }));
+const Viewport = React__default["default"].forwardRef(
+  ({ maxHeight, availableHeight, verticalGap, css, ...restProps }, forwardRef) => {
+    const viewportCss = React.useMemo(() => {
+      if (availableHeight === void 0) {
+        return {};
+      }
+      const parsedMaxHeight = typeof maxHeight === "number" ? "".concat(maxHeight, "px") : maxHeight;
+      const maxHeightWithGap = (x) => verticalGap !== void 0 ? "calc(".concat(x, " - ").concat(verticalGap, " + var(--space-50))") : x;
+      const newMaxHeight = maxHeight !== void 0 ? maxHeightWithGap("min(".concat(availableHeight, ", ").concat(parsedMaxHeight, ")")) : maxHeightWithGap(availableHeight);
+      return { maxHeight: newMaxHeight };
+    }, [availableHeight, maxHeight, verticalGap]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      StyledViewport,
+      {
+        ...restProps,
+        ref: forwardRef,
+        css: {
+          ...viewportCss,
+          ...css
+        }
+      }
+    );
+  }
+);
 
 const StyledScrollbar = designSystemStitches.styled(reactScrollArea.Scrollbar, {
   display: "flex",

package/dist/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sources":["../src/partials/viewport.styled.tsx","../src/partials/viewport.tsx","../src/partials/scrollbar.styled.tsx","../src/partials/scrollbar.tsx","../src/partials/thumb.styled.tsx","../src/partials/thumb.tsx","../src/partials/corner.tsx","../src/scroll-area.styled.tsx","../src/scroll-area.tsx"],"sourcesContent":["import { Viewport as RadixViewport } from '@radix-ui/react-scroll-area'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledViewport = styled(RadixViewport, {\n  width: '100%',\n  height: '100%',\n  boxSizing: 'border-box',\n  padding: '$50', // to not crop focus ring\n})\n\nexport type StyledViewportProps = StrictComponentProps<typeof StyledViewport>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledViewport } from './viewport.styled'\nimport type { StyledViewportProps } from './viewport.styled'\n\nexport interface ViewportProps extends StyledViewportProps {}\n\nexport const Viewport = React.forwardRef<\n  ElementRef<typeof StyledViewport>,\n  ViewportProps\n>((props, forwardRef) => <StyledViewport {...props} ref={forwardRef} />)\n","import { styled } from '@mirohq/design-system-stitches'\nimport { Scrollbar as RadixScrollbar } from '@radix-ui/react-scroll-area'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledScrollbar = styled(RadixScrollbar, {\n  display: 'flex',\n  // ensures no selection\n  userSelect: 'none',\n  // disable browser handling of all panning and zooming gestures on touch devices\n  touchAction: 'none',\n  background: 'transparent',\n  transition: 'background 160ms ease-out',\n  zIndex: '1',\n  '&[data-orientation=\"vertical\"]': { width: '$1', minHeight: '$2' },\n  '&[data-orientation=\"horizontal\"]': {\n    flexDirection: 'column',\n    height: '$1',\n    padding: '0 2px',\n  },\n})\n\nexport type StyledScrollbarProps = StrictComponentProps<typeof StyledScrollbar>\n","import type { ElementRef } from 'react'\nimport React from 'react'\n\nimport { StyledScrollbar } from './scrollbar.styled'\nimport type { StyledScrollbarProps } from './scrollbar.styled'\n\nexport interface ScrollbarProps extends StyledScrollbarProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when controlling\n   * animation with React animation libraries.\n   */\n  forceMount?: true\n\n  /**\n   * The orientation of the scrollbar.\n   * @default 'vertical'\n   */\n  orientation?: 'horizontal' | 'vertical'\n}\n\nexport const Scrollbar = React.forwardRef<\n  ElementRef<typeof StyledScrollbar>,\n  ScrollbarProps\n>((props, forwardRef) => <StyledScrollbar {...props} ref={forwardRef} />)\n","import { styled } from '@mirohq/design-system-stitches'\nimport { Thumb as RadixThumb } from '@radix-ui/react-scroll-area'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledThumb = styled(RadixThumb, {\n  flex: 1,\n  background: '$background-neutrals-scrollbar',\n  borderRadius: '$50',\n  position: 'relative',\n  '&::before': {\n    content: '\"\"',\n    position: 'absolute',\n    top: '50%',\n    left: '50%',\n    transform: 'translate(-50%, -50%)',\n    width: '100%',\n    height: '100%',\n    minWidth: '$6',\n    minHeight: '$6',\n  },\n  '&:hover': {\n    backgroundColor: '$background-neutrals-scrollbar-hover',\n  },\n\n  '@media (forced-colors: active)': {\n    backgroundColor: 'ButtonText',\n  },\n})\nexport type StyledThumbProps = StrictComponentProps<typeof StyledThumb>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledThumb } from './thumb.styled'\nimport type { StyledThumbProps } from './thumb.styled'\n\nexport interface ThumbProps extends StyledThumbProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with React animation libraries.\n   */\n  forceMount?: true\n}\n\nexport const Thumb = React.forwardRef<\n  ElementRef<typeof StyledThumb>,\n  ThumbProps\n>((props, forwardRef) => <StyledThumb {...props} ref={forwardRef} />)\n","import React from 'react'\nimport { Corner as RadixCorner } from '@radix-ui/react-scroll-area'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport type { ElementRef } from 'react'\n\nconst StyledCorner = styled(RadixCorner)\ntype StyledCornerProps = StrictComponentProps<typeof StyledCorner>\n\nexport interface CornerProps extends StyledCornerProps {}\n\nexport const Corner = React.forwardRef<\n  ElementRef<typeof StyledCorner>,\n  CornerProps\n>((props, forwardRef) => <StyledCorner {...props} ref={forwardRef} />)\n","import { styled } from '@mirohq/design-system-stitches'\nimport { Root as RadixScrollArea } from '@radix-ui/react-scroll-area'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledScrollArea = styled(RadixScrollArea, {\n  overflow: 'hidden',\n  margin: '-$50',\n})\nexport type StyledScrollAreaProps = StrictComponentProps<\n  typeof StyledScrollArea\n>\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport { Viewport } from './partials/viewport'\nimport { Scrollbar } from './partials/scrollbar'\nimport { Thumb } from './partials/thumb'\nimport { Corner } from './partials/corner'\nimport { StyledScrollArea } from './scroll-area.styled'\nimport type { StyledScrollAreaProps } from './scroll-area.styled'\n\nexport interface ScrollAreaProps extends StyledScrollAreaProps {\n  children: React.ReactNode\n\n  /**\n   * Describes the nature of scrollbar visibility, similar to how the scrollbar\n   * preferences in MacOS control visibility of native scrollbars. \"auto\" means\n   * that scrollbars are visible when content is overflowing on the corresponding\n   * orientation. \"always\" means that scrollbars are always visible regardless of\n   * whether the content is overflowing. \"scroll\" means that scrollbars are\n   * visible when the user is scrolling along its corresponding orientation.\n   * \"hover\" when the user is scrolling along its corresponding orientation and\n   * when the user is hovering over the scroll area.\n   * @default hover\n   */\n  type?: 'auto' | 'always' | 'scroll' | 'hover'\n\n  /**\n   * The reading direction of the scroll area. If omitted, inherits globally\n   * from DirectionProvider or assumes LTR (left-to-right) reading mode.\n   * @default 'ltr'\n   */\n  dir?: 'ltr' | 'rtl'\n\n  /**\n   * If type is set to either \"scroll\" or \"hover\", this prop determines the\n   * length of time, in milliseconds, before the scrollbars are hidden after the\n   * user stops interacting with scrollbars.\n   */\n  scrollHideDelay?: number\n}\n\nexport const ScrollArea = React.forwardRef<\n  ElementRef<typeof StyledScrollArea>,\n  ScrollAreaProps\n>((props, forwardRef) => (\n  <StyledScrollArea {...props} ref={forwardRef} />\n)) as ForwardRefExoticComponent<ScrollAreaProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n  Viewport: typeof Viewport\n  Scrollbar: typeof Scrollbar\n  Thumb: typeof Thumb\n  Corner: typeof Corner\n}\n\nScrollArea.Viewport = Viewport\nScrollArea.Scrollbar = Scrollbar\nScrollArea.Thumb = Thumb\nScrollArea.Corner = Corner\n"],"names":["styled","RadixViewport","React","jsx","RadixScrollbar","RadixThumb","RadixCorner","RadixScrollArea"],"mappings":"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"}
+{"version":3,"file":"main.js","sources":["../src/partials/viewport.styled.tsx","../src/partials/viewport.tsx","../src/partials/scrollbar.styled.tsx","../src/partials/scrollbar.tsx","../src/partials/thumb.styled.tsx","../src/partials/thumb.tsx","../src/partials/corner.tsx","../src/scroll-area.styled.tsx","../src/scroll-area.tsx"],"sourcesContent":["import { Viewport as RadixViewport } from '@radix-ui/react-scroll-area'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledViewport = styled(RadixViewport, {\n  width: '100%',\n  height: '100%',\n  boxSizing: 'border-box',\n  padding: '$50', // to not crop focus ring\n})\n\nexport type StyledViewportProps = StrictComponentProps<typeof StyledViewport>\n","import React, { useMemo } from 'react'\nimport type { ElementRef } from 'react'\nimport type { CSS, CSSProperties } from '@stitches/react'\n\nimport { StyledViewport } from './viewport.styled'\nimport type { StyledViewportProps } from './viewport.styled'\n\nexport interface ViewportProps extends StyledViewportProps {\n  /**\n   * The max height calculated based on collisionBoundary prop.\n   * When using radix it's usually provided as CSS custom property.\n   */\n  availableHeight?: string\n\n  /**\n   * The max height for the content.\n   */\n  maxHeight?: CSSProperties['maxHeight']\n\n  /**\n   * The sum of top and bottom padding\n   */\n  verticalGap?: string\n}\n\nexport const Viewport = React.forwardRef<\n  ElementRef<typeof StyledViewport>,\n  ViewportProps\n>(\n  (\n    { maxHeight, availableHeight, verticalGap, css, ...restProps },\n    forwardRef\n  ) => {\n    const viewportCss = useMemo((): CSS => {\n      if (availableHeight === undefined) {\n        return {}\n      }\n\n      const parsedMaxHeight =\n        typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight\n\n      const maxHeightWithGap = (x: string): string =>\n        verticalGap !== undefined\n          ? `calc(${x} - ${verticalGap} + var(--space-50))`\n          : x\n\n      const newMaxHeight =\n        maxHeight !== undefined\n          ? maxHeightWithGap(`min(${availableHeight}, ${parsedMaxHeight})`)\n          : maxHeightWithGap(availableHeight)\n\n      return { maxHeight: newMaxHeight }\n    }, [availableHeight, maxHeight, verticalGap])\n\n    return (\n      <StyledViewport\n        {...restProps}\n        ref={forwardRef}\n        css={{\n          ...viewportCss,\n          ...css,\n        }}\n      />\n    )\n  }\n)\n","import { styled } from '@mirohq/design-system-stitches'\nimport { Scrollbar as RadixScrollbar } from '@radix-ui/react-scroll-area'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledScrollbar = styled(RadixScrollbar, {\n  display: 'flex',\n  // ensures no selection\n  userSelect: 'none',\n  // disable browser handling of all panning and zooming gestures on touch devices\n  touchAction: 'none',\n  background: 'transparent',\n  transition: 'background 160ms ease-out',\n  zIndex: '1',\n  '&[data-orientation=\"vertical\"]': { width: '$1', minHeight: '$2' },\n  '&[data-orientation=\"horizontal\"]': {\n    flexDirection: 'column',\n    height: '$1',\n    padding: '0 2px',\n  },\n})\n\nexport type StyledScrollbarProps = StrictComponentProps<typeof StyledScrollbar>\n","import type { ElementRef } from 'react'\nimport React from 'react'\n\nimport { StyledScrollbar } from './scrollbar.styled'\nimport type { StyledScrollbarProps } from './scrollbar.styled'\n\nexport interface ScrollbarProps extends StyledScrollbarProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when controlling\n   * animation with React animation libraries.\n   */\n  forceMount?: true\n\n  /**\n   * The orientation of the scrollbar.\n   * @default 'vertical'\n   */\n  orientation?: 'horizontal' | 'vertical'\n}\n\nexport const Scrollbar = React.forwardRef<\n  ElementRef<typeof StyledScrollbar>,\n  ScrollbarProps\n>((props, forwardRef) => <StyledScrollbar {...props} ref={forwardRef} />)\n","import { styled } from '@mirohq/design-system-stitches'\nimport { Thumb as RadixThumb } from '@radix-ui/react-scroll-area'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledThumb = styled(RadixThumb, {\n  flex: 1,\n  background: '$background-neutrals-scrollbar',\n  borderRadius: '$50',\n  position: 'relative',\n  '&::before': {\n    content: '\"\"',\n    position: 'absolute',\n    top: '50%',\n    left: '50%',\n    transform: 'translate(-50%, -50%)',\n    width: '100%',\n    height: '100%',\n    minWidth: '$6',\n    minHeight: '$6',\n  },\n  '&:hover': {\n    backgroundColor: '$background-neutrals-scrollbar-hover',\n  },\n\n  '@media (forced-colors: active)': {\n    backgroundColor: 'ButtonText',\n  },\n})\nexport type StyledThumbProps = StrictComponentProps<typeof StyledThumb>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledThumb } from './thumb.styled'\nimport type { StyledThumbProps } from './thumb.styled'\n\nexport interface ThumbProps extends StyledThumbProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with React animation libraries.\n   */\n  forceMount?: true\n}\n\nexport const Thumb = React.forwardRef<\n  ElementRef<typeof StyledThumb>,\n  ThumbProps\n>((props, forwardRef) => <StyledThumb {...props} ref={forwardRef} />)\n","import React from 'react'\nimport { Corner as RadixCorner } from '@radix-ui/react-scroll-area'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport type { ElementRef } from 'react'\n\nconst StyledCorner = styled(RadixCorner)\ntype StyledCornerProps = StrictComponentProps<typeof StyledCorner>\n\nexport interface CornerProps extends StyledCornerProps {}\n\nexport const Corner = React.forwardRef<\n  ElementRef<typeof StyledCorner>,\n  CornerProps\n>((props, forwardRef) => <StyledCorner {...props} ref={forwardRef} />)\n","import { styled } from '@mirohq/design-system-stitches'\nimport { Root as RadixScrollArea } from '@radix-ui/react-scroll-area'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledScrollArea = styled(RadixScrollArea, {\n  overflow: 'hidden',\n  margin: '-$50',\n})\nexport type StyledScrollAreaProps = StrictComponentProps<\n  typeof StyledScrollArea\n>\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport { Viewport } from './partials/viewport'\nimport { Scrollbar } from './partials/scrollbar'\nimport { Thumb } from './partials/thumb'\nimport { Corner } from './partials/corner'\nimport { StyledScrollArea } from './scroll-area.styled'\nimport type { StyledScrollAreaProps } from './scroll-area.styled'\n\nexport interface ScrollAreaProps extends StyledScrollAreaProps {\n  children: React.ReactNode\n\n  /**\n   * Describes the nature of scrollbar visibility, similar to how the scrollbar\n   * preferences in MacOS control visibility of native scrollbars. \"auto\" means\n   * that scrollbars are visible when content is overflowing on the corresponding\n   * orientation. \"always\" means that scrollbars are always visible regardless of\n   * whether the content is overflowing. \"scroll\" means that scrollbars are\n   * visible when the user is scrolling along its corresponding orientation.\n   * \"hover\" when the user is scrolling along its corresponding orientation and\n   * when the user is hovering over the scroll area.\n   * @default hover\n   */\n  type?: 'auto' | 'always' | 'scroll' | 'hover'\n\n  /**\n   * The reading direction of the scroll area. If omitted, inherits globally\n   * from DirectionProvider or assumes LTR (left-to-right) reading mode.\n   * @default 'ltr'\n   */\n  dir?: 'ltr' | 'rtl'\n\n  /**\n   * If type is set to either \"scroll\" or \"hover\", this prop determines the\n   * length of time, in milliseconds, before the scrollbars are hidden after the\n   * user stops interacting with scrollbars.\n   */\n  scrollHideDelay?: number\n}\n\nexport const ScrollArea = React.forwardRef<\n  ElementRef<typeof StyledScrollArea>,\n  ScrollAreaProps\n>((props, forwardRef) => (\n  <StyledScrollArea {...props} ref={forwardRef} />\n)) as ForwardRefExoticComponent<ScrollAreaProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n  Viewport: typeof Viewport\n  Scrollbar: typeof Scrollbar\n  Thumb: typeof Thumb\n  Corner: typeof Corner\n}\n\nScrollArea.Viewport = Viewport\nScrollArea.Scrollbar = Scrollbar\nScrollArea.Thumb = Thumb\nScrollArea.Corner = Corner\n"],"names":["styled","RadixViewport","React","useMemo","jsx","RadixScrollbar","RadixThumb","RadixCorner","RadixScrollArea"],"mappings":";;;;;;;;;;;;;AAIa,MAAA,cAAA,GAAiBA,4BAAOC,wBAAe,EAAA;AAAA,EAClD,KAAO,EAAA,MAAA;AAAA,EACP,MAAQ,EAAA,MAAA;AAAA,EACR,SAAW,EAAA,YAAA;AAAA,EACX,OAAS,EAAA,KAAA;AAAA;AACX,CAAC,CAAA;;ACgBM,MAAM,WAAWC,yBAAM,CAAA,UAAA;AAAA,EAI5B,CACE,EAAE,SAAW,EAAA,eAAA,EAAiB,aAAa,GAAK,EAAA,GAAG,SAAU,EAAA,EAC7D,UACG,KAAA;AACH,IAAM,MAAA,WAAA,GAAcC,cAAQ,MAAW;AACrC,MAAA,IAAI,oBAAoB,KAAW,CAAA,EAAA;AACjC,QAAA,OAAO,EAAC,CAAA;AAAA,OACV;AAEA,MAAA,MAAM,kBACJ,OAAO,SAAA,KAAc,QAAW,GAAA,EAAA,CAAG,kBAAS,IAAO,CAAA,GAAA,SAAA,CAAA;AAErD,MAAM,MAAA,gBAAA,GAAmB,CAAC,CACxB,KAAA,WAAA,KAAgB,SACZ,OAAQ,CAAA,MAAA,CAAA,CAAA,EAAC,KAAM,CAAA,CAAA,MAAA,CAAA,WAAA,EAAW,qBAC1B,CAAA,GAAA,CAAA,CAAA;AAEN,MAAM,MAAA,YAAA,GACJ,SAAc,KAAA,KAAA,CAAA,GACV,gBAAiB,CAAA,MAAA,CAAO,MAAe,CAAA,eAAA,EAAA,IAAA,CAAA,CAAK,MAAe,CAAA,eAAA,EAAA,GAAA,CAAG,CAC9D,GAAA,gBAAA,CAAiB,eAAe,CAAA,CAAA;AAEtC,MAAO,OAAA,EAAE,WAAW,YAAa,EAAA,CAAA;AAAA,KAChC,EAAA,CAAC,eAAiB,EAAA,SAAA,EAAW,WAAW,CAAC,CAAA,CAAA;AAE5C,IACE,uBAAAC,cAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACE,GAAG,SAAA;AAAA,QACJ,GAAK,EAAA,UAAA;AAAA,QACL,GAAK,EAAA;AAAA,UACH,GAAG,WAAA;AAAA,UACH,GAAG,GAAA;AAAA,SACL;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACF,CAAA;;AC7Da,MAAA,eAAA,GAAkBJ,4BAAOK,yBAAgB,EAAA;AAAA,EACpD,OAAS,EAAA,MAAA;AAAA;AAAA,EAET,UAAY,EAAA,MAAA;AAAA;AAAA,EAEZ,WAAa,EAAA,MAAA;AAAA,EACb,UAAY,EAAA,aAAA;AAAA,EACZ,UAAY,EAAA,2BAAA;AAAA,EACZ,MAAQ,EAAA,GAAA;AAAA,EACR,gCAAkC,EAAA,EAAE,KAAO,EAAA,IAAA,EAAM,WAAW,IAAK,EAAA;AAAA,EACjE,kCAAoC,EAAA;AAAA,IAClC,aAAe,EAAA,QAAA;AAAA,IACf,MAAQ,EAAA,IAAA;AAAA,IACR,OAAS,EAAA,OAAA;AAAA,GACX;AACF,CAAC,CAAA;;ACCM,MAAM,SAAY,GAAAH,yBAAA,CAAM,UAG7B,CAAA,CAAC,KAAO,EAAA,UAAA,qBAAgBE,cAAA,CAAA,eAAA,EAAA,EAAiB,GAAG,KAAA,EAAO,GAAK,EAAA,UAAA,EAAY,CAAE,CAAA;;ACnB3D,MAAA,WAAA,GAAcJ,4BAAOM,qBAAY,EAAA;AAAA,EAC5C,IAAM,EAAA,CAAA;AAAA,EACN,UAAY,EAAA,gCAAA;AAAA,EACZ,YAAc,EAAA,KAAA;AAAA,EACd,QAAU,EAAA,UAAA;AAAA,EACV,WAAa,EAAA;AAAA,IACX,OAAS,EAAA,IAAA;AAAA,IACT,QAAU,EAAA,UAAA;AAAA,IACV,GAAK,EAAA,KAAA;AAAA,IACL,IAAM,EAAA,KAAA;AAAA,IACN,SAAW,EAAA,uBAAA;AAAA,IACX,KAAO,EAAA,MAAA;AAAA,IACP,MAAQ,EAAA,MAAA;AAAA,IACR,QAAU,EAAA,IAAA;AAAA,IACV,SAAW,EAAA,IAAA;AAAA,GACb;AAAA,EACA,SAAW,EAAA;AAAA,IACT,eAAiB,EAAA,sCAAA;AAAA,GACnB;AAAA,EAEA,gCAAkC,EAAA;AAAA,IAChC,eAAiB,EAAA,YAAA;AAAA,GACnB;AACF,CAAC,CAAA;;ACbM,MAAM,KAAQ,GAAAJ,yBAAA,CAAM,UAGzB,CAAA,CAAC,KAAO,EAAA,UAAA,qBAAgBE,cAAA,CAAA,WAAA,EAAA,EAAa,GAAG,KAAA,EAAO,GAAK,EAAA,UAAA,EAAY,CAAE,CAAA;;ACXpE,MAAM,YAAA,GAAeJ,4BAAOO,sBAAW,CAAA,CAAA;AAKhC,MAAM,MAAS,GAAAL,yBAAA,CAAM,UAG1B,CAAA,CAAC,KAAO,EAAA,UAAA,qBAAgBE,cAAA,CAAA,YAAA,EAAA,EAAc,GAAG,KAAA,EAAO,GAAK,EAAA,UAAA,EAAY,CAAE,CAAA;;ACVxD,MAAA,gBAAA,GAAmBJ,4BAAOQ,oBAAiB,EAAA;AAAA,EACtD,QAAU,EAAA,QAAA;AAAA,EACV,MAAQ,EAAA,MAAA;AACV,CAAC,CAAA;;ACkCM,MAAM,UAAa,GAAAN,yBAAA,CAAM,UAG9B,CAAA,CAAC,KAAO,EAAA,UAAA,qBACPE,cAAA,CAAA,gBAAA,EAAA,EAAkB,GAAG,KAAA,EAAO,GAAK,EAAA,UAAA,EAAY,CAC/C,EAAA;AAYD,UAAA,CAAW,QAAW,GAAA,QAAA,CAAA;AACtB,UAAA,CAAW,SAAY,GAAA,SAAA,CAAA;AACvB,UAAA,CAAW,KAAQ,GAAA,KAAA,CAAA;AACnB,UAAA,CAAW,MAAS,GAAA,MAAA;;;;"}

package/dist/module.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Viewport as Viewport$1, Scrollbar as Scrollbar$1, Thumb as Thumb$1, Corner as Corner$1, Root } from '@radix-ui/react-scroll-area';
 import { styled } from '@mirohq/design-system-stitches';
 
@@ -11,7 +11,30 @@ const StyledViewport = styled(Viewport$1, {
   // to not crop focus ring
 });
 
-const Viewport = React.forwardRef((props, forwardRef) => /* @__PURE__ */ jsx(StyledViewport, { ...props, ref: forwardRef }));
+const Viewport = React.forwardRef(
+  ({ maxHeight, availableHeight, verticalGap, css, ...restProps }, forwardRef) => {
+    const viewportCss = useMemo(() => {
+      if (availableHeight === void 0) {
+        return {};
+      }
+      const parsedMaxHeight = typeof maxHeight === "number" ? "".concat(maxHeight, "px") : maxHeight;
+      const maxHeightWithGap = (x) => verticalGap !== void 0 ? "calc(".concat(x, " - ").concat(verticalGap, " + var(--space-50))") : x;
+      const newMaxHeight = maxHeight !== void 0 ? maxHeightWithGap("min(".concat(availableHeight, ", ").concat(parsedMaxHeight, ")")) : maxHeightWithGap(availableHeight);
+      return { maxHeight: newMaxHeight };
+    }, [availableHeight, maxHeight, verticalGap]);
+    return /* @__PURE__ */ jsx(
+      StyledViewport,
+      {
+        ...restProps,
+        ref: forwardRef,
+        css: {
+          ...viewportCss,
+          ...css
+        }
+      }
+    );
+  }
+);
 
 const StyledScrollbar = styled(Scrollbar$1, {
   display: "flex",

package/dist/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sources":["../src/partials/viewport.styled.tsx","../src/partials/viewport.tsx","../src/partials/scrollbar.styled.tsx","../src/partials/scrollbar.tsx","../src/partials/thumb.styled.tsx","../src/partials/thumb.tsx","../src/partials/corner.tsx","../src/scroll-area.styled.tsx","../src/scroll-area.tsx"],"sourcesContent":["import { Viewport as RadixViewport } from '@radix-ui/react-scroll-area'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledViewport = styled(RadixViewport, {\n  width: '100%',\n  height: '100%',\n  boxSizing: 'border-box',\n  padding: '$50', // to not crop focus ring\n})\n\nexport type StyledViewportProps = StrictComponentProps<typeof StyledViewport>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledViewport } from './viewport.styled'\nimport type { StyledViewportProps } from './viewport.styled'\n\nexport interface ViewportProps extends StyledViewportProps {}\n\nexport const Viewport = React.forwardRef<\n  ElementRef<typeof StyledViewport>,\n  ViewportProps\n>((props, forwardRef) => <StyledViewport {...props} ref={forwardRef} />)\n","import { styled } from '@mirohq/design-system-stitches'\nimport { Scrollbar as RadixScrollbar } from '@radix-ui/react-scroll-area'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledScrollbar = styled(RadixScrollbar, {\n  display: 'flex',\n  // ensures no selection\n  userSelect: 'none',\n  // disable browser handling of all panning and zooming gestures on touch devices\n  touchAction: 'none',\n  background: 'transparent',\n  transition: 'background 160ms ease-out',\n  zIndex: '1',\n  '&[data-orientation=\"vertical\"]': { width: '$1', minHeight: '$2' },\n  '&[data-orientation=\"horizontal\"]': {\n    flexDirection: 'column',\n    height: '$1',\n    padding: '0 2px',\n  },\n})\n\nexport type StyledScrollbarProps = StrictComponentProps<typeof StyledScrollbar>\n","import type { ElementRef } from 'react'\nimport React from 'react'\n\nimport { StyledScrollbar } from './scrollbar.styled'\nimport type { StyledScrollbarProps } from './scrollbar.styled'\n\nexport interface ScrollbarProps extends StyledScrollbarProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when controlling\n   * animation with React animation libraries.\n   */\n  forceMount?: true\n\n  /**\n   * The orientation of the scrollbar.\n   * @default 'vertical'\n   */\n  orientation?: 'horizontal' | 'vertical'\n}\n\nexport const Scrollbar = React.forwardRef<\n  ElementRef<typeof StyledScrollbar>,\n  ScrollbarProps\n>((props, forwardRef) => <StyledScrollbar {...props} ref={forwardRef} />)\n","import { styled } from '@mirohq/design-system-stitches'\nimport { Thumb as RadixThumb } from '@radix-ui/react-scroll-area'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledThumb = styled(RadixThumb, {\n  flex: 1,\n  background: '$background-neutrals-scrollbar',\n  borderRadius: '$50',\n  position: 'relative',\n  '&::before': {\n    content: '\"\"',\n    position: 'absolute',\n    top: '50%',\n    left: '50%',\n    transform: 'translate(-50%, -50%)',\n    width: '100%',\n    height: '100%',\n    minWidth: '$6',\n    minHeight: '$6',\n  },\n  '&:hover': {\n    backgroundColor: '$background-neutrals-scrollbar-hover',\n  },\n\n  '@media (forced-colors: active)': {\n    backgroundColor: 'ButtonText',\n  },\n})\nexport type StyledThumbProps = StrictComponentProps<typeof StyledThumb>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledThumb } from './thumb.styled'\nimport type { StyledThumbProps } from './thumb.styled'\n\nexport interface ThumbProps extends StyledThumbProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with React animation libraries.\n   */\n  forceMount?: true\n}\n\nexport const Thumb = React.forwardRef<\n  ElementRef<typeof StyledThumb>,\n  ThumbProps\n>((props, forwardRef) => <StyledThumb {...props} ref={forwardRef} />)\n","import React from 'react'\nimport { Corner as RadixCorner } from '@radix-ui/react-scroll-area'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport type { ElementRef } from 'react'\n\nconst StyledCorner = styled(RadixCorner)\ntype StyledCornerProps = StrictComponentProps<typeof StyledCorner>\n\nexport interface CornerProps extends StyledCornerProps {}\n\nexport const Corner = React.forwardRef<\n  ElementRef<typeof StyledCorner>,\n  CornerProps\n>((props, forwardRef) => <StyledCorner {...props} ref={forwardRef} />)\n","import { styled } from '@mirohq/design-system-stitches'\nimport { Root as RadixScrollArea } from '@radix-ui/react-scroll-area'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledScrollArea = styled(RadixScrollArea, {\n  overflow: 'hidden',\n  margin: '-$50',\n})\nexport type StyledScrollAreaProps = StrictComponentProps<\n  typeof StyledScrollArea\n>\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport { Viewport } from './partials/viewport'\nimport { Scrollbar } from './partials/scrollbar'\nimport { Thumb } from './partials/thumb'\nimport { Corner } from './partials/corner'\nimport { StyledScrollArea } from './scroll-area.styled'\nimport type { StyledScrollAreaProps } from './scroll-area.styled'\n\nexport interface ScrollAreaProps extends StyledScrollAreaProps {\n  children: React.ReactNode\n\n  /**\n   * Describes the nature of scrollbar visibility, similar to how the scrollbar\n   * preferences in MacOS control visibility of native scrollbars. \"auto\" means\n   * that scrollbars are visible when content is overflowing on the corresponding\n   * orientation. \"always\" means that scrollbars are always visible regardless of\n   * whether the content is overflowing. \"scroll\" means that scrollbars are\n   * visible when the user is scrolling along its corresponding orientation.\n   * \"hover\" when the user is scrolling along its corresponding orientation and\n   * when the user is hovering over the scroll area.\n   * @default hover\n   */\n  type?: 'auto' | 'always' | 'scroll' | 'hover'\n\n  /**\n   * The reading direction of the scroll area. If omitted, inherits globally\n   * from DirectionProvider or assumes LTR (left-to-right) reading mode.\n   * @default 'ltr'\n   */\n  dir?: 'ltr' | 'rtl'\n\n  /**\n   * If type is set to either \"scroll\" or \"hover\", this prop determines the\n   * length of time, in milliseconds, before the scrollbars are hidden after the\n   * user stops interacting with scrollbars.\n   */\n  scrollHideDelay?: number\n}\n\nexport const ScrollArea = React.forwardRef<\n  ElementRef<typeof StyledScrollArea>,\n  ScrollAreaProps\n>((props, forwardRef) => (\n  <StyledScrollArea {...props} ref={forwardRef} />\n)) as ForwardRefExoticComponent<ScrollAreaProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n  Viewport: typeof Viewport\n  Scrollbar: typeof Scrollbar\n  Thumb: typeof Thumb\n  Corner: typeof Corner\n}\n\nScrollArea.Viewport = Viewport\nScrollArea.Scrollbar = Scrollbar\nScrollArea.Thumb = Thumb\nScrollArea.Corner = Corner\n"],"names":["RadixViewport","RadixScrollbar","RadixThumb","RadixCorner","RadixScrollArea"],"mappings":"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"}
+{"version":3,"file":"module.js","sources":["../src/partials/viewport.styled.tsx","../src/partials/viewport.tsx","../src/partials/scrollbar.styled.tsx","../src/partials/scrollbar.tsx","../src/partials/thumb.styled.tsx","../src/partials/thumb.tsx","../src/partials/corner.tsx","../src/scroll-area.styled.tsx","../src/scroll-area.tsx"],"sourcesContent":["import { Viewport as RadixViewport } from '@radix-ui/react-scroll-area'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledViewport = styled(RadixViewport, {\n  width: '100%',\n  height: '100%',\n  boxSizing: 'border-box',\n  padding: '$50', // to not crop focus ring\n})\n\nexport type StyledViewportProps = StrictComponentProps<typeof StyledViewport>\n","import React, { useMemo } from 'react'\nimport type { ElementRef } from 'react'\nimport type { CSS, CSSProperties } from '@stitches/react'\n\nimport { StyledViewport } from './viewport.styled'\nimport type { StyledViewportProps } from './viewport.styled'\n\nexport interface ViewportProps extends StyledViewportProps {\n  /**\n   * The max height calculated based on collisionBoundary prop.\n   * When using radix it's usually provided as CSS custom property.\n   */\n  availableHeight?: string\n\n  /**\n   * The max height for the content.\n   */\n  maxHeight?: CSSProperties['maxHeight']\n\n  /**\n   * The sum of top and bottom padding\n   */\n  verticalGap?: string\n}\n\nexport const Viewport = React.forwardRef<\n  ElementRef<typeof StyledViewport>,\n  ViewportProps\n>(\n  (\n    { maxHeight, availableHeight, verticalGap, css, ...restProps },\n    forwardRef\n  ) => {\n    const viewportCss = useMemo((): CSS => {\n      if (availableHeight === undefined) {\n        return {}\n      }\n\n      const parsedMaxHeight =\n        typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight\n\n      const maxHeightWithGap = (x: string): string =>\n        verticalGap !== undefined\n          ? `calc(${x} - ${verticalGap} + var(--space-50))`\n          : x\n\n      const newMaxHeight =\n        maxHeight !== undefined\n          ? maxHeightWithGap(`min(${availableHeight}, ${parsedMaxHeight})`)\n          : maxHeightWithGap(availableHeight)\n\n      return { maxHeight: newMaxHeight }\n    }, [availableHeight, maxHeight, verticalGap])\n\n    return (\n      <StyledViewport\n        {...restProps}\n        ref={forwardRef}\n        css={{\n          ...viewportCss,\n          ...css,\n        }}\n      />\n    )\n  }\n)\n","import { styled } from '@mirohq/design-system-stitches'\nimport { Scrollbar as RadixScrollbar } from '@radix-ui/react-scroll-area'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledScrollbar = styled(RadixScrollbar, {\n  display: 'flex',\n  // ensures no selection\n  userSelect: 'none',\n  // disable browser handling of all panning and zooming gestures on touch devices\n  touchAction: 'none',\n  background: 'transparent',\n  transition: 'background 160ms ease-out',\n  zIndex: '1',\n  '&[data-orientation=\"vertical\"]': { width: '$1', minHeight: '$2' },\n  '&[data-orientation=\"horizontal\"]': {\n    flexDirection: 'column',\n    height: '$1',\n    padding: '0 2px',\n  },\n})\n\nexport type StyledScrollbarProps = StrictComponentProps<typeof StyledScrollbar>\n","import type { ElementRef } from 'react'\nimport React from 'react'\n\nimport { StyledScrollbar } from './scrollbar.styled'\nimport type { StyledScrollbarProps } from './scrollbar.styled'\n\nexport interface ScrollbarProps extends StyledScrollbarProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when controlling\n   * animation with React animation libraries.\n   */\n  forceMount?: true\n\n  /**\n   * The orientation of the scrollbar.\n   * @default 'vertical'\n   */\n  orientation?: 'horizontal' | 'vertical'\n}\n\nexport const Scrollbar = React.forwardRef<\n  ElementRef<typeof StyledScrollbar>,\n  ScrollbarProps\n>((props, forwardRef) => <StyledScrollbar {...props} ref={forwardRef} />)\n","import { styled } from '@mirohq/design-system-stitches'\nimport { Thumb as RadixThumb } from '@radix-ui/react-scroll-area'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledThumb = styled(RadixThumb, {\n  flex: 1,\n  background: '$background-neutrals-scrollbar',\n  borderRadius: '$50',\n  position: 'relative',\n  '&::before': {\n    content: '\"\"',\n    position: 'absolute',\n    top: '50%',\n    left: '50%',\n    transform: 'translate(-50%, -50%)',\n    width: '100%',\n    height: '100%',\n    minWidth: '$6',\n    minHeight: '$6',\n  },\n  '&:hover': {\n    backgroundColor: '$background-neutrals-scrollbar-hover',\n  },\n\n  '@media (forced-colors: active)': {\n    backgroundColor: 'ButtonText',\n  },\n})\nexport type StyledThumbProps = StrictComponentProps<typeof StyledThumb>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledThumb } from './thumb.styled'\nimport type { StyledThumbProps } from './thumb.styled'\n\nexport interface ThumbProps extends StyledThumbProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with React animation libraries.\n   */\n  forceMount?: true\n}\n\nexport const Thumb = React.forwardRef<\n  ElementRef<typeof StyledThumb>,\n  ThumbProps\n>((props, forwardRef) => <StyledThumb {...props} ref={forwardRef} />)\n","import React from 'react'\nimport { Corner as RadixCorner } from '@radix-ui/react-scroll-area'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport type { ElementRef } from 'react'\n\nconst StyledCorner = styled(RadixCorner)\ntype StyledCornerProps = StrictComponentProps<typeof StyledCorner>\n\nexport interface CornerProps extends StyledCornerProps {}\n\nexport const Corner = React.forwardRef<\n  ElementRef<typeof StyledCorner>,\n  CornerProps\n>((props, forwardRef) => <StyledCorner {...props} ref={forwardRef} />)\n","import { styled } from '@mirohq/design-system-stitches'\nimport { Root as RadixScrollArea } from '@radix-ui/react-scroll-area'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledScrollArea = styled(RadixScrollArea, {\n  overflow: 'hidden',\n  margin: '-$50',\n})\nexport type StyledScrollAreaProps = StrictComponentProps<\n  typeof StyledScrollArea\n>\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport { Viewport } from './partials/viewport'\nimport { Scrollbar } from './partials/scrollbar'\nimport { Thumb } from './partials/thumb'\nimport { Corner } from './partials/corner'\nimport { StyledScrollArea } from './scroll-area.styled'\nimport type { StyledScrollAreaProps } from './scroll-area.styled'\n\nexport interface ScrollAreaProps extends StyledScrollAreaProps {\n  children: React.ReactNode\n\n  /**\n   * Describes the nature of scrollbar visibility, similar to how the scrollbar\n   * preferences in MacOS control visibility of native scrollbars. \"auto\" means\n   * that scrollbars are visible when content is overflowing on the corresponding\n   * orientation. \"always\" means that scrollbars are always visible regardless of\n   * whether the content is overflowing. \"scroll\" means that scrollbars are\n   * visible when the user is scrolling along its corresponding orientation.\n   * \"hover\" when the user is scrolling along its corresponding orientation and\n   * when the user is hovering over the scroll area.\n   * @default hover\n   */\n  type?: 'auto' | 'always' | 'scroll' | 'hover'\n\n  /**\n   * The reading direction of the scroll area. If omitted, inherits globally\n   * from DirectionProvider or assumes LTR (left-to-right) reading mode.\n   * @default 'ltr'\n   */\n  dir?: 'ltr' | 'rtl'\n\n  /**\n   * If type is set to either \"scroll\" or \"hover\", this prop determines the\n   * length of time, in milliseconds, before the scrollbars are hidden after the\n   * user stops interacting with scrollbars.\n   */\n  scrollHideDelay?: number\n}\n\nexport const ScrollArea = React.forwardRef<\n  ElementRef<typeof StyledScrollArea>,\n  ScrollAreaProps\n>((props, forwardRef) => (\n  <StyledScrollArea {...props} ref={forwardRef} />\n)) as ForwardRefExoticComponent<ScrollAreaProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n  Viewport: typeof Viewport\n  Scrollbar: typeof Scrollbar\n  Thumb: typeof Thumb\n  Corner: typeof Corner\n}\n\nScrollArea.Viewport = Viewport\nScrollArea.Scrollbar = Scrollbar\nScrollArea.Thumb = Thumb\nScrollArea.Corner = Corner\n"],"names":["RadixViewport","RadixScrollbar","RadixThumb","RadixCorner","RadixScrollArea"],"mappings":"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"}

package/dist/types.d.ts

@@ -1,5 +1,6 @@
 import * as react from 'react';
 import react__default from 'react';
+import { CSSProperties } from '@stitches/react';
 import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
 import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
 import { StrictComponentProps } from '@mirohq/design-system-stitches';
@@ -9,6 +10,19 @@ declare const StyledViewport: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_
 declare type StyledViewportProps = StrictComponentProps<typeof StyledViewport>;
 
 interface ViewportProps extends StyledViewportProps {
+    /**
+     * The max height calculated based on collisionBoundary prop.
+     * When using radix it's usually provided as CSS custom property.
+     */
+    availableHeight?: string;
+    /**
+     * The max height for the content.
+     */
+    maxHeight?: CSSProperties['maxHeight'];
+    /**
+     * The sum of top and bottom padding
+     */
+    verticalGap?: string;
 }
 declare const Viewport: react__default.ForwardRefExoticComponent<Omit<ViewportProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-scroll-area",
-  "version": "0.2.12",
+  "version": "0.3.0",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",