@ynput/ayon-frontend-shared 0.3.28 → 0.3.30

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

@@ -1 +1 @@
-{"version":3,"file":"SimpleFormDialog.es.js","sources":["../../../../../src/components/SimpleFormDialog/SimpleFormDialog.tsx"],"sourcesContent":["import styled from 'styled-components'\nimport React, { useState, useEffect } from 'react'\nimport ReactMarkdown from 'react-markdown'\nimport {\n  Button,\n  Spacer,\n  Dialog,\n  FormLayout,\n  FormRow,\n  InputNumber,\n  InputText,\n  InputSwitch,\n  Dropdown,\n  DefaultItemTemplate,\n} from '@ynput/ayon-react-components'\nimport { Badge } from '@shared/components'\nimport { FormFileUpload, FormFileDownload, type FormFileData} from './FormFile'\n\nimport type { FormSelectOption, SimpleFormField } from '@shared/api'\n\n\nexport type SimpleFormValue = string | number | boolean | string[] | number[] | FormFileData | null | undefined\nexport type SimpleFormValueDict = Record<string, SimpleFormValue>\n\nconst getDefaults = (fields: SimpleFormField[], values: SimpleFormValueDict) => {\n  const defaults: SimpleFormValueDict = {}\n  fields.forEach((field) => {\n    if (field.name in values) {\n      defaults[field.name] = values[field.name]\n    } else if (field.value) {\n      defaults[field.name] = field.value\n    } else if (field.type === 'boolean') {\n      defaults[field.name] = false\n    } else if (field.type === 'integer') {\n      defaults[field.name] = 0\n    } else if (field.type === 'float') {\n      defaults[field.name] = 0.0\n    } else if (field.type === 'text') {\n      defaults[field.name] = ''\n    } else if (field.type === 'multiselect') {\n      defaults[field.name] = []\n    } else if (field.type === 'file') {\n      defaults[field.name] = undefined\n    }\n  })\n  return defaults\n}\n\nconst LabelContainer = styled.div`\n  &.normal {\n    // maybe something here\n  }\n\n  &.info,\n  &.warning,\n  &.error {\n    padding: 0.5rem;\n    text-align: center;\n    font-weight: bold;\n    margin: 1rem 0;\n  }\n\n  &.info {\n    background-color: var(--md-sys-color-on-secondary-dark);\n  }\n  &.warning {\n    background-color: var(--md-sys-color-warning-container-dark);\n  }\n  &.error {\n    background-color: var(--md-sys-color-on-error-dark);\n  }\n`\n\ntype FormLabelProps = {\n  field: SimpleFormField\n}\n\nconst FormLabel = ({ field }: FormLabelProps) => {\n  const text = typeof field.value === 'string' ? field.value : 'Invalid label value'\n\n  return (\n    <LabelContainer className={field.highlight || 'normal'}>\n      <ReactMarkdown>{text}</ReactMarkdown>\n    </LabelContainer>\n  )\n}\n\ntype FormFieldProps = {\n  field: SimpleFormField\n  value: SimpleFormValue\n  onChange: (value: SimpleFormValue) => void\n}\n\nconst DropdownItemTemplate = (option: FormSelectOption) => {\n  const endContent = (\n    <>\n      <div style={{ flex: 1 }} />\n      {option.badges && option.badges.map((badge, index) => <Badge key={index} label={badge}/>)}\n    </>\n  )\n  return (\n    <DefaultItemTemplate\n      option={option}\n      dataKey={'value'}\n      labelKey={'label'}\n      value={[option.value]}\n      endContent={endContent}\n    />\n  )\n}\n\nconst FormField = ({ field, value, onChange }: FormFieldProps) => {\n  if (field.type === 'text') {\n    const parsedValue = typeof value === 'string' ? value : ''\n    return (\n      <InputText\n        value={parsedValue}\n        onChange={(e) => onChange(e.target.value)}\n        placeholder={field.placeholder || ''}\n      />\n    )\n  }\n  if (field.type === 'boolean') {\n    const parsedValue = typeof value === 'boolean' ? value : false\n\n    const handleCheckboxEvent = (\n      event: React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement>,\n    ) => {\n      if ('target' in event && 'checked' in event.target) {\n        onChange((event.target as HTMLInputElement).checked)\n      }\n    }\n\n    return <InputSwitch checked={parsedValue} onChange={handleCheckboxEvent} />\n  }\n  if (field.type === 'integer') {\n    const parsedValue = typeof value === 'number' ? value : 0\n    return (\n      <InputNumber\n        value={parsedValue}\n        onChange={(e) => onChange(parseInt(e.target.value))}\n        placeholder={field.placeholder || ''}\n      />\n    )\n  }\n  if (field.type === 'float') {\n    const parsedValue = typeof value === 'number' ? value : 0.0\n    return (\n      <InputNumber\n        type=\"number\"\n        value={parsedValue}\n        onChange={(e) => onChange(parseFloat(e.target.value))}\n        placeholder={field.placeholder || ''}\n      />\n    )\n  }\n\n  if (field.type === 'select') {\n    const parsedValue = typeof value === 'string' ? value : ''\n    return (\n      <Dropdown\n        widthExpand\n        options={field.options || []}\n        value={parsedValue ? [parsedValue] : []}\n        onSelectionChange={(e) => onChange(e[0])}\n        className={`form-field`}\n        multiSelect={false}\n        itemTemplate={DropdownItemTemplate}\n      />\n    )\n  } // Handle select\n\n  if (field.type === 'multiselect') {\n    const parsedValue = Array.isArray(value) ? value.map(value => `${value}`) : []\n    return (\n      <Dropdown\n        widthExpand\n        options={field.options || []}\n        value={parsedValue}\n        onSelectionChange={(e) => onChange(e)}\n        className={`form-field`}\n        multiSelect={true}\n        itemTemplate={DropdownItemTemplate}\n      />\n    )\n  }\n\n  if (field.type === 'file') {\n    if (value && (value as FormFileData)?.download) {\n      return <FormFileDownload value={value as FormFileData} />\n    }\n    return <FormFileUpload value={value as FormFileData} onChange={onChange} validExtensions={field.valid_extensions} />\n  }\n\n}\n\nexport interface SimpleFormDialogProps {\n  title: string\n  fields: SimpleFormField[]\n  values?: SimpleFormValueDict\n  submitLabel?: string\n  cancelLabel?: string\n  submitIcon?: string\n  cancelIcon?: string\n  onClose: () => void\n  onSubmit: (values: SimpleFormValueDict) => void\n  isOpen: boolean\n}\n\nexport const SimpleFormDialog = ({\n  fields,\n  values,\n  onClose,\n  onSubmit,\n  isOpen,\n  title,\n  submitLabel,\n  cancelLabel,\n  submitIcon,\n  cancelIcon,\n}: SimpleFormDialogProps) => {\n  const [formData, setFormData] = useState<SimpleFormValueDict | null>(null)\n\n  useEffect(() => {\n    if (isOpen) {\n      const defaults = getDefaults(fields, values || {})\n      setFormData(defaults)\n    }\n  }, [isOpen, fields, values])\n\n  if (!isOpen) return null\n  if (!formData) return null\n\n  const footer = (\n    <div style={{ display: 'flex', flexDirection: 'row', gap: 8 }}>\n      <Spacer />\n      {cancelLabel && <Button onClick={() => onClose()} label={cancelLabel} icon={cancelIcon} />}\n      {submitLabel && (\n        <Button\n          onClick={() => onSubmit(formData)}\n          label={submitLabel}\n          icon={submitIcon}\n          variant=\"filled\"\n        />\n      )}\n    </div>\n  )\n\n  return (\n    <Dialog\n      isOpen={isOpen}\n      onClose={onClose}\n      header={title}\n      footer={footer}\n      style={{ minHeight: 500, minWidth: 600 }}\n    >\n      <FormLayout\n        style={{ width: '95%' }}\n        onKeyDown={(e) => {\n          e.stopPropagation()\n        }}\n      >\n        {fields.map((field: SimpleFormField) => {\n          if (field.type === 'label') {\n            return <FormLabel key={field.name} field={field} />\n          }\n\n          return (\n            <FormRow key={field.name} label={field.label || ''}>\n              <FormField\n                field={field}\n                value={formData[field.name]}\n                onChange={(value) => {\n                  setFormData((prev) => ({\n                    ...prev,\n                    [field.name]: value,\n                  }))\n                }}\n              />\n            </FormRow>\n          )\n        })}\n      </FormLayout>\n    </Dialog>\n  )\n}\n"],"names":["getDefaults","fields","values","defaults","field","LabelContainer","styled","FormLabel","text","jsx","ReactMarkdown","DropdownItemTemplate","option","endContent","jsxs","Fragment","badge","index","Badge","DefaultItemTemplate","FormField","value","onChange","parsedValue","InputText","e","handleCheckboxEvent","event","InputSwitch","InputNumber","Dropdown","FormFileDownload","FormFileUpload","SimpleFormDialog","onClose","onSubmit","isOpen","title","submitLabel","cancelLabel","submitIcon","cancelIcon","formData","setFormData","useState","useEffect","footer","Spacer","Button","Dialog","FormLayout","FormRow","prev"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,MAAMA,IAAc,CAACC,GAA2BC,MAAgC;AAC9E,QAAMC,IAAgC,CAAA;AACtC,SAAAF,EAAO,QAAQ,CAACG,MAAU;AACxB,IAAIA,EAAM,QAAQF,IAChBC,EAASC,EAAM,IAAI,IAAIF,EAAOE,EAAM,IAAI,IAC/BA,EAAM,QACfD,EAASC,EAAM,IAAI,IAAIA,EAAM,QACpBA,EAAM,SAAS,YACxBD,EAASC,EAAM,IAAI,IAAI,KACdA,EAAM,SAAS,aAEfA,EAAM,SAAS,UADxBD,EAASC,EAAM,IAAI,IAAI,IAGdA,EAAM,SAAS,SACxBD,EAASC,EAAM,IAAI,IAAI,KACdA,EAAM,SAAS,gBACxBD,EAASC,EAAM,IAAI,IAAI,CAAA,IACdA,EAAM,SAAS,WACxBD,EAASC,EAAM,IAAI,IAAI;AAAA,EAE3B,CAAC,GACMD;AACT,GAEME,IAAiBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA6BxBC,IAAY,CAAC,EAAE,OAAAH,QAA4B;AAC/C,QAAMI,IAAO,OAAOJ,EAAM,SAAU,WAAWA,EAAM,QAAQ;AAE7D,SACEK,gBAAAA,EAAAA,IAACJ,KAAe,WAAWD,EAAM,aAAa,UAC5C,UAAAK,gBAAAA,EAAAA,IAACC,GAAA,EAAe,UAAAF,EAAA,CAAK,EAAA,CACvB;AAEJ,GAQMG,IAAuB,CAACC,MAA6B;AACzD,QAAMC,IACJC,gBAAAA,EAAAA,KAAAC,EAAAA,UAAA,EACE,UAAA;AAAA,IAAAN,gBAAAA,EAAAA,IAAC,OAAA,EAAI,OAAO,EAAE,MAAM,KAAK;AAAA,IACxBG,EAAO,UAAUA,EAAO,OAAO,IAAI,CAACI,GAAOC,MAAUR,gBAAAA,EAAAA,IAACS,GAAA,EAAkB,OAAOF,EAAA,GAAdC,CAAoB,CAAE;AAAA,EAAA,GAC1F;AAEF,SACER,gBAAAA,EAAAA;AAAAA,IAACU;AAAA,IAAA;AAAA,MACC,QAAAP;AAAA,MACA,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO,CAACA,EAAO,KAAK;AAAA,MACpB,YAAAC;AAAA,IAAA;AAAA,EAAA;AAGN,GAEMO,IAAY,CAAC,EAAE,OAAAhB,GAAO,OAAAiB,GAAO,UAAAC,QAA+B;AAChE,MAAIlB,EAAM,SAAS,QAAQ;AACzB,UAAMmB,IAAc,OAAOF,KAAU,WAAWA,IAAQ;AACxD,WACEZ,gBAAAA,EAAAA;AAAAA,MAACe;AAAA,MAAA;AAAA,QACC,OAAOD;AAAA,QACP,UAAU,CAACE,MAAMH,EAASG,EAAE,OAAO,KAAK;AAAA,QACxC,aAAarB,EAAM,eAAe;AAAA,MAAA;AAAA,IAAA;AAAA,EAGxC;AACA,MAAIA,EAAM,SAAS,WAAW;AAC5B,UAAMmB,IAAc,OAAOF,KAAU,YAAYA,IAAQ,IAEnDK,IAAsB,CAC1BC,MACG;AACH,MAAI,YAAYA,KAAS,aAAaA,EAAM,UAC1CL,EAAUK,EAAM,OAA4B,OAAO;AAAA,IAEvD;AAEA,WAAOlB,gBAAAA,EAAAA,IAACmB,GAAA,EAAY,SAASL,GAAa,UAAUG,GAAqB;AAAA,EAC3E;AACA,MAAItB,EAAM,SAAS,WAAW;AAC5B,UAAMmB,IAAc,OAAOF,KAAU,WAAWA,IAAQ;AACxD,WACEZ,gBAAAA,EAAAA;AAAAA,MAACoB;AAAA,MAAA;AAAA,QACC,OAAON;AAAA,QACP,UAAU,CAACE,MAAMH,EAAS,SAASG,EAAE,OAAO,KAAK,CAAC;AAAA,QAClD,aAAarB,EAAM,eAAe;AAAA,MAAA;AAAA,IAAA;AAAA,EAGxC;AACA,MAAIA,EAAM,SAAS,SAAS;AAC1B,UAAMmB,IAAc,OAAOF,KAAU,WAAWA,IAAQ;AACxD,WACEZ,gBAAAA,EAAAA;AAAAA,MAACoB;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAON;AAAA,QACP,UAAU,CAACE,MAAMH,EAAS,WAAWG,EAAE,OAAO,KAAK,CAAC;AAAA,QACpD,aAAarB,EAAM,eAAe;AAAA,MAAA;AAAA,IAAA;AAAA,EAGxC;AAEA,MAAIA,EAAM,SAAS,UAAU;AAC3B,UAAMmB,IAAc,OAAOF,KAAU,WAAWA,IAAQ;AACxD,WACEZ,gBAAAA,EAAAA;AAAAA,MAACqB;AAAA,MAAA;AAAA,QACC,aAAW;AAAA,QACX,SAAS1B,EAAM,WAAW,CAAA;AAAA,QAC1B,OAAOmB,IAAc,CAACA,CAAW,IAAI,CAAA;AAAA,QACrC,mBAAmB,CAACE,MAAMH,EAASG,EAAE,CAAC,CAAC;AAAA,QACvC,WAAW;AAAA,QACX,aAAa;AAAA,QACb,cAAcd;AAAA,MAAA;AAAA,IAAA;AAAA,EAGpB;AAEA,MAAIP,EAAM,SAAS,eAAe;AAChC,UAAMmB,IAAc,MAAM,QAAQF,CAAK,IAAIA,EAAM,IAAI,CAAAA,MAAS,GAAGA,CAAK,EAAE,IAAI,CAAA;AAC5E,WACEZ,gBAAAA,EAAAA;AAAAA,MAACqB;AAAA,MAAA;AAAA,QACC,aAAW;AAAA,QACX,SAAS1B,EAAM,WAAW,CAAA;AAAA,QAC1B,OAAOmB;AAAA,QACP,mBAAmB,CAACE,MAAMH,EAASG,CAAC;AAAA,QACpC,WAAW;AAAA,QACX,aAAa;AAAA,QACb,cAAcd;AAAA,MAAA;AAAA,IAAA;AAAA,EAGpB;AAEA,MAAIP,EAAM,SAAS;AACjB,WAAIiB,KAAUA,GAAwB,WAC7BZ,gBAAAA,MAACsB,KAAiB,OAAAV,GAA8B,0BAEjDW,GAAA,EAAe,OAAAX,GAA8B,UAAAC,GAAoB,iBAAiBlB,EAAM,kBAAkB;AAGtH,GAea6B,KAAmB,CAAC;AAAA,EAC/B,QAAAhC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAgC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AACF,MAA6B;AAC3B,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAqC,IAAI;AAUzE,MARAC,EAAU,MAAM;AACd,QAAIT,GAAQ;AACV,YAAMjC,IAAWH,EAAYC,GAAQC,KAAU,CAAA,CAAE;AACjD,MAAAyC,EAAYxC,CAAQ;AAAA,IACtB;AAAA,EACF,GAAG,CAACiC,GAAQnC,GAAQC,CAAM,CAAC,GAEvB,CAACkC,KACD,CAACM,EAAU,QAAO;AAEtB,QAAMI,IACJhC,gBAAAA,EAAAA,KAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,OAAO,KAAK,EAAA,GACxD,UAAA;AAAA,IAAAL,gBAAAA,EAAAA,IAACsC,GAAA,EAAO;AAAA,IACPR,KAAe9B,gBAAAA,EAAAA,IAACuC,GAAA,EAAO,SAAS,MAAMd,KAAW,OAAOK,GAAa,MAAME,EAAA,CAAY;AAAA,IACvFH,KACC7B,gBAAAA,EAAAA;AAAAA,MAACuC;AAAA,MAAA;AAAA,QACC,SAAS,MAAMb,EAASO,CAAQ;AAAA,QAChC,OAAOJ;AAAA,QACP,MAAME;AAAA,QACN,SAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,EACV,GAEJ;AAGF,SACE/B,gBAAAA,EAAAA;AAAAA,IAACwC;AAAA,IAAA;AAAA,MACC,QAAAb;AAAA,MACA,SAAAF;AAAA,MACA,QAAQG;AAAA,MACR,QAAAS;AAAA,MACA,OAAO,EAAE,WAAW,KAAK,UAAU,IAAA;AAAA,MAEnC,UAAArC,gBAAAA,EAAAA;AAAAA,QAACyC;AAAA,QAAA;AAAA,UACC,OAAO,EAAE,OAAO,MAAA;AAAA,UAChB,WAAW,CAAC,MAAM;AAChB,cAAE,gBAAA;AAAA,UACJ;AAAA,UAEC,UAAAjD,EAAO,IAAI,CAACG,MACPA,EAAM,SAAS,UACVK,gBAAAA,EAAAA,IAACF,GAAA,EAA2B,OAAAH,EAAA,GAAZA,EAAM,IAAoB,IAIjDK,gBAAAA,EAAAA,IAAC0C,GAAA,EAAyB,OAAO/C,EAAM,SAAS,IAC9C,UAAAK,gBAAAA,EAAAA;AAAAA,YAACW;AAAA,YAAA;AAAA,cACC,OAAAhB;AAAA,cACA,OAAOsC,EAAStC,EAAM,IAAI;AAAA,cAC1B,UAAU,CAACiB,MAAU;AACnB,gBAAAsB,EAAY,CAACS,OAAU;AAAA,kBACrB,GAAGA;AAAA,kBACH,CAAChD,EAAM,IAAI,GAAGiB;AAAA,gBAAA,EACd;AAAA,cACJ;AAAA,YAAA;AAAA,UAAA,EACF,GAVYjB,EAAM,IAWpB,CAEH;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"SimpleFormDialog.es.js","sources":["../../../../../src/components/SimpleFormDialog/SimpleFormDialog.tsx"],"sourcesContent":["import styled from 'styled-components'\nimport React, { useState, useEffect } from 'react'\nimport ReactMarkdown from 'react-markdown'\nimport {\n  Button,\n  Spacer,\n  Dialog,\n  FormLayout,\n  FormRow,\n  InputNumber,\n  InputText,\n  InputTextarea,\n  InputSwitch,\n  Dropdown,\n  DefaultItemTemplate,\n} from '@ynput/ayon-react-components'\nimport { Badge } from '@shared/components'\nimport { FormFileUpload, FormFileDownload, type FormFileData} from './FormFile'\n\nimport type { FormSelectOption, SimpleFormField } from '@shared/api'\n\n\nexport type SimpleFormValue = string | number | boolean | string[] | number[] | FormFileData | null | undefined\nexport type SimpleFormValueDict = Record<string, SimpleFormValue>\n\nconst getDefaults = (fields: SimpleFormField[], values: SimpleFormValueDict) => {\n  const defaults: SimpleFormValueDict = {}\n  fields.forEach((field) => {\n    if (field.name in values) {\n      defaults[field.name] = values[field.name]\n    } else if (field.value) {\n      defaults[field.name] = field.value\n    } else if (field.type === 'boolean') {\n      defaults[field.name] = false\n    } else if (field.type === 'integer') {\n      defaults[field.name] = 0\n    } else if (field.type === 'float') {\n      defaults[field.name] = 0.0\n    } else if (field.type === 'text') {\n      defaults[field.name] = ''\n    } else if (field.type === 'multiselect') {\n      defaults[field.name] = []\n    } else if (field.type === 'file') {\n      defaults[field.name] = undefined\n    }\n  })\n  return defaults\n}\n\nconst LabelContainer = styled.div`\n  &.normal {\n    // maybe something here\n  }\n\n  &.info,\n  &.warning,\n  &.error {\n    padding: 0.5rem;\n    text-align: center;\n    font-weight: bold;\n    margin: 1rem 0;\n  }\n\n  &.info {\n    background-color: var(--md-sys-color-on-secondary-dark);\n  }\n  &.warning {\n    background-color: var(--md-sys-color-warning-container-dark);\n  }\n  &.error {\n    background-color: var(--md-sys-color-on-error-dark);\n  }\n`\n\ntype FormLabelProps = {\n  field: SimpleFormField\n}\n\nconst FormLabel = ({ field }: FormLabelProps) => {\n  const text = typeof field.value === 'string' ? field.value : 'Invalid label value'\n\n  return (\n    <LabelContainer className={field.highlight || 'normal'}>\n      <ReactMarkdown>{text}</ReactMarkdown>\n    </LabelContainer>\n  )\n}\n\ntype FormFieldProps = {\n  field: SimpleFormField\n  value: SimpleFormValue\n  onChange: (value: SimpleFormValue) => void\n}\n\nconst DropdownItemTemplate = (option: FormSelectOption) => {\n  const endContent = (\n    <>\n      <div style={{ flex: 1 }} />\n      {option.badges && option.badges.map((badge, index) => <Badge key={index} label={badge}/>)}\n    </>\n  )\n  return (\n    <DefaultItemTemplate\n      option={option}\n      dataKey={'value'}\n      labelKey={'label'}\n      value={[option.value]}\n      endContent={endContent}\n    />\n  )\n}\n\nconst FormField = ({ field, value, onChange }: FormFieldProps) => {\n  if (field.type === 'text') {\n    const parsedValue = typeof value === 'string' ? value : ''\n    if (field.multiline) {\n      return (\n        <InputTextarea\n          value={parsedValue}\n          onChange={(e) => onChange(e.target.value)}\n          placeholder={field.placeholder || ''}\n        />\n      )\n    }\n    return (\n      <InputText\n        value={parsedValue}\n        onChange={(e) => onChange(e.target.value)}\n        placeholder={field.placeholder || ''}\n      />\n    )\n  }\n  if (field.type === 'boolean') {\n    const parsedValue = typeof value === 'boolean' ? value : false\n\n    const handleCheckboxEvent = (\n      event: React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement>,\n    ) => {\n      if ('target' in event && 'checked' in event.target) {\n        onChange((event.target as HTMLInputElement).checked)\n      }\n    }\n\n    return <InputSwitch checked={parsedValue} onChange={handleCheckboxEvent} />\n  }\n  if (field.type === 'integer') {\n    const parsedValue = typeof value === 'number' ? value : 0\n    return (\n      <InputNumber\n        value={parsedValue}\n        onChange={(e) => onChange(parseInt(e.target.value))}\n        placeholder={field.placeholder || ''}\n      />\n    )\n  }\n  if (field.type === 'float') {\n    const parsedValue = typeof value === 'number' ? value : 0.0\n    return (\n      <InputNumber\n        type=\"number\"\n        value={parsedValue}\n        onChange={(e) => onChange(parseFloat(e.target.value))}\n        placeholder={field.placeholder || ''}\n      />\n    )\n  }\n\n  if (field.type === 'select') {\n    const parsedValue = typeof value === 'string' ? value : ''\n    return (\n      <Dropdown\n        widthExpand\n        options={field.options || []}\n        value={parsedValue ? [parsedValue] : []}\n        onSelectionChange={(e) => onChange(e[0])}\n        className={`form-field`}\n        multiSelect={false}\n        itemTemplate={DropdownItemTemplate}\n      />\n    )\n  } // Handle select\n\n  if (field.type === 'multiselect') {\n    const parsedValue = Array.isArray(value) ? value.map(value => `${value}`) : []\n    return (\n      <Dropdown\n        widthExpand\n        options={field.options || []}\n        value={parsedValue}\n        onSelectionChange={(e) => onChange(e)}\n        className={`form-field`}\n        multiSelect={true}\n        itemTemplate={DropdownItemTemplate}\n      />\n    )\n  }\n\n  if (field.type === 'file') {\n    if (value && (value as FormFileData)?.download) {\n      return <FormFileDownload value={value as FormFileData} />\n    }\n    return <FormFileUpload value={value as FormFileData} onChange={onChange} validExtensions={field.valid_extensions} />\n  }\n\n}\n\nexport interface SimpleFormDialogProps {\n  title: string\n  fields: SimpleFormField[]\n  values?: SimpleFormValueDict\n  submitLabel?: string\n  cancelLabel?: string\n  submitIcon?: string\n  cancelIcon?: string\n  onClose: () => void\n  onSubmit: (values: SimpleFormValueDict) => void\n  isOpen: boolean\n}\n\nexport const SimpleFormDialog = ({\n  fields,\n  values,\n  onClose,\n  onSubmit,\n  isOpen,\n  title,\n  submitLabel,\n  cancelLabel,\n  submitIcon,\n  cancelIcon,\n}: SimpleFormDialogProps) => {\n  const [formData, setFormData] = useState<SimpleFormValueDict | null>(null)\n\n  useEffect(() => {\n    if (isOpen) {\n      const defaults = getDefaults(fields, values || {})\n      setFormData(defaults)\n    }\n  }, [isOpen, fields, values])\n\n  if (!isOpen) return null\n  if (!formData) return null\n\n  const footer = (\n    <div style={{ display: 'flex', flexDirection: 'row', gap: 8 }}>\n      <Spacer />\n      {cancelLabel && <Button onClick={() => onClose()} label={cancelLabel} icon={cancelIcon} />}\n      {submitLabel && (\n        <Button\n          onClick={() => onSubmit(formData)}\n          label={submitLabel}\n          icon={submitIcon}\n          variant=\"filled\"\n        />\n      )}\n    </div>\n  )\n\n  return (\n    <Dialog\n      isOpen={isOpen}\n      onClose={onClose}\n      header={title}\n      footer={footer}\n      style={{ minHeight: 500, minWidth: 600 }}\n    >\n      <FormLayout\n        style={{ width: '95%' }}\n        onKeyDown={(e) => {\n          e.stopPropagation()\n        }}\n      >\n        {fields.map((field: SimpleFormField) => {\n          if (field.type === 'label') {\n            return <FormLabel key={field.name} field={field} />\n          }\n\n          return (\n            <FormRow key={field.name} label={field.label || ''}>\n              <FormField\n                field={field}\n                value={formData[field.name]}\n                onChange={(value) => {\n                  setFormData((prev) => ({\n                    ...prev,\n                    [field.name]: value,\n                  }))\n                }}\n              />\n            </FormRow>\n          )\n        })}\n      </FormLayout>\n    </Dialog>\n  )\n}\n"],"names":["getDefaults","fields","values","defaults","field","LabelContainer","styled","FormLabel","text","jsx","ReactMarkdown","DropdownItemTemplate","option","endContent","jsxs","Fragment","badge","index","Badge","DefaultItemTemplate","FormField","value","onChange","parsedValue","InputTextarea","e","InputText","handleCheckboxEvent","event","InputSwitch","InputNumber","Dropdown","FormFileDownload","FormFileUpload","SimpleFormDialog","onClose","onSubmit","isOpen","title","submitLabel","cancelLabel","submitIcon","cancelIcon","formData","setFormData","useState","useEffect","footer","Spacer","Button","Dialog","FormLayout","FormRow","prev"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../../../_virtual/jsx-runtime.cjs.js"),u=require("react"),n=require("styled-components"),p=require("./Thumbnail.cjs.js"),x=require("clsx");require("../../context/RemoteModulesContext.cjs.js");require("../../context/DetailsPanelContext.cjs.js");require("../../context/SubtasksModulesContext.cjs.js");const q=require("../../context/ThumbnailUploaderContext.cjs.js");require("../../context/SettingsPanelContext.cjs.js");require("../../context/pip/PiPProvider.cjs.js");require("react-dom");require("../../context/pip/PiPWrapper.cjs.js");require("../../context/AddonProjectContext.cjs.js");require("../../context/AddonContext.cjs.js");require("../../context/PowerpackContext.cjs.js");require("../../context/MoveEntityContext.cjs.js");require("../../context/MenuContext.cjs.js");require("../../context/WebsocketContext.cjs.js");require("../../context/GlobalContext.cjs.js");require("../../context/ProjectContext.cjs.js");require("../../context/ProjectFoldersContext.cjs.js");require("../../context/UriContext.cjs.js");const g=n.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../../../../_virtual/jsx-runtime.cjs.js"),l=require("react"),q=require("styled-components"),d=require("./Thumbnail.cjs.js"),p=require("clsx");require("../../context/RemoteModulesContext.cjs.js");require("../../../../_virtual/runtime.cjs.js");require("../../../../_virtual/semver.cjs.js");require("../../api/base/client.cjs.js");require("../../api/generated/graphql.cjs.js");require("../../api/generated/graphqlLinks.cjs.js");require("../../api/generated/access.cjs.js");require("../../api/generated/actions.cjs.js");require("../../api/generated/activityFeed.cjs.js");require("../../api/generated/addons.cjs.js");require("../../api/generated/anatomy.cjs.js");require("../../api/generated/attributes.cjs.js");require("../../api/generated/authentication.cjs.js");require("../../api/generated/bundles.cjs.js");require("../../api/generated/configuration.cjs.js");require("../../api/generated/dataImport.cjs.js");require("../../api/generated/desktop.cjs.js");require("../../api/generated/entityLists.cjs.js");require("../../api/generated/events.cjs.js");require("../../api/generated/files.cjs.js");require("../../api/generated/folders.cjs.js");require("../../api/generated/inbox.cjs.js");require("../../api/generated/links.cjs.js");require("../../api/generated/market.cjs.js");require("../../api/generated/onboarding.cjs.js");require("../../api/generated/operations.cjs.js");require("../../api/generated/products.cjs.js");require("../../api/generated/projectDashboard.cjs.js");require("../../api/generated/projects.cjs.js");require("../../api/generated/projectFolders.cjs.js");require("../../api/generated/reviewables.cjs.js");require("../../api/generated/services.cjs.js");require("../../api/generated/system.cjs.js");require("../../api/generated/tasks.cjs.js");require("../../api/generated/teams.cjs.js");require("../../api/generated/thumbnails.cjs.js");require("../../api/generated/uRIs.cjs.js");require("../../api/generated/users.cjs.js");require("../../api/generated/versions.cjs.js");require("../../api/generated/workfiles.cjs.js");require("../../api/generated/ynputCloud.cjs.js");require("../../api/generated/grouping.cjs.js");require("../../api/generated/views.cjs.js");require("../../api/queries/actions/getActions.cjs.js");require("../../api/queries/activities/getActivities.cjs.js");require("../../api/queries/activities/updateActivities.cjs.js");require("../../api/queries/activities/updateReaction.cjs.js");require("../../api/queries/activities/getMentions.cjs.js");require("../../api/queries/activities/getCategories.cjs.js");require("../../api/queries/addons/getAddons.cjs.js");require("../../api/queries/addons/updateAddons.cjs.js");require("../../api/queries/attributes/getAttributes.cjs.js");require("../../api/queries/attributes/updateAttributes.cjs.js");require("../../api/queries/authentication/getAuthentication.cjs.js");require("../../api/queries/cloud/cloud.cjs.js");require("../../api/queries/config/getConfig.cjs.js");require("../../api/queries/config/updateConfig.cjs.js");require("../../api/queries/entities/getEntity.cjs.js");require("../../api/queries/entities/getEntityPanel.cjs.js");require("../../api/queries/entities/updateEntity.cjs.js");require("../../api/queries/entityLists/getLists.cjs.js");require("../../api/queries/entityLists/updateLists.cjs.js");require("../../api/queries/entityLists/getListsAttributes.cjs.js");require("../../api/queries/entityLists/updateListsAttributes.cjs.js");require("../../api/queries/entityLists/listFolders.cjs.js");require("../../api/queries/folders/getFolders.cjs.js");require("../../api/queries/folders/getFolderDeleteInfo.cjs.js");require("../../api/queries/grouping/getGrouping.cjs.js");require("../../api/queries/links/updateLinks.cjs.js");require("../../api/queries/links/getLinks.cjs.js");require("../../api/queries/links/getEntityLinks.cjs.js");require("../../api/queries/overview/getOverview.cjs.js");require("../../api/queries/overview/updateOverview.cjs.js");require("../../api/queries/versions/getVersionsProducts.cjs.js");require("../../api/queries/permissions/getPermissions.cjs.js");require("../../api/queries/products/createProduct.cjs.js");require("../../api/queries/products/getFolderProducts.cjs.js");require("../../api/queries/project/getProject.cjs.js");require("../../api/queries/project/updateProject.cjs.js");require("../../api/queries/projectFolders/projectFolders.cjs.js");require("../../api/queries/review/getReview.cjs.js");require("../../api/queries/review/updateReview.cjs.js");require("../../api/queries/share/share.cjs.js");require("../../api/queries/system/getSystem.cjs.js");require("../../api/queries/tasks/getTasks.cjs.js");require("../../api/queries/tasks/updateTasks.cjs.js");require("../../api/queries/teams/getTeams.cjs.js");require("../../api/queries/userDashboard/getUserDashboard.cjs.js");require("../../api/queries/users/getUsers.cjs.js");require("../../api/queries/users/updateUsers.cjs.js");require("../../api/queries/users/guests.cjs.js");require("../../api/queries/versions/updateVersions.cjs.js");require("../../api/queries/views/getViews.cjs.js");require("../../api/queries/views/updateViews.cjs.js");require("../../api/queries/watchers/getWatchers.cjs.js");require("../../api/queries/uris/getUris.cjs.js");require("lodash");require("react-toastify");require("react-redux");require("custom-protocol-check");require("../../containers/ProjectTreeTable/components/GroupSettingsFallback.cjs.js");require("uuid");require("../../util/pubsub.cjs.js");require("../../context/PowerpackContextInstance.cjs.js");require("../../context/UriContext.cjs.js");require("../../context/DetailsPanelContextInstance.cjs.js");require("../../context/SubtasksModulesContextInstance.cjs.js");const x=require("../../context/ThumbnailUploaderContext.cjs.js");require("../../context/SettingsPanelContext.cjs.js");require("../../context/pip/PiPProvider.cjs.js");require("react-dom");require("../../context/pip/PiPWrapper.cjs.js");require("../../context/AddonProjectContext.cjs.js");require("../../context/AddonContext.cjs.js");require("../../context/MoveEntityContext.cjs.js");require("../../context/MenuContext.cjs.js");require("../../context/WebsocketContext.cjs.js");require("../../context/GlobalContext.cjs.js");require("../../context/ProjectContext.cjs.js");require("../../context/ProjectFoldersContext.cjs.js");const g=q.div`
   display: flex;
   z-index: 10;
   height: 100%;
@@ -19,7 +19,7 @@
         font-size: 24px;
       }
 
-      ${({$length:e})=>e>1&&n.css`
+      ${({$length:e})=>e>1&&q.css`
           :not(:last-child) {
             box-shadow: 0 0 4px 0px black;
           }
@@ -35,5 +35,5 @@
       object-fit: cover;
     }
   }
-`,y=({thumbnails:e=[],isLoading:o,className:s,style:c,...a})=>{const{onContextMenu:l}=u.useContext(q.ThumbnailUploadContext);e=e.slice(0,5);const d=e.length>1;return e.length?t.jsxRuntimeExports.jsx(g,{$length:e.length,className:x("stacked-thumbnails",s,{stacking:d}),children:e.map((r,i)=>r?t.jsxRuntimeExports.jsx(p.Thumbnail,{projectName:r.projectName,entityType:r.type,entityId:r.id,icon:r.icon,color:r.color,style:{...c,zIndex:-i},entityUpdatedAt:r.updatedAt,isLoading:o,src:r.src,onContextMenu:l,...a},r.id||r.src||i):null)}):null};exports.StackedThumbnails=y;
+`,y=({thumbnails:e=[],isLoading:t,className:n,style:o,...s})=>{const{onContextMenu:c}=l.useContext(x.ThumbnailUploadContext);e=e.slice(0,5);const a=e.length>1;return e.length?u.jsxRuntimeExports.jsx(g,{$length:e.length,className:p("stacked-thumbnails",n,{stacking:a}),children:e.map((r,i)=>r?u.jsxRuntimeExports.jsx(d.Thumbnail,{projectName:r.projectName,entityType:r.type,entityId:r.id,icon:r.icon,color:r.color,style:{...o,zIndex:-i},entityUpdatedAt:r.updatedAt,isLoading:t,src:r.src,onContextMenu:c,...s},r.id||r.src||i):null)}):null};exports.StackedThumbnails=y;
 //# sourceMappingURL=StackedThumbnails.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StackedThumbnails.cjs.js","sources":["../../../../../src/components/Thumbnail/StackedThumbnails.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport styled, { css } from 'styled-components'\nimport { Thumbnail } from './Thumbnail'\nimport clsx from 'clsx'\nimport { ThumbnailUploadContext } from '@shared/context'\nimport { ThumbnailProps } from '@shared/components'\n\ntype StackedStyledProps = {\n  $length: number\n}\n\nconst StackedStyled = styled.div<StackedStyledProps>`\n  display: flex;\n  z-index: 10;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n  border-radius: 8px;\n  min-width: min-content;\n  cursor: pointer;\n\n  &.stacking {\n    & > * {\n      margin: unset;\n      aspect-ratio: 1;\n      border: solid 2px var(--md-sys-color-outline-variant);\n      border-radius: 8px;\n\n      span {\n        font-size: 24px;\n      }\n\n      ${({ $length }) =>\n        $length > 1 &&\n        css`\n          :not(:last-child) {\n            box-shadow: 0 0 4px 0px black;\n          }\n        `}\n    }\n\n    /* create stacked effect */\n    & > * + * {\n      margin-left: ${({ $length }) => `${Math.max(-20, -$length * 1.5 - 8)}px`};\n    }\n\n    .thumbnail img {\n      object-fit: cover;\n    }\n  }\n`\n\ntype Thumbnail = {\n  id?: string\n  type?: string\n  projectName?: string\n  icon?: string\n  color?: string\n  updatedAt?: string\n  src?: string\n}\n\nexport interface StackedThumbnailsProps\n  extends Omit<ThumbnailProps, 'entityType' | 'entityId' | 'projectName'> {\n  thumbnails?: Thumbnail[]\n  isLoading?: boolean\n  className?: string\n  style?: React.CSSProperties\n}\n\nexport const StackedThumbnails = ({\n  thumbnails = [],\n  isLoading,\n  className,\n  style,\n  ...props\n}: StackedThumbnailsProps) => {\n  const { onContextMenu } = useContext(ThumbnailUploadContext)\n  // limit to 5 users\n  thumbnails = thumbnails.slice(0, 5)\n  const isStacking = thumbnails.length > 1\n\n  if (!thumbnails.length) return null\n\n  return (\n    <StackedStyled\n      $length={thumbnails.length}\n      className={clsx('stacked-thumbnails', className, { stacking: isStacking })}\n    >\n      {thumbnails.map((thumb, i) =>\n        thumb ? (\n          <Thumbnail\n            projectName={thumb.projectName}\n            entityType={thumb.type}\n            entityId={thumb.id}\n            icon={thumb.icon}\n            color={thumb.color}\n            key={thumb.id || thumb.src || i}\n            style={{ ...style, zIndex: -i }}\n            entityUpdatedAt={thumb.updatedAt}\n            isLoading={isLoading}\n            src={thumb.src}\n            // @ts-ignore\n            onContextMenu={onContextMenu}\n            {...props}\n          />\n        ) : null,\n      )}\n    </StackedStyled>\n  )\n}\n"],"names":["StackedStyled","styled","$length","css","StackedThumbnails","thumbnails","isLoading","className","style","props","onContextMenu","useContext","ThumbnailUploadContext","isStacking","jsx","clsx","thumb","Thumbnail"],"mappings":"wlCAWA,MAAMA,EAAgBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAqBrB,CAAC,CAAE,QAAAC,CAAA,IACHA,EAAU,GACVC,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA,SAIC;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKY,CAAC,CAAE,QAAAD,CAAA,IAAc,GAAG,KAAK,IAAI,IAAK,CAACA,EAAU,IAAM,CAAC,CAAC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA2BjEE,EAAoB,CAAC,CAChC,WAAAC,EAAa,CAAA,EACb,UAAAC,EACA,UAAAC,EACA,MAAAC,EACA,GAAGC,CACL,IAA8B,CAC5B,KAAM,CAAE,cAAAC,CAAA,EAAkBC,EAAAA,WAAWC,wBAAsB,EAE3DP,EAAaA,EAAW,MAAM,EAAG,CAAC,EAClC,MAAMQ,EAAaR,EAAW,OAAS,EAEvC,OAAKA,EAAW,OAGdS,EAAAA,kBAAAA,IAACd,EAAA,CACC,QAASK,EAAW,OACpB,UAAWU,EAAK,qBAAsBR,EAAW,CAAE,SAAUM,EAAY,EAExE,SAAAR,EAAW,IAAI,CAACW,EAAO,IACtBA,EACEF,EAAAA,kBAAAA,IAACG,EAAAA,UAAA,CACC,YAAaD,EAAM,YACnB,WAAYA,EAAM,KAClB,SAAUA,EAAM,GAChB,KAAMA,EAAM,KACZ,MAAOA,EAAM,MAEb,MAAO,CAAE,GAAGR,EAAO,OAAQ,CAAC,CAAA,EAC5B,gBAAiBQ,EAAM,UACvB,UAAAV,EACA,IAAKU,EAAM,IAEX,cAAAN,EACC,GAAGD,CAAA,EAPCO,EAAM,IAAMA,EAAM,KAAO,CAAA,EAS9B,IAAA,CACN,CAAA,EAzB2B,IA4BjC"}
+{"version":3,"file":"StackedThumbnails.cjs.js","sources":["../../../../../src/components/Thumbnail/StackedThumbnails.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport styled, { css } from 'styled-components'\nimport { Thumbnail } from './Thumbnail'\nimport clsx from 'clsx'\nimport { ThumbnailUploadContext } from '@shared/context'\nimport { ThumbnailProps } from '@shared/components'\n\ntype StackedStyledProps = {\n  $length: number\n}\n\nconst StackedStyled = styled.div<StackedStyledProps>`\n  display: flex;\n  z-index: 10;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n  border-radius: 8px;\n  min-width: min-content;\n  cursor: pointer;\n\n  &.stacking {\n    & > * {\n      margin: unset;\n      aspect-ratio: 1;\n      border: solid 2px var(--md-sys-color-outline-variant);\n      border-radius: 8px;\n\n      span {\n        font-size: 24px;\n      }\n\n      ${({ $length }) =>\n        $length > 1 &&\n        css`\n          :not(:last-child) {\n            box-shadow: 0 0 4px 0px black;\n          }\n        `}\n    }\n\n    /* create stacked effect */\n    & > * + * {\n      margin-left: ${({ $length }) => `${Math.max(-20, -$length * 1.5 - 8)}px`};\n    }\n\n    .thumbnail img {\n      object-fit: cover;\n    }\n  }\n`\n\ntype Thumbnail = {\n  id?: string\n  type?: string\n  projectName?: string\n  icon?: string\n  color?: string\n  updatedAt?: string\n  src?: string\n}\n\nexport interface StackedThumbnailsProps\n  extends Omit<ThumbnailProps, 'entityType' | 'entityId' | 'projectName'> {\n  thumbnails?: Thumbnail[]\n  isLoading?: boolean\n  className?: string\n  style?: React.CSSProperties\n}\n\nexport const StackedThumbnails = ({\n  thumbnails = [],\n  isLoading,\n  className,\n  style,\n  ...props\n}: StackedThumbnailsProps) => {\n  const { onContextMenu } = useContext(ThumbnailUploadContext)\n  // limit to 5 users\n  thumbnails = thumbnails.slice(0, 5)\n  const isStacking = thumbnails.length > 1\n\n  if (!thumbnails.length) return null\n\n  return (\n    <StackedStyled\n      $length={thumbnails.length}\n      className={clsx('stacked-thumbnails', className, { stacking: isStacking })}\n    >\n      {thumbnails.map((thumb, i) =>\n        thumb ? (\n          <Thumbnail\n            projectName={thumb.projectName}\n            entityType={thumb.type}\n            entityId={thumb.id}\n            icon={thumb.icon}\n            color={thumb.color}\n            key={thumb.id || thumb.src || i}\n            style={{ ...style, zIndex: -i }}\n            entityUpdatedAt={thumb.updatedAt}\n            isLoading={isLoading}\n            src={thumb.src}\n            // @ts-ignore — Thumbnail forwards onContextMenu to its root element\n            onContextMenu={onContextMenu}\n            {...props}\n          />\n        ) : null,\n      )}\n    </StackedStyled>\n  )\n}\n"],"names":["StackedStyled","styled","$length","css","StackedThumbnails","thumbnails","isLoading","className","style","props","onContextMenu","useContext","ThumbnailUploadContext","isStacking","jsx","clsx","thumb","Thumbnail"],"mappings":"iwMAWA,MAAMA,EAAgBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAqBrB,CAAC,CAAE,QAAAC,CAAA,IACHA,EAAU,GACVC,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA,SAIC;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKY,CAAC,CAAE,QAAAD,CAAA,IAAc,GAAG,KAAK,IAAI,IAAK,CAACA,EAAU,IAAM,CAAC,CAAC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA2BjEE,EAAoB,CAAC,CAChC,WAAAC,EAAa,CAAA,EACb,UAAAC,EACA,UAAAC,EACA,MAAAC,EACA,GAAGC,CACL,IAA8B,CAC5B,KAAM,CAAE,cAAAC,CAAA,EAAkBC,EAAAA,WAAWC,wBAAsB,EAE3DP,EAAaA,EAAW,MAAM,EAAG,CAAC,EAClC,MAAMQ,EAAaR,EAAW,OAAS,EAEvC,OAAKA,EAAW,OAGdS,EAAAA,kBAAAA,IAACd,EAAA,CACC,QAASK,EAAW,OACpB,UAAWU,EAAK,qBAAsBR,EAAW,CAAE,SAAUM,EAAY,EAExE,SAAAR,EAAW,IAAI,CAACW,EAAO,IACtBA,EACEF,EAAAA,kBAAAA,IAACG,EAAAA,UAAA,CACC,YAAaD,EAAM,YACnB,WAAYA,EAAM,KAClB,SAAUA,EAAM,GAChB,KAAMA,EAAM,KACZ,MAAOA,EAAM,MAEb,MAAO,CAAE,GAAGR,EAAO,OAAQ,CAAC,CAAA,EAC5B,gBAAiBQ,EAAM,UACvB,UAAAV,EACA,IAAKU,EAAM,IAEX,cAAAN,EACC,GAAGD,CAAA,EAPCO,EAAM,IAAMA,EAAM,KAAO,CAAA,EAS9B,IAAA,CACN,CAAA,EAzB2B,IA4BjC"}

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

@@ -1,11 +1,115 @@
 import { j as i } from "../../../../_virtual/jsx-runtime.es.js";
-import { useContext as m } from "react";
+import { useContext as a } from "react";
 import d, { css as l } from "styled-components";
 import { Thumbnail as x } from "./Thumbnail.es.js";
 import f from "clsx";
 import "../../context/RemoteModulesContext.es.js";
-import "../../context/DetailsPanelContext.es.js";
-import "../../context/SubtasksModulesContext.es.js";
+import "../../../../_virtual/runtime.es.js";
+import "../../../../_virtual/semver.es.js";
+import "../../api/base/client.es.js";
+import "../../api/generated/graphql.es.js";
+import "../../api/generated/graphqlLinks.es.js";
+import "../../api/generated/access.es.js";
+import "../../api/generated/actions.es.js";
+import "../../api/generated/activityFeed.es.js";
+import "../../api/generated/addons.es.js";
+import "../../api/generated/anatomy.es.js";
+import "../../api/generated/attributes.es.js";
+import "../../api/generated/authentication.es.js";
+import "../../api/generated/bundles.es.js";
+import "../../api/generated/configuration.es.js";
+import "../../api/generated/dataImport.es.js";
+import "../../api/generated/desktop.es.js";
+import "../../api/generated/entityLists.es.js";
+import "../../api/generated/events.es.js";
+import "../../api/generated/files.es.js";
+import "../../api/generated/folders.es.js";
+import "../../api/generated/inbox.es.js";
+import "../../api/generated/links.es.js";
+import "../../api/generated/market.es.js";
+import "../../api/generated/onboarding.es.js";
+import "../../api/generated/operations.es.js";
+import "../../api/generated/products.es.js";
+import "../../api/generated/projectDashboard.es.js";
+import "../../api/generated/projects.es.js";
+import "../../api/generated/projectFolders.es.js";
+import "../../api/generated/reviewables.es.js";
+import "../../api/generated/services.es.js";
+import "../../api/generated/system.es.js";
+import "../../api/generated/tasks.es.js";
+import "../../api/generated/teams.es.js";
+import "../../api/generated/thumbnails.es.js";
+import "../../api/generated/uRIs.es.js";
+import "../../api/generated/users.es.js";
+import "../../api/generated/versions.es.js";
+import "../../api/generated/workfiles.es.js";
+import "../../api/generated/ynputCloud.es.js";
+import "../../api/generated/grouping.es.js";
+import "../../api/generated/views.es.js";
+import "../../api/queries/actions/getActions.es.js";
+import "../../api/queries/activities/getActivities.es.js";
+import "../../api/queries/activities/updateActivities.es.js";
+import "../../api/queries/activities/updateReaction.es.js";
+import "../../api/queries/activities/getMentions.es.js";
+import "../../api/queries/activities/getCategories.es.js";
+import "../../api/queries/addons/getAddons.es.js";
+import "../../api/queries/addons/updateAddons.es.js";
+import "../../api/queries/attributes/getAttributes.es.js";
+import "../../api/queries/attributes/updateAttributes.es.js";
+import "../../api/queries/authentication/getAuthentication.es.js";
+import "../../api/queries/cloud/cloud.es.js";
+import "../../api/queries/config/getConfig.es.js";
+import "../../api/queries/config/updateConfig.es.js";
+import "../../api/queries/entities/getEntity.es.js";
+import "../../api/queries/entities/getEntityPanel.es.js";
+import "../../api/queries/entities/updateEntity.es.js";
+import "../../api/queries/entityLists/getLists.es.js";
+import "../../api/queries/entityLists/updateLists.es.js";
+import "../../api/queries/entityLists/getListsAttributes.es.js";
+import "../../api/queries/entityLists/updateListsAttributes.es.js";
+import "../../api/queries/entityLists/listFolders.es.js";
+import "../../api/queries/folders/getFolders.es.js";
+import "../../api/queries/folders/getFolderDeleteInfo.es.js";
+import "../../api/queries/grouping/getGrouping.es.js";
+import "../../api/queries/links/updateLinks.es.js";
+import "../../api/queries/links/getLinks.es.js";
+import "../../api/queries/links/getEntityLinks.es.js";
+import "../../api/queries/overview/getOverview.es.js";
+import "../../api/queries/overview/updateOverview.es.js";
+import "../../api/queries/versions/getVersionsProducts.es.js";
+import "../../api/queries/permissions/getPermissions.es.js";
+import "../../api/queries/products/createProduct.es.js";
+import "../../api/queries/products/getFolderProducts.es.js";
+import "../../api/queries/project/getProject.es.js";
+import "../../api/queries/project/updateProject.es.js";
+import "../../api/queries/projectFolders/projectFolders.es.js";
+import "../../api/queries/review/getReview.es.js";
+import "../../api/queries/review/updateReview.es.js";
+import "../../api/queries/share/share.es.js";
+import "../../api/queries/system/getSystem.es.js";
+import "../../api/queries/tasks/getTasks.es.js";
+import "../../api/queries/tasks/updateTasks.es.js";
+import "../../api/queries/teams/getTeams.es.js";
+import "../../api/queries/userDashboard/getUserDashboard.es.js";
+import "../../api/queries/users/getUsers.es.js";
+import "../../api/queries/users/updateUsers.es.js";
+import "../../api/queries/users/guests.es.js";
+import "../../api/queries/versions/updateVersions.es.js";
+import "../../api/queries/views/getViews.es.js";
+import "../../api/queries/views/updateViews.es.js";
+import "../../api/queries/watchers/getWatchers.es.js";
+import "../../api/queries/uris/getUris.es.js";
+import "lodash";
+import "react-toastify";
+import "react-redux";
+import "custom-protocol-check";
+import "../../containers/ProjectTreeTable/components/GroupSettingsFallback.es.js";
+import "uuid";
+import "../../util/pubsub.es.js";
+import "../../context/PowerpackContextInstance.es.js";
+import "../../context/UriContext.es.js";
+import "../../context/DetailsPanelContextInstance.es.js";
+import "../../context/SubtasksModulesContextInstance.es.js";
 import { ThumbnailUploadContext as g } from "../../context/ThumbnailUploaderContext.es.js";
 import "../../context/SettingsPanelContext.es.js";
 import "../../context/pip/PiPProvider.es.js";
@@ -13,14 +117,12 @@ import "react-dom";
 import "../../context/pip/PiPWrapper.es.js";
 import "../../context/AddonProjectContext.es.js";
 import "../../context/AddonContext.es.js";
-import "../../context/PowerpackContext.es.js";
 import "../../context/MoveEntityContext.es.js";
 import "../../context/MenuContext.es.js";
 import "../../context/WebsocketContext.es.js";
 import "../../context/GlobalContext.es.js";
 import "../../context/ProjectContext.es.js";
 import "../../context/ProjectFoldersContext.es.js";
-import "../../context/UriContext.es.js";
 const y = d.div`
   display: flex;
   z-index: 10;
@@ -58,21 +160,21 @@ const y = d.div`
       object-fit: cover;
     }
   }
-`, H = ({
+`, qo = ({
   thumbnails: t = [],
-  isLoading: e,
-  className: p,
-  style: n,
-  ...s
+  isLoading: p,
+  className: m,
+  style: e,
+  ...n
 }) => {
-  const { onContextMenu: c } = m(g);
+  const { onContextMenu: s } = a(g);
   t = t.slice(0, 5);
-  const a = t.length > 1;
+  const c = t.length > 1;
   return t.length ? /* @__PURE__ */ i.jsx(
     y,
     {
       $length: t.length,
-      className: f("stacked-thumbnails", p, { stacking: a }),
+      className: f("stacked-thumbnails", m, { stacking: c }),
       children: t.map(
         (o, r) => o ? /* @__PURE__ */ i.jsx(
           x,
@@ -82,12 +184,12 @@ const y = d.div`
             entityId: o.id,
             icon: o.icon,
             color: o.color,
-            style: { ...n, zIndex: -r },
+            style: { ...e, zIndex: -r },
             entityUpdatedAt: o.updatedAt,
-            isLoading: e,
+            isLoading: p,
             src: o.src,
-            onContextMenu: c,
-            ...s
+            onContextMenu: s,
+            ...n
           },
           o.id || o.src || r
         ) : null
@@ -96,6 +198,6 @@ const y = d.div`
   ) : null;
 };
 export {
-  H as StackedThumbnails
+  qo as StackedThumbnails
 };
 //# sourceMappingURL=StackedThumbnails.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StackedThumbnails.es.js","sources":["../../../../../src/components/Thumbnail/StackedThumbnails.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport styled, { css } from 'styled-components'\nimport { Thumbnail } from './Thumbnail'\nimport clsx from 'clsx'\nimport { ThumbnailUploadContext } from '@shared/context'\nimport { ThumbnailProps } from '@shared/components'\n\ntype StackedStyledProps = {\n  $length: number\n}\n\nconst StackedStyled = styled.div<StackedStyledProps>`\n  display: flex;\n  z-index: 10;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n  border-radius: 8px;\n  min-width: min-content;\n  cursor: pointer;\n\n  &.stacking {\n    & > * {\n      margin: unset;\n      aspect-ratio: 1;\n      border: solid 2px var(--md-sys-color-outline-variant);\n      border-radius: 8px;\n\n      span {\n        font-size: 24px;\n      }\n\n      ${({ $length }) =>\n        $length > 1 &&\n        css`\n          :not(:last-child) {\n            box-shadow: 0 0 4px 0px black;\n          }\n        `}\n    }\n\n    /* create stacked effect */\n    & > * + * {\n      margin-left: ${({ $length }) => `${Math.max(-20, -$length * 1.5 - 8)}px`};\n    }\n\n    .thumbnail img {\n      object-fit: cover;\n    }\n  }\n`\n\ntype Thumbnail = {\n  id?: string\n  type?: string\n  projectName?: string\n  icon?: string\n  color?: string\n  updatedAt?: string\n  src?: string\n}\n\nexport interface StackedThumbnailsProps\n  extends Omit<ThumbnailProps, 'entityType' | 'entityId' | 'projectName'> {\n  thumbnails?: Thumbnail[]\n  isLoading?: boolean\n  className?: string\n  style?: React.CSSProperties\n}\n\nexport const StackedThumbnails = ({\n  thumbnails = [],\n  isLoading,\n  className,\n  style,\n  ...props\n}: StackedThumbnailsProps) => {\n  const { onContextMenu } = useContext(ThumbnailUploadContext)\n  // limit to 5 users\n  thumbnails = thumbnails.slice(0, 5)\n  const isStacking = thumbnails.length > 1\n\n  if (!thumbnails.length) return null\n\n  return (\n    <StackedStyled\n      $length={thumbnails.length}\n      className={clsx('stacked-thumbnails', className, { stacking: isStacking })}\n    >\n      {thumbnails.map((thumb, i) =>\n        thumb ? (\n          <Thumbnail\n            projectName={thumb.projectName}\n            entityType={thumb.type}\n            entityId={thumb.id}\n            icon={thumb.icon}\n            color={thumb.color}\n            key={thumb.id || thumb.src || i}\n            style={{ ...style, zIndex: -i }}\n            entityUpdatedAt={thumb.updatedAt}\n            isLoading={isLoading}\n            src={thumb.src}\n            // @ts-ignore\n            onContextMenu={onContextMenu}\n            {...props}\n          />\n        ) : null,\n      )}\n    </StackedStyled>\n  )\n}\n"],"names":["StackedStyled","styled","$length","css","StackedThumbnails","thumbnails","isLoading","className","style","props","onContextMenu","useContext","ThumbnailUploadContext","isStacking","jsx","clsx","thumb","i","Thumbnail"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAMA,IAAgBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAqBrB,CAAC,EAAE,SAAAC,EAAA,MACHA,IAAU,KACVC;AAAA;AAAA;AAAA;AAAA,SAIC;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKY,CAAC,EAAE,SAAAD,EAAA,MAAc,GAAG,KAAK,IAAI,KAAK,CAACA,IAAU,MAAM,CAAC,CAAC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA2BjEE,IAAoB,CAAC;AAAA,EAChC,YAAAC,IAAa,CAAA;AAAA,EACb,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,MAA8B;AAC5B,QAAM,EAAE,eAAAC,EAAA,IAAkBC,EAAWC,CAAsB;AAE3D,EAAAP,IAAaA,EAAW,MAAM,GAAG,CAAC;AAClC,QAAMQ,IAAaR,EAAW,SAAS;AAEvC,SAAKA,EAAW,SAGdS,gBAAAA,EAAAA;AAAAA,IAACd;AAAA,IAAA;AAAA,MACC,SAASK,EAAW;AAAA,MACpB,WAAWU,EAAK,sBAAsBR,GAAW,EAAE,UAAUM,GAAY;AAAA,MAExE,UAAAR,EAAW;AAAA,QAAI,CAACW,GAAOC,MACtBD,IACEF,gBAAAA,EAAAA;AAAAA,UAACI;AAAA,UAAA;AAAA,YACC,aAAaF,EAAM;AAAA,YACnB,YAAYA,EAAM;AAAA,YAClB,UAAUA,EAAM;AAAA,YAChB,MAAMA,EAAM;AAAA,YACZ,OAAOA,EAAM;AAAA,YAEb,OAAO,EAAE,GAAGR,GAAO,QAAQ,CAACS,EAAA;AAAA,YAC5B,iBAAiBD,EAAM;AAAA,YACvB,WAAAV;AAAA,YACA,KAAKU,EAAM;AAAA,YAEX,eAAAN;AAAA,YACC,GAAGD;AAAA,UAAA;AAAA,UAPCO,EAAM,MAAMA,EAAM,OAAOC;AAAA,QAAA,IAS9B;AAAA,MAAA;AAAA,IACN;AAAA,EAAA,IAzB2B;AA4BjC;"}
+{"version":3,"file":"StackedThumbnails.es.js","sources":["../../../../../src/components/Thumbnail/StackedThumbnails.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport styled, { css } from 'styled-components'\nimport { Thumbnail } from './Thumbnail'\nimport clsx from 'clsx'\nimport { ThumbnailUploadContext } from '@shared/context'\nimport { ThumbnailProps } from '@shared/components'\n\ntype StackedStyledProps = {\n  $length: number\n}\n\nconst StackedStyled = styled.div<StackedStyledProps>`\n  display: flex;\n  z-index: 10;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n  border-radius: 8px;\n  min-width: min-content;\n  cursor: pointer;\n\n  &.stacking {\n    & > * {\n      margin: unset;\n      aspect-ratio: 1;\n      border: solid 2px var(--md-sys-color-outline-variant);\n      border-radius: 8px;\n\n      span {\n        font-size: 24px;\n      }\n\n      ${({ $length }) =>\n        $length > 1 &&\n        css`\n          :not(:last-child) {\n            box-shadow: 0 0 4px 0px black;\n          }\n        `}\n    }\n\n    /* create stacked effect */\n    & > * + * {\n      margin-left: ${({ $length }) => `${Math.max(-20, -$length * 1.5 - 8)}px`};\n    }\n\n    .thumbnail img {\n      object-fit: cover;\n    }\n  }\n`\n\ntype Thumbnail = {\n  id?: string\n  type?: string\n  projectName?: string\n  icon?: string\n  color?: string\n  updatedAt?: string\n  src?: string\n}\n\nexport interface StackedThumbnailsProps\n  extends Omit<ThumbnailProps, 'entityType' | 'entityId' | 'projectName'> {\n  thumbnails?: Thumbnail[]\n  isLoading?: boolean\n  className?: string\n  style?: React.CSSProperties\n}\n\nexport const StackedThumbnails = ({\n  thumbnails = [],\n  isLoading,\n  className,\n  style,\n  ...props\n}: StackedThumbnailsProps) => {\n  const { onContextMenu } = useContext(ThumbnailUploadContext)\n  // limit to 5 users\n  thumbnails = thumbnails.slice(0, 5)\n  const isStacking = thumbnails.length > 1\n\n  if (!thumbnails.length) return null\n\n  return (\n    <StackedStyled\n      $length={thumbnails.length}\n      className={clsx('stacked-thumbnails', className, { stacking: isStacking })}\n    >\n      {thumbnails.map((thumb, i) =>\n        thumb ? (\n          <Thumbnail\n            projectName={thumb.projectName}\n            entityType={thumb.type}\n            entityId={thumb.id}\n            icon={thumb.icon}\n            color={thumb.color}\n            key={thumb.id || thumb.src || i}\n            style={{ ...style, zIndex: -i }}\n            entityUpdatedAt={thumb.updatedAt}\n            isLoading={isLoading}\n            src={thumb.src}\n            // @ts-ignore — Thumbnail forwards onContextMenu to its root element\n            onContextMenu={onContextMenu}\n            {...props}\n          />\n        ) : null,\n      )}\n    </StackedStyled>\n  )\n}\n"],"names":["StackedStyled","styled","$length","css","StackedThumbnails","thumbnails","isLoading","className","style","props","onContextMenu","useContext","ThumbnailUploadContext","isStacking","jsx","clsx","thumb","i","Thumbnail"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAMA,IAAgBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAqBrB,CAAC,EAAE,SAAAC,EAAA,MACHA,IAAU,KACVC;AAAA;AAAA;AAAA;AAAA,SAIC;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKY,CAAC,EAAE,SAAAD,EAAA,MAAc,GAAG,KAAK,IAAI,KAAK,CAACA,IAAU,MAAM,CAAC,CAAC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA2BjEE,KAAoB,CAAC;AAAA,EAChC,YAAAC,IAAa,CAAA;AAAA,EACb,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,MAA8B;AAC5B,QAAM,EAAE,eAAAC,EAAA,IAAkBC,EAAWC,CAAsB;AAE3D,EAAAP,IAAaA,EAAW,MAAM,GAAG,CAAC;AAClC,QAAMQ,IAAaR,EAAW,SAAS;AAEvC,SAAKA,EAAW,SAGdS,gBAAAA,EAAAA;AAAAA,IAACd;AAAA,IAAA;AAAA,MACC,SAASK,EAAW;AAAA,MACpB,WAAWU,EAAK,sBAAsBR,GAAW,EAAE,UAAUM,GAAY;AAAA,MAExE,UAAAR,EAAW;AAAA,QAAI,CAACW,GAAOC,MACtBD,IACEF,gBAAAA,EAAAA;AAAAA,UAACI;AAAA,UAAA;AAAA,YACC,aAAaF,EAAM;AAAA,YACnB,YAAYA,EAAM;AAAA,YAClB,UAAUA,EAAM;AAAA,YAChB,MAAMA,EAAM;AAAA,YACZ,OAAOA,EAAM;AAAA,YAEb,OAAO,EAAE,GAAGR,GAAO,QAAQ,CAACS,EAAA;AAAA,YAC5B,iBAAiBD,EAAM;AAAA,YACvB,WAAAV;AAAA,YACA,KAAKU,EAAM;AAAA,YAEX,eAAAN;AAAA,YACC,GAAGD;AAAA,UAAA;AAAA,UAPCO,EAAM,MAAMA,EAAM,OAAOC;AAAA,QAAA,IAS9B;AAAA,MAAA;AAAA,IACN;AAAA,EAAA,IAzB2B;AA4BjC;"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../../../../_virtual/jsx-runtime.cjs.js"),u=require("react"),b=require("@ynput/ayon-react-components"),k=require("clsx"),g=require("./Thumbnail.styled.cjs.js"),v=({projectName:s="",entityType:t="",entityId:c="",icon:j,color:E,entityUpdatedAt:l,isLoading:f,shimmer:R,className:$,disabled:p,src:n,hoverIcon:m,showBorder:q=!0,...h})=>{const d=t==="project",I=["product"].includes(t),x=d?!!s:!!c;let e="";t&&l&&x&&(n?e=n:s&&(e=d?`/api/projects/${s}/thumbnail`:`/api/projects/${s}/${t}s/${c}/thumbnail`),e&&!/[?&]updatedAt=/.test(e)&&(e+=(e.includes("?")?"&":"?")+`updatedAt=${l}`));const[S,a]=u.useState(!1),[i,r]=u.useState(!1);return u.useEffect(()=>{if(e===""){r(!0),a(!0);return}r(!1),a(!1);const w=n||`${e}`;e&&(async()=>{try{if((await fetch(w,{cache:"force-cache"})).status===200)r(!0);else throw new Error("Image not OK")}catch{a(!0),r(!0)}})()},[e]),o.jsxRuntimeExports.jsxs(g.Card,{className:k($,"thumbnail",{loading:R&&(f||!i),loaded:i,error:S,clickable:!!h.onClick,border:q}),...h,children:[(!f||!i)&&!p&&o.jsxRuntimeExports.jsx(b.Icon,{style:{color:E||void 0},icon:j||"image",className:"type-icon"}),t&&s&&!I&&x&&o.jsxRuntimeExports.jsx(g.Image,{alt:`Entity thumbnail ${c||s}`,src:e}),m&&o.jsxRuntimeExports.jsx(b.Icon,{icon:m,className:"hover-icon"})]})};exports.Thumbnail=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../../../../_virtual/jsx-runtime.cjs.js"),l=require("react"),h=require("@ynput/ayon-react-components"),k=require("clsx"),j=require("./Thumbnail.styled.cjs.js"),v=({projectName:e="",entityType:t="",entityId:u="",icon:E,color:R,entityUpdatedAt:a,isLoading:c,shimmer:$,className:g,disabled:q,src:d,hoverIcon:m,showBorder:S=!0,...x})=>{const f=t==="project",p=["product"].includes(t),b=f?!!e:!!u;let s="";t&&a&&b&&(d?s=d:e&&(s=f?`/api/projects/${e}/thumbnail`:`/api/projects/${e}/${t}s/${u}/thumbnail`),s&&!/[?&]updatedAt=/.test(s)&&(s+=(s.includes("?")?"&":"?")+`updatedAt=${a}`));const[C,r]=l.useState(!1),[i,o]=l.useState(!1);return l.useEffect(()=>{if(s===""){o(!0),r(!0);return}o(!1),r(!1)},[s]),n.jsxRuntimeExports.jsxs(j.Card,{className:k(g,"thumbnail",{loading:$&&(c||!i),loaded:i,error:C,clickable:!!x.onClick,border:S}),...x,children:[(!c||!i)&&!q&&n.jsxRuntimeExports.jsx(h.Icon,{style:{color:R||void 0},icon:E||"image",className:"type-icon"}),t&&e&&!p&&b&&n.jsxRuntimeExports.jsx(j.Image,{alt:`Entity thumbnail ${u||e}`,src:s,onLoad:()=>{o(!0),r(!1)},onError:()=>{o(!0),r(!0)}}),m&&n.jsxRuntimeExports.jsx(h.Icon,{icon:m,className:"hover-icon"})]})};exports.Thumbnail=v;
 //# 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'\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  entityUpdatedAt?: 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  entityUpdatedAt,\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 && entityUpdatedAt && hasIdentity) {\n    if (src) {\n      url = src\n    } else if (projectName) {\n      url = isProject\n        ? `/api/projects/${projectName}/thumbnail`\n        : `/api/projects/${projectName}/${entityType}s/${entityId}/thumbnail`\n    }\n    if (url && !/[?&]updatedAt=/.test(url)) {\n      url += (url.includes('?') ? '&' : '?') + `updatedAt=${entityUpdatedAt}`\n    }\n  }\n\n  const [error, setError] = useState(false)\n  const [loaded, setLoaded] = useState(false)\n  useEffect(() => {\n    if (url === '') {\n      setLoaded(true)\n      setError(true)\n      return\n    }\n    // Reset loaded and error states when src changes\n    setLoaded(false)\n    setError(false)\n    const imageUrl = src || `${url}`\n\n    // Function to fetch image and check status code\n    const fetchImage = async () => {\n      try {\n        const response = await fetch(imageUrl, { cache: 'force-cache' })\n        if (response.status === 200) {\n          setLoaded(true)\n        } else {\n          throw new Error('Image not OK')\n        }\n      } catch (error) {\n        setError(true) // Handle error (e.g., set error state)\n        setLoaded(true)\n      }\n    }\n\n    if (url) {\n      fetchImage()\n    }\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 alt={`Entity thumbnail ${entityId || projectName}`} src={url} />\n      )}\n      {hoverIcon && <Icon icon={hoverIcon} className=\"hover-icon\" />}\n    </Styled.Card>\n  )\n}\n"],"names":["Thumbnail","projectName","entityType","entityId","icon","color","entityUpdatedAt","isLoading","shimmer","className","disabled","src","hoverIcon","showBorder","props","isProject","isWrongEntity","hasIdentity","url","error","setError","useState","loaded","setLoaded","useEffect","imageUrl","jsxs","Styled.Card","clsx","Icon","jsx","Styled.Image"],"mappings":"iQAqBaA,EAAY,CAAC,CACxB,YAAAC,EAAc,GACd,WAAAC,EAAa,GACb,SAAAC,EAAW,GACX,KAAAC,EACA,MAAAC,EACA,gBAAAC,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,GAAcI,GAAmBW,IAC/BN,EACFO,EAAMP,EACGV,IACTiB,EAAMH,EACF,iBAAiBd,CAAW,aAC5B,iBAAiBA,CAAW,IAAIC,CAAU,KAAKC,CAAQ,cAEzDe,GAAO,CAAC,iBAAiB,KAAKA,CAAG,IACnCA,IAAQA,EAAI,SAAS,GAAG,EAAI,IAAM,KAAO,aAAaZ,CAAe,KAIzE,KAAM,CAACa,EAAOC,CAAQ,EAAIC,EAAAA,SAAS,EAAK,EAClC,CAACC,EAAQC,CAAS,EAAIF,EAAAA,SAAS,EAAK,EAC1CG,OAAAA,EAAAA,UAAU,IAAM,CACd,GAAIN,IAAQ,GAAI,CACdK,EAAU,EAAI,EACdH,EAAS,EAAI,EACb,MACF,CAEAG,EAAU,EAAK,EACfH,EAAS,EAAK,EACd,MAAMK,EAAWd,GAAO,GAAGO,CAAG,GAiB1BA,IAde,SAAY,CAC7B,GAAI,CAEF,IADiB,MAAM,MAAMO,EAAU,CAAE,MAAO,cAAe,GAClD,SAAW,IACtBF,EAAU,EAAI,MAEd,OAAM,IAAI,MAAM,cAAc,CAElC,MAAgB,CACdH,EAAS,EAAI,EACbG,EAAU,EAAI,CAChB,CACF,GAGE,CAEJ,EAAG,CAACL,CAAG,CAAC,EAGNQ,EAAAA,kBAAAA,KAACC,EAAAA,KAAA,CACC,UAAWC,EAAKnB,EAAW,YAAa,CACtC,QAASD,IAAYD,GAAa,CAACe,GACnC,OAAAA,EACA,MAAAH,EACA,UAAW,CAAC,CAACL,EAAM,QACnB,OAAQD,CAAA,CACT,EACA,GAAGC,EAEF,SAAA,EAAA,CAACP,GAAa,CAACe,IAAW,CAACZ,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,CAAa,IAAK,oBAAoB5B,GAAYF,CAAW,GAAI,IAAKiB,EAAK,EAE7EN,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'\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  entityUpdatedAt?: 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  entityUpdatedAt,\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 && entityUpdatedAt && hasIdentity) {\n    if (src) {\n      url = src\n    } else if (projectName) {\n      url = isProject\n        ? `/api/projects/${projectName}/thumbnail`\n        : `/api/projects/${projectName}/${entityType}s/${entityId}/thumbnail`\n    }\n    if (url && !/[?&]updatedAt=/.test(url)) {\n      url += (url.includes('?') ? '&' : '?') + `updatedAt=${entityUpdatedAt}`\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","entityUpdatedAt","isLoading","shimmer","className","disabled","src","hoverIcon","showBorder","props","isProject","isWrongEntity","hasIdentity","url","error","setError","useState","loaded","setLoaded","useEffect","jsxs","Styled.Card","clsx","Icon","jsx","Styled.Image"],"mappings":"iQAqBaA,EAAY,CAAC,CACxB,YAAAC,EAAc,GACd,WAAAC,EAAa,GACb,SAAAC,EAAW,GACX,KAAAC,EACA,MAAAC,EACA,gBAAAC,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,GAAcI,GAAmBW,IAC/BN,EACFO,EAAMP,EACGV,IACTiB,EAAMH,EACF,iBAAiBd,CAAW,aAC5B,iBAAiBA,CAAW,IAAIC,CAAU,KAAKC,CAAQ,cAEzDe,GAAO,CAAC,iBAAiB,KAAKA,CAAG,IACnCA,IAAQA,EAAI,SAAS,GAAG,EAAI,IAAM,KAAO,aAAaZ,CAAe,KAIzE,KAAM,CAACa,EAAOC,CAAQ,EAAIC,EAAAA,SAAS,EAAK,EAClC,CAACC,EAAQC,CAAS,EAAIF,EAAAA,SAAS,EAAK,EAE1CG,OAAAA,EAAAA,UAAU,IAAM,CACd,GAAIN,IAAQ,GAAI,CACdK,EAAU,EAAI,EACdH,EAAS,EAAI,EACb,MACF,CAEAG,EAAU,EAAK,EACfH,EAAS,EAAK,CAChB,EAAG,CAACF,CAAG,CAAC,EAGNO,EAAAA,kBAAAA,KAACC,EAAAA,KAAA,CACC,UAAWC,EAAKlB,EAAW,YAAa,CACtC,QAASD,IAAYD,GAAa,CAACe,GACnC,OAAAA,EACA,MAAAH,EACA,UAAW,CAAC,CAACL,EAAM,QACnB,OAAQD,CAAA,CACT,EACA,GAAGC,EAEF,SAAA,EAAA,CAACP,GAAa,CAACe,IAAW,CAACZ,2BAC1BkB,EAAAA,KAAA,CAAK,MAAO,CAAE,MAAOvB,GAAS,MAAA,EAAa,KAAMD,GAAQ,QAAS,UAAU,YAAY,EAE1FF,GAAcD,GAAe,CAACe,GAAiBC,GAC9CY,EAAAA,kBAAAA,IAACC,EAAAA,MAAA,CACC,IAAK,oBAAoB3B,GAAYF,CAAW,GAChD,IAAKiB,EACL,OAAQ,IAAM,CACZK,EAAU,EAAI,EACdH,EAAS,EAAK,CAChB,EACA,QAAS,IAAM,CACbG,EAAU,EAAI,EACdH,EAAS,EAAI,CACf,CAAA,CAAA,EAGHR,GAAaiB,EAAAA,kBAAAA,IAACD,OAAA,CAAK,KAAMhB,EAAW,UAAU,YAAA,CAAa,CAAA,CAAA,CAAA,CAGlE"}

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

@@ -1,65 +1,66 @@
-import { j as o } from "../../../../_virtual/jsx-runtime.es.js";
-import { useState as x, useEffect as A } from "react";
-import { Icon as b } from "@ynput/ayon-react-components";
-import K from "clsx";
-import { Card as O, Image as P } from "./Thumbnail.styled.es.js";
-const D = ({
+import { j as i } from "../../../../_virtual/jsx-runtime.es.js";
+import { useState as b, useEffect as A } from "react";
+import { Icon as h } from "@ynput/ayon-react-components";
+import L from "clsx";
+import { Card as P, Image as R } from "./Thumbnail.styled.es.js";
+const B = ({
   projectName: r = "",
-  entityType: t = "",
-  entityId: c = "",
-  icon: g,
+  entityType: o = "",
+  entityId: a = "",
+  icon: E,
   color: $,
-  entityUpdatedAt: n,
+  entityUpdatedAt: c,
   isLoading: u,
-  shimmer: p,
-  className: E,
-  disabled: j,
-  src: a,
+  shimmer: j,
+  className: p,
+  disabled: g,
+  src: n,
   hoverIcon: f,
-  showBorder: w = !0,
+  showBorder: k = !0,
   ...m
 }) => {
-  const h = t === "project", I = ["product"].includes(t), d = h ? !!r : !!c;
+  const d = o === "project", C = ["product"].includes(o), x = d ? !!r : !!a;
   let s = "";
-  t && n && d && (a ? s = a : r && (s = h ? `/api/projects/${r}/thumbnail` : `/api/projects/${r}/${t}s/${c}/thumbnail`), s && !/[?&]updatedAt=/.test(s) && (s += (s.includes("?") ? "&" : "?") + `updatedAt=${n}`));
-  const [k, i] = x(!1), [l, e] = x(!1);
+  o && c && x && (n ? s = n : r && (s = d ? `/api/projects/${r}/thumbnail` : `/api/projects/${r}/${o}s/${a}/thumbnail`), s && !/[?&]updatedAt=/.test(s) && (s += (s.includes("?") ? "&" : "?") + `updatedAt=${c}`));
+  const [v, t] = b(!1), [e, l] = b(!1);
   return A(() => {
     if (s === "") {
-      e(!0), i(!0);
+      l(!0), t(!0);
       return;
     }
-    e(!1), i(!1);
-    const C = a || `${s}`;
-    s && (async () => {
-      try {
-        if ((await fetch(C, { cache: "force-cache" })).status === 200)
-          e(!0);
-        else
-          throw new Error("Image not OK");
-      } catch {
-        i(!0), e(!0);
-      }
-    })();
-  }, [s]), /* @__PURE__ */ o.jsxs(
-    O,
+    l(!1), t(!1);
+  }, [s]), /* @__PURE__ */ i.jsxs(
+    P,
     {
-      className: K(E, "thumbnail", {
-        loading: p && (u || !l),
-        loaded: l,
-        error: k,
+      className: L(p, "thumbnail", {
+        loading: j && (u || !e),
+        loaded: e,
+        error: v,
         clickable: !!m.onClick,
-        border: w
+        border: k
       }),
       ...m,
       children: [
-        (!u || !l) && !j && /* @__PURE__ */ o.jsx(b, { style: { color: $ || void 0 }, icon: g || "image", className: "type-icon" }),
-        t && r && !I && d && /* @__PURE__ */ o.jsx(P, { alt: `Entity thumbnail ${c || r}`, src: s }),
-        f && /* @__PURE__ */ o.jsx(b, { icon: f, className: "hover-icon" })
+        (!u || !e) && !g && /* @__PURE__ */ i.jsx(h, { style: { color: $ || void 0 }, icon: E || "image", className: "type-icon" }),
+        o && r && !C && x && /* @__PURE__ */ i.jsx(
+          R,
+          {
+            alt: `Entity thumbnail ${a || r}`,
+            src: s,
+            onLoad: () => {
+              l(!0), t(!1);
+            },
+            onError: () => {
+              l(!0), t(!0);
+            }
+          }
+        ),
+        f && /* @__PURE__ */ i.jsx(h, { icon: f, className: "hover-icon" })
       ]
     }
   );
 };
 export {
-  D as Thumbnail
+  B 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'\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  entityUpdatedAt?: 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  entityUpdatedAt,\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 && entityUpdatedAt && hasIdentity) {\n    if (src) {\n      url = src\n    } else if (projectName) {\n      url = isProject\n        ? `/api/projects/${projectName}/thumbnail`\n        : `/api/projects/${projectName}/${entityType}s/${entityId}/thumbnail`\n    }\n    if (url && !/[?&]updatedAt=/.test(url)) {\n      url += (url.includes('?') ? '&' : '?') + `updatedAt=${entityUpdatedAt}`\n    }\n  }\n\n  const [error, setError] = useState(false)\n  const [loaded, setLoaded] = useState(false)\n  useEffect(() => {\n    if (url === '') {\n      setLoaded(true)\n      setError(true)\n      return\n    }\n    // Reset loaded and error states when src changes\n    setLoaded(false)\n    setError(false)\n    const imageUrl = src || `${url}`\n\n    // Function to fetch image and check status code\n    const fetchImage = async () => {\n      try {\n        const response = await fetch(imageUrl, { cache: 'force-cache' })\n        if (response.status === 200) {\n          setLoaded(true)\n        } else {\n          throw new Error('Image not OK')\n        }\n      } catch (error) {\n        setError(true) // Handle error (e.g., set error state)\n        setLoaded(true)\n      }\n    }\n\n    if (url) {\n      fetchImage()\n    }\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 alt={`Entity thumbnail ${entityId || projectName}`} src={url} />\n      )}\n      {hoverIcon && <Icon icon={hoverIcon} className=\"hover-icon\" />}\n    </Styled.Card>\n  )\n}\n"],"names":["Thumbnail","projectName","entityType","entityId","icon","color","entityUpdatedAt","isLoading","shimmer","className","disabled","src","hoverIcon","showBorder","props","isProject","isWrongEntity","hasIdentity","url","error","setError","useState","loaded","setLoaded","useEffect","imageUrl","jsxs","Styled.Card","clsx","Icon","jsx","Styled.Image"],"mappings":";;;;;AAqBO,MAAMA,IAAY,CAAC;AAAA,EACxB,aAAAC,IAAc;AAAA,EACd,YAAAC,IAAa;AAAA,EACb,UAAAC,IAAW;AAAA,EACX,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,iBAAAC;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,KAAcI,KAAmBW,MAC/BN,IACFO,IAAMP,IACGV,MACTiB,IAAMH,IACF,iBAAiBd,CAAW,eAC5B,iBAAiBA,CAAW,IAAIC,CAAU,KAAKC,CAAQ,eAEzDe,KAAO,CAAC,iBAAiB,KAAKA,CAAG,MACnCA,MAAQA,EAAI,SAAS,GAAG,IAAI,MAAM,OAAO,aAAaZ,CAAe;AAIzE,QAAM,CAACa,GAAOC,CAAQ,IAAIC,EAAS,EAAK,GAClC,CAACC,GAAQC,CAAS,IAAIF,EAAS,EAAK;AAC1C,SAAAG,EAAU,MAAM;AACd,QAAIN,MAAQ,IAAI;AACd,MAAAK,EAAU,EAAI,GACdH,EAAS,EAAI;AACb;AAAA,IACF;AAEA,IAAAG,EAAU,EAAK,GACfH,EAAS,EAAK;AACd,UAAMK,IAAWd,KAAO,GAAGO,CAAG;AAiB9B,IAAIA,MAde,YAAY;AAC7B,UAAI;AAEF,aADiB,MAAM,MAAMO,GAAU,EAAE,OAAO,eAAe,GAClD,WAAW;AACtB,UAAAF,EAAU,EAAI;AAAA;AAEd,gBAAM,IAAI,MAAM,cAAc;AAAA,MAElC,QAAgB;AACd,QAAAH,EAAS,EAAI,GACbG,EAAU,EAAI;AAAA,MAChB;AAAA,IACF,GAGE;AAAA,EAEJ,GAAG,CAACL,CAAG,CAAC,GAGNQ,gBAAAA,EAAAA;AAAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAWC,EAAKnB,GAAW,aAAa;AAAA,QACtC,SAASD,MAAYD,KAAa,CAACe;AAAA,QACnC,QAAAA;AAAA,QACA,OAAAH;AAAA,QACA,WAAW,CAAC,CAACL,EAAM;AAAA,QACnB,QAAQD;AAAA,MAAA,CACT;AAAA,MACA,GAAGC;AAAA,MAEF,UAAA;AAAA,SAAA,CAACP,KAAa,CAACe,MAAW,CAACZ,2BAC1BmB,GAAA,EAAK,OAAO,EAAE,OAAOxB,KAAS,OAAA,GAAa,MAAMD,KAAQ,SAAS,WAAU,aAAY;AAAA,QAE1FF,KAAcD,KAAe,CAACe,KAAiBC,KAC9Ca,gBAAAA,EAAAA,IAACC,GAAA,EAAa,KAAK,oBAAoB5B,KAAYF,CAAW,IAAI,KAAKiB,GAAK;AAAA,QAE7EN,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'\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  entityUpdatedAt?: 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  entityUpdatedAt,\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 && entityUpdatedAt && hasIdentity) {\n    if (src) {\n      url = src\n    } else if (projectName) {\n      url = isProject\n        ? `/api/projects/${projectName}/thumbnail`\n        : `/api/projects/${projectName}/${entityType}s/${entityId}/thumbnail`\n    }\n    if (url && !/[?&]updatedAt=/.test(url)) {\n      url += (url.includes('?') ? '&' : '?') + `updatedAt=${entityUpdatedAt}`\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","entityUpdatedAt","isLoading","shimmer","className","disabled","src","hoverIcon","showBorder","props","isProject","isWrongEntity","hasIdentity","url","error","setError","useState","loaded","setLoaded","useEffect","jsxs","Styled.Card","clsx","Icon","jsx","Styled.Image"],"mappings":";;;;;AAqBO,MAAMA,IAAY,CAAC;AAAA,EACxB,aAAAC,IAAc;AAAA,EACd,YAAAC,IAAa;AAAA,EACb,UAAAC,IAAW;AAAA,EACX,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,iBAAAC;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,KAAcI,KAAmBW,MAC/BN,IACFO,IAAMP,IACGV,MACTiB,IAAMH,IACF,iBAAiBd,CAAW,eAC5B,iBAAiBA,CAAW,IAAIC,CAAU,KAAKC,CAAQ,eAEzDe,KAAO,CAAC,iBAAiB,KAAKA,CAAG,MACnCA,MAAQA,EAAI,SAAS,GAAG,IAAI,MAAM,OAAO,aAAaZ,CAAe;AAIzE,QAAM,CAACa,GAAOC,CAAQ,IAAIC,EAAS,EAAK,GAClC,CAACC,GAAQC,CAAS,IAAIF,EAAS,EAAK;AAE1C,SAAAG,EAAU,MAAM;AACd,QAAIN,MAAQ,IAAI;AACd,MAAAK,EAAU,EAAI,GACdH,EAAS,EAAI;AACb;AAAA,IACF;AAEA,IAAAG,EAAU,EAAK,GACfH,EAAS,EAAK;AAAA,EAChB,GAAG,CAACF,CAAG,CAAC,GAGNO,gBAAAA,EAAAA;AAAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAWC,EAAKlB,GAAW,aAAa;AAAA,QACtC,SAASD,MAAYD,KAAa,CAACe;AAAA,QACnC,QAAAA;AAAA,QACA,OAAAH;AAAA,QACA,WAAW,CAAC,CAACL,EAAM;AAAA,QACnB,QAAQD;AAAA,MAAA,CACT;AAAA,MACA,GAAGC;AAAA,MAEF,UAAA;AAAA,SAAA,CAACP,KAAa,CAACe,MAAW,CAACZ,2BAC1BkB,GAAA,EAAK,OAAO,EAAE,OAAOvB,KAAS,OAAA,GAAa,MAAMD,KAAQ,SAAS,WAAU,aAAY;AAAA,QAE1FF,KAAcD,KAAe,CAACe,KAAiBC,KAC9CY,gBAAAA,EAAAA;AAAAA,UAACC;AAAAA,UAAA;AAAA,YACC,KAAK,oBAAoB3B,KAAYF,CAAW;AAAA,YAChD,KAAKiB;AAAA,YACL,QAAQ,MAAM;AACZ,cAAAK,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,QAGHR,KAAaiB,gBAAAA,EAAAA,IAACD,GAAA,EAAK,MAAMhB,GAAW,WAAU,aAAA,CAAa;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGlE;"}