@ynput/ayon-frontend-shared 0.2.20 → 0.2.22

package/dist/shared/src/{components/Views/context/ViewsContext.es.js → containers/Views/ViewsDialogContainer/ViewsDialogContainer.es.js}

@@ -1,9 +1,9 @@
 import { j as jsxRuntimeExports } from "../../../../../_virtual/jsx-runtime.es.js";
-import { createContext, useState, useContext } from "react";
-import "react-dom";
-import "../Views.styled.es.js";
-import "clsx";
-import { PERSONAL_VIEW_ID } from "../ViewsMenuContainer/ViewsMenuContainer.es.js";
+import { useViewsContext } from "../context/ViewsContext.es.js";
+import "react";
+import { useLoadModule } from "../../../hooks/useLoadModule.es.js";
+import "../../../../../_virtual/runtime.es.js";
+import "../../../../../_virtual/semver.es.js";
 import "../../../api/base/client.es.js";
 import "../../../api/generated/graphql.es.js";
 import "../../../api/generated/access.es.js";
@@ -51,6 +51,7 @@ import "../../../api/queries/addons/updateAddons.es.js";
 import "../../../api/queries/attributes/getAttributes.es.js";
 import "../../../api/queries/attributes/updateAttributes.es.js";
 import "../../../api/queries/authentication/getAuthentication.es.js";
+import "../../../api/queries/cloud/cloud.es.js";
 import "../../../api/queries/entities/getEntity.es.js";
 import "../../../api/queries/entities/getEntityPanel.es.js";
 import "../../../api/queries/entities/updateEntity.es.js";
@@ -59,87 +60,100 @@ import "../../../api/queries/entityLists/updateLists.es.js";
 import "../../../api/queries/entityLists/getListsAttributes.es.js";
 import "../../../api/queries/entityLists/updateListsAttributes.es.js";
 import "../../../api/queries/folders/getFolders.es.js";
+import "../../../api/queries/grouping/getGrouping.es.js";
 import "../../../api/queries/overview/getOverview.es.js";
 import "../../../api/queries/overview/updateOverview.es.js";
+import "../../../api/queries/permissions/getPermissions.es.js";
+import "../../../api/queries/products/createProduct.es.js";
 import "../../../api/queries/project/getProject.es.js";
 import "../../../api/queries/project/updateProject.es.js";
 import "../../../api/queries/review/getReview.es.js";
 import "../../../api/queries/review/updateReview.es.js";
+import "../../../api/queries/share/share.es.js";
 import "../../../api/queries/system/getSystem.es.js";
 import "../../../api/queries/userDashboard/getUserDashboard.es.js";
 import "../../../api/queries/users/getUsers.es.js";
 import "../../../api/queries/users/updateUsers.es.js";
-import "../../../api/queries/watchers/getWatchers.es.js";
-import "../../../api/queries/permissions/getPermissions.es.js";
-import "../../../api/queries/grouping/getGrouping.es.js";
 import "../../../api/queries/versions/updateVersions.es.js";
-import "../../../api/queries/products/createProduct.es.js";
-import "../../../api/queries/cloud/cloud.es.js";
-import { useListViewsQuery, useGetPersonalViewQuery, useGetViewQuery } from "../../../api/queries/views/getViews.es.js";
+import "../../../api/queries/views/getViews.es.js";
 import "../../../api/queries/views/updateViews.es.js";
-import useBuildViewMenuItems from "../hooks/useBuildViewMenuItems.es.js";
+import "../../../api/queries/watchers/getWatchers.es.js";
+import "lodash";
+import "react-toastify";
 import "../../../context/RemoteModulesContext.es.js";
 import "../../../context/DetailsPanelContext.es.js";
 import "../../../context/ThumbnailUploaderContext.es.js";
 import "../../../context/SettingsPanelContext.es.js";
 import "../../../context/pip/PiPProvider.es.js";
+import "react-dom";
 import "../../../context/pip/PiPWrapper.es.js";
 import "../../../context/AddonProjectContext.es.js";
 import "../../../context/AddonContext.es.js";
 import { usePowerpack } from "../../../context/PowerpackContext.es.js";
-const ViewsContext = createContext(null);
-const ViewsProvider = ({ children, viewType, projectName }) => {
-  const { powerLicense } = usePowerpack();
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
-  const [editingView, setEditingView] = useState(null);
-  const [selectedView, setSelectedView] = useState(null);
-  const { data: viewsList = [], isLoading: isLoadingViews } = useListViewsQuery(
-    { projectName, viewType },
-    { skip: !viewType || !projectName || !powerLicense }
-  );
-  const { data: personalView } = useGetPersonalViewQuery(
-    { projectName, viewType },
-    { skip: !viewType || !projectName }
-  );
-  const { data: selectedViewData } = useGetViewQuery(
-    { viewId: selectedView, projectName, viewType },
-    { skip: !selectedView || selectedView === PERSONAL_VIEW_ID || !powerLicense }
-  );
-  const viewSettings = selectedView === PERSONAL_VIEW_ID ? personalView == null ? void 0 : personalView.settings : selectedViewData == null ? void 0 : selectedViewData.settings;
-  const viewMenuItems = useBuildViewMenuItems({
-    viewsList,
-    personalView,
-    viewType,
-    projectName,
-    onSelect: setSelectedView,
-    onEdit: (viewId) => setEditingView({ viewId })
-  });
-  const value = {
+import "react-redux";
+import "custom-protocol-check";
+import ViewFormDialogFallback from "./ViewFormDialogFallback.es.js";
+import { Dialog } from "@ynput/ayon-react-components";
+const VIEWS_DIALOG_CLASS = "views-dialog";
+const ViewsDialogContainer = ({}) => {
+  const {
+    editingView,
+    editingViewData,
+    setEditingView,
     viewType,
     projectName,
-    isMenuOpen,
-    editingView,
-    selectedView,
+    currentUser,
     viewSettings,
-    viewsList,
-    personalView,
-    viewMenuItems,
-    isLoadingViews,
-    setIsMenuOpen,
-    setEditingView,
-    setSelectedView
-  };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(ViewsContext.Provider, { value, children });
-};
-const useViewsContext = () => {
-  const context = useContext(ViewsContext);
-  if (!context) {
-    throw new Error("useViewsContext must be used within a ViewsProvider");
+    shareOptions,
+    setSelectedView,
+    onCreateView,
+    onUpdateView,
+    onDeleteView,
+    api,
+    dispatch
+  } = useViewsContext();
+  const { powerLicense } = usePowerpack();
+  const [ViewFormDialog, { isLoading: isLoadingQueries, outdated }] = useLoadModule({
+    addon: "powerpack",
+    remote: "views",
+    module: "ViewFormDialog",
+    fallback: ViewFormDialogFallback,
+    minVersion: "1.1.1-views",
+    skip: !viewType || !powerLicense
+  });
+  if (!viewType || !editingView) return null;
+  if (editingView && outdated) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Dialog, { isOpen: true, header: "Powerpack Update Required", onClose: () => setEditingView(null), children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: "The View Form Dialog is outdated. Please update the Powerpack addon to the latest version." }) });
   }
