npm - @veeqo/ui - Versions diffs - 12.4.0 → 12.5.1 - Mend

@veeqo/ui 12.4.0 → 12.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (84) hide show

package/dist/components/SelectDropdown/components/OptionsContainers/types.d.ts ADDED Viewed

@@ -0,0 +1,25 @@
+import { ReactElement } from 'react';
+import { Selection, GridListProps as AriaGridListProps, ListBoxProps as AriaListBoxProps } from 'react-aria-components';
+import { ListItemSectionProps } from '../ListItemSection/ListItemSection';
+import { GridItemProps } from '../GridItem/types';
+import { ListItemProps } from '../ListItem/types';
+type ListProps = {
+    id?: string;
+    className?: string;
+    selectionMode: 'single' | 'multiple';
+    emptyStateSlot?: ReactElement;
+    isLoading?: boolean;
+    onSelectionChange: (keys: Selection) => void;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
+};
+export type GridListProps = ListProps & Omit<AriaGridListProps<GridItemProps>, 'items' | 'selectedValues'> & {
+    options: GridItemProps[];
+    selectedValues: GridItemProps[];
+};
+export type ListBoxProps = ListProps & Omit<AriaListBoxProps<ListItemProps | ListItemSectionProps>, 'items' | 'selectedValues'> & {
+    options: (ListItemProps | ListItemSectionProps)[];
+    selectedValues: (ListItemProps | ListItemSectionProps)[];
+    hasSection?: boolean;
+};
+export {};

package/dist/components/SelectDropdown/components/SelectDropdownState.cjs CHANGED Viewed

@@ -1,7 +1,10 @@
 'use strict';
 var React = require('react');
-var Loader = require('../../Loader/Loader.cjs');
+var FlexCol = require('../../Flex/FlexCol/FlexCol.cjs');
+var Skeleton = require('../../Skeleton/Skeleton.cjs');
+var Text = require('../../Text/Text.cjs');
+var InboxIcon = require('../../../icons/design-system/components/InboxIcon.cjs');
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -9,10 +12,15 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 const SelectDropdownState = ({ isLoading, emptyStateSlot }) => {
     if (isLoading)
-        return React__default.default.createElement(Loader.Loader, null);
+        return (React__default.default.createElement(FlexCol.FlexCol, { flexGrow: "1" },
+            React__default.default.createElement(Skeleton.Skeleton, { width: "100%", height: "32px" }),
+            React__default.default.createElement(Skeleton.Skeleton, { width: "100%", height: "32px" }),
+            React__default.default.createElement(Skeleton.Skeleton, { width: "100%", height: "32px" })));
     if (emptyStateSlot)
         return emptyStateSlot;
-    return React__default.default.createElement("span", null, "No items found");
+    return (React__default.default.createElement(FlexCol.FlexCol, { flexGrow: "1", alignItems: "center", justifyContent: "center", gap: "sm" },
+        React__default.default.createElement(InboxIcon.ReactComponent, null),
+        React__default.default.createElement(Text.Text, null, "No items found")));
 };
 exports.SelectDropdownState = SelectDropdownState;

package/dist/components/SelectDropdown/components/SelectDropdownState.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectDropdownState.cjs","sources":["../../../../src/components/SelectDropdown/components/SelectDropdownState.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { ~~Loader~~ } from '../../~~Loader~~';\n\ntype SelectDropdownStateProps = {\n isLoading: boolean;\n emptyStateSlot?: ReactElement;\n};\n\nexport const SelectDropdownState = ({ isLoading, emptyStateSlot }: SelectDropdownStateProps) => {\n if (isLoading) return <~~Loader~~ ~~/>;\~~n if (emptyStateSlot) return emptyStateSlot;\n\n return <~~span~~>No items found</~~span>;\~~n};\n"],"names":["React","~~Loader~~"],"mappings":"~~;;;;;;;;;AAQa~~,MAAA,mBAAmB,GAAG,CAAC,EAAE,SAAS,EAAE,cAAc,EAA4B,KAAI;AAC7F,IAAA,IAAI,SAAS;~~QAAE~~,~~OAAOA~~,sBAAA,CAAA,aAAA,~~CAACC~~,~~aAAM~~,EAAA,~~IAAA~~,CAAG;~~AAChC~~,IAAA,IAAI,cAAc;AAAE,QAAA,OAAO,cAAc;AAEzC,IAAA,~~OAAOD~~,~~oEAA2B~~;~~AACpC~~;;;;"}
1	+ {"version":3,"file":"SelectDropdownState.cjs","sources":["../../../../src/components/SelectDropdown/components/SelectDropdownState.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { Skeleton } from '../../Skeleton';\nimport { Text } from '../../Text';\nimport { InboxIcon } from '../../../icons';\n\ntype SelectDropdownStateProps = {\n isLoading: boolean;\n emptyStateSlot?: ReactElement;\n};\n\nexport const SelectDropdownState = ({ isLoading, emptyStateSlot }: SelectDropdownStateProps) => {\n if (isLoading)\n return (\n <FlexCol flexGrow=\"1\">\n <Skeleton width=\"100%\" height=\"32px\" />\n <Skeleton width=\"100%\" height=\"32px\" />\n <Skeleton width=\"100%\" height=\"32px\" />\n </FlexCol>\n );\n if (emptyStateSlot) return emptyStateSlot;\n\n return (\n <FlexCol flexGrow=\"1\" alignItems=\"center\" justifyContent=\"center\" gap=\"sm\">\n <InboxIcon />\n <Text>No items found</Text>\n </FlexCol>\n );\n};\n"],"names":["React","FlexCol","Skeleton","InboxIcon","Text"],"mappings":";;;;;;;;;;;;AAWa,MAAA,mBAAmB,GAAG,CAAC,EAAE,SAAS,EAAE,cAAc,EAA4B,KAAI;AAC7F,IAAA,IAAI,SAAS;AACX,QAAA,QACEA,sBAAC,CAAA,aAAA,CAAAC,eAAO,EAAC,EAAA,QAAQ,EAAC,GAAG,EAAA;YACnBD,sBAAC,CAAA,aAAA,CAAAE,iBAAQ,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAG,CAAA;YACvCF,sBAAC,CAAA,aAAA,CAAAE,iBAAQ,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAG,CAAA;AACvC,YAAAF,sBAAA,CAAA,aAAA,CAACE,iBAAQ,EAAA,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAA,CAAG,CAC/B;AAEd,IAAA,IAAI,cAAc;AAAE,QAAA,OAAO,cAAc;AAEzC,IAAA,QACEF,sBAAC,CAAA,aAAA,CAAAC,eAAO,IAAC,QAAQ,EAAC,GAAG,EAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAA;AACxE,QAAAD,sBAAA,CAAA,aAAA,CAACG,wBAAS,EAAG,IAAA,CAAA;AACb,QAAAH,sBAAA,CAAA,aAAA,CAACI,SAAI,EAAA,IAAA,EAAA,gBAAA,CAAsB,CACnB;AAEd;;;;"}

