@ynput/ayon-frontend-shared 0.4.2 → 0.4.4

package/dist/shared/src/components/SyncButton/SyncButton.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"SyncButton.cjs.js","sources":["../../../../../src/components/SyncButton/SyncButton.tsx"],"sourcesContent":["import { Button, ButtonProps, InputSwitch } from '@ynput/ayon-react-components'\nimport { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from 'react'\nimport styled from 'styled-components'\nimport {\n  FORCE_AUTO_SYNC,\n  OnSyncDataCallback,\n  RTEntityUpdate,\n  TopicUpdateType,\n  useAutoSyncSettings,\n  useSyncUpdates,\n} from '@shared/context/EntityUpdatesContext'\nimport { Menu, MenuContainer } from '../Menu'\nimport { useMenuContext } from '@shared/context/MenuContext'\nimport clsx from 'clsx'\nimport { shouldBlockShortcuts } from '@shared/util'\n\nconst UPDATE_TYPES: { updateTypes: TopicUpdateType[]; label: string; tooltip?: string }[] = [\n  {\n    updateTypes: ['created'],\n    label: 'Creations',\n    tooltip: 'Automatically add newly created entities',\n  },\n  {\n    updateTypes: ['attrib_changed'],\n    label: 'Attribute Changes',\n    tooltip: 'Automatically update existing entities',\n  },\n  {\n    updateTypes: ['deleted'],\n    label: 'Deletions',\n    tooltip: 'Automatically remove deleted entities',\n  },\n  // all other update types are grouped together\n  {\n    updateTypes: ['label_changed', 'renamed', 'type_changed', 'status_changed', 'tags_changed'],\n    label: 'Other Changes',\n    tooltip: 'Automatically update other changes to existing entities',\n  },\n]\n\nconst StyledSync = styled(Button)`\n  /* put above the menu so it's still clickable */\n  /* NOTE: this will need fixing as this also puts it above dialogs */\n  /* z-index: 1001;  */\n\n  /* spin icon */\n  &.syncing {\n    .icon {\n      animation: spin 1s linear infinite;\n    }\n  }\n  .icon {\n    /* flip */\n    scale: -1 1;\n    @keyframes spin {\n      0% {\n        transform: rotate(360deg);\n      }\n      100% {\n        transform: rotate(0deg);\n      }\n    }\n  }\n\n  &.auto-sync:not(.has-updates) {\n    &,\n    .icon {\n      color: var(--md-sys-color-primary);\n    }\n  }\n`\n\nconst SyncSettings = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-large);\n  padding: 12px 16px;\n  min-width: 180px;\n\n  .setting {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 24px;\n    color: var(--md-sys-color-on-surface);\n    white-space: nowrap;\n  }\n\n  .global {\n    padding-bottom: 8px;\n    border-bottom: 1px solid var(--md-sys-color-surface-container-highest);\n    font-weight: 600;\n  }\n`\n\ninterface SyncButtonProps extends Omit<ButtonProps, 'onClick'> {\n  projectNames?: string[]\n  topics: string[]\n  onSync?: OnSyncDataCallback\n  shouldSyncOnUpdate?: (update: RTEntityUpdate) => boolean\n  hideWhenNoUpdates?: boolean\n}\n\nconst formatUpdateType = (updateType: string, entityType: string, count: number) => {\n  const entityLabel = `${entityType}${count === 1 ? '' : 's'}`\n  if (updateType === 'created') return `new ${entityLabel}`\n  if (updateType === 'deleted') return `${entityLabel} deleted`\n  return `${count} ${entityLabel} ${updateType.replaceAll('_', ' ')}`\n}\n\nconst getUpdatesTooltip = (updates: RTEntityUpdate[]) => {\n  const groupedUpdates = new Map<\n    string,\n    { entityType: string; updateType: string; ids: Set<string> }\n  >()\n\n  updates.forEach((update) => {\n    const [, entityType, updateType] = update.topic.split('.')\n    if (!entityType || !updateType) return\n\n    const key = `${entityType}.${updateType}`\n    const group = groupedUpdates.get(key) || {\n      entityType,\n      updateType,\n      ids: new Set<string>(),\n    }\n    group.ids.add(update.entityId || String(update.id))\n    groupedUpdates.set(key, group)\n  })\n\n  const labels = Array.from(groupedUpdates.values()).map(({ entityType, updateType, ids }) =>\n    formatUpdateType(updateType, entityType, ids.size),\n  )\n\n  return `${labels.join(', ')} since last sync`\n}\n\nexport const SyncButton = forwardRef<HTMLButtonElement, SyncButtonProps>(\n  (\n    { projectNames, topics, onSync, shouldSyncOnUpdate, hideWhenNoUpdates = false, ...props },\n    ref,\n  ) => {\n    const [isSyncing, setIsSyncing] = useState(false)\n    const [autoSyncSettings, updateAutoSyncSettings] = useAutoSyncSettings()\n    const { setMenuOpen } = useMenuContext()\n    const buttonRef = useRef<HTMLButtonElement | null>(null)\n    const closeTimeout = useRef<ReturnType<typeof setTimeout>>()\n    const menuId = useId()\n\n    useEffect(() => {\n      return () => {\n        const timeout = closeTimeout.current\n        closeTimeout.current = undefined\n        if (timeout !== undefined) {\n          clearTimeout(timeout)\n        }\n      }\n    }, [])\n    useImperativeHandle(ref, () => buttonRef.current as HTMLButtonElement, [])\n\n    const handleSync = async () => {\n      setIsSyncing(true)\n      try {\n        await onSync?.(updates)\n      } finally {\n        setIsSyncing(false)\n      }\n    }\n\n    const { updates, hasUpdates } = useSyncUpdates({\n      projectNames,\n      topics,\n      isSyncing,\n      shouldSyncOnUpdate,\n    })\n\n    useEffect(() => {\n      const handleKeyDown = (event: KeyboardEvent) => {\n        if (\n          event.repeat ||\n          !event.shiftKey ||\n          event.ctrlKey ||\n          event.metaKey ||\n          event.key.toLowerCase() !== 'r' ||\n          shouldBlockShortcuts(event)\n        ) {\n          return\n        }\n\n        event.preventDefault()\n        event.stopPropagation()\n        handleSync()\n      }\n\n      window.addEventListener('keydown', handleKeyDown)\n      return () => window.removeEventListener('keydown', handleKeyDown)\n    }, [handleSync])\n\n    if (hideWhenNoUpdates && !hasUpdates) return null\n\n    const updatesTooltip = getUpdatesTooltip(updates)\n    const isAutoSyncEnabled = Object.values(autoSyncSettings).some(Boolean)\n    const isGlobalAutoSyncEnabled = Object.values(autoSyncSettings).every(Boolean)\n\n    const cancelMenuClose = () => {\n      if (closeTimeout.current) clearTimeout(closeTimeout.current)\n    }\n\n    const openSettingsMenu = () => {\n      cancelMenuClose()\n      setMenuOpen(menuId)\n    }\n\n    const closeSettingsMenu = () => {\n      cancelMenuClose()\n      closeTimeout.current = setTimeout(() => setMenuOpen(false), 100)\n    }\n\n    return (\n      <>\n        <StyledSync\n          {...props}\n          icon=\"sync\"\n          ref={buttonRef}\n          onClick={handleSync}\n          onMouseEnter={openSettingsMenu}\n          onMouseLeave={closeSettingsMenu}\n          className={clsx(props.className, {\n            syncing: isSyncing,\n            'has-updates': hasUpdates,\n            'auto-sync': isAutoSyncEnabled && !FORCE_AUTO_SYNC,\n          })}\n          data-shortcut=\"Shift+R\"\n          data-tooltip={hasUpdates ? updatesTooltip : 'Refresh data'}\n          variant={hasUpdates ? 'filled' : 'surface'}\n        />\n        {!FORCE_AUTO_SYNC && (\n          <MenuContainer\n            id={menuId}\n            target={buttonRef.current}\n            align=\"right\"\n            onMouseEnter={cancelMenuClose}\n            onMouseLeave={closeSettingsMenu}\n          >\n            <Menu\n              menu={[\n                {\n                  id: 'sync-settings',\n                  node: (\n                    <SyncSettings\n                      key=\"sync-settings\"\n                      onClick={(e) => e.stopPropagation()}\n                      onMouseEnter={cancelMenuClose}\n                      onMouseLeave={closeSettingsMenu}\n                    >\n                      <div\n                        className=\"setting global\"\n                        data-tooltip={\n                          isGlobalAutoSyncEnabled\n                            ? 'New entities and updates will be automatically synced'\n                            : 'Auto updates are disabled. Click the sync button to manually refresh data.'\n                        }\n                      >\n                        <span>Auto updates</span>\n                        <InputSwitch\n                          checked={isGlobalAutoSyncEnabled}\n                          onChange={() =>\n                            updateAutoSyncSettings({ global: !isGlobalAutoSyncEnabled })\n                          }\n                        />\n                      </div>\n                      {UPDATE_TYPES.map((setting) => (\n                        <div className=\"setting\" key={setting.updateTypes.join(',')}>\n                          <span>{setting.label}</span>\n                          <InputSwitch\n                            checked={setting.updateTypes.every((type) => autoSyncSettings[type])}\n                            onChange={() =>\n                              updateAutoSyncSettings({\n                                settings: setting.updateTypes.reduce(\n                                  (acc, type) => ({\n                                    ...acc,\n                                    [type]: !autoSyncSettings[type],\n                                  }),\n                                  {},\n                                ),\n                              })\n                            }\n                            data-tooltip={setting.tooltip}\n                          />\n                        </div>\n                      ))}\n                    </SyncSettings>\n                  ),\n                },\n              ]}\n            />\n          </MenuContainer>\n        )}\n      </>\n    )\n  },\n)\n"],"names":["StyledSync","styled","Button","formatUpdateType","updateType","entityType","count","entityLabel","getUpdatesTooltip","updates","groupedUpdates","update","key","group","ids","SyncButton","forwardRef","projectNames","topics","onSync","shouldSyncOnUpdate","hideWhenNoUpdates","props","ref","isSyncing","setIsSyncing","useState","autoSyncSettings","updateAutoSyncSettings","useAutoSyncSettings","setMenuOpen","useMenuContext","buttonRef","useRef","closeTimeout","menuId","useId","useEffect","timeout","useImperativeHandle","handleSync","hasUpdates","useSyncUpdates","handleKeyDown","event","shouldBlockShortcuts","updatesTooltip","isAutoSyncEnabled","cancelMenuClose","openSettingsMenu","closeSettingsMenu","jsxs","Fragment","jsx","clsx","FORCE_AUTO_SYNC"],"mappings":"g2BAwCA,MAAMA,EAAaC,EAAOC,QAAM;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,EAgCXD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA+B5B,MAAME,EAAmB,CAACC,EAAoBC,EAAoBC,IAAkB,CAClF,MAAMC,EAAc,GAAGF,CAAU,GAAGC,IAAU,EAAI,GAAK,GAAG,GAC1D,OAAIF,IAAe,UAAkB,OAAOG,CAAW,GACnDH,IAAe,UAAkB,GAAGG,CAAW,WAC5C,GAAGD,CAAK,IAAIC,CAAW,IAAIH,EAAW,WAAW,IAAK,GAAG,CAAC,EACnE,EAEMI,EAAqBC,GAA8B,CACvD,MAAMC,MAAqB,IAK3B,OAAAD,EAAQ,QAASE,GAAW,CAC1B,KAAM,CAAA,CAAGN,EAAYD,CAAU,EAAIO,EAAO,MAAM,MAAM,GAAG,EACzD,GAAI,CAACN,GAAc,CAACD,EAAY,OAEhC,MAAMQ,EAAM,GAAGP,CAAU,IAAID,CAAU,GACjCS,EAAQH,EAAe,IAAIE,CAAG,GAAK,CACvC,WAAAP,EACA,WAAAD,EACA,QAAS,GAAY,EAEvBS,EAAM,IAAI,IAAIF,EAAO,UAAY,OAAOA,EAAO,EAAE,CAAC,EAClDD,EAAe,IAAIE,EAAKC,CAAK,CAC/B,CAAC,EAMM,GAJQ,MAAM,KAAKH,EAAe,OAAA,CAAQ,EAAE,IAAI,CAAC,CAAE,WAAAL,EAAY,WAAAD,EAAY,IAAAU,CAAA,IAChFX,EAAiBC,EAAYC,EAAYS,EAAI,IAAI,CAAA,EAGlC,KAAK,IAAI,CAAC,kBAC7B,EAEaC,EAAaC,EAAAA,WACxB,CACE,CAAE,aAAAC,EAAc,OAAAC,EAAQ,OAAAC,EAAQ,mBAAAC,EAAoB,kBAAAC,EAAoB,GAAO,GAAGC,CAAA,EAClFC,IACG,CACH,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAAA,SAAS,EAAK,EAC1C,CAACC,EAAkBC,CAAsB,EAAIC,sBAAA,EAC7C,CAAE,YAAAC,CAAA,EAAgBC,iBAAA,EAClBC,EAAYC,EAAAA,OAAiC,IAAI,EACjDC,EAAeD,EAAAA,OAAA,EACfE,EAASC,EAAAA,MAAA,EAEfC,EAAAA,UAAU,IACD,IAAM,CACX,MAAMC,EAAUJ,EAAa,QAC7BA,EAAa,QAAU,OACnBI,IAAY,QACd,aAAaA,CAAO,CAExB,EACC,CAAA,CAAE,EACLC,EAAAA,oBAAoBhB,EAAK,IAAMS,EAAU,QAA8B,CAAA,CAAE,EAEzE,MAAMQ,EAAa,SAAY,CAC7Bf,EAAa,EAAI,EACjB,GAAI,CACF,MAAMN,IAASV,CAAO,CACxB,QAAA,CACEgB,EAAa,EAAK,CACpB,CACF,EAEM,CAAE,QAAAhB,EAAS,WAAAgC,CAAA,EAAeC,iBAAe,CAC7C,aAAAzB,EACA,OAAAC,EACA,UAAAM,EACA,mBAAAJ,CAAA,CACD,EAwBD,GAtBAiB,EAAAA,UAAU,IAAM,CACd,MAAMM,EAAiBC,GAAyB,CAE5CA,EAAM,QACN,CAACA,EAAM,UACPA,EAAM,SACNA,EAAM,SACNA,EAAM,IAAI,YAAA,IAAkB,KAC5BC,EAAAA,qBAAqBD,CAAK,IAK5BA,EAAM,eAAA,EACNA,EAAM,gBAAA,EACNJ,EAAA,EACF,EAEA,cAAO,iBAAiB,UAAWG,CAAa,EACzC,IAAM,OAAO,oBAAoB,UAAWA,CAAa,CAClE,EAAG,CAACH,CAAU,CAAC,EAEXnB,GAAqB,CAACoB,EAAY,OAAO,KAE7C,MAAMK,EAAiBtC,EAAkBC,CAAO,EAC1CsC,EAAoB,OAAO,OAAOpB,CAAgB,EAAE,KAAK,OAAO,EACtC,OAAO,OAAOA,CAAgB,EAAE,MAAM,OAAO,EAE7E,MAAMqB,EAAkB,IAAM,CACxBd,EAAa,SAAS,aAAaA,EAAa,OAAO,CAC7D,EAEMe,EAAmB,IAAM,CAC7BD,EAAA,EACAlB,EAAYK,CAAM,CACpB,EAEMe,EAAoB,IAAM,CAC9BF,EAAA,EACAd,EAAa,QAAU,WAAW,IAAMJ,EAAY,EAAK,EAAG,GAAG,CACjE,EAEA,OACEqB,EAAAA,kBAAAA,KAAAC,6BAAA,CACE,SAAA,CAAAC,EAAAA,kBAAAA,IAACrD,EAAA,CACE,GAAGsB,EACJ,KAAK,OACL,IAAKU,EACL,QAASQ,EACT,aAAcS,EACd,aAAcC,EACd,UAAWI,EAAKhC,EAAM,UAAW,CAC/B,QAASE,EACT,cAAeiB,EACf,YAAaM,GAAqB,CAACQ,EAAAA,eAAA,CACpC,EACD,gBAAc,UACd,eAAcd,EAAaK,EAAiB,eAC5C,QAASL,EAAa,SAAW,SAAA,CAAA,EAElC,CAACc,EAAAA,eA4DA,EAEJ,CAEJ,CACF"}
+{"version":3,"file":"SyncButton.cjs.js","sources":["../../../../../src/components/SyncButton/SyncButton.tsx"],"sourcesContent":["import { Button, ButtonProps, InputSwitch } from '@ynput/ayon-react-components'\nimport { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from 'react'\nimport styled from 'styled-components'\nimport {\n  FORCE_AUTO_SYNC,\n  OnSyncDataCallback,\n  RTEntityUpdate,\n  TopicUpdateType,\n  useAutoSyncSettings,\n  useSyncUpdates,\n} from '@shared/context/EntityUpdatesContext'\nimport { Menu, MenuContainer } from '../Menu'\nimport { useMenuContext } from '@shared/context/MenuContext'\nimport clsx from 'clsx'\nimport { shouldBlockShortcuts } from '@shared/util'\n\nconst UPDATE_TYPES: { updateTypes: TopicUpdateType[]; label: string; tooltip?: string }[] = [\n  {\n    updateTypes: ['created'],\n    label: 'Creations',\n    tooltip: 'Automatically add newly created entities',\n  },\n  {\n    updateTypes: ['attrib_changed'],\n    label: 'Attribute Changes',\n    tooltip: 'Automatically update existing entities',\n  },\n  {\n    updateTypes: ['deleted'],\n    label: 'Deletions',\n    tooltip: 'Automatically remove deleted entities',\n  },\n  // all other update types are grouped together\n  {\n    updateTypes: ['label_changed', 'renamed', 'type_changed', 'status_changed', 'tags_changed'],\n    label: 'Other Changes',\n    tooltip: 'Automatically update other changes to existing entities',\n  },\n]\n\nconst StyledSync = styled(Button)`\n  /* put above the menu so it's still clickable */\n  /* NOTE: this will need fixing as this also puts it above dialogs */\n  /* z-index: 1001;  */\n\n  /* spin icon */\n  &.syncing {\n    .icon {\n      animation: spin 1s linear infinite;\n    }\n  }\n  .icon {\n    /* flip */\n    scale: -1 1;\n    @keyframes spin {\n      0% {\n        transform: rotate(360deg);\n      }\n      100% {\n        transform: rotate(0deg);\n      }\n    }\n  }\n\n  &.auto-sync:not(.has-updates) {\n    &,\n    .icon {\n      color: var(--md-sys-color-primary);\n    }\n  }\n`\n\nconst SyncSettings = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-large);\n  padding: 12px 16px;\n  min-width: 180px;\n\n  .setting {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 24px;\n    color: var(--md-sys-color-on-surface);\n    white-space: nowrap;\n  }\n\n  .global {\n    padding-bottom: 8px;\n    border-bottom: 1px solid var(--md-sys-color-surface-container-highest);\n    font-weight: 600;\n  }\n`\n\ninterface SyncButtonProps extends Omit<ButtonProps, 'onClick'> {\n  projectNames?: string[]\n  topics: string[]\n  onSync?: OnSyncDataCallback\n  shouldSyncOnUpdate?: (update: RTEntityUpdate) => boolean\n  hideWhenNoUpdates?: boolean\n}\n\nconst formatUpdateType = (updateType: string, entityType: string, count: number) => {\n  const entityLabel = `${entityType}${count === 1 ? '' : 's'}`\n  if (updateType === 'created') return `new ${entityLabel}`\n  if (updateType === 'deleted') return `${entityLabel} deleted`\n  return `${count} ${entityLabel} ${updateType.replaceAll('_', ' ')}`\n}\n\nconst getUpdatesTooltip = (updates: RTEntityUpdate[]) => {\n  const groupedUpdates = new Map<\n    string,\n    { entityType: string; updateType: string; ids: Set<string> }\n  >()\n\n  updates.forEach((update) => {\n    const [, entityType, updateType] = update.topic.split('.')\n    if (!entityType || !updateType) return\n\n    const key = `${entityType}.${updateType}`\n    const group = groupedUpdates.get(key) || {\n      entityType,\n      updateType,\n      ids: new Set<string>(),\n    }\n    group.ids.add(update.entityId || String(update.id))\n    groupedUpdates.set(key, group)\n  })\n\n  const labels = Array.from(groupedUpdates.values()).map(({ entityType, updateType, ids }) =>\n    formatUpdateType(updateType, entityType, ids.size),\n  )\n\n  return `${labels.join(', ')} since last sync`\n}\n\nexport const SyncButton = forwardRef<HTMLButtonElement, SyncButtonProps>(\n  (\n    { projectNames, topics, onSync, shouldSyncOnUpdate, hideWhenNoUpdates = false, ...props },\n    ref,\n  ) => {\n    const [isSyncing, setIsSyncing] = useState(false)\n    const [autoSyncSettings, updateAutoSyncSettings] = useAutoSyncSettings()\n    const { setMenuOpen } = useMenuContext()\n    const buttonRef = useRef<HTMLButtonElement | null>(null)\n    const closeTimeout = useRef<ReturnType<typeof setTimeout>>()\n    const menuId = useId()\n\n    useEffect(() => {\n      return () => {\n        const timeout = closeTimeout.current\n        closeTimeout.current = undefined\n        if (timeout !== undefined) {\n          clearTimeout(timeout)\n        }\n      }\n    }, [])\n    useImperativeHandle(ref, () => buttonRef.current as HTMLButtonElement, [])\n\n    const handleSync = async () => {\n      setIsSyncing(true)\n      try {\n        await onSync?.(updates)\n      } finally {\n        setIsSyncing(false)\n      }\n    }\n\n    const { updates, hasUpdates } = useSyncUpdates({\n      projectNames,\n      topics,\n      isSyncing,\n      shouldSyncOnUpdate,\n    })\n\n    useEffect(() => {\n      const handleKeyDown = (event: KeyboardEvent) => {\n        if (\n          event.repeat ||\n          !event.shiftKey ||\n          event.ctrlKey ||\n          event.metaKey ||\n          event.key.toLowerCase() !== 'r' ||\n          shouldBlockShortcuts(event)\n        ) {\n          return\n        }\n\n        event.preventDefault()\n        event.stopPropagation()\n        handleSync()\n      }\n\n      window.addEventListener('keydown', handleKeyDown)\n      return () => window.removeEventListener('keydown', handleKeyDown)\n    }, [handleSync])\n\n    if (hideWhenNoUpdates && !hasUpdates) return null\n\n    const updatesTooltip = getUpdatesTooltip(updates)\n    const isAutoSyncEnabled = Object.values(autoSyncSettings).some(Boolean)\n    const isGlobalAutoSyncEnabled = Object.values(autoSyncSettings).every(Boolean)\n\n    const cancelMenuClose = () => {\n      if (closeTimeout.current) clearTimeout(closeTimeout.current)\n    }\n\n    const openSettingsMenu = () => {\n      cancelMenuClose()\n      setMenuOpen(menuId)\n    }\n\n    const closeSettingsMenu = () => {\n      cancelMenuClose()\n      closeTimeout.current = setTimeout(() => setMenuOpen(false), 100)\n    }\n\n    return (\n      <>\n        <StyledSync\n          {...props}\n          icon=\"sync\"\n          ref={buttonRef}\n          onClick={handleSync}\n          onMouseEnter={openSettingsMenu}\n          onMouseLeave={closeSettingsMenu}\n          className={clsx(props.className, {\n            syncing: isSyncing,\n            'has-updates': hasUpdates,\n            'auto-sync': isAutoSyncEnabled && !FORCE_AUTO_SYNC,\n          })}\n          data-shortcut=\"Shift+R\"\n          data-tooltip={hasUpdates ? updatesTooltip : 'Refresh data'}\n          variant={hasUpdates ? 'filled' : 'surface'}\n        />\n        {!FORCE_AUTO_SYNC && (\n          <MenuContainer\n            id={menuId}\n            target={buttonRef.current}\n            align=\"right\"\n            onMouseEnter={cancelMenuClose}\n            onMouseLeave={closeSettingsMenu}\n          >\n            <Menu\n              menu={[\n                {\n                  id: 'sync-settings',\n                  node: (\n                    <SyncSettings\n                      key=\"sync-settings\"\n                      onClick={(e) => e.stopPropagation()}\n                      onMouseEnter={cancelMenuClose}\n                      onMouseLeave={closeSettingsMenu}\n                    >\n                      <div\n                        className=\"setting global\"\n                        data-tooltip={\n                          isGlobalAutoSyncEnabled\n                            ? 'New entities and updates will be automatically synced'\n                            : 'Auto updates are disabled. Click the sync button to manually refresh data.'\n                        }\n                      >\n                        <span>Auto updates</span>\n                        <InputSwitch\n                          checked={isGlobalAutoSyncEnabled}\n                          onChange={() =>\n                            updateAutoSyncSettings({ global: !isGlobalAutoSyncEnabled })\n                          }\n                        />\n                      </div>\n                      {UPDATE_TYPES.map((setting) => (\n                        <div className=\"setting\" key={setting.updateTypes.join(',')}>\n                          <span>{setting.label}</span>\n                          <InputSwitch\n                            checked={setting.updateTypes.every((type) => autoSyncSettings[type])}\n                            onChange={() =>\n                              updateAutoSyncSettings({\n                                settings: setting.updateTypes.reduce(\n                                  (acc, type) => ({\n                                    ...acc,\n                                    [type]: !autoSyncSettings[type],\n                                  }),\n                                  {},\n                                ),\n                              })\n                            }\n                            data-tooltip={setting.tooltip}\n                          />\n                        </div>\n                      ))}\n                    </SyncSettings>\n                  ),\n                },\n              ]}\n            />\n          </MenuContainer>\n        )}\n      </>\n    )\n  },\n)\n"],"names":["StyledSync","styled","Button","formatUpdateType","updateType","entityType","count","entityLabel","getUpdatesTooltip","updates","groupedUpdates","update","key","group","ids","SyncButton","forwardRef","projectNames","topics","onSync","shouldSyncOnUpdate","hideWhenNoUpdates","props","ref","isSyncing","setIsSyncing","useState","autoSyncSettings","updateAutoSyncSettings","useAutoSyncSettings","setMenuOpen","useMenuContext","buttonRef","useRef","closeTimeout","menuId","useId","useEffect","timeout","useImperativeHandle","handleSync","hasUpdates","useSyncUpdates","handleKeyDown","event","shouldBlockShortcuts","updatesTooltip","isAutoSyncEnabled","cancelMenuClose","openSettingsMenu","closeSettingsMenu","jsxs","Fragment","jsx","clsx","FORCE_AUTO_SYNC"],"mappings":"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"}

