@chayns-components/core 5.0.0-beta.98 → 5.0.0-beta.981

package/lib/esm/components/scroll-view/ScrollView.js

@@ -0,0 +1,30 @@
+import { getDevice } from 'chayns-api';
+import React, { forwardRef, useMemo } from 'react';
+import { StyledScrollView } from './ScrollView.styles';
+const ScrollView = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    maxHeight = 300,
+    height,
+    maxWidth,
+    width,
+    children,
+    overflowX = 'auto',
+    overflowY = 'auto'
+  } = _ref;
+  const {
+    browser
+  } = getDevice();
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledScrollView, {
+    $browser: browser?.name,
+    $maxHeight: maxHeight,
+    $height: height,
+    $maxWidth: maxWidth,
+    $width: width,
+    $overflowX: overflowX,
+    $overflowY: overflowY,
+    ref: ref
+  }, children), [browser?.name, children, height, maxHeight, maxWidth, overflowX, overflowY, ref, width]);
+});
+ScrollView.displayName = 'ScrollView';
+export default ScrollView;
+//# sourceMappingURL=ScrollView.js.map

package/lib/esm/components/scroll-view/ScrollView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollView.js","names":["getDevice","React","forwardRef","useMemo","StyledScrollView","ScrollView","_ref","ref","maxHeight","height","maxWidth","width","children","overflowX","overflowY","browser","createElement","$browser","name","$maxHeight","$height","$maxWidth","$width","$overflowX","$overflowY","displayName"],"sources":["../../../../src/components/scroll-view/ScrollView.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, { CSSProperties, forwardRef, ReactNode, useMemo } from 'react';\nimport { StyledScrollView } from './ScrollView.styles';\n\nexport type ScrollViewProps = {\n    /**\n     * The elements that should be shown inside the scrollview\n     */\n    children: ReactNode;\n    /**\n     * The maximum height of the scroll view.\n     */\n    maxHeight?: CSSProperties['height'] | null;\n    /**\n     * The height of the scroll view.\n     */\n    height?: CSSProperties['height'];\n    /**\n     * The maximum width of the scroll view.\n     */\n    maxWidth?: CSSProperties['width'];\n    /**\n     * The width of the scroll view.\n     */\n    width?: CSSProperties['width'];\n    /**\n     * The overflow-x style of the scroll view.\n     */\n    overflowX?: 'scroll' | 'auto';\n    /**\n     * The overflow-y style of the scroll view.\n     */\n    overflowY?: 'scroll' | 'auto';\n};\n\nconst ScrollView = forwardRef<HTMLDivElement, ScrollViewProps>(\n    (\n        {\n            maxHeight = 300,\n            height,\n            maxWidth,\n            width,\n            children,\n            overflowX = 'auto',\n            overflowY = 'auto',\n        },\n        ref,\n    ) => {\n        const { browser } = getDevice();\n\n        return useMemo(\n            () => (\n                <StyledScrollView\n                    $browser={browser?.name}\n                    $maxHeight={maxHeight}\n                    $height={height}\n                    $maxWidth={maxWidth}\n                    $width={width}\n                    $overflowX={overflowX}\n                    $overflowY={overflowY}\n                    ref={ref}\n                >\n                    {children}\n                </StyledScrollView>\n            ),\n            [\n                browser?.name,\n                children,\n                height,\n                maxHeight,\n                maxWidth,\n                overflowX,\n                overflowY,\n                ref,\n                width,\n            ],\n        );\n    },\n);\n\nScrollView.displayName = 'ScrollView';\n\nexport default ScrollView;\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,YAAY;AACtC,OAAOC,KAAK,IAAmBC,UAAU,EAAaC,OAAO,QAAQ,OAAO;AAC5E,SAASC,gBAAgB,QAAQ,qBAAqB;AAiCtD,MAAMC,UAAU,gBAAGH,UAAU,CACzB,CAAAI,IAAA,EAUIC,GAAG,KACF;EAAA,IAVD;IACIC,SAAS,GAAG,GAAG;IACfC,MAAM;IACNC,QAAQ;IACRC,KAAK;IACLC,QAAQ;IACRC,SAAS,GAAG,MAAM;IAClBC,SAAS,GAAG;EAChB,CAAC,GAAAR,IAAA;EAGD,MAAM;IAAES;EAAQ,CAAC,GAAGf,SAAS,CAAC,CAAC;EAE/B,OAAOG,OAAO,CACV,mBACIF,KAAA,CAAAe,aAAA,CAACZ,gBAAgB;IACba,QAAQ,EAAEF,OAAO,EAAEG,IAAK;IACxBC,UAAU,EAAEX,SAAU;IACtBY,OAAO,EAAEX,MAAO;IAChBY,SAAS,EAAEX,QAAS;IACpBY,MAAM,EAAEX,KAAM;IACdY,UAAU,EAAEV,SAAU;IACtBW,UAAU,EAAEV,SAAU;IACtBP,GAAG,EAAEA;EAAI,GAERK,QACa,CACrB,EACD,CACIG,OAAO,EAAEG,IAAI,EACbN,QAAQ,EACRH,MAAM,EACND,SAAS,EACTE,QAAQ,EACRG,SAAS,EACTC,SAAS,EACTP,GAAG,EACHI,KAAK,CAEb,CAAC;AACL,CACJ,CAAC;AAEDN,UAAU,CAACoB,WAAW,GAAG,YAAY;AAErC,eAAepB,UAAU","ignoreList":[]}