package/dist/components/SelectDropdown/components/SelectDropdownState.js CHANGED Viewed

@@ -1,12 +1,20 @@
 import React__default from 'react';
-import { Loader } from '../../Loader/Loader.js';
+import { FlexCol } from '../../Flex/FlexCol/FlexCol.js';
+import { Skeleton } from '../../Skeleton/Skeleton.js';
+import { Text } from '../../Text/Text.js';
+import { ReactComponent as InboxIcon } from '../../../icons/design-system/components/InboxIcon.js';
 const SelectDropdownState = ({ isLoading, emptyStateSlot }) => {
     if (isLoading)
-        return React__default.createElement(Loader, null);
+        return (React__default.createElement(FlexCol, { flexGrow: "1" },
+            React__default.createElement(Skeleton, { width: "100%", height: "32px" }),
+            React__default.createElement(Skeleton, { width: "100%", height: "32px" }),
+            React__default.createElement(Skeleton, { width: "100%", height: "32px" })));
     if (emptyStateSlot)
         return emptyStateSlot;
-    return React__default.createElement("span", null, "No items found");
+    return (React__default.createElement(FlexCol, { flexGrow: "1", alignItems: "center", justifyContent: "center", gap: "sm" },
+        React__default.createElement(InboxIcon, null),
+        React__default.createElement(Text, null, "No items found")));
 };
 export { SelectDropdownState };

package/dist/components/SelectDropdown/components/SelectDropdownState.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectDropdownState.js","sources":["../../../../src/components/SelectDropdown/components/SelectDropdownState.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { ~~Loader~~ } from '../../~~Loader~~';\n\ntype SelectDropdownStateProps = {\n isLoading: boolean;\n emptyStateSlot?: ReactElement;\n};\n\nexport const SelectDropdownState = ({ isLoading, emptyStateSlot }: SelectDropdownStateProps) => {\n if (isLoading) return <~~Loader~~ ~~/>;\~~n if (emptyStateSlot) return emptyStateSlot;\n\n return <~~span~~>No items found</~~span>;\~~n};\n"],"names":["React"],"mappings":"~~;;;AAQa~~,MAAA,mBAAmB,GAAG,CAAC,EAAE,SAAS,EAAE,cAAc,EAA4B,KAAI;AAC7F,IAAA,IAAI,SAAS;~~QAAE~~,~~OAAOA~~,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,~~IAAA~~,~~CAAG~~;~~AAChC~~,IAAA,IAAI,cAAc;AAAE,QAAA,OAAO,cAAc;AAEzC,IAAA,~~OAAOA~~,~~4DAA2B~~;~~AACpC~~;;;;"}
1	+ {"version":3,"file":"SelectDropdownState.js","sources":["../../../../src/components/SelectDropdown/components/SelectDropdownState.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { FlexCol } from '../../Flex/FlexCol';\nimport { Skeleton } from '../../Skeleton';\nimport { Text } from '../../Text';\nimport { InboxIcon } from '../../../icons';\n\ntype SelectDropdownStateProps = {\n isLoading: boolean;\n emptyStateSlot?: ReactElement;\n};\n\nexport const SelectDropdownState = ({ isLoading, emptyStateSlot }: SelectDropdownStateProps) => {\n if (isLoading)\n return (\n <FlexCol flexGrow=\"1\">\n <Skeleton width=\"100%\" height=\"32px\" />\n <Skeleton width=\"100%\" height=\"32px\" />\n <Skeleton width=\"100%\" height=\"32px\" />\n </FlexCol>\n );\n if (emptyStateSlot) return emptyStateSlot;\n\n return (\n <FlexCol flexGrow=\"1\" alignItems=\"center\" justifyContent=\"center\" gap=\"sm\">\n <InboxIcon />\n <Text>No items found</Text>\n </FlexCol>\n );\n};\n"],"names":["React"],"mappings":";;;;;;AAWa,MAAA,mBAAmB,GAAG,CAAC,EAAE,SAAS,EAAE,cAAc,EAA4B,KAAI;AAC7F,IAAA,IAAI,SAAS;AACX,QAAA,QACEA,cAAC,CAAA,aAAA,CAAA,OAAO,EAAC,EAAA,QAAQ,EAAC,GAAG,EAAA;YACnBA,cAAC,CAAA,aAAA,CAAA,QAAQ,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAG,CAAA;YACvCA,cAAC,CAAA,aAAA,CAAA,QAAQ,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAG,CAAA;AACvC,YAAAA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAA,CAAG,CAC/B;AAEd,IAAA,IAAI,cAAc;AAAE,QAAA,OAAO,cAAc;AAEzC,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,OAAO,IAAC,QAAQ,EAAC,GAAG,EAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAA;AACxE,QAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAG,IAAA,CAAA;AACb,QAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,IAAA,EAAA,gBAAA,CAAsB,CACnB;AAEd;;;;"}

package/dist/components/SelectDropdown/components/SelectedOption.cjs CHANGED Viewed

@@ -15,10 +15,10 @@ const SelectedOption = ({ placeholder, options, selectionMode }) => {
     }
     if (selectionMode === 'single') {
         return (React__default.default.createElement(FlexRow.FlexRow, { gap: "sm" },
-            React__default.default.createElement(Text.Text, { variant: "placeholder" }, (_a = options[0]) === null || _a === undefined ? undefined : _a.label),
+            React__default.default.createElement(Text.Text, { variant: "body" }, (_a = options[0]) === null || _a === undefined ? undefined : _a.label),
             ((_b = options[0]) === null || _b === undefined ? undefined : _b.itemInfoSlot) && React__default.default.createElement(Text.Text, { variant: "hintText" }, (_c = options[0]) === null || _c === undefined ? undefined : _c.itemInfoSlot)));
     }
-    return React__default.default.createElement(Text.Text, { variant: "placeholder" }, options.map((opt) => opt.label).join(', '));
+    return React__default.default.createElement(Text.Text, { variant: "body" }, options.map((opt) => opt.label).join(', '));
 };
 exports.SelectedOption = SelectedOption;

