@veeqo/ui 12.4.0-beta-9 → 12.5.0

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

@@ -1,5 +1,7 @@
 'use strict';
 
+var constants = require('../../constants.cjs');
+
 /**
  * Constructs a user-friendly string of accepted types valid for the UploadFile component based on the
  * fileTypes list passed as parameter.
@@ -19,22 +21,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 constants.AcceptedFileTypes.CSV:
+                base += 'CSV';
+                break;
+            case constants.AcceptedFileTypes.GIF:
+                base += 'GIF';
+                break;
+            case constants.AcceptedFileTypes.JPEG:
+                base += 'JPEG';
+                break;
+            case constants.AcceptedFileTypes.JPG:
+                base += 'JPG';
+                break;
+            case constants.AcceptedFileTypes.PNG:
+                base += 'PNG';
+                break;
+        }
+        if (!isPenultimate && !isLast && list.length > 2)
+            base += ', ';
+    });
+    return base;
 };
 
 exports.getValidTypesString = getValidTypesString;

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

@@ -1 +1 @@
-{"version":3,"file":"getValidTypesString.cjs","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.cjs","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":["AcceptedFileTypes"],"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,KAAKA,2BAAiB,CAAC,GAAG;gBACxB,IAAI,IAAI,KAAK;gBACb;YACF,KAAKA,2BAAiB,CAAC,GAAG;gBACxB,IAAI,IAAI,KAAK;gBACb;YACF,KAAKA,2BAAiB,CAAC,IAAI;gBACzB,IAAI,IAAI,MAAM;gBACd;YACF,KAAKA,2BAAiB,CAAC,GAAG;gBACxB,IAAI,IAAI,KAAK;gBACb;YACF,KAAKA,2BAAiB,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/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;;;;"}