package/lib/esm/components/scroll-view/ScrollView.styles.js

@@ -0,0 +1,90 @@
+import styled, { css } from 'styled-components';
+export const StyledScrollView = styled.div`
+    ${_ref => {
+  let {
+    $maxHeight
+  } = _ref;
+  return $maxHeight && css`
+            max-height: ${typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};
+        `;
+}}
+    ${_ref2 => {
+  let {
+    $height
+  } = _ref2;
+  return $height && css`
+            height: ${typeof $height === 'number' ? `${$height}px` : $height};
+        `;
+}} 
+    ${_ref3 => {
+  let {
+    $maxWidth
+  } = _ref3;
+  return $maxWidth && css`
+            max-width: ${typeof $maxWidth === 'number' ? `${$maxWidth}px` : $maxWidth};
+        `;
+}} 
+    ${_ref4 => {
+  let {
+    $width
+  } = _ref4;
+  return $width && css`
+            width: ${typeof $width === 'number' ? `${$width}px` : $width};
+        `;
+}} 
+    ${_ref5 => {
+  let {
+    $overflowX
+  } = _ref5;
+  return css`
+        overflow-x: ${$overflowX};
+    `;
+}}
+    ${_ref6 => {
+  let {
+    $overflowY
+  } = _ref6;
+  return css`
+        overflow-y: ${$overflowY};
+    `;
+}}
+
+    // Styles for custom scrollbar
+    ${_ref7 => {
+  let {
+    $browser,
+    theme
+  } = _ref7;
+  return $browser === 'firefox' ? css`
+                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
+                  scrollbar-width: thin;
+              ` : css`
+                  &::-webkit-scrollbar {
+                      width: 10px;
+                      height: 10px;
+                  }
+
+                  &::-webkit-scrollbar-track {
+                      background-color: transparent;
+                  }
+
+                  &::-webkit-scrollbar-button {
+                      background-color: transparent;
+                      height: 5px;
+                      width: 5px;
+                  }
+
+                  &::-webkit-scrollbar-thumb {
+                      background-color: rgba(${theme['text-rgb']}, 0.15);
+                      border-radius: 20px;
+                      background-clip: padding-box;
+                      border: solid 3px transparent;
+                  }
+
+                  &::-webkit-scrollbar-corner {
+                      background-color: transparent;
+                  }
+              `;
+}}
+`;
+//# sourceMappingURL=ScrollView.styles.js.map

