@veeqo/ui 12.4.0-beta-9 → 12.4.0

package/dist/components/UploadFile/utils/getValidTypesString/getValidTypesString.js

@@ -1,3 +1,5 @@
+import { AcceptedFileTypes } from '../../constants.js';
+
 /**
  * Constructs a user-friendly string of accepted types valid for the UploadFile component based on the
  * fileTypes list passed as parameter.
@@ -17,22 +19,34 @@
  * the returned string
  */
 const getValidTypesString = ({ fileTypes, baseString }) => {
-    // Remove leading dot and uppercase for display
-    const getDisplayType = (fileType) => fileType.replace(/^\./, '').toUpperCase();
-    if (!fileTypes.length)
-        return baseString !== null && baseString !== undefined ? baseString : '';
-    const displayTypes = fileTypes.map(getDisplayType);
-    let result = baseString == null ? 'Valid file types: ' : baseString;
-    if (displayTypes.length === 1) {
-        result += displayTypes[0];
-    }
-    else if (displayTypes.length === 2) {
-        result += `${displayTypes[0]} and ${displayTypes[1]}`;
-    }
-    else {
-        result += `${displayTypes.slice(0, -1).join(', ')} and ${displayTypes[displayTypes.length - 1]}`;
-    }
-    return result;
+    let base = baseString == null ? 'Valid types: ' : baseString;
+    fileTypes.forEach((fileType, index, list) => {
+        const iterable = list.length > 1;
+        const isLast = index === list.length - 1 && iterable;
+        const isPenultimate = index === list.length - 2 && iterable;
+        if (isLast)
+            base += ' and ';
+        switch (fileType) {
+            case AcceptedFileTypes.CSV:
+                base += 'CSV';
+                break;
+            case AcceptedFileTypes.GIF:
+                base += 'GIF';
+                break;
+            case AcceptedFileTypes.JPEG:
+                base += 'JPEG';
+                break;
+            case AcceptedFileTypes.JPG:
+                base += 'JPG';
+                break;
+            case AcceptedFileTypes.PNG:
+                base += 'PNG';
+                break;
+        }
+        if (!isPenultimate && !isLast && list.length > 2)
+            base += ', ';
+    });
+    return base;
 };
 
 export { getValidTypesString };

package/dist/components/UploadFile/utils/getValidTypesString/getValidTypesString.js.map

@@ -1 +1 @@
-{"version":3,"file":"getValidTypesString.js","sources":["../../../../../src/components/UploadFile/utils/getValidTypesString/getValidTypesString.ts"],"sourcesContent":["import { AcceptedFileTypes } from '../../constants';\n\ntype GetValidTypesStringProps = {\n  fileTypes: Array<AcceptedFileTypes>;\n  baseString?: string;\n};\n\n/**\n * Constructs a user-friendly string of accepted types valid for the UploadFile component based on the\n * fileTypes list passed as parameter.\n *\n * E.g.\n *\n * const validTypesCopy = getValidTypesString({\n *  fileTypes: [\n *    AcceptedFileTypes.CSV,\n *  ]\n * });\n *\n * Where @constant validTypesCopy would equal \"Valid types: CSV\"\n *\n * @param fileTypes - A list of file types, each value being of @type AcceptedFileTypes\n * @param baseString - An optional string to override the default value of 'Valid types: ' prefixed to\n * the returned string\n */\nexport const getValidTypesString = ({ fileTypes, baseString }: GetValidTypesStringProps) => {\n  // Remove leading dot and uppercase for display\n  const getDisplayType = (fileType: AcceptedFileTypes) => fileType.replace(/^\\./, '').toUpperCase();\n\n  if (!fileTypes.length) return baseString ?? '';\n\n  const displayTypes = fileTypes.map(getDisplayType);\n\n  let result = baseString == null ? 'Valid file types: ' : baseString;\n\n  if (displayTypes.length === 1) {\n    result += displayTypes[0];\n  } else if (displayTypes.length === 2) {\n    result += `${displayTypes[0]} and ${displayTypes[1]}`;\n  } else {\n    result += `${displayTypes.slice(0, -1).join(', ')} and ${displayTypes[displayTypes.length - 1]}`;\n  }\n\n  return result;\n};\n"],"names":[],"mappings":"AAOA;;;;;;;;;;;;;;;;;AAiBG;AACU,MAAA,mBAAmB,GAAG,CAAC,EAAE,SAAS,EAAE,UAAU,EAA4B,KAAI;;AAEzF,IAAA,MAAM,cAAc,GAAG,CAAC,QAA2B,KAAK,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,WAAW,EAAE;IAEjG,IAAI,CAAC,SAAS,CAAC,MAAM;AAAE,QAAA,OAAO,UAAU,KAAV,IAAA,IAAA,UAAU,iBAAV,UAAU,GAAI,EAAE;IAE9C,MAAM,YAAY,GAAG,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC;AAElD,IAAA,IAAI,MAAM,GAAG,UAAU,IAAI,IAAI,GAAG,oBAAoB,GAAG,UAAU;AAEnE,IAAA,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE;AAC7B,QAAA,MAAM,IAAI,YAAY,CAAC,CAAC,CAAC;AAC1B;AAAM,SAAA,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE;AACpC,QAAA,MAAM,IAAI,CAAA,EAAG,YAAY,CAAC,CAAC,CAAC,CAAQ,KAAA,EAAA,YAAY,CAAC,CAAC,CAAC,CAAA,CAAE;AACtD;AAAM,SAAA;QACL,MAAM,IAAI,CAAG,EAAA,YAAY,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAQ,KAAA,EAAA,YAAY,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA,CAAE;AACjG;AAED,IAAA,OAAO,MAAM;AACf;;;;"}
+{"version":3,"file":"getValidTypesString.js","sources":["../../../../../src/components/UploadFile/utils/getValidTypesString/getValidTypesString.ts"],"sourcesContent":["import { AcceptedFileTypes } from '../../constants';\n\ntype GetValidTypesStringProps = {\n  fileTypes: Array<AcceptedFileTypes>;\n  baseString?: string;\n};\n\n/**\n * Constructs a user-friendly string of accepted types valid for the UploadFile component based on the\n * fileTypes list passed as parameter.\n *\n * E.g.\n *\n * const validTypesCopy = getValidTypesString({\n *  fileTypes: [\n *    AcceptedFileTypes.CSV,\n *  ]\n * });\n *\n * Where @constant validTypesCopy would equal \"Valid types: CSV\"\n *\n * @param fileTypes - A list of file types, each value being of @type AcceptedFileTypes\n * @param baseString - An optional string to override the default value of 'Valid types: ' prefixed to\n * the returned string\n */\nexport const getValidTypesString = ({ fileTypes, baseString }: GetValidTypesStringProps) => {\n  let base = baseString == null ? 'Valid types: ' : baseString;\n  fileTypes.forEach((fileType, index, list) => {\n    const iterable = list.length > 1;\n    const isLast = index === list.length - 1 && iterable;\n    const isPenultimate = index === list.length - 2 && iterable;\n\n    if (isLast) base += ' and ';\n\n    switch (fileType) {\n      case AcceptedFileTypes.CSV:\n        base += 'CSV';\n        break;\n      case AcceptedFileTypes.GIF:\n        base += 'GIF';\n        break;\n      case AcceptedFileTypes.JPEG:\n        base += 'JPEG';\n        break;\n      case AcceptedFileTypes.JPG:\n        base += 'JPG';\n        break;\n      case AcceptedFileTypes.PNG:\n        base += 'PNG';\n        break;\n      default:\n        break;\n    }\n\n    if (!isPenultimate && !isLast && list.length > 2) base += ', ';\n  });\n  return base;\n};\n"],"names":[],"mappings":";;AAOA;;;;;;;;;;;;;;;;;AAiBG;AACU,MAAA,mBAAmB,GAAG,CAAC,EAAE,SAAS,EAAE,UAAU,EAA4B,KAAI;AACzF,IAAA,IAAI,IAAI,GAAG,UAAU,IAAI,IAAI,GAAG,eAAe,GAAG,UAAU;IAC5D,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,KAAI;AAC1C,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC;QAChC,MAAM,MAAM,GAAG,KAAK,KAAK,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,QAAQ;QACpD,MAAM,aAAa,GAAG,KAAK,KAAK,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,QAAQ;AAE3D,QAAA,IAAI,MAAM;YAAE,IAAI,IAAI,OAAO;AAE3B,QAAA,QAAQ,QAAQ;YACd,KAAK,iBAAiB,CAAC,GAAG;gBACxB,IAAI,IAAI,KAAK;gBACb;YACF,KAAK,iBAAiB,CAAC,GAAG;gBACxB,IAAI,IAAI,KAAK;gBACb;YACF,KAAK,iBAAiB,CAAC,IAAI;gBACzB,IAAI,IAAI,MAAM;gBACd;YACF,KAAK,iBAAiB,CAAC,GAAG;gBACxB,IAAI,IAAI,KAAK;gBACb;YACF,KAAK,iBAAiB,CAAC,GAAG;gBACxB,IAAI,IAAI,KAAK;gBACb;AAGH;QAED,IAAI,CAAC,aAAa,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC;YAAE,IAAI,IAAI,IAAI;AAChE,KAAC,CAAC;AACF,IAAA,OAAO,IAAI;AACb;;;;"}