package/dist/components/SelectDropdown/components/SelectedOption.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectedOption.cjs","sources":["../../../../src/components/SelectDropdown/components/SelectedOption.tsx"],"sourcesContent":["import React from 'react';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { Text } from '../../Text';\nimport { SelectDropdownItem } from '../types';\n\ntype SelectedOptionProps = {\n placeholder: string;\n options: SelectDropdownItem[];\n selectionMode: 'single' \| 'multiple';\n};\n\nexport const SelectedOption = ({ placeholder, options, selectionMode }: SelectedOptionProps) => {\n if (options.length === 0) {\n return <Text variant=\"placeholder\">{placeholder}</Text>;\n }\n\n if (selectionMode === 'single') {\n return (\n <FlexRow gap=\"sm\">\n <Text variant=\"~~placeholder~~\">{options[0]?.label}</Text>\n {options[0]?.itemInfoSlot && <Text variant=\"hintText\">{options[0]?.itemInfoSlot}</Text>}\n </FlexRow>\n );\n }\n\n return <Text variant=\"~~placeholder~~\">{options.map((opt: any) => opt.label).join(', ')}</Text>;\n};\n"],"names":["React","Text","FlexRow"],"mappings":";;;;;;;;;;AAWO,MAAM,cAAc,GAAG,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa,EAAuB,KAAI;;AAC7F,IAAA,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;QACxB,OAAOA,sBAAA,CAAA,aAAA,CAACC,SAAI,EAAC,EAAA,OAAO,EAAC,aAAa,EAAA,EAAE,WAAW,CAAQ;AACxD;IAED,IAAI,aAAa,KAAK,QAAQ,EAAE;AAC9B,QAAA,QACED,sBAAC,CAAA,aAAA,CAAAE,eAAO,EAAC,EAAA,GAAG,EAAC,IAAI,EAAA;AACf,YAAAF,sBAAA,CAAA,aAAA,CAACC,SAAI,EAAA,EAAC,OAAO,EAAC,~~aAAa~~,EAAA,EAAE,CAAA,EAAA,GAAA,OAAO,CAAC,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,KAAK,CAAQ;~~YACrD~~,CAAA,CAAA,EAAA,GAAA,OAAO,CAAC,CAAC,CAAC,gDAAE,YAAY,KAAID,sBAAC,CAAA,aAAA,CAAAC,SAAI,EAAC,EAAA,OAAO,EAAC,UAAU,EAAA,EAAE,CAAA,EAAA,GAAA,OAAO,CAAC,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,YAAY,CAAQ,CAC/E;AAEb;IAED,OAAOD,sBAAA,CAAA,aAAA,CAACC,SAAI,EAAA,EAAC,OAAO,EAAC,~~aAAa~~,EAAA,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,GAAQ,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAQ;~~AAC7F~~;;;;"}
1	+ {"version":3,"file":"SelectedOption.cjs","sources":["../../../../src/components/SelectDropdown/components/SelectedOption.tsx"],"sourcesContent":["import React from 'react';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { Text } from '../../Text';\nimport { SelectDropdownItem } from '../types';\n\ntype SelectedOptionProps = {\n placeholder: string;\n options: SelectDropdownItem[];\n selectionMode: 'single' \| 'multiple';\n};\n\nexport const SelectedOption = ({ placeholder, options, selectionMode }: SelectedOptionProps) => {\n if (options.length === 0) {\n return <Text variant=\"placeholder\">{placeholder}</Text>;\n }\n\n if (selectionMode === 'single') {\n return (\n <FlexRow gap=\"sm\">\n <Text variant=\"body\">{options[0]?.label}</Text>\n {options[0]?.itemInfoSlot && <Text variant=\"hintText\">{options[0]?.itemInfoSlot}</Text>}\n </FlexRow>\n );\n }\n\n return <Text variant=\"body\">{options.map((opt: any) => opt.label).join(', ')}</Text>;\n};\n"],"names":["React","Text","FlexRow"],"mappings":";;;;;;;;;;AAWO,MAAM,cAAc,GAAG,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa,EAAuB,KAAI;;AAC7F,IAAA,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;QACxB,OAAOA,sBAAA,CAAA,aAAA,CAACC,SAAI,EAAC,EAAA,OAAO,EAAC,aAAa,EAAA,EAAE,WAAW,CAAQ;AACxD;IAED,IAAI,aAAa,KAAK,QAAQ,EAAE;AAC9B,QAAA,QACED,sBAAC,CAAA,aAAA,CAAAE,eAAO,EAAC,EAAA,GAAG,EAAC,IAAI,EAAA;AACf,YAAAF,sBAAA,CAAA,aAAA,CAACC,SAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAA,EAAE,CAAA,EAAA,GAAA,OAAO,CAAC,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,KAAK,CAAQ;YAC9C,CAAA,CAAA,EAAA,GAAA,OAAO,CAAC,CAAC,CAAC,gDAAE,YAAY,KAAID,sBAAC,CAAA,aAAA,CAAAC,SAAI,EAAC,EAAA,OAAO,EAAC,UAAU,EAAA,EAAE,CAAA,EAAA,GAAA,OAAO,CAAC,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,YAAY,CAAQ,CAC/E;AAEb;IAED,OAAOD,sBAAA,CAAA,aAAA,CAACC,SAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAA,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,GAAQ,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAQ;AACtF;;;;"}

package/dist/components/SelectDropdown/components/SelectedOption.js CHANGED Viewed

@@ -9,10 +9,10 @@ const SelectedOption = ({ placeholder, options, selectionMode }) => {
     }
     if (selectionMode === 'single') {
         return (React__default.createElement(FlexRow, { gap: "sm" },
-            React__default.createElement(Text, { variant: "placeholder" }, (_a = options[0]) === null || _a === undefined ? undefined : _a.label),
+            React__default.createElement(Text, { variant: "body" }, (_a = options[0]) === null || _a === undefined ? undefined : _a.label),
             ((_b = options[0]) === null || _b === undefined ? undefined : _b.itemInfoSlot) && React__default.createElement(Text, { variant: "hintText" }, (_c = options[0]) === null || _c === undefined ? undefined : _c.itemInfoSlot)));
     }
-    return React__default.createElement(Text, { variant: "placeholder" }, options.map((opt) => opt.label).join(', '));
+    return React__default.createElement(Text, { variant: "body" }, options.map((opt) => opt.label).join(', '));
 };
 export { SelectedOption };