package/lib/esm/components/scroll-view/ScrollView.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollView.styles.js","names":["styled","css","StyledScrollView","div","_ref","$maxHeight","_ref2","$height","_ref3","$maxWidth","_ref4","$width","_ref5","$overflowX","_ref6","$overflowY","_ref7","$browser","theme"],"sources":["../../../../src/components/scroll-view/ScrollView.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledScrollViewProps = WithTheme<{\n    $maxHeight?: CSSProperties['height'] | null;\n    $height?: CSSProperties['height'];\n    $maxWidth?: CSSProperties['width'];\n    $width?: CSSProperties['width'];\n    $overflowX: 'scroll' | 'auto';\n    $overflowY: 'scroll' | 'auto';\n    $browser: Browser | 'bot' | null | undefined;\n}>;\n\nexport const StyledScrollView = styled.div<StyledScrollViewProps>`\n    ${({ $maxHeight }) =>\n        $maxHeight &&\n        css`\n            max-height: ${typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};\n        `}\n    ${({ $height }) =>\n        $height &&\n        css`\n            height: ${typeof $height === 'number' ? `${$height}px` : $height};\n        `} \n    ${({ $maxWidth }) =>\n        $maxWidth &&\n        css`\n            max-width: ${typeof $maxWidth === 'number' ? `${$maxWidth}px` : $maxWidth};\n        `} \n    ${({ $width }) =>\n        $width &&\n        css`\n            width: ${typeof $width === 'number' ? `${$width}px` : $width};\n        `} \n    ${({ $overflowX }) => css`\n        overflow-x: ${$overflowX};\n    `}\n    ${({ $overflowY }) => css`\n        overflow-y: ${$overflowY};\n    `}\n\n    // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledScrollViewProps) =>\n        $browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 10px;\n                      height: 10px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                      background-clip: padding-box;\n                      border: solid 3px transparent;\n                  }\n\n                  &::-webkit-scrollbar-corner {\n                      background-color: transparent;\n                  }\n              `}\n`;\n"],"mappings":"AAEA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAa/C,OAAO,MAAMC,gBAAgB,GAAGF,MAAM,CAACG,GAA0B;AACjE,MAAMC,IAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,IAAA;EAAA,OACbC,UAAU,IACVJ,GAAG;AACX,0BAA0B,OAAOI,UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;AACzF,SAAS;AAAA;AACT,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,KAAA;EAAA,OACVC,OAAO,IACPN,GAAG;AACX,sBAAsB,OAAOM,OAAO,KAAK,QAAQ,GAAG,GAAGA,OAAO,IAAI,GAAGA,OAAO;AAC5E,SAAS;AAAA;AACT,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OACZC,SAAS,IACTR,GAAG;AACX,yBAAyB,OAAOQ,SAAS,KAAK,QAAQ,GAAG,GAAGA,SAAS,IAAI,GAAGA,SAAS;AACrF,SAAS;AAAA;AACT,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OACTC,MAAM,IACNV,GAAG;AACX,qBAAqB,OAAOU,MAAM,KAAK,QAAQ,GAAG,GAAGA,MAAM,IAAI,GAAGA,MAAM;AACxE,SAAS;AAAA;AACT,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OAAKX,GAAG;AAC7B,sBAAsBY,UAAU;AAChC,KAAK;AAAA;AACL,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OAAKb,GAAG;AAC7B,sBAAsBc,UAAU;AAChC,KAAK;AAAA;AACL;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEC;EAA6B,CAAC,GAAAF,KAAA;EAAA,OACzCC,QAAQ,KAAK,SAAS,GAChBhB,GAAG;AACjB,0CAA0CiB,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDjB,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CiB,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe;AAAA;AACf,CAAC","ignoreList":[]}