package/dist/components/UploadFile/utils/index.d.ts

@@ -1,3 +1,4 @@
 export { getValidTypesString } from './getValidTypesString/getValidTypesString';
 export { getFileSizeString } from './getFileSizeString/getFileSizeString';
 export { getTypePropForInputEl } from './getTypePropForInputEl/getTypePropForInputEl';
+export { setInputElFile } from './setInputElFile/setInputElFile';

package/dist/components/UploadFile/utils/setInputElFile/setInputElFile.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+/**
+ * Updates the value of the files attribute held within an input elment. Used during DnD operations where
+ * the input element's files need to kept in sync and updated.
+ *
+ * @param fileList - A list of files, typically extracted from the "files" attribute of an input element
+ * @param elementId - The ID of the input element
+ */
+const setInputElFile = ({ fileList, elementId }) => {
+    const inputEl = document.getElementById(elementId);
+    if (fileList.length) {
+        inputEl.files = fileList;
+    }
+};
+
+exports.setInputElFile = setInputElFile;
+//# sourceMappingURL=setInputElFile.cjs.map

package/dist/components/UploadFile/utils/setInputElFile/setInputElFile.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"setInputElFile.cjs","sources":["../../../../../src/components/UploadFile/utils/setInputElFile/setInputElFile.ts"],"sourcesContent":["type SetInputElFileProps = {\n  fileList: FileList;\n  elementId: string;\n};\n\n/**\n * Updates the value of the files attribute held within an input elment. Used during DnD operations where\n * the input element's files need to kept in sync and updated.\n *\n * @param fileList - A list of files, typically extracted from the \"files\" attribute of an input element\n * @param elementId - The ID of the input element\n */\nexport const setInputElFile = ({ fileList, elementId }: SetInputElFileProps) => {\n  const inputEl = document.getElementById(elementId) as HTMLInputElement;\n  if (fileList.length) {\n    inputEl.files = fileList;\n  }\n};\n"],"names":[],"mappings":";;AAKA;;;;;;AAMG;AACU,MAAA,cAAc,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAuB,KAAI;IAC7E,MAAM,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAqB;IACtE,IAAI,QAAQ,CAAC,MAAM,EAAE;AACnB,QAAA,OAAO,CAAC,KAAK,GAAG,QAAQ;AACzB;AACH;;;;"}

package/dist/components/UploadFile/utils/setInputElFile/setInputElFile.d.ts

@@ -0,0 +1,13 @@
+type SetInputElFileProps = {
+    fileList: FileList;
+    elementId: string;
+};
+/**
+ * Updates the value of the files attribute held within an input elment. Used during DnD operations where
+ * the input element's files need to kept in sync and updated.
+ *
+ * @param fileList - A list of files, typically extracted from the "files" attribute of an input element
+ * @param elementId - The ID of the input element
+ */
+export declare const setInputElFile: ({ fileList, elementId }: SetInputElFileProps) => void;
+export {};

package/dist/components/UploadFile/utils/setInputElFile/setInputElFile.js

@@ -0,0 +1,16 @@
+/**
+ * Updates the value of the files attribute held within an input elment. Used during DnD operations where
+ * the input element's files need to kept in sync and updated.
+ *
+ * @param fileList - A list of files, typically extracted from the "files" attribute of an input element
+ * @param elementId - The ID of the input element
+ */
+const setInputElFile = ({ fileList, elementId }) => {
+    const inputEl = document.getElementById(elementId);
+    if (fileList.length) {
+        inputEl.files = fileList;
+    }
+};
+
+export { setInputElFile };
+//# sourceMappingURL=setInputElFile.js.map

package/dist/components/UploadFile/utils/setInputElFile/setInputElFile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"setInputElFile.js","sources":["../../../../../src/components/UploadFile/utils/setInputElFile/setInputElFile.ts"],"sourcesContent":["type SetInputElFileProps = {\n  fileList: FileList;\n  elementId: string;\n};\n\n/**\n * Updates the value of the files attribute held within an input elment. Used during DnD operations where\n * the input element's files need to kept in sync and updated.\n *\n * @param fileList - A list of files, typically extracted from the \"files\" attribute of an input element\n * @param elementId - The ID of the input element\n */\nexport const setInputElFile = ({ fileList, elementId }: SetInputElFileProps) => {\n  const inputEl = document.getElementById(elementId) as HTMLInputElement;\n  if (fileList.length) {\n    inputEl.files = fileList;\n  }\n};\n"],"names":[],"mappings":"AAKA;;;;;;AAMG;AACU,MAAA,cAAc,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAuB,KAAI;IAC7E,MAAM,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAqB;IACtE,IAAI,QAAQ,CAAC,MAAM,EAAE;AACnB,QAAA,OAAO,CAAC,KAAK,GAAG,QAAQ;AACzB;AACH;;;;"}

package/dist/components/ViewsContainer/ViewsContainer.cjs

@@ -1,23 +1,50 @@
 'use strict';
 
 var React = require('react');
-var styled = require('./styled.cjs');
+var index = require('../../theme/index.cjs');
 var useSetScrollPosition = require('./hooks/useSetScrollPosition.cjs');