-  return context;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ViewFormDialog,
+    {
+      editingView: {
+        viewId: editingView === true ? void 0 : editingView,
+        ...editingViewData || {}
+      },
+      viewSettings,
+      setEditingView,
+      viewType,
+      projectName,
+      shareOptions,
+      setSelected: setSelectedView,
+      onCreateView,
+      onUpdateView,
+      onDeleteView,
+      api,
+      dispatch,
+      currentUser,
+      pt: {
+        dialog: {
+          className: VIEWS_DIALOG_CLASS
+        }
+      }
+    }
+  );
 };
 export {
-  ViewsProvider,
-  useViewsContext
+  VIEWS_DIALOG_CLASS,
+  ViewsDialogContainer as default
 };
-//# sourceMappingURL=ViewsContext.es.js.map
+//# sourceMappingURL=ViewsDialogContainer.es.js.map

package/dist/shared/src/containers/Views/ViewsDialogContainer/ViewsDialogContainer.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewsDialogContainer.es.js","sources":["../../../../../../src/containers/Views/ViewsDialogContainer/ViewsDialogContainer.tsx"],"sourcesContent":["import { FC } from 'react'\nimport { useViewsContext } from '../context/ViewsContext'\nimport { useLoadModule } from '@shared/hooks'\nimport ViewFormDialogFallback from './ViewFormDialogFallback'\nimport { Dialog } from '@ynput/ayon-react-components'\nimport { usePowerpack } from '@shared/context'\n\nexport const VIEWS_DIALOG_CLASS = 'views-dialog' as const\n\ninterface ViewsDialogContainerProps {}\n\nconst ViewsDialogContainer: FC<ViewsDialogContainerProps> = ({}) => {\n  const {\n    editingView,\n    editingViewData,\n    setEditingView,\n    viewType,\n    projectName,\n    currentUser,\n    viewSettings,\n    shareOptions,\n    setSelectedView,\n    onCreateView,\n    onUpdateView,\n    onDeleteView,\n    api,\n    dispatch,\n  } = useViewsContext()\n\n  const { powerLicense } = usePowerpack()\n\n  const [ViewFormDialog, { isLoading: isLoadingQueries, outdated }] = useLoadModule({\n    addon: 'powerpack',\n    remote: 'views',\n    module: 'ViewFormDialog',\n    fallback: ViewFormDialogFallback,\n    minVersion: '1.1.1-views',\n    skip: !viewType || !powerLicense,\n  })\n\n  if (!viewType || !editingView) return null\n\n  if (editingView && outdated) {\n    return (\n      <Dialog isOpen header=\"Powerpack Update Required\" onClose={() => setEditingView(null)}>\n        <p>\n          The View Form Dialog is outdated. Please update the Powerpack addon to the latest version.\n        </p>\n      </Dialog>\n    )\n  }\n\n  return (\n    <ViewFormDialog\n      editingView={{\n        viewId: editingView === true ? undefined : editingView,\n        ...(editingViewData || {}),\n      }}\n      viewSettings={viewSettings}\n      setEditingView={setEditingView}\n      viewType={viewType}\n      projectName={projectName}\n      shareOptions={shareOptions}\n      setSelected={setSelectedView}\n      onCreateView={onCreateView}\n      onUpdateView={onUpdateView}\n      onDeleteView={onDeleteView}\n      api={api}\n      dispatch={dispatch}\n      currentUser={currentUser}\n      pt={{\n        dialog: {\n          className: VIEWS_DIALOG_CLASS,\n        },\n      }}\n    />\n  )\n}\n\nexport default ViewsDialogContainer\n"],"names":["jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOO,MAAM,qBAAqB;AAI5B,MAAA,uBAAsD,CAAC,CAAA,MAAO;AAC5D,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,gBAAgB;AAEd,QAAA,EAAE,aAAa,IAAI,aAAa;AAEhC,QAAA,CAAC,gBAAgB,EAAE,WAAW,kBAAkB,SAAS,CAAC,IAAI,cAAc;AAAA,IAChF,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,MAAM,CAAC,YAAY,CAAC;AAAA,EAAA,CACrB;AAED,MAAI,CAAC,YAAY,CAAC,YAAoB,QAAA;AAEtC,MAAI,eAAe,UAAU;AAC3B,WACGA,kCAAAA,IAAA,QAAA,EAAO,QAAM,MAAC,QAAO,6BAA4B,SAAS,MAAM,eAAe,IAAI,GAClF,UAACA,sCAAA,KAAA,EAAE,uGAEH,CAAA,GACF;AAAA,EAAA;AAKF,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAa;AAAA,QACX,QAAQ,gBAAgB,OAAO,SAAY;AAAA,QAC3C,GAAI,mBAAmB,CAAA;AAAA,MACzB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,IAAI;AAAA,QACF,QAAQ;AAAA,UACN,WAAW;AAAA,QAAA;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAEJ;"}

package/dist/shared/src/{components → containers}/Views/ViewsMenu/ViewsMenu.cjs.js

@@ -18,6 +18,7 @@ const ViewsMenu = React.forwardRef(
           {
             tabIndex: 0,
             isSelected: item.id === selected,
+            autoFocus: index === 0,
             ...item
           },
           (item.id || "") + index.toString()

package/dist/shared/src/containers/Views/ViewsMenu/ViewsMenu.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewsMenu.cjs.js","sources":["../../../../../../src/containers/Views/ViewsMenu/ViewsMenu.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { ViewItem } from '../ViewItem/ViewItem'\nimport * as Styled from './ViewsMenu.styled'\n\nexport const VIEW_DIVIDER = '_divider_' as const // Represents a divider\ntype Title = string // Represents a title\nexport type ViewMenuItem = ViewItem | typeof VIEW_DIVIDER | Title\n\nexport interface ViewsMenuProps extends React.HTMLAttributes<HTMLUListElement> {\n  items: ViewMenuItem[] // Array of ViewMenuItem or string\n  selected: string\n}\n\nexport const ViewsMenu = forwardRef<HTMLUListElement, ViewsMenuProps>(\n  ({ items, selected, ...props }, ref) => {\n    return (\n      <Styled.Scrollable>\n        <Styled.ViewsMenu {...props} ref={ref}>\n          {items.map((item, index) => {\n            if (item === '_divider_') {\n              return <Styled.ViewsMenuDivider key={index} />\n            } else if (typeof item === 'string') {\n              return <Styled.ViewsMenuTitle key={index}>{item}</Styled.ViewsMenuTitle>\n            } else {\n              return (\n                <ViewItem\n                  key={(item.id || '') + index.toString()}\n                  tabIndex={0}\n                  isSelected={item.id === selected}\n                  autoFocus={index === 0}\n                  {...item}\n                />\n              )\n            }\n          })}\n        </Styled.ViewsMenu>\n      </Styled.Scrollable>\n    )\n  },\n)\n"],"names":["forwardRef","jsx","Styled.Scrollable","Styled.ViewsMenu","Styled.ViewsMenuDivider","Styled.ViewsMenuTitle","ViewItem"],"mappings":";;;;;;AAIO,MAAM,eAAe;AASrB,MAAM,YAAYA,MAAA;AAAA,EACvB,CAAC,EAAE,OAAO,UAAU,GAAG,MAAA,GAAS,QAAQ;AACtC,WACGC,2BAAAA,kBAAAA,IAAAC,iBAAAA,YAAA,EACC,2DAACC,iBAAO,WAAP,EAAkB,GAAG,OAAO,KAC1B,UAAA,MAAM,IAAI,CAAC,MAAM,UAAU;AAC1B,UAAI,SAAS,aAAa;AACxB,eAAQF,iDAAAG,iBAAAA,kBAAA,CAAA,GAA6B,KAAO;AAAA,MAAA,WACnC,OAAO,SAAS,UAAU;AACnC,eAAQH,2BAAAA,kBAAAA,IAAAI,iBAAAA,gBAAA,EAAmC,kBAAR,KAAa;AAAA,MAAA,OAC3C;AAEH,eAAAJ,2BAAA,kBAAA;AAAA,UAACK,SAAA;AAAA,UAAA;AAAA,YAEC,UAAU;AAAA,YACV,YAAY,KAAK,OAAO;AAAA,YACxB,WAAW,UAAU;AAAA,YACpB,GAAG;AAAA,UAAA;AAAA,WAJE,KAAK,MAAM,MAAM,MAAM,SAAS;AAAA,QAKxC;AAAA,MAAA;AAAA,IAEJ,CACD,GACH,EACF,CAAA;AAAA,EAAA;AAGN;;;"}

package/dist/shared/src/{components → containers}/Views/ViewsMenu/ViewsMenu.es.js

@@ -16,6 +16,7 @@ const ViewsMenu = forwardRef(
           {
             tabIndex: 0,
             isSelected: item.id === selected,
+            autoFocus: index === 0,
             ...item
           },
           (item.id || "") + index.toString()

package/dist/shared/src/containers/Views/ViewsMenu/ViewsMenu.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewsMenu.es.js","sources":["../../../../../../src/containers/Views/ViewsMenu/ViewsMenu.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { ViewItem } from '../ViewItem/ViewItem'\nimport * as Styled from './ViewsMenu.styled'\n\nexport const VIEW_DIVIDER = '_divider_' as const // Represents a divider\ntype Title = string // Represents a title\nexport type ViewMenuItem = ViewItem | typeof VIEW_DIVIDER | Title\n\nexport interface ViewsMenuProps extends React.HTMLAttributes<HTMLUListElement> {\n  items: ViewMenuItem[] // Array of ViewMenuItem or string\n  selected: string\n}\n\nexport const ViewsMenu = forwardRef<HTMLUListElement, ViewsMenuProps>(\n  ({ items, selected, ...props }, ref) => {\n    return (\n      <Styled.Scrollable>\n        <Styled.ViewsMenu {...props} ref={ref}>\n          {items.map((item, index) => {\n            if (item === '_divider_') {\n              return <Styled.ViewsMenuDivider key={index} />\n            } else if (typeof item === 'string') {\n              return <Styled.ViewsMenuTitle key={index}>{item}</Styled.ViewsMenuTitle>\n            } else {\n              return (\n                <ViewItem\n                  key={(item.id || '') + index.toString()}\n                  tabIndex={0}\n                  isSelected={item.id === selected}\n                  autoFocus={index === 0}\n                  {...item}\n                />\n              )\n            }\n          })}\n        </Styled.ViewsMenu>\n      </Styled.Scrollable>\n    )\n  },\n)\n"],"names":["jsx","Styled.Scrollable","Styled.ViewsMenu","Styled.ViewsMenuDivider","Styled.ViewsMenuTitle"],"mappings":";;;;AAIO,MAAM,eAAe;AASrB,MAAM,YAAY;AAAA,EACvB,CAAC,EAAE,OAAO,UAAU,GAAG,MAAA,GAAS,QAAQ;AACtC,WACGA,kCAAAA,IAAAC,YAAA,EACC,gDAACC,aAAA,EAAkB,GAAG,OAAO,KAC1B,UAAA,MAAM,IAAI,CAAC,MAAM,UAAU;AAC1B,UAAI,SAAS,aAAa;AACxB,eAAQF,sCAAAG,kBAAA,CAAA,GAA6B,KAAO;AAAA,MAAA,WACnC,OAAO,SAAS,UAAU;AACnC,eAAQH,kCAAAA,IAAAI,gBAAA,EAAmC,kBAAR,KAAa;AAAA,MAAA,OAC3C;AAEH,eAAAJ,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,UAAU;AAAA,YACV,YAAY,KAAK,OAAO;AAAA,YACxB,WAAW,UAAU;AAAA,YACpB,GAAG;AAAA,UAAA;AAAA,WAJE,KAAK,MAAM,MAAM,MAAM,SAAS;AAAA,QAKxC;AAAA,MAAA;AAAA,IAEJ,CACD,GACH,EACF,CAAA;AAAA,EAAA;AAGN;"}

package/dist/shared/src/{components → containers}/Views/ViewsMenu/ViewsMenu.styled.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ViewsMenu.styled.cjs.js","sources":["../../../../../../src/components/Views/ViewsMenu/ViewsMenu.styled.ts"],"sourcesContent":["import { theme } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nexport const Scrollable = styled.div`\n  overflow: auto;\n  max-height: 40vh;\n`\n\nexport const ViewsMenu = styled.ul`\n  /* reset defaults */\n  margin: 0;\n  padding: 0;\n  list-style: none;\n\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-small);\n  margin-bottom: var(--padding-s);\n`\n\n// 1px line divider\nexport const ViewsMenuDivider = styled.li`\n  height: 1px;\n  background-color: var(--md-sys-color-outline-variant);\n  margin: 4px 0;\n`\n\nexport const ViewsMenuTitle = styled.li`\n  ${theme.labelSmall}\n  color: var(--md-sys-color-outline);\n`\n"],"names":["theme"],"mappings":";;;;AAGO,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAK1B,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAazB,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAMhC,MAAM,iBAAiB,OAAO;AAAA,IACjCA,0BAAM,UAAU;AAAA;AAAA;;;;;"}
+{"version":3,"file":"ViewsMenu.styled.cjs.js","sources":["../../../../../../src/containers/Views/ViewsMenu/ViewsMenu.styled.ts"],"sourcesContent":["import { theme } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nexport const Scrollable = styled.div`\n  overflow: auto;\n  max-height: 40vh;\n`\n\nexport const ViewsMenu = styled.ul`\n  /* reset defaults */\n  margin: 0;\n  padding: 0;\n  list-style: none;\n\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-small);\n  margin-bottom: var(--padding-s);\n`\n\n// 1px line divider\nexport const ViewsMenuDivider = styled.li`\n  height: 1px;\n  background-color: var(--md-sys-color-outline-variant);\n  margin: 4px 0;\n`\n\nexport const ViewsMenuTitle = styled.li`\n  ${theme.labelSmall}\n  color: var(--md-sys-color-outline);\n`\n"],"names":["theme"],"mappings":";;;;AAGO,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAK1B,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAazB,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAMhC,MAAM,iBAAiB,OAAO;AAAA,IACjCA,0BAAM,UAAU;AAAA;AAAA;;;;;"}

package/dist/shared/src/{components → containers}/Views/ViewsMenu/ViewsMenu.styled.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ViewsMenu.styled.es.js","sources":["../../../../../../src/components/Views/ViewsMenu/ViewsMenu.styled.ts"],"sourcesContent":["import { theme } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nexport const Scrollable = styled.div`\n  overflow: auto;\n  max-height: 40vh;\n`\n\nexport const ViewsMenu = styled.ul`\n  /* reset defaults */\n  margin: 0;\n  padding: 0;\n  list-style: none;\n\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-small);\n  margin-bottom: var(--padding-s);\n`\n\n// 1px line divider\nexport const ViewsMenuDivider = styled.li`\n  height: 1px;\n  background-color: var(--md-sys-color-outline-variant);\n  margin: 4px 0;\n`\n\nexport const ViewsMenuTitle = styled.li`\n  ${theme.labelSmall}\n  color: var(--md-sys-color-outline);\n`\n"],"names":[],"mappings":";;AAGO,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAK1B,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAazB,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAMhC,MAAM,iBAAiB,OAAO;AAAA,IACjC,MAAM,UAAU;AAAA;AAAA;"}
+{"version":3,"file":"ViewsMenu.styled.es.js","sources":["../../../../../../src/containers/Views/ViewsMenu/ViewsMenu.styled.ts"],"sourcesContent":["import { theme } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nexport const Scrollable = styled.div`\n  overflow: auto;\n  max-height: 40vh;\n`\n\nexport const ViewsMenu = styled.ul`\n  /* reset defaults */\n  margin: 0;\n  padding: 0;\n  list-style: none;\n\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-small);\n  margin-bottom: var(--padding-s);\n`\n\n// 1px line divider\nexport const ViewsMenuDivider = styled.li`\n  height: 1px;\n  background-color: var(--md-sys-color-outline-variant);\n  margin: 4px 0;\n`\n\nexport const ViewsMenuTitle = styled.li`\n  ${theme.labelSmall}\n  color: var(--md-sys-color-outline);\n`\n"],"names":[],"mappings":";;AAGO,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAK1B,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAazB,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAMhC,MAAM,iBAAiB,OAAO;AAAA,IACjC,MAAM,UAAU;AAAA;AAAA;"}

package/dist/shared/src/containers/Views/ViewsMenuContainer/ViewsMenuContainer.cjs.js

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../../../_virtual/jsx-runtime.cjs.js");
+const React = require("react");
+const ReactDOM = require("react-dom");
+const ViewsContext = require("../context/ViewsContext.cjs.js");
+const portalUtils = require("../utils/portalUtils.cjs.js");
+const ViewsMenu = require("../ViewsMenu/ViewsMenu.cjs.js");
+const ViewItem = require("../ViewItem/ViewItem.cjs.js");
+const ayonReactComponents = require("@ynput/ayon-react-components");
+const styled = require("styled-components");
+require("../../../context/RemoteModulesContext.cjs.js");
+require("../../../context/DetailsPanelContext.cjs.js");
+require("../../../context/ThumbnailUploaderContext.cjs.js");
+require("../../../context/SettingsPanelContext.cjs.js");
+require("../../../context/pip/PiPProvider.cjs.js");
+require("../../../context/pip/PiPWrapper.cjs.js");
+require("../../../context/AddonProjectContext.cjs.js");
+require("../../../context/AddonContext.cjs.js");
+const PowerpackContext = require("../../../context/PowerpackContext.cjs.js");
+const Views_styled = require("../Views.styled.cjs.js");
+const ViewsDialogContainer = require("../ViewsDialogContainer/ViewsDialogContainer.cjs.js");
+const PowerIcon = styled(ayonReactComponents.Icon)`
+  color: var(--md-sys-color-tertiary);
+  font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 200, 'opsz' 20;
+`;
+const WORKING_VIEW_ID = "_working_";
+const NEW_VIEW_ID = "_new_view_";
+const ViewsMenuContainer = () => {
+  const {
+    viewType,
+    isMenuOpen,
+    setIsMenuOpen,
+    setEditingView,
+    selectedView,
+    workingView,
+    viewMenuItems
+  } = ViewsContext.useViewsContext();
+  const { powerLicense, setPowerpackDialog } = PowerpackContext.usePowerpack();
+  const modalRef = React.useRef(null);
+  const portalContainer = portalUtils.getViewsPortalContainer(viewType);
+  const buttonRect = portalContainer == null ? void 0 : portalContainer.getBoundingClientRect();
+  const gap = 8;
+  const modalPosition = {
+    top: buttonRect ? buttonRect.bottom + gap : 0,
+    left: buttonRect ? buttonRect.left : 0
+  };
+  React.useEffect(() => {
+    const handleClickOutside = (e) => {
+      var _a, _b, _c;
+      const target = e.target;
+      const clickInsideMenu = ((_a = modalRef.current) == null ? void 0 : _a.contains(target)) || (portalContainer == null ? void 0 : portalContainer.contains(target));
+      const clickInsideEditDialog = (_b = document.querySelector("." + ViewsDialogContainer.VIEWS_DIALOG_CLASS)) == null ? void 0 : _b.contains(target);
+      const clickInsideDropdown = (_c = document.querySelector(".options")) == null ? void 0 : _c.contains(target);
+      if (!clickInsideMenu && !clickInsideEditDialog && !clickInsideDropdown && isMenuOpen) {
+        setIsMenuOpen(false);
+      }
+    };
+    const handleEscapeKey = (e) => {
+      if (e.key === "Escape" && isMenuOpen) {
+        setIsMenuOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleEscapeKey);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscapeKey);
+    };
+  }, [isMenuOpen, portalContainer, setIsMenuOpen]);
+  React.useEffect(() => {
+    if (isMenuOpen && modalRef.current) {
+      modalRef.current.focus();
+    }
+  }, [isMenuOpen]);
+  const handleCreateView = React.useCallback(() => {
+    if (!powerLicense) {
+      setPowerpackDialog("sharedViews");
+    } else {
+      setEditingView(true);
+    }
+  }, [powerLicense, setPowerpackDialog, setEditingView, setIsMenuOpen]);
+  const selectedViewId = !selectedView || (workingView == null ? void 0 : workingView.id) === selectedView.id ? WORKING_VIEW_ID : selectedView.id;
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(jsxRuntime.jsxRuntimeExports.Fragment, { children: isMenuOpen && ReactDOM.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Views_styled.ViewsModal, { style: modalPosition, ref: modalRef, tabIndex: 0, children: [
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ViewsMenu.ViewsMenu, { items: viewMenuItems, selected: selectedViewId }),
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+        ViewItem.ViewItem,
+        {
+          label: "Create new view",
+          id: NEW_VIEW_ID,
+          startContent: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ayonReactComponents.Icon, { icon: "add" }),
+          endContent: !powerLicense && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(PowerIcon, { icon: "bolt" }),
+          onClick: handleCreateView,
+          tabIndex: 0
+        }
+      )
+    ] }),
+    document.body
+  ) });
+};
+exports.NEW_VIEW_ID = NEW_VIEW_ID;
+exports.ViewsMenuContainer = ViewsMenuContainer;
+exports.WORKING_VIEW_ID = WORKING_VIEW_ID;
+//# sourceMappingURL=ViewsMenuContainer.cjs.js.map

