@ynput/ayon-frontend-shared 0.2.21 → 0.2.23

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

@@ -4,6 +4,10 @@ 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 platform = require("../../../util/platform.cjs.js");
+require("lodash");
+require("react-toastify");
+require("../../../util/pubsub.cjs.js");
 const ViewItem = React.forwardRef(
   ({
     label,
@@ -15,12 +19,24 @@ const ViewItem = React.forwardRef(
     highlighted,
     onEdit,
     onSave,
+    onResetView,
     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 }),
+      onResetView && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+        ViewItem_styled.ActionButton,
+        {
+          icon: "restart_alt",
+          variant: "text",
+          className: "reset",
+          onClick: onResetView,
+          "data-tooltip": "Reset this view to default",
+          "data-shortcut": platform.getPlatformShortcutKey("0", [platform.KeyMode.Shift, platform.KeyMode.Ctrl])
+        }
+      ),
       isEditable && isSaveable && !isSelected && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
         ViewItem_styled.ActionButton,
         {
@@ -31,7 +47,7 @@ const ViewItem = React.forwardRef(
           "data-tooltip": "Save view settings from current view"
         }
       ),
-      isEditable && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+      isEditable && onEdit && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
         ViewItem_styled.ActionButton,
         {
           variant: "text",

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

@@ -1 +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;;"}
+{"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'\nimport { getPlatformShortcutKey, KeyMode } from '@shared/util'\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  onResetView?: (e: React.MouseEvent<HTMLButtonElement>) => void // resets working 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      onResetView,\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        {/* Reset button (e.g., for working view) - shows if handler is provided */}\n        {onResetView && (\n          <Styled.ActionButton\n            icon=\"restart_alt\"\n            variant=\"text\"\n            className=\"reset\"\n            onClick={onResetView}\n            data-tooltip=\"Reset this view to default\"\n            data-shortcut={getPlatformShortcutKey('0', [KeyMode.Shift, KeyMode.Ctrl])}\n          />\n        )}\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 && onEdit && (\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","getPlatformShortcutKey","KeyMode"],"mappings":";;;;;;;;;;AAwBO,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;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,MAE9B,eACCA,2BAAA,kBAAA;AAAA,QAACC,gBAAO;AAAA,QAAP;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,WAAU;AAAA,UACV,SAAS;AAAA,UACT,gBAAa;AAAA,UACb,iBAAeC,gCAAuB,KAAK,CAACC,iBAAQ,OAAOA,SAAA,QAAQ,IAAI,CAAC;AAAA,QAAA;AAAA,MAC1E;AAAA,MAED,cAAc,cAAc,CAAC,cAC5BH,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,cAAc,UACbD,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

@@ -2,6 +2,10 @@ import { j as jsxRuntimeExports } from "../../../../../_virtual/jsx-runtime.es.j
 import { forwardRef } from "react";
 import { ViewItem as ViewItem$1, ActionButton } from "./ViewItem.styled.es.js";
 import clsx from "clsx";
+import { getPlatformShortcutKey, KeyMode } from "../../../util/platform.es.js";
+import "lodash";
+import "react-toastify";
+import "../../../util/pubsub.es.js";
 const ViewItem = forwardRef(
   ({
     label,
@@ -13,12 +17,24 @@ const ViewItem = forwardRef(
     highlighted,
     onEdit,
     onSave,
+    onResetView,
     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 }),
+      onResetView && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ActionButton,
+        {
+          icon: "restart_alt",
+          variant: "text",
+          className: "reset",
+          onClick: onResetView,
+          "data-tooltip": "Reset this view to default",
+          "data-shortcut": getPlatformShortcutKey("0", [KeyMode.Shift, KeyMode.Ctrl])
+        }
+      ),
       isEditable && isSaveable && !isSelected && /* @__PURE__ */ jsxRuntimeExports.jsx(
         ActionButton,
         {
@@ -29,7 +45,7 @@ const ViewItem = forwardRef(
           "data-tooltip": "Save view settings from current view"
         }
       ),
-      isEditable && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      isEditable && onEdit && /* @__PURE__ */ jsxRuntimeExports.jsx(
         ActionButton,
         {
           variant: "text",

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

@@ -1 +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;"}
+{"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'\nimport { getPlatformShortcutKey, KeyMode } from '@shared/util'\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  onResetView?: (e: React.MouseEvent<HTMLButtonElement>) => void // resets working 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      onResetView,\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        {/* Reset button (e.g., for working view) - shows if handler is provided */}\n        {onResetView && (\n          <Styled.ActionButton\n            icon=\"restart_alt\"\n            variant=\"text\"\n            className=\"reset\"\n            onClick={onResetView}\n            data-tooltip=\"Reset this view to default\"\n            data-shortcut={getPlatformShortcutKey('0', [KeyMode.Shift, KeyMode.Ctrl])}\n          />\n        )}\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 && onEdit && (\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":";;;;;;;;AAwBO,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;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,MAE9B,eACCA,kCAAA;AAAA,QAACC;AAAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,WAAU;AAAA,UACV,SAAS;AAAA,UACT,gBAAa;AAAA,UACb,iBAAe,uBAAuB,KAAK,CAAC,QAAQ,OAAO,QAAQ,IAAI,CAAC;AAAA,QAAA;AAAA,MAC1E;AAAA,MAED,cAAc,cAAc,CAAC,cAC5BD,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,cAAc,UACbD,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/containers/Views/ViewItem/ViewItem.styled.cjs.js

@@ -43,11 +43,13 @@ const ViewItem = styled.li`
   }
 
   /* hide save button by default */
-  .save {
+  .save,
+  .reset {
     display: none;
   }
   &:hover {
-    .save {
+    .save,
+    .reset {
       display: flex;
     }
   }

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

@@ -1 +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;;;"}
+{"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  .reset {\n    display: none;\n  }\n  &:hover {\n    .save,\n    .reset {\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;AAAA;AAAA;AAqDlB,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/containers/Views/ViewItem/ViewItem.styled.es.js

@@ -41,11 +41,13 @@ const ViewItem = styled.li`
   }
 
   /* hide save button by default */
-  .save {
+  .save,
+  .reset {
     display: none;
   }
   &:hover {
-    .save {
+    .save,
+    .reset {
       display: flex;
     }
   }

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

@@ -1 +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;"}
+{"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  .reset {\n    display: none;\n  }\n  &:hover {\n    .save,\n    .reset {\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;AAAA;AAAA;AAqDlB,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/containers/Views/ViewsDialogContainer/ViewFormDialogFallback.cjs.js.map

@@ -1 +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;;"}
+{"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 { ShareOption, 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  // data\n  shareOptions?: ShareOption[]\n  // data mutations\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":";AAyBA,MAAM,yBAAkD,MAAM;;"}

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

@@ -1 +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;"}
+{"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 { ShareOption, 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  // data\n  shareOptions?: ShareOption[]\n  // data mutations\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":"AAyBA,MAAM,yBAAkD,MAAM;"}

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

@@ -53,6 +53,7 @@ require("../../../api/queries/addons/updateAddons.cjs.js");
 require("../../../api/queries/attributes/getAttributes.cjs.js");
 require("../../../api/queries/attributes/updateAttributes.cjs.js");
 require("../../../api/queries/authentication/getAuthentication.cjs.js");
+require("../../../api/queries/cloud/cloud.cjs.js");
 require("../../../api/queries/entities/getEntity.cjs.js");
 require("../../../api/queries/entities/getEntityPanel.cjs.js");
 require("../../../api/queries/entities/updateEntity.cjs.js");
@@ -61,24 +62,24 @@ require("../../../api/queries/entityLists/updateLists.cjs.js");
 require("../../../api/queries/entityLists/getListsAttributes.cjs.js");
 require("../../../api/queries/entityLists/updateListsAttributes.cjs.js");
 require("../../../api/queries/folders/getFolders.cjs.js");
+require("../../../api/queries/grouping/getGrouping.cjs.js");
 require("../../../api/queries/overview/getOverview.cjs.js");
 require("../../../api/queries/overview/updateOverview.cjs.js");
+require("../../../api/queries/permissions/getPermissions.cjs.js");
+require("../../../api/queries/products/createProduct.cjs.js");
 require("../../../api/queries/project/getProject.cjs.js");
 require("../../../api/queries/project/updateProject.cjs.js");
 require("../../../api/queries/review/getReview.cjs.js");
 require("../../../api/queries/review/updateReview.cjs.js");
+require("../../../api/queries/share/share.cjs.js");
 require("../../../api/queries/system/getSystem.cjs.js");
 require("../../../api/queries/userDashboard/getUserDashboard.cjs.js");
 require("../../../api/queries/users/getUsers.cjs.js");
 require("../../../api/queries/users/updateUsers.cjs.js");
-require("../../../api/queries/watchers/getWatchers.cjs.js");
-require("../../../api/queries/permissions/getPermissions.cjs.js");
-require("../../../api/queries/grouping/getGrouping.cjs.js");
 require("../../../api/queries/versions/updateVersions.cjs.js");
-require("../../../api/queries/products/createProduct.cjs.js");
-require("../../../api/queries/cloud/cloud.cjs.js");
 require("../../../api/queries/views/getViews.cjs.js");
 require("../../../api/queries/views/updateViews.cjs.js");
+require("../../../api/queries/watchers/getWatchers.cjs.js");
 require("lodash");
 require("react-toastify");
 require("../../../context/RemoteModulesContext.cjs.js");
@@ -90,7 +91,7 @@ require("react-dom");
 require("../../../context/pip/PiPWrapper.cjs.js");
 require("../../../context/AddonProjectContext.cjs.js");
 require("../../../context/AddonContext.cjs.js");
-require("../../../context/PowerpackContext.cjs.js");
+const PowerpackContext = require("../../../context/PowerpackContext.cjs.js");
 require("react-redux");
 require("custom-protocol-check");
 const ViewFormDialogFallback = require("./ViewFormDialogFallback.cjs.js");
@@ -105,6 +106,7 @@ const ViewsDialogContainer = ({}) => {
     projectName,
     currentUser,
     viewSettings,
+    shareOptions,
     setSelectedView,
     onCreateView,
     onUpdateView,
@@ -112,12 +114,14 @@ const ViewsDialogContainer = ({}) => {
     api,
     dispatch
   } = ViewsContext.useViewsContext();
+  const { powerLicense } = PowerpackContext.usePowerpack();
   const [ViewFormDialog, { isLoading: isLoadingQueries, outdated }] = useLoadModule.useLoadModule({
     addon: "powerpack",
     remote: "views",
     module: "ViewFormDialog",
     fallback: ViewFormDialogFallback,
-    minVersion: "1.1.1-views"
+    minVersion: "1.1.1-views",
+    skip: !viewType || !powerLicense
   });
   if (!viewType || !editingView) return null;
   if (editingView && outdated) {
@@ -134,6 +138,7 @@ const ViewsDialogContainer = ({}) => {
       setEditingView,
       viewType,
       projectName,
+      shareOptions,
       setSelected: setSelectedView,
       onCreateView,
       onUpdateView,

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

@@ -1 +1 @@
-{"version":3,"file":"ViewsDialogContainer.cjs.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'\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    setSelectedView,\n    onCreateView,\n    onUpdateView,\n    onDeleteView,\n    api,\n    dispatch,\n  } = useViewsContext()\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  })\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      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":["useViewsContext","useLoadModule","jsx","Dialog"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMO,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,MACEA,6BAAgB;AAEd,QAAA,CAAC,gBAAgB,EAAE,WAAW,kBAAkB,SAAS,CAAC,IAAIC,4BAAc;AAAA,IAChF,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,YAAY;AAAA,EAAA,CACb;AAED,MAAI,CAAC,YAAY,CAAC,YAAoB,QAAA;AAEtC,MAAI,eAAe,UAAU;AAC3B,WACGC,2BAAAA,kBAAAA,IAAAC,oBAAAA,QAAA,EAAO,QAAM,MAAC,QAAO,6BAA4B,SAAS,MAAM,eAAe,IAAI,GAClF,UAACD,iDAAA,KAAA,EAAE,uGAEH,CAAA,GACF;AAAA,EAAA;AAKF,SAAAA,2BAAA,kBAAA;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;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;;;"}
+{"version":3,"file":"ViewsDialogContainer.cjs.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":["useViewsContext","usePowerpack","useLoadModule","jsx","Dialog"],"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,MACEA,6BAAgB;AAEd,QAAA,EAAE,aAAa,IAAIC,8BAAa;AAEhC,QAAA,CAAC,gBAAgB,EAAE,WAAW,kBAAkB,SAAS,CAAC,IAAIC,4BAAc;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,WACGC,2BAAAA,kBAAAA,IAAAC,oBAAAA,QAAA,EAAO,QAAM,MAAC,QAAO,6BAA4B,SAAS,MAAM,eAAe,IAAI,GAClF,UAACD,iDAAA,KAAA,EAAE,uGAEH,CAAA,GACF;AAAA,EAAA;AAKF,SAAAA,2BAAA,kBAAA;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/containers/Views/ViewsDialogContainer/ViewsDialogContainer.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,24 +60,24 @@ 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 "../../../api/queries/views/getViews.es.js";
 import "../../../api/queries/views/updateViews.es.js";
+import "../../../api/queries/watchers/getWatchers.es.js";
 import "lodash";
 import "react-toastify";
 import "../../../context/RemoteModulesContext.es.js";
@@ -88,7 +89,7 @@ import "react-dom";
 import "../../../context/pip/PiPWrapper.es.js";
 import "../../../context/AddonProjectContext.es.js";
 import "../../../context/AddonContext.es.js";
-import "../../../context/PowerpackContext.es.js";
+import { usePowerpack } from "../../../context/PowerpackContext.es.js";
 import "react-redux";
 import "custom-protocol-check";
 import ViewFormDialogFallback from "./ViewFormDialogFallback.es.js";
@@ -103,6 +104,7 @@ const ViewsDialogContainer = ({}) => {
     projectName,
     currentUser,
     viewSettings,
+    shareOptions,
     setSelectedView,
     onCreateView,
     onUpdateView,
@@ -110,12 +112,14 @@ const ViewsDialogContainer = ({}) => {
     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"
+    minVersion: "1.1.1-views",
+    skip: !viewType || !powerLicense
   });
   if (!viewType || !editingView) return null;
   if (editingView && outdated) {
@@ -132,6 +136,7 @@ const ViewsDialogContainer = ({}) => {
       setEditingView,
       viewType,
       projectName,
+      shareOptions,
       setSelected: setSelectedView,
       onCreateView,
       onUpdateView,

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

@@ -1 +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'\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    setSelectedView,\n    onCreateView,\n    onUpdateView,\n    onDeleteView,\n    api,\n    dispatch,\n  } = useViewsContext()\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  })\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      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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMO,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,MACE,gBAAgB;AAEd,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,EAAA,CACb;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;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;"}
+{"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/containers/Views/ViewsMenu/SectionHeader.cjs.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../../../_virtual/jsx-runtime.cjs.js");
+const React = require("react");
+const ayonReactComponents = require("@ynput/ayon-react-components");
+const SectionHeader_styled = require("./SectionHeader.styled.cjs.js");
+const SectionHeader = React.forwardRef(
+  ({ title, collapsed, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(SectionHeader_styled.SectionHeader, { ...props, ref, children: [
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("span", { children: title }),
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("span", { className: "spacer" }),
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ayonReactComponents.Icon, { className: "icon", icon: collapsed ? "expand_more" : "expand_less" })
+    ] });
+  }
+);
+exports.SectionHeader = SectionHeader;
+//# sourceMappingURL=SectionHeader.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SectionHeader.cjs.js","sources":["../../../../../../src/containers/Views/ViewsMenu/SectionHeader.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { Icon } from '@ynput/ayon-react-components'\nimport * as S from './SectionHeader.styled'\n\nexport interface SectionHeaderProps extends React.LiHTMLAttributes<HTMLLIElement> {\n  id: string\n  title: string\n  collapsed?: boolean\n}\n\nexport const SectionHeader = forwardRef<HTMLLIElement, SectionHeaderProps>(\n  ({ title, collapsed, ...props }, ref) => {\n    return (\n      <S.SectionHeader {...props} ref={ref}>\n        <span>{title}</span>\n        <span className=\"spacer\" />\n        <Icon className=\"icon\" icon={collapsed ? 'expand_more' : 'expand_less'} />\n      </S.SectionHeader>\n    )\n  },\n)\n"],"names":["forwardRef","S.SectionHeader","jsx","Icon"],"mappings":";;;;;;AAUO,MAAM,gBAAgBA,MAAA;AAAA,EAC3B,CAAC,EAAE,OAAO,WAAW,GAAG,MAAA,GAAS,QAAQ;AACvC,6DACGC,qBAAAA,eAAA,EAAiB,GAAG,OAAO,KAC1B,UAAA;AAAA,MAAAC,2BAAAA,kBAAAA,IAAC,UAAM,UAAM,MAAA,CAAA;AAAA,MACbA,2BAAAA,kBAAAA,IAAC,QAAK,EAAA,WAAU,SAAS,CAAA;AAAA,uDACxBC,oBAAAA,MAAK,EAAA,WAAU,QAAO,MAAM,YAAY,gBAAgB,cAAe,CAAA;AAAA,IAAA,GAC1E;AAAA,EAAA;AAGN;;"}

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

@@ -0,0 +1,17 @@
+import { j as jsxRuntimeExports } from "../../../../../_virtual/jsx-runtime.es.js";
+import { forwardRef } from "react";
+import { Icon } from "@ynput/ayon-react-components";
+import { SectionHeader as SectionHeader$1 } from "./SectionHeader.styled.es.js";
+const SectionHeader = forwardRef(
+  ({ title, collapsed, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionHeader$1, { ...props, ref, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: title }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "spacer" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { className: "icon", icon: collapsed ? "expand_more" : "expand_less" })
+    ] });
+  }
+);
+export {
+  SectionHeader
+};
+//# sourceMappingURL=SectionHeader.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SectionHeader.es.js","sources":["../../../../../../src/containers/Views/ViewsMenu/SectionHeader.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { Icon } from '@ynput/ayon-react-components'\nimport * as S from './SectionHeader.styled'\n\nexport interface SectionHeaderProps extends React.LiHTMLAttributes<HTMLLIElement> {\n  id: string\n  title: string\n  collapsed?: boolean\n}\n\nexport const SectionHeader = forwardRef<HTMLLIElement, SectionHeaderProps>(\n  ({ title, collapsed, ...props }, ref) => {\n    return (\n      <S.SectionHeader {...props} ref={ref}>\n        <span>{title}</span>\n        <span className=\"spacer\" />\n        <Icon className=\"icon\" icon={collapsed ? 'expand_more' : 'expand_less'} />\n      </S.SectionHeader>\n    )\n  },\n)\n"],"names":["S.SectionHeader","jsx"],"mappings":";;;;AAUO,MAAM,gBAAgB;AAAA,EAC3B,CAAC,EAAE,OAAO,WAAW,GAAG,MAAA,GAAS,QAAQ;AACvC,kDACGA,iBAAA,EAAiB,GAAG,OAAO,KAC1B,UAAA;AAAA,MAAAC,kCAAAA,IAAC,UAAM,UAAM,MAAA,CAAA;AAAA,MACbA,kCAAAA,IAAC,QAAK,EAAA,WAAU,SAAS,CAAA;AAAA,4CACxB,MAAK,EAAA,WAAU,QAAO,MAAM,YAAY,gBAAgB,cAAe,CAAA;AAAA,IAAA,GAC1E;AAAA,EAAA;AAGN;"}

package/dist/shared/src/containers/Views/ViewsMenu/SectionHeader.styled.cjs.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const ayonReactComponents = require("@ynput/ayon-react-components");
+const SectionHeader = styled.li`
+  ${ayonReactComponents.theme.labelSmall}
+  color: var(--md-sys-color-outline);
+  user-select: none;
+  border-radius: var(--border-radius-m);
+  height: 28px;
+  padding: 0 8px;
+
+  display: flex;
+  align-items: center;
+  gap: var(--base-gap-small);
+
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--md-sys-color-surface-container-high-hover);
+  }
+
+  .spacer {
+    flex: 1;
+  }
+  .icon {
+    font-size: 18px;
+    color: var(--md-sys-color-outline);
+    display: none;
+  }
+
+  &:hover .icon {
+    display: inline-flex;
+  }
+`;
+exports.SectionHeader = SectionHeader;
+//# sourceMappingURL=SectionHeader.styled.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SectionHeader.styled.cjs.js","sources":["../../../../../../src/containers/Views/ViewsMenu/SectionHeader.styled.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { theme } from '@ynput/ayon-react-components'\n\nexport const SectionHeader = styled.li`\n  ${theme.labelSmall}\n  color: var(--md-sys-color-outline);\n  user-select: none;\n  border-radius: var(--border-radius-m);\n  height: 28px;\n  padding: 0 8px;\n\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n\n  cursor: pointer;\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n\n  .spacer {\n    flex: 1;\n  }\n  .icon {\n    font-size: 18px;\n    color: var(--md-sys-color-outline);\n    display: none;\n  }\n\n  &:hover .icon {\n    display: inline-flex;\n  }\n`\n"],"names":["theme"],"mappings":";;;;AAGO,MAAM,gBAAgB,OAAO;AAAA,IAChCA,0BAAM,UAAU;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;;"}

package/dist/shared/src/containers/Views/ViewsMenu/SectionHeader.styled.es.js

@@ -0,0 +1,37 @@
+import styled from "styled-components";
+import { theme } from "@ynput/ayon-react-components";
+const SectionHeader = styled.li`
+  ${theme.labelSmall}
+  color: var(--md-sys-color-outline);
+  user-select: none;
+  border-radius: var(--border-radius-m);
+  height: 28px;
+  padding: 0 8px;
+
+  display: flex;
+  align-items: center;
+  gap: var(--base-gap-small);
+
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--md-sys-color-surface-container-high-hover);
+  }
+
+  .spacer {
+    flex: 1;
+  }
+  .icon {
+    font-size: 18px;
+    color: var(--md-sys-color-outline);
+    display: none;
+  }
+
+  &:hover .icon {
+    display: inline-flex;
+  }
+`;
+export {
+  SectionHeader
+};
+//# sourceMappingURL=SectionHeader.styled.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SectionHeader.styled.es.js","sources":["../../../../../../src/containers/Views/ViewsMenu/SectionHeader.styled.ts"],"sourcesContent":["import styled from 'styled-components'\nimport { theme } from '@ynput/ayon-react-components'\n\nexport const SectionHeader = styled.li`\n  ${theme.labelSmall}\n  color: var(--md-sys-color-outline);\n  user-select: none;\n  border-radius: var(--border-radius-m);\n  height: 28px;\n  padding: 0 8px;\n\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n\n  cursor: pointer;\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n\n  .spacer {\n    flex: 1;\n  }\n  .icon {\n    font-size: 18px;\n    color: var(--md-sys-color-outline);\n    display: none;\n  }\n\n  &:hover .icon {\n    display: inline-flex;\n  }\n`\n"],"names":[],"mappings":";;AAGO,MAAM,gBAAgB,OAAO;AAAA,IAChC,MAAM,UAAU;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;"}

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

@@ -4,14 +4,25 @@ const jsxRuntime = require("../../../../../_virtual/jsx-runtime.cjs.js");
 const React = require("react");
 const ViewItem = require("../ViewItem/ViewItem.cjs.js");
 const ViewsMenu_styled = require("./ViewsMenu.styled.cjs.js");
+const SectionHeader = require("./SectionHeader.cjs.js");
 const VIEW_DIVIDER = "_divider_";
+const isSectionHeader = (item) => typeof item === "object" && item !== null && "type" in item && item.type === "section";
 const ViewsMenu = React.forwardRef(
   ({ items, selected, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ViewsMenu_styled.Scrollable, { children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ViewsMenu_styled.ViewsMenu, { ...props, ref, children: items.map((item, index) => {
       if (item === "_divider_") {
         return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ViewsMenu_styled.ViewsMenuDivider, {}, index);
-      } else if (typeof item === "string") {
-        return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ViewsMenu_styled.ViewsMenuTitle, { children: item }, index);
+      } else if (isSectionHeader(item)) {
+        return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+          SectionHeader.SectionHeader,
+          {
+            id: item.id,
+            title: item.title,
+            collapsed: item.collapsed,
+            onClick: item.onToggle
+          },
+          item.id
+        );
       } else {
         return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
           ViewItem.ViewItem,

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

@@ -1 +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;;;"}
+{"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'\nimport { SectionHeader } from './SectionHeader'\n\nexport const VIEW_DIVIDER = '_divider_' as const // Represents a divider\nexport type ViewSectionHeader = {\n  type: 'section'\n  id: string\n  title: string\n  collapsed?: boolean\n  onToggle?: () => void\n}\nexport type ViewMenuItem = ViewItem | typeof VIEW_DIVIDER | ViewSectionHeader\n\nexport interface ViewsMenuProps extends React.HTMLAttributes<HTMLUListElement> {\n  items: ViewMenuItem[] // Array of ViewMenuItem or string\n  selected: string\n}\n\nconst isSectionHeader = (item: ViewMenuItem): item is ViewSectionHeader =>\n  typeof item === 'object' && item !== null && 'type' in item && (item as any).type === 'section'\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 (isSectionHeader(item)) {\n              return (\n                <SectionHeader\n                  key={item.id}\n                  id={item.id}\n                  title={item.title}\n                  collapsed={item.collapsed}\n                  onClick={item.onToggle}\n                />\n              )\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","SectionHeader","ViewItem"],"mappings":";;;;;;;AAKO,MAAM,eAAe;AAe5B,MAAM,kBAAkB,CAAC,SACvB,OAAO,SAAS,YAAY,SAAS,QAAQ,UAAU,QAAS,KAAa,SAAS;AAEjF,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,gBAAgB,IAAI,GAAG;AAE9B,eAAAH,2BAAA,kBAAA;AAAA,UAACI,cAAA;AAAA,UAAA;AAAA,YAEC,IAAI,KAAK;AAAA,YACT,OAAO,KAAK;AAAA,YACZ,WAAW,KAAK;AAAA,YAChB,SAAS,KAAK;AAAA,UAAA;AAAA,UAJT,KAAK;AAAA,QAKZ;AAAA,MAAA,OAEG;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/containers/Views/ViewsMenu/ViewsMenu.es.js

@@ -1,15 +1,26 @@
 import { j as jsxRuntimeExports } from "../../../../../_virtual/jsx-runtime.es.js";
 import { forwardRef } from "react";
 import { ViewItem } from "../ViewItem/ViewItem.es.js";
-import { Scrollable, ViewsMenu as ViewsMenu$1, ViewsMenuDivider, ViewsMenuTitle } from "./ViewsMenu.styled.es.js";
+import { Scrollable, ViewsMenu as ViewsMenu$1, ViewsMenuDivider } from "./ViewsMenu.styled.es.js";
+import { SectionHeader } from "./SectionHeader.es.js";
 const VIEW_DIVIDER = "_divider_";
+const isSectionHeader = (item) => typeof item === "object" && item !== null && "type" in item && item.type === "section";
 const ViewsMenu = forwardRef(
   ({ items, selected, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(Scrollable, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(ViewsMenu$1, { ...props, ref, children: items.map((item, index) => {
       if (item === "_divider_") {
         return /* @__PURE__ */ jsxRuntimeExports.jsx(ViewsMenuDivider, {}, index);
-      } else if (typeof item === "string") {
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(ViewsMenuTitle, { children: item }, index);
+      } else if (isSectionHeader(item)) {
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(
+          SectionHeader,
+          {
+            id: item.id,
+            title: item.title,
+            collapsed: item.collapsed,
+            onClick: item.onToggle
+          },
+          item.id
+        );
       } else {
         return /* @__PURE__ */ jsxRuntimeExports.jsx(
           ViewItem,