package/dist/components/SelectDropdown/components/SelectedOption.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectedOption.js","sources":["../../../../src/components/SelectDropdown/components/SelectedOption.tsx"],"sourcesContent":["import React from 'react';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { Text } from '../../Text';\nimport { SelectDropdownItem } from '../types';\n\ntype SelectedOptionProps = {\n placeholder: string;\n options: SelectDropdownItem[];\n selectionMode: 'single' \| 'multiple';\n};\n\nexport const SelectedOption = ({ placeholder, options, selectionMode }: SelectedOptionProps) => {\n if (options.length === 0) {\n return <Text variant=\"placeholder\">{placeholder}</Text>;\n }\n\n if (selectionMode === 'single') {\n return (\n <FlexRow gap=\"sm\">\n <Text variant=\"~~placeholder~~\">{options[0]?.label}</Text>\n {options[0]?.itemInfoSlot && <Text variant=\"hintText\">{options[0]?.itemInfoSlot}</Text>}\n </FlexRow>\n );\n }\n\n return <Text variant=\"~~placeholder~~\">{options.map((opt: any) => opt.label).join(', ')}</Text>;\n};\n"],"names":["React"],"mappings":";;;;AAWO,MAAM,cAAc,GAAG,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa,EAAuB,KAAI;;AAC7F,IAAA,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;QACxB,OAAOA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,OAAO,EAAC,aAAa,EAAA,EAAE,WAAW,CAAQ;AACxD;IAED,IAAI,aAAa,KAAK,QAAQ,EAAE;AAC9B,QAAA,QACEA,cAAC,CAAA,aAAA,CAAA,OAAO,EAAC,EAAA,GAAG,EAAC,IAAI,EAAA;AACf,YAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,~~aAAa~~,EAAA,EAAE,CAAA,EAAA,GAAA,OAAO,CAAC,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,KAAK,CAAQ;~~YACrD~~,CAAA,CAAA,EAAA,GAAA,OAAO,CAAC,CAAC,CAAC,gDAAE,YAAY,KAAIA,cAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,OAAO,EAAC,UAAU,EAAA,EAAE,CAAA,EAAA,GAAA,OAAO,CAAC,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,YAAY,CAAQ,CAC/E;AAEb;IAED,OAAOA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,~~aAAa~~,EAAA,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,GAAQ,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAQ;~~AAC7F~~;;;;"}
1	+ {"version":3,"file":"SelectedOption.js","sources":["../../../../src/components/SelectDropdown/components/SelectedOption.tsx"],"sourcesContent":["import React from 'react';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { Text } from '../../Text';\nimport { SelectDropdownItem } from '../types';\n\ntype SelectedOptionProps = {\n placeholder: string;\n options: SelectDropdownItem[];\n selectionMode: 'single' \| 'multiple';\n};\n\nexport const SelectedOption = ({ placeholder, options, selectionMode }: SelectedOptionProps) => {\n if (options.length === 0) {\n return <Text variant=\"placeholder\">{placeholder}</Text>;\n }\n\n if (selectionMode === 'single') {\n return (\n <FlexRow gap=\"sm\">\n <Text variant=\"body\">{options[0]?.label}</Text>\n {options[0]?.itemInfoSlot && <Text variant=\"hintText\">{options[0]?.itemInfoSlot}</Text>}\n </FlexRow>\n );\n }\n\n return <Text variant=\"body\">{options.map((opt: any) => opt.label).join(', ')}</Text>;\n};\n"],"names":["React"],"mappings":";;;;AAWO,MAAM,cAAc,GAAG,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa,EAAuB,KAAI;;AAC7F,IAAA,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;QACxB,OAAOA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,OAAO,EAAC,aAAa,EAAA,EAAE,WAAW,CAAQ;AACxD;IAED,IAAI,aAAa,KAAK,QAAQ,EAAE;AAC9B,QAAA,QACEA,cAAC,CAAA,aAAA,CAAA,OAAO,EAAC,EAAA,GAAG,EAAC,IAAI,EAAA;AACf,YAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAA,EAAE,CAAA,EAAA,GAAA,OAAO,CAAC,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,KAAK,CAAQ;YAC9C,CAAA,CAAA,EAAA,GAAA,OAAO,CAAC,CAAC,CAAC,gDAAE,YAAY,KAAIA,cAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,OAAO,EAAC,UAAU,EAAA,EAAE,CAAA,EAAA,GAAA,OAAO,CAAC,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,YAAY,CAAQ,CAC/E;AAEb;IAED,OAAOA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAA,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,GAAQ,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAQ;AACtF;;;;"}

package/dist/components/SelectDropdown/components/item.module.scss.cjs CHANGED Viewed

@@ -2,8 +2,8 @@
 var ___$insertStyle = require('../../../_virtual/____insertStyle.cjs');
-___$insertStyle("._item_19dv4_1 {\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  background-color: #ffffff;\n  text-decoration: none;\n}\n._item_19dv4_1._appearance-secondary_19dv4_7 {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n._item_19dv4_1[data-hovered] > div, ._item_19dv4_1[data-hovered] > div:first-of-type[role=gridcell] > :first-child {\n  background-color: #f0f7fc;\n}\n._item_19dv4_1[data-pressed] > div, ._item_19dv4_1[data-pressed] > div:first-of-type[role=gridcell] > :first-child {\n  background-color: #e3f0fa;\n}\n._item_19dv4_1[data-focused] {\n  outline: 0;\n}\n._item_19dv4_1[data-focus-visible] > div, ._item_19dv4_1[data-focus-visible] > div:first-of-type[role=gridcell] > :first-child {\n  outline: solid var(--sizes-xs) var(--colors-secondary-blue-light);\n  z-index: 1;\n  position: relative;\n}\n._item_19dv4_1[data-dragging] {\n  background-color: var(--colors-neutral-grey-base);\n  border-color: var(--color-secondary-blue-base);\n}\n._item_19dv4_1[data-drop-target] {\n  background-color: var(--colors-secondary-green-base);\n  border-color: var(--colors-secondary-green-base);\n}\n._item_19dv4_1[data-disabled] {\n  cursor: not-allowed;\n  background-color: var(--colors-neutral-grey-light);\n  opacity: 0.75;\n}\n._item_19dv4_1 > div,\n._item_19dv4_1 > div:first-of-type[role=gridcell] > :first-child {\n  padding: var(--sizes-sm);\n  border-radius: var(--radius-base);\n}");
-var styles = {"item":"_item_19dv4_1","appearance-secondary":"_appearance-secondary_19dv4_7"};
+___$insertStyle("._item_1dwbl_1 {\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  background-color: #ffffff;\n  text-decoration: none;\n}\n._item_1dwbl_1._appearance-secondary_1dwbl_7 {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n._item_1dwbl_1[data-hovered] > div, ._item_1dwbl_1[data-hovered] > div:first-of-type[role=gridcell] > :first-child {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n._item_1dwbl_1[data-pressed] > div, ._item_1dwbl_1[data-pressed] > div:first-of-type[role=gridcell] > :first-child {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n._item_1dwbl_1[data-focused] {\n  outline: 0;\n}\n._item_1dwbl_1[data-focus-visible] > div, ._item_1dwbl_1[data-focus-visible] > div:first-of-type[role=gridcell] > :first-child {\n  outline: solid var(--sizes-xs) var(--colors-secondary-blue-light);\n  z-index: 1;\n  position: relative;\n}\n._item_1dwbl_1[data-dragging] {\n  background-color: var(--colors-neutral-grey-base);\n  border-color: var(--color-secondary-blue-base);\n}\n._item_1dwbl_1[data-drop-target] {\n  background-color: var(--colors-secondary-green-base);\n  border-color: var(--colors-secondary-green-base);\n}\n._item_1dwbl_1[data-disabled] {\n  cursor: not-allowed;\n  background-color: var(--colors-neutral-grey-light);\n  opacity: 0.75;\n}\n._item_1dwbl_1 > div,\n._item_1dwbl_1 > div:first-of-type[role=gridcell] > :first-child {\n  padding: var(--sizes-sm);\n  border-radius: var(--radius-base);\n}");
+var itemStyles = {"item":"_item_1dwbl_1","appearance-secondary":"_appearance-secondary_1dwbl_7"};
-module.exports = styles;
+module.exports = itemStyles;
 //# sourceMappingURL=item.module.scss.cjs.map