package/dist/shared/src/containers/Views/ViewsMenuContainer/ViewsMenuContainer.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewsMenuContainer.cjs.js","sources":["../../../../../../src/containers/Views/ViewsMenuContainer/ViewsMenuContainer.tsx"],"sourcesContent":["import { FC, useCallback, useEffect, useRef } from 'react'\nimport { createPortal } from 'react-dom'\nimport { useViewsContext } from '../context/ViewsContext'\nimport { getViewsPortalContainer } from '../utils/portalUtils'\nimport { ViewsMenu } from '../ViewsMenu/ViewsMenu'\nimport { ViewItem } from '../ViewItem/ViewItem'\nimport { Icon } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\nimport { usePowerpack } from '@shared/context'\nimport * as Styled from '../Views.styled'\nimport { VIEWS_DIALOG_CLASS } from '../ViewsDialogContainer/ViewsDialogContainer'\n\nconst PowerIcon = styled(Icon)`\n  color: var(--md-sys-color-tertiary);\n  font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 200, 'opsz' 20;\n`\n\n// constants\nexport const WORKING_VIEW_ID = '_working_' as const\nexport const NEW_VIEW_ID = '_new_view_' as const\n\nexport const ViewsMenuContainer: FC = () => {\n  const {\n    viewType,\n    isMenuOpen,\n    setIsMenuOpen,\n    setEditingView,\n    selectedView,\n    workingView,\n    viewMenuItems,\n  } = useViewsContext()\n\n  const { powerLicense, setPowerpackDialog } = usePowerpack()\n  const modalRef = useRef<HTMLDivElement>(null)\n\n  // Modal position calculation\n  const portalContainer = getViewsPortalContainer(viewType)\n  const buttonRect = portalContainer?.getBoundingClientRect()\n  const gap = 8\n  const modalPosition = {\n    top: buttonRect ? buttonRect.bottom + gap : 0,\n    left: buttonRect ? buttonRect.left : 0,\n  }\n\n  // Close menu when clicking outside or pressing Escape\n  useEffect(() => {\n    const handleClickOutside = (e: MouseEvent) => {\n      const target = e.target as HTMLElement\n\n      const clickInsideMenu =\n        modalRef.current?.contains(target) || portalContainer?.contains(target)\n      const clickInsideEditDialog = document\n        .querySelector('.' + VIEWS_DIALOG_CLASS)\n        ?.contains(target)\n      const clickInsideDropdown = document.querySelector('.options')?.contains(target)\n\n      if (!clickInsideMenu && !clickInsideEditDialog && !clickInsideDropdown && isMenuOpen) {\n        setIsMenuOpen(false)\n      }\n    }\n\n    const handleEscapeKey = (e: KeyboardEvent) => {\n      if (e.key === 'Escape' && isMenuOpen) {\n        setIsMenuOpen(false)\n      }\n    }\n\n    document.addEventListener('mousedown', handleClickOutside)\n    document.addEventListener('keydown', handleEscapeKey)\n\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside)\n      document.removeEventListener('keydown', handleEscapeKey)\n    }\n  }, [isMenuOpen, portalContainer, setIsMenuOpen])\n\n  // when the view is open, focus the modal\n  useEffect(() => {\n    if (isMenuOpen && modalRef.current) {\n      modalRef.current.focus()\n    }\n  }, [isMenuOpen])\n\n  const handleCreateView = useCallback(() => {\n    if (!powerLicense) {\n      setPowerpackDialog('sharedViews')\n    } else {\n      setEditingView(true)\n    }\n  }, [powerLicense, setPowerpackDialog, setEditingView, setIsMenuOpen])\n\n  const selectedViewId =\n    !selectedView || workingView?.id === selectedView.id\n      ? WORKING_VIEW_ID\n      : (selectedView.id as string)\n\n  return (\n    <>\n      {isMenuOpen &&\n        createPortal(\n          <Styled.ViewsModal style={modalPosition} ref={modalRef} tabIndex={0}>\n            <ViewsMenu items={viewMenuItems} selected={selectedViewId} />\n            <ViewItem\n              label=\"Create new view\"\n              id={NEW_VIEW_ID}\n              startContent={<Icon icon=\"add\" />}\n              endContent={!powerLicense && <PowerIcon icon=\"bolt\" />}\n              onClick={handleCreateView}\n              tabIndex={0}\n            />\n          </Styled.ViewsModal>,\n          document.body,\n        )}\n    </>\n  )\n}\n"],"names":["Icon","useViewsContext","usePowerpack","useRef","getViewsPortalContainer","useEffect","VIEWS_DIALOG_CLASS","useCallback","createPortal","jsxs","Styled.ViewsModal","jsx","ViewsMenu","ViewItem"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,YAAY,OAAOA,wBAAI;AAAA;AAAA;AAAA;AAMtB,MAAM,kBAAkB;AACxB,MAAM,cAAc;AAEpB,MAAM,qBAAyB,MAAM;AACpC,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACEC,6BAAgB;AAEpB,QAAM,EAAE,cAAc,mBAAmB,IAAIC,8BAAa;AACpD,QAAA,WAAWC,aAAuB,IAAI;AAGtC,QAAA,kBAAkBC,oCAAwB,QAAQ;AAClD,QAAA,aAAa,mDAAiB;AACpC,QAAM,MAAM;AACZ,QAAM,gBAAgB;AAAA,IACpB,KAAK,aAAa,WAAW,SAAS,MAAM;AAAA,IAC5C,MAAM,aAAa,WAAW,OAAO;AAAA,EACvC;AAGAC,QAAAA,UAAU,MAAM;AACR,UAAA,qBAAqB,CAAC,MAAkB;;AAC5C,YAAM,SAAS,EAAE;AAEX,YAAA,oBACJ,cAAS,YAAT,mBAAkB,SAAS,aAAW,mDAAiB,SAAS;AAClE,YAAM,yBAAwB,cAC3B,cAAc,MAAMC,uCAAkB,MADX,mBAE1B,SAAS;AACb,YAAM,uBAAsB,cAAS,cAAc,UAAU,MAAjC,mBAAoC,SAAS;AAEzE,UAAI,CAAC,mBAAmB,CAAC,yBAAyB,CAAC,uBAAuB,YAAY;AACpF,sBAAc,KAAK;AAAA,MAAA;AAAA,IAEvB;AAEM,UAAA,kBAAkB,CAAC,MAAqB;AACxC,UAAA,EAAE,QAAQ,YAAY,YAAY;AACpC,sBAAc,KAAK;AAAA,MAAA;AAAA,IAEvB;AAES,aAAA,iBAAiB,aAAa,kBAAkB;AAChD,aAAA,iBAAiB,WAAW,eAAe;AAEpD,WAAO,MAAM;AACF,eAAA,oBAAoB,aAAa,kBAAkB;AACnD,eAAA,oBAAoB,WAAW,eAAe;AAAA,IACzD;AAAA,EACC,GAAA,CAAC,YAAY,iBAAiB,aAAa,CAAC;AAG/CD,QAAAA,UAAU,MAAM;AACV,QAAA,cAAc,SAAS,SAAS;AAClC,eAAS,QAAQ,MAAM;AAAA,IAAA;AAAA,EACzB,GACC,CAAC,UAAU,CAAC;AAET,QAAA,mBAAmBE,MAAAA,YAAY,MAAM;AACzC,QAAI,CAAC,cAAc;AACjB,yBAAmB,aAAa;AAAA,IAAA,OAC3B;AACL,qBAAe,IAAI;AAAA,IAAA;AAAA,KAEpB,CAAC,cAAc,oBAAoB,gBAAgB,aAAa,CAAC;AAE9D,QAAA,iBACJ,CAAC,iBAAgB,2CAAa,QAAO,aAAa,KAC9C,kBACC,aAAa;AAEpB,mGAEK,UACC,cAAAC,SAAA;AAAA,IACEC,kDAACC,aAAAA,YAAA,EAAkB,OAAO,eAAe,KAAK,UAAU,UAAU,GAChE,UAAA;AAAA,MAAAC,2BAAA,kBAAA,IAACC,UAAU,WAAA,EAAA,OAAO,eAAe,UAAU,gBAAgB;AAAA,MAC3DD,2BAAA,kBAAA;AAAA,QAACE,SAAA;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,IAAI;AAAA,UACJ,cAAcF,2BAAAA,kBAAAA,IAACX,oBAAAA,MAAK,EAAA,MAAK,MAAM,CAAA;AAAA,UAC/B,YAAY,CAAC,gBAAiBW,2BAAA,kBAAA,IAAA,WAAA,EAAU,MAAK,QAAO;AAAA,UACpD,SAAS;AAAA,UACT,UAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IACZ,GACF;AAAA,IACA,SAAS;AAAA,EAAA,GAEf;AAEJ;;;;"}