+var FlexRow = require('../Flex/FlexRow/FlexRow.cjs');
+var Button = require('../Button/Button.cjs');
+var Skeleton = require('../Skeleton/Skeleton.cjs');
+var LeftArrowIcon = require('../../icons/design-system/components/LeftArrowIcon.cjs');
+var RightArrowIcon = require('../../icons/design-system/components/RightArrowIcon.cjs');
+var ThreeDotsIcon = require('../../icons/custom/components/ThreeDotsIcon.cjs');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
+var ViewsContainer_module = require('./ViewsContainer.module.scss.cjs');
+var form_module = require('../../utils/forms/form.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const ViewsContainer = React__default.default.forwardRef(({ children, onClickMenu, ariaMenuControls, ariaMenuExpanded }, menuRef) => {
+const ViewsContainer = React__default.default.forwardRef(({ children, className, style, onClickMenu, ariaMenuControls, ariaMenuExpanded, hasMoreViews, onFetchMoreViews, isLoadingMoreViews, compact = false, appearance = 'primary', menuButtonSlot, }, menuRef) => {
     const viewsRef = React.useRef(null);
-    const { rightDisabled, leftDisabled, toNextScrollPosition, toPrevScrollPosition } = useSetScrollPosition.useSetScrollPosition(viewsRef, children);
-    return (React__default.default.createElement(styled.Container, { direction: "horizontal", alignY: "center", alignX: "between" },
-        React__default.default.createElement(styled.ViewsWrapper, { ref: viewsRef, id: "views", role: "tablist", alignY: "center", direction: "horizontal" }, children),
-        React__default.default.createElement(styled.StyledInputGroup, null,
-            (!leftDisabled || !rightDisabled) && (React__default.default.createElement(React__default.default.Fragment, null,
-                React__default.default.createElement(styled.StyledLeftButton, { id: "left-arrow", iconSlot: React__default.default.createElement(styled.StyledLeftIcon, null), disabled: leftDisabled, onClick: toPrevScrollPosition, variant: "flat", "aria-label": "move views to the left" }),
-                React__default.default.createElement(styled.StyledRightButton, { id: "right-arrow", iconSlot: React__default.default.createElement(styled.StyledRightIcon, null), disabled: rightDisabled, onClick: toNextScrollPosition, variant: "flat", "aria-label": "move views to the right" }))),
-            React__default.default.createElement(styled.StyledMenuButton, { iconSlot: React__default.default.createElement(styled.StyledMenuIcon, null), variant: "flat", onClick: onClickMenu, "aria-label": "open menu", "aria-controls": ariaMenuControls, "aria-expanded": ariaMenuExpanded, "aria-haspopup": ariaMenuControls ? 'dialog' : undefined, ref: menuRef }))));
+    const { rightDisabled, leftDisabled, toNextScrollPosition, toPrevScrollPosition } = useSetScrollPosition.useSetScrollPosition({
+        containerRef: viewsRef,
+        children,
+        hasMoreViews,
+        onFetchMoreViews,
+        isLoadingMoreViews,
+    });
+    const showCustomMenuButton = !onClickMenu && !!menuButtonSlot;
+    return (React__default.default.createElement(FlexRow.FlexRow, { className: buildClassnames.buildClassnames([ViewsContainer_module[`appearance-${appearance}`], className]), justifyContent: "between", flexWrap: "nowrap", style: style },
+        React__default.default.createElement(FlexRow.FlexRow, { className: buildClassnames.buildClassnames([ViewsContainer_module.viewsWrapper, compact && ViewsContainer_module.compact]), ref: viewsRef, id: "views", role: "tablist", gap: "sm", flexWrap: "nowrap" },
+            children,
+            isLoadingMoreViews && (React__default.default.createElement(React__default.default.Fragment, null,
+                React__default.default.createElement(Skeleton.Skeleton, { width: "80px", height: "40px" }),
+                React__default.default.createElement(Skeleton.Skeleton, { width: "80px", height: "40px" }),
+                React__default.default.createElement(Skeleton.Skeleton, { width: "80px", height: "40px" })))),
+        React__default.default.createElement(FlexRow.FlexRow, { flexWrap: "nowrap", className: buildClassnames.buildClassnames([
+                ViewsContainer_module.buttonGroup,
+                showCustomMenuButton && ViewsContainer_module.customMenuButton,
+            ]) },
+            React__default.default.createElement("div", { className: form_module.inputGroup },
+                (!leftDisabled || !rightDisabled) && (React__default.default.createElement(React__default.default.Fragment, null,
+                    React__default.default.createElement(Button.Button, { id: "left-arrow", className: ViewsContainer_module.scrollButton, iconSlot: React__default.default.createElement(LeftArrowIcon.ReactComponent, { color: index.theme.colors.neutral.ink.base }), disabled: leftDisabled, onClick: toPrevScrollPosition, variant: "flat", "aria-label": "move views to the left" }),
+                    React__default.default.createElement(Button.Button, { id: "right-arrow", className: ViewsContainer_module.scrollButton, iconSlot: React__default.default.createElement(RightArrowIcon.ReactComponent, { color: index.theme.colors.neutral.ink.base }), disabled: rightDisabled, onClick: toNextScrollPosition, variant: "flat", "aria-label": "move views to the right" }))),
+                !menuButtonSlot && !!onClickMenu && (React__default.default.createElement(Button.Button, { className: ViewsContainer_module.menuButton, iconSlot: React__default.default.createElement(ThreeDotsIcon.ThreeDotsIcon, { color: index.theme.colors.neutral.ink.base }), variant: "flat", onClick: onClickMenu, "aria-label": "open menu", "aria-controls": ariaMenuControls, "aria-expanded": ariaMenuExpanded, "aria-haspopup": ariaMenuControls ? 'dialog' : undefined, ref: menuRef }))),
+            menuButtonSlot)));
 });
 
 exports.ViewsContainer = ViewsContainer;

package/dist/components/ViewsContainer/ViewsContainer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ViewsContainer.cjs","sources":["../../../src/components/ViewsContainer/ViewsContainer.tsx"],"sourcesContent":["import React, { useRef, MutableRefObject, Ref } from 'react';\n\nimport { ViewContainerProps } from './types';\nimport {\n  Container,\n  StyledLeftButton,\n  StyledLeftIcon,\n  StyledMenuButton,\n  StyledMenuIcon,\n  StyledRightButton,\n  StyledRightIcon,\n  StyledInputGroup,\n  ViewsWrapper,\n} from './styled';\nimport { useSetScrollPosition } from './hooks/useSetScrollPosition';\n\nexport const ViewsContainer = React.forwardRef<HTMLButtonElement, ViewContainerProps>(\n  (\n    { children, onClickMenu, ariaMenuControls, ariaMenuExpanded }: ViewContainerProps,\n    menuRef: Ref<HTMLButtonElement>,\n  ) => {\n    const viewsRef = useRef<HTMLDivElement>(null) as MutableRefObject<HTMLDivElement>;\n    const { rightDisabled, leftDisabled, toNextScrollPosition, toPrevScrollPosition } =\n      useSetScrollPosition(viewsRef, children);\n\n    return (\n      <Container direction=\"horizontal\" alignY=\"center\" alignX=\"between\">\n        <ViewsWrapper\n          ref={viewsRef}\n          id=\"views\"\n          role=\"tablist\"\n          alignY=\"center\"\n          direction=\"horizontal\"\n        >\n          {children}\n        </ViewsWrapper>\n\n        <StyledInputGroup>\n          {(!leftDisabled || !rightDisabled) && (\n            <>\n              <StyledLeftButton\n                id=\"left-arrow\"\n                iconSlot={<StyledLeftIcon />}\n                disabled={leftDisabled}\n                onClick={toPrevScrollPosition}\n                variant=\"flat\"\n                aria-label=\"move views to the left\"\n              />\n              <StyledRightButton\n                id=\"right-arrow\"\n                iconSlot={<StyledRightIcon />}\n                disabled={rightDisabled}\n                onClick={toNextScrollPosition}\n                variant=\"flat\"\n                aria-label=\"move views to the right\"\n              />\n            </>\n          )}\n          <StyledMenuButton\n            iconSlot={<StyledMenuIcon />}\n            variant=\"flat\"\n            onClick={onClickMenu}\n            aria-label=\"open menu\"\n            aria-controls={ariaMenuControls}\n            aria-expanded={ariaMenuExpanded}\n            aria-haspopup={ariaMenuControls ? 'dialog' : undefined}\n            ref={menuRef}\n          />\n        </StyledInputGroup>\n      </Container>\n    );\n  },\n);\n"],"names":["React","useRef","useSetScrollPosition","Container","ViewsWrapper","StyledInputGroup","StyledLeftButton","StyledLeftIcon","StyledRightButton","StyledRightIcon","StyledMenuButton","StyledMenuIcon"],"mappings":";;;;;;;;;;MAgBa,cAAc,GAAGA,sBAAK,CAAC,UAAU,CAC5C,CACE,EAAE,QAAQ,EAAE,WAAW,EAAE,gBAAgB,EAAE,gBAAgB,EAAsB,EACjF,OAA+B,KAC7B;AACF,IAAA,MAAM,QAAQ,GAAGC,YAAM,CAAiB,IAAI,CAAqC;AACjF,IAAA,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,GAC/EC,yCAAoB,CAAC,QAAQ,EAAE,QAAQ,CAAC;AAE1C,IAAA,QACEF,sBAAA,CAAA,aAAA,CAACG,gBAAS,EAAA,EAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,MAAM,EAAC,SAAS,EAAA;QAChEH,sBAAC,CAAA,aAAA,CAAAI,mBAAY,IACX,GAAG,EAAE,QAAQ,EACb,EAAE,EAAC,OAAO,EACV,IAAI,EAAC,SAAS,EACd,MAAM,EAAC,QAAQ,EACf,SAAS,EAAC,YAAY,EAErB,EAAA,QAAQ,CACI;AAEf,QAAAJ,sBAAA,CAAA,aAAA,CAACK,uBAAgB,EAAA,IAAA;AACd,YAAA,CAAC,CAAC,YAAY,IAAI,CAAC,aAAa,MAC/BL,sBAAA,CAAA,aAAA,CAAAA,sBAAA,CAAA,QAAA,EAAA,IAAA;gBACEA,sBAAC,CAAA,aAAA,CAAAM,uBAAgB,EACf,EAAA,EAAE,EAAC,YAAY,EACf,QAAQ,EAAEN,sBAAC,CAAA,aAAA,CAAAO,qBAAc,EAAG,IAAA,CAAA,EAC5B,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,oBAAoB,EAC7B,OAAO,EAAC,MAAM,EACH,YAAA,EAAA,wBAAwB,EACnC,CAAA;gBACFP,sBAAC,CAAA,aAAA,CAAAQ,wBAAiB,EAChB,EAAA,EAAE,EAAC,aAAa,EAChB,QAAQ,EAAER,sBAAA,CAAA,aAAA,CAACS,sBAAe,EAAA,IAAA,CAAG,EAC7B,QAAQ,EAAE,aAAa,EACvB,OAAO,EAAE,oBAAoB,EAC7B,OAAO,EAAC,MAAM,EACH,YAAA,EAAA,yBAAyB,EACpC,CAAA,CACD,CACJ;AACD,YAAAT,sBAAA,CAAA,aAAA,CAACU,uBAAgB,EACf,EAAA,QAAQ,EAAEV,sBAAA,CAAA,aAAA,CAACW,qBAAc,EAAG,IAAA,CAAA,EAC5B,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,WAAW,EAAA,YAAA,EACT,WAAW,EACP,eAAA,EAAA,gBAAgB,EAChB,eAAA,EAAA,gBAAgB,mBAChB,gBAAgB,GAAG,QAAQ,GAAG,SAAS,EACtD,GAAG,EAAE,OAAO,GACZ,CACe,CACT;AAEhB,CAAC;;;;"}
+{"version":3,"file":"ViewsContainer.cjs","sources":["../../../src/components/ViewsContainer/ViewsContainer.tsx"],"sourcesContent":["import React, { useRef, MutableRefObject, Ref, Fragment } from 'react';\n\nimport { theme } from 'Theme';\nimport { ViewContainerProps } from './types';\nimport { useSetScrollPosition } from './hooks/useSetScrollPosition';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { Button } from '../Button';\nimport { Skeleton } from '../Skeleton';\nimport { LeftArrowIcon, RightArrowIcon, ThreeDotsIcon } from '../../icons';\nimport { buildClassnames } from '../../utils';\n\nimport styles from './ViewsContainer.module.scss';\nimport formStyles from '../../utils/forms/form.module.scss';\n\nexport const ViewsContainer = React.forwardRef<HTMLButtonElement, ViewContainerProps>(\n  (\n    {\n      children,\n      className,\n      style,\n      onClickMenu,\n      ariaMenuControls,\n      ariaMenuExpanded,\n      hasMoreViews,\n      onFetchMoreViews,\n      isLoadingMoreViews,\n      compact = false,\n      appearance = 'primary',\n      menuButtonSlot,\n    }: ViewContainerProps,\n    menuRef: Ref<HTMLButtonElement>,\n  ) => {\n    const viewsRef = useRef<HTMLDivElement>(null) as MutableRefObject<HTMLDivElement>;\n    const { rightDisabled, leftDisabled, toNextScrollPosition, toPrevScrollPosition } =\n      useSetScrollPosition({\n        containerRef: viewsRef,\n        children,\n        hasMoreViews,\n        onFetchMoreViews,\n        isLoadingMoreViews,\n      });\n\n    const showCustomMenuButton = !onClickMenu && !!menuButtonSlot;\n\n    return (\n      <FlexRow\n        className={buildClassnames([styles[`appearance-${appearance}`], className])}\n        justifyContent=\"between\"\n        flexWrap=\"nowrap\"\n        style={style}\n      >\n        <FlexRow\n          className={buildClassnames([styles.viewsWrapper, compact && styles.compact])}\n          ref={viewsRef}\n          id=\"views\"\n          role=\"tablist\"\n          gap=\"sm\"\n          flexWrap=\"nowrap\"\n        >\n          {children}\n          {isLoadingMoreViews && (\n            <>\n              <Skeleton width=\"80px\" height=\"40px\" />\n              <Skeleton width=\"80px\" height=\"40px\" />\n              <Skeleton width=\"80px\" height=\"40px\" />\n            </>\n          )}\n        </FlexRow>\n\n        <FlexRow\n          flexWrap=\"nowrap\"\n          className={buildClassnames([\n            styles.buttonGroup,\n            showCustomMenuButton && styles.customMenuButton,\n          ])}\n        >\n          <div className={formStyles.inputGroup}>\n            {(!leftDisabled || !rightDisabled) && (\n              <>\n                <Button\n                  id=\"left-arrow\"\n                  className={styles.scrollButton}\n                  iconSlot={<LeftArrowIcon color={theme.colors.neutral.ink.base} />}\n                  disabled={leftDisabled}\n                  onClick={toPrevScrollPosition}\n                  variant=\"flat\"\n                  aria-label=\"move views to the left\"\n                />\n                <Button\n                  id=\"right-arrow\"\n                  className={styles.scrollButton}\n                  iconSlot={<RightArrowIcon color={theme.colors.neutral.ink.base} />}\n                  disabled={rightDisabled}\n                  onClick={toNextScrollPosition}\n                  variant=\"flat\"\n                  aria-label=\"move views to the right\"\n                />\n              </>\n            )}\n            {!menuButtonSlot && !!onClickMenu && (\n              <Button\n                className={styles.menuButton}\n                iconSlot={<ThreeDotsIcon color={theme.colors.neutral.ink.base} />}\n                variant=\"flat\"\n                onClick={onClickMenu}\n                aria-label=\"open menu\"\n                aria-controls={ariaMenuControls}\n                aria-expanded={ariaMenuExpanded}\n                aria-haspopup={ariaMenuControls ? 'dialog' : undefined}\n                ref={menuRef}\n              />\n            )}\n          </div>\n          {menuButtonSlot}\n        </FlexRow>\n      </FlexRow>\n    );\n  },\n);\n"],"names":["React","useRef","useSetScrollPosition","FlexRow","buildClassnames","styles","Skeleton","formStyles","Button","LeftArrowIcon","theme","RightArrowIcon","ThreeDotsIcon"],"mappings":"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"}

package/dist/components/ViewsContainer/ViewsContainer.js

@@ -1,17 +1,44 @@
 import React__default, { useRef } from 'react';
-import { Container, ViewsWrapper, StyledInputGroup, StyledLeftButton, StyledLeftIcon, StyledRightButton, StyledRightIcon, StyledMenuButton, StyledMenuIcon } from './styled.js';
+import { theme } from '../../theme/index.js';
 import { useSetScrollPosition } from './hooks/useSetScrollPosition.js';
+import { FlexRow } from '../Flex/FlexRow/FlexRow.js';
+import { Button } from '../Button/Button.js';
+import { Skeleton } from '../Skeleton/Skeleton.js';
+import { ReactComponent as LeftArrowIcon } from '../../icons/design-system/components/LeftArrowIcon.js';
+import { ReactComponent as RightArrowIcon } from '../../icons/design-system/components/RightArrowIcon.js';
+import { ThreeDotsIcon } from '../../icons/custom/components/ThreeDotsIcon.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
+import styles from './ViewsContainer.module.scss.js';
+import formStyles from '../../utils/forms/form.module.scss.js';
 
-const ViewsContainer = React__default.forwardRef(({ children, onClickMenu, ariaMenuControls, ariaMenuExpanded }, menuRef) => {
+const ViewsContainer = React__default.forwardRef(({ children, className, style, onClickMenu, ariaMenuControls, ariaMenuExpanded, hasMoreViews, onFetchMoreViews, isLoadingMoreViews, compact = false, appearance = 'primary', menuButtonSlot, }, menuRef) => {
     const viewsRef = useRef(null);
-    const { rightDisabled, leftDisabled, toNextScrollPosition, toPrevScrollPosition } = useSetScrollPosition(viewsRef, children);
-    return (React__default.createElement(Container, { direction: "horizontal", alignY: "center", alignX: "between" },
-        React__default.createElement(ViewsWrapper, { ref: viewsRef, id: "views", role: "tablist", alignY: "center", direction: "horizontal" }, children),
-        React__default.createElement(StyledInputGroup, null,
-            (!leftDisabled || !rightDisabled) && (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement(StyledLeftButton, { id: "left-arrow", iconSlot: React__default.createElement(StyledLeftIcon, null), disabled: leftDisabled, onClick: toPrevScrollPosition, variant: "flat", "aria-label": "move views to the left" }),
-                React__default.createElement(StyledRightButton, { id: "right-arrow", iconSlot: React__default.createElement(StyledRightIcon, null), disabled: rightDisabled, onClick: toNextScrollPosition, variant: "flat", "aria-label": "move views to the right" }))),
-            React__default.createElement(StyledMenuButton, { iconSlot: React__default.createElement(StyledMenuIcon, null), variant: "flat", onClick: onClickMenu, "aria-label": "open menu", "aria-controls": ariaMenuControls, "aria-expanded": ariaMenuExpanded, "aria-haspopup": ariaMenuControls ? 'dialog' : undefined, ref: menuRef }))));
+    const { rightDisabled, leftDisabled, toNextScrollPosition, toPrevScrollPosition } = useSetScrollPosition({
+        containerRef: viewsRef,
+        children,
+        hasMoreViews,
+        onFetchMoreViews,
+        isLoadingMoreViews,
+    });
+    const showCustomMenuButton = !onClickMenu && !!menuButtonSlot;
+    return (React__default.createElement(FlexRow, { className: buildClassnames([styles[`appearance-${appearance}`], className]), justifyContent: "between", flexWrap: "nowrap", style: style },
+        React__default.createElement(FlexRow, { className: buildClassnames([styles.viewsWrapper, compact && styles.compact]), ref: viewsRef, id: "views", role: "tablist", gap: "sm", flexWrap: "nowrap" },
+            children,
+            isLoadingMoreViews && (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(Skeleton, { width: "80px", height: "40px" }),
+                React__default.createElement(Skeleton, { width: "80px", height: "40px" }),
+                React__default.createElement(Skeleton, { width: "80px", height: "40px" })))),
+        React__default.createElement(FlexRow, { flexWrap: "nowrap", className: buildClassnames([
+                styles.buttonGroup,
+                showCustomMenuButton && styles.customMenuButton,
+            ]) },
+            React__default.createElement("div", { className: formStyles.inputGroup },
+                (!leftDisabled || !rightDisabled) && (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement(Button, { id: "left-arrow", className: styles.scrollButton, iconSlot: React__default.createElement(LeftArrowIcon, { color: theme.colors.neutral.ink.base }), disabled: leftDisabled, onClick: toPrevScrollPosition, variant: "flat", "aria-label": "move views to the left" }),
+                    React__default.createElement(Button, { id: "right-arrow", className: styles.scrollButton, iconSlot: React__default.createElement(RightArrowIcon, { color: theme.colors.neutral.ink.base }), disabled: rightDisabled, onClick: toNextScrollPosition, variant: "flat", "aria-label": "move views to the right" }))),
+                !menuButtonSlot && !!onClickMenu && (React__default.createElement(Button, { className: styles.menuButton, iconSlot: React__default.createElement(ThreeDotsIcon, { color: theme.colors.neutral.ink.base }), variant: "flat", onClick: onClickMenu, "aria-label": "open menu", "aria-controls": ariaMenuControls, "aria-expanded": ariaMenuExpanded, "aria-haspopup": ariaMenuControls ? 'dialog' : undefined, ref: menuRef }))),
+            menuButtonSlot)));
 });
 
 export { ViewsContainer };

package/dist/components/ViewsContainer/ViewsContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ViewsContainer.js","sources":["../../../src/components/ViewsContainer/ViewsContainer.tsx"],"sourcesContent":["import React, { useRef, MutableRefObject, Ref } from 'react';\n\nimport { ViewContainerProps } from './types';\nimport {\n  Container,\n  StyledLeftButton,\n  StyledLeftIcon,\n  StyledMenuButton,\n  StyledMenuIcon,\n  StyledRightButton,\n  StyledRightIcon,\n  StyledInputGroup,\n  ViewsWrapper,\n} from './styled';\nimport { useSetScrollPosition } from './hooks/useSetScrollPosition';\n\nexport const ViewsContainer = React.forwardRef<HTMLButtonElement, ViewContainerProps>(\n  (\n    { children, onClickMenu, ariaMenuControls, ariaMenuExpanded }: ViewContainerProps,\n    menuRef: Ref<HTMLButtonElement>,\n  ) => {\n    const viewsRef = useRef<HTMLDivElement>(null) as MutableRefObject<HTMLDivElement>;\n    const { rightDisabled, leftDisabled, toNextScrollPosition, toPrevScrollPosition } =\n      useSetScrollPosition(viewsRef, children);\n\n    return (\n      <Container direction=\"horizontal\" alignY=\"center\" alignX=\"between\">\n        <ViewsWrapper\n          ref={viewsRef}\n          id=\"views\"\n          role=\"tablist\"\n          alignY=\"center\"\n          direction=\"horizontal\"\n        >\n          {children}\n        </ViewsWrapper>\n\n        <StyledInputGroup>\n          {(!leftDisabled || !rightDisabled) && (\n            <>\n              <StyledLeftButton\n                id=\"left-arrow\"\n                iconSlot={<StyledLeftIcon />}\n                disabled={leftDisabled}\n                onClick={toPrevScrollPosition}\n                variant=\"flat\"\n                aria-label=\"move views to the left\"\n              />\n              <StyledRightButton\n                id=\"right-arrow\"\n                iconSlot={<StyledRightIcon />}\n                disabled={rightDisabled}\n                onClick={toNextScrollPosition}\n                variant=\"flat\"\n                aria-label=\"move views to the right\"\n              />\n            </>\n          )}\n          <StyledMenuButton\n            iconSlot={<StyledMenuIcon />}\n            variant=\"flat\"\n            onClick={onClickMenu}\n            aria-label=\"open menu\"\n            aria-controls={ariaMenuControls}\n            aria-expanded={ariaMenuExpanded}\n            aria-haspopup={ariaMenuControls ? 'dialog' : undefined}\n            ref={menuRef}\n          />\n        </StyledInputGroup>\n      </Container>\n    );\n  },\n);\n"],"names":["React"],"mappings":";;;;MAgBa,cAAc,GAAGA,cAAK,CAAC,UAAU,CAC5C,CACE,EAAE,QAAQ,EAAE,WAAW,EAAE,gBAAgB,EAAE,gBAAgB,EAAsB,EACjF,OAA+B,KAC7B;AACF,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAqC;AACjF,IAAA,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,GAC/E,oBAAoB,CAAC,QAAQ,EAAE,QAAQ,CAAC;AAE1C,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,SAAS,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,EAAC,MAAM,EAAC,SAAS,EAAA;QAChEA,cAAC,CAAA,aAAA,CAAA,YAAY,IACX,GAAG,EAAE,QAAQ,EACb,EAAE,EAAC,OAAO,EACV,IAAI,EAAC,SAAS,EACd,MAAM,EAAC,QAAQ,EACf,SAAS,EAAC,YAAY,EAErB,EAAA,QAAQ,CACI;AAEf,QAAAA,cAAA,CAAA,aAAA,CAAC,gBAAgB,EAAA,IAAA;AACd,YAAA,CAAC,CAAC,YAAY,IAAI,CAAC,aAAa,MAC/BA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;gBACEA,cAAC,CAAA,aAAA,CAAA,gBAAgB,EACf,EAAA,EAAE,EAAC,YAAY,EACf,QAAQ,EAAEA,cAAC,CAAA,aAAA,CAAA,cAAc,EAAG,IAAA,CAAA,EAC5B,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,oBAAoB,EAC7B,OAAO,EAAC,MAAM,EACH,YAAA,EAAA,wBAAwB,EACnC,CAAA;gBACFA,cAAC,CAAA,aAAA,CAAA,iBAAiB,EAChB,EAAA,EAAE,EAAC,aAAa,EAChB,QAAQ,EAAEA,cAAA,CAAA,aAAA,CAAC,eAAe,EAAA,IAAA,CAAG,EAC7B,QAAQ,EAAE,aAAa,EACvB,OAAO,EAAE,oBAAoB,EAC7B,OAAO,EAAC,MAAM,EACH,YAAA,EAAA,yBAAyB,EACpC,CAAA,CACD,CACJ;AACD,YAAAA,cAAA,CAAA,aAAA,CAAC,gBAAgB,EACf,EAAA,QAAQ,EAAEA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAG,IAAA,CAAA,EAC5B,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,WAAW,EAAA,YAAA,EACT,WAAW,EACP,eAAA,EAAA,gBAAgB,EAChB,eAAA,EAAA,gBAAgB,mBAChB,gBAAgB,GAAG,QAAQ,GAAG,SAAS,EACtD,GAAG,EAAE,OAAO,GACZ,CACe,CACT;AAEhB,CAAC;;;;"}
+{"version":3,"file":"ViewsContainer.js","sources":["../../../src/components/ViewsContainer/ViewsContainer.tsx"],"sourcesContent":["import React, { useRef, MutableRefObject, Ref, Fragment } from 'react';\n\nimport { theme } from 'Theme';\nimport { ViewContainerProps } from './types';\nimport { useSetScrollPosition } from './hooks/useSetScrollPosition';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { Button } from '../Button';\nimport { Skeleton } from '../Skeleton';\nimport { LeftArrowIcon, RightArrowIcon, ThreeDotsIcon } from '../../icons';\nimport { buildClassnames } from '../../utils';\n\nimport styles from './ViewsContainer.module.scss';\nimport formStyles from '../../utils/forms/form.module.scss';\n\nexport const ViewsContainer = React.forwardRef<HTMLButtonElement, ViewContainerProps>(\n  (\n    {\n      children,\n      className,\n      style,\n      onClickMenu,\n      ariaMenuControls,\n      ariaMenuExpanded,\n      hasMoreViews,\n      onFetchMoreViews,\n      isLoadingMoreViews,\n      compact = false,\n      appearance = 'primary',\n      menuButtonSlot,\n    }: ViewContainerProps,\n    menuRef: Ref<HTMLButtonElement>,\n  ) => {\n    const viewsRef = useRef<HTMLDivElement>(null) as MutableRefObject<HTMLDivElement>;\n    const { rightDisabled, leftDisabled, toNextScrollPosition, toPrevScrollPosition } =\n      useSetScrollPosition({\n        containerRef: viewsRef,\n        children,\n        hasMoreViews,\n        onFetchMoreViews,\n        isLoadingMoreViews,\n      });\n\n    const showCustomMenuButton = !onClickMenu && !!menuButtonSlot;\n\n    return (\n      <FlexRow\n        className={buildClassnames([styles[`appearance-${appearance}`], className])}\n        justifyContent=\"between\"\n        flexWrap=\"nowrap\"\n        style={style}\n      >\n        <FlexRow\n          className={buildClassnames([styles.viewsWrapper, compact && styles.compact])}\n          ref={viewsRef}\n          id=\"views\"\n          role=\"tablist\"\n          gap=\"sm\"\n          flexWrap=\"nowrap\"\n        >\n          {children}\n          {isLoadingMoreViews && (\n            <>\n              <Skeleton width=\"80px\" height=\"40px\" />\n              <Skeleton width=\"80px\" height=\"40px\" />\n              <Skeleton width=\"80px\" height=\"40px\" />\n            </>\n          )}\n        </FlexRow>\n\n        <FlexRow\n          flexWrap=\"nowrap\"\n          className={buildClassnames([\n            styles.buttonGroup,\n            showCustomMenuButton && styles.customMenuButton,\n          ])}\n        >\n          <div className={formStyles.inputGroup}>\n            {(!leftDisabled || !rightDisabled) && (\n              <>\n                <Button\n                  id=\"left-arrow\"\n                  className={styles.scrollButton}\n                  iconSlot={<LeftArrowIcon color={theme.colors.neutral.ink.base} />}\n                  disabled={leftDisabled}\n                  onClick={toPrevScrollPosition}\n                  variant=\"flat\"\n                  aria-label=\"move views to the left\"\n                />\n                <Button\n                  id=\"right-arrow\"\n                  className={styles.scrollButton}\n                  iconSlot={<RightArrowIcon color={theme.colors.neutral.ink.base} />}\n                  disabled={rightDisabled}\n                  onClick={toNextScrollPosition}\n                  variant=\"flat\"\n                  aria-label=\"move views to the right\"\n                />\n              </>\n            )}\n            {!menuButtonSlot && !!onClickMenu && (\n              <Button\n                className={styles.menuButton}\n                iconSlot={<ThreeDotsIcon color={theme.colors.neutral.ink.base} />}\n                variant=\"flat\"\n                onClick={onClickMenu}\n                aria-label=\"open menu\"\n                aria-controls={ariaMenuControls}\n                aria-expanded={ariaMenuExpanded}\n                aria-haspopup={ariaMenuControls ? 'dialog' : undefined}\n                ref={menuRef}\n              />\n            )}\n          </div>\n          {menuButtonSlot}\n        </FlexRow>\n      </FlexRow>\n    );\n  },\n);\n"],"names":["React"],"mappings":"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"}

package/dist/components/ViewsContainer/ViewsContainer.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._viewsWrapper_lffdu_1 {\n  overflow-x: scroll;\n  -ms-overflow-style: none; /* for Internet Explorer, Edge */\n  scrollbar-width: none; /* for Firefox */\n  height: inherit;\n  padding: var(--sizes-sm) 6px var(--sizes-sm) var(--sizes-3);\n  margin-left: 0;\n}\n._viewsWrapper_lffdu_1 ::-webkit-scrollbar {\n  display: none; /* for Chrome, Safari, and Opera */\n}\n._viewsWrapper_lffdu_1._compact_lffdu_12 {\n  padding: var(--sizes-xs);\n}\n\n._appearance-primary_lffdu_16 {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n._menuButton_lffdu_20 {\n  background-color: white !important;\n}\n._menuButton_lffdu_20:hover {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n._scrollButton_lffdu_27 {\n  background-color: white !important;\n}\n._scrollButton_lffdu_27:disabled {\n  background-color: white !important;\n}\n._scrollButton_lffdu_27:disabled svg {\n  color: var(--colors-neutral-ink-lightest);\n}\n._scrollButton_lffdu_27:hover {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n._buttonGroup_lffdu_40 {\n  padding-right: var(--sizes-sm);\n}");
+var styles = {"viewsWrapper":"_viewsWrapper_lffdu_1","compact":"_compact_lffdu_12","appearance-primary":"_appearance-primary_lffdu_16","menuButton":"_menuButton_lffdu_20","scrollButton":"_scrollButton_lffdu_27","buttonGroup":"_buttonGroup_lffdu_40"};
+
+module.exports = styles;
+//# sourceMappingURL=ViewsContainer.module.scss.cjs.map

package/dist/components/ViewsContainer/ViewsContainer.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewsContainer.module.scss.cjs","sources":["../../../src/components/ViewsContainer/ViewsContainer.module.scss"],"sourcesContent":[".viewsWrapper {\n  overflow-x: scroll;\n  -ms-overflow-style: none; /* for Internet Explorer, Edge */\n  scrollbar-width: none; /* for Firefox */\n\n  ::-webkit-scrollbar {\n    display: none; /* for Chrome, Safari, and Opera */\n  }\n\n  height: inherit;\n  padding: var(--sizes-sm) 6px var(--sizes-sm) var(--sizes-3);\n  margin-left: 0;\n\n  &.compact {\n    padding: var(--sizes-xs);\n  }\n}\n\n.appearance-primary {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n// using important to override styled-component styles on button\n.menuButton {\n  background-color: white !important;\n\n  &:hover {\n    background-color: var(--colors-neutral-grey-lightest);\n  }\n}\n\n// using important to override styled-component styles on button\n.scrollButton {\n  background-color: white !important;\n\n  &:disabled {\n    background-color: white !important;\n    & svg {\n      color: var(--colors-neutral-ink-lightest);\n    }\n  }\n\n  &:hover {\n    background-color: var(--colors-neutral-grey-lightest);\n  }\n}\n\n.buttonGroup {\n  padding-right: var(--sizes-sm);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,wkCAAA;AACA,aAAA,CAAA,cAAA,CAAA,uBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,oBAAA,CAAA,8BAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,aAAA,CAAA,uBAAA;;;;"}

package/dist/components/ViewsContainer/ViewsContainer.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._viewsWrapper_lffdu_1 {\n  overflow-x: scroll;\n  -ms-overflow-style: none; /* for Internet Explorer, Edge */\n  scrollbar-width: none; /* for Firefox */\n  height: inherit;\n  padding: var(--sizes-sm) 6px var(--sizes-sm) var(--sizes-3);\n  margin-left: 0;\n}\n._viewsWrapper_lffdu_1 ::-webkit-scrollbar {\n  display: none; /* for Chrome, Safari, and Opera */\n}\n._viewsWrapper_lffdu_1._compact_lffdu_12 {\n  padding: var(--sizes-xs);\n}\n\n._appearance-primary_lffdu_16 {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n._menuButton_lffdu_20 {\n  background-color: white !important;\n}\n._menuButton_lffdu_20:hover {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n._scrollButton_lffdu_27 {\n  background-color: white !important;\n}\n._scrollButton_lffdu_27:disabled {\n  background-color: white !important;\n}\n._scrollButton_lffdu_27:disabled svg {\n  color: var(--colors-neutral-ink-lightest);\n}\n._scrollButton_lffdu_27:hover {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n._buttonGroup_lffdu_40 {\n  padding-right: var(--sizes-sm);\n}");
+var styles = {"viewsWrapper":"_viewsWrapper_lffdu_1","compact":"_compact_lffdu_12","appearance-primary":"_appearance-primary_lffdu_16","menuButton":"_menuButton_lffdu_20","scrollButton":"_scrollButton_lffdu_27","buttonGroup":"_buttonGroup_lffdu_40"};
+
+export { styles as default };
+//# sourceMappingURL=ViewsContainer.module.scss.js.map

package/dist/components/ViewsContainer/ViewsContainer.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewsContainer.module.scss.js","sources":["../../../src/components/ViewsContainer/ViewsContainer.module.scss"],"sourcesContent":[".viewsWrapper {\n  overflow-x: scroll;\n  -ms-overflow-style: none; /* for Internet Explorer, Edge */\n  scrollbar-width: none; /* for Firefox */\n\n  ::-webkit-scrollbar {\n    display: none; /* for Chrome, Safari, and Opera */\n  }\n\n  height: inherit;\n  padding: var(--sizes-sm) 6px var(--sizes-sm) var(--sizes-3);\n  margin-left: 0;\n\n  &.compact {\n    padding: var(--sizes-xs);\n  }\n}\n\n.appearance-primary {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n// using important to override styled-component styles on button\n.menuButton {\n  background-color: white !important;\n\n  &:hover {\n    background-color: var(--colors-neutral-grey-lightest);\n  }\n}\n\n// using important to override styled-component styles on button\n.scrollButton {\n  background-color: white !important;\n\n  &:disabled {\n    background-color: white !important;\n    & svg {\n      color: var(--colors-neutral-ink-lightest);\n    }\n  }\n\n  &:hover {\n    background-color: var(--colors-neutral-grey-lightest);\n  }\n}\n\n.buttonGroup {\n  padding-right: var(--sizes-sm);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,wkCAAA;AACA,aAAA,CAAA,cAAA,CAAA,uBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,oBAAA,CAAA,8BAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,cAAA,CAAA,wBAAA,CAAA,aAAA,CAAA,uBAAA;;;;"}

package/dist/components/ViewsContainer/hooks/useSetScrollPosition.cjs

@@ -4,7 +4,7 @@ var React = require('react');
 var reactUse = require('react-use');
 var utils = require('../utils.cjs');
 
-const useSetScrollPosition = (containerRef, children) => {
+const useSetScrollPosition = ({ containerRef, children, hasMoreViews = false, onFetchMoreViews, isLoadingMoreViews = false, }) => {
     var _a;
     const [leftDisabled, setLeftDisabled] = React.useState(true);
     const [rightDisabled, setRightDisabled] = React.useState(false);
@@ -31,11 +31,16 @@ const useSetScrollPosition = (containerRef, children) => {
                 (_h = document.getElementById('left-arrow')) === null || _h === undefined ? undefined : _h.focus();
             }
             setRightDisabled(true);
+            // Check if we've reached the end and should fetch more data
+            // Only fetches more when not already loading more views and has more views to load
+            if (hasMoreViews && onFetchMoreViews && !isLoadingMoreViews) {
+                onFetchMoreViews();
+            }
         }
         else {
             setRightDisabled(false);
         }
-    }, [containerRef]);
+    }, [containerRef, onFetchMoreViews, isLoadingMoreViews, hasMoreViews]);
     const handleResize = React.useCallback(() => {
         if (!containerRef.current)
             return;
@@ -62,58 +67,81 @@ const useSetScrollPosition = (containerRef, children) => {
             behavior: 'smooth',
         });
     }, [containerRef, viewStartPositions]);
+    // Initialize view positions when container first has children
+    React.useEffect(() => {
+        var _a, _b;
+        if (!((_b = (_a = containerRef === null || containerRef === undefined ? undefined : containerRef.current) === null || _a === undefined ? undefined : _a.children) === null || _b === undefined ? undefined : _b.length) || viewStartPositions.length > 0)
+            return;
+        setViewStartPositions(utils.createViewPositionArray(containerRef.current));
+    }, [containerRef, viewStartPositions.length]);
+    // Handle new item addition - scroll to end and update positions
+    React.useEffect(() => {
+        var _a, _b, _c, _d;
+        if (!((_b = (_a = containerRef === null || containerRef === undefined ? undefined : containerRef.current) === null || _a === undefined ? undefined : _a.children) === null || _b === undefined ? undefined : _b.length))
+            return;
+        const childrenCount = containerRef.current.children.length;
+        const positionsCount = viewStartPositions.length;
+        const totalChildren = React.Children.count(children);
+        const shouldScrollToNewItem = childrenCount !== positionsCount && positionsCount > 0 && positionsCount < totalChildren;
+        if (!shouldScrollToNewItem)
+            return;
+        containerRef.current.scrollTo({
+            left: containerRef.current.scrollWidth - containerRef.current.clientWidth,
+            top: 0,
+            behavior: 'smooth',
+        });
+        // Compute the x position of the new item
+        const lastChildRect = (_c = containerRef.current.children[positionsCount - 1]) === null || _c === undefined ? undefined : _c.getBoundingClientRect();
+        const newPosition = viewStartPositions[positionsCount - 1] + ((_d = lastChildRect === null || lastChildRect === undefined ? undefined : lastChildRect.x) !== null && _d !== undefined ? _d : 0) - 20;
+        setViewStartPositions([...viewStartPositions, newPosition]);
+    }, [containerRef, children, viewStartPositions]);
+    // Handle active tab changes - scroll to active tab
+    React.useEffect(() => {
+        var _a, _b;
+        if (!((_b = (_a = containerRef === null || containerRef === undefined ? undefined : containerRef.current) === null || _a === undefined ? undefined : _a.children) === null || _b === undefined ? undefined : _b.length))
+            return;
+        if (activeTab === prevActiveTab || activeTab === null)
+            return;
+        if (containerRef.current.children.length !== viewStartPositions.length)
+            return;
+        const index = Array.from(containerRef.current.children).indexOf(activeTab);
+        if (index === -1)
+            return;
+        containerRef.current.scrollTo({
+            left: viewStartPositions[index],
+            top: 0,
+            behavior: 'smooth',
+        });
+    }, [activeTab, prevActiveTab, containerRef, viewStartPositions]);
+    // Handle fetching more views - recompute positions
+    React.useEffect(() => {
+        var _a, _b;
+        if (!((_b = (_a = containerRef === null || containerRef === undefined ? undefined : containerRef.current) === null || _a === undefined ? undefined : _a.children) === null || _b === undefined ? undefined : _b.length))
+            return;
+        if (viewStartPositions.length >= containerRef.current.children.length)
+            return;
+        const currentScrollLeft = containerRef.current.scrollLeft;
+        // Temporarily reset scroll to 0 to get accurate positions
+        containerRef.current.scrollTo({ left: 0, top: 0, behavior: 'auto' });
+        // Recompute positions from scroll position 0
+        setViewStartPositions(utils.createViewPositionArray(containerRef.current));
+        // Restore the user's scroll position
+        containerRef.current.scrollTo({ left: currentScrollLeft, top: 0, behavior: 'auto' });
+    }, [containerRef, viewStartPositions.length]);
+    // Handle window resize and scroll event listeners
     React.useEffect(() => {
-        var _a, _b, _c, _d, _e, _f, _g;
         if (!(containerRef === null || containerRef === undefined ? undefined : containerRef.current))
             return;
-        if (((_a = containerRef.current.children) === null || _a === undefined ? undefined : _a.length) &&
-            ((_b = containerRef.current.children) === null || _b === undefined ? undefined : _b.length) !== viewStartPositions.length &&
-            viewStartPositions.length > 0 &&
-            viewStartPositions.length < children.length) {
-            // scrolls to the last view, when a new item is added
-            containerRef.current.scrollTo({
-                left: containerRef.current.scrollWidth - containerRef.current.clientWidth,
-                top: 0,
-                behavior: 'smooth',
-            });
-            // computes the x position of the new item
-            setViewStartPositions([
-                ...viewStartPositions,
-                viewStartPositions[viewStartPositions.length - 1] +
-                    ((_d = (_c = containerRef.current.children[viewStartPositions.length - 1]) === null || _c === undefined ? undefined : _c.getBoundingClientRect().x) !== null && _d !== undefined ? _d : 0) -
-                    20,
-            ]);
-        }
-        if (((_e = containerRef.current.children) === null || _e === undefined ? undefined : _e.length) && viewStartPositions.length === 0) {
-            setViewStartPositions(utils.createViewPositionArray(containerRef.current));
-        }
-        // scrolls to active tab when page loads
-        if (activeTab !== prevActiveTab &&
-            activeTab !== null &&
-            ((_f = containerRef.current.children) === null || _f === undefined ? undefined : _f.length) === viewStartPositions.length) {
-            const index = Array.from(containerRef.current.children).indexOf(activeTab);
-            containerRef.current.scrollTo({
-                left: viewStartPositions[index],
-                top: 0,
-                behavior: 'smooth',
-            });
-        }
+        const container = containerRef.current;
         handleResize();
         window.addEventListener('resize', handleResize);
-        (_g = containerRef.current) === null || _g === undefined ? undefined : _g.addEventListener('scroll', handleScroll);
+        container.addEventListener('scroll', handleScroll);
         // eslint-disable-next-line consistent-return
         return () => {
             window.removeEventListener('resize', handleResize);
+            container.removeEventListener('scroll', handleScroll);
         };
-    }, [
-        containerRef,
-        children,
-        handleResize,
-        handleScroll,
-        viewStartPositions,
-        activeTab,
-        prevActiveTab,
-    ]);
+    }, [containerRef, handleResize, handleScroll]);
     return { rightDisabled, leftDisabled, toNextScrollPosition, toPrevScrollPosition };
 };
 

package/dist/components/ViewsContainer/hooks/useSetScrollPosition.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useSetScrollPosition.cjs","sources":["../../../../src/components/ViewsContainer/hooks/useSetScrollPosition.ts"],"sourcesContent":["import { MutableRefObject, ReactNode, useCallback, useEffect, useState } from 'react';\nimport { usePrevious } from 'react-use';\nimport { createViewPositionArray, getNextViewPosition, getPrevViewPosition } from '../utils';\n\nexport const useSetScrollPosition = (\n  containerRef: MutableRefObject<HTMLDivElement>,\n  children: ReactNode,\n) => {\n  const [leftDisabled, setLeftDisabled] = useState(true);\n  const [rightDisabled, setRightDisabled] = useState(false);\n  const [viewStartPositions, setViewStartPositions] = useState<number[]>([]);\n\n  const activeTab = containerRef?.current?.querySelector('[aria-selected = true]');\n  const prevActiveTab = usePrevious(activeTab);\n\n  const handleScroll = useCallback(() => {\n    if (containerRef.current?.scrollLeft > 0) {\n      setLeftDisabled(false);\n    } else {\n      if (document.getElementById('left-arrow') === document.activeElement) {\n        document.getElementById('right-arrow')?.focus();\n      }\n      setLeftDisabled(true);\n    }\n\n    const maxScrollWidth = containerRef.current?.scrollWidth ?? 0;\n    const maxClientWidth = containerRef.current?.clientWidth ?? 0;\n    const maxScrollLeft = maxScrollWidth - maxClientWidth;\n\n    // -10 to prevent javascript assertion errors on floating points\n    if (containerRef.current?.scrollLeft >= maxScrollLeft - 10) {\n      if (document.getElementById('right-arrow') === document.activeElement) {\n        document.getElementById('left-arrow')?.focus();\n      }\n      setRightDisabled(true);\n    } else {\n      setRightDisabled(false);\n    }\n  }, [containerRef]);\n\n  const handleResize = useCallback(() => {\n    if (!containerRef.current) return;\n    if (containerRef.current.scrollWidth - containerRef.current.getBoundingClientRect().width < 5) {\n      setRightDisabled(true);\n    } else {\n      setRightDisabled(false);\n    }\n  }, [containerRef]);\n\n  const toNextScrollPosition = useCallback(() => {\n    const newPosition = getNextViewPosition(\n      viewStartPositions,\n      containerRef.current.scrollLeft,\n      containerRef.current.clientWidth,\n    );\n\n    containerRef.current.scrollTo({\n      left: newPosition,\n      top: 0,\n      behavior: 'smooth',\n    });\n  }, [containerRef, viewStartPositions]);\n\n  const toPrevScrollPosition = useCallback(() => {\n    const newPosition = getPrevViewPosition(viewStartPositions, containerRef.current.scrollLeft);\n\n    containerRef.current.scrollTo({\n      left: newPosition,\n      top: 0,\n      behavior: 'smooth',\n    });\n  }, [containerRef, viewStartPositions]);\n\n  useEffect(() => {\n    if (!containerRef?.current) return;\n\n    if (\n      containerRef.current.children?.length &&\n      containerRef.current.children?.length !== viewStartPositions.length &&\n      viewStartPositions.length > 0 &&\n      viewStartPositions.length < (children as ReactNode[]).length\n    ) {\n      // scrolls to the last view, when a new item is added\n      containerRef.current.scrollTo({\n        left: containerRef.current.scrollWidth - containerRef.current.clientWidth,\n        top: 0,\n        behavior: 'smooth',\n      });\n      // computes the x position of the new item\n      setViewStartPositions([\n        ...viewStartPositions,\n        viewStartPositions[viewStartPositions.length - 1] +\n          (containerRef.current.children[viewStartPositions.length - 1]?.getBoundingClientRect()\n            .x ?? 0) -\n          20,\n      ]);\n    }\n\n    if (containerRef.current.children?.length && viewStartPositions.length === 0) {\n      setViewStartPositions(createViewPositionArray(containerRef.current));\n    }\n\n    // scrolls to active tab when page loads\n    if (\n      activeTab !== prevActiveTab &&\n      activeTab !== null &&\n      containerRef.current.children?.length === viewStartPositions.length\n    ) {\n      const index = Array.from(containerRef.current.children).indexOf(activeTab);\n\n      containerRef.current.scrollTo({\n        left: viewStartPositions[index],\n        top: 0,\n        behavior: 'smooth',\n      });\n    }\n\n    handleResize();\n    window.addEventListener('resize', handleResize);\n    containerRef.current?.addEventListener('scroll', handleScroll);\n\n    // eslint-disable-next-line consistent-return\n    return () => {\n      window.removeEventListener('resize', handleResize);\n    };\n  }, [\n    containerRef,\n    children,\n    handleResize,\n    handleScroll,\n    viewStartPositions,\n    activeTab,\n    prevActiveTab,\n  ]);\n\n  return { rightDisabled, leftDisabled, toNextScrollPosition, toPrevScrollPosition };\n};\n"],"names":["useState","usePrevious","useCallback","getNextViewPosition","getPrevViewPosition","useEffect","createViewPositionArray"],"mappings":"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"}
+{"version":3,"file":"useSetScrollPosition.cjs","sources":["../../../../src/components/ViewsContainer/hooks/useSetScrollPosition.ts"],"sourcesContent":["import { MutableRefObject, ReactNode, useCallback, useEffect, useState, Children } from 'react';\nimport { usePrevious } from 'react-use';\nimport { createViewPositionArray, getNextViewPosition, getPrevViewPosition } from '../utils';\n\ntype UseSetScrollPositionProps = {\n  containerRef: MutableRefObject<HTMLDivElement>;\n  children: ReactNode;\n  hasMoreViews?: boolean;\n  onFetchMoreViews?: () => void;\n  isLoadingMoreViews?: boolean;\n};\n\nexport const useSetScrollPosition = ({\n  containerRef,\n  children,\n  hasMoreViews = false,\n  onFetchMoreViews,\n  isLoadingMoreViews = false,\n}: UseSetScrollPositionProps) => {\n  const [leftDisabled, setLeftDisabled] = useState(true);\n  const [rightDisabled, setRightDisabled] = useState(false);\n  const [viewStartPositions, setViewStartPositions] = useState<number[]>([]);\n\n  const activeTab = containerRef?.current?.querySelector('[aria-selected = true]');\n  const prevActiveTab = usePrevious(activeTab);\n\n  const handleScroll = useCallback(() => {\n    if (containerRef.current?.scrollLeft > 0) {\n      setLeftDisabled(false);\n    } else {\n      if (document.getElementById('left-arrow') === document.activeElement) {\n        document.getElementById('right-arrow')?.focus();\n      }\n      setLeftDisabled(true);\n    }\n\n    const maxScrollWidth = containerRef.current?.scrollWidth ?? 0;\n    const maxClientWidth = containerRef.current?.clientWidth ?? 0;\n    const maxScrollLeft = maxScrollWidth - maxClientWidth;\n\n    // -10 to prevent javascript assertion errors on floating points\n    if (containerRef.current?.scrollLeft >= maxScrollLeft - 10) {\n      if (document.getElementById('right-arrow') === document.activeElement) {\n        document.getElementById('left-arrow')?.focus();\n      }\n      setRightDisabled(true);\n\n      // Check if we've reached the end and should fetch more data\n      // Only fetches more when not already loading more views and has more views to load\n      if (hasMoreViews && onFetchMoreViews && !isLoadingMoreViews) {\n        onFetchMoreViews();\n      }\n    } else {\n      setRightDisabled(false);\n    }\n  }, [containerRef, onFetchMoreViews, isLoadingMoreViews, hasMoreViews]);\n\n  const handleResize = useCallback(() => {\n    if (!containerRef.current) return;\n    if (containerRef.current.scrollWidth - containerRef.current.getBoundingClientRect().width < 5) {\n      setRightDisabled(true);\n    } else {\n      setRightDisabled(false);\n    }\n  }, [containerRef]);\n\n  const toNextScrollPosition = useCallback(() => {\n    const newPosition = getNextViewPosition(\n      viewStartPositions,\n      containerRef.current.scrollLeft,\n      containerRef.current.clientWidth,\n    );\n\n    containerRef.current.scrollTo({\n      left: newPosition,\n      top: 0,\n      behavior: 'smooth',\n    });\n  }, [containerRef, viewStartPositions]);\n\n  const toPrevScrollPosition = useCallback(() => {\n    const newPosition = getPrevViewPosition(viewStartPositions, containerRef.current.scrollLeft);\n\n    containerRef.current.scrollTo({\n      left: newPosition,\n      top: 0,\n      behavior: 'smooth',\n    });\n  }, [containerRef, viewStartPositions]);\n\n  // Initialize view positions when container first has children\n  useEffect(() => {\n    if (!containerRef?.current?.children?.length || viewStartPositions.length > 0) return;\n\n    setViewStartPositions(createViewPositionArray(containerRef.current));\n  }, [containerRef, viewStartPositions.length]);\n\n  // Handle new item addition - scroll to end and update positions\n  useEffect(() => {\n    if (!containerRef?.current?.children?.length) return;\n\n    const childrenCount = containerRef.current.children.length;\n    const positionsCount = viewStartPositions.length;\n    const totalChildren = Children.count(children);\n\n    const shouldScrollToNewItem =\n      childrenCount !== positionsCount && positionsCount > 0 && positionsCount < totalChildren;\n\n    if (!shouldScrollToNewItem) return;\n\n    containerRef.current.scrollTo({\n      left: containerRef.current.scrollWidth - containerRef.current.clientWidth,\n      top: 0,\n      behavior: 'smooth',\n    });\n\n    // Compute the x position of the new item\n    const lastChildRect =\n      containerRef.current.children[positionsCount - 1]?.getBoundingClientRect();\n    const newPosition = viewStartPositions[positionsCount - 1] + (lastChildRect?.x ?? 0) - 20;\n\n    setViewStartPositions([...viewStartPositions, newPosition]);\n  }, [containerRef, children, viewStartPositions]);\n\n  // Handle active tab changes - scroll to active tab\n  useEffect(() => {\n    if (!containerRef?.current?.children?.length) return;\n    if (activeTab === prevActiveTab || activeTab === null) return;\n    if (containerRef.current.children.length !== viewStartPositions.length) return;\n\n    const index = Array.from(containerRef.current.children).indexOf(activeTab);\n    if (index === -1) return;\n\n    containerRef.current.scrollTo({\n      left: viewStartPositions[index],\n      top: 0,\n      behavior: 'smooth',\n    });\n  }, [activeTab, prevActiveTab, containerRef, viewStartPositions]);\n\n  // Handle fetching more views - recompute positions\n  useEffect(() => {\n    if (!containerRef?.current?.children?.length) return;\n    if (viewStartPositions.length >= containerRef.current.children.length) return;\n\n    const currentScrollLeft = containerRef.current.scrollLeft;\n\n    // Temporarily reset scroll to 0 to get accurate positions\n    containerRef.current.scrollTo({ left: 0, top: 0, behavior: 'auto' });\n\n    // Recompute positions from scroll position 0\n    setViewStartPositions(createViewPositionArray(containerRef.current));\n\n    // Restore the user's scroll position\n    containerRef.current.scrollTo({ left: currentScrollLeft, top: 0, behavior: 'auto' });\n  }, [containerRef, viewStartPositions.length]);\n\n  // Handle window resize and scroll event listeners\n  useEffect(() => {\n    if (!containerRef?.current) return;\n\n    const container = containerRef.current;\n\n    handleResize();\n    window.addEventListener('resize', handleResize);\n    container.addEventListener('scroll', handleScroll);\n\n    // eslint-disable-next-line consistent-return\n    return () => {\n      window.removeEventListener('resize', handleResize);\n      container.removeEventListener('scroll', handleScroll);\n    };\n  }, [containerRef, handleResize, handleScroll]);\n\n  return { rightDisabled, leftDisabled, toNextScrollPosition, toPrevScrollPosition };\n};\n"],"names":["useState","usePrevious","useCallback","getNextViewPosition","getPrevViewPosition","useEffect","createViewPositionArray","Children"],"mappings":"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"}