@ynput/ayon-frontend-shared 0.2.3 → 0.2.4

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

@@ -51,6 +51,10 @@ import "../../api/queries/authentication/getAuthentication.es.js";
 import "../../api/queries/entities/getEntity.es.js";
 import "../../api/queries/entities/getEntityPanel.es.js";
 import "../../api/queries/entities/updateEntity.es.js";
+import "../../api/queries/entityLists/getLists.es.js";
+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/overview/getOverview.es.js";
 import "../../api/queries/overview/updateOverview.es.js";
@@ -68,9 +72,10 @@ import ActionIcon from "./ActionIcon.es.js";
 import "../../context/RemoteModulesContext.es.js";
 import "../../../../_virtual/runtime.es.js";
 import "../../../../_virtual/semver.es.js";
-import "../../../../_virtual/lodash.es.js";
+import "lodash";
 import "../../context/DetailsPanelContext.es.js";
 import "../../context/ThumbnailUploaderContext.es.js";
+import "../../context/SettingsPanelContext.es.js";
 import "../../context/pip/PiPProvider.es.js";
 import "react-dom";
 import "../../context/pip/PiPWrapper.es.js";

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

@@ -1 +1 @@
-{"version":3,"file":"Actions.es.js","sources":["../../../../../src/containers/Actions/Actions.tsx"],"sourcesContent":["import * as Styled from './Actions.styled'\nimport { MouseEvent, useState } from 'react'\nimport clsx from 'clsx'\nimport { toast } from 'react-toastify'\nimport { useMemo, useEffect } from 'react'\nimport { ActionContext, useExecuteActionMutation, useGetActionsFromContextQuery } from '@shared/api'\nimport { ActionsDropdown } from './ActionsDropdown'\nimport ActionIcon from './ActionIcon'\nimport { useActionTriggers } from '@shared/hooks'\nimport { ActionConfigDialog } from './ActionConfigDialog'\nimport { InteractiveActionDialog, InteractiveForm } from './InteractiveActionDialog'\n\nconst placeholder = {\n  identifier: 'placeholder',\n  label: 'Featured action slot',\n  isPlaceholder: true,\n  icon: { type: 'material-symbols', name: 'sync' },\n  groupLabel: '',\n}\n\ntype ActionsProps = {\n  entities: { id: string; projectName: string; entitySubType?: string }[]\n  entityType: ActionContext['entityType']\n  entitySubTypes?: string[]\n  isLoadingEntity: boolean\n}\n\nexport const Actions = ({\n  entities,\n  entityType,\n  entitySubTypes,\n  isLoadingEntity,\n}: ActionsProps) => {\n  // special triggers the actions can make to perform stuff on the client\n  const { handleActionPayload } = useActionTriggers()\n  const [actionBeingConfigured, setActionBeingConfigured] = useState<any>(null)\n  const [interactiveForm, setInteractiveForm] = useState<any>(null)\n\n  const context: ActionContext | null = useMemo(() => {\n    if (!entities.length) return null\n    if (!entities[0].projectName) return null\n\n    // get a list of unique entity subtypes from loaded data\n    const entitySubtypesLoaded = entities\n      .filter((entity) => entity.entitySubType)\n      .map((entity) => entity.entitySubType as string)\n      .filter((value, index, self) => self.indexOf(value) === index && value)\n\n    // try and use the passed in entitySubTypes, if not use the loaded ones\n    const entitySubTypesToUse = entitySubTypes?.length ? entitySubTypes : entitySubtypesLoaded\n\n    // all types except version/representation should have subtypes\n    if (\n      !entitySubTypesToUse?.length &&\n      entityType !== 'version' &&\n      entityType !== 'representation'\n    ) {\n      console.warn('No entity subtypes found')\n      return null\n    }\n\n    return {\n      projectName: entities[0].projectName,\n      entityType: entityType,\n      entityIds: entities.map((entity) => entity.id),\n      entitySubtypes: entitySubTypesToUse,\n    }\n  }, [entities, entityType])\n\n  useEffect(() => {\n    setInteractiveForm(null)\n  }, [context])\n\n  const { data, isFetching: isFetchingActions } = useGetActionsFromContextQuery(\n    { mode: 'simple', actionContext: context as ActionContext },\n    { skip: !context },\n  )\n\n  const actions = data?.actions || []\n\n  const categoryOrder = ['application', 'admin', 'workflow']\n  // group actions by category\n  // sort by hardcoded category, this will changing the future\n  const groupedActions = useMemo(() => {\n    // Step 1: Group actions by category\n    const grouped = actions.reduce((acc: { [key: string]: any[] }, action) => {\n      const category = action.category || 'uncategorized'\n      if (!acc[category]) {\n        acc[category] = []\n      }\n      acc[category].push(action)\n      return acc\n    }, {})\n\n    // Step 5: Return the ordered groups\n    return grouped\n  }, [actions])\n\n  // get categories that don't have a specific order (not in categoryOrder)\n  // then sort them alphabetically\n  const unorderedCategories = useMemo(\n    () => [\n      ...new Set(\n        Object.keys(groupedActions)\n          .filter((category) => !categoryOrder.includes(category))\n          .sort((a, b) => a.localeCompare(b)),\n      ),\n    ],\n    [groupedActions],\n  )\n\n  const categories = [...categoryOrder, ...unorderedCategories]\n\n  // create the options for the dropdown, each category is separated by a divider and a title\n  // for the divider we will use a custom dropdown item template\n  const dropdownOptions = useMemo(() => {\n    const options = []\n\n    categories.forEach((category) => {\n      if (!groupedActions[category] || !groupedActions[category].length) return\n\n      options.push({\n        label: category,\n        header: true,\n        value: category,\n        disabled: true,\n      })\n\n      const groupOptions = groupedActions[category].map((action) => ({\n        value: action.identifier,\n        label: action.groupLabel ? action.groupLabel + ' ' + action.label : action.label,\n        icon: action.icon,\n        hasConfig: !!action.configFields,\n      }))\n\n      options.push(...groupOptions)\n    })\n\n    // if no actions, add placeholder\n    if (!options.length) {\n      options.push({\n        label: 'No actions available',\n        value: 'no-actions',\n        disabled: true,\n        header: true,\n      })\n    }\n\n    return options\n  }, [groupedActions, unorderedCategories, categoryOrder])\n\n  const featuredNumber = 2\n\n  const featuredActions = useMemo(() => {\n    // Filter and sort to get initial featured actions\n    let tempFeaturedActions = actions\n      .filter((action) => action.featured)\n      .sort((a, b) => (a.order || 0) - (b.order || 0))\n      .slice(0, featuredNumber)\n\n    // Check if we need to add more actions to reach featuredNumber\n    if (tempFeaturedActions.length < featuredNumber) {\n      categories.forEach((category) => {\n        if (tempFeaturedActions.length >= featuredNumber) return\n        const actions = groupedActions[category]\n        if (!actions || !actions.length) return\n\n        for (let i = tempFeaturedActions.length; i < featuredNumber; i++) {\n          const action = actions[i]\n          if (!action) break\n          if (!action.icon) continue\n          tempFeaturedActions.push(action)\n        }\n      })\n    }\n\n    return tempFeaturedActions\n  }, [actions, groupedActions, placeholder])\n\n  const [executeAction, { isLoading: isLoadingExecution, originalArgs }] =\n    useExecuteActionMutation()\n  const executingAction = isLoadingExecution && originalArgs?.identifier\n\n  const handleExecuteAction = async (\n    identifier: string,\n    e?: MouseEvent<HTMLElement> | null,\n    formData?: InteractiveForm,\n  ) => {\n    e?.preventDefault()\n    const action = actions.find((option) => option.identifier === identifier)\n\n    if (!action) {\n      toast.error('Action not found')\n      console.warn('Action not found', identifier)\n      return\n    }\n\n    const params = {\n      addonName: action.addonName as string,\n      addonVersion: action.addonVersion as string,\n      variant: action.variant,\n      identifier: action.identifier,\n    }\n\n    const actionContext = { ...context }\n    if (formData) {\n      actionContext.formData = formData\n    }\n\n    let response = null\n\n    try {\n      response = await executeAction({ actionContext, ...params }).unwrap()\n    } catch (error: any) {\n      console.error('Error executing action', error)\n      toast.error(error?.data?.detail || 'Error executing action')\n      return\n    }\n\n    try {\n      // Toast the message if it is available\n      if (response?.message) {\n        if (response?.success) {\n          toast.success(response.message, { autoClose: 2000 })\n        } else {\n          toast.error(response.message, { autoClose: 2000 })\n        }\n      }\n\n      // Even if response?.success is false, we still want to handle the payload\n      // as it may contain useful information - complex error messages in form,\n      // redirect to another page etc. If the action just needs to abort,\n      // it raises exception instead of returning a response with success: false\n\n      // Use the new hook to handle payload\n      if (response?.payload) {\n        if (response.type === 'form') {\n          // action requests additional information from the user.\n          // we show a dialog with the form and when the user submits it we call the action again\n\n          // It probably does not make sense to move to the useActionTriggers hook\n          // as it need contexts and the dialog\n          const intf = {\n            identifier,\n            // @ts-expect-error\n            title: response.payload['title'],\n            // @ts-expect-error\n            fields: response.payload['fields'],\n            // @ts-expect-error\n            submitLabel: response.payload['submit_label'],\n            // @ts-expect-error\n            cancelLabel: response.payload['cancel_label'],\n            // @ts-expect-error\n            submitIcon: response.payload['submit_icon'],\n            // @ts-expect-error\n            cancelIcon: response.payload['cancel_icon'],\n          }\n          setInteractiveForm(intf)\n        } else {\n          handleActionPayload(response.type as string, response.payload)\n        }\n      }\n    } catch (error) {\n      // got response, but failed to process it\n      console.warn('Error during action response processing', error)\n      toast.error('Error occured during action processing')\n    }\n  }\n\n  const handleConfigureAction = (identifier: string) => {\n    const action = actions.find((data) => data.identifier === identifier)\n    if (!action) return\n    setActionBeingConfigured(action)\n  }\n\n  const handleSubmitInteractiveForm = async (identifier: string, formData: InteractiveForm) => {\n    handleExecuteAction(identifier, null, formData)\n  }\n\n  const loadingActions = [placeholder, placeholder, placeholder]\n\n  const isLoading = isFetchingActions || isLoadingEntity\n  const featuredActionsToDisplay = isLoading ? loadingActions : featuredActions\n\n  return (\n    <Styled.Actions className=\"actions\">\n      {featuredActionsToDisplay.map((action, i) => (\n        <Styled.FeaturedAction\n          key={action.identifier + '-' + i}\n          className={clsx('action', {\n            loading: isLoading,\n            // @ts-expect-error\n            isPlaceholder: action.isPlaceholder,\n          })}\n          data-tooltip={action.groupLabel ? action.groupLabel + ' ' + action.label : action.label}\n          // @ts-expect-error\n          disabled={action.isPlaceholder}\n          onClick={(e) => handleExecuteAction(action.identifier, e)}\n        >\n          {/* @ts-ignore */}\n          <ActionIcon icon={action.icon} isExecuting={executingAction === action.identifier} />\n        </Styled.FeaturedAction>\n      ))}\n      <ActionsDropdown\n        options={dropdownOptions}\n        isLoading={isLoading}\n        onAction={handleExecuteAction}\n        onConfig={handleConfigureAction}\n      />\n      <ActionConfigDialog\n        action={actionBeingConfigured}\n        // @ts-expect-error\n        context={context}\n        onClose={() => setActionBeingConfigured(null)}\n      />\n      <InteractiveActionDialog\n        interactiveForm={interactiveForm}\n        onClose={() => setInteractiveForm(null)}\n        // @ts-expect-error\n        onSubmit={handleSubmitInteractiveForm}\n      />\n    </Styled.Actions>\n  )\n}\n"],"names":["actions","data","jsxs","Styled.Actions","jsx","Styled.FeaturedAction"],"mappings":"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"}
+{"version":3,"file":"Actions.es.js","sources":["../../../../../src/containers/Actions/Actions.tsx"],"sourcesContent":["import * as Styled from './Actions.styled'\nimport { MouseEvent, useState } from 'react'\nimport clsx from 'clsx'\nimport { toast } from 'react-toastify'\nimport { useMemo, useEffect } from 'react'\nimport { ActionContext, useExecuteActionMutation, useGetActionsFromContextQuery } from '@shared/api'\nimport { ActionsDropdown } from './ActionsDropdown'\nimport ActionIcon from './ActionIcon'\nimport { useActionTriggers } from '@shared/hooks'\nimport { ActionConfigDialog } from './ActionConfigDialog'\nimport { InteractiveActionDialog, InteractiveForm } from './InteractiveActionDialog'\n\nconst placeholder = {\n  identifier: 'placeholder',\n  label: 'Featured action slot',\n  isPlaceholder: true,\n  icon: { type: 'material-symbols', name: 'sync' },\n  groupLabel: '',\n}\n\ntype ActionsProps = {\n  entities: { id: string; projectName: string; entitySubType?: string }[]\n  entityType: ActionContext['entityType']\n  entitySubTypes?: string[]\n  isLoadingEntity: boolean\n}\n\nexport const Actions = ({\n  entities,\n  entityType,\n  entitySubTypes,\n  isLoadingEntity,\n}: ActionsProps) => {\n  // special triggers the actions can make to perform stuff on the client\n  const { handleActionPayload } = useActionTriggers()\n  const [actionBeingConfigured, setActionBeingConfigured] = useState<any>(null)\n  const [interactiveForm, setInteractiveForm] = useState<any>(null)\n\n  const context: ActionContext | null = useMemo(() => {\n    if (!entities.length) return null\n    if (!entities[0].projectName) return null\n\n    // get a list of unique entity subtypes from loaded data\n    const entitySubtypesLoaded = entities\n      .filter((entity) => entity.entitySubType)\n      .map((entity) => entity.entitySubType as string)\n      .filter((value, index, self) => self.indexOf(value) === index && value)\n\n    // try and use the passed in entitySubTypes, if not use the loaded ones\n    const entitySubTypesToUse = entitySubTypes?.length ? entitySubTypes : entitySubtypesLoaded\n\n    // all types except version/representation should have subtypes\n    if (\n      !entitySubTypesToUse?.length &&\n      entityType !== 'version' &&\n      entityType !== 'representation'\n    ) {\n      console.warn('No entity subtypes found')\n      return null\n    }\n\n    return {\n      projectName: entities[0].projectName,\n      entityType: entityType,\n      entityIds: entities.map((entity) => entity.id),\n      entitySubtypes: entitySubTypesToUse,\n    }\n  }, [entities, entityType])\n\n  useEffect(() => {\n    setInteractiveForm(null)\n  }, [context])\n\n  const { data, isFetching: isFetchingActions } = useGetActionsFromContextQuery(\n    { mode: 'simple', actionContext: context as ActionContext },\n    { skip: !context },\n  )\n\n  const actions = data?.actions || []\n\n  const categoryOrder = ['application', 'admin', 'workflow']\n  // group actions by category\n  // sort by hardcoded category, this will changing the future\n  const groupedActions = useMemo(() => {\n    // Step 1: Group actions by category\n    const grouped = actions.reduce((acc: { [key: string]: any[] }, action) => {\n      const category = action.category || 'uncategorized'\n      if (!acc[category]) {\n        acc[category] = []\n      }\n      acc[category].push(action)\n      return acc\n    }, {})\n\n    // Step 5: Return the ordered groups\n    return grouped\n  }, [actions])\n\n  // get categories that don't have a specific order (not in categoryOrder)\n  // then sort them alphabetically\n  const unorderedCategories = useMemo(\n    () => [\n      ...new Set(\n        Object.keys(groupedActions)\n          .filter((category) => !categoryOrder.includes(category))\n          .sort((a, b) => a.localeCompare(b)),\n      ),\n    ],\n    [groupedActions],\n  )\n\n  const categories = [...categoryOrder, ...unorderedCategories]\n\n  // create the options for the dropdown, each category is separated by a divider and a title\n  // for the divider we will use a custom dropdown item template\n  const dropdownOptions = useMemo(() => {\n    const options = []\n\n    categories.forEach((category) => {\n      if (!groupedActions[category] || !groupedActions[category].length) return\n\n      options.push({\n        label: category,\n        header: true,\n        value: category,\n        disabled: true,\n      })\n\n      const groupOptions = groupedActions[category].map((action) => ({\n        value: action.identifier,\n        label: action.groupLabel ? action.groupLabel + ' ' + action.label : action.label,\n        icon: action.icon,\n        hasConfig: !!action.configFields,\n      }))\n\n      options.push(...groupOptions)\n    })\n\n    // if no actions, add placeholder\n    if (!options.length) {\n      options.push({\n        label: 'No actions available',\n        value: 'no-actions',\n        disabled: true,\n        header: true,\n      })\n    }\n\n    return options\n  }, [groupedActions, unorderedCategories, categoryOrder])\n\n  const featuredNumber = 2\n\n  const featuredActions = useMemo(() => {\n    // Filter and sort to get initial featured actions\n    let tempFeaturedActions = actions\n      .filter((action) => action.featured)\n      .sort((a, b) => (a.order || 0) - (b.order || 0))\n      .slice(0, featuredNumber)\n\n    // Check if we need to add more actions to reach featuredNumber\n    if (tempFeaturedActions.length < featuredNumber) {\n      categories.forEach((category) => {\n        if (tempFeaturedActions.length >= featuredNumber) return\n        const actions = groupedActions[category]\n        if (!actions || !actions.length) return\n\n        for (let i = tempFeaturedActions.length; i < featuredNumber; i++) {\n          const action = actions[i]\n          if (!action) break\n          if (!action.icon) continue\n          tempFeaturedActions.push(action)\n        }\n      })\n    }\n\n    return tempFeaturedActions\n  }, [actions, groupedActions, placeholder])\n\n  const [executeAction, { isLoading: isLoadingExecution, originalArgs }] =\n    useExecuteActionMutation()\n  const executingAction = isLoadingExecution && originalArgs?.identifier\n\n  const handleExecuteAction = async (\n    identifier: string,\n    e?: MouseEvent<HTMLElement> | null,\n    formData?: InteractiveForm,\n  ) => {\n    e?.preventDefault()\n    const action = actions.find((option) => option.identifier === identifier)\n\n    if (!action) {\n      toast.error('Action not found')\n      console.warn('Action not found', identifier)\n      return\n    }\n\n    const params = {\n      addonName: action.addonName as string,\n      addonVersion: action.addonVersion as string,\n      variant: action.variant,\n      identifier: action.identifier,\n    }\n\n    const actionContext = { ...context }\n    if (formData) {\n      actionContext.formData = formData\n    }\n\n    let response = null\n\n    try {\n      response = await executeAction({ actionContext, ...params }).unwrap()\n    } catch (error: any) {\n      console.error('Error executing action', error)\n      toast.error(error?.data?.detail || 'Error executing action')\n      return\n    }\n\n    try {\n      // Toast the message if it is available\n      if (response?.message) {\n        if (response?.success) {\n          toast.success(response.message, { autoClose: 2000 })\n        } else {\n          toast.error(response.message, { autoClose: 2000 })\n        }\n      }\n\n      // Even if response?.success is false, we still want to handle the payload\n      // as it may contain useful information - complex error messages in form,\n      // redirect to another page etc. If the action just needs to abort,\n      // it raises exception instead of returning a response with success: false\n\n      // Use the new hook to handle payload\n      if (response?.payload) {\n        if (response.type === 'form') {\n          // action requests additional information from the user.\n          // we show a dialog with the form and when the user submits it we call the action again\n\n          // It probably does not make sense to move to the useActionTriggers hook\n          // as it need contexts and the dialog\n          const intf = {\n            identifier,\n            // @ts-expect-error\n            title: response.payload['title'],\n            // @ts-expect-error\n            fields: response.payload['fields'],\n            // @ts-expect-error\n            submitLabel: response.payload['submit_label'],\n            // @ts-expect-error\n            cancelLabel: response.payload['cancel_label'],\n            // @ts-expect-error\n            submitIcon: response.payload['submit_icon'],\n            // @ts-expect-error\n            cancelIcon: response.payload['cancel_icon'],\n          }\n          setInteractiveForm(intf)\n        } else {\n          handleActionPayload(response.type as string, response.payload)\n        }\n      }\n    } catch (error) {\n      // got response, but failed to process it\n      console.warn('Error during action response processing', error)\n      toast.error('Error occured during action processing')\n    }\n  }\n\n  const handleConfigureAction = (identifier: string) => {\n    const action = actions.find((data) => data.identifier === identifier)\n    if (!action) return\n    setActionBeingConfigured(action)\n  }\n\n  const handleSubmitInteractiveForm = async (identifier: string, formData: InteractiveForm) => {\n    handleExecuteAction(identifier, null, formData)\n  }\n\n  const loadingActions = [placeholder, placeholder, placeholder]\n\n  const isLoading = isFetchingActions || isLoadingEntity\n  const featuredActionsToDisplay = isLoading ? loadingActions : featuredActions\n\n  return (\n    <Styled.Actions className=\"actions\">\n      {featuredActionsToDisplay.map((action, i) => (\n        <Styled.FeaturedAction\n          key={action.identifier + '-' + i}\n          className={clsx('action', {\n            loading: isLoading,\n            // @ts-expect-error\n            isPlaceholder: action.isPlaceholder,\n          })}\n          data-tooltip={action.groupLabel ? action.groupLabel + ' ' + action.label : action.label}\n          // @ts-expect-error\n          disabled={action.isPlaceholder}\n          onClick={(e) => handleExecuteAction(action.identifier, e)}\n        >\n          {/* @ts-ignore */}\n          <ActionIcon icon={action.icon} isExecuting={executingAction === action.identifier} />\n        </Styled.FeaturedAction>\n      ))}\n      <ActionsDropdown\n        options={dropdownOptions}\n        isLoading={isLoading}\n        onAction={handleExecuteAction}\n        onConfig={handleConfigureAction}\n      />\n      <ActionConfigDialog\n        action={actionBeingConfigured}\n        // @ts-expect-error\n        context={context}\n        onClose={() => setActionBeingConfigured(null)}\n      />\n      <InteractiveActionDialog\n        interactiveForm={interactiveForm}\n        onClose={() => setInteractiveForm(null)}\n        // @ts-expect-error\n        onSubmit={handleSubmitInteractiveForm}\n      />\n    </Styled.Actions>\n  )\n}\n"],"names":["actions","data","jsxs","Styled.Actions","jsx","Styled.FeaturedAction"],"mappings":"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"}

