@ynput/ayon-frontend-shared 0.2.20 → 0.2.21

package/dist/shared/src/containers/RepresentationsList/RepresentationsList.es.js

@@ -175,6 +175,10 @@ import "../DetailsPanel/DetailsPanelFloating/DetailsPanelFloating.styled.es.js";
 import "../Actions/Actions.styled.es.js";
 import "../Actions/ActionsDropdown/ActionsDropdown.es.js";
 import "../Actions/ActionIcon.es.js";
+import "../Views/context/ViewsContext.es.js";
+import "../Views/Views.styled.es.js";
+import "../Views/ViewsMenuContainer/ViewsMenuContainer.es.js";
+import "../Views/ViewsMenu/ViewsMenu.es.js";
 import "../../components/EntityPanelUploader/EntityPanelUploader.styled.es.js";
 import "../../components/SimpleFormDialog/SimpleFormDialog.es.js";
 import "../../components/EntityPath/EntityPath.styled.es.js";
@@ -196,9 +200,6 @@ import "../../components/VersionUploader/components/UploadVersionDialog.es.js";
 import "../../components/VersionUploader/context/VersionUploadContext.es.js";
 import "../../components/Feedback/FeedbackContext.es.js";
 import "../../components/Feedback/SupportBubble.es.js";
-import "../../components/Views/context/ViewsContext.es.js";
-import "../../components/Views/Views.styled.es.js";
-import "../../components/Views/ViewsMenuContainer/ViewsMenuContainer.es.js";
 const columns = [
   {
     field: "name",

package/dist/shared/src/containers/RepresentationsList/RepresentationsList.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"RepresentationsList.es.js","sources":["../../../../../src/containers/RepresentationsList/RepresentationsList.tsx"],"sourcesContent":["import { useMemo, useState } from 'react'\nimport { TablePanel } from '@ynput/ayon-react-components'\n\nimport { TreeTable } from 'primereact/treetable'\nimport { Column } from 'primereact/column'\n\nimport { groupResult } from '@shared/util'\nimport { useCreateContextMenu } from '@shared/containers/ContextMenu'\nimport { DetailsDialog } from '@shared/components'\nimport versionsToRepresentations from './versionsToRepresentations'\nimport { DetailsPanelEntityData } from '@shared/api'\n\nconst columns = [\n  {\n    field: 'name',\n    header: 'Name',\n    width: 90,\n    expander: true,\n  },\n  {\n    field: 'folderName',\n    header: 'Folder',\n    width: 130,\n  },\n  {\n    field: 'productName',\n    header: 'Product',\n    width: 130,\n  },\n  {\n    field: 'Product type',\n    header: 'productType',\n    width: 110,\n  },\n]\n\ntype Props = {\n  entities: DetailsPanelEntityData[]\n}\n\nexport const RepresentationsList = ({ entities = [] }: Props) => {\n  // merge all entities data into one array of entities\n  const representations = useMemo(() => versionsToRepresentations(entities) || [], [entities])\n\n  const [showDetail, setShowDetail] = useState<false | string>(false)\n  const showDetailProjectName = representations.find((rep) => rep.id === showDetail)?.projectName\n\n  const [selected, setSelected] = useState<string[]>([])\n\n  const data = useMemo(() => {\n    // @ts-expect-error - groupResult is not typed\n    return groupResult(representations, 'name')\n  }, [representations])\n\n  const onRepSelectionChange = (entityId: string) => {\n    // set focused state\n    setSelected([entityId])\n  }\n\n  const onRowClick = (e: any) => {\n    onRepSelectionChange(e.node.data.id)\n  }\n\n  const ctxMenuItems = (id: string) => [\n    {\n      label: 'Representation detail',\n      command: () => setShowDetail(id),\n      icon: 'database',\n    },\n  ]\n\n  const [ctxMenuShow] = useCreateContextMenu([])\n\n  const handleContextMenu = (e: any) => {\n    const id = e.node.data.id\n\n    if (id) {\n      // update focused representations\n      onRepSelectionChange(id)\n      // open context menu\n      ctxMenuShow(e.originalEvent, ctxMenuItems(id))\n    }\n  }\n\n  return (\n    <>\n      <TablePanel>\n        <TreeTable\n          scrollable\n          scrollHeight=\"100%\"\n          value={data}\n          emptyMessage=\"No representation found\"\n          selectionMode=\"single\"\n          selectionKeys={selected[0]}\n          onRowClick={onRowClick}\n          onContextMenu={handleContextMenu}\n        >\n          {columns.map((col) => {\n            return (\n              <Column\n                key={col.field}\n                field={col.field}\n                header={col.header}\n                expander={col.expander}\n                style={{ width: col.width }}\n              />\n            )\n          })}\n        </TreeTable>\n      </TablePanel>\n\n      {showDetail && (\n        <DetailsDialog\n          projectName={showDetailProjectName}\n          entityType={'representation'}\n          entityIds={[showDetail]}\n          visible={!!showDetail}\n          onHide={() => setShowDetail(false)}\n        />\n      )}\n    </>\n  )\n}\n"],"names":["jsxs","Fragment","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,UAAU;AAAA,EACd;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,EACZ;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAEX;AAMO,MAAM,sBAAsB,CAAC,EAAE,WAAW,CAAA,QAAgB;;AAEzD,QAAA,kBAAkB,QAAQ,MAAM,0BAA0B,QAAQ,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC;AAE3F,QAAM,CAAC,YAAY,aAAa,IAAI,SAAyB,KAAK;AAC5D,QAAA,yBAAwB,qBAAgB,KAAK,CAAC,QAAQ,IAAI,OAAO,UAAU,MAAnD,mBAAsD;AAEpF,QAAM,CAAC,UAAU,WAAW,IAAI,SAAmB,CAAA,CAAE;AAE/C,QAAA,OAAO,QAAQ,MAAM;AAElB,WAAA,YAAY,iBAAiB,MAAM;AAAA,EAAA,GACzC,CAAC,eAAe,CAAC;AAEd,QAAA,uBAAuB,CAAC,aAAqB;AAErC,gBAAA,CAAC,QAAQ,CAAC;AAAA,EACxB;AAEM,QAAA,aAAa,CAAC,MAAW;AACR,yBAAA,EAAE,KAAK,KAAK,EAAE;AAAA,EACrC;AAEM,QAAA,eAAe,CAAC,OAAe;AAAA,IACnC;AAAA,MACE,OAAO;AAAA,MACP,SAAS,MAAM,cAAc,EAAE;AAAA,MAC/B,MAAM;AAAA,IAAA;AAAA,EAEV;AAEA,QAAM,CAAC,WAAW,IAAI,qBAAqB,EAAE;AAEvC,QAAA,oBAAoB,CAAC,MAAW;AAC9B,UAAA,KAAK,EAAE,KAAK,KAAK;AAEvB,QAAI,IAAI;AAEN,2BAAqB,EAAE;AAEvB,kBAAY,EAAE,eAAe,aAAa,EAAE,CAAC;AAAA,IAAA;AAAA,EAEjD;AAEA,SAEIA,kCAAA,KAAAC,4BAAA,EAAA,UAAA;AAAA,IAAAC,sCAAC,YACC,EAAA,UAAAA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,YAAU;AAAA,QACV,cAAa;AAAA,QACb,OAAO;AAAA,QACP,cAAa;AAAA,QACb,eAAc;AAAA,QACd,eAAe,SAAS,CAAC;AAAA,QACzB;AAAA,QACA,eAAe;AAAA,QAEd,UAAA,QAAQ,IAAI,CAAC,QAAQ;AAElB,iBAAAA,kCAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,OAAO,IAAI;AAAA,cACX,QAAQ,IAAI;AAAA,cACZ,UAAU,IAAI;AAAA,cACd,OAAO,EAAE,OAAO,IAAI,MAAM;AAAA,YAAA;AAAA,YAJrB,IAAI;AAAA,UAKX;AAAA,QAEH,CAAA;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,IAEC,cACCA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,aAAa;AAAA,QACb,YAAY;AAAA,QACZ,WAAW,CAAC,UAAU;AAAA,QACtB,SAAS,CAAC,CAAC;AAAA,QACX,QAAQ,MAAM,cAAc,KAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EACnC,GAEJ;AAEJ;"}
+{"version":3,"file":"RepresentationsList.es.js","sources":["../../../../../src/containers/RepresentationsList/RepresentationsList.tsx"],"sourcesContent":["import { useMemo, useState } from 'react'\nimport { TablePanel } from '@ynput/ayon-react-components'\n\nimport { TreeTable } from 'primereact/treetable'\nimport { Column } from 'primereact/column'\n\nimport { groupResult } from '@shared/util'\nimport { useCreateContextMenu } from '@shared/containers/ContextMenu'\nimport { DetailsDialog } from '@shared/components'\nimport versionsToRepresentations from './versionsToRepresentations'\nimport { DetailsPanelEntityData } from '@shared/api'\n\nconst columns = [\n  {\n    field: 'name',\n    header: 'Name',\n    width: 90,\n    expander: true,\n  },\n  {\n    field: 'folderName',\n    header: 'Folder',\n    width: 130,\n  },\n  {\n    field: 'productName',\n    header: 'Product',\n    width: 130,\n  },\n  {\n    field: 'Product type',\n    header: 'productType',\n    width: 110,\n  },\n]\n\ntype Props = {\n  entities: DetailsPanelEntityData[]\n}\n\nexport const RepresentationsList = ({ entities = [] }: Props) => {\n  // merge all entities data into one array of entities\n  const representations = useMemo(() => versionsToRepresentations(entities) || [], [entities])\n\n  const [showDetail, setShowDetail] = useState<false | string>(false)\n  const showDetailProjectName = representations.find((rep) => rep.id === showDetail)?.projectName\n\n  const [selected, setSelected] = useState<string[]>([])\n\n  const data = useMemo(() => {\n    // @ts-expect-error - groupResult is not typed\n    return groupResult(representations, 'name')\n  }, [representations])\n\n  const onRepSelectionChange = (entityId: string) => {\n    // set focused state\n    setSelected([entityId])\n  }\n\n  const onRowClick = (e: any) => {\n    onRepSelectionChange(e.node.data.id)\n  }\n\n  const ctxMenuItems = (id: string) => [\n    {\n      label: 'Representation detail',\n      command: () => setShowDetail(id),\n      icon: 'database',\n    },\n  ]\n\n  const [ctxMenuShow] = useCreateContextMenu([])\n\n  const handleContextMenu = (e: any) => {\n    const id = e.node.data.id\n\n    if (id) {\n      // update focused representations\n      onRepSelectionChange(id)\n      // open context menu\n      ctxMenuShow(e.originalEvent, ctxMenuItems(id))\n    }\n  }\n\n  return (\n    <>\n      <TablePanel>\n        <TreeTable\n          scrollable\n          scrollHeight=\"100%\"\n          value={data}\n          emptyMessage=\"No representation found\"\n          selectionMode=\"single\"\n          selectionKeys={selected[0]}\n          onRowClick={onRowClick}\n          onContextMenu={handleContextMenu}\n        >\n          {columns.map((col) => {\n            return (\n              <Column\n                key={col.field}\n                field={col.field}\n                header={col.header}\n                expander={col.expander}\n                style={{ width: col.width }}\n              />\n            )\n          })}\n        </TreeTable>\n      </TablePanel>\n\n      {showDetail && (\n        <DetailsDialog\n          projectName={showDetailProjectName}\n          entityType={'representation'}\n          entityIds={[showDetail]}\n          visible={!!showDetail}\n          onHide={() => setShowDetail(false)}\n        />\n      )}\n    </>\n  )\n}\n"],"names":["jsxs","Fragment","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,UAAU;AAAA,EACd;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,EACZ;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAEX;AAMO,MAAM,sBAAsB,CAAC,EAAE,WAAW,CAAA,QAAgB;;AAEzD,QAAA,kBAAkB,QAAQ,MAAM,0BAA0B,QAAQ,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC;AAE3F,QAAM,CAAC,YAAY,aAAa,IAAI,SAAyB,KAAK;AAC5D,QAAA,yBAAwB,qBAAgB,KAAK,CAAC,QAAQ,IAAI,OAAO,UAAU,MAAnD,mBAAsD;AAEpF,QAAM,CAAC,UAAU,WAAW,IAAI,SAAmB,CAAA,CAAE;AAE/C,QAAA,OAAO,QAAQ,MAAM;AAElB,WAAA,YAAY,iBAAiB,MAAM;AAAA,EAAA,GACzC,CAAC,eAAe,CAAC;AAEd,QAAA,uBAAuB,CAAC,aAAqB;AAErC,gBAAA,CAAC,QAAQ,CAAC;AAAA,EACxB;AAEM,QAAA,aAAa,CAAC,MAAW;AACR,yBAAA,EAAE,KAAK,KAAK,EAAE;AAAA,EACrC;AAEM,QAAA,eAAe,CAAC,OAAe;AAAA,IACnC;AAAA,MACE,OAAO;AAAA,MACP,SAAS,MAAM,cAAc,EAAE;AAAA,MAC/B,MAAM;AAAA,IAAA;AAAA,EAEV;AAEA,QAAM,CAAC,WAAW,IAAI,qBAAqB,EAAE;AAEvC,QAAA,oBAAoB,CAAC,MAAW;AAC9B,UAAA,KAAK,EAAE,KAAK,KAAK;AAEvB,QAAI,IAAI;AAEN,2BAAqB,EAAE;AAEvB,kBAAY,EAAE,eAAe,aAAa,EAAE,CAAC;AAAA,IAAA;AAAA,EAEjD;AAEA,SAEIA,kCAAA,KAAAC,4BAAA,EAAA,UAAA;AAAA,IAAAC,sCAAC,YACC,EAAA,UAAAA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,YAAU;AAAA,QACV,cAAa;AAAA,QACb,OAAO;AAAA,QACP,cAAa;AAAA,QACb,eAAc;AAAA,QACd,eAAe,SAAS,CAAC;AAAA,QACzB;AAAA,QACA,eAAe;AAAA,QAEd,UAAA,QAAQ,IAAI,CAAC,QAAQ;AAElB,iBAAAA,kCAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,OAAO,IAAI;AAAA,cACX,QAAQ,IAAI;AAAA,cACZ,UAAU,IAAI;AAAA,cACd,OAAO,EAAE,OAAO,IAAI,MAAM;AAAA,YAAA;AAAA,YAJrB,IAAI;AAAA,UAKX;AAAA,QAEH,CAAA;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,IAEC,cACCA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,aAAa;AAAA,QACb,YAAY;AAAA,QACZ,WAAW,CAAC,UAAU;AAAA,QACtB,SAAS,CAAC,CAAC;AAAA,QACX,QAAQ,MAAM,cAAc,KAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EACnC,GAEJ;AAEJ;"}

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

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../../../_virtual/jsx-runtime.cjs.js");
+const React = require("react");
+const ViewItem_styled = require("./ViewItem.styled.cjs.js");
+const clsx = require("clsx");
+const ViewItem = React.forwardRef(
+  ({
+    label,
+    startContent,
+    endContent,
+    isSelected,
+    isEditable,
+    isSaveable,
+    highlighted,
+    onEdit,
+    onSave,
+    className,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(ViewItem_styled.ViewItem, { ...props, className: clsx(className, { selected: isSelected }), ref, children: [
+      startContent && startContent,
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("span", { className: "label", children: label }),
+      isEditable && isSaveable && !isSelected && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+        ViewItem_styled.ActionButton,
+        {
+          icon: "save",
+          variant: "text",
+          className: clsx("save", { active: highlighted === "save" }),
+          onClick: onSave,
+          "data-tooltip": "Save view settings from current view"
+        }
+      ),
+      isEditable && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+        ViewItem_styled.ActionButton,
+        {
+          variant: "text",
+          icon: "more_horiz",
+          className: clsx("more", { active: highlighted === "edit" }),
+          onClick: onEdit,
+          "data-tooltip": "Edit view"
+        }
+      ),
+      endContent && endContent
+    ] });
+  }
+);
+exports.ViewItem = ViewItem;
+//# sourceMappingURL=ViewItem.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ViewItem.cjs.js","sources":["../../../../../../src/containers/Views/ViewItem/ViewItem.tsx"],"sourcesContent":["import { forwardRef, ReactNode } from 'react'\nimport * as Styled from './ViewItem.styled'\nimport clsx from 'clsx'\n\nexport interface ViewItem {\n  id: string\n  label: string\n  startContent?: ReactNode\n  endContent?: ReactNode\n  isSelected?: boolean\n  isEditable?: boolean\n  isSaveable?: boolean // can this be saved from working view (shows little save button)\n  highlighted?: 'save' | 'edit' // highlights a button\n  onEdit?: (e: React.MouseEvent<HTMLButtonElement>) => void\n  onSave?: (e: React.MouseEvent<HTMLButtonElement>) => void // saves the view settings from selected view\n  onClick?: (e: React.MouseEvent<HTMLLIElement>) => void\n}\n\nexport interface ViewMenuItemProps\n  extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'id'>,\n    ViewItem {}\n\nexport const ViewItem = forwardRef<HTMLLIElement, ViewMenuItemProps>(\n  (\n    {\n      label,\n      startContent,\n      endContent,\n      isSelected,\n      isEditable,\n      isSaveable,\n      highlighted,\n      onEdit,\n      onSave,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <Styled.ViewItem {...props} className={clsx(className, { selected: isSelected })} ref={ref}>\n        {startContent && startContent}\n        <span className=\"label\">{label}</span>\n        {isEditable && isSaveable && !isSelected && (\n          <Styled.ActionButton\n            icon=\"save\"\n            variant=\"text\"\n            className={clsx('save', { active: highlighted === 'save' })}\n            onClick={onSave}\n            data-tooltip=\"Save view settings from current view\"\n          />\n        )}\n        {isEditable && (\n          <Styled.ActionButton\n            variant=\"text\"\n            icon=\"more_horiz\"\n            className={clsx('more', { active: highlighted === 'edit' })}\n            onClick={onEdit}\n            data-tooltip=\"Edit view\"\n          />\n        )}\n        {endContent && endContent}\n      </Styled.ViewItem>\n    )\n  },\n)\n"],"names":["forwardRef","jsxs","Styled.ViewItem","jsx","Styled.ActionButton"],"mappings":";;;;;;AAsBO,MAAM,WAAWA,MAAA;AAAA,EACtB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,KAEL,QACG;AACH,WACGC,2BAAA,kBAAA,KAAAC,gBAAA,UAAA,EAAiB,GAAG,OAAO,WAAW,KAAK,WAAW,EAAE,UAAU,WAAY,CAAA,GAAG,KAC/E,UAAA;AAAA,MAAgB,gBAAA;AAAA,MAChBC,2BAAA,kBAAA,IAAA,QAAA,EAAK,WAAU,SAAS,UAAM,OAAA;AAAA,MAC9B,cAAc,cAAc,CAAC,cAC5BA,2BAAA,kBAAA;AAAA,QAACC,gBAAO;AAAA,QAAP;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,WAAW,KAAK,QAAQ,EAAE,QAAQ,gBAAgB,QAAQ;AAAA,UAC1D,SAAS;AAAA,UACT,gBAAa;AAAA,QAAA;AAAA,MACf;AAAA,MAED,cACCD,2BAAA,kBAAA;AAAA,QAACC,gBAAO;AAAA,QAAP;AAAA,UACC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,WAAW,KAAK,QAAQ,EAAE,QAAQ,gBAAgB,QAAQ;AAAA,UAC1D,SAAS;AAAA,UACT,gBAAa;AAAA,QAAA;AAAA,MACf;AAAA,MAED,cAAc;AAAA,IAAA,GACjB;AAAA,EAAA;AAGN;;"}

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

@@ -0,0 +1,49 @@
+import { j as jsxRuntimeExports } from "../../../../../_virtual/jsx-runtime.es.js";
+import { forwardRef } from "react";
+import { ViewItem as ViewItem$1, ActionButton } from "./ViewItem.styled.es.js";
+import clsx from "clsx";
+const ViewItem = forwardRef(
+  ({
+    label,
+    startContent,
+    endContent,
+    isSelected,
+    isEditable,
+    isSaveable,
+    highlighted,
+    onEdit,
+    onSave,
+    className,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(ViewItem$1, { ...props, className: clsx(className, { selected: isSelected }), ref, children: [
+      startContent && startContent,
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "label", children: label }),
+      isEditable && isSaveable && !isSelected && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ActionButton,
+        {
+          icon: "save",
+          variant: "text",
+          className: clsx("save", { active: highlighted === "save" }),
+          onClick: onSave,
+          "data-tooltip": "Save view settings from current view"
+        }
+      ),
+      isEditable && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ActionButton,
+        {
+          variant: "text",
+          icon: "more_horiz",
+          className: clsx("more", { active: highlighted === "edit" }),
+          onClick: onEdit,
+          "data-tooltip": "Edit view"
+        }
+      ),
+      endContent && endContent
+    ] });
+  }
+);
+export {
+  ViewItem
+};
+//# sourceMappingURL=ViewItem.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ViewItem.es.js","sources":["../../../../../../src/containers/Views/ViewItem/ViewItem.tsx"],"sourcesContent":["import { forwardRef, ReactNode } from 'react'\nimport * as Styled from './ViewItem.styled'\nimport clsx from 'clsx'\n\nexport interface ViewItem {\n  id: string\n  label: string\n  startContent?: ReactNode\n  endContent?: ReactNode\n  isSelected?: boolean\n  isEditable?: boolean\n  isSaveable?: boolean // can this be saved from working view (shows little save button)\n  highlighted?: 'save' | 'edit' // highlights a button\n  onEdit?: (e: React.MouseEvent<HTMLButtonElement>) => void\n  onSave?: (e: React.MouseEvent<HTMLButtonElement>) => void // saves the view settings from selected view\n  onClick?: (e: React.MouseEvent<HTMLLIElement>) => void\n}\n\nexport interface ViewMenuItemProps\n  extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'id'>,\n    ViewItem {}\n\nexport const ViewItem = forwardRef<HTMLLIElement, ViewMenuItemProps>(\n  (\n    {\n      label,\n      startContent,\n      endContent,\n      isSelected,\n      isEditable,\n      isSaveable,\n      highlighted,\n      onEdit,\n      onSave,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <Styled.ViewItem {...props} className={clsx(className, { selected: isSelected })} ref={ref}>\n        {startContent && startContent}\n        <span className=\"label\">{label}</span>\n        {isEditable && isSaveable && !isSelected && (\n          <Styled.ActionButton\n            icon=\"save\"\n            variant=\"text\"\n            className={clsx('save', { active: highlighted === 'save' })}\n            onClick={onSave}\n            data-tooltip=\"Save view settings from current view\"\n          />\n        )}\n        {isEditable && (\n          <Styled.ActionButton\n            variant=\"text\"\n            icon=\"more_horiz\"\n            className={clsx('more', { active: highlighted === 'edit' })}\n            onClick={onEdit}\n            data-tooltip=\"Edit view\"\n          />\n        )}\n        {endContent && endContent}\n      </Styled.ViewItem>\n    )\n  },\n)\n"],"names":["jsxs","Styled.ViewItem","jsx","Styled.ActionButton"],"mappings":";;;;AAsBO,MAAM,WAAW;AAAA,EACtB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,KAEL,QACG;AACH,WACGA,kCAAA,KAAAC,YAAA,EAAiB,GAAG,OAAO,WAAW,KAAK,WAAW,EAAE,UAAU,WAAY,CAAA,GAAG,KAC/E,UAAA;AAAA,MAAgB,gBAAA;AAAA,MAChBC,kCAAA,IAAA,QAAA,EAAK,WAAU,SAAS,UAAM,OAAA;AAAA,MAC9B,cAAc,cAAc,CAAC,cAC5BA,kCAAA;AAAA,QAACC;AAAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,WAAW,KAAK,QAAQ,EAAE,QAAQ,gBAAgB,QAAQ;AAAA,UAC1D,SAAS;AAAA,UACT,gBAAa;AAAA,QAAA;AAAA,MACf;AAAA,MAED,cACCD,kCAAA;AAAA,QAACC;AAAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,WAAW,KAAK,QAAQ,EAAE,QAAQ,gBAAgB,QAAQ;AAAA,UAC1D,SAAS;AAAA,UACT,gBAAa;AAAA,QAAA;AAAA,MACf;AAAA,MAED,cAAc;AAAA,IAAA,GACjB;AAAA,EAAA;AAGN;"}

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