package/dist/components/SelectDropdown/components/item.module.scss.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"item.module.scss.cjs","sources":["../../../../src/components/SelectDropdown/components/item.module.scss"],"sourcesContent":[".item {\n border-radius: var(--radius-base);\n cursor: pointer;\n background-color: #ffffff;\n text-decoration: none;\n\n &.appearance-secondary {\n background-color: var(--colors-neutral-grey-lightest);\n }\n\n &[data-hovered] > div,\n &[data-hovered] > div:first-of-type[role='gridcell'] > :first-child {\n background-color: ~~#f0f7fc~~;\n }\n\n &[data-pressed] > div,\n &[data-pressed] > div:first-of-type[role='gridcell'] > :first-child {\n background-color: ~~#e3f0fa~~;\n }\n\n &[data-focused] {\n outline: 0;\n }\n\n &[data-focus-visible] > div,\n &[data-focus-visible] > div:first-of-type[role='gridcell'] > :first-child {\n outline: solid var(--sizes-xs) var(--colors-secondary-blue-light);\n z-index: 1;\n position: relative;\n }\n\n &[data-dragging] {\n background-color: var(--colors-neutral-grey-base);\n border-color: var(--color-secondary-blue-base);\n }\n\n &[data-drop-target] {\n background-color: var(--colors-secondary-green-base);\n border-color: var(--colors-secondary-green-base);\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n background-color: var(--colors-neutral-grey-light);\n opacity: 0.75;\n }\n\n > div,\n > div:first-of-type[role='gridcell'] > :first-child {\n padding: var(--sizes-sm);\n border-radius: var(--radius-base);\n }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,~~64CAAA~~;AACA,~~aAAA~~,CAAA,MAAA,CAAA,eAAA,CAAA,sBAAA,CAAA,+BAAA;;;;"}
1	+ {"version":3,"file":"item.module.scss.cjs","sources":["../../../../src/components/SelectDropdown/components/item.module.scss"],"sourcesContent":[".item {\n border-radius: var(--radius-base);\n cursor: pointer;\n background-color: #ffffff;\n text-decoration: none;\n\n &.appearance-secondary {\n background-color: var(--colors-neutral-grey-lightest);\n }\n\n &[data-hovered] > div,\n &[data-hovered] > div:first-of-type[role='gridcell'] > :first-child {\n background-color: var(--colors-neutral-grey-lightest);\n }\n\n &[data-pressed] > div,\n &[data-pressed] > div:first-of-type[role='gridcell'] > :first-child {\n background-color: var(--colors-neutral-grey-lightest);\n }\n\n &[data-focused] {\n outline: 0;\n }\n\n &[data-focus-visible] > div,\n &[data-focus-visible] > div:first-of-type[role='gridcell'] > :first-child {\n outline: solid var(--sizes-xs) var(--colors-secondary-blue-light);\n z-index: 1;\n position: relative;\n }\n\n &[data-dragging] {\n background-color: var(--colors-neutral-grey-base);\n border-color: var(--color-secondary-blue-base);\n }\n\n &[data-drop-target] {\n background-color: var(--colors-secondary-green-base);\n border-color: var(--colors-secondary-green-base);\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n background-color: var(--colors-neutral-grey-light);\n opacity: 0.75;\n }\n\n > div,\n > div:first-of-type[role='gridcell'] > :first-child {\n padding: var(--sizes-sm);\n border-radius: var(--radius-base);\n }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,q8CAAA;AACA,iBAAA,CAAA,MAAA,CAAA,eAAA,CAAA,sBAAA,CAAA,+BAAA;;;;"}

package/dist/components/SelectDropdown/components/item.module.scss.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import insertStyle from '../../../_virtual/____insertStyle.js';
-insertStyle("._item_19dv4_1 {\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  background-color: #ffffff;\n  text-decoration: none;\n}\n._item_19dv4_1._appearance-secondary_19dv4_7 {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n._item_19dv4_1[data-hovered] > div, ._item_19dv4_1[data-hovered] > div:first-of-type[role=gridcell] > :first-child {\n  background-color: #f0f7fc;\n}\n._item_19dv4_1[data-pressed] > div, ._item_19dv4_1[data-pressed] > div:first-of-type[role=gridcell] > :first-child {\n  background-color: #e3f0fa;\n}\n._item_19dv4_1[data-focused] {\n  outline: 0;\n}\n._item_19dv4_1[data-focus-visible] > div, ._item_19dv4_1[data-focus-visible] > div:first-of-type[role=gridcell] > :first-child {\n  outline: solid var(--sizes-xs) var(--colors-secondary-blue-light);\n  z-index: 1;\n  position: relative;\n}\n._item_19dv4_1[data-dragging] {\n  background-color: var(--colors-neutral-grey-base);\n  border-color: var(--color-secondary-blue-base);\n}\n._item_19dv4_1[data-drop-target] {\n  background-color: var(--colors-secondary-green-base);\n  border-color: var(--colors-secondary-green-base);\n}\n._item_19dv4_1[data-disabled] {\n  cursor: not-allowed;\n  background-color: var(--colors-neutral-grey-light);\n  opacity: 0.75;\n}\n._item_19dv4_1 > div,\n._item_19dv4_1 > div:first-of-type[role=gridcell] > :first-child {\n  padding: var(--sizes-sm);\n  border-radius: var(--radius-base);\n}");
-var styles = {"item":"_item_19dv4_1","appearance-secondary":"_appearance-secondary_19dv4_7"};
+insertStyle("._item_1dwbl_1 {\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  background-color: #ffffff;\n  text-decoration: none;\n}\n._item_1dwbl_1._appearance-secondary_1dwbl_7 {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n._item_1dwbl_1[data-hovered] > div, ._item_1dwbl_1[data-hovered] > div:first-of-type[role=gridcell] > :first-child {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n._item_1dwbl_1[data-pressed] > div, ._item_1dwbl_1[data-pressed] > div:first-of-type[role=gridcell] > :first-child {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n._item_1dwbl_1[data-focused] {\n  outline: 0;\n}\n._item_1dwbl_1[data-focus-visible] > div, ._item_1dwbl_1[data-focus-visible] > div:first-of-type[role=gridcell] > :first-child {\n  outline: solid var(--sizes-xs) var(--colors-secondary-blue-light);\n  z-index: 1;\n  position: relative;\n}\n._item_1dwbl_1[data-dragging] {\n  background-color: var(--colors-neutral-grey-base);\n  border-color: var(--color-secondary-blue-base);\n}\n._item_1dwbl_1[data-drop-target] {\n  background-color: var(--colors-secondary-green-base);\n  border-color: var(--colors-secondary-green-base);\n}\n._item_1dwbl_1[data-disabled] {\n  cursor: not-allowed;\n  background-color: var(--colors-neutral-grey-light);\n  opacity: 0.75;\n}\n._item_1dwbl_1 > div,\n._item_1dwbl_1 > div:first-of-type[role=gridcell] > :first-child {\n  padding: var(--sizes-sm);\n  border-radius: var(--radius-base);\n}");
+var itemStyles = {"item":"_item_1dwbl_1","appearance-secondary":"_appearance-secondary_1dwbl_7"};
-export { styles as default };
+export { itemStyles as default };
 //# sourceMappingURL=item.module.scss.js.map

package/dist/components/SelectDropdown/components/item.module.scss.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"item.module.scss.js","sources":["../../../../src/components/SelectDropdown/components/item.module.scss"],"sourcesContent":[".item {\n border-radius: var(--radius-base);\n cursor: pointer;\n background-color: #ffffff;\n text-decoration: none;\n\n &.appearance-secondary {\n background-color: var(--colors-neutral-grey-lightest);\n }\n\n &[data-hovered] > div,\n &[data-hovered] > div:first-of-type[role='gridcell'] > :first-child {\n background-color: ~~#f0f7fc~~;\n }\n\n &[data-pressed] > div,\n &[data-pressed] > div:first-of-type[role='gridcell'] > :first-child {\n background-color: ~~#e3f0fa~~;\n }\n\n &[data-focused] {\n outline: 0;\n }\n\n &[data-focus-visible] > div,\n &[data-focus-visible] > div:first-of-type[role='gridcell'] > :first-child {\n outline: solid var(--sizes-xs) var(--colors-secondary-blue-light);\n z-index: 1;\n position: relative;\n }\n\n &[data-dragging] {\n background-color: var(--colors-neutral-grey-base);\n border-color: var(--color-secondary-blue-base);\n }\n\n &[data-drop-target] {\n background-color: var(--colors-secondary-green-base);\n border-color: var(--colors-secondary-green-base);\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n background-color: var(--colors-neutral-grey-light);\n opacity: 0.75;\n }\n\n > div,\n > div:first-of-type[role='gridcell'] > :first-child {\n padding: var(--sizes-sm);\n border-radius: var(--radius-base);\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,~~64CAAA~~;AACA,~~aAAA~~,CAAA,MAAA,CAAA,eAAA,CAAA,sBAAA,CAAA,+BAAA;;;;"}
1	+ {"version":3,"file":"item.module.scss.js","sources":["../../../../src/components/SelectDropdown/components/item.module.scss"],"sourcesContent":[".item {\n border-radius: var(--radius-base);\n cursor: pointer;\n background-color: #ffffff;\n text-decoration: none;\n\n &.appearance-secondary {\n background-color: var(--colors-neutral-grey-lightest);\n }\n\n &[data-hovered] > div,\n &[data-hovered] > div:first-of-type[role='gridcell'] > :first-child {\n background-color: var(--colors-neutral-grey-lightest);\n }\n\n &[data-pressed] > div,\n &[data-pressed] > div:first-of-type[role='gridcell'] > :first-child {\n background-color: var(--colors-neutral-grey-lightest);\n }\n\n &[data-focused] {\n outline: 0;\n }\n\n &[data-focus-visible] > div,\n &[data-focus-visible] > div:first-of-type[role='gridcell'] > :first-child {\n outline: solid var(--sizes-xs) var(--colors-secondary-blue-light);\n z-index: 1;\n position: relative;\n }\n\n &[data-dragging] {\n background-color: var(--colors-neutral-grey-base);\n border-color: var(--color-secondary-blue-base);\n }\n\n &[data-drop-target] {\n background-color: var(--colors-secondary-green-base);\n border-color: var(--colors-secondary-green-base);\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n background-color: var(--colors-neutral-grey-light);\n opacity: 0.75;\n }\n\n > div,\n > div:first-of-type[role='gridcell'] > :first-child {\n padding: var(--sizes-sm);\n border-radius: var(--radius-base);\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,q8CAAA;AACA,iBAAA,CAAA,MAAA,CAAA,eAAA,CAAA,sBAAA,CAAA,+BAAA;;;;"}

package/dist/components/SelectDropdown/types.d.ts CHANGED Viewed

@@ -3,10 +3,11 @@ import { ReactElement } from 'react';
 import { ButtonProps } from '../Button/types';
 import { ListItemProps } from './components/ListItem/types';
 import { ListItemSectionProps } from './components/ListItemSection/ListItemSection';
+import { GridItemProps } from './components/GridItem/types';
 type CTAButtonProps = Omit<ButtonProps, 'variant'> & {
     label: string;
 };
-export type SelectDropdownItem = ListItemProps | ListItemSectionProps;
+export type SelectDropdownItem = ListItemProps | ListItemSectionProps | GridItemProps;
 type ImportedListBoxProps = Pick<ListBoxProps<SelectDropdownItem>, 'children' | 'dragAndDropHooks' | 'onScroll' | 'disabledKeys'>;
 export type SelectDropdownSingleProps = ImportedListBoxProps & {
     multiple?: false;
@@ -31,6 +32,8 @@ export type SelectDropdownProps = (SelectDropdownSingleProps | SelectDropdownMul
     actions?: CTAButtonProps[];
     searchValue?: string;
     onSearchChange?: (value: string) => void;
+    topAction?: CTAButtonProps;
+    isSelectDropdownOpen?: boolean;
     'aria-label'?: string;
     'aria-labelledby'?: string;
     'aria-describedby'?: string;

package/dist/components/ViewsContainer/ViewsContainer.cjs CHANGED Viewed

@@ -28,7 +28,8 @@ const ViewsContainer = React__default.default.forwardRef(({ children, className,
         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 },
+    const shouldShowNavigationArrows = !leftDisabled || !rightDisabled;
+    return (React__default.default.createElement(FlexRow.FlexRow, { className: buildClassnames.buildClassnames([ViewsContainer_module[`appearance-${appearance}`], className]), justifyContent: "space-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,
@@ -39,8 +40,8 @@ const ViewsContainer = React__default.default.forwardRef(({ children, className,
                 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("div", { className: shouldShowNavigationArrows ? form_module.inputGroup : undefined },
+                shouldShowNavigationArrows && (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 }))),

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

	@@ -1 +1 @@
1	- {"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":";;;;;;;;;;;;;;;;;;;;AAca,MAAA,cAAc,GAAGA,sBAAK,CAAC,UAAU,CAC5C,CACE,EACE,QAAQ,EACR,SAAS,EACT,KAAK,EACL,WAAW,EACX,gBAAgB,EAChB,gBAAgB,EAChB,YAAY,EACZ,gBAAgB,EAChB,kBAAkB,EAClB,OAAO,GAAG,KAAK,EACf,UAAU,GAAG,SAAS,EACtB,cAAc,GACK,EACrB,OAA+B,KAC7B;AACF,IAAA,MAAM,QAAQ,GAAGC,YAAM,CAAiB,IAAI,CAAqC;IACjF,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,GAC/EC,yCAAoB,CAAC;AACnB,QAAA,YAAY,EAAE,QAAQ;QACtB,QAAQ;QACR,YAAY;QACZ,gBAAgB;QAChB,kBAAkB;AACnB,KAAA,CAAC;IAEJ,MAAM,oBAAoB,GAAG,CAAC,WAAW,IAAI,CAAC,CAAC,cAAc;~~AAE7D~~,IAAA,QACEF,sBAAA,CAAA,aAAA,CAACG,eAAO,EAAA,EACN,SAAS,EAAEC,+BAAe,CAAC,CAACC,qBAAM,CAAC,CAAA,WAAA,EAAc,UAAU,CAAE,CAAA,CAAC,EAAE,SAAS,CAAC,CAAC,EAC3E,cAAc,EAAC,~~SAAS~~,~~EACxB~~,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAE,KAAK,EAAA;AAEZ,QAAAL,sBAAA,CAAA,aAAA,CAACG,eAAO,EACN,EAAA,SAAS,EAAEC,+BAAe,CAAC,CAACC,qBAAM,CAAC,YAAY,EAAE,OAAO,IAAIA,qBAAM,CAAC,OAAO,CAAC,CAAC,EAC5E,GAAG,EAAE,QAAQ,EACb,EAAE,EAAC,OAAO,EACV,IAAI,EAAC,SAAS,EACd,GAAG,EAAC,IAAI,EACR,QAAQ,EAAC,QAAQ,EAAA;YAEhB,QAAQ;AACR,YAAA,kBAAkB,KACjBL,sBAAA,CAAA,aAAA,CAAAA,sBAAA,CAAA,QAAA,EAAA,IAAA;gBACEA,sBAAC,CAAA,aAAA,CAAAM,iBAAQ,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAG,CAAA;gBACvCN,sBAAC,CAAA,aAAA,CAAAM,iBAAQ,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAG,CAAA;AACvC,gBAAAN,sBAAA,CAAA,aAAA,CAACM,iBAAQ,EAAA,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAA,CAAG,CACtC,CACJ,CACO;QAEVN,sBAAC,CAAA,aAAA,CAAAG,eAAO,IACN,QAAQ,EAAC,QAAQ,EACjB,SAAS,EAAEC,+BAAe,CAAC;AACzB,gBAAAC,qBAAM,CAAC,WAAW;gBAClB,oBAAoB,IAAIA,qBAAM,CAAC,gBAAgB;aAChD,CAAC,EAAA;AAEF,YAAAL,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,~~EAAEO~~,WAAU,CAAC,UAAU,EAAA;~~AAClC~~,gBAAA,~~CAAC~~,~~CAAC~~,~~YAAY,IAAI,CAAC,aAAa,MAC/BP,~~sBAAA,CAAA,aAAA,CAAAA,sBAAA,CAAA,QAAA,EAAA,IAAA;AACE,oBAAAA,sBAAA,CAAA,aAAA,CAACQ,aAAM,EACL,EAAA,EAAE,EAAC,YAAY,EACf,SAAS,EAAEH,qBAAM,CAAC,YAAY,EAC9B,QAAQ,EAAEL,sBAAA,CAAA,aAAA,CAACS,4BAAa,EAAC,EAAA,KAAK,EAAEC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAI,CAAA,EACjE,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,oBAAoB,EAC7B,OAAO,EAAC,MAAM,EAAA,YAAA,EACH,wBAAwB,EACnC,CAAA;oBACFV,sBAAC,CAAA,aAAA,CAAAQ,aAAM,IACL,EAAE,EAAC,aAAa,EAChB,SAAS,EAAEH,qBAAM,CAAC,YAAY,EAC9B,QAAQ,EAAEL,sBAAC,CAAA,aAAA,CAAAW,6BAAc,IAAC,KAAK,EAAED,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,GAAI,EAClE,QAAQ,EAAE,aAAa,EACvB,OAAO,EAAE,oBAAoB,EAC7B,OAAO,EAAC,MAAM,EACH,YAAA,EAAA,yBAAyB,EACpC,CAAA,CACD,CACJ;AACA,gBAAA,CAAC,cAAc,IAAI,CAAC,CAAC,WAAW,KAC/BV,sBAAA,CAAA,aAAA,CAACQ,aAAM,EAAA,EACL,SAAS,EAAEH,qBAAM,CAAC,UAAU,EAC5B,QAAQ,EAAEL,sBAAC,CAAA,aAAA,CAAAY,2BAAa,EAAC,EAAA,KAAK,EAAEF,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAA,CAAI,EACjE,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,WAAW,EACT,YAAA,EAAA,WAAW,EACP,eAAA,EAAA,gBAAgB,mBAChB,gBAAgB,EAAA,eAAA,EAChB,gBAAgB,GAAG,QAAQ,GAAG,SAAS,EACtD,GAAG,EAAE,OAAO,EAAA,CACZ,CACH,CACG;YACL,cAAc,CACP,CACF;AAEd,CAAC;;;;"}
1	+ {"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 const shouldShowNavigationArrows = !leftDisabled \|\| !rightDisabled;\n\n return (\n <FlexRow\n className={buildClassnames([styles[`appearance-${appearance}`], className])}\n justifyContent=\"space-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={shouldShowNavigationArrows ? formStyles.inputGroup : undefined}>\n {shouldShowNavigationArrows && (\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 CHANGED Viewed

@@ -22,7 +22,8 @@ const ViewsContainer = React__default.forwardRef(({ children, className, style,
         isLoadingMoreViews,
     });
     const showCustomMenuButton = !onClickMenu && !!menuButtonSlot;
-    return (React__default.createElement(FlexRow, { className: buildClassnames([styles[`appearance-${appearance}`], className]), justifyContent: "between", flexWrap: "nowrap", style: style },
+    const shouldShowNavigationArrows = !leftDisabled || !rightDisabled;
+    return (React__default.createElement(FlexRow, { className: buildClassnames([styles[`appearance-${appearance}`], className]), justifyContent: "space-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,
@@ -33,8 +34,8 @@ const ViewsContainer = React__default.forwardRef(({ children, className, style,
                 styles.buttonGroup,
                 showCustomMenuButton && styles.customMenuButton,
             ]) },
-            React__default.createElement("div", { className: formStyles.inputGroup },
-                (!leftDisabled || !rightDisabled) && (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement("div", { className: shouldShowNavigationArrows ? formStyles.inputGroup : undefined },
+                shouldShowNavigationArrows && (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 }))),

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

	@@ -1 +1 @@
1	- {"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":";;;;;;;;;;;;;;AAca,MAAA,cAAc,GAAGA,cAAK,CAAC,UAAU,CAC5C,CACE,EACE,QAAQ,EACR,SAAS,EACT,KAAK,EACL,WAAW,EACX,gBAAgB,EAChB,gBAAgB,EAChB,YAAY,EACZ,gBAAgB,EAChB,kBAAkB,EAClB,OAAO,GAAG,KAAK,EACf,UAAU,GAAG,SAAS,EACtB,cAAc,GACK,EACrB,OAA+B,KAC7B;AACF,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAqC;IACjF,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,GAC/E,oBAAoB,CAAC;AACnB,QAAA,YAAY,EAAE,QAAQ;QACtB,QAAQ;QACR,YAAY;QACZ,gBAAgB;QAChB,kBAAkB;AACnB,KAAA,CAAC;IAEJ,MAAM,oBAAoB,GAAG,CAAC,WAAW,IAAI,CAAC,CAAC,cAAc;~~AAE7D~~,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA,WAAA,EAAc,UAAU,CAAE,CAAA,CAAC,EAAE,SAAS,CAAC,CAAC,EAC3E,cAAc,EAAC,~~SAAS~~,~~EACxB~~,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAE,KAAK,EAAA;AAEZ,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EACN,EAAA,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,YAAY,EAAE,OAAO,IAAI,MAAM,CAAC,OAAO,CAAC,CAAC,EAC5E,GAAG,EAAE,QAAQ,EACb,EAAE,EAAC,OAAO,EACV,IAAI,EAAC,SAAS,EACd,GAAG,EAAC,IAAI,EACR,QAAQ,EAAC,QAAQ,EAAA;YAEhB,QAAQ;AACR,YAAA,kBAAkB,KACjBA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;gBACEA,cAAC,CAAA,aAAA,CAAA,QAAQ,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAG,CAAA;gBACvCA,cAAC,CAAA,aAAA,CAAA,QAAQ,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAG,CAAA;AACvC,gBAAAA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAA,CAAG,CACtC,CACJ,CACO;QAEVA,cAAC,CAAA,aAAA,CAAA,OAAO,IACN,QAAQ,EAAC,QAAQ,EACjB,SAAS,EAAE,eAAe,CAAC;AACzB,gBAAA,MAAM,CAAC,WAAW;gBAClB,oBAAoB,IAAI,MAAM,CAAC,gBAAgB;aAChD,CAAC,EAAA;AAEF,YAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,UAAU,EAAA;~~AAClC~~,gBAAA,~~CAAC~~,~~CAAC~~,~~YAAY,IAAI,CAAC,aAAa,MAC/BA,~~cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;AACE,oBAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EACL,EAAA,EAAE,EAAC,YAAY,EACf,SAAS,EAAE,MAAM,CAAC,YAAY,EAC9B,QAAQ,EAAEA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAC,EAAA,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAI,CAAA,EACjE,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,oBAAoB,EAC7B,OAAO,EAAC,MAAM,EAAA,YAAA,EACH,wBAAwB,EACnC,CAAA;oBACFA,cAAC,CAAA,aAAA,CAAA,MAAM,IACL,EAAE,EAAC,aAAa,EAChB,SAAS,EAAE,MAAM,CAAC,YAAY,EAC9B,QAAQ,EAAEA,cAAC,CAAA,aAAA,CAAA,cAAc,IAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,GAAI,EAClE,QAAQ,EAAE,aAAa,EACvB,OAAO,EAAE,oBAAoB,EAC7B,OAAO,EAAC,MAAM,EACH,YAAA,EAAA,yBAAyB,EACpC,CAAA,CACD,CACJ;AACA,gBAAA,CAAC,cAAc,IAAI,CAAC,CAAC,WAAW,KAC/BA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,SAAS,EAAE,MAAM,CAAC,UAAU,EAC5B,QAAQ,EAAEA,cAAC,CAAA,aAAA,CAAA,aAAa,EAAC,EAAA,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAA,CAAI,EACjE,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,WAAW,EACT,YAAA,EAAA,WAAW,EACP,eAAA,EAAA,gBAAgB,mBAChB,gBAAgB,EAAA,eAAA,EAChB,gBAAgB,GAAG,QAAQ,GAAG,SAAS,EACtD,GAAG,EAAE,OAAO,EAAA,CACZ,CACH,CACG;YACL,cAAc,CACP,CACF;AAEd,CAAC;;;;"}
1	+ {"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 const shouldShowNavigationArrows = !leftDisabled \|\| !rightDisabled;\n\n return (\n <FlexRow\n className={buildClassnames([styles[`appearance-${appearance}`], className])}\n justifyContent=\"space-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={shouldShowNavigationArrows ? formStyles.inputGroup : undefined}>\n {shouldShowNavigationArrows && (\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 CHANGED Viewed

@@ -2,8 +2,8 @@
 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"};
+___$insertStyle("._viewsWrapper_1ht5y_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_1ht5y_1 ::-webkit-scrollbar {\n  display: none; /* for Chrome, Safari, and Opera */\n}\n._viewsWrapper_1ht5y_1._compact_1ht5y_12 {\n  padding: var(--sizes-xs);\n}\n\n._appearance-primary_1ht5y_16 {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n._menuButton_1ht5y_20 {\n  background-color: white !important;\n  border-radius: var(--sizes-sm);\n}\n._menuButton_1ht5y_20:hover {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n._scrollButton_1ht5y_28 {\n  background-color: white !important;\n}\n._scrollButton_1ht5y_28:disabled {\n  background-color: white !important;\n}\n._scrollButton_1ht5y_28:disabled svg {\n  color: var(--colors-neutral-ink-lightest);\n}\n._scrollButton_1ht5y_28:hover {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n._buttonGroup_1ht5y_41 {\n  padding-right: var(--sizes-sm);\n}");
+var styles = {"viewsWrapper":"_viewsWrapper_1ht5y_1","compact":"_compact_1ht5y_12","appearance-primary":"_appearance-primary_1ht5y_16","menuButton":"_menuButton_1ht5y_20","scrollButton":"_scrollButton_1ht5y_28","buttonGroup":"_buttonGroup_1ht5y_41"};
 module.exports = styles;
 //# sourceMappingURL=ViewsContainer.module.scss.cjs.map

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

	@@ -1 +1 @@
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;;;;"}
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 border-radius: var(--sizes-sm);\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,2mCAAA;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 CHANGED Viewed

@@ -1,7 +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"};
+insertStyle("._viewsWrapper_1ht5y_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_1ht5y_1 ::-webkit-scrollbar {\n  display: none; /* for Chrome, Safari, and Opera */\n}\n._viewsWrapper_1ht5y_1._compact_1ht5y_12 {\n  padding: var(--sizes-xs);\n}\n\n._appearance-primary_1ht5y_16 {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n._menuButton_1ht5y_20 {\n  background-color: white !important;\n  border-radius: var(--sizes-sm);\n}\n._menuButton_1ht5y_20:hover {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n._scrollButton_1ht5y_28 {\n  background-color: white !important;\n}\n._scrollButton_1ht5y_28:disabled {\n  background-color: white !important;\n}\n._scrollButton_1ht5y_28:disabled svg {\n  color: var(--colors-neutral-ink-lightest);\n}\n._scrollButton_1ht5y_28:hover {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n._buttonGroup_1ht5y_41 {\n  padding-right: var(--sizes-sm);\n}");
+var styles = {"viewsWrapper":"_viewsWrapper_1ht5y_1","compact":"_compact_1ht5y_12","appearance-primary":"_appearance-primary_1ht5y_16","menuButton":"_menuButton_1ht5y_20","scrollButton":"_scrollButton_1ht5y_28","buttonGroup":"_buttonGroup_1ht5y_41"};
 export { styles as default };
 //# sourceMappingURL=ViewsContainer.module.scss.js.map

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

	@@ -1 +1 @@
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;;;;"}
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 border-radius: var(--sizes-sm);\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,2mCAAA;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/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@veeqo/ui",
-  "version": "12.4.0",
+  "version": "12.5.1",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "ISC",