package/dist/shared/src/containers/Views/ViewsMenuContainer/ViewsMenuContainer.es.js

@@ -0,0 +1,105 @@
+import { j as jsxRuntimeExports } from "../../../../../_virtual/jsx-runtime.es.js";
+import { useRef, useEffect, useCallback } from "react";
+import { createPortal } from "react-dom";
+import { useViewsContext } from "../context/ViewsContext.es.js";
+import { getViewsPortalContainer } from "../utils/portalUtils.es.js";
+import { ViewsMenu } from "../ViewsMenu/ViewsMenu.es.js";
+import { ViewItem } from "../ViewItem/ViewItem.es.js";
+import { Icon } from "@ynput/ayon-react-components";
+import styled from "styled-components";
+import "../../../context/RemoteModulesContext.es.js";
+import "../../../context/DetailsPanelContext.es.js";
+import "../../../context/ThumbnailUploaderContext.es.js";
+import "../../../context/SettingsPanelContext.es.js";
+import "../../../context/pip/PiPProvider.es.js";
+import "../../../context/pip/PiPWrapper.es.js";
+import "../../../context/AddonProjectContext.es.js";
+import "../../../context/AddonContext.es.js";
+import { usePowerpack } from "../../../context/PowerpackContext.es.js";
+import { ViewsModal } from "../Views.styled.es.js";
+import { VIEWS_DIALOG_CLASS } from "../ViewsDialogContainer/ViewsDialogContainer.es.js";
+const PowerIcon = styled(Icon)`
+  color: var(--md-sys-color-tertiary);
+  font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 200, 'opsz' 20;
+`;
+const WORKING_VIEW_ID = "_working_";
+const NEW_VIEW_ID = "_new_view_";
+const ViewsMenuContainer = () => {
+  const {
+    viewType,
+    isMenuOpen,
+    setIsMenuOpen,
+    setEditingView,
+    selectedView,
+    workingView,
+    viewMenuItems
+  } = useViewsContext();
+  const { powerLicense, setPowerpackDialog } = usePowerpack();
+  const modalRef = useRef(null);
+  const portalContainer = getViewsPortalContainer(viewType);
+  const buttonRect = portalContainer == null ? void 0 : portalContainer.getBoundingClientRect();
+  const gap = 8;
+  const modalPosition = {
+    top: buttonRect ? buttonRect.bottom + gap : 0,
+    left: buttonRect ? buttonRect.left : 0
+  };
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      var _a, _b, _c;
+      const target = e.target;
+      const clickInsideMenu = ((_a = modalRef.current) == null ? void 0 : _a.contains(target)) || (portalContainer == null ? void 0 : portalContainer.contains(target));
+      const clickInsideEditDialog = (_b = document.querySelector("." + VIEWS_DIALOG_CLASS)) == null ? void 0 : _b.contains(target);
+      const clickInsideDropdown = (_c = document.querySelector(".options")) == null ? void 0 : _c.contains(target);
+      if (!clickInsideMenu && !clickInsideEditDialog && !clickInsideDropdown && isMenuOpen) {
+        setIsMenuOpen(false);
+      }
+    };
+    const handleEscapeKey = (e) => {
+      if (e.key === "Escape" && isMenuOpen) {
+        setIsMenuOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleEscapeKey);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscapeKey);
+    };
+  }, [isMenuOpen, portalContainer, setIsMenuOpen]);
+  useEffect(() => {
+    if (isMenuOpen && modalRef.current) {
+      modalRef.current.focus();
+    }
+  }, [isMenuOpen]);
+  const handleCreateView = useCallback(() => {
+    if (!powerLicense) {
+      setPowerpackDialog("sharedViews");
+    } else {
+      setEditingView(true);
+    }
+  }, [powerLicense, setPowerpackDialog, setEditingView, setIsMenuOpen]);
+  const selectedViewId = !selectedView || (workingView == null ? void 0 : workingView.id) === selectedView.id ? WORKING_VIEW_ID : selectedView.id;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isMenuOpen && createPortal(
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(ViewsModal, { style: modalPosition, ref: modalRef, tabIndex: 0, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(ViewsMenu, { items: viewMenuItems, selected: selectedViewId }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ViewItem,
+        {
+          label: "Create new view",
+          id: NEW_VIEW_ID,
+          startContent: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: "add" }),
+          endContent: !powerLicense && /* @__PURE__ */ jsxRuntimeExports.jsx(PowerIcon, { icon: "bolt" }),
+          onClick: handleCreateView,
+          tabIndex: 0
+        }
+      )
+    ] }),
+    document.body
+  ) });
+};
+export {
+  NEW_VIEW_ID,
+  ViewsMenuContainer,
+  WORKING_VIEW_ID
+};
+//# sourceMappingURL=ViewsMenuContainer.es.js.map