@@ -5,6 +5,7 @@ const styled = require("styled-components");
 const ViewItem = styled.li`
   position: relative;
   padding: 4px 6px 4px 12px;
+  user-select: none;
 
   &:has(.start-icon) {
     padding-left: 8px;
@@ -28,36 +29,47 @@ const ViewItem = styled.li`
   }
 
   &.selected {
-    background-color: var(--md-sys-color-primary);
+    background-color: var(--md-sys-color-primary-container);
     &,
     .icon {
-      color: var(--md-sys-color-on-primary);
+      color: var(--md-sys-color-on-primary-container);
     }
 
     .more {
       &:hover {
-        background-color: var(--md-sys-color-primary-hover);
+        background-color: var(--md-sys-color-primary-container-hover);
       }
     }
+  }
 
-    /* personal view item uses secondary colors */
-    &.personal {
-      background-color: var(--md-sys-color-secondary-container);
-      &,
-      .icon {
-        color: var(--md-sys-color-on-secondary-container);
-      }
+  /* hide save button by default */
+  .save {
+    display: none;
+  }
+  &:hover {
+    .save {
+      display: flex;
     }
   }
 `;
-const MoreButton = styled(ayonReactComponents.Button)`
+const ActionButton = styled(ayonReactComponents.Button)`
   &.hasIcon {
     padding: 2px;
   }
   &:hover {
     background-color: var(--md-sys-color-surface-container-highest-hover);
   }
+  &.active {
+    background-color: var(--md-sys-color-primary);
+    color: var(--md-sys-color-on-primary);
+
+    display: flex !important;
+
+    &:hover {
+      background-color: var(--md-sys-color-primary-hover);
+    }
+  }
 `;
-exports.MoreButton = MoreButton;
+exports.ActionButton = ActionButton;
 exports.ViewItem = ViewItem;
 //# sourceMappingURL=ViewItem.styled.cjs.js.map

package/dist/shared/src/containers/Views/ViewItem/ViewItem.styled.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewItem.styled.cjs.js","sources":["../../../../../../src/containers/Views/ViewItem/ViewItem.styled.ts"],"sourcesContent":["import { Button } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nexport const ViewItem = styled.li`\n  position: relative;\n  padding: 4px 6px 4px 12px;\n  user-select: none;\n\n  &:has(.start-icon) {\n    padding-left: 8px;\n  }\n\n  height: 32px;\n  border-radius: var(--border-radius-m);\n\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n\n  cursor: pointer;\n\n  .label {\n    flex: 1;\n  }\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n\n  &.selected {\n    background-color: var(--md-sys-color-primary-container);\n    &,\n    .icon {\n      color: var(--md-sys-color-on-primary-container);\n    }\n\n    .more {\n      &:hover {\n        background-color: var(--md-sys-color-primary-container-hover);\n      }\n    }\n  }\n\n  /* hide save button by default */\n  .save {\n    display: none;\n  }\n  &:hover {\n    .save {\n      display: flex;\n    }\n  }\n`\n\nexport const ActionButton = styled(Button)`\n  &.hasIcon {\n    padding: 2px;\n  }\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-highest-hover);\n  }\n  &.active {\n    background-color: var(--md-sys-color-primary);\n    color: var(--md-sys-color-on-primary);\n\n    display: flex !important;\n\n    &:hover {\n      background-color: var(--md-sys-color-primary-hover);\n    }\n  }\n`\n"],"names":["Button"],"mappings":";;;;AAGO,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmDlB,MAAA,eAAe,OAAOA,0BAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;"}

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

@@ -3,6 +3,7 @@ import styled from "styled-components";
 const ViewItem = styled.li`
   position: relative;
   padding: 4px 6px 4px 12px;
+  user-select: none;
 
   &:has(.start-icon) {
     padding-left: 8px;
@@ -26,38 +27,49 @@ const ViewItem = styled.li`
   }
 
   &.selected {
-    background-color: var(--md-sys-color-primary);
+    background-color: var(--md-sys-color-primary-container);
     &,
     .icon {
-      color: var(--md-sys-color-on-primary);
+      color: var(--md-sys-color-on-primary-container);
     }
 
     .more {
       &:hover {
-        background-color: var(--md-sys-color-primary-hover);
+        background-color: var(--md-sys-color-primary-container-hover);
       }
     }
+  }
 