package/dist/shared/src/components/SyncButton/SyncButton.es.js

@@ -17,6 +17,7 @@ import "react-toastify";
 import "uuid";
 import { shouldBlockShortcuts as N } from "../../util/keyboardShortcuts.es.js";
 import "../../api/queries/users/updateUsers.es.js";
+import "../../util/searchTerms.es.js";
 import "../../util/pubsub.es.js";
 const _ = $(R)`
   /* put above the menu so it's still clickable */
@@ -88,7 +89,7 @@ const z = (n, s, i) => {
   }), `${Array.from(s.values()).map(
     ({ entityType: t, updateType: r, ids: e }) => z(r, t, e.size)
   ).join(", ")} since last sync`;
-}, lt = A(
+}, pt = A(
   ({ projectNames: n, topics: s, onSync: i, shouldSyncOnUpdate: t, hideWhenNoUpdates: r = !1, ...e }, p) => {
     const [a, f] = C(!1), [y, F] = B(), { setMenuOpen: g } = L(), S = x(null), c = x(), E = O();
     b(() => () => {
@@ -148,6 +149,6 @@ const z = (n, s, i) => {
   }
 );
 export {
-  lt as SyncButton
+  pt as SyncButton
 };
 //# sourceMappingURL=SyncButton.es.js.map

package/dist/shared/src/components/SyncButton/SyncButton.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"SyncButton.es.js","sources":["../../../../../src/components/SyncButton/SyncButton.tsx"],"sourcesContent":["import { Button, ButtonProps, InputSwitch } from '@ynput/ayon-react-components'\nimport { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from 'react'\nimport styled from 'styled-components'\nimport {\n  FORCE_AUTO_SYNC,\n  OnSyncDataCallback,\n  RTEntityUpdate,\n  TopicUpdateType,\n  useAutoSyncSettings,\n  useSyncUpdates,\n} from '@shared/context/EntityUpdatesContext'\nimport { Menu, MenuContainer } from '../Menu'\nimport { useMenuContext } from '@shared/context/MenuContext'\nimport clsx from 'clsx'\nimport { shouldBlockShortcuts } from '@shared/util'\n\nconst UPDATE_TYPES: { updateTypes: TopicUpdateType[]; label: string; tooltip?: string }[] = [\n  {\n    updateTypes: ['created'],\n    label: 'Creations',\n    tooltip: 'Automatically add newly created entities',\n  },\n  {\n    updateTypes: ['attrib_changed'],\n    label: 'Attribute Changes',\n    tooltip: 'Automatically update existing entities',\n  },\n  {\n    updateTypes: ['deleted'],\n    label: 'Deletions',\n    tooltip: 'Automatically remove deleted entities',\n  },\n  // all other update types are grouped together\n  {\n    updateTypes: ['label_changed', 'renamed', 'type_changed', 'status_changed', 'tags_changed'],\n    label: 'Other Changes',\n    tooltip: 'Automatically update other changes to existing entities',\n  },\n]\n\nconst StyledSync = styled(Button)`\n  /* put above the menu so it's still clickable */\n  /* NOTE: this will need fixing as this also puts it above dialogs */\n  /* z-index: 1001;  */\n\n  /* spin icon */\n  &.syncing {\n    .icon {\n      animation: spin 1s linear infinite;\n    }\n  }\n  .icon {\n    /* flip */\n    scale: -1 1;\n    @keyframes spin {\n      0% {\n        transform: rotate(360deg);\n      }\n      100% {\n        transform: rotate(0deg);\n      }\n    }\n  }\n\n  &.auto-sync:not(.has-updates) {\n    &,\n    .icon {\n      color: var(--md-sys-color-primary);\n    }\n  }\n`\n\nconst SyncSettings = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-large);\n  padding: 12px 16px;\n  min-width: 180px;\n\n  .setting {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 24px;\n    color: var(--md-sys-color-on-surface);\n    white-space: nowrap;\n  }\n\n  .global {\n    padding-bottom: 8px;\n    border-bottom: 1px solid var(--md-sys-color-surface-container-highest);\n    font-weight: 600;\n  }\n`\n\ninterface SyncButtonProps extends Omit<ButtonProps, 'onClick'> {\n  projectNames?: string[]\n  topics: string[]\n  onSync?: OnSyncDataCallback\n  shouldSyncOnUpdate?: (update: RTEntityUpdate) => boolean\n  hideWhenNoUpdates?: boolean\n}\n\nconst formatUpdateType = (updateType: string, entityType: string, count: number) => {\n  const entityLabel = `${entityType}${count === 1 ? '' : 's'}`\n  if (updateType === 'created') return `new ${entityLabel}`\n  if (updateType === 'deleted') return `${entityLabel} deleted`\n  return `${count} ${entityLabel} ${updateType.replaceAll('_', ' ')}`\n}\n\nconst getUpdatesTooltip = (updates: RTEntityUpdate[]) => {\n  const groupedUpdates = new Map<\n    string,\n    { entityType: string; updateType: string; ids: Set<string> }\n  >()\n\n  updates.forEach((update) => {\n    const [, entityType, updateType] = update.topic.split('.')\n    if (!entityType || !updateType) return\n\n    const key = `${entityType}.${updateType}`\n    const group = groupedUpdates.get(key) || {\n      entityType,\n      updateType,\n      ids: new Set<string>(),\n    }\n    group.ids.add(update.entityId || String(update.id))\n    groupedUpdates.set(key, group)\n  })\n\n  const labels = Array.from(groupedUpdates.values()).map(({ entityType, updateType, ids }) =>\n    formatUpdateType(updateType, entityType, ids.size),\n  )\n\n  return `${labels.join(', ')} since last sync`\n}\n\nexport const SyncButton = forwardRef<HTMLButtonElement, SyncButtonProps>(\n  (\n    { projectNames, topics, onSync, shouldSyncOnUpdate, hideWhenNoUpdates = false, ...props },\n    ref,\n  ) => {\n    const [isSyncing, setIsSyncing] = useState(false)\n    const [autoSyncSettings, updateAutoSyncSettings] = useAutoSyncSettings()\n    const { setMenuOpen } = useMenuContext()\n    const buttonRef = useRef<HTMLButtonElement | null>(null)\n    const closeTimeout = useRef<ReturnType<typeof setTimeout>>()\n    const menuId = useId()\n\n    useEffect(() => {\n      return () => {\n        const timeout = closeTimeout.current\n        closeTimeout.current = undefined\n        if (timeout !== undefined) {\n          clearTimeout(timeout)\n        }\n      }\n    }, [])\n    useImperativeHandle(ref, () => buttonRef.current as HTMLButtonElement, [])\n\n    const handleSync = async () => {\n      setIsSyncing(true)\n      try {\n        await onSync?.(updates)\n      } finally {\n        setIsSyncing(false)\n      }\n    }\n\n    const { updates, hasUpdates } = useSyncUpdates({\n      projectNames,\n      topics,\n      isSyncing,\n      shouldSyncOnUpdate,\n    })\n\n    useEffect(() => {\n      const handleKeyDown = (event: KeyboardEvent) => {\n        if (\n          event.repeat ||\n          !event.shiftKey ||\n          event.ctrlKey ||\n          event.metaKey ||\n          event.key.toLowerCase() !== 'r' ||\n          shouldBlockShortcuts(event)\n        ) {\n          return\n        }\n\n        event.preventDefault()\n        event.stopPropagation()\n        handleSync()\n      }\n\n      window.addEventListener('keydown', handleKeyDown)\n      return () => window.removeEventListener('keydown', handleKeyDown)\n    }, [handleSync])\n\n    if (hideWhenNoUpdates && !hasUpdates) return null\n\n    const updatesTooltip = getUpdatesTooltip(updates)\n    const isAutoSyncEnabled = Object.values(autoSyncSettings).some(Boolean)\n    const isGlobalAutoSyncEnabled = Object.values(autoSyncSettings).every(Boolean)\n\n    const cancelMenuClose = () => {\n      if (closeTimeout.current) clearTimeout(closeTimeout.current)\n    }\n\n    const openSettingsMenu = () => {\n      cancelMenuClose()\n      setMenuOpen(menuId)\n    }\n\n    const closeSettingsMenu = () => {\n      cancelMenuClose()\n      closeTimeout.current = setTimeout(() => setMenuOpen(false), 100)\n    }\n\n    return (\n      <>\n        <StyledSync\n          {...props}\n          icon=\"sync\"\n          ref={buttonRef}\n          onClick={handleSync}\n          onMouseEnter={openSettingsMenu}\n          onMouseLeave={closeSettingsMenu}\n          className={clsx(props.className, {\n            syncing: isSyncing,\n            'has-updates': hasUpdates,\n            'auto-sync': isAutoSyncEnabled && !FORCE_AUTO_SYNC,\n          })}\n          data-shortcut=\"Shift+R\"\n          data-tooltip={hasUpdates ? updatesTooltip : 'Refresh data'}\n          variant={hasUpdates ? 'filled' : 'surface'}\n        />\n        {!FORCE_AUTO_SYNC && (\n          <MenuContainer\n            id={menuId}\n            target={buttonRef.current}\n            align=\"right\"\n            onMouseEnter={cancelMenuClose}\n            onMouseLeave={closeSettingsMenu}\n          >\n            <Menu\n              menu={[\n                {\n                  id: 'sync-settings',\n                  node: (\n                    <SyncSettings\n                      key=\"sync-settings\"\n                      onClick={(e) => e.stopPropagation()}\n                      onMouseEnter={cancelMenuClose}\n                      onMouseLeave={closeSettingsMenu}\n                    >\n                      <div\n                        className=\"setting global\"\n                        data-tooltip={\n                          isGlobalAutoSyncEnabled\n                            ? 'New entities and updates will be automatically synced'\n                            : 'Auto updates are disabled. Click the sync button to manually refresh data.'\n                        }\n                      >\n                        <span>Auto updates</span>\n                        <InputSwitch\n                          checked={isGlobalAutoSyncEnabled}\n                          onChange={() =>\n                            updateAutoSyncSettings({ global: !isGlobalAutoSyncEnabled })\n                          }\n                        />\n                      </div>\n                      {UPDATE_TYPES.map((setting) => (\n                        <div className=\"setting\" key={setting.updateTypes.join(',')}>\n                          <span>{setting.label}</span>\n                          <InputSwitch\n                            checked={setting.updateTypes.every((type) => autoSyncSettings[type])}\n                            onChange={() =>\n                              updateAutoSyncSettings({\n                                settings: setting.updateTypes.reduce(\n                                  (acc, type) => ({\n                                    ...acc,\n                                    [type]: !autoSyncSettings[type],\n                                  }),\n                                  {},\n                                ),\n                              })\n                            }\n                            data-tooltip={setting.tooltip}\n                          />\n                        </div>\n                      ))}\n                    </SyncSettings>\n                  ),\n                },\n              ]}\n            />\n          </MenuContainer>\n        )}\n      </>\n    )\n  },\n)\n"],"names":["StyledSync","styled","Button","formatUpdateType","updateType","entityType","count","entityLabel","getUpdatesTooltip","updates","groupedUpdates","update","key","group","ids","SyncButton","forwardRef","projectNames","topics","onSync","shouldSyncOnUpdate","hideWhenNoUpdates","props","ref","isSyncing","setIsSyncing","useState","autoSyncSettings","updateAutoSyncSettings","useAutoSyncSettings","setMenuOpen","useMenuContext","buttonRef","useRef","closeTimeout","menuId","useId","useEffect","timeout","useImperativeHandle","handleSync","hasUpdates","useSyncUpdates","handleKeyDown","event","shouldBlockShortcuts","updatesTooltip","isAutoSyncEnabled","cancelMenuClose","openSettingsMenu","closeSettingsMenu","jsxs","Fragment","jsx","clsx","FORCE_AUTO_SYNC"],"mappings":"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"}
+{"version":3,"file":"SyncButton.es.js","sources":["../../../../../src/components/SyncButton/SyncButton.tsx"],"sourcesContent":["import { Button, ButtonProps, InputSwitch } from '@ynput/ayon-react-components'\nimport { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from 'react'\nimport styled from 'styled-components'\nimport {\n  FORCE_AUTO_SYNC,\n  OnSyncDataCallback,\n  RTEntityUpdate,\n  TopicUpdateType,\n  useAutoSyncSettings,\n  useSyncUpdates,\n} from '@shared/context/EntityUpdatesContext'\nimport { Menu, MenuContainer } from '../Menu'\nimport { useMenuContext } from '@shared/context/MenuContext'\nimport clsx from 'clsx'\nimport { shouldBlockShortcuts } from '@shared/util'\n\nconst UPDATE_TYPES: { updateTypes: TopicUpdateType[]; label: string; tooltip?: string }[] = [\n  {\n    updateTypes: ['created'],\n    label: 'Creations',\n    tooltip: 'Automatically add newly created entities',\n  },\n  {\n    updateTypes: ['attrib_changed'],\n    label: 'Attribute Changes',\n    tooltip: 'Automatically update existing entities',\n  },\n  {\n    updateTypes: ['deleted'],\n    label: 'Deletions',\n    tooltip: 'Automatically remove deleted entities',\n  },\n  // all other update types are grouped together\n  {\n    updateTypes: ['label_changed', 'renamed', 'type_changed', 'status_changed', 'tags_changed'],\n    label: 'Other Changes',\n    tooltip: 'Automatically update other changes to existing entities',\n  },\n]\n\nconst StyledSync = styled(Button)`\n  /* put above the menu so it's still clickable */\n  /* NOTE: this will need fixing as this also puts it above dialogs */\n  /* z-index: 1001;  */\n\n  /* spin icon */\n  &.syncing {\n    .icon {\n      animation: spin 1s linear infinite;\n    }\n  }\n  .icon {\n    /* flip */\n    scale: -1 1;\n    @keyframes spin {\n      0% {\n        transform: rotate(360deg);\n      }\n      100% {\n        transform: rotate(0deg);\n      }\n    }\n  }\n\n  &.auto-sync:not(.has-updates) {\n    &,\n    .icon {\n      color: var(--md-sys-color-primary);\n    }\n  }\n`\n\nconst SyncSettings = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-large);\n  padding: 12px 16px;\n  min-width: 180px;\n\n  .setting {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 24px;\n    color: var(--md-sys-color-on-surface);\n    white-space: nowrap;\n  }\n\n  .global {\n    padding-bottom: 8px;\n    border-bottom: 1px solid var(--md-sys-color-surface-container-highest);\n    font-weight: 600;\n  }\n`\n\ninterface SyncButtonProps extends Omit<ButtonProps, 'onClick'> {\n  projectNames?: string[]\n  topics: string[]\n  onSync?: OnSyncDataCallback\n  shouldSyncOnUpdate?: (update: RTEntityUpdate) => boolean\n  hideWhenNoUpdates?: boolean\n}\n\nconst formatUpdateType = (updateType: string, entityType: string, count: number) => {\n  const entityLabel = `${entityType}${count === 1 ? '' : 's'}`\n  if (updateType === 'created') return `new ${entityLabel}`\n  if (updateType === 'deleted') return `${entityLabel} deleted`\n  return `${count} ${entityLabel} ${updateType.replaceAll('_', ' ')}`\n}\n\nconst getUpdatesTooltip = (updates: RTEntityUpdate[]) => {\n  const groupedUpdates = new Map<\n    string,\n    { entityType: string; updateType: string; ids: Set<string> }\n  >()\n\n  updates.forEach((update) => {\n    const [, entityType, updateType] = update.topic.split('.')\n    if (!entityType || !updateType) return\n\n    const key = `${entityType}.${updateType}`\n    const group = groupedUpdates.get(key) || {\n      entityType,\n      updateType,\n      ids: new Set<string>(),\n    }\n    group.ids.add(update.entityId || String(update.id))\n    groupedUpdates.set(key, group)\n  })\n\n  const labels = Array.from(groupedUpdates.values()).map(({ entityType, updateType, ids }) =>\n    formatUpdateType(updateType, entityType, ids.size),\n  )\n\n  return `${labels.join(', ')} since last sync`\n}\n\nexport const SyncButton = forwardRef<HTMLButtonElement, SyncButtonProps>(\n  (\n    { projectNames, topics, onSync, shouldSyncOnUpdate, hideWhenNoUpdates = false, ...props },\n    ref,\n  ) => {\n    const [isSyncing, setIsSyncing] = useState(false)\n    const [autoSyncSettings, updateAutoSyncSettings] = useAutoSyncSettings()\n    const { setMenuOpen } = useMenuContext()\n    const buttonRef = useRef<HTMLButtonElement | null>(null)\n    const closeTimeout = useRef<ReturnType<typeof setTimeout>>()\n    const menuId = useId()\n\n    useEffect(() => {\n      return () => {\n        const timeout = closeTimeout.current\n        closeTimeout.current = undefined\n        if (timeout !== undefined) {\n          clearTimeout(timeout)\n        }\n      }\n    }, [])\n    useImperativeHandle(ref, () => buttonRef.current as HTMLButtonElement, [])\n\n    const handleSync = async () => {\n      setIsSyncing(true)\n      try {\n        await onSync?.(updates)\n      } finally {\n        setIsSyncing(false)\n      }\n    }\n\n    const { updates, hasUpdates } = useSyncUpdates({\n      projectNames,\n      topics,\n      isSyncing,\n      shouldSyncOnUpdate,\n    })\n\n    useEffect(() => {\n      const handleKeyDown = (event: KeyboardEvent) => {\n        if (\n          event.repeat ||\n          !event.shiftKey ||\n          event.ctrlKey ||\n          event.metaKey ||\n          event.key.toLowerCase() !== 'r' ||\n          shouldBlockShortcuts(event)\n        ) {\n          return\n        }\n\n        event.preventDefault()\n        event.stopPropagation()\n        handleSync()\n      }\n\n      window.addEventListener('keydown', handleKeyDown)\n      return () => window.removeEventListener('keydown', handleKeyDown)\n    }, [handleSync])\n\n    if (hideWhenNoUpdates && !hasUpdates) return null\n\n    const updatesTooltip = getUpdatesTooltip(updates)\n    const isAutoSyncEnabled = Object.values(autoSyncSettings).some(Boolean)\n    const isGlobalAutoSyncEnabled = Object.values(autoSyncSettings).every(Boolean)\n\n    const cancelMenuClose = () => {\n      if (closeTimeout.current) clearTimeout(closeTimeout.current)\n    }\n\n    const openSettingsMenu = () => {\n      cancelMenuClose()\n      setMenuOpen(menuId)\n    }\n\n    const closeSettingsMenu = () => {\n      cancelMenuClose()\n      closeTimeout.current = setTimeout(() => setMenuOpen(false), 100)\n    }\n\n    return (\n      <>\n        <StyledSync\n          {...props}\n          icon=\"sync\"\n          ref={buttonRef}\n          onClick={handleSync}\n          onMouseEnter={openSettingsMenu}\n          onMouseLeave={closeSettingsMenu}\n          className={clsx(props.className, {\n            syncing: isSyncing,\n            'has-updates': hasUpdates,\n            'auto-sync': isAutoSyncEnabled && !FORCE_AUTO_SYNC,\n          })}\n          data-shortcut=\"Shift+R\"\n          data-tooltip={hasUpdates ? updatesTooltip : 'Refresh data'}\n          variant={hasUpdates ? 'filled' : 'surface'}\n        />\n        {!FORCE_AUTO_SYNC && (\n          <MenuContainer\n            id={menuId}\n            target={buttonRef.current}\n            align=\"right\"\n            onMouseEnter={cancelMenuClose}\n            onMouseLeave={closeSettingsMenu}\n          >\n            <Menu\n              menu={[\n                {\n                  id: 'sync-settings',\n                  node: (\n                    <SyncSettings\n                      key=\"sync-settings\"\n                      onClick={(e) => e.stopPropagation()}\n                      onMouseEnter={cancelMenuClose}\n                      onMouseLeave={closeSettingsMenu}\n                    >\n                      <div\n                        className=\"setting global\"\n                        data-tooltip={\n                          isGlobalAutoSyncEnabled\n                            ? 'New entities and updates will be automatically synced'\n                            : 'Auto updates are disabled. Click the sync button to manually refresh data.'\n                        }\n                      >\n                        <span>Auto updates</span>\n                        <InputSwitch\n                          checked={isGlobalAutoSyncEnabled}\n                          onChange={() =>\n                            updateAutoSyncSettings({ global: !isGlobalAutoSyncEnabled })\n                          }\n                        />\n                      </div>\n                      {UPDATE_TYPES.map((setting) => (\n                        <div className=\"setting\" key={setting.updateTypes.join(',')}>\n                          <span>{setting.label}</span>\n                          <InputSwitch\n                            checked={setting.updateTypes.every((type) => autoSyncSettings[type])}\n                            onChange={() =>\n                              updateAutoSyncSettings({\n                                settings: setting.updateTypes.reduce(\n                                  (acc, type) => ({\n                                    ...acc,\n                                    [type]: !autoSyncSettings[type],\n                                  }),\n                                  {},\n                                ),\n                              })\n                            }\n                            data-tooltip={setting.tooltip}\n                          />\n                        </div>\n                      ))}\n                    </SyncSettings>\n                  ),\n                },\n              ]}\n            />\n          </MenuContainer>\n        )}\n      </>\n    )\n  },\n)\n"],"names":["StyledSync","styled","Button","formatUpdateType","updateType","entityType","count","entityLabel","getUpdatesTooltip","updates","groupedUpdates","update","key","group","ids","SyncButton","forwardRef","projectNames","topics","onSync","shouldSyncOnUpdate","hideWhenNoUpdates","props","ref","isSyncing","setIsSyncing","useState","autoSyncSettings","updateAutoSyncSettings","useAutoSyncSettings","setMenuOpen","useMenuContext","buttonRef","useRef","closeTimeout","menuId","useId","useEffect","timeout","useImperativeHandle","handleSync","hasUpdates","useSyncUpdates","handleKeyDown","event","shouldBlockShortcuts","updatesTooltip","isAutoSyncEnabled","cancelMenuClose","openSettingsMenu","closeSettingsMenu","jsxs","Fragment","jsx","clsx","FORCE_AUTO_SYNC"],"mappings":"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"}

package/dist/shared/src/components/TableSearch/TableSearch.cjs.js

@@ -0,0 +1,16 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../../_virtual/jsx-runtime.cjs.js"),a=require("../../containers/SimpleTable/SimpleTable.styled.cjs.js"),u=require("@ynput/ayon-react-components"),o=require("styled-components"),c=o.div`
+  position: relative;
+  width: 100%;
+  padding: 4px;
+
+  input {
+    width: 100%;
+    min-width: 0;
+  }
+`,l=o(a.HeaderButton)`
+  position: absolute;
+  top: 50%;
+  right: 6px;
+  transform: translateY(-50%);
+`,p=({value:r,onChange:i,onClose:n,className:s})=>e.jsxRuntimeExports.jsxs(c,{className:s,children:[e.jsxRuntimeExports.jsx(u.InputText,{value:r,onChange:t=>i(t.target.value),placeholder:"Search",autoFocus:!0,onKeyDown:t=>{t.key==="Escape"&&n()}}),e.jsxRuntimeExports.jsx(l,{icon:"close",variant:"text",onClick:n})]});exports.TableSearch=p;
+//# sourceMappingURL=TableSearch.cjs.js.map

package/dist/shared/src/components/TableSearch/TableSearch.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableSearch.cjs.js","sources":["../../../../../src/components/TableSearch/TableSearch.tsx"],"sourcesContent":["import { HeaderButton } from '@shared/containers/SimpleTable/SimpleTable.styled'\nimport { InputText } from '@ynput/ayon-react-components'\nimport { FC } from 'react'\nimport styled from 'styled-components'\n\nconst Container = styled.div`\n  position: relative;\n  width: 100%;\n  padding: 4px;\n\n  input {\n    width: 100%;\n    min-width: 0;\n  }\n`\n\nconst CloseButton = styled(HeaderButton)`\n  position: absolute;\n  top: 50%;\n  right: 6px;\n  transform: translateY(-50%);\n`\n\nexport interface TableSearchProps {\n  value: string\n  onChange: (value: string) => void\n  onClose: () => void\n  className?: string\n}\n\nexport const TableSearch: FC<TableSearchProps> = ({ value, onChange, onClose, className }) => {\n  return (\n    <Container className={className}>\n      <InputText\n        value={value}\n        onChange={(e) => onChange(e.target.value)}\n        placeholder=\"Search\"\n        autoFocus\n        onKeyDown={(e) => {\n          if (e.key === 'Escape') {\n            onClose()\n          }\n        }}\n      />\n      <CloseButton icon=\"close\" variant=\"text\" onClick={onClose} />\n    </Container>\n  )\n}\n"],"names":["Container","styled","CloseButton","HeaderButton","TableSearch","value","onChange","onClose","className","jsxs","jsx","InputText","e"],"mappings":"wRAKMA,EAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWnBC,EAAcD,EAAOE,cAAY;AAAA;AAAA;AAAA;AAAA;AAAA,EAc1BC,EAAoC,CAAC,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,UAAAC,KAE1EC,yBAACT,GAAU,UAAAQ,EACT,SAAA,CAAAE,EAAAA,kBAAAA,IAACC,EAAAA,UAAA,CACC,MAAAN,EACA,SAAWO,GAAMN,EAASM,EAAE,OAAO,KAAK,EACxC,YAAY,SACZ,UAAS,GACT,UAAYA,GAAM,CACZA,EAAE,MAAQ,UACZL,EAAA,CAEJ,CAAA,CAAA,0BAEDL,EAAA,CAAY,KAAK,QAAQ,QAAQ,OAAO,QAASK,CAAA,CAAS,CAAA,EAC7D"}

package/dist/shared/src/components/TableSearch/TableSearch.es.js

@@ -0,0 +1,37 @@
+import { j as o } from "../../../../_virtual/jsx-runtime.es.js";
+import { HeaderButton as s } from "../../containers/SimpleTable/SimpleTable.styled.es.js";
+import { InputText as p } from "@ynput/ayon-react-components";
+import r from "styled-components";
+const c = r.div`
+  position: relative;
+  width: 100%;
+  padding: 4px;
+
+  input {
+    width: 100%;
+    min-width: 0;
+  }
+`, l = r(s)`
+  position: absolute;
+  top: 50%;
+  right: 6px;
+  transform: translateY(-50%);
+`, h = ({ value: i, onChange: n, onClose: e, className: a }) => /* @__PURE__ */ o.jsxs(c, { className: a, children: [
+  /* @__PURE__ */ o.jsx(
+    p,
+    {
+      value: i,
+      onChange: (t) => n(t.target.value),
+      placeholder: "Search",
+      autoFocus: !0,
+      onKeyDown: (t) => {
+        t.key === "Escape" && e();
+      }
+    }
+  ),
+  /* @__PURE__ */ o.jsx(l, { icon: "close", variant: "text", onClick: e })
+] });
+export {
+  h as TableSearch
+};
+//# sourceMappingURL=TableSearch.es.js.map

package/dist/shared/src/components/TableSearch/TableSearch.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableSearch.es.js","sources":["../../../../../src/components/TableSearch/TableSearch.tsx"],"sourcesContent":["import { HeaderButton } from '@shared/containers/SimpleTable/SimpleTable.styled'\nimport { InputText } from '@ynput/ayon-react-components'\nimport { FC } from 'react'\nimport styled from 'styled-components'\n\nconst Container = styled.div`\n  position: relative;\n  width: 100%;\n  padding: 4px;\n\n  input {\n    width: 100%;\n    min-width: 0;\n  }\n`\n\nconst CloseButton = styled(HeaderButton)`\n  position: absolute;\n  top: 50%;\n  right: 6px;\n  transform: translateY(-50%);\n`\n\nexport interface TableSearchProps {\n  value: string\n  onChange: (value: string) => void\n  onClose: () => void\n  className?: string\n}\n\nexport const TableSearch: FC<TableSearchProps> = ({ value, onChange, onClose, className }) => {\n  return (\n    <Container className={className}>\n      <InputText\n        value={value}\n        onChange={(e) => onChange(e.target.value)}\n        placeholder=\"Search\"\n        autoFocus\n        onKeyDown={(e) => {\n          if (e.key === 'Escape') {\n            onClose()\n          }\n        }}\n      />\n      <CloseButton icon=\"close\" variant=\"text\" onClick={onClose} />\n    </Container>\n  )\n}\n"],"names":["Container","styled","CloseButton","HeaderButton","TableSearch","value","onChange","onClose","className","jsxs","jsx","InputText","e"],"mappings":";;;;AAKA,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWnBC,IAAcD,EAAOE,CAAY;AAAA;AAAA;AAAA;AAAA;AAAA,GAc1BC,IAAoC,CAAC,EAAE,OAAAC,GAAO,UAAAC,GAAU,SAAAC,GAAS,WAAAC,QAE1EC,gBAAAA,OAACT,KAAU,WAAAQ,GACT,UAAA;AAAA,EAAAE,gBAAAA,EAAAA;AAAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAN;AAAA,MACA,UAAU,CAACO,MAAMN,EAASM,EAAE,OAAO,KAAK;AAAA,MACxC,aAAY;AAAA,MACZ,WAAS;AAAA,MACT,WAAW,CAACA,MAAM;AAChB,QAAIA,EAAE,QAAQ,YACZL,EAAA;AAAA,MAEJ;AAAA,IAAA;AAAA,EAAA;AAAA,wBAEDL,GAAA,EAAY,MAAK,SAAQ,SAAQ,QAAO,SAASK,EAAA,CAAS;AAAA,GAC7D;"}

package/dist/shared/src/components/Thumbnail/Thumbnail.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../../../../_virtual/jsx-runtime.cjs.js"),l=require("react"),b=require("@ynput/ayon-react-components"),P=require("clsx"),E=require("./Thumbnail.styled.cjs.js");require("lodash");require("react-toastify");require("uuid");const T=require("../../util/getThumbnailUrl.cjs.js");require("../../api/queries/users/updateUsers.cjs.js");require("../../util/pubsub.cjs.js");const U=({projectName:s="",entityType:e="",entityId:u="",icon:j,color:g,thumbnailHash:c,isLoading:a,shimmer:h,className:R,disabled:S,src:m,hoverIcon:x,showBorder:C=!0,...d})=>{const f=e==="project",k=["product"].includes(e),q=f?!!s:!!u;let r="";e&&(c||f)&&q&&(m?r=m:r=T.getEntityThumbnailUrl({projectName:s,entityType:e,entityId:u,thumbnailHash:c})??"");const[v,t]=l.useState(!1),[i,o]=l.useState(!1);return l.useEffect(()=>{if(r===""){o(!0),t(!0);return}o(!1),t(!1)},[r]),n.jsxRuntimeExports.jsxs(E.Card,{className:P(R,"thumbnail",{loading:h&&(a||!i),loaded:i,error:v,clickable:!!d.onClick,border:C}),...d,children:[(!a||!i)&&!S&&n.jsxRuntimeExports.jsx(b.Icon,{style:{color:g||void 0},icon:j||"image",className:"type-icon"}),e&&s&&!k&&q&&n.jsxRuntimeExports.jsx(E.Image,{alt:`Entity thumbnail ${u||s}`,src:r,onLoad:()=>{o(!0),t(!1)},onError:()=>{o(!0),t(!0)}}),x&&n.jsxRuntimeExports.jsx(b.Icon,{icon:x,className:"hover-icon"})]})};exports.Thumbnail=U;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../../../../_virtual/jsx-runtime.cjs.js"),l=require("react"),b=require("@ynput/ayon-react-components"),P=require("clsx"),E=require("./Thumbnail.styled.cjs.js");require("lodash");require("react-toastify");require("uuid");const T=require("../../util/getThumbnailUrl.cjs.js");require("../../api/queries/users/updateUsers.cjs.js");require("../../util/searchTerms.cjs.js");require("../../util/pubsub.cjs.js");const U=({projectName:s="",entityType:e="",entityId:n="",icon:j,color:g,thumbnailHash:c,isLoading:a,shimmer:h,className:R,disabled:S,src:m,hoverIcon:x,showBorder:C=!0,...d})=>{const q=e==="project",k=["product"].includes(e),f=q?!!s:!!n;let r="";e&&(c||q)&&f&&(m?r=m:r=T.getEntityThumbnailUrl({projectName:s,entityType:e,entityId:n,thumbnailHash:c})??"");const[v,t]=l.useState(!1),[i,o]=l.useState(!1);return l.useEffect(()=>{if(r===""){o(!0),t(!0);return}o(!1),t(!1)},[r]),u.jsxRuntimeExports.jsxs(E.Card,{className:P(R,"thumbnail",{loading:h&&(a||!i),loaded:i,error:v,clickable:!!d.onClick,border:C}),...d,children:[(!a||!i)&&!S&&u.jsxRuntimeExports.jsx(b.Icon,{style:{color:g||void 0},icon:j||"image",className:"type-icon"}),e&&s&&!k&&f&&u.jsxRuntimeExports.jsx(E.Image,{alt:`Entity thumbnail ${n||s}`,src:r,onLoad:()=>{o(!0),t(!1)},onError:()=>{o(!0),t(!0)}}),x&&u.jsxRuntimeExports.jsx(b.Icon,{icon:x,className:"hover-icon"})]})};exports.Thumbnail=U;
 //# sourceMappingURL=Thumbnail.cjs.js.map

package/dist/shared/src/components/Thumbnail/Thumbnail.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Thumbnail.cjs.js","sources":["../../../../../src/components/Thumbnail/Thumbnail.tsx"],"sourcesContent":["import { HTMLAttributes, useEffect, useState } from 'react'\nimport { Icon } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport * as Styled from './Thumbnail.styled'\nimport { getEntityThumbnailUrl } from '@shared/util'\n\nexport interface ThumbnailProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {\n  projectName?: string\n  entityType?: string\n  entityId?: string\n  icon?: string | null\n  color?: string | null\n  thumbnailHash?: string\n  isLoading?: boolean\n  shimmer?: boolean\n  className?: string\n  disabled?: boolean\n  src?: string\n  hoverIcon?: string\n  showBorder?: boolean\n}\n\nexport const Thumbnail = ({\n  projectName = '',\n  entityType = '',\n  entityId = '',\n  icon,\n  color,\n  thumbnailHash,\n  isLoading,\n  shimmer,\n  className,\n  disabled,\n  src,\n  hoverIcon,\n  showBorder = true,\n  ...props\n}: ThumbnailProps) => {\n  const isProject = entityType === 'project'\n  const isWrongEntity = ['product'].includes(entityType)\n  const hasIdentity = isProject ? !!projectName : !!entityId\n\n  let url = ''\n  if (entityType && (thumbnailHash || isProject) && hasIdentity) {\n    if (src) {\n      url = src\n    } else {\n      url = getEntityThumbnailUrl({ projectName, entityType, entityId, thumbnailHash }) ?? ''\n    }\n  }\n\n  const [error, setError] = useState(false)\n  const [loaded, setLoaded] = useState(false)\n\n  useEffect(() => {\n    if (url === '') {\n      setLoaded(true)\n      setError(true)\n      return\n    }\n\n    setLoaded(false)\n    setError(false)\n  }, [url])\n\n  return (\n    <Styled.Card\n      className={clsx(className, 'thumbnail', {\n        loading: shimmer && (isLoading || !loaded),\n        loaded,\n        error,\n        clickable: !!props.onClick,\n        border: showBorder,\n      })}\n      {...props}\n    >\n      {(!isLoading || !loaded) && !disabled && (\n        <Icon style={{ color: color || undefined }} icon={icon || 'image'} className=\"type-icon\" />\n      )}\n      {entityType && projectName && !isWrongEntity && hasIdentity && (\n        <Styled.Image\n          alt={`Entity thumbnail ${entityId || projectName}`}\n          src={url}\n          onLoad={() => {\n            setLoaded(true)\n            setError(false)\n          }}\n          onError={() => {\n            setLoaded(true)\n            setError(true)\n          }}\n        />\n      )}\n      {hoverIcon && <Icon icon={hoverIcon} className=\"hover-icon\" />}\n    </Styled.Card>\n  )\n}\n"],"names":["Thumbnail","projectName","entityType","entityId","icon","color","thumbnailHash","isLoading","shimmer","className","disabled","src","hoverIcon","showBorder","props","isProject","isWrongEntity","hasIdentity","url","getEntityThumbnailUrl","error","setError","useState","loaded","setLoaded","useEffect","jsxs","Styled.Card","clsx","Icon","jsx","Styled.Image"],"mappings":"4cAsBO,MAAMA,EAAY,CAAC,CACxB,YAAAC,EAAc,GACd,WAAAC,EAAa,GACb,SAAAC,EAAW,GACX,KAAAC,EACA,MAAAC,EACA,cAAAC,EACA,UAAAC,EACA,QAAAC,EACA,UAAAC,EACA,SAAAC,EACA,IAAAC,EACA,UAAAC,EACA,WAAAC,EAAa,GACb,GAAGC,CACL,IAAsB,CACpB,MAAMC,EAAYb,IAAe,UAC3Bc,EAAgB,CAAC,SAAS,EAAE,SAASd,CAAU,EAC/Ce,EAAcF,EAAY,CAAC,CAACd,EAAc,CAAC,CAACE,EAElD,IAAIe,EAAM,GACNhB,IAAeI,GAAiBS,IAAcE,IAC5CN,EACFO,EAAMP,EAENO,EAAMC,EAAAA,sBAAsB,CAAE,YAAAlB,EAAa,WAAAC,EAAY,SAAAC,EAAU,cAAAG,CAAA,CAAe,GAAK,IAIzF,KAAM,CAACc,EAAOC,CAAQ,EAAIC,EAAAA,SAAS,EAAK,EAClC,CAACC,EAAQC,CAAS,EAAIF,EAAAA,SAAS,EAAK,EAE1CG,OAAAA,EAAAA,UAAU,IAAM,CACd,GAAIP,IAAQ,GAAI,CACdM,EAAU,EAAI,EACdH,EAAS,EAAI,EACb,MACF,CAEAG,EAAU,EAAK,EACfH,EAAS,EAAK,CAChB,EAAG,CAACH,CAAG,CAAC,EAGNQ,EAAAA,kBAAAA,KAACC,EAAAA,KAAA,CACC,UAAWC,EAAKnB,EAAW,YAAa,CACtC,QAASD,IAAYD,GAAa,CAACgB,GACnC,OAAAA,EACA,MAAAH,EACA,UAAW,CAAC,CAACN,EAAM,QACnB,OAAQD,CAAA,CACT,EACA,GAAGC,EAEF,SAAA,EAAA,CAACP,GAAa,CAACgB,IAAW,CAACb,2BAC1BmB,EAAAA,KAAA,CAAK,MAAO,CAAE,MAAOxB,GAAS,MAAA,EAAa,KAAMD,GAAQ,QAAS,UAAU,YAAY,EAE1FF,GAAcD,GAAe,CAACe,GAAiBC,GAC9Ca,EAAAA,kBAAAA,IAACC,EAAAA,MAAA,CACC,IAAK,oBAAoB5B,GAAYF,CAAW,GAChD,IAAKiB,EACL,OAAQ,IAAM,CACZM,EAAU,EAAI,EACdH,EAAS,EAAK,CAChB,EACA,QAAS,IAAM,CACbG,EAAU,EAAI,EACdH,EAAS,EAAI,CACf,CAAA,CAAA,EAGHT,GAAakB,EAAAA,kBAAAA,IAACD,OAAA,CAAK,KAAMjB,EAAW,UAAU,YAAA,CAAa,CAAA,CAAA,CAAA,CAGlE"}
+{"version":3,"file":"Thumbnail.cjs.js","sources":["../../../../../src/components/Thumbnail/Thumbnail.tsx"],"sourcesContent":["import { HTMLAttributes, useEffect, useState } from 'react'\nimport { Icon } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport * as Styled from './Thumbnail.styled'\nimport { getEntityThumbnailUrl } from '@shared/util'\n\nexport interface ThumbnailProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {\n  projectName?: string\n  entityType?: string\n  entityId?: string\n  icon?: string | null\n  color?: string | null\n  thumbnailHash?: string\n  isLoading?: boolean\n  shimmer?: boolean\n  className?: string\n  disabled?: boolean\n  src?: string\n  hoverIcon?: string\n  showBorder?: boolean\n}\n\nexport const Thumbnail = ({\n  projectName = '',\n  entityType = '',\n  entityId = '',\n  icon,\n  color,\n  thumbnailHash,\n  isLoading,\n  shimmer,\n  className,\n  disabled,\n  src,\n  hoverIcon,\n  showBorder = true,\n  ...props\n}: ThumbnailProps) => {\n  const isProject = entityType === 'project'\n  const isWrongEntity = ['product'].includes(entityType)\n  const hasIdentity = isProject ? !!projectName : !!entityId\n\n  let url = ''\n  if (entityType && (thumbnailHash || isProject) && hasIdentity) {\n    if (src) {\n      url = src\n    } else {\n      url = getEntityThumbnailUrl({ projectName, entityType, entityId, thumbnailHash }) ?? ''\n    }\n  }\n\n  const [error, setError] = useState(false)\n  const [loaded, setLoaded] = useState(false)\n\n  useEffect(() => {\n    if (url === '') {\n      setLoaded(true)\n      setError(true)\n      return\n    }\n\n    setLoaded(false)\n    setError(false)\n  }, [url])\n\n  return (\n    <Styled.Card\n      className={clsx(className, 'thumbnail', {\n        loading: shimmer && (isLoading || !loaded),\n        loaded,\n        error,\n        clickable: !!props.onClick,\n        border: showBorder,\n      })}\n      {...props}\n    >\n      {(!isLoading || !loaded) && !disabled && (\n        <Icon style={{ color: color || undefined }} icon={icon || 'image'} className=\"type-icon\" />\n      )}\n      {entityType && projectName && !isWrongEntity && hasIdentity && (\n        <Styled.Image\n          alt={`Entity thumbnail ${entityId || projectName}`}\n          src={url}\n          onLoad={() => {\n            setLoaded(true)\n            setError(false)\n          }}\n          onError={() => {\n            setLoaded(true)\n            setError(true)\n          }}\n        />\n      )}\n      {hoverIcon && <Icon icon={hoverIcon} className=\"hover-icon\" />}\n    </Styled.Card>\n  )\n}\n"],"names":["Thumbnail","projectName","entityType","entityId","icon","color","thumbnailHash","isLoading","shimmer","className","disabled","src","hoverIcon","showBorder","props","isProject","isWrongEntity","hasIdentity","url","getEntityThumbnailUrl","error","setError","useState","loaded","setLoaded","useEffect","jsxs","Styled.Card","clsx","Icon","jsx","Styled.Image"],"mappings":"qfAsBO,MAAMA,EAAY,CAAC,CACxB,YAAAC,EAAc,GACd,WAAAC,EAAa,GACb,SAAAC,EAAW,GACX,KAAAC,EACA,MAAAC,EACA,cAAAC,EACA,UAAAC,EACA,QAAAC,EACA,UAAAC,EACA,SAAAC,EACA,IAAAC,EACA,UAAAC,EACA,WAAAC,EAAa,GACb,GAAGC,CACL,IAAsB,CACpB,MAAMC,EAAYb,IAAe,UAC3Bc,EAAgB,CAAC,SAAS,EAAE,SAASd,CAAU,EAC/Ce,EAAcF,EAAY,CAAC,CAACd,EAAc,CAAC,CAACE,EAElD,IAAIe,EAAM,GACNhB,IAAeI,GAAiBS,IAAcE,IAC5CN,EACFO,EAAMP,EAENO,EAAMC,EAAAA,sBAAsB,CAAE,YAAAlB,EAAa,WAAAC,EAAY,SAAAC,EAAU,cAAAG,CAAA,CAAe,GAAK,IAIzF,KAAM,CAACc,EAAOC,CAAQ,EAAIC,EAAAA,SAAS,EAAK,EAClC,CAACC,EAAQC,CAAS,EAAIF,EAAAA,SAAS,EAAK,EAE1CG,OAAAA,EAAAA,UAAU,IAAM,CACd,GAAIP,IAAQ,GAAI,CACdM,EAAU,EAAI,EACdH,EAAS,EAAI,EACb,MACF,CAEAG,EAAU,EAAK,EACfH,EAAS,EAAK,CAChB,EAAG,CAACH,CAAG,CAAC,EAGNQ,EAAAA,kBAAAA,KAACC,EAAAA,KAAA,CACC,UAAWC,EAAKnB,EAAW,YAAa,CACtC,QAASD,IAAYD,GAAa,CAACgB,GACnC,OAAAA,EACA,MAAAH,EACA,UAAW,CAAC,CAACN,EAAM,QACnB,OAAQD,CAAA,CACT,EACA,GAAGC,EAEF,SAAA,EAAA,CAACP,GAAa,CAACgB,IAAW,CAACb,2BAC1BmB,EAAAA,KAAA,CAAK,MAAO,CAAE,MAAOxB,GAAS,MAAA,EAAa,KAAMD,GAAQ,QAAS,UAAU,YAAY,EAE1FF,GAAcD,GAAe,CAACe,GAAiBC,GAC9Ca,EAAAA,kBAAAA,IAACC,EAAAA,MAAA,CACC,IAAK,oBAAoB5B,GAAYF,CAAW,GAChD,IAAKiB,EACL,OAAQ,IAAM,CACZM,EAAU,EAAI,EACdH,EAAS,EAAK,CAChB,EACA,QAAS,IAAM,CACbG,EAAU,EAAI,EACdH,EAAS,EAAI,CACf,CAAA,CAAA,EAGHT,GAAakB,EAAAA,kBAAAA,IAACD,OAAA,CAAK,KAAMjB,EAAW,UAAU,YAAA,CAAa,CAAA,CAAA,CAAA,CAGlE"}

package/dist/shared/src/components/Thumbnail/Thumbnail.es.js

@@ -1,5 +1,5 @@
 import { j as e } from "../../../../_virtual/jsx-runtime.es.js";
-import { useState as p, useEffect as P } from "react";
+import { useState as x, useEffect as P } from "react";
 import { Icon as E } from "@ynput/ayon-react-components";
 import R from "clsx";
 import { Card as S, Image as U } from "./Thumbnail.styled.es.js";
@@ -8,8 +8,9 @@ import "react-toastify";
 import "uuid";
 import { getEntityThumbnailUrl as W } from "../../util/getThumbnailUrl.es.js";
 import "../../api/queries/users/updateUsers.es.js";
+import "../../util/searchTerms.es.js";
 import "../../util/pubsub.es.js";
-const K = ({
+const M = ({
   projectName: t = "",
   entityType: r = "",
   entityId: l = "",
@@ -25,10 +26,10 @@ const K = ({
   showBorder: C = !0,
   ...f
 }) => {
-  const d = r === "project", v = ["product"].includes(r), x = d ? !!t : !!l;
+  const d = r === "project", v = ["product"].includes(r), p = d ? !!t : !!l;
   let o = "";
-  r && (a || d) && x && (n ? o = n : o = W({ projectName: t, entityType: r, entityId: l, thumbnailHash: a }) ?? "");
-  const [L, s] = p(!1), [m, i] = p(!1);
+  r && (a || d) && p && (n ? o = n : o = W({ projectName: t, entityType: r, entityId: l, thumbnailHash: a }) ?? "");
+  const [L, s] = x(!1), [m, i] = x(!1);
   return P(() => {
     if (o === "") {
       i(!0), s(!0);
@@ -48,7 +49,7 @@ const K = ({
       ...f,
       children: [
         (!c || !m) && !k && /* @__PURE__ */ e.jsx(E, { style: { color: j || void 0 }, icon: b || "image", className: "type-icon" }),
-        r && t && !v && x && /* @__PURE__ */ e.jsx(
+        r && t && !v && p && /* @__PURE__ */ e.jsx(
           U,
           {
             alt: `Entity thumbnail ${l || t}`,
@@ -67,6 +68,6 @@ const K = ({
   );
 };
 export {
-  K as Thumbnail
+  M as Thumbnail
 };
 //# sourceMappingURL=Thumbnail.es.js.map

package/dist/shared/src/components/Thumbnail/Thumbnail.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Thumbnail.es.js","sources":["../../../../../src/components/Thumbnail/Thumbnail.tsx"],"sourcesContent":["import { HTMLAttributes, useEffect, useState } from 'react'\nimport { Icon } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport * as Styled from './Thumbnail.styled'\nimport { getEntityThumbnailUrl } from '@shared/util'\n\nexport interface ThumbnailProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {\n  projectName?: string\n  entityType?: string\n  entityId?: string\n  icon?: string | null\n  color?: string | null\n  thumbnailHash?: string\n  isLoading?: boolean\n  shimmer?: boolean\n  className?: string\n  disabled?: boolean\n  src?: string\n  hoverIcon?: string\n  showBorder?: boolean\n}\n\nexport const Thumbnail = ({\n  projectName = '',\n  entityType = '',\n  entityId = '',\n  icon,\n  color,\n  thumbnailHash,\n  isLoading,\n  shimmer,\n  className,\n  disabled,\n  src,\n  hoverIcon,\n  showBorder = true,\n  ...props\n}: ThumbnailProps) => {\n  const isProject = entityType === 'project'\n  const isWrongEntity = ['product'].includes(entityType)\n  const hasIdentity = isProject ? !!projectName : !!entityId\n\n  let url = ''\n  if (entityType && (thumbnailHash || isProject) && hasIdentity) {\n    if (src) {\n      url = src\n    } else {\n      url = getEntityThumbnailUrl({ projectName, entityType, entityId, thumbnailHash }) ?? ''\n    }\n  }\n\n  const [error, setError] = useState(false)\n  const [loaded, setLoaded] = useState(false)\n\n  useEffect(() => {\n    if (url === '') {\n      setLoaded(true)\n      setError(true)\n      return\n    }\n\n    setLoaded(false)\n    setError(false)\n  }, [url])\n\n  return (\n    <Styled.Card\n      className={clsx(className, 'thumbnail', {\n        loading: shimmer && (isLoading || !loaded),\n        loaded,\n        error,\n        clickable: !!props.onClick,\n        border: showBorder,\n      })}\n      {...props}\n    >\n      {(!isLoading || !loaded) && !disabled && (\n        <Icon style={{ color: color || undefined }} icon={icon || 'image'} className=\"type-icon\" />\n      )}\n      {entityType && projectName && !isWrongEntity && hasIdentity && (\n        <Styled.Image\n          alt={`Entity thumbnail ${entityId || projectName}`}\n          src={url}\n          onLoad={() => {\n            setLoaded(true)\n            setError(false)\n          }}\n          onError={() => {\n            setLoaded(true)\n            setError(true)\n          }}\n        />\n      )}\n      {hoverIcon && <Icon icon={hoverIcon} className=\"hover-icon\" />}\n    </Styled.Card>\n  )\n}\n"],"names":["Thumbnail","projectName","entityType","entityId","icon","color","thumbnailHash","isLoading","shimmer","className","disabled","src","hoverIcon","showBorder","props","isProject","isWrongEntity","hasIdentity","url","getEntityThumbnailUrl","error","setError","useState","loaded","setLoaded","useEffect","jsxs","Styled.Card","clsx","Icon","jsx","Styled.Image"],"mappings":";;;;;;;;;;;AAsBO,MAAMA,IAAY,CAAC;AAAA,EACxB,aAAAC,IAAc;AAAA,EACd,YAAAC,IAAa;AAAA,EACb,UAAAC,IAAW;AAAA,EACX,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,KAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,GAAGC;AACL,MAAsB;AACpB,QAAMC,IAAYb,MAAe,WAC3Bc,IAAgB,CAAC,SAAS,EAAE,SAASd,CAAU,GAC/Ce,IAAcF,IAAY,CAAC,CAACd,IAAc,CAAC,CAACE;AAElD,MAAIe,IAAM;AACV,EAAIhB,MAAeI,KAAiBS,MAAcE,MAC5CN,IACFO,IAAMP,IAENO,IAAMC,EAAsB,EAAE,aAAAlB,GAAa,YAAAC,GAAY,UAAAC,GAAU,eAAAG,EAAA,CAAe,KAAK;AAIzF,QAAM,CAACc,GAAOC,CAAQ,IAAIC,EAAS,EAAK,GAClC,CAACC,GAAQC,CAAS,IAAIF,EAAS,EAAK;AAE1C,SAAAG,EAAU,MAAM;AACd,QAAIP,MAAQ,IAAI;AACd,MAAAM,EAAU,EAAI,GACdH,EAAS,EAAI;AACb;AAAA,IACF;AAEA,IAAAG,EAAU,EAAK,GACfH,EAAS,EAAK;AAAA,EAChB,GAAG,CAACH,CAAG,CAAC,GAGNQ,gBAAAA,EAAAA;AAAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAWC,EAAKnB,GAAW,aAAa;AAAA,QACtC,SAASD,MAAYD,KAAa,CAACgB;AAAA,QACnC,QAAAA;AAAA,QACA,OAAAH;AAAA,QACA,WAAW,CAAC,CAACN,EAAM;AAAA,QACnB,QAAQD;AAAA,MAAA,CACT;AAAA,MACA,GAAGC;AAAA,MAEF,UAAA;AAAA,SAAA,CAACP,KAAa,CAACgB,MAAW,CAACb,2BAC1BmB,GAAA,EAAK,OAAO,EAAE,OAAOxB,KAAS,OAAA,GAAa,MAAMD,KAAQ,SAAS,WAAU,aAAY;AAAA,QAE1FF,KAAcD,KAAe,CAACe,KAAiBC,KAC9Ca,gBAAAA,EAAAA;AAAAA,UAACC;AAAAA,UAAA;AAAA,YACC,KAAK,oBAAoB5B,KAAYF,CAAW;AAAA,YAChD,KAAKiB;AAAA,YACL,QAAQ,MAAM;AACZ,cAAAM,EAAU,EAAI,GACdH,EAAS,EAAK;AAAA,YAChB;AAAA,YACA,SAAS,MAAM;AACb,cAAAG,EAAU,EAAI,GACdH,EAAS,EAAI;AAAA,YACf;AAAA,UAAA;AAAA,QAAA;AAAA,QAGHT,KAAakB,gBAAAA,EAAAA,IAACD,GAAA,EAAK,MAAMjB,GAAW,WAAU,aAAA,CAAa;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGlE;"}
+{"version":3,"file":"Thumbnail.es.js","sources":["../../../../../src/components/Thumbnail/Thumbnail.tsx"],"sourcesContent":["import { HTMLAttributes, useEffect, useState } from 'react'\nimport { Icon } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport * as Styled from './Thumbnail.styled'\nimport { getEntityThumbnailUrl } from '@shared/util'\n\nexport interface ThumbnailProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {\n  projectName?: string\n  entityType?: string\n  entityId?: string\n  icon?: string | null\n  color?: string | null\n  thumbnailHash?: string\n  isLoading?: boolean\n  shimmer?: boolean\n  className?: string\n  disabled?: boolean\n  src?: string\n  hoverIcon?: string\n  showBorder?: boolean\n}\n\nexport const Thumbnail = ({\n  projectName = '',\n  entityType = '',\n  entityId = '',\n  icon,\n  color,\n  thumbnailHash,\n  isLoading,\n  shimmer,\n  className,\n  disabled,\n  src,\n  hoverIcon,\n  showBorder = true,\n  ...props\n}: ThumbnailProps) => {\n  const isProject = entityType === 'project'\n  const isWrongEntity = ['product'].includes(entityType)\n  const hasIdentity = isProject ? !!projectName : !!entityId\n\n  let url = ''\n  if (entityType && (thumbnailHash || isProject) && hasIdentity) {\n    if (src) {\n      url = src\n    } else {\n      url = getEntityThumbnailUrl({ projectName, entityType, entityId, thumbnailHash }) ?? ''\n    }\n  }\n\n  const [error, setError] = useState(false)\n  const [loaded, setLoaded] = useState(false)\n\n  useEffect(() => {\n    if (url === '') {\n      setLoaded(true)\n      setError(true)\n      return\n    }\n\n    setLoaded(false)\n    setError(false)\n  }, [url])\n\n  return (\n    <Styled.Card\n      className={clsx(className, 'thumbnail', {\n        loading: shimmer && (isLoading || !loaded),\n        loaded,\n        error,\n        clickable: !!props.onClick,\n        border: showBorder,\n      })}\n      {...props}\n    >\n      {(!isLoading || !loaded) && !disabled && (\n        <Icon style={{ color: color || undefined }} icon={icon || 'image'} className=\"type-icon\" />\n      )}\n      {entityType && projectName && !isWrongEntity && hasIdentity && (\n        <Styled.Image\n          alt={`Entity thumbnail ${entityId || projectName}`}\n          src={url}\n          onLoad={() => {\n            setLoaded(true)\n            setError(false)\n          }}\n          onError={() => {\n            setLoaded(true)\n            setError(true)\n          }}\n        />\n      )}\n      {hoverIcon && <Icon icon={hoverIcon} className=\"hover-icon\" />}\n    </Styled.Card>\n  )\n}\n"],"names":["Thumbnail","projectName","entityType","entityId","icon","color","thumbnailHash","isLoading","shimmer","className","disabled","src","hoverIcon","showBorder","props","isProject","isWrongEntity","hasIdentity","url","getEntityThumbnailUrl","error","setError","useState","loaded","setLoaded","useEffect","jsxs","Styled.Card","clsx","Icon","jsx","Styled.Image"],"mappings":";;;;;;;;;;;;AAsBO,MAAMA,IAAY,CAAC;AAAA,EACxB,aAAAC,IAAc;AAAA,EACd,YAAAC,IAAa;AAAA,EACb,UAAAC,IAAW;AAAA,EACX,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,KAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,GAAGC;AACL,MAAsB;AACpB,QAAMC,IAAYb,MAAe,WAC3Bc,IAAgB,CAAC,SAAS,EAAE,SAASd,CAAU,GAC/Ce,IAAcF,IAAY,CAAC,CAACd,IAAc,CAAC,CAACE;AAElD,MAAIe,IAAM;AACV,EAAIhB,MAAeI,KAAiBS,MAAcE,MAC5CN,IACFO,IAAMP,IAENO,IAAMC,EAAsB,EAAE,aAAAlB,GAAa,YAAAC,GAAY,UAAAC,GAAU,eAAAG,EAAA,CAAe,KAAK;AAIzF,QAAM,CAACc,GAAOC,CAAQ,IAAIC,EAAS,EAAK,GAClC,CAACC,GAAQC,CAAS,IAAIF,EAAS,EAAK;AAE1C,SAAAG,EAAU,MAAM;AACd,QAAIP,MAAQ,IAAI;AACd,MAAAM,EAAU,EAAI,GACdH,EAAS,EAAI;AACb;AAAA,IACF;AAEA,IAAAG,EAAU,EAAK,GACfH,EAAS,EAAK;AAAA,EAChB,GAAG,CAACH,CAAG,CAAC,GAGNQ,gBAAAA,EAAAA;AAAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAWC,EAAKnB,GAAW,aAAa;AAAA,QACtC,SAASD,MAAYD,KAAa,CAACgB;AAAA,QACnC,QAAAA;AAAA,QACA,OAAAH;AAAA,QACA,WAAW,CAAC,CAACN,EAAM;AAAA,QACnB,QAAQD;AAAA,MAAA,CACT;AAAA,MACA,GAAGC;AAAA,MAEF,UAAA;AAAA,SAAA,CAACP,KAAa,CAACgB,MAAW,CAACb,2BAC1BmB,GAAA,EAAK,OAAO,EAAE,OAAOxB,KAAS,OAAA,GAAa,MAAMD,KAAQ,SAAS,WAAU,aAAY;AAAA,QAE1FF,KAAcD,KAAe,CAACe,KAAiBC,KAC9Ca,gBAAAA,EAAAA;AAAAA,UAACC;AAAAA,UAAA;AAAA,YACC,KAAK,oBAAoB5B,KAAYF,CAAW;AAAA,YAChD,KAAKiB;AAAA,YACL,QAAQ,MAAM;AACZ,cAAAM,EAAU,EAAI,GACdH,EAAS,EAAK;AAAA,YAChB;AAAA,YACA,SAAS,MAAM;AACb,cAAAG,EAAU,EAAI,GACdH,EAAS,EAAI;AAAA,YACf;AAAA,UAAA;AAAA,QAAA;AAAA,QAGHT,KAAakB,gBAAAA,EAAAA,IAACD,GAAA,EAAK,MAAMjB,GAAW,WAAU,aAAA,CAAa;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGlE;"}

package/dist/shared/src/components/ThumbnailSimple/ThumbnailSimple.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../../../../_virtual/jsx-runtime.cjs.js"),r=require("styled-components"),q=require("@ynput/ayon-react-components");require("lodash");require("react-toastify");require("uuid");const f=require("../../util/getThumbnailUrl.cjs.js");require("../../api/queries/users/updateUsers.cjs.js");require("../../util/pubsub.cjs.js");const v=r.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../../../../_virtual/jsx-runtime.cjs.js"),r=require("styled-components"),q=require("@ynput/ayon-react-components");require("lodash");require("react-toastify");require("uuid");const f=require("../../util/getThumbnailUrl.cjs.js");require("../../api/queries/users/updateUsers.cjs.js");require("../../util/searchTerms.cjs.js");require("../../util/pubsub.cjs.js");const v=r.div`
   position: relative;
   width: 100%;
   max-width: 500px;
@@ -29,5 +29,5 @@
   display: block;
   position: absolute;
   inset: 0;
-`,w=({projectName:e,entityType:t,entityId:i,icon:l,thumbnailHash:n,isLoading:a,className:c,disabled:u,src:s,onLoad:m,onError:d,iconOnly:h,...b})=>{const x=f.getEntityThumbnailUrl({projectName:e,entityType:t,entityId:i,thumbnailHash:n?String(n):void 0}),g=t==="project",p=["product"].includes(t),j=g?!!e:!!i;return o.jsxRuntimeExports.jsxs(v,{className:c+" thumbnail",...b,children:[!a&&!u&&o.jsxRuntimeExports.jsx(q.Icon,{icon:l||"image"}),(t&&!p&&j||s)&&!h&&o.jsxRuntimeExports.jsx(y,{alt:`Entity thumbnail ${i||e}`,src:s||x||void 0,onLoad:m,onError:d})]})};exports.ThumbnailSimple=w;
+`,w=({projectName:t,entityType:e,entityId:i,icon:l,thumbnailHash:n,isLoading:a,className:c,disabled:u,src:s,onLoad:m,onError:d,iconOnly:h,...b})=>{const x=f.getEntityThumbnailUrl({projectName:t,entityType:e,entityId:i,thumbnailHash:n?String(n):void 0}),g=e==="project",p=["product"].includes(e),j=g?!!t:!!i;return o.jsxRuntimeExports.jsxs(v,{className:c+" thumbnail",...b,children:[!a&&!u&&o.jsxRuntimeExports.jsx(q.Icon,{icon:l||"image"}),(e&&!p&&j||s)&&!h&&o.jsxRuntimeExports.jsx(y,{alt:`Entity thumbnail ${i||t}`,src:s||x||void 0,onLoad:m,onError:d})]})};exports.ThumbnailSimple=w;
 //# sourceMappingURL=ThumbnailSimple.cjs.js.map

package/dist/shared/src/components/ThumbnailSimple/ThumbnailSimple.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThumbnailSimple.cjs.js","sources":["../../../../../src/components/ThumbnailSimple/ThumbnailSimple.tsx"],"sourcesContent":["import React from 'react'\nimport styled from 'styled-components'\nimport { Icon } from '@ynput/ayon-react-components'\nimport { getEntityThumbnailUrl } from '@shared/util'\n\nexport interface ThumbnailSimpleProps extends React.HTMLAttributes<HTMLDivElement> {\n  projectName: string\n  entityType: string\n  entityId: string\n  icon?: string\n  thumbnailHash?: string\n  isLoading?: boolean\n  disabled?: boolean\n  src?: string\n  onLoad?: React.ReactEventHandler<HTMLImageElement>\n  onError?: React.ReactEventHandler<HTMLImageElement>\n  iconOnly?: boolean\n}\n\nconst ThumbnailStyled = styled.div`\n  position: relative;\n  width: 100%;\n  max-width: 500px;\n  aspect-ratio: 1.77;\n  overflow: hidden;\n  margin: auto;\n  max-width: 250px;\n  background-color: var(--md-sys-color-surface-container-lowest);\n\n  /* icon */\n  span {\n    position: absolute;\n    font-size: 4rem;\n    user-select: none;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    inset: 0;\n    background-color: hsl(220 20% 8%);\n    color: var(--md-sys-color-outline);\n  }\n`\n\nconst ImageStyled = styled.img`\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n\n  /* ensures it always fills the parent */\n  display: block;\n  position: absolute;\n  inset: 0;\n`\n\nexport const ThumbnailSimple: React.FC<ThumbnailSimpleProps> = ({\n  projectName,\n  entityType,\n  entityId,\n  icon,\n  thumbnailHash,\n  isLoading,\n  className,\n  disabled,\n  src,\n  onLoad,\n  onError,\n  iconOnly,\n  ...props\n}) => {\n  const url = getEntityThumbnailUrl({\n    projectName,\n    entityType,\n    entityId,\n    thumbnailHash: thumbnailHash ? String(thumbnailHash) : undefined,\n  })\n  const isProject = entityType === 'project'\n  const isWrongEntity = ['product'].includes(entityType)\n  const hasIdentity = isProject ? !!projectName : !!entityId\n\n  return (\n    <ThumbnailStyled className={className + ' thumbnail'} {...props}>\n      {!isLoading && !disabled && <Icon icon={icon || 'image'} />}\n      {((entityType && !isWrongEntity && hasIdentity) || src) && !iconOnly && (\n        <ImageStyled\n          alt={`Entity thumbnail ${entityId || projectName}`}\n          src={src || url || undefined}\n          onLoad={onLoad}\n          onError={onError}\n        />\n      )}\n    </ThumbnailStyled>\n  )\n}\n"],"names":["ThumbnailStyled","styled","ImageStyled","ThumbnailSimple","projectName","entityType","entityId","icon","thumbnailHash","isLoading","className","disabled","src","onLoad","onError","iconOnly","props","url","getEntityThumbnailUrl","isProject","isWrongEntity","hasIdentity","Icon","jsx"],"mappings":"+ZAmBA,MAAMA,EAAkBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAwBzBC,EAAcD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWdE,EAAkD,CAAC,CAC9D,YAAAC,EACA,WAAAC,EACA,SAAAC,EACA,KAAAC,EACA,cAAAC,EACA,UAAAC,EACA,UAAAC,EACA,SAAAC,EACA,IAAAC,EACA,OAAAC,EACA,QAAAC,EACA,SAAAC,EACA,GAAGC,CACL,IAAM,CACJ,MAAMC,EAAMC,EAAAA,sBAAsB,CAChC,YAAAd,EACA,WAAAC,EACA,SAAAC,EACA,cAAeE,EAAgB,OAAOA,CAAa,EAAI,MAAA,CACxD,EACKW,EAAYd,IAAe,UAC3Be,EAAgB,CAAC,SAAS,EAAE,SAASf,CAAU,EAC/CgB,EAAcF,EAAY,CAAC,CAACf,EAAc,CAAC,CAACE,EAElD,gCACGN,EAAA,CAAgB,UAAWU,EAAY,aAAe,GAAGM,EACvD,SAAA,CAAA,CAACP,GAAa,CAACE,2BAAaW,EAAAA,KAAA,CAAK,KAAMf,GAAQ,QAAS,GACtDF,GAAc,CAACe,GAAiBC,GAAgBT,IAAQ,CAACG,GAC1DQ,EAAAA,kBAAAA,IAACrB,EAAA,CACC,IAAK,oBAAoBI,GAAYF,CAAW,GAChD,IAAKQ,GAAOK,GAAO,OACnB,OAAAJ,EACA,QAAAC,CAAA,CAAA,CACF,EAEJ,CAEJ"}
+{"version":3,"file":"ThumbnailSimple.cjs.js","sources":["../../../../../src/components/ThumbnailSimple/ThumbnailSimple.tsx"],"sourcesContent":["import React from 'react'\nimport styled from 'styled-components'\nimport { Icon } from '@ynput/ayon-react-components'\nimport { getEntityThumbnailUrl } from '@shared/util'\n\nexport interface ThumbnailSimpleProps extends React.HTMLAttributes<HTMLDivElement> {\n  projectName: string\n  entityType: string\n  entityId: string\n  icon?: string\n  thumbnailHash?: string\n  isLoading?: boolean\n  disabled?: boolean\n  src?: string\n  onLoad?: React.ReactEventHandler<HTMLImageElement>\n  onError?: React.ReactEventHandler<HTMLImageElement>\n  iconOnly?: boolean\n}\n\nconst ThumbnailStyled = styled.div`\n  position: relative;\n  width: 100%;\n  max-width: 500px;\n  aspect-ratio: 1.77;\n  overflow: hidden;\n  margin: auto;\n  max-width: 250px;\n  background-color: var(--md-sys-color-surface-container-lowest);\n\n  /* icon */\n  span {\n    position: absolute;\n    font-size: 4rem;\n    user-select: none;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    inset: 0;\n    background-color: hsl(220 20% 8%);\n    color: var(--md-sys-color-outline);\n  }\n`\n\nconst ImageStyled = styled.img`\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n\n  /* ensures it always fills the parent */\n  display: block;\n  position: absolute;\n  inset: 0;\n`\n\nexport const ThumbnailSimple: React.FC<ThumbnailSimpleProps> = ({\n  projectName,\n  entityType,\n  entityId,\n  icon,\n  thumbnailHash,\n  isLoading,\n  className,\n  disabled,\n  src,\n  onLoad,\n  onError,\n  iconOnly,\n  ...props\n}) => {\n  const url = getEntityThumbnailUrl({\n    projectName,\n    entityType,\n    entityId,\n    thumbnailHash: thumbnailHash ? String(thumbnailHash) : undefined,\n  })\n  const isProject = entityType === 'project'\n  const isWrongEntity = ['product'].includes(entityType)\n  const hasIdentity = isProject ? !!projectName : !!entityId\n\n  return (\n    <ThumbnailStyled className={className + ' thumbnail'} {...props}>\n      {!isLoading && !disabled && <Icon icon={icon || 'image'} />}\n      {((entityType && !isWrongEntity && hasIdentity) || src) && !iconOnly && (\n        <ImageStyled\n          alt={`Entity thumbnail ${entityId || projectName}`}\n          src={src || url || undefined}\n          onLoad={onLoad}\n          onError={onError}\n        />\n      )}\n    </ThumbnailStyled>\n  )\n}\n"],"names":["ThumbnailStyled","styled","ImageStyled","ThumbnailSimple","projectName","entityType","entityId","icon","thumbnailHash","isLoading","className","disabled","src","onLoad","onError","iconOnly","props","url","getEntityThumbnailUrl","isProject","isWrongEntity","hasIdentity","Icon","jsx"],"mappings":"wcAmBA,MAAMA,EAAkBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAwBzBC,EAAcD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWdE,EAAkD,CAAC,CAC9D,YAAAC,EACA,WAAAC,EACA,SAAAC,EACA,KAAAC,EACA,cAAAC,EACA,UAAAC,EACA,UAAAC,EACA,SAAAC,EACA,IAAAC,EACA,OAAAC,EACA,QAAAC,EACA,SAAAC,EACA,GAAGC,CACL,IAAM,CACJ,MAAMC,EAAMC,EAAAA,sBAAsB,CAChC,YAAAd,EACA,WAAAC,EACA,SAAAC,EACA,cAAeE,EAAgB,OAAOA,CAAa,EAAI,MAAA,CACxD,EACKW,EAAYd,IAAe,UAC3Be,EAAgB,CAAC,SAAS,EAAE,SAASf,CAAU,EAC/CgB,EAAcF,EAAY,CAAC,CAACf,EAAc,CAAC,CAACE,EAElD,gCACGN,EAAA,CAAgB,UAAWU,EAAY,aAAe,GAAGM,EACvD,SAAA,CAAA,CAACP,GAAa,CAACE,2BAAaW,EAAAA,KAAA,CAAK,KAAMf,GAAQ,QAAS,GACtDF,GAAc,CAACe,GAAiBC,GAAgBT,IAAQ,CAACG,GAC1DQ,EAAAA,kBAAAA,IAACrB,EAAA,CACC,IAAK,oBAAoBI,GAAYF,CAAW,GAChD,IAAKQ,GAAOK,GAAO,OACnB,OAAAJ,EACA,QAAAC,CAAA,CAAA,CACF,EAEJ,CAEJ"}

package/dist/shared/src/components/ThumbnailSimple/ThumbnailSimple.es.js

@@ -6,6 +6,7 @@ import "react-toastify";
 import "uuid";
 import { getEntityThumbnailUrl as v } from "../../util/getThumbnailUrl.es.js";
 import "../../api/queries/users/updateUsers.es.js";
+import "../../util/searchTerms.es.js";
 import "../../util/pubsub.es.js";
 const w = e.div`
   position: relative;
@@ -38,7 +39,7 @@ const w = e.div`
   display: block;
   position: absolute;
   inset: 0;
-`, $ = ({
+`, q = ({
   projectName: t,
   entityType: o,
   entityId: i,
@@ -49,8 +50,8 @@ const w = e.div`
   disabled: m,
   src: r,
   onLoad: d,
-  onError: u,
-  iconOnly: p,
+  onError: p,
+  iconOnly: u,
   ...h
 }) => {
   const b = v({
@@ -61,18 +62,18 @@ const w = e.div`
   }), f = o === "project", g = ["product"].includes(o), x = f ? !!t : !!i;
   return /* @__PURE__ */ s.jsxs(w, { className: c + " thumbnail", ...h, children: [
     !a && !m && /* @__PURE__ */ s.jsx(j, { icon: l || "image" }),
-    (o && !g && x || r) && !p && /* @__PURE__ */ s.jsx(
+    (o && !g && x || r) && !u && /* @__PURE__ */ s.jsx(
       y,
       {
         alt: `Entity thumbnail ${i || t}`,
         src: r || b || void 0,
         onLoad: d,
-        onError: u
+        onError: p
       }
     )
   ] });
 };
 export {
-  $ as ThumbnailSimple
+  q as ThumbnailSimple
 };
 //# sourceMappingURL=ThumbnailSimple.es.js.map

package/dist/shared/src/components/ThumbnailSimple/ThumbnailSimple.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThumbnailSimple.es.js","sources":["../../../../../src/components/ThumbnailSimple/ThumbnailSimple.tsx"],"sourcesContent":["import React from 'react'\nimport styled from 'styled-components'\nimport { Icon } from '@ynput/ayon-react-components'\nimport { getEntityThumbnailUrl } from '@shared/util'\n\nexport interface ThumbnailSimpleProps extends React.HTMLAttributes<HTMLDivElement> {\n  projectName: string\n  entityType: string\n  entityId: string\n  icon?: string\n  thumbnailHash?: string\n  isLoading?: boolean\n  disabled?: boolean\n  src?: string\n  onLoad?: React.ReactEventHandler<HTMLImageElement>\n  onError?: React.ReactEventHandler<HTMLImageElement>\n  iconOnly?: boolean\n}\n\nconst ThumbnailStyled = styled.div`\n  position: relative;\n  width: 100%;\n  max-width: 500px;\n  aspect-ratio: 1.77;\n  overflow: hidden;\n  margin: auto;\n  max-width: 250px;\n  background-color: var(--md-sys-color-surface-container-lowest);\n\n  /* icon */\n  span {\n    position: absolute;\n    font-size: 4rem;\n    user-select: none;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    inset: 0;\n    background-color: hsl(220 20% 8%);\n    color: var(--md-sys-color-outline);\n  }\n`\n\nconst ImageStyled = styled.img`\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n\n  /* ensures it always fills the parent */\n  display: block;\n  position: absolute;\n  inset: 0;\n`\n\nexport const ThumbnailSimple: React.FC<ThumbnailSimpleProps> = ({\n  projectName,\n  entityType,\n  entityId,\n  icon,\n  thumbnailHash,\n  isLoading,\n  className,\n  disabled,\n  src,\n  onLoad,\n  onError,\n  iconOnly,\n  ...props\n}) => {\n  const url = getEntityThumbnailUrl({\n    projectName,\n    entityType,\n    entityId,\n    thumbnailHash: thumbnailHash ? String(thumbnailHash) : undefined,\n  })\n  const isProject = entityType === 'project'\n  const isWrongEntity = ['product'].includes(entityType)\n  const hasIdentity = isProject ? !!projectName : !!entityId\n\n  return (\n    <ThumbnailStyled className={className + ' thumbnail'} {...props}>\n      {!isLoading && !disabled && <Icon icon={icon || 'image'} />}\n      {((entityType && !isWrongEntity && hasIdentity) || src) && !iconOnly && (\n        <ImageStyled\n          alt={`Entity thumbnail ${entityId || projectName}`}\n          src={src || url || undefined}\n          onLoad={onLoad}\n          onError={onError}\n        />\n      )}\n    </ThumbnailStyled>\n  )\n}\n"],"names":["ThumbnailStyled","styled","ImageStyled","ThumbnailSimple","projectName","entityType","entityId","icon","thumbnailHash","isLoading","className","disabled","src","onLoad","onError","iconOnly","props","url","getEntityThumbnailUrl","isProject","isWrongEntity","hasIdentity","Icon","jsx"],"mappings":";;;;;;;;;AAmBA,MAAMA,IAAkBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAwBzBC,IAAcD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWdE,IAAkD,CAAC;AAAA,EAC9D,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,KAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAMC,EAAsB;AAAA,IAChC,aAAAd;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,eAAeE,IAAgB,OAAOA,CAAa,IAAI;AAAA,EAAA,CACxD,GACKW,IAAYd,MAAe,WAC3Be,IAAgB,CAAC,SAAS,EAAE,SAASf,CAAU,GAC/CgB,IAAcF,IAAY,CAAC,CAACf,IAAc,CAAC,CAACE;AAElD,gCACGN,GAAA,EAAgB,WAAWU,IAAY,cAAe,GAAGM,GACvD,UAAA;AAAA,IAAA,CAACP,KAAa,CAACE,2BAAaW,GAAA,EAAK,MAAMf,KAAQ,SAAS;AAAA,KACtDF,KAAc,CAACe,KAAiBC,KAAgBT,MAAQ,CAACG,KAC1DQ,gBAAAA,EAAAA;AAAAA,MAACrB;AAAA,MAAA;AAAA,QACC,KAAK,oBAAoBI,KAAYF,CAAW;AAAA,QAChD,KAAKQ,KAAOK,KAAO;AAAA,QACnB,QAAAJ;AAAA,QACA,SAAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GAEJ;AAEJ;"}
+{"version":3,"file":"ThumbnailSimple.es.js","sources":["../../../../../src/components/ThumbnailSimple/ThumbnailSimple.tsx"],"sourcesContent":["import React from 'react'\nimport styled from 'styled-components'\nimport { Icon } from '@ynput/ayon-react-components'\nimport { getEntityThumbnailUrl } from '@shared/util'\n\nexport interface ThumbnailSimpleProps extends React.HTMLAttributes<HTMLDivElement> {\n  projectName: string\n  entityType: string\n  entityId: string\n  icon?: string\n  thumbnailHash?: string\n  isLoading?: boolean\n  disabled?: boolean\n  src?: string\n  onLoad?: React.ReactEventHandler<HTMLImageElement>\n  onError?: React.ReactEventHandler<HTMLImageElement>\n  iconOnly?: boolean\n}\n\nconst ThumbnailStyled = styled.div`\n  position: relative;\n  width: 100%;\n  max-width: 500px;\n  aspect-ratio: 1.77;\n  overflow: hidden;\n  margin: auto;\n  max-width: 250px;\n  background-color: var(--md-sys-color-surface-container-lowest);\n\n  /* icon */\n  span {\n    position: absolute;\n    font-size: 4rem;\n    user-select: none;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    inset: 0;\n    background-color: hsl(220 20% 8%);\n    color: var(--md-sys-color-outline);\n  }\n`\n\nconst ImageStyled = styled.img`\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n\n  /* ensures it always fills the parent */\n  display: block;\n  position: absolute;\n  inset: 0;\n`\n\nexport const ThumbnailSimple: React.FC<ThumbnailSimpleProps> = ({\n  projectName,\n  entityType,\n  entityId,\n  icon,\n  thumbnailHash,\n  isLoading,\n  className,\n  disabled,\n  src,\n  onLoad,\n  onError,\n  iconOnly,\n  ...props\n}) => {\n  const url = getEntityThumbnailUrl({\n    projectName,\n    entityType,\n    entityId,\n    thumbnailHash: thumbnailHash ? String(thumbnailHash) : undefined,\n  })\n  const isProject = entityType === 'project'\n  const isWrongEntity = ['product'].includes(entityType)\n  const hasIdentity = isProject ? !!projectName : !!entityId\n\n  return (\n    <ThumbnailStyled className={className + ' thumbnail'} {...props}>\n      {!isLoading && !disabled && <Icon icon={icon || 'image'} />}\n      {((entityType && !isWrongEntity && hasIdentity) || src) && !iconOnly && (\n        <ImageStyled\n          alt={`Entity thumbnail ${entityId || projectName}`}\n          src={src || url || undefined}\n          onLoad={onLoad}\n          onError={onError}\n        />\n      )}\n    </ThumbnailStyled>\n  )\n}\n"],"names":["ThumbnailStyled","styled","ImageStyled","ThumbnailSimple","projectName","entityType","entityId","icon","thumbnailHash","isLoading","className","disabled","src","onLoad","onError","iconOnly","props","url","getEntityThumbnailUrl","isProject","isWrongEntity","hasIdentity","Icon","jsx"],"mappings":";;;;;;;;;;AAmBA,MAAMA,IAAkBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAwBzBC,IAAcD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWdE,IAAkD,CAAC;AAAA,EAC9D,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,KAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAMC,EAAsB;AAAA,IAChC,aAAAd;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,eAAeE,IAAgB,OAAOA,CAAa,IAAI;AAAA,EAAA,CACxD,GACKW,IAAYd,MAAe,WAC3Be,IAAgB,CAAC,SAAS,EAAE,SAASf,CAAU,GAC/CgB,IAAcF,IAAY,CAAC,CAACf,IAAc,CAAC,CAACE;AAElD,gCACGN,GAAA,EAAgB,WAAWU,IAAY,cAAe,GAAGM,GACvD,UAAA;AAAA,IAAA,CAACP,KAAa,CAACE,2BAAaW,GAAA,EAAK,MAAMf,KAAQ,SAAS;AAAA,KACtDF,KAAc,CAACe,KAAiBC,KAAgBT,MAAQ,CAACG,KAC1DQ,gBAAAA,EAAAA;AAAAA,MAACrB;AAAA,MAAA;AAAA,QACC,KAAK,oBAAoBI,KAAYF,CAAW;AAAA,QAChD,KAAKQ,KAAOK,KAAO;AAAA,QACnB,QAAAJ;AAAA,QACA,SAAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GAEJ;AAEJ;"}

package/dist/shared/src/components/VersionUploader/components/UploadVersionDialog.cjs.js

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../../../_virtual/jsx-runtime.cjs.js"),t=require("@ynput/ayon-react-components"),V=require("../context/VersionUploadContext.cjs.js"),b=require("./UploadVersionForm.cjs.js"),C=require("styled-components"),S=n=>{let r=String(n),o=Math.max(0,3-r.length);return`v${"0".repeat(o)}${r}`},E=C.span`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../../../../_virtual/jsx-runtime.cjs.js"),n=require("@ynput/ayon-react-components"),V=require("../context/VersionUploadContext.cjs.js"),b=require("./UploadVersionForm.cjs.js"),C=require("styled-components");require("lodash");require("react-toastify");require("uuid");const S=require("../../../util/errorHandling.cjs.js");require("../../../api/queries/users/updateUsers.cjs.js");require("../../../util/searchTerms.cjs.js");require("../../../util/pubsub.cjs.js");const f=s=>{let r=String(s),o=Math.max(0,3-r.length);return`v${"0".repeat(o)}${r}`},R=C.span`
   background-color: var(--md-sys-color-error-container);
   color: var(--md-sys-color-on-error-container);
   padding: var(--padding-s);
   border-radius: var(--border-radius-m);
-`,f=()=>{const{isOpen:n,onCloseVersionUpload:r,productId:o,taskId:s,projectName:d,form:i,latestVersion:c,handleFormChange:l,handleFormSubmit:u,isSubmitting:p,error:a,createdProductId:m,createdVersionId:x,matchedProduct:g}=V.useVersionUploadContext(),j=o||m,y=x,v=e.jsxRuntimeExports.jsxs("div",{style:{display:"flex",flexDirection:"row",gap:8},children:[e.jsxRuntimeExports.jsx(t.Spacer,{}),e.jsxRuntimeExports.jsx(t.Button,{onClick:r,label:"Cancel",variant:"text"}),e.jsxRuntimeExports.jsx(t.SaveButton,{type:"submit",form:"upload-version-form",label:`Create ${S(i.version)}`,icon:"upload",active:!0,saving:p})]}),h="Create new version - "+(o?"Product":s?"Task":"Folder");return e.jsxRuntimeExports.jsxs(t.Dialog,{isOpen:n,onClose:r,header:h,size:"md",footer:v,style:{width:600,maxHeight:"80vh"},children:[e.jsxRuntimeExports.jsx(b.UploadVersionForm,{formData:i,minVersion:c,onChange:l,onSubmit:u,hidden:o?["name","productType"]:g?["productType"]:[],projectName:d,versionId:y,productId:j}),a&&e.jsxRuntimeExports.jsx(E,{className:"error",children:JSON.stringify(a)})]})};exports.UploadVersionDialog=f;
+`,d=()=>{const{isOpen:s,onCloseVersionUpload:r,productId:o,taskId:i,projectName:u,form:a,latestVersion:c,handleFormChange:l,handleFormSubmit:p,isSubmitting:m,error:t,createdProductId:x,createdVersionId:g,matchedProduct:h}=V.useVersionUploadContext(),j=o||x,v=g,y=typeof t=="string"?t.length>0:!!t,q=e.jsxRuntimeExports.jsxs("div",{style:{display:"flex",flexDirection:"row",gap:8},children:[e.jsxRuntimeExports.jsx(n.Spacer,{}),e.jsxRuntimeExports.jsx(n.Button,{onClick:r,label:"Cancel",variant:"text"}),e.jsxRuntimeExports.jsx(n.SaveButton,{type:"submit",form:"upload-version-form",label:`Create ${f(a.version)}`,icon:"upload",active:!0,saving:m})]}),E="Create new version - "+(o?"Product":i?"Task":"Folder");return e.jsxRuntimeExports.jsxs(n.Dialog,{isOpen:s,onClose:r,header:E,size:"md",footer:q,style:{width:600,maxHeight:"80vh"},children:[e.jsxRuntimeExports.jsx(b.UploadVersionForm,{formData:a,minVersion:c,onChange:l,onSubmit:p,hidden:o?["name","productType"]:h?["productType"]:[],projectName:u,versionId:v,productId:j}),y&&e.jsxRuntimeExports.jsx(R,{className:"error",children:S.getRequestErrorString(t)})]})};exports.UploadVersionDialog=d;exports.default=d;
 //# sourceMappingURL=UploadVersionDialog.cjs.js.map

package/dist/shared/src/components/VersionUploader/components/UploadVersionDialog.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"UploadVersionDialog.cjs.js","sources":["../../../../../../src/components/VersionUploader/components/UploadVersionDialog.tsx"],"sourcesContent":["import { Dialog, Button, Spacer, SaveButton } from '@ynput/ayon-react-components'\nimport { FC } from 'react'\nimport { useVersionUploadContext } from '../context/VersionUploadContext'\nimport { UploadVersionForm } from './UploadVersionForm'\nimport styled from 'styled-components'\n\nconst toVersionString = (number: number) => {\n  // Convert the number to a string\n  let numStr = String(number)\n\n  // Calculate how many zeros are needed for padding\n  // If the number of digits is less than 3, we need 3 - numStr.length zeros.\n  // Otherwise, no padding is needed.\n  let paddingNeeded = Math.max(0, 3 - numStr.length)\n\n  // Create the padding string\n  let padding = '0'.repeat(paddingNeeded)\n\n  // Combine to form the version string\n  return `v${padding}${numStr}`\n}\n\nconst ErrorMessage = styled.span`\n  background-color: var(--md-sys-color-error-container);\n  color: var(--md-sys-color-on-error-container);\n  padding: var(--padding-s);\n  border-radius: var(--border-radius-m);\n`\n\ninterface UploadVersionDialogProps {}\n\nexport const UploadVersionDialog: FC<UploadVersionDialogProps> = () => {\n  const {\n    isOpen,\n    onCloseVersionUpload,\n    productId,\n    taskId,\n    projectName,\n    form,\n    latestVersion,\n    handleFormChange,\n    handleFormSubmit,\n    isSubmitting,\n    error,\n    createdProductId,\n    createdVersionId,\n    matchedProduct,\n  } = useVersionUploadContext()\n\n  // Use existing productId if available, otherwise use created one\n  const currentProductId = productId || createdProductId\n  const currentVersionId = createdVersionId\n\n  const footer = (\n    <div style={{ display: 'flex', flexDirection: 'row', gap: 8 }}>\n      <Spacer />\n      <Button onClick={onCloseVersionUpload} label=\"Cancel\" variant=\"text\" />\n      <SaveButton\n        type=\"submit\"\n        form=\"upload-version-form\"\n        label={`Create ${toVersionString(form.version)}`}\n        icon={'upload'}\n        active\n        saving={isSubmitting}\n      />\n    </div>\n  )\n\n  const creatingOnEntityType = productId ? 'Product' : taskId ? 'Task' : 'Folder'\n  const title = 'Create new version' + ' - ' + creatingOnEntityType\n\n  return (\n    <Dialog\n      isOpen={isOpen}\n      onClose={onCloseVersionUpload}\n      header={title}\n      size=\"md\"\n      footer={footer}\n      style={{ width: 600, maxHeight: '80vh' }}\n    >\n      <UploadVersionForm\n        formData={form}\n        minVersion={latestVersion}\n        onChange={handleFormChange}\n        onSubmit={handleFormSubmit}\n        hidden={productId ? ['name', 'productType'] : matchedProduct ? ['productType'] : []}\n        projectName={projectName}\n        versionId={currentVersionId}\n        productId={currentProductId}\n      />\n      {error && <ErrorMessage className=\"error\">{JSON.stringify(error)}</ErrorMessage>}\n    </Dialog>\n  )\n}\n\nexport default UploadVersionDialog\n"],"names":["toVersionString","number","numStr","paddingNeeded","ErrorMessage","styled","UploadVersionDialog","isOpen","onCloseVersionUpload","productId","taskId","projectName","form","latestVersion","handleFormChange","handleFormSubmit","isSubmitting","error","createdProductId","createdVersionId","matchedProduct","useVersionUploadContext","currentProductId","currentVersionId","footer","jsxs","jsx","Spacer","Button","SaveButton","title","Dialog","UploadVersionForm"],"mappings":"mTAMMA,EAAmBC,GAAmB,CAE1C,IAAIC,EAAS,OAAOD,CAAM,EAKtBE,EAAgB,KAAK,IAAI,EAAG,EAAID,EAAO,MAAM,EAMjD,MAAO,IAHO,IAAI,OAAOC,CAAa,CAGpB,GAAGD,CAAM,EAC7B,EAEME,EAAeC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EASfC,EAAoD,IAAM,CACrE,KAAM,CACJ,OAAAC,EACA,qBAAAC,EACA,UAAAC,EACA,OAAAC,EACA,YAAAC,EACA,KAAAC,EACA,cAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,aAAAC,EACA,MAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,eAAAC,CAAA,EACEC,0BAAA,EAGEC,EAAmBb,GAAaS,EAChCK,EAAmBJ,EAEnBK,EACJC,EAAAA,kBAAAA,KAAC,MAAA,CAAI,MAAO,CAAE,QAAS,OAAQ,cAAe,MAAO,IAAK,CAAA,EACxD,SAAA,CAAAC,EAAAA,kBAAAA,IAACC,EAAAA,OAAA,EAAO,0BACPC,EAAAA,OAAA,CAAO,QAASpB,EAAsB,MAAM,SAAS,QAAQ,OAAO,EACrEkB,EAAAA,kBAAAA,IAACG,EAAAA,WAAA,CACC,KAAK,SACL,KAAK,sBACL,MAAO,UAAU7B,EAAgBY,EAAK,OAAO,CAAC,GAC9C,KAAM,SACN,OAAM,GACN,OAAQI,CAAA,CAAA,CACV,EACF,EAIIc,EAAQ,yBADerB,EAAY,UAAYC,EAAS,OAAS,UAGvE,OACEe,EAAAA,kBAAAA,KAACM,EAAAA,OAAA,CACC,OAAAxB,EACA,QAASC,EACT,OAAQsB,EACR,KAAK,KACL,OAAAN,EACA,MAAO,CAAE,MAAO,IAAK,UAAW,MAAA,EAEhC,SAAA,CAAAE,EAAAA,kBAAAA,IAACM,EAAAA,kBAAA,CACC,SAAUpB,EACV,WAAYC,EACZ,SAAUC,EACV,SAAUC,EACV,OAAQN,EAAY,CAAC,OAAQ,aAAa,EAAIW,EAAiB,CAAC,aAAa,EAAI,CAAA,EACjF,YAAAT,EACA,UAAWY,EACX,UAAWD,CAAA,CAAA,EAEZL,2BAAUb,EAAA,CAAa,UAAU,QAAS,SAAA,KAAK,UAAUa,CAAK,CAAA,CAAE,CAAA,CAAA,CAAA,CAGvE"}
+{"version":3,"file":"UploadVersionDialog.cjs.js","sources":["../../../../../../src/components/VersionUploader/components/UploadVersionDialog.tsx"],"sourcesContent":["import { Dialog, Button, Spacer, SaveButton } from '@ynput/ayon-react-components'\nimport { FC } from 'react'\nimport { useVersionUploadContext } from '../context/VersionUploadContext'\nimport { UploadVersionForm } from './UploadVersionForm'\nimport styled from 'styled-components'\nimport { getRequestErrorString } from '@shared/util'\n\nconst toVersionString = (number: number) => {\n  // Convert the number to a string\n  let numStr = String(number)\n\n  // Calculate how many zeros are needed for padding\n  // If the number of digits is less than 3, we need 3 - numStr.length zeros.\n  // Otherwise, no padding is needed.\n  let paddingNeeded = Math.max(0, 3 - numStr.length)\n\n  // Create the padding string\n  let padding = '0'.repeat(paddingNeeded)\n\n  // Combine to form the version string\n  return `v${padding}${numStr}`\n}\n\nconst ErrorMessage = styled.span`\n  background-color: var(--md-sys-color-error-container);\n  color: var(--md-sys-color-on-error-container);\n  padding: var(--padding-s);\n  border-radius: var(--border-radius-m);\n`\n\ninterface UploadVersionDialogProps {}\n\nexport const UploadVersionDialog: FC<UploadVersionDialogProps> = () => {\n  const {\n    isOpen,\n    onCloseVersionUpload,\n    productId,\n    taskId,\n    projectName,\n    form,\n    latestVersion,\n    handleFormChange,\n    handleFormSubmit,\n    isSubmitting,\n    error,\n    createdProductId,\n    createdVersionId,\n    matchedProduct,\n  } = useVersionUploadContext()\n\n  // Use existing productId if available, otherwise use created one\n  const currentProductId = productId || createdProductId\n  const currentVersionId = createdVersionId\n  const hasError = typeof error === 'string' ? error.length > 0 : Boolean(error)\n\n  const footer = (\n    <div style={{ display: 'flex', flexDirection: 'row', gap: 8 }}>\n      <Spacer />\n      <Button onClick={onCloseVersionUpload} label=\"Cancel\" variant=\"text\" />\n      <SaveButton\n        type=\"submit\"\n        form=\"upload-version-form\"\n        label={`Create ${toVersionString(form.version)}`}\n        icon={'upload'}\n        active\n        saving={isSubmitting}\n      />\n    </div>\n  )\n\n  const creatingOnEntityType = productId ? 'Product' : taskId ? 'Task' : 'Folder'\n  const title = 'Create new version' + ' - ' + creatingOnEntityType\n\n  return (\n    <Dialog\n      isOpen={isOpen}\n      onClose={onCloseVersionUpload}\n      header={title}\n      size=\"md\"\n      footer={footer}\n      style={{ width: 600, maxHeight: '80vh' }}\n    >\n      <UploadVersionForm\n        formData={form}\n        minVersion={latestVersion}\n        onChange={handleFormChange}\n        onSubmit={handleFormSubmit}\n        hidden={productId ? ['name', 'productType'] : matchedProduct ? ['productType'] : []}\n        projectName={projectName}\n        versionId={currentVersionId}\n        productId={currentProductId}\n      />\n      {hasError && <ErrorMessage className=\"error\">{getRequestErrorString(error)}</ErrorMessage>}\n    </Dialog>\n  )\n}\n\nexport default UploadVersionDialog\n"],"names":["toVersionString","number","numStr","paddingNeeded","ErrorMessage","styled","UploadVersionDialog","isOpen","onCloseVersionUpload","productId","taskId","projectName","form","latestVersion","handleFormChange","handleFormSubmit","isSubmitting","error","createdProductId","createdVersionId","matchedProduct","useVersionUploadContext","currentProductId","currentVersionId","hasError","footer","jsxs","jsx","Spacer","Button","SaveButton","title","Dialog","UploadVersionForm","getRequestErrorString"],"mappings":"6kBAOA,MAAMA,EAAmBC,GAAmB,CAE1C,IAAIC,EAAS,OAAOD,CAAM,EAKtBE,EAAgB,KAAK,IAAI,EAAG,EAAID,EAAO,MAAM,EAMjD,MAAO,IAHO,IAAI,OAAOC,CAAa,CAGpB,GAAGD,CAAM,EAC7B,EAEME,EAAeC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EASfC,EAAoD,IAAM,CACrE,KAAM,CACJ,OAAAC,EACA,qBAAAC,EACA,UAAAC,EACA,OAAAC,EACA,YAAAC,EACA,KAAAC,EACA,cAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,aAAAC,EACA,MAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,eAAAC,CAAA,EACEC,0BAAA,EAGEC,EAAmBb,GAAaS,EAChCK,EAAmBJ,EACnBK,EAAW,OAAOP,GAAU,SAAWA,EAAM,OAAS,EAAI,EAAQA,EAElEQ,EACJC,EAAAA,kBAAAA,KAAC,MAAA,CAAI,MAAO,CAAE,QAAS,OAAQ,cAAe,MAAO,IAAK,CAAA,EACxD,SAAA,CAAAC,EAAAA,kBAAAA,IAACC,EAAAA,OAAA,EAAO,0BACPC,EAAAA,OAAA,CAAO,QAASrB,EAAsB,MAAM,SAAS,QAAQ,OAAO,EACrEmB,EAAAA,kBAAAA,IAACG,EAAAA,WAAA,CACC,KAAK,SACL,KAAK,sBACL,MAAO,UAAU9B,EAAgBY,EAAK,OAAO,CAAC,GAC9C,KAAM,SACN,OAAM,GACN,OAAQI,CAAA,CAAA,CACV,EACF,EAIIe,EAAQ,yBADetB,EAAY,UAAYC,EAAS,OAAS,UAGvE,OACEgB,EAAAA,kBAAAA,KAACM,EAAAA,OAAA,CACC,OAAAzB,EACA,QAASC,EACT,OAAQuB,EACR,KAAK,KACL,OAAAN,EACA,MAAO,CAAE,MAAO,IAAK,UAAW,MAAA,EAEhC,SAAA,CAAAE,EAAAA,kBAAAA,IAACM,EAAAA,kBAAA,CACC,SAAUrB,EACV,WAAYC,EACZ,SAAUC,EACV,SAAUC,EACV,OAAQN,EAAY,CAAC,OAAQ,aAAa,EAAIW,EAAiB,CAAC,aAAa,EAAI,CAAA,EACjF,YAAAT,EACA,UAAWY,EACX,UAAWD,CAAA,CAAA,EAEZE,GAAYG,EAAAA,kBAAAA,IAACvB,EAAA,CAAa,UAAU,QAAS,SAAA8B,wBAAsBjB,CAAK,CAAA,CAAE,CAAA,CAAA,CAAA,CAGjF"}