package/dist/shared/src/containers/Actions/ActionsDropdown/ActionsDropdown.cjs.js

@@ -5,7 +5,7 @@ const ayonReactComponents = require("@ynput/ayon-react-components");
 const ActionsDropdown_styled = require("./ActionsDropdown.styled.cjs.js");
 const clsx = require("clsx");
 const React = require("react");
-const lodash = require("../../../../../_virtual/lodash.cjs.js");
+const lodash = require("lodash");
 const ActionIcon = require("../ActionIcon.cjs.js");
 const styled = require("styled-components");
 const ActionItemContainer = styled.div`
@@ -35,7 +35,7 @@ const ActionsDropdownItem = ({
   hasConfig,
   onConfig
 }) => {
-  if (header) return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ActionsDropdown_styled.DropdownHeader, { children: lodash.lodashExports.upperFirst(label) });
+  if (header) return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ActionsDropdown_styled.DropdownHeader, { children: lodash.upperFirst(label) });
   const handleConfig = (e) => {
     onConfig == null ? void 0 : onConfig(value);
     e.stopPropagation();

package/dist/shared/src/containers/Actions/ActionsDropdown/ActionsDropdown.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionsDropdown.cjs.js","sources":["../../../../../../src/containers/Actions/ActionsDropdown/ActionsDropdown.tsx"],"sourcesContent":["import { DefaultValueTemplate, Button, Spacer, DropdownRef } from '@ynput/ayon-react-components'\nimport { DropdownHeader, DropdownItem, StyledDropdown } from './ActionsDropdown.styled'\nimport clsx from 'clsx'\nimport { useRef } from 'react'\nimport { upperFirst } from 'lodash'\nimport ActionIcon from '../ActionIcon'\nimport styled from 'styled-components'\nimport { IconModel } from '@shared/api'\n\nconst ActionItemContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  gap: 4px;\n\n  // use visibility instead of display, so dropdown adjusts its width\n  button {\n    display: flex;\n    visibility: hidden;\n  }\n\n  &:hover,\n  &:focus-within {\n    button {\n      visibility: visible;\n    }\n  }\n`\n\ntype ActionsDropdownItemProps = {\n  value: string\n  label: string\n  icon?: IconModel\n  header?: boolean\n  hasConfig?: boolean\n  onConfig?: (value: string) => void\n}\n\nexport const ActionsDropdownItem = ({\n  value,\n  label,\n  icon,\n  header,\n  hasConfig,\n  onConfig,\n}: ActionsDropdownItemProps) => {\n  if (header) return <DropdownHeader>{upperFirst(label)}</DropdownHeader>\n\n  const handleConfig = (e: any) => {\n    onConfig?.(value)\n    e.stopPropagation()\n    e.preventDefault()\n  }\n\n  return (\n    <DropdownItem>\n      <ActionItemContainer>\n        <ActionIcon icon={icon} />\n        <span>{label}</span>\n        <Spacer />\n        {hasConfig && (\n          <Button\n            onClick={handleConfig}\n            icon=\"settings_applications\"\n            tabIndex={-1}\n            style={{ background: 'none', padding: 0 }}\n          />\n        )}\n      </ActionItemContainer>\n    </DropdownItem>\n  )\n}\n\nexport type ActionsDropdownProps = {\n  options: ActionsDropdownItemProps[]\n  isLoading?: boolean\n  onAction: (value: string) => void\n  onConfig: (e: any) => void\n}\n\nexport const ActionsDropdown = ({\n  options,\n  isLoading,\n  onAction,\n  onConfig,\n}: ActionsDropdownProps) => {\n  const dropdownRef = useRef<DropdownRef>(null)\n\n  const handleConfigClick = (e: any) => {\n    dropdownRef.current?.close()\n    onConfig(e)\n  }\n\n  return (\n    <StyledDropdown\n      ref={dropdownRef}\n      disabled={isLoading}\n      className={clsx('more', { loading: isLoading })}\n      options={options}\n      maxOptionsShown={100}\n      value={[]}\n      placeholder=\"\"\n      itemTemplate={(option) => <ActionsDropdownItem {...option} onConfig={handleConfigClick} />}\n      valueTemplate={() => <DefaultValueTemplate placeholder=\"\" value={[]} />}\n      onChange={(v) => onAction(v[0])}\n      // @ts-expect-error\n      buttonProps={{ ['data-tooltip']: 'All actions' }}\n    />\n  )\n}\n"],"names":["jsx","DropdownHeader","upperFirst","DropdownItem","jsxs","Spacer","Button","useRef","StyledDropdown","DefaultValueTemplate"],"mappings":";;;;;;;;;;AASA,MAAM,sBAAsB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6B5B,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAgC;AAC9B,MAAI,OAAe,QAAAA,2BAAAA,kBAAAA,IAACC,uBAAgB,gBAAA,EAAA,UAAAC,OAAA,cAAA,WAAW,KAAK,GAAE;AAEhD,QAAA,eAAe,CAAC,MAAW;AAC/B,yCAAW;AACX,MAAE,gBAAgB;AAClB,MAAE,eAAe;AAAA,EACnB;AAGE,SAAAF,2BAAAA,kBAAAA,IAACG,uBAAAA,cACC,EAAA,UAAAC,2BAAAA,kBAAAA,KAAC,qBACC,EAAA,UAAA;AAAA,IAAAJ,iDAAC,cAAW,MAAY;AAAA,IACxBA,2BAAAA,kBAAAA,IAAC,UAAM,UAAM,MAAA,CAAA;AAAA,qDACZK,oBAAO,QAAA,EAAA;AAAA,IACP,aACCL,2BAAA,kBAAA;AAAA,MAACM,oBAAA;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,MAAK;AAAA,QACL,UAAU;AAAA,QACV,OAAO,EAAE,YAAY,QAAQ,SAAS,EAAE;AAAA,MAAA;AAAA,IAAA;AAAA,EAC1C,EAAA,CAEJ,EACF,CAAA;AAEJ;AASO,MAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA4B;AACpB,QAAA,cAAcC,aAAoB,IAAI;AAEtC,QAAA,oBAAoB,CAAC,MAAW;;AACpC,sBAAY,YAAZ,mBAAqB;AACrB,aAAS,CAAC;AAAA,EACZ;AAGE,SAAAP,2BAAA,kBAAA;AAAA,IAACQ,uBAAA;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,UAAU;AAAA,MACV,WAAW,KAAK,QAAQ,EAAE,SAAS,WAAW;AAAA,MAC9C;AAAA,MACA,iBAAiB;AAAA,MACjB,OAAO,CAAC;AAAA,MACR,aAAY;AAAA,MACZ,cAAc,CAAC,WAAWR,iDAAC,uBAAqB,GAAG,QAAQ,UAAU,mBAAmB;AAAA,MACxF,eAAe,MAAOA,2BAAA,kBAAA,IAAAS,0CAAA,EAAqB,aAAY,IAAG,OAAO,CAAA,GAAI;AAAA,MACrE,UAAU,CAAC,MAAM,SAAS,EAAE,CAAC,CAAC;AAAA,MAE9B,aAAa,EAAE,CAAC,cAAc,GAAG,cAAc;AAAA,IAAA;AAAA,EACjD;AAEJ;;;"}
+{"version":3,"file":"ActionsDropdown.cjs.js","sources":["../../../../../../src/containers/Actions/ActionsDropdown/ActionsDropdown.tsx"],"sourcesContent":["import { DefaultValueTemplate, Button, Spacer, DropdownRef } from '@ynput/ayon-react-components'\nimport { DropdownHeader, DropdownItem, StyledDropdown } from './ActionsDropdown.styled'\nimport clsx from 'clsx'\nimport { useRef } from 'react'\nimport { upperFirst } from 'lodash'\nimport ActionIcon from '../ActionIcon'\nimport styled from 'styled-components'\nimport { IconModel } from '@shared/api'\n\nconst ActionItemContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  gap: 4px;\n\n  // use visibility instead of display, so dropdown adjusts its width\n  button {\n    display: flex;\n    visibility: hidden;\n  }\n\n  &:hover,\n  &:focus-within {\n    button {\n      visibility: visible;\n    }\n  }\n`\n\ntype ActionsDropdownItemProps = {\n  value: string\n  label: string\n  icon?: IconModel\n  header?: boolean\n  hasConfig?: boolean\n  onConfig?: (value: string) => void\n}\n\nexport const ActionsDropdownItem = ({\n  value,\n  label,\n  icon,\n  header,\n  hasConfig,\n  onConfig,\n}: ActionsDropdownItemProps) => {\n  if (header) return <DropdownHeader>{upperFirst(label)}</DropdownHeader>\n\n  const handleConfig = (e: any) => {\n    onConfig?.(value)\n    e.stopPropagation()\n    e.preventDefault()\n  }\n\n  return (\n    <DropdownItem>\n      <ActionItemContainer>\n        <ActionIcon icon={icon} />\n        <span>{label}</span>\n        <Spacer />\n        {hasConfig && (\n          <Button\n            onClick={handleConfig}\n            icon=\"settings_applications\"\n            tabIndex={-1}\n            style={{ background: 'none', padding: 0 }}\n          />\n        )}\n      </ActionItemContainer>\n    </DropdownItem>\n  )\n}\n\nexport type ActionsDropdownProps = {\n  options: ActionsDropdownItemProps[]\n  isLoading?: boolean\n  onAction: (value: string) => void\n  onConfig: (e: any) => void\n}\n\nexport const ActionsDropdown = ({\n  options,\n  isLoading,\n  onAction,\n  onConfig,\n}: ActionsDropdownProps) => {\n  const dropdownRef = useRef<DropdownRef>(null)\n\n  const handleConfigClick = (e: any) => {\n    dropdownRef.current?.close()\n    onConfig(e)\n  }\n\n  return (\n    <StyledDropdown\n      ref={dropdownRef}\n      disabled={isLoading}\n      className={clsx('more', { loading: isLoading })}\n      options={options}\n      maxOptionsShown={100}\n      value={[]}\n      placeholder=\"\"\n      itemTemplate={(option) => <ActionsDropdownItem {...option} onConfig={handleConfigClick} />}\n      valueTemplate={() => <DefaultValueTemplate placeholder=\"\" value={[]} />}\n      onChange={(v) => onAction(v[0])}\n      // @ts-expect-error\n      buttonProps={{ ['data-tooltip']: 'All actions' }}\n    />\n  )\n}\n"],"names":["jsx","DropdownHeader","upperFirst","DropdownItem","jsxs","Spacer","Button","useRef","StyledDropdown","DefaultValueTemplate"],"mappings":";;;;;;;;;;AASA,MAAM,sBAAsB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6B5B,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAgC;AAC9B,MAAI,OAAe,QAAAA,2BAAAA,kBAAAA,IAACC,uBAAgB,gBAAA,EAAA,UAAAC,OAAA,WAAW,KAAK,GAAE;AAEhD,QAAA,eAAe,CAAC,MAAW;AAC/B,yCAAW;AACX,MAAE,gBAAgB;AAClB,MAAE,eAAe;AAAA,EACnB;AAGE,SAAAF,2BAAAA,kBAAAA,IAACG,uBAAAA,cACC,EAAA,UAAAC,2BAAAA,kBAAAA,KAAC,qBACC,EAAA,UAAA;AAAA,IAAAJ,iDAAC,cAAW,MAAY;AAAA,IACxBA,2BAAAA,kBAAAA,IAAC,UAAM,UAAM,MAAA,CAAA;AAAA,qDACZK,oBAAO,QAAA,EAAA;AAAA,IACP,aACCL,2BAAA,kBAAA;AAAA,MAACM,oBAAA;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,MAAK;AAAA,QACL,UAAU;AAAA,QACV,OAAO,EAAE,YAAY,QAAQ,SAAS,EAAE;AAAA,MAAA;AAAA,IAAA;AAAA,EAC1C,EAAA,CAEJ,EACF,CAAA;AAEJ;AASO,MAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA4B;AACpB,QAAA,cAAcC,aAAoB,IAAI;AAEtC,QAAA,oBAAoB,CAAC,MAAW;;AACpC,sBAAY,YAAZ,mBAAqB;AACrB,aAAS,CAAC;AAAA,EACZ;AAGE,SAAAP,2BAAA,kBAAA;AAAA,IAACQ,uBAAA;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,UAAU;AAAA,MACV,WAAW,KAAK,QAAQ,EAAE,SAAS,WAAW;AAAA,MAC9C;AAAA,MACA,iBAAiB;AAAA,MACjB,OAAO,CAAC;AAAA,MACR,aAAY;AAAA,MACZ,cAAc,CAAC,WAAWR,iDAAC,uBAAqB,GAAG,QAAQ,UAAU,mBAAmB;AAAA,MACxF,eAAe,MAAOA,2BAAA,kBAAA,IAAAS,0CAAA,EAAqB,aAAY,IAAG,OAAO,CAAA,GAAI;AAAA,MACrE,UAAU,CAAC,MAAM,SAAS,EAAE,CAAC,CAAC;AAAA,MAE9B,aAAa,EAAE,CAAC,cAAc,GAAG,cAAc;AAAA,IAAA;AAAA,EACjD;AAEJ;;;"}

package/dist/shared/src/containers/Actions/ActionsDropdown/ActionsDropdown.es.js

@@ -3,7 +3,7 @@ import { DefaultValueTemplate, Spacer, Button } from "@ynput/ayon-react-componen
 import { StyledDropdown, DropdownHeader, DropdownItem } from "./ActionsDropdown.styled.es.js";
 import clsx from "clsx";
 import { useRef } from "react";
-import { l as lodashExports } from "../../../../../_virtual/lodash.es.js";
+import { upperFirst } from "lodash";
 import ActionIcon from "../ActionIcon.es.js";
 import styled from "styled-components";
 const ActionItemContainer = styled.div`
@@ -33,7 +33,7 @@ const ActionsDropdownItem = ({
   hasConfig,
   onConfig
 }) => {
-  if (header) return /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownHeader, { children: lodashExports.upperFirst(label) });
+  if (header) return /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownHeader, { children: upperFirst(label) });
   const handleConfig = (e) => {
     onConfig == null ? void 0 : onConfig(value);
     e.stopPropagation();

package/dist/shared/src/containers/Actions/ActionsDropdown/ActionsDropdown.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionsDropdown.es.js","sources":["../../../../../../src/containers/Actions/ActionsDropdown/ActionsDropdown.tsx"],"sourcesContent":["import { DefaultValueTemplate, Button, Spacer, DropdownRef } from '@ynput/ayon-react-components'\nimport { DropdownHeader, DropdownItem, StyledDropdown } from './ActionsDropdown.styled'\nimport clsx from 'clsx'\nimport { useRef } from 'react'\nimport { upperFirst } from 'lodash'\nimport ActionIcon from '../ActionIcon'\nimport styled from 'styled-components'\nimport { IconModel } from '@shared/api'\n\nconst ActionItemContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  gap: 4px;\n\n  // use visibility instead of display, so dropdown adjusts its width\n  button {\n    display: flex;\n    visibility: hidden;\n  }\n\n  &:hover,\n  &:focus-within {\n    button {\n      visibility: visible;\n    }\n  }\n`\n\ntype ActionsDropdownItemProps = {\n  value: string\n  label: string\n  icon?: IconModel\n  header?: boolean\n  hasConfig?: boolean\n  onConfig?: (value: string) => void\n}\n\nexport const ActionsDropdownItem = ({\n  value,\n  label,\n  icon,\n  header,\n  hasConfig,\n  onConfig,\n}: ActionsDropdownItemProps) => {\n  if (header) return <DropdownHeader>{upperFirst(label)}</DropdownHeader>\n\n  const handleConfig = (e: any) => {\n    onConfig?.(value)\n    e.stopPropagation()\n    e.preventDefault()\n  }\n\n  return (\n    <DropdownItem>\n      <ActionItemContainer>\n        <ActionIcon icon={icon} />\n        <span>{label}</span>\n        <Spacer />\n        {hasConfig && (\n          <Button\n            onClick={handleConfig}\n            icon=\"settings_applications\"\n            tabIndex={-1}\n            style={{ background: 'none', padding: 0 }}\n          />\n        )}\n      </ActionItemContainer>\n    </DropdownItem>\n  )\n}\n\nexport type ActionsDropdownProps = {\n  options: ActionsDropdownItemProps[]\n  isLoading?: boolean\n  onAction: (value: string) => void\n  onConfig: (e: any) => void\n}\n\nexport const ActionsDropdown = ({\n  options,\n  isLoading,\n  onAction,\n  onConfig,\n}: ActionsDropdownProps) => {\n  const dropdownRef = useRef<DropdownRef>(null)\n\n  const handleConfigClick = (e: any) => {\n    dropdownRef.current?.close()\n    onConfig(e)\n  }\n\n  return (\n    <StyledDropdown\n      ref={dropdownRef}\n      disabled={isLoading}\n      className={clsx('more', { loading: isLoading })}\n      options={options}\n      maxOptionsShown={100}\n      value={[]}\n      placeholder=\"\"\n      itemTemplate={(option) => <ActionsDropdownItem {...option} onConfig={handleConfigClick} />}\n      valueTemplate={() => <DefaultValueTemplate placeholder=\"\" value={[]} />}\n      onChange={(v) => onAction(v[0])}\n      // @ts-expect-error\n      buttonProps={{ ['data-tooltip']: 'All actions' }}\n    />\n  )\n}\n"],"names":["jsx","upperFirst","jsxs"],"mappings":";;;;;;;;AASA,MAAM,sBAAsB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6B5B,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAgC;AAC9B,MAAI,OAAe,QAAAA,kCAAAA,IAAC,gBAAgB,EAAA,UAAAC,cAAA,WAAW,KAAK,GAAE;AAEhD,QAAA,eAAe,CAAC,MAAW;AAC/B,yCAAW;AACX,MAAE,gBAAgB;AAClB,MAAE,eAAe;AAAA,EACnB;AAGE,SAAAD,kCAAAA,IAAC,cACC,EAAA,UAAAE,kCAAAA,KAAC,qBACC,EAAA,UAAA;AAAA,IAAAF,sCAAC,cAAW,MAAY;AAAA,IACxBA,kCAAAA,IAAC,UAAM,UAAM,MAAA,CAAA;AAAA,0CACZ,QAAO,EAAA;AAAA,IACP,aACCA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,MAAK;AAAA,QACL,UAAU;AAAA,QACV,OAAO,EAAE,YAAY,QAAQ,SAAS,EAAE;AAAA,MAAA;AAAA,IAAA;AAAA,EAC1C,EAAA,CAEJ,EACF,CAAA;AAEJ;AASO,MAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA4B;AACpB,QAAA,cAAc,OAAoB,IAAI;AAEtC,QAAA,oBAAoB,CAAC,MAAW;;AACpC,sBAAY,YAAZ,mBAAqB;AACrB,aAAS,CAAC;AAAA,EACZ;AAGE,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,UAAU;AAAA,MACV,WAAW,KAAK,QAAQ,EAAE,SAAS,WAAW;AAAA,MAC9C;AAAA,MACA,iBAAiB;AAAA,MACjB,OAAO,CAAC;AAAA,MACR,aAAY;AAAA,MACZ,cAAc,CAAC,WAAWA,sCAAC,uBAAqB,GAAG,QAAQ,UAAU,mBAAmB;AAAA,MACxF,eAAe,MAAOA,kCAAA,IAAA,sBAAA,EAAqB,aAAY,IAAG,OAAO,CAAA,GAAI;AAAA,MACrE,UAAU,CAAC,MAAM,SAAS,EAAE,CAAC,CAAC;AAAA,MAE9B,aAAa,EAAE,CAAC,cAAc,GAAG,cAAc;AAAA,IAAA;AAAA,EACjD;AAEJ;"}
+{"version":3,"file":"ActionsDropdown.es.js","sources":["../../../../../../src/containers/Actions/ActionsDropdown/ActionsDropdown.tsx"],"sourcesContent":["import { DefaultValueTemplate, Button, Spacer, DropdownRef } from '@ynput/ayon-react-components'\nimport { DropdownHeader, DropdownItem, StyledDropdown } from './ActionsDropdown.styled'\nimport clsx from 'clsx'\nimport { useRef } from 'react'\nimport { upperFirst } from 'lodash'\nimport ActionIcon from '../ActionIcon'\nimport styled from 'styled-components'\nimport { IconModel } from '@shared/api'\n\nconst ActionItemContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  gap: 4px;\n\n  // use visibility instead of display, so dropdown adjusts its width\n  button {\n    display: flex;\n    visibility: hidden;\n  }\n\n  &:hover,\n  &:focus-within {\n    button {\n      visibility: visible;\n    }\n  }\n`\n\ntype ActionsDropdownItemProps = {\n  value: string\n  label: string\n  icon?: IconModel\n  header?: boolean\n  hasConfig?: boolean\n  onConfig?: (value: string) => void\n}\n\nexport const ActionsDropdownItem = ({\n  value,\n  label,\n  icon,\n  header,\n  hasConfig,\n  onConfig,\n}: ActionsDropdownItemProps) => {\n  if (header) return <DropdownHeader>{upperFirst(label)}</DropdownHeader>\n\n  const handleConfig = (e: any) => {\n    onConfig?.(value)\n    e.stopPropagation()\n    e.preventDefault()\n  }\n\n  return (\n    <DropdownItem>\n      <ActionItemContainer>\n        <ActionIcon icon={icon} />\n        <span>{label}</span>\n        <Spacer />\n        {hasConfig && (\n          <Button\n            onClick={handleConfig}\n            icon=\"settings_applications\"\n            tabIndex={-1}\n            style={{ background: 'none', padding: 0 }}\n          />\n        )}\n      </ActionItemContainer>\n    </DropdownItem>\n  )\n}\n\nexport type ActionsDropdownProps = {\n  options: ActionsDropdownItemProps[]\n  isLoading?: boolean\n  onAction: (value: string) => void\n  onConfig: (e: any) => void\n}\n\nexport const ActionsDropdown = ({\n  options,\n  isLoading,\n  onAction,\n  onConfig,\n}: ActionsDropdownProps) => {\n  const dropdownRef = useRef<DropdownRef>(null)\n\n  const handleConfigClick = (e: any) => {\n    dropdownRef.current?.close()\n    onConfig(e)\n  }\n\n  return (\n    <StyledDropdown\n      ref={dropdownRef}\n      disabled={isLoading}\n      className={clsx('more', { loading: isLoading })}\n      options={options}\n      maxOptionsShown={100}\n      value={[]}\n      placeholder=\"\"\n      itemTemplate={(option) => <ActionsDropdownItem {...option} onConfig={handleConfigClick} />}\n      valueTemplate={() => <DefaultValueTemplate placeholder=\"\" value={[]} />}\n      onChange={(v) => onAction(v[0])}\n      // @ts-expect-error\n      buttonProps={{ ['data-tooltip']: 'All actions' }}\n    />\n  )\n}\n"],"names":["jsx","jsxs"],"mappings":";;;;;;;;AASA,MAAM,sBAAsB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6B5B,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAgC;AAC9B,MAAI,OAAe,QAAAA,kCAAAA,IAAC,gBAAgB,EAAA,UAAA,WAAW,KAAK,GAAE;AAEhD,QAAA,eAAe,CAAC,MAAW;AAC/B,yCAAW;AACX,MAAE,gBAAgB;AAClB,MAAE,eAAe;AAAA,EACnB;AAGE,SAAAA,kCAAAA,IAAC,cACC,EAAA,UAAAC,kCAAAA,KAAC,qBACC,EAAA,UAAA;AAAA,IAAAD,sCAAC,cAAW,MAAY;AAAA,IACxBA,kCAAAA,IAAC,UAAM,UAAM,MAAA,CAAA;AAAA,0CACZ,QAAO,EAAA;AAAA,IACP,aACCA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,MAAK;AAAA,QACL,UAAU;AAAA,QACV,OAAO,EAAE,YAAY,QAAQ,SAAS,EAAE;AAAA,MAAA;AAAA,IAAA;AAAA,EAC1C,EAAA,CAEJ,EACF,CAAA;AAEJ;AASO,MAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA4B;AACpB,QAAA,cAAc,OAAoB,IAAI;AAEtC,QAAA,oBAAoB,CAAC,MAAW;;AACpC,sBAAY,YAAZ,mBAAqB;AACrB,aAAS,CAAC;AAAA,EACZ;AAGE,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,UAAU;AAAA,MACV,WAAW,KAAK,QAAQ,EAAE,SAAS,WAAW;AAAA,MAC9C;AAAA,MACA,iBAAiB;AAAA,MACjB,OAAO,CAAC;AAAA,MACR,aAAY;AAAA,MACZ,cAAc,CAAC,WAAWA,sCAAC,uBAAqB,GAAG,QAAQ,UAAU,mBAAmB;AAAA,MACxF,eAAe,MAAOA,kCAAA,IAAA,sBAAA,EAAqB,aAAY,IAAG,OAAO,CAAA,GAAI;AAAA,MACrE,UAAU,CAAC,MAAM,SAAS,EAAE,CAAC,CAAC;AAAA,MAE9B,aAAa,EAAE,CAAC,cAAc,GAAG,cAAc;AAAA,IAAA;AAAA,EACjD;AAEJ;"}

package/dist/shared/src/containers/Actions/InteractiveActionDialog.cjs.js

@@ -55,6 +55,10 @@ require("../../api/queries/authentication/getAuthentication.cjs.js");
 require("../../api/queries/entities/getEntity.cjs.js");
 require("../../api/queries/entities/getEntityPanel.cjs.js");
 require("../../api/queries/entities/updateEntity.cjs.js");
+require("../../api/queries/entityLists/getLists.cjs.js");
+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/overview/getOverview.cjs.js");
 require("../../api/queries/overview/updateOverview.cjs.js");
@@ -73,13 +77,14 @@ require("@dnd-kit/sortable");
 require("../../components/ReviewablesList/ReviewablesList.styled.cjs.js");
 require("../ContextMenu/ContextMenuContext.cjs.js");
 ;/* empty css                                   */
-require("../../../../_virtual/lodash.cjs.js");
+require("lodash");
 require("../../util/pubsub.cjs.js");
 require("axios");
 require("../../components/ReviewablesList/ReviewablesUpload.styled.cjs.js");
 require("../../context/RemoteModulesContext.cjs.js");
 require("../../context/DetailsPanelContext.cjs.js");
 require("../../context/ThumbnailUploaderContext.cjs.js");
+require("../../context/SettingsPanelContext.cjs.js");
 require("../../context/pip/PiPProvider.cjs.js");
 require("react-dom");
 require("../../context/pip/PiPWrapper.cjs.js");
@@ -125,6 +130,18 @@ require("../ProjectTreeTable/context/ColumnSettingsContext.cjs.js");
 require("../ProjectTreeTable/context/CellEditingContext.cjs.js");
 require("../ProjectTreeTable/context/ClipboardContext.cjs.js");
 require("../ProjectTreeTable/context/ProjectTableSelectionContext.cjs.js");
+require("@tanstack/react-table");
+require("../ProjectTreeTable/widgets/CollapsedWidget.cjs.js");
+require("../ProjectTreeTable/widgets/DateWidget.cjs.js");
+require("../ProjectTreeTable/widgets/EnumWidget.cjs.js");
+require("../ProjectTreeTable/widgets/TextWidget.cjs.js");
+require("../ProjectTreeTable/widgets/BooleanWidget.cjs.js");
+require("../ProjectTreeTable/widgets/CellWidget.cjs.js");
+require("../ProjectTreeTable/widgets/EntityNameWidget.cjs.js");
+require("../ProjectTreeTable/widgets/ThumbnailWidget.cjs.js");
+require("../ProjectTreeTable/ProjectTreeTable.styled.cjs.js");
+require("../ProjectTreeTable/components/SelectionCell.cjs.js");
+require("../ProjectTreeTable/components/RowSelectionHeader.cjs.js");
 require("../DetailsPanel/DetailsPanel.styled.cjs.js");
 require("../../../../_virtual/runtime.cjs.js");
 require("../../../../_virtual/semver.cjs.js");
@@ -144,6 +161,11 @@ require("../../components/EntityPath/EntityPath.styled.cjs.js");
 require("../../components/EntityPath/SegmentProvider.cjs.js");
 require("../../components/DetailsPanelAttributes/DetailsPanelAttributesEditor.cjs.js");
 require("../../components/Watchers/Watchers.cjs.js");
+require("../../components/ProjectTableSettings/ProjectTableSettings.cjs.js");
+require("../../components/SettingsPanel/SettingsPanel.cjs.js");
+require("../../components/SettingsPanel/SettingsPanelItemTemplate.cjs.js");
+require("../../components/AttributeEditor/components/MinMaxField.cjs.js");
+require("../../components/EnumEditor/EnumEditor.styled.cjs.js");
 const InteractiveActionDialog = ({
   interactiveForm,
   onClose,

package/dist/shared/src/containers/Actions/InteractiveActionDialog.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"InteractiveActionDialog.cjs.js","sources":["../../../../../src/containers/Actions/InteractiveActionDialog.tsx"],"sourcesContent":["import { SimpleFormDialog } from '@shared/components'\nimport type { SimpleFormField } from '@shared/api'\n\nexport interface InteractiveForm {\n  identifier: string\n  title: string\n  fields: SimpleFormField[]\n  submitLabel?: string\n  cancelLabel?: string\n  submitIcon?: string\n  cancelIcon?: string\n}\n\nexport interface InteractiveActionDialogProps {\n  interactiveForm: InteractiveForm | null\n  onClose: () => void\n  onSubmit: (identifier: string, formData: Record<string, any>) => void\n}\n\nexport const InteractiveActionDialog = ({\n  interactiveForm,\n  onClose,\n  onSubmit,\n}: InteractiveActionDialogProps) => {\n  if (!interactiveForm) return null\n\n  const handleSubmit = (formData: Record<string, any>) => {\n    onSubmit(interactiveForm.identifier, formData)\n    onClose()\n  }\n\n  return (\n    <SimpleFormDialog\n      isOpen\n      title={`${interactiveForm.title}`}\n      fields={interactiveForm.fields}\n      submitLabel={interactiveForm.submitLabel}\n      cancelLabel={interactiveForm.cancelLabel}\n      submitIcon={interactiveForm.submitIcon}\n      cancelIcon={interactiveForm.cancelIcon}\n      onClose={onClose}\n      onSubmit={handleSubmit}\n    />\n  )\n}\n"],"names":["jsx","SimpleFormDialog"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBO,MAAM,0BAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AACF,MAAoC;AAC9B,MAAA,CAAC,gBAAwB,QAAA;AAEvB,QAAA,eAAe,CAAC,aAAkC;AAC7C,aAAA,gBAAgB,YAAY,QAAQ;AACrC,YAAA;AAAA,EACV;AAGE,SAAAA,2BAAA,kBAAA;AAAA,IAACC,iBAAA;AAAA,IAAA;AAAA,MACC,QAAM;AAAA,MACN,OAAO,GAAG,gBAAgB,KAAK;AAAA,MAC/B,QAAQ,gBAAgB;AAAA,MACxB,aAAa,gBAAgB;AAAA,MAC7B,aAAa,gBAAgB;AAAA,MAC7B,YAAY,gBAAgB;AAAA,MAC5B,YAAY,gBAAgB;AAAA,MAC5B;AAAA,MACA,UAAU;AAAA,IAAA;AAAA,EACZ;AAEJ;;"}
+{"version":3,"file":"InteractiveActionDialog.cjs.js","sources":["../../../../../src/containers/Actions/InteractiveActionDialog.tsx"],"sourcesContent":["import { SimpleFormDialog } from '@shared/components'\nimport type { SimpleFormField } from '@shared/api'\n\nexport interface InteractiveForm {\n  identifier: string\n  title: string\n  fields: SimpleFormField[]\n  submitLabel?: string\n  cancelLabel?: string\n  submitIcon?: string\n  cancelIcon?: string\n}\n\nexport interface InteractiveActionDialogProps {\n  interactiveForm: InteractiveForm | null\n  onClose: () => void\n  onSubmit: (identifier: string, formData: Record<string, any>) => void\n}\n\nexport const InteractiveActionDialog = ({\n  interactiveForm,\n  onClose,\n  onSubmit,\n}: InteractiveActionDialogProps) => {\n  if (!interactiveForm) return null\n\n  const handleSubmit = (formData: Record<string, any>) => {\n    onSubmit(interactiveForm.identifier, formData)\n    onClose()\n  }\n\n  return (\n    <SimpleFormDialog\n      isOpen\n      title={`${interactiveForm.title}`}\n      fields={interactiveForm.fields}\n      submitLabel={interactiveForm.submitLabel}\n      cancelLabel={interactiveForm.cancelLabel}\n      submitIcon={interactiveForm.submitIcon}\n      cancelIcon={interactiveForm.cancelIcon}\n      onClose={onClose}\n      onSubmit={handleSubmit}\n    />\n  )\n}\n"],"names":["jsx","SimpleFormDialog"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBO,MAAM,0BAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AACF,MAAoC;AAC9B,MAAA,CAAC,gBAAwB,QAAA;AAEvB,QAAA,eAAe,CAAC,aAAkC;AAC7C,aAAA,gBAAgB,YAAY,QAAQ;AACrC,YAAA;AAAA,EACV;AAGE,SAAAA,2BAAA,kBAAA;AAAA,IAACC,iBAAA;AAAA,IAAA;AAAA,MACC,QAAM;AAAA,MACN,OAAO,GAAG,gBAAgB,KAAK;AAAA,MAC/B,QAAQ,gBAAgB;AAAA,MACxB,aAAa,gBAAgB;AAAA,MAC7B,aAAa,gBAAgB;AAAA,MAC7B,YAAY,gBAAgB;AAAA,MAC5B,YAAY,gBAAgB;AAAA,MAC5B;AAAA,MACA,UAAU;AAAA,IAAA;AAAA,EACZ;AAEJ;;"}

package/dist/shared/src/containers/Actions/InteractiveActionDialog.es.js

@@ -53,6 +53,10 @@ import "../../api/queries/authentication/getAuthentication.es.js";
 import "../../api/queries/entities/getEntity.es.js";
 import "../../api/queries/entities/getEntityPanel.es.js";
 import "../../api/queries/entities/updateEntity.es.js";
+import "../../api/queries/entityLists/getLists.es.js";
+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/overview/getOverview.es.js";
 import "../../api/queries/overview/updateOverview.es.js";
@@ -71,13 +75,14 @@ import "@dnd-kit/sortable";
 import "../../components/ReviewablesList/ReviewablesList.styled.es.js";
 import "../ContextMenu/ContextMenuContext.es.js";
 /* empty css                                 */
-import "../../../../_virtual/lodash.es.js";
+import "lodash";
 import "../../util/pubsub.es.js";
 import "axios";
 import "../../components/ReviewablesList/ReviewablesUpload.styled.es.js";
 import "../../context/RemoteModulesContext.es.js";
 import "../../context/DetailsPanelContext.es.js";
 import "../../context/ThumbnailUploaderContext.es.js";
+import "../../context/SettingsPanelContext.es.js";
 import "../../context/pip/PiPProvider.es.js";
 import "react-dom";
 import "../../context/pip/PiPWrapper.es.js";
@@ -123,6 +128,18 @@ import "../ProjectTreeTable/context/ColumnSettingsContext.es.js";
 import "../ProjectTreeTable/context/CellEditingContext.es.js";
 import "../ProjectTreeTable/context/ClipboardContext.es.js";
 import "../ProjectTreeTable/context/ProjectTableSelectionContext.es.js";
+import "@tanstack/react-table";
+import "../ProjectTreeTable/widgets/CollapsedWidget.es.js";
+import "../ProjectTreeTable/widgets/DateWidget.es.js";
+import "../ProjectTreeTable/widgets/EnumWidget.es.js";
+import "../ProjectTreeTable/widgets/TextWidget.es.js";
+import "../ProjectTreeTable/widgets/BooleanWidget.es.js";
+import "../ProjectTreeTable/widgets/CellWidget.es.js";
+import "../ProjectTreeTable/widgets/EntityNameWidget.es.js";
+import "../ProjectTreeTable/widgets/ThumbnailWidget.es.js";
+import "../ProjectTreeTable/ProjectTreeTable.styled.es.js";
+import "../ProjectTreeTable/components/SelectionCell.es.js";
+import "../ProjectTreeTable/components/RowSelectionHeader.es.js";
 import "../DetailsPanel/DetailsPanel.styled.es.js";
 import "../../../../_virtual/runtime.es.js";
 import "../../../../_virtual/semver.es.js";
@@ -142,6 +159,11 @@ import "../../components/EntityPath/EntityPath.styled.es.js";
 import "../../components/EntityPath/SegmentProvider.es.js";
 import "../../components/DetailsPanelAttributes/DetailsPanelAttributesEditor.es.js";
 import "../../components/Watchers/Watchers.es.js";
+import "../../components/ProjectTableSettings/ProjectTableSettings.es.js";
+import "../../components/SettingsPanel/SettingsPanel.es.js";
+import "../../components/SettingsPanel/SettingsPanelItemTemplate.es.js";
+import "../../components/AttributeEditor/components/MinMaxField.es.js";
+import "../../components/EnumEditor/EnumEditor.styled.es.js";
 const InteractiveActionDialog = ({
   interactiveForm,
   onClose,

package/dist/shared/src/containers/Actions/InteractiveActionDialog.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"InteractiveActionDialog.es.js","sources":["../../../../../src/containers/Actions/InteractiveActionDialog.tsx"],"sourcesContent":["import { SimpleFormDialog } from '@shared/components'\nimport type { SimpleFormField } from '@shared/api'\n\nexport interface InteractiveForm {\n  identifier: string\n  title: string\n  fields: SimpleFormField[]\n  submitLabel?: string\n  cancelLabel?: string\n  submitIcon?: string\n  cancelIcon?: string\n}\n\nexport interface InteractiveActionDialogProps {\n  interactiveForm: InteractiveForm | null\n  onClose: () => void\n  onSubmit: (identifier: string, formData: Record<string, any>) => void\n}\n\nexport const InteractiveActionDialog = ({\n  interactiveForm,\n  onClose,\n  onSubmit,\n}: InteractiveActionDialogProps) => {\n  if (!interactiveForm) return null\n\n  const handleSubmit = (formData: Record<string, any>) => {\n    onSubmit(interactiveForm.identifier, formData)\n    onClose()\n  }\n\n  return (\n    <SimpleFormDialog\n      isOpen\n      title={`${interactiveForm.title}`}\n      fields={interactiveForm.fields}\n      submitLabel={interactiveForm.submitLabel}\n      cancelLabel={interactiveForm.cancelLabel}\n      submitIcon={interactiveForm.submitIcon}\n      cancelIcon={interactiveForm.cancelIcon}\n      onClose={onClose}\n      onSubmit={handleSubmit}\n    />\n  )\n}\n"],"names":["jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBO,MAAM,0BAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AACF,MAAoC;AAC9B,MAAA,CAAC,gBAAwB,QAAA;AAEvB,QAAA,eAAe,CAAC,aAAkC;AAC7C,aAAA,gBAAgB,YAAY,QAAQ;AACrC,YAAA;AAAA,EACV;AAGE,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,QAAM;AAAA,MACN,OAAO,GAAG,gBAAgB,KAAK;AAAA,MAC/B,QAAQ,gBAAgB;AAAA,MACxB,aAAa,gBAAgB;AAAA,MAC7B,aAAa,gBAAgB;AAAA,MAC7B,YAAY,gBAAgB;AAAA,MAC5B,YAAY,gBAAgB;AAAA,MAC5B;AAAA,MACA,UAAU;AAAA,IAAA;AAAA,EACZ;AAEJ;"}
+{"version":3,"file":"InteractiveActionDialog.es.js","sources":["../../../../../src/containers/Actions/InteractiveActionDialog.tsx"],"sourcesContent":["import { SimpleFormDialog } from '@shared/components'\nimport type { SimpleFormField } from '@shared/api'\n\nexport interface InteractiveForm {\n  identifier: string\n  title: string\n  fields: SimpleFormField[]\n  submitLabel?: string\n  cancelLabel?: string\n  submitIcon?: string\n  cancelIcon?: string\n}\n\nexport interface InteractiveActionDialogProps {\n  interactiveForm: InteractiveForm | null\n  onClose: () => void\n  onSubmit: (identifier: string, formData: Record<string, any>) => void\n}\n\nexport const InteractiveActionDialog = ({\n  interactiveForm,\n  onClose,\n  onSubmit,\n}: InteractiveActionDialogProps) => {\n  if (!interactiveForm) return null\n\n  const handleSubmit = (formData: Record<string, any>) => {\n    onSubmit(interactiveForm.identifier, formData)\n    onClose()\n  }\n\n  return (\n    <SimpleFormDialog\n      isOpen\n      title={`${interactiveForm.title}`}\n      fields={interactiveForm.fields}\n      submitLabel={interactiveForm.submitLabel}\n      cancelLabel={interactiveForm.cancelLabel}\n      submitIcon={interactiveForm.submitIcon}\n      cancelIcon={interactiveForm.cancelIcon}\n      onClose={onClose}\n      onSubmit={handleSubmit}\n    />\n  )\n}\n"],"names":["jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBO,MAAM,0BAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AACF,MAAoC;AAC9B,MAAA,CAAC,gBAAwB,QAAA;AAEvB,QAAA,eAAe,CAAC,aAAkC;AAC7C,aAAA,gBAAgB,YAAY,QAAQ;AACrC,YAAA;AAAA,EACV;AAGE,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,QAAM;AAAA,MACN,OAAO,GAAG,gBAAgB,KAAK;AAAA,MAC/B,QAAQ,gBAAgB;AAAA,MACxB,aAAa,gBAAgB;AAAA,MAC7B,aAAa,gBAAgB;AAAA,MAC7B,YAAY,gBAAgB;AAAA,MAC5B,YAAY,gBAAgB;AAAA,MAC5B;AAAA,MACA,UAAU;AAAA,IAAA;AAAA,EACZ;AAEJ;"}

package/dist/shared/src/containers/ContextMenu/ContextMenu.css

@@ -1,4 +1,5 @@
-.p-contextmenu.p-component {
+.p-contextmenu.p-component,
+.p-contextmenu.p-component .p-submenu-list {
   min-width: 12.5rem;
   width: unset;
   padding: 0;
@@ -6,62 +7,96 @@
   background-color: var(--md-sys-color-surface-container-lowest);
   border-color: var(--md-sys-color-outline-variant);
 }
-.p-contextmenu.p-component .p-submenu-list {
+.p-contextmenu.p-component .p-submenu-list,
+.p-contextmenu.p-component .p-submenu-list .p-submenu-list {
   padding: 0;
 }
-.p-contextmenu.p-component .p-menuitem.p-menuitem-active > .p-menuitem-link.p-menuitem-icon, .p-contextmenu.p-component .p-menuitem.p-menuitem-active > .p-menuitem-link.p-menuitem-text {
+.p-contextmenu.p-component .p-menuitem.p-menuitem-active > .p-menuitem-link.p-menuitem-icon, .p-contextmenu.p-component .p-menuitem.p-menuitem-active > .p-menuitem-link.p-menuitem-text,
+.p-contextmenu.p-component .p-submenu-list .p-menuitem.p-menuitem-active > .p-menuitem-link.p-menuitem-icon,
+.p-contextmenu.p-component .p-submenu-list .p-menuitem.p-menuitem-active > .p-menuitem-link.p-menuitem-text {
   color: inherit;
 }
 .p-contextmenu.p-component .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon,
-.p-contextmenu.p-component .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text {
+.p-contextmenu.p-component .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text,
+.p-contextmenu.p-component .p-submenu-list .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon,
+.p-contextmenu.p-component .p-submenu-list .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text {
   color: inherit;
 }
-.p-contextmenu.p-component .p-menuitem-link:not(.p-disabled):hover {
+.p-contextmenu.p-component .p-menuitem-link:not(.p-disabled):hover,
+.p-contextmenu.p-component .p-submenu-list .p-menuitem-link:not(.p-disabled):hover {
   background: inherit;
 }
-.p-contextmenu.p-component .p-menuitem.p-menuitem-active > .p-menuitem-link {
+.p-contextmenu.p-component .p-menuitem.p-menuitem-active > .p-menuitem-link,
+.p-contextmenu.p-component .p-submenu-list .p-menuitem.p-menuitem-active > .p-menuitem-link {
   background-color: var(--md-sys-color-surface-container-lowest-hover);
 }
-.p-contextmenu.p-component .p-menuitem.p-menuitem-active > .p-menuitem-link.p-disabled:not(.danger) {
+.p-contextmenu.p-component .p-menuitem.p-menuitem-active > .p-menuitem-link.p-disabled:not(.danger),
+.p-contextmenu.p-component .p-submenu-list .p-menuitem.p-menuitem-active > .p-menuitem-link.p-disabled:not(.danger) {
   background-color: var(--md-sys-color-surface-container-lowest);
 }
-.p-contextmenu.p-component .p-menuitem.p-menuitem-active > .p-menuitem-link.save {
+.p-contextmenu.p-component .p-menuitem.p-menuitem-active > .p-menuitem-link.save,
+.p-contextmenu.p-component .p-submenu-list .p-menuitem.p-menuitem-active > .p-menuitem-link.save {
   background-color: var(--md-sys-color-primary-hover);
 }
-.p-contextmenu.p-component .p-menuitem.p-menuitem-active > .p-menuitem-link.save span {
+.p-contextmenu.p-component .p-menuitem.p-menuitem-active > .p-menuitem-link.save span,
+.p-contextmenu.p-component .p-submenu-list .p-menuitem.p-menuitem-active > .p-menuitem-link.save span {
   color: var(--md-sys-color-on-primary);
 }
-.p-contextmenu.p-component .p-menuitem > .p-menuitem-link {
+.p-contextmenu.p-component .p-menuitem > .p-menuitem-link,
+.p-contextmenu.p-component .p-submenu-list .p-menuitem > .p-menuitem-link {
   padding-right: 10px;
 }
 .p-contextmenu.p-component .p-menuitem > .p-menuitem-link,
-.p-contextmenu.p-component .p-menuitem > .p-menuitem-link .icon {
+.p-contextmenu.p-component .p-menuitem > .p-menuitem-link .icon,
+.p-contextmenu.p-component .p-submenu-list .p-menuitem > .p-menuitem-link,
+.p-contextmenu.p-component .p-submenu-list .p-menuitem > .p-menuitem-link .icon {
   color: var(--md-sys-color-on-surface);
 }
-.p-contextmenu.p-component .p-menuitem > .p-menuitem-link.p-disabled {
+.p-contextmenu.p-component .p-menuitem > .p-menuitem-link.p-disabled,
+.p-contextmenu.p-component .p-submenu-list .p-menuitem > .p-menuitem-link.p-disabled {
   opacity: 0.4;
   color: var(--md-sys-color-on-surface-variant);
 }
-.p-contextmenu.p-component .p-menuitem > .p-menuitem-link.danger {
+.p-contextmenu.p-component .p-menuitem > .p-menuitem-link.danger,
+.p-contextmenu.p-component .p-submenu-list .p-menuitem > .p-menuitem-link.danger {
   background-color: var(--md-sys-color-error-container);
 }
-.p-contextmenu.p-component .p-menuitem > .p-menuitem-link.danger span {
+.p-contextmenu.p-component .p-menuitem > .p-menuitem-link.danger span,
+.p-contextmenu.p-component .p-submenu-list .p-menuitem > .p-menuitem-link.danger span {
   color: var(--md-sys-color-on-error-container);
 }
-.p-contextmenu.p-component .p-menuitem > .p-menuitem-link.danger:hover {
+.p-contextmenu.p-component .p-menuitem > .p-menuitem-link.danger:hover,
+.p-contextmenu.p-component .p-submenu-list .p-menuitem > .p-menuitem-link.danger:hover {
   background-color: var(--md-sys-color-error-container-hover);
 }
-.p-contextmenu.p-component .p-menuitem > .p-menuitem-link.danger:active {
+.p-contextmenu.p-component .p-menuitem > .p-menuitem-link.danger:active,
+.p-contextmenu.p-component .p-submenu-list .p-menuitem > .p-menuitem-link.danger:active {
   background-color: var(--md-sys-color-error-container-active);
 }
-.p-contextmenu.p-component .p-menuitem > .p-menuitem-link.save {
+.p-contextmenu.p-component .p-menuitem > .p-menuitem-link.developer,
+.p-contextmenu.p-component .p-submenu-list .p-menuitem > .p-menuitem-link.developer {
+  background-color: var(--color-hl-developer-container);
+}
+.p-contextmenu.p-component .p-menuitem > .p-menuitem-link.developer span,
+.p-contextmenu.p-component .p-submenu-list .p-menuitem > .p-menuitem-link.developer span {
+  color: var(--color-hl-developer);
+}
+.p-contextmenu.p-component .p-menuitem > .p-menuitem-link.developer:hover,
+.p-contextmenu.p-component .p-submenu-list .p-menuitem > .p-menuitem-link.developer:hover {
+  background-color: var(--color-hl-developer-container-hover);
+}
+.p-contextmenu.p-component .p-menuitem > .p-menuitem-link.save,
+.p-contextmenu.p-component .p-submenu-list .p-menuitem > .p-menuitem-link.save {
   background-color: var(--md-sys-color-primary);
 }
 .p-contextmenu.p-component .p-menuitem > .p-menuitem-link.save,
-.p-contextmenu.p-component .p-menuitem > .p-menuitem-link.save span {
+.p-contextmenu.p-component .p-menuitem > .p-menuitem-link.save span,
+.p-contextmenu.p-component .p-submenu-list .p-menuitem > .p-menuitem-link.save,
+.p-contextmenu.p-component .p-submenu-list .p-menuitem > .p-menuitem-link.save span {
   color: var(--md-sys-color-on-primary);
 }
-.p-contextmenu.p-component .p-menuitem-shortcut {
+.p-contextmenu.p-component .p-menuitem-shortcut,
+.p-contextmenu.p-component .p-submenu-list .p-menuitem-shortcut {
   margin-left: auto;
   padding-left: 32px;
 }

package/dist/shared/src/containers/ContextMenu/ContextMenuItem.cjs.js

@@ -2,6 +2,7 @@
 const jsxRuntime = require("../../../../_virtual/jsx-runtime.cjs.js");
 const ayonReactComponents = require("@ynput/ayon-react-components");
 ;/* empty css                      */
+const clsx = require("clsx");
 const ContextMenuItem = ({
   icon,
   label,
@@ -10,14 +11,18 @@ const ContextMenuItem = ({
   children,
   contextMenuRef,
   disabled,
+  hidden,
   items,
   isSave,
   danger,
+  developer,
   ...props
 }) => {
+  if (hidden) return null;
   const onCommand = (e) => {
     var _a;
     (_a = contextMenuRef.current) == null ? void 0 : _a.hide();
+    e.preventDefault();
     command == null ? void 0 : command({
       originalEvent: e,
       item: {
@@ -32,7 +37,12 @@ const ContextMenuItem = ({
   return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
     "a",
     {
-      className: `p-menuitem-link ${disabled || noItems ? "p-disabled" : ""} ${danger ? "danger" : ""} ${isSave ? "save" : ""}`,
+      className: clsx("p-menuitem-link", {
+        "p-disabled": disabled || noItems,
+        danger,
+        developer,
+        save: isSave
+      }),
       role: "menuitem",
       href: "#",
       onClick: onCommand,

package/dist/shared/src/containers/ContextMenu/ContextMenuItem.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenuItem.cjs.js","sources":["../../../../../src/containers/ContextMenu/ContextMenuItem.tsx"],"sourcesContent":["import React, { RefObject } from 'react'\nimport { Icon, ShortcutTag } from '@ynput/ayon-react-components'\nimport './ContextMenu.scss'\n\ninterface CommandEvent {\n  originalEvent: React.MouseEvent\n  item: {\n    label: string\n    command: (event: CommandEvent) => void\n    shortcut?: string\n  }\n}\n\nexport interface ContextMenuItemProps {\n  icon?: string\n  label?: string\n  shortcut?: string\n  command?: (event: CommandEvent) => void\n  children?: React.ReactNode\n  contextMenuRef: RefObject<{ hide: () => void }>\n  disabled?: boolean\n  items?: any[]\n  isSave?: boolean\n  danger?: boolean\n  style?: React.CSSProperties\n  [key: string]: any // For any additional props\n}\n\nconst ContextMenuItem: React.FC<ContextMenuItemProps> = ({\n  icon,\n  label,\n  shortcut,\n  command,\n  children,\n  contextMenuRef,\n  disabled,\n  items,\n  isSave,\n  danger,\n  ...props\n}) => {\n  const onCommand = (e: React.MouseEvent) => {\n    // hide the context menu\n    contextMenuRef.current?.hide()\n\n    command?.({\n      originalEvent: e,\n      item: {\n        label: label || '',\n        command: command || (() => {}),\n        shortcut,\n      },\n    })\n  }\n\n  const noItems = items && items.length === 0\n\n  return (\n    <a\n      className={`p-menuitem-link ${disabled || noItems ? 'p-disabled' : ''} ${\n        danger ? 'danger' : ''\n      } ${isSave ? 'save' : ''}`}\n      role=\"menuitem\"\n      href=\"#\"\n      onClick={onCommand}\n      style={{\n        ...props?.style,\n      }}\n      {...props}\n    >\n      {icon && <Icon className=\"p-menuitem-icon\" icon={icon} />}\n      {label && (\n        <span\n          className=\"p-menuitem-text\"\n          style={{\n            whiteSpace: 'nowrap',\n          }}\n        >\n          {label}\n        </span>\n      )}\n      {children}\n      {shortcut && (\n        <div className=\"p-menuitem-shortcut\">\n          <ShortcutTag>{shortcut}</ShortcutTag>\n        </div>\n      )}\n      {!!items?.length && (\n        <Icon\n          icon=\"chevron_right\"\n          style={{\n            marginLeft: 'auto',\n            fontSize: '1.5rem',\n          }}\n        />\n      )}\n    </a>\n  )\n}\n\nexport default ContextMenuItem\n"],"names":["jsxs","jsx","Icon","ShortcutTag"],"mappings":";;;;AA4BA,MAAM,kBAAkD,CAAC;AAAA,EACvD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACE,QAAA,YAAY,CAAC,MAAwB;;AAEzC,yBAAe,YAAf,mBAAwB;AAEd,uCAAA;AAAA,MACR,eAAe;AAAA,MACf,MAAM;AAAA,QACJ,OAAO,SAAS;AAAA,QAChB,SAAS,YAAY,MAAM;AAAA,QAAA;AAAA,QAC3B;AAAA,MAAA;AAAA,IACF;AAAA,EAEJ;AAEM,QAAA,UAAU,SAAS,MAAM,WAAW;AAGxC,SAAAA,2BAAA,kBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,mBAAmB,YAAY,UAAU,eAAe,EAAE,IACnE,SAAS,WAAW,EACtB,IAAI,SAAS,SAAS,EAAE;AAAA,MACxB,MAAK;AAAA,MACL,MAAK;AAAA,MACL,SAAS;AAAA,MACT,OAAO;AAAA,QACL,GAAG,+BAAO;AAAA,MACZ;AAAA,MACC,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,QAASC,2BAAA,kBAAA,IAAAC,oBAAA,MAAA,EAAK,WAAU,mBAAkB,MAAY;AAAA,QACtD,SACCD,2BAAA,kBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,YAAY;AAAA,YACd;AAAA,YAEC,UAAA;AAAA,UAAA;AAAA,QACH;AAAA,QAED;AAAA,QACA,6DACE,OAAI,EAAA,WAAU,uBACb,UAACA,2BAAA,kBAAA,IAAAE,oBAAA,aAAA,EAAa,oBAAS,EACzB,CAAA;AAAA,QAED,CAAC,EAAC,+BAAO,WACRF,2BAAA,kBAAA;AAAA,UAACC,oBAAA;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,OAAO;AAAA,cACL,YAAY;AAAA,cACZ,UAAU;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAEJ;AAEJ;;"}
+{"version":3,"file":"ContextMenuItem.cjs.js","sources":["../../../../../src/containers/ContextMenu/ContextMenuItem.tsx"],"sourcesContent":["import React, { RefObject } from 'react'\nimport { Icon, ShortcutTag } from '@ynput/ayon-react-components'\nimport './ContextMenu.scss'\nimport clsx from 'clsx'\n\nexport interface CommandEvent {\n  originalEvent: React.MouseEvent\n  item: {\n    label: string\n    command: (event: CommandEvent) => void\n    shortcut?: string\n  }\n}\n\nexport interface ContextMenuItemProps {\n  icon?: string\n  label?: string\n  shortcut?: string\n  command?: (event: CommandEvent) => void\n  children?: React.ReactNode\n  contextMenuRef: RefObject<{ hide: () => void }>\n  disabled?: boolean\n  hidden?: boolean\n  items?: any[]\n  isSave?: boolean\n  danger?: boolean\n  developer?: boolean\n  style?: React.CSSProperties\n  [key: string]: any // For any additional props\n}\n\nconst ContextMenuItem: React.FC<ContextMenuItemProps> = ({\n  icon,\n  label,\n  shortcut,\n  command,\n  children,\n  contextMenuRef,\n  disabled,\n  hidden,\n  items,\n  isSave,\n  danger,\n  developer,\n  ...props\n}) => {\n  if (hidden) return null\n\n  const onCommand = (e: React.MouseEvent) => {\n    // hide the context menu\n    contextMenuRef.current?.hide()\n    e.preventDefault()\n\n    command?.({\n      originalEvent: e,\n      item: {\n        label: label || '',\n        command: command || (() => {}),\n        shortcut,\n      },\n    })\n  }\n\n  const noItems = items && items.length === 0\n\n  return (\n    <a\n      className={clsx('p-menuitem-link', {\n        'p-disabled': disabled || noItems,\n        danger,\n        developer,\n        save: isSave,\n      })}\n      role=\"menuitem\"\n      href=\"#\"\n      onClick={onCommand}\n      style={{\n        ...props?.style,\n      }}\n      {...props}\n    >\n      {icon && <Icon className=\"p-menuitem-icon\" icon={icon} />}\n      {label && (\n        <span\n          className=\"p-menuitem-text\"\n          style={{\n            whiteSpace: 'nowrap',\n          }}\n        >\n          {label}\n        </span>\n      )}\n      {children}\n      {shortcut && (\n        <div className=\"p-menuitem-shortcut\">\n          <ShortcutTag>{shortcut}</ShortcutTag>\n        </div>\n      )}\n      {!!items?.length && (\n        <Icon\n          icon=\"chevron_right\"\n          style={{\n            marginLeft: 'auto',\n            fontSize: '1.5rem',\n          }}\n        />\n      )}\n    </a>\n  )\n}\n\nexport default ContextMenuItem\n"],"names":["jsxs","jsx","Icon","ShortcutTag"],"mappings":";;;;;AA+BA,MAAM,kBAAkD,CAAC;AAAA,EACvD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,MAAI,OAAe,QAAA;AAEb,QAAA,YAAY,CAAC,MAAwB;;AAEzC,yBAAe,YAAf,mBAAwB;AACxB,MAAE,eAAe;AAEP,uCAAA;AAAA,MACR,eAAe;AAAA,MACf,MAAM;AAAA,QACJ,OAAO,SAAS;AAAA,QAChB,SAAS,YAAY,MAAM;AAAA,QAAA;AAAA,QAC3B;AAAA,MAAA;AAAA,IACF;AAAA,EAEJ;AAEM,QAAA,UAAU,SAAS,MAAM,WAAW;AAGxC,SAAAA,2BAAA,kBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,KAAK,mBAAmB;AAAA,QACjC,cAAc,YAAY;AAAA,QAC1B;AAAA,QACA;AAAA,QACA,MAAM;AAAA,MAAA,CACP;AAAA,MACD,MAAK;AAAA,MACL,MAAK;AAAA,MACL,SAAS;AAAA,MACT,OAAO;AAAA,QACL,GAAG,+BAAO;AAAA,MACZ;AAAA,MACC,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,QAASC,2BAAA,kBAAA,IAAAC,oBAAA,MAAA,EAAK,WAAU,mBAAkB,MAAY;AAAA,QACtD,SACCD,2BAAA,kBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,YAAY;AAAA,YACd;AAAA,YAEC,UAAA;AAAA,UAAA;AAAA,QACH;AAAA,QAED;AAAA,QACA,6DACE,OAAI,EAAA,WAAU,uBACb,UAACA,2BAAA,kBAAA,IAAAE,oBAAA,aAAA,EAAa,oBAAS,EACzB,CAAA;AAAA,QAED,CAAC,EAAC,+BAAO,WACRF,2BAAA,kBAAA;AAAA,UAACC,oBAAA;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,OAAO;AAAA,cACL,YAAY;AAAA,cACZ,UAAU;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAEJ;AAEJ;;"}

package/dist/shared/src/containers/ContextMenu/ContextMenuItem.es.js

@@ -1,6 +1,7 @@
 import { j as jsxRuntimeExports } from "../../../../_virtual/jsx-runtime.es.js";
 import { Icon, ShortcutTag } from "@ynput/ayon-react-components";
 /* empty css                    */
+import clsx from "clsx";
 const ContextMenuItem = ({
   icon,
   label,
@@ -9,14 +10,18 @@ const ContextMenuItem = ({
   children,
   contextMenuRef,
   disabled,
+  hidden,
   items,
   isSave,
   danger,
+  developer,
   ...props
 }) => {
+  if (hidden) return null;
   const onCommand = (e) => {
     var _a;
     (_a = contextMenuRef.current) == null ? void 0 : _a.hide();
+    e.preventDefault();
     command == null ? void 0 : command({
       originalEvent: e,
       item: {
@@ -31,7 +36,12 @@ const ContextMenuItem = ({
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "a",
     {
-      className: `p-menuitem-link ${disabled || noItems ? "p-disabled" : ""} ${danger ? "danger" : ""} ${isSave ? "save" : ""}`,
+      className: clsx("p-menuitem-link", {
+        "p-disabled": disabled || noItems,
+        danger,
+        developer,
+        save: isSave
+      }),
       role: "menuitem",
       href: "#",
       onClick: onCommand,

package/dist/shared/src/containers/ContextMenu/ContextMenuItem.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenuItem.es.js","sources":["../../../../../src/containers/ContextMenu/ContextMenuItem.tsx"],"sourcesContent":["import React, { RefObject } from 'react'\nimport { Icon, ShortcutTag } from '@ynput/ayon-react-components'\nimport './ContextMenu.scss'\n\ninterface CommandEvent {\n  originalEvent: React.MouseEvent\n  item: {\n    label: string\n    command: (event: CommandEvent) => void\n    shortcut?: string\n  }\n}\n\nexport interface ContextMenuItemProps {\n  icon?: string\n  label?: string\n  shortcut?: string\n  command?: (event: CommandEvent) => void\n  children?: React.ReactNode\n  contextMenuRef: RefObject<{ hide: () => void }>\n  disabled?: boolean\n  items?: any[]\n  isSave?: boolean\n  danger?: boolean\n  style?: React.CSSProperties\n  [key: string]: any // For any additional props\n}\n\nconst ContextMenuItem: React.FC<ContextMenuItemProps> = ({\n  icon,\n  label,\n  shortcut,\n  command,\n  children,\n  contextMenuRef,\n  disabled,\n  items,\n  isSave,\n  danger,\n  ...props\n}) => {\n  const onCommand = (e: React.MouseEvent) => {\n    // hide the context menu\n    contextMenuRef.current?.hide()\n\n    command?.({\n      originalEvent: e,\n      item: {\n        label: label || '',\n        command: command || (() => {}),\n        shortcut,\n      },\n    })\n  }\n\n  const noItems = items && items.length === 0\n\n  return (\n    <a\n      className={`p-menuitem-link ${disabled || noItems ? 'p-disabled' : ''} ${\n        danger ? 'danger' : ''\n      } ${isSave ? 'save' : ''}`}\n      role=\"menuitem\"\n      href=\"#\"\n      onClick={onCommand}\n      style={{\n        ...props?.style,\n      }}\n      {...props}\n    >\n      {icon && <Icon className=\"p-menuitem-icon\" icon={icon} />}\n      {label && (\n        <span\n          className=\"p-menuitem-text\"\n          style={{\n            whiteSpace: 'nowrap',\n          }}\n        >\n          {label}\n        </span>\n      )}\n      {children}\n      {shortcut && (\n        <div className=\"p-menuitem-shortcut\">\n          <ShortcutTag>{shortcut}</ShortcutTag>\n        </div>\n      )}\n      {!!items?.length && (\n        <Icon\n          icon=\"chevron_right\"\n          style={{\n            marginLeft: 'auto',\n            fontSize: '1.5rem',\n          }}\n        />\n      )}\n    </a>\n  )\n}\n\nexport default ContextMenuItem\n"],"names":["jsxs","jsx"],"mappings":";;;AA4BA,MAAM,kBAAkD,CAAC;AAAA,EACvD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACE,QAAA,YAAY,CAAC,MAAwB;;AAEzC,yBAAe,YAAf,mBAAwB;AAEd,uCAAA;AAAA,MACR,eAAe;AAAA,MACf,MAAM;AAAA,QACJ,OAAO,SAAS;AAAA,QAChB,SAAS,YAAY,MAAM;AAAA,QAAA;AAAA,QAC3B;AAAA,MAAA;AAAA,IACF;AAAA,EAEJ;AAEM,QAAA,UAAU,SAAS,MAAM,WAAW;AAGxC,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,mBAAmB,YAAY,UAAU,eAAe,EAAE,IACnE,SAAS,WAAW,EACtB,IAAI,SAAS,SAAS,EAAE;AAAA,MACxB,MAAK;AAAA,MACL,MAAK;AAAA,MACL,SAAS;AAAA,MACT,OAAO;AAAA,QACL,GAAG,+BAAO;AAAA,MACZ;AAAA,MACC,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,QAASC,kCAAA,IAAA,MAAA,EAAK,WAAU,mBAAkB,MAAY;AAAA,QACtD,SACCA,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,YAAY;AAAA,YACd;AAAA,YAEC,UAAA;AAAA,UAAA;AAAA,QACH;AAAA,QAED;AAAA,QACA,kDACE,OAAI,EAAA,WAAU,uBACb,UAACA,kCAAA,IAAA,aAAA,EAAa,oBAAS,EACzB,CAAA;AAAA,QAED,CAAC,EAAC,+BAAO,WACRA,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,OAAO;AAAA,cACL,YAAY;AAAA,cACZ,UAAU;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAEJ;AAEJ;"}
+{"version":3,"file":"ContextMenuItem.es.js","sources":["../../../../../src/containers/ContextMenu/ContextMenuItem.tsx"],"sourcesContent":["import React, { RefObject } from 'react'\nimport { Icon, ShortcutTag } from '@ynput/ayon-react-components'\nimport './ContextMenu.scss'\nimport clsx from 'clsx'\n\nexport interface CommandEvent {\n  originalEvent: React.MouseEvent\n  item: {\n    label: string\n    command: (event: CommandEvent) => void\n    shortcut?: string\n  }\n}\n\nexport interface ContextMenuItemProps {\n  icon?: string\n  label?: string\n  shortcut?: string\n  command?: (event: CommandEvent) => void\n  children?: React.ReactNode\n  contextMenuRef: RefObject<{ hide: () => void }>\n  disabled?: boolean\n  hidden?: boolean\n  items?: any[]\n  isSave?: boolean\n  danger?: boolean\n  developer?: boolean\n  style?: React.CSSProperties\n  [key: string]: any // For any additional props\n}\n\nconst ContextMenuItem: React.FC<ContextMenuItemProps> = ({\n  icon,\n  label,\n  shortcut,\n  command,\n  children,\n  contextMenuRef,\n  disabled,\n  hidden,\n  items,\n  isSave,\n  danger,\n  developer,\n  ...props\n}) => {\n  if (hidden) return null\n\n  const onCommand = (e: React.MouseEvent) => {\n    // hide the context menu\n    contextMenuRef.current?.hide()\n    e.preventDefault()\n\n    command?.({\n      originalEvent: e,\n      item: {\n        label: label || '',\n        command: command || (() => {}),\n        shortcut,\n      },\n    })\n  }\n\n  const noItems = items && items.length === 0\n\n  return (\n    <a\n      className={clsx('p-menuitem-link', {\n        'p-disabled': disabled || noItems,\n        danger,\n        developer,\n        save: isSave,\n      })}\n      role=\"menuitem\"\n      href=\"#\"\n      onClick={onCommand}\n      style={{\n        ...props?.style,\n      }}\n      {...props}\n    >\n      {icon && <Icon className=\"p-menuitem-icon\" icon={icon} />}\n      {label && (\n        <span\n          className=\"p-menuitem-text\"\n          style={{\n            whiteSpace: 'nowrap',\n          }}\n        >\n          {label}\n        </span>\n      )}\n      {children}\n      {shortcut && (\n        <div className=\"p-menuitem-shortcut\">\n          <ShortcutTag>{shortcut}</ShortcutTag>\n        </div>\n      )}\n      {!!items?.length && (\n        <Icon\n          icon=\"chevron_right\"\n          style={{\n            marginLeft: 'auto',\n            fontSize: '1.5rem',\n          }}\n        />\n      )}\n    </a>\n  )\n}\n\nexport default ContextMenuItem\n"],"names":["jsxs","jsx"],"mappings":";;;;AA+BA,MAAM,kBAAkD,CAAC;AAAA,EACvD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,MAAI,OAAe,QAAA;AAEb,QAAA,YAAY,CAAC,MAAwB;;AAEzC,yBAAe,YAAf,mBAAwB;AACxB,MAAE,eAAe;AAEP,uCAAA;AAAA,MACR,eAAe;AAAA,MACf,MAAM;AAAA,QACJ,OAAO,SAAS;AAAA,QAChB,SAAS,YAAY,MAAM;AAAA,QAAA;AAAA,QAC3B;AAAA,MAAA;AAAA,IACF;AAAA,EAEJ;AAEM,QAAA,UAAU,SAAS,MAAM,WAAW;AAGxC,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,KAAK,mBAAmB;AAAA,QACjC,cAAc,YAAY;AAAA,QAC1B;AAAA,QACA;AAAA,QACA,MAAM;AAAA,MAAA,CACP;AAAA,MACD,MAAK;AAAA,MACL,MAAK;AAAA,MACL,SAAS;AAAA,MACT,OAAO;AAAA,QACL,GAAG,+BAAO;AAAA,MACZ;AAAA,MACC,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,QAASC,kCAAA,IAAA,MAAA,EAAK,WAAU,mBAAkB,MAAY;AAAA,QACtD,SACCA,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,YAAY;AAAA,YACd;AAAA,YAEC,UAAA;AAAA,UAAA;AAAA,QACH;AAAA,QAED;AAAA,QACA,kDACE,OAAI,EAAA,WAAU,uBACb,UAACA,kCAAA,IAAA,aAAA,EAAa,oBAAS,EACzB,CAAA;AAAA,QAED,CAAC,EAAC,+BAAO,WACRA,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,OAAO;AAAA,cACL,YAAY;AAAA,cACZ,UAAU;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAEJ;AAEJ;"}