-    /* personal view item uses secondary colors */
-    &.personal {
-      background-color: var(--md-sys-color-secondary-container);
-      &,
-      .icon {
-        color: var(--md-sys-color-on-secondary-container);
-      }
+  /* hide save button by default */
+  .save {
+    display: none;
+  }
+  &:hover {
+    .save {
+      display: flex;
     }
   }
 `;
-const MoreButton = styled(Button)`
+const ActionButton = styled(Button)`
   &.hasIcon {
     padding: 2px;
   }
   &:hover {
     background-color: var(--md-sys-color-surface-container-highest-hover);
   }
+  &.active {
+    background-color: var(--md-sys-color-primary);
+    color: var(--md-sys-color-on-primary);
+
+    display: flex !important;
+
+    &:hover {
+      background-color: var(--md-sys-color-primary-hover);
+    }
+  }
 `;
 export {
-  MoreButton,
+  ActionButton,
   ViewItem
 };
 //# sourceMappingURL=ViewItem.styled.es.js.map

package/dist/shared/src/containers/Views/ViewItem/ViewItem.styled.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewItem.styled.es.js","sources":["../../../../../../src/containers/Views/ViewItem/ViewItem.styled.ts"],"sourcesContent":["import { Button } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nexport const ViewItem = styled.li`\n  position: relative;\n  padding: 4px 6px 4px 12px;\n  user-select: none;\n\n  &:has(.start-icon) {\n    padding-left: 8px;\n  }\n\n  height: 32px;\n  border-radius: var(--border-radius-m);\n\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n\n  cursor: pointer;\n\n  .label {\n    flex: 1;\n  }\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n\n  &.selected {\n    background-color: var(--md-sys-color-primary-container);\n    &,\n    .icon {\n      color: var(--md-sys-color-on-primary-container);\n    }\n\n    .more {\n      &:hover {\n        background-color: var(--md-sys-color-primary-container-hover);\n      }\n    }\n  }\n\n  /* hide save button by default */\n  .save {\n    display: none;\n  }\n  &:hover {\n    .save {\n      display: flex;\n    }\n  }\n`\n\nexport const ActionButton = styled(Button)`\n  &.hasIcon {\n    padding: 2px;\n  }\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-highest-hover);\n  }\n  &.active {\n    background-color: var(--md-sys-color-primary);\n    color: var(--md-sys-color-on-primary);\n\n    display: flex !important;\n\n    &:hover {\n      background-color: var(--md-sys-color-primary-hover);\n    }\n  }\n`\n"],"names":[],"mappings":";;AAGO,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmDlB,MAAA,eAAe,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

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

@@ -1,21 +1,17 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("../../../../_virtual/jsx-runtime.cjs.js");
-const ViewsContext = require("./context/ViewsContext.cjs.js");
 const ViewsButton = require("./ViewsButton/ViewsButton.cjs.js");
 const ViewsMenuContainer = require("./ViewsMenuContainer/ViewsMenuContainer.cjs.js");
-const Views = ({ viewType, projectName }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(ViewsContext.ViewsProvider, { viewType, projectName, children: [
-    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ViewsButton.ViewsButton, {}),
-    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ViewsMenuContainer.ViewsMenuContainer, {})
-  ] });
-};
-const ViewsComponents = () => {
+const ViewsDialogContainer = require("./ViewsDialogContainer/ViewsDialogContainer.cjs.js");
+const useViewsShortcuts = require("./hooks/useViewsShortcuts.cjs.js");
+const Views = () => {
+  useViewsShortcuts.useViewsShortcuts();
   return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ViewsButton.ViewsButton, {}),
-    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ViewsMenuContainer.ViewsMenuContainer, {})
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ViewsMenuContainer.ViewsMenuContainer, {}),
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ViewsDialogContainer.default, {})
   ] });
 };
 exports.Views = Views;