package/dist/shared/src/containers/Views/ViewsMenuContainer/ViewsMenuContainer.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewsMenuContainer.es.js","sources":["../../../../../../src/containers/Views/ViewsMenuContainer/ViewsMenuContainer.tsx"],"sourcesContent":["import { FC, useCallback, useEffect, useRef } from 'react'\nimport { createPortal } from 'react-dom'\nimport { useViewsContext } from '../context/ViewsContext'\nimport { getViewsPortalContainer } from '../utils/portalUtils'\nimport { ViewsMenu } from '../ViewsMenu/ViewsMenu'\nimport { ViewItem } from '../ViewItem/ViewItem'\nimport { Icon } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\nimport { usePowerpack } from '@shared/context'\nimport * as Styled from '../Views.styled'\nimport { VIEWS_DIALOG_CLASS } from '../ViewsDialogContainer/ViewsDialogContainer'\n\nconst PowerIcon = styled(Icon)`\n  color: var(--md-sys-color-tertiary);\n  font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 200, 'opsz' 20;\n`\n\n// constants\nexport const WORKING_VIEW_ID = '_working_' as const\nexport const NEW_VIEW_ID = '_new_view_' as const\n\nexport const ViewsMenuContainer: FC = () => {\n  const {\n    viewType,\n    isMenuOpen,\n    setIsMenuOpen,\n    setEditingView,\n    selectedView,\n    workingView,\n    viewMenuItems,\n  } = useViewsContext()\n\n  const { powerLicense, setPowerpackDialog } = usePowerpack()\n  const modalRef = useRef<HTMLDivElement>(null)\n\n  // Modal position calculation\n  const portalContainer = getViewsPortalContainer(viewType)\n  const buttonRect = portalContainer?.getBoundingClientRect()\n  const gap = 8\n  const modalPosition = {\n    top: buttonRect ? buttonRect.bottom + gap : 0,\n    left: buttonRect ? buttonRect.left : 0,\n  }\n\n  // Close menu when clicking outside or pressing Escape\n  useEffect(() => {\n    const handleClickOutside = (e: MouseEvent) => {\n      const target = e.target as HTMLElement\n\n      const clickInsideMenu =\n        modalRef.current?.contains(target) || portalContainer?.contains(target)\n      const clickInsideEditDialog = document\n        .querySelector('.' + VIEWS_DIALOG_CLASS)\n        ?.contains(target)\n      const clickInsideDropdown = document.querySelector('.options')?.contains(target)\n\n      if (!clickInsideMenu && !clickInsideEditDialog && !clickInsideDropdown && isMenuOpen) {\n        setIsMenuOpen(false)\n      }\n    }\n\n    const handleEscapeKey = (e: KeyboardEvent) => {\n      if (e.key === 'Escape' && isMenuOpen) {\n        setIsMenuOpen(false)\n      }\n    }\n\n    document.addEventListener('mousedown', handleClickOutside)\n    document.addEventListener('keydown', handleEscapeKey)\n\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside)\n      document.removeEventListener('keydown', handleEscapeKey)\n    }\n  }, [isMenuOpen, portalContainer, setIsMenuOpen])\n\n  // when the view is open, focus the modal\n  useEffect(() => {\n    if (isMenuOpen && modalRef.current) {\n      modalRef.current.focus()\n    }\n  }, [isMenuOpen])\n\n  const handleCreateView = useCallback(() => {\n    if (!powerLicense) {\n      setPowerpackDialog('sharedViews')\n    } else {\n      setEditingView(true)\n    }\n  }, [powerLicense, setPowerpackDialog, setEditingView, setIsMenuOpen])\n\n  const selectedViewId =\n    !selectedView || workingView?.id === selectedView.id\n      ? WORKING_VIEW_ID\n      : (selectedView.id as string)\n\n  return (\n    <>\n      {isMenuOpen &&\n        createPortal(\n          <Styled.ViewsModal style={modalPosition} ref={modalRef} tabIndex={0}>\n            <ViewsMenu items={viewMenuItems} selected={selectedViewId} />\n            <ViewItem\n              label=\"Create new view\"\n              id={NEW_VIEW_ID}\n              startContent={<Icon icon=\"add\" />}\n              endContent={!powerLicense && <PowerIcon icon=\"bolt\" />}\n              onClick={handleCreateView}\n              tabIndex={0}\n            />\n          </Styled.ViewsModal>,\n          document.body,\n        )}\n    </>\n  )\n}\n"],"names":["jsxs","Styled.ViewsModal","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;AAYA,MAAM,YAAY,OAAO,IAAI;AAAA;AAAA;AAAA;AAMtB,MAAM,kBAAkB;AACxB,MAAM,cAAc;AAEpB,MAAM,qBAAyB,MAAM;AACpC,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,gBAAgB;AAEpB,QAAM,EAAE,cAAc,mBAAmB,IAAI,aAAa;AACpD,QAAA,WAAW,OAAuB,IAAI;AAGtC,QAAA,kBAAkB,wBAAwB,QAAQ;AAClD,QAAA,aAAa,mDAAiB;AACpC,QAAM,MAAM;AACZ,QAAM,gBAAgB;AAAA,IACpB,KAAK,aAAa,WAAW,SAAS,MAAM;AAAA,IAC5C,MAAM,aAAa,WAAW,OAAO;AAAA,EACvC;AAGA,YAAU,MAAM;AACR,UAAA,qBAAqB,CAAC,MAAkB;;AAC5C,YAAM,SAAS,EAAE;AAEX,YAAA,oBACJ,cAAS,YAAT,mBAAkB,SAAS,aAAW,mDAAiB,SAAS;AAClE,YAAM,yBAAwB,cAC3B,cAAc,MAAM,kBAAkB,MADX,mBAE1B,SAAS;AACb,YAAM,uBAAsB,cAAS,cAAc,UAAU,MAAjC,mBAAoC,SAAS;AAEzE,UAAI,CAAC,mBAAmB,CAAC,yBAAyB,CAAC,uBAAuB,YAAY;AACpF,sBAAc,KAAK;AAAA,MAAA;AAAA,IAEvB;AAEM,UAAA,kBAAkB,CAAC,MAAqB;AACxC,UAAA,EAAE,QAAQ,YAAY,YAAY;AACpC,sBAAc,KAAK;AAAA,MAAA;AAAA,IAEvB;AAES,aAAA,iBAAiB,aAAa,kBAAkB;AAChD,aAAA,iBAAiB,WAAW,eAAe;AAEpD,WAAO,MAAM;AACF,eAAA,oBAAoB,aAAa,kBAAkB;AACnD,eAAA,oBAAoB,WAAW,eAAe;AAAA,IACzD;AAAA,EACC,GAAA,CAAC,YAAY,iBAAiB,aAAa,CAAC;AAG/C,YAAU,MAAM;AACV,QAAA,cAAc,SAAS,SAAS;AAClC,eAAS,QAAQ,MAAM;AAAA,IAAA;AAAA,EACzB,GACC,CAAC,UAAU,CAAC;AAET,QAAA,mBAAmB,YAAY,MAAM;AACzC,QAAI,CAAC,cAAc;AACjB,yBAAmB,aAAa;AAAA,IAAA,OAC3B;AACL,qBAAe,IAAI;AAAA,IAAA;AAAA,KAEpB,CAAC,cAAc,oBAAoB,gBAAgB,aAAa,CAAC;AAE9D,QAAA,iBACJ,CAAC,iBAAgB,2CAAa,QAAO,aAAa,KAC9C,kBACC,aAAa;AAEpB,6EAEK,UACC,cAAA;AAAA,IACEA,uCAACC,YAAA,EAAkB,OAAO,eAAe,KAAK,UAAU,UAAU,GAChE,UAAA;AAAA,MAAAC,kCAAA,IAAC,WAAU,EAAA,OAAO,eAAe,UAAU,gBAAgB;AAAA,MAC3DA,kCAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,IAAI;AAAA,UACJ,cAAcA,kCAAAA,IAAC,MAAK,EAAA,MAAK,MAAM,CAAA;AAAA,UAC/B,YAAY,CAAC,gBAAiBA,kCAAA,IAAA,WAAA,EAAU,MAAK,QAAO;AAAA,UACpD,SAAS;AAAA,UACT,UAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IACZ,GACF;AAAA,IACA,SAAS;AAAA,EAAA,GAEf;AAEJ;"}