-exports.ViewsComponents = ViewsComponents;
 //# sourceMappingURL=Views.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Views.cjs.js","sources":["../../../../../src/containers/Views/Views.tsx"],"sourcesContent":["import { FC } from 'react'\nimport { ViewsButton } from './ViewsButton/ViewsButton'\nimport { ViewsMenuContainer } from './ViewsMenuContainer/ViewsMenuContainer'\nimport ViewsDialogContainer from './ViewsDialogContainer/ViewsDialogContainer'\nimport { useViewsShortcuts } from './hooks/useViewsShortcuts'\n\n// Component for use inside a ViewsProvider\nexport const Views: FC = () => {\n  // Enable Views keyboard shortcuts:\n  // - Shift+Ctrl/Cmd+0: Reset view to default settings\n  useViewsShortcuts()\n\n  return (\n    <>\n      <ViewsButton />\n      <ViewsMenuContainer />\n      <ViewsDialogContainer />\n    </>\n  )\n}\n"],"names":["useViewsShortcuts","jsxs","Fragment","jsx","ViewsButton","ViewsMenuContainer","ViewsDialogContainer"],"mappings":";;;;;;;AAOO,MAAM,QAAY,MAAM;AAGXA,sCAAA;AAElB,SAEIC,2BAAA,kBAAA,KAAAC,uCAAA,EAAA,UAAA;AAAA,IAAAC,2BAAA,kBAAA,IAACC,YAAY,aAAA,EAAA;AAAA,qDACZC,mBAAmB,oBAAA,EAAA;AAAA,qDACnBC,qBAAqB,SAAA,CAAA,CAAA;AAAA,EAAA,GACxB;AAEJ;;"}

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

@@ -1,21 +1,17 @@
 import { j as jsxRuntimeExports } from "../../../../_virtual/jsx-runtime.es.js";
-import { ViewsProvider } from "./context/ViewsContext.es.js";
 import { ViewsButton } from "./ViewsButton/ViewsButton.es.js";
 import { ViewsMenuContainer } from "./ViewsMenuContainer/ViewsMenuContainer.es.js";
-const Views = ({ viewType, projectName }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(ViewsProvider, { viewType, projectName, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(ViewsButton, {}),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(ViewsMenuContainer, {})
-  ] });
-};
-const ViewsComponents = () => {
+import ViewsDialogContainer from "./ViewsDialogContainer/ViewsDialogContainer.es.js";
+import { useViewsShortcuts } from "./hooks/useViewsShortcuts.es.js";
+const Views = () => {
+  useViewsShortcuts();
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(ViewsButton, {}),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(ViewsMenuContainer, {})
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ViewsMenuContainer, {}),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ViewsDialogContainer, {})
   ] });
 };
 export {
-  Views,
-  ViewsComponents
+  Views
 };
 //# sourceMappingURL=Views.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Views.es.js","sources":["../../../../../src/containers/Views/Views.tsx"],"sourcesContent":["import { FC } from 'react'\nimport { ViewsButton } from './ViewsButton/ViewsButton'\nimport { ViewsMenuContainer } from './ViewsMenuContainer/ViewsMenuContainer'\nimport ViewsDialogContainer from './ViewsDialogContainer/ViewsDialogContainer'\nimport { useViewsShortcuts } from './hooks/useViewsShortcuts'\n\n// Component for use inside a ViewsProvider\nexport const Views: FC = () => {\n  // Enable Views keyboard shortcuts:\n  // - Shift+Ctrl/Cmd+0: Reset view to default settings\n  useViewsShortcuts()\n\n  return (\n    <>\n      <ViewsButton />\n      <ViewsMenuContainer />\n      <ViewsDialogContainer />\n    </>\n  )\n}\n"],"names":["jsxs","Fragment","jsx"],"mappings":";;;;;AAOO,MAAM,QAAY,MAAM;AAGX,oBAAA;AAElB,SAEIA,kCAAA,KAAAC,4BAAA,EAAA,UAAA;AAAA,IAAAC,kCAAA,IAAC,aAAY,EAAA;AAAA,0CACZ,oBAAmB,EAAA;AAAA,0CACnB,sBAAqB,CAAA,CAAA;AAAA,EAAA,GACxB;AAEJ;"}

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

@@ -7,6 +7,7 @@ const ViewsButton = styled(ayonReactComponents.Icon)`
   border-radius: var(--border-radius-m);
   margin: -4px 0;
   margin-right: -16px;
+  margin-left: 8px;
 
   &:hover,
   &.open {
@@ -14,12 +15,12 @@ const ViewsButton = styled(ayonReactComponents.Icon)`
   }
 
   &.active {
-    color: var(--md-sys-color-primary);
+    background-color: var(--md-sys-color-primary);
+    color: var(--md-sys-color-on-primary);
 
     &:hover,
     &.open {
-      background-color: var(--md-sys-color-on-primary);
-      color: var(--md-sys-color-primary);
+      background-color: var(--md-sys-color-primary-hover);
     }
   }
 `;

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

@@ -0,0 +1 @@
+{"version":3,"file":"Views.styled.cjs.js","sources":["../../../../../src/containers/Views/Views.styled.ts"],"sourcesContent":["import { Icon } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nexport const ViewsButton = styled(Icon)`\n  padding: var(--padding-s);\n  border-radius: var(--border-radius-m);\n  margin: -4px 0;\n  margin-right: -16px;\n  margin-left: 8px;\n\n  &:hover,\n  &.open {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n\n  &.active {\n    background-color: var(--md-sys-color-primary);\n    color: var(--md-sys-color-on-primary);\n\n    &:hover,\n    &.open {\n      background-color: var(--md-sys-color-primary-hover);\n    }\n  }\n`\n\nexport const ViewsModal = styled.div`\n  position: fixed;\n  top: 0;\n  left: 0;\n  padding: var(--padding-m);\n  min-width: 240px;\n  max-width: 800px;\n\n  overflow: hidden;\n\n  z-index: 910;\n\n  background-color: var(--md-sys-color-surface-container-high);\n  border-radius: var(--border-radius-l);\n  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);\n`\n"],"names":["Icon"],"mappings":";;;;AAGa,MAAA,cAAc,OAAOA,wBAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuB/B,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;"}

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

@@ -5,6 +5,7 @@ const ViewsButton = styled(Icon)`
   border-radius: var(--border-radius-m);
   margin: -4px 0;
   margin-right: -16px;
+  margin-left: 8px;
 
   &:hover,
   &.open {
@@ -12,12 +13,12 @@ const ViewsButton = styled(Icon)`
   }
 
   &.active {
-    color: var(--md-sys-color-primary);
+    background-color: var(--md-sys-color-primary);
+    color: var(--md-sys-color-on-primary);
 
     &:hover,
     &.open {
-      background-color: var(--md-sys-color-on-primary);
-      color: var(--md-sys-color-primary);
+      background-color: var(--md-sys-color-primary-hover);
     }
   }
 `;

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

@@ -0,0 +1 @@
+{"version":3,"file":"Views.styled.es.js","sources":["../../../../../src/containers/Views/Views.styled.ts"],"sourcesContent":["import { Icon } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nexport const ViewsButton = styled(Icon)`\n  padding: var(--padding-s);\n  border-radius: var(--border-radius-m);\n  margin: -4px 0;\n  margin-right: -16px;\n  margin-left: 8px;\n\n  &:hover,\n  &.open {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n\n  &.active {\n    background-color: var(--md-sys-color-primary);\n    color: var(--md-sys-color-on-primary);\n\n    &:hover,\n    &.open {\n      background-color: var(--md-sys-color-primary-hover);\n    }\n  }\n`\n\nexport const ViewsModal = styled.div`\n  position: fixed;\n  top: 0;\n  left: 0;\n  padding: var(--padding-m);\n  min-width: 240px;\n  max-width: 800px;\n\n  overflow: hidden;\n\n  z-index: 910;\n\n  background-color: var(--md-sys-color-surface-container-high);\n  border-radius: var(--border-radius-l);\n  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);\n`\n"],"names":[],"mappings":";;AAGa,MAAA,cAAc,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuB/B,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

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

@@ -8,8 +8,9 @@ const portalUtils = require("../utils/portalUtils.cjs.js");
 const Views_styled = require("../Views.styled.cjs.js");
 const clsx = require("clsx");
 const ViewsButton = () => {
-  const { viewType, isMenuOpen, setIsMenuOpen, selectedView } = ViewsContext.useViewsContext();
+  const { viewType, isMenuOpen, setIsMenuOpen, selectedView, isViewWorking, editingViewId } = ViewsContext.useViewsContext();
   const buttonRef = React.useRef(null);
+  if (!viewType) return null;
   const handleButtonClick = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -21,7 +22,15 @@ const ViewsButton = () => {
       icon: "view_quilt",
       ref: buttonRef,
       onClick: handleButtonClick,
-      className: clsx({ active: !!selectedView, open: isMenuOpen })
+      className: clsx({ active: !!editingViewId, open: isMenuOpen }),
+      tabIndex: 0,
+      "data-tooltip": isViewWorking ? "Working view" : "View: " + (selectedView == null ? void 0 : selectedView.label) || "None",
+      "data-tooltip-delay": 0,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          handleButtonClick(e);
+        }
+      }
     }
   );
   const portalContainer = portalUtils.getViewsPortalContainer(viewType);

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

@@ -0,0 +1 @@
+{"version":3,"file":"ViewsButton.cjs.js","sources":["../../../../../../src/containers/Views/ViewsButton/ViewsButton.tsx"],"sourcesContent":["import { FC, useRef } from 'react'\nimport { createPortal } from 'react-dom'\nimport { useViewsContext } from '../context/ViewsContext'\nimport { getViewsPortalContainer } from '../utils/portalUtils'\nimport * as Styled from '../Views.styled'\nimport clsx from 'clsx'\n\nexport const ViewsButton: FC = () => {\n  const { viewType, isMenuOpen, setIsMenuOpen, selectedView, isViewWorking, editingViewId } =\n    useViewsContext()\n\n  const buttonRef = useRef<HTMLButtonElement>(null)\n\n  // views not support for this page\n  if (!viewType) return null\n\n  const handleButtonClick = (\n    e: React.MouseEvent<HTMLSpanElement> | React.KeyboardEvent<HTMLSpanElement>,\n  ) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setIsMenuOpen(!isMenuOpen)\n  }\n\n  const button = (\n    <Styled.ViewsButton\n      icon=\"view_quilt\"\n      ref={buttonRef}\n      onClick={handleButtonClick}\n      className={clsx({ active: !!editingViewId, open: isMenuOpen })}\n      tabIndex={0}\n      data-tooltip={isViewWorking ? 'Working view' : 'View: ' + selectedView?.label || 'None'}\n      data-tooltip-delay={0}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          handleButtonClick(e)\n        }\n      }}\n    />\n  )\n\n  // Try to find the portal container for this viewType\n  const portalContainer = getViewsPortalContainer(viewType)\n\n  if (!portalContainer) return null\n\n  // If we have a portal container, render there. Otherwise render normally\n  return createPortal(button, portalContainer)\n}\n"],"names":["useViewsContext","useRef","jsx","Styled.ViewsButton","getViewsPortalContainer","createPortal"],"mappings":";;;;;;;;;AAOO,MAAM,cAAkB,MAAM;AAC7B,QAAA,EAAE,UAAU,YAAY,eAAe,cAAc,eAAe,kBACxEA,6BAAgB;AAEZ,QAAA,YAAYC,aAA0B,IAAI;AAG5C,MAAA,CAAC,SAAiB,QAAA;AAEhB,QAAA,oBAAoB,CACxB,MACG;AACH,MAAE,eAAe;AACjB,MAAE,gBAAgB;AAClB,kBAAc,CAAC,UAAU;AAAA,EAC3B;AAEA,QAAM,SACJC,2BAAA,kBAAA;AAAA,IAACC,aAAO;AAAA,IAAP;AAAA,MACC,MAAK;AAAA,MACL,KAAK;AAAA,MACL,SAAS;AAAA,MACT,WAAW,KAAK,EAAE,QAAQ,CAAC,CAAC,eAAe,MAAM,YAAY;AAAA,MAC7D,UAAU;AAAA,MACV,gBAAc,gBAAgB,iBAAiB,YAAW,6CAAc,UAAS;AAAA,MACjF,sBAAoB;AAAA,MACpB,WAAW,CAAC,MAAM;AAChB,YAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,4BAAkB,CAAC;AAAA,QAAA;AAAA,MACrB;AAAA,IACF;AAAA,EACF;AAII,QAAA,kBAAkBC,oCAAwB,QAAQ;AAEpD,MAAA,CAAC,gBAAwB,QAAA;AAGtB,SAAAC,SAAA,aAAa,QAAQ,eAAe;AAC7C;;"}

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

@@ -6,8 +6,9 @@ import { getViewsPortalContainer } from "../utils/portalUtils.es.js";
 import { ViewsButton as ViewsButton$1 } from "../Views.styled.es.js";
 import clsx from "clsx";
 const ViewsButton = () => {
-  const { viewType, isMenuOpen, setIsMenuOpen, selectedView } = useViewsContext();
+  const { viewType, isMenuOpen, setIsMenuOpen, selectedView, isViewWorking, editingViewId } = useViewsContext();
   const buttonRef = useRef(null);
+  if (!viewType) return null;
   const handleButtonClick = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -19,7 +20,15 @@ const ViewsButton = () => {
       icon: "view_quilt",
       ref: buttonRef,
       onClick: handleButtonClick,
-      className: clsx({ active: !!selectedView, open: isMenuOpen })
+      className: clsx({ active: !!editingViewId, open: isMenuOpen }),
+      tabIndex: 0,
+      "data-tooltip": isViewWorking ? "Working view" : "View: " + (selectedView == null ? void 0 : selectedView.label) || "None",
+      "data-tooltip-delay": 0,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          handleButtonClick(e);
+        }
+      }
     }
   );
   const portalContainer = getViewsPortalContainer(viewType);

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

@@ -0,0 +1 @@
+{"version":3,"file":"ViewsButton.es.js","sources":["../../../../../../src/containers/Views/ViewsButton/ViewsButton.tsx"],"sourcesContent":["import { FC, useRef } from 'react'\nimport { createPortal } from 'react-dom'\nimport { useViewsContext } from '../context/ViewsContext'\nimport { getViewsPortalContainer } from '../utils/portalUtils'\nimport * as Styled from '../Views.styled'\nimport clsx from 'clsx'\n\nexport const ViewsButton: FC = () => {\n  const { viewType, isMenuOpen, setIsMenuOpen, selectedView, isViewWorking, editingViewId } =\n    useViewsContext()\n\n  const buttonRef = useRef<HTMLButtonElement>(null)\n\n  // views not support for this page\n  if (!viewType) return null\n\n  const handleButtonClick = (\n    e: React.MouseEvent<HTMLSpanElement> | React.KeyboardEvent<HTMLSpanElement>,\n  ) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setIsMenuOpen(!isMenuOpen)\n  }\n\n  const button = (\n    <Styled.ViewsButton\n      icon=\"view_quilt\"\n      ref={buttonRef}\n      onClick={handleButtonClick}\n      className={clsx({ active: !!editingViewId, open: isMenuOpen })}\n      tabIndex={0}\n      data-tooltip={isViewWorking ? 'Working view' : 'View: ' + selectedView?.label || 'None'}\n      data-tooltip-delay={0}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          handleButtonClick(e)\n        }\n      }}\n    />\n  )\n\n  // Try to find the portal container for this viewType\n  const portalContainer = getViewsPortalContainer(viewType)\n\n  if (!portalContainer) return null\n\n  // If we have a portal container, render there. Otherwise render normally\n  return createPortal(button, portalContainer)\n}\n"],"names":["jsx","Styled.ViewsButton"],"mappings":";;;;;;;AAOO,MAAM,cAAkB,MAAM;AAC7B,QAAA,EAAE,UAAU,YAAY,eAAe,cAAc,eAAe,kBACxE,gBAAgB;AAEZ,QAAA,YAAY,OAA0B,IAAI;AAG5C,MAAA,CAAC,SAAiB,QAAA;AAEhB,QAAA,oBAAoB,CACxB,MACG;AACH,MAAE,eAAe;AACjB,MAAE,gBAAgB;AAClB,kBAAc,CAAC,UAAU;AAAA,EAC3B;AAEA,QAAM,SACJA,kCAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,KAAK;AAAA,MACL,SAAS;AAAA,MACT,WAAW,KAAK,EAAE,QAAQ,CAAC,CAAC,eAAe,MAAM,YAAY;AAAA,MAC7D,UAAU;AAAA,MACV,gBAAc,gBAAgB,iBAAiB,YAAW,6CAAc,UAAS;AAAA,MACjF,sBAAoB;AAAA,MACpB,WAAW,CAAC,MAAM;AAChB,YAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,4BAAkB,CAAC;AAAA,QAAA;AAAA,MACrB;AAAA,IACF;AAAA,EACF;AAII,QAAA,kBAAkB,wBAAwB,QAAQ;AAEpD,MAAA,CAAC,gBAAwB,QAAA;AAGtB,SAAA,aAAa,QAAQ,eAAe;AAC7C;"}

package/dist/shared/src/containers/Views/ViewsDialogContainer/ViewFormDialogFallback.cjs.js

@@ -0,0 +1,4 @@
+"use strict";
+const ViewFormDialogFallback = () => null;
+module.exports = ViewFormDialogFallback;
+//# sourceMappingURL=ViewFormDialogFallback.cjs.js.map

package/dist/shared/src/containers/Views/ViewsDialogContainer/ViewFormDialogFallback.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewFormDialogFallback.cjs.js","sources":["../../../../../../src/containers/Views/ViewsDialogContainer/ViewFormDialogFallback.tsx"],"sourcesContent":["import { FC } from 'react'\nimport { ViewFormData, ViewsContextValue, ViewSettings, ViewType } from '..'\nimport { UserModel } from '@shared/api'\n\nexport interface ViewFormDialogProps {\n  editingView: Partial<ViewFormData> & { viewId?: string }\n  setEditingView: (viewId: string | null) => void\n  viewType: ViewType\n  viewSettings?: ViewSettings\n  currentUser?: UserModel\n  projectName?: string\n  setSelected: (viewId: string) => void\n  onCreateView: ViewsContextValue['onCreateView']\n  onUpdateView: ViewsContextValue['onUpdateView']\n  onDeleteView: ViewsContextValue['onDeleteView']\n  api: ViewsContextValue['api']\n  dispatch: any\n  pt?: {\n    dialog?: Partial<React.HTMLAttributes<HTMLDivElement>>\n  }\n}\n\nconst ViewFormDialogFallback: FC<ViewFormDialogProps> = () => null\n\nexport default ViewFormDialogFallback\n"],"names":[],"mappings":";AAsBA,MAAM,yBAAkD,MAAM;;"}

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

@@ -0,0 +1,5 @@
+const ViewFormDialogFallback = () => null;
+export {
+  ViewFormDialogFallback as default
+};
+//# sourceMappingURL=ViewFormDialogFallback.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ViewFormDialogFallback.es.js","sources":["../../../../../../src/containers/Views/ViewsDialogContainer/ViewFormDialogFallback.tsx"],"sourcesContent":["import { FC } from 'react'\nimport { ViewFormData, ViewsContextValue, ViewSettings, ViewType } from '..'\nimport { UserModel } from '@shared/api'\n\nexport interface ViewFormDialogProps {\n  editingView: Partial<ViewFormData> & { viewId?: string }\n  setEditingView: (viewId: string | null) => void\n  viewType: ViewType\n  viewSettings?: ViewSettings\n  currentUser?: UserModel\n  projectName?: string\n  setSelected: (viewId: string) => void\n  onCreateView: ViewsContextValue['onCreateView']\n  onUpdateView: ViewsContextValue['onUpdateView']\n  onDeleteView: ViewsContextValue['onDeleteView']\n  api: ViewsContextValue['api']\n  dispatch: any\n  pt?: {\n    dialog?: Partial<React.HTMLAttributes<HTMLDivElement>>\n  }\n}\n\nconst ViewFormDialogFallback: FC<ViewFormDialogProps> = () => null\n\nexport default ViewFormDialogFallback\n"],"names":[],"mappings":"AAsBA,MAAM,yBAAkD,MAAM;"}