@ynput/ayon-frontend-shared 0.2.17 → 0.2.18

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

@@ -0,0 +1,401 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../../../_virtual/jsx-runtime.cjs.js");
+const React = require("react");
+const styled = require("styled-components");
+const ayonReactComponents = require("@ynput/ayon-react-components");
+const productTypes = require("../../../util/productTypes.cjs.js");
+require("lodash");
+require("react-toastify");
+require("../../../util/pubsub.cjs.js");
+require("clsx");
+require("../../ThumbnailSimple/ThumbnailSimple.cjs.js");
+require("../../EmptyPlaceholder/EmptyPlaceholder.cjs.js");
+require("../../EmptyPlaceholder/EmptyPlaceholderFlex.styled.cjs.js");
+require("../../../api/base/client.cjs.js");
+require("../../../api/generated/graphql.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/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/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/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/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/entities/getEntity.cjs.js");
+require("../../../api/queries/entities/getEntityPanel.cjs.js");
+require("../../../api/queries/entities/updateEntity.cjs.js");
+require("../../../api/queries/entityLists/getLists.cjs.js");
+require("../../../api/queries/entityLists/updateLists.cjs.js");
+require("../../../api/queries/entityLists/getListsAttributes.cjs.js");
+require("../../../api/queries/entityLists/updateListsAttributes.cjs.js");
+require("../../../api/queries/folders/getFolders.cjs.js");
+require("../../../api/queries/overview/getOverview.cjs.js");
+require("../../../api/queries/overview/updateOverview.cjs.js");
+require("../../../api/queries/project/getProject.cjs.js");
+require("../../../api/queries/project/updateProject.cjs.js");
+require("../../../api/queries/review/getReview.cjs.js");
+require("../../../api/queries/review/updateReview.cjs.js");
+require("../../../api/queries/system/getSystem.cjs.js");
+require("../../../api/queries/userDashboard/getUserDashboard.cjs.js");
+require("../../../api/queries/users/getUsers.cjs.js");
+require("../../../api/queries/users/updateUsers.cjs.js");
+require("../../../api/queries/watchers/getWatchers.cjs.js");
+require("../../../api/queries/permissions/getPermissions.cjs.js");
+require("../../../api/queries/grouping/getGrouping.cjs.js");
+require("../../../api/queries/versions/updateVersions.cjs.js");
+require("../../../api/queries/products/createProduct.cjs.js");
+require("@dnd-kit/core");
+require("@dnd-kit/sortable");
+require("../../ReviewablesList/ReviewablesList.styled.cjs.js");
+require("../../../containers/ContextMenu/ContextMenuContext.cjs.js");
+;/* empty css                                                    */
+const ReviewablesUpload = require("../../ReviewablesList/ReviewablesUpload.cjs.js");
+require("../../../context/RemoteModulesContext.cjs.js");
+require("../../../context/DetailsPanelContext.cjs.js");
+require("../../../context/ThumbnailUploaderContext.cjs.js");
+require("../../../context/SettingsPanelContext.cjs.js");
+require("../../../context/pip/PiPProvider.cjs.js");
+require("react-dom");
+require("../../../context/pip/PiPWrapper.cjs.js");
+require("../../../context/AddonProjectContext.cjs.js");
+require("../../../context/AddonContext.cjs.js");
+require("../../../context/PowerpackContext.cjs.js");
+require("axios");
+require("../../ReviewableCard/ReviewableCard.cjs.js");
+require("../../ReviewableProgressCard/ReviewableProgressCard.styled.cjs.js");
+require("../../FileThumbnail/FileThumbnail.cjs.js");
+require("../../Thumbnail/Thumbnail.styled.cjs.js");
+require("../../Thumbnail/StackedThumbnails.cjs.js");
+require("../../../containers/Feed/context/FeedContext.cjs.js");
+require("../../../containers/Feed/components/Tooltips/UserTooltip/UserTooltip.styled.cjs.js");
+require("../../../containers/Feed/components/Tooltips/EntityTooltip/EntityTooltip.styled.cjs.js");
+require("../../../containers/Feed/components/FileUploadPreview/FileUploadPreview.styled.cjs.js");
+require("../../../containers/Feed/components/FileUploadPreview/Mimes/TextMime.cjs.js");
+require("react-markdown");
+require("remark-emoji");
+require("remark-gfm");
+require("remark-directive");
+require("remark-directive-rehype");
+require("../../../containers/Feed/components/CommentInput/CommentInput.cjs.js");
+require("../../../containers/Feed/components/ReactionContainer/Reactions.styled.cjs.js");
+require("../../../containers/Feed/components/FilesGrid/FilesGrid.styled.cjs.js");
+require("../../../containers/Feed/components/FileUploadCard/FileUploadCard.styled.cjs.js");
+require("../../../containers/Feed/components/CommentInput/quillToMarkdown.cjs.js");
+require("../../../containers/Feed/components/ActivityComment/ActivityComment.styled.cjs.js");
+require("../../../containers/Feed/components/ActivityCheckbox/ActivityCheckbox.styled.cjs.js");
+require("../../../containers/Feed/components/ActivityReference/ActivityReference.styled.cjs.js");
+require("react-router-dom");
+require("../../../containers/Feed/components/ActivityStatus/ActivityStatus.cjs.js");
+require("../../../containers/Feed/components/ActivityHeader/ActivityHeader.styled.cjs.js");
+require("../../../containers/Feed/components/ActivityDate.cjs.js");
+require("../../../containers/Feed/components/ActivityStatusChange/ActivityStatusChange.styled.cjs.js");
+require("../../../containers/Feed/components/ActivityAssigneeChange/ActivityAssigneeChange.styled.cjs.js");
+require("../../../containers/Feed/components/ActivityVersions/ActivityVersions.styled.cjs.js");
+require("../../../containers/Feed/components/ActivityGroup/ActivityGroup.styled.cjs.js");
+require("../../../containers/Feed/Feed.styled.cjs.js");
+require("date-fns");
+require("../../../containers/ProjectTreeTable/ProjectTreeTable.cjs.js");
+require("../../../containers/ProjectTreeTable/context/CellEditingContext.cjs.js");
+require("../../../containers/ProjectTreeTable/context/ClipboardContext.cjs.js");
+require("@tanstack/react-table");
+require("../../../containers/ProjectTreeTable/context/SelectionCellsContext.cjs.js");
+require("../../../containers/ProjectTreeTable/context/ColumnSettingsContext.cjs.js");
+require("../../../containers/ProjectTreeTable/context/ProjectTableContext.cjs.js");
+require("../../../containers/ProjectTreeTable/context/ProjectTableQueriesContext.cjs.js");
+require("../../../containers/ProjectTreeTable/context/SelectedRowsContext.cjs.js");
+require("../../../containers/ProjectTreeTable/context/ProjectDataContext.cjs.js");
+require("../../../containers/ProjectTreeTable/widgets/CollapsedWidget.cjs.js");
+require("../../../containers/ProjectTreeTable/widgets/DateWidget.cjs.js");
+require("../../../containers/ProjectTreeTable/widgets/EnumWidget.cjs.js");
+require("../../../containers/ProjectTreeTable/widgets/TextWidget.cjs.js");
+require("../../../containers/ProjectTreeTable/widgets/BooleanWidget.cjs.js");
+require("../../../containers/ProjectTreeTable/widgets/CellWidget.cjs.js");
+require("../../../containers/ProjectTreeTable/widgets/EntityNameWidget.cjs.js");
+require("../../../containers/ProjectTreeTable/widgets/GroupHeaderWidget.cjs.js");
+require("../../../containers/ProjectTreeTable/widgets/ThumbnailWidget.cjs.js");
+require("../../../containers/ProjectTreeTable/ProjectTreeTable.styled.cjs.js");
+require("../../../containers/ProjectTreeTable/components/SelectionCell.cjs.js");
+require("../../../containers/ProjectTreeTable/components/RowSelectionHeader.cjs.js");
+require("../../../containers/ProjectTreeTable/widgets/LoadMoreWidget.cjs.js");
+require("../../../../../_virtual/runtime.cjs.js");
+require("../../../../../_virtual/semver.cjs.js");
+require("react-redux");
+require("custom-protocol-check");
+require("../../../containers/ProjectTreeTable/components/GroupSettingsFallback.cjs.js");
+require("../../../containers/DetailsPanel/DetailsPanel.styled.cjs.js");
+require("../../../containers/DetailsPanel/FeedFilters/FeedFilters.styled.cjs.js");
+require("../../../containers/DetailsPanel/DetailsPanelHeader/DetailsPanelHeader.styled.cjs.js");
+require("../../../containers/DetailsPanel/DetailsPanelFiles/DetailsPanelFiles.cjs.js");
+require("../../../containers/DetailsPanel/DetailsPanelSlideOut/DetailsPanelSlideOut.styled.cjs.js");
+require("../../../containers/DetailsPanel/DetailsPanelFloating/DetailsPanelFloating.styled.cjs.js");
+require("../../../containers/Actions/Actions.styled.cjs.js");
+require("../../../containers/Actions/ActionsDropdown/ActionsDropdown.cjs.js");
+require("../../../containers/Actions/ActionIcon.cjs.js");
+require("../../EntityPanelUploader/EntityPanelUploader.styled.cjs.js");
+require("../../SimpleFormDialog/SimpleFormDialog.cjs.js");
+require("../../EntityPath/EntityPath.styled.cjs.js");
+require("../../EntityPath/SegmentProvider.cjs.js");
+require("../../DetailsPanelAttributes/DetailsPanelAttributesEditor.cjs.js");
+require("../../Watchers/Watchers.cjs.js");
+require("../../ProjectTableSettings/ProjectTableSettings.cjs.js");
+require("../../Powerpack/PowerpackButton.cjs.js");
+require("../../Powerpack/PricingLink.cjs.js");
+require("../../Powerpack/PowerpackDialog.styled.cjs.js");
+require("../../SettingsPanel/SettingsPanel.cjs.js");
+require("../../SettingsPanel/SettingsPanelItemTemplate.cjs.js");
+require("../../AttributeEditor/components/MinMaxField.cjs.js");
+require("../../EnumEditor/EnumEditor.styled.cjs.js");
+require("../../SearchFilter/filterDates.cjs.js");
+require("../../Badge/Badge.cjs.js");
+require("./UploadVersionDialog.cjs.js");
+const VersionUploadContext = require("../context/VersionUploadContext.cjs.js");
+const StyledForm = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-gap-large);
+  padding: var(--padding-m);
+  width: 100%;
+`;
+const StyledFormLayout = styled(ayonReactComponents.FormLayout)`
+  width: 100%;
+  margin: auto;
+
+  & > div {
+    align-items: start;
+  }
+
+  input {
+    width: 100%;
+  }
+`;
+const RecommendationNote = styled.div`
+  font-size: var(--font-size-xs);
+  color: var(--md-sys-color-outline);
+  margin-top: var(--base-gap-small);
+  line-height: 1.3;
+`;
+const InlineButton = styled.button`
+  background: none;
+  border: none;
+  color: var(--md-sys-color-primary);
+  text-decoration: underline;
+  cursor: pointer;
+  padding: 0;
+  font-size: inherit;
+  font-family: inherit;
+
+  &:hover {
+    color: var(--md-sys-color-primary-dark);
+  }
+`;
+const StyledUpload = styled.div`
+  position: relative;
+  min-height: 80px;
+`;
+const UploadVersionForm = ({
+  formData,
+  onChange,
+  onSubmit,
+  hidden = [],
+  projectName,
+  minVersion = 1,
+  versionId,
+  productId
+}) => {
+  var _a;
+  const previousProductTypeRef = React.useRef(formData.productType);
+  const dropdownRef = React.useRef(null);
+  const formRef = React.useRef(null);
+  const {
+    pendingFiles,
+    setPendingFiles,
+    onCloseVersionUpload,
+    extractAndSetVersionFromFiles,
+    dispatch
+  } = VersionUploadContext.useVersionUploadContext();
+  const productTypeOptions = Object.entries(productTypes).map(([key, value]) => ({
+    value: key,
+    label: value.name,
+    icon: value.icon
+  }));
+  React.useEffect(() => {
+    var _a2, _b;
+    const previousProductType = previousProductTypeRef.current;
+    const previousProductTypeName = ((_a2 = productTypes[previousProductType]) == null ? void 0 : _a2.name) || "";
+    const currentProductTypeName = ((_b = productTypes[formData.productType]) == null ? void 0 : _b.name) || "";
+    if (formData.productType !== previousProductType && previousProductTypeName) {
+      if (formData.name.startsWith(previousProductTypeName)) {
+        const suffix = formData.name.slice(previousProductTypeName.length);
+        const newName = currentProductTypeName + suffix;
+        onChange("name", newName);
+      }
+    }
+    previousProductTypeRef.current = formData.productType;
+  }, [formData.productType, formData.name, onChange]);
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const submitter = e.nativeEvent.submitter;
+    if (submitter && submitter.closest(".dropdown")) {
+      return;
+    }
+    onSubmit(formData);
+  };
+  const handleVersionChange = (e) => {
+    const value = parseInt(e.target.value, 10);
+    if (!isNaN(value)) {
+      onChange("version", value);
+    }
+  };
+  const handleNameChange = (e) => {
+    onChange("name", e.target.value);
+  };
+  const handleProductTypeChange = (value) => {
+    if (value.length > 0) {
+      onChange("productType", value[0]);
+    }
+  };
+  const handleApplyPrefix = () => {
+    var _a2;
+    const currentProductTypeName = ((_a2 = productTypes[formData.productType]) == null ? void 0 : _a2.name) || "";
+    const currentName = formData.name || "";
+    const capitalizedName = currentName.charAt(0).toUpperCase() + currentName.slice(1);
+    const newName = currentProductTypeName + capitalizedName;
+    onChange("name", newName);
+  };
+  const shouldShowRecommendation = () => {
+    var _a2;
+    const currentProductTypeName = ((_a2 = productTypes[formData.productType]) == null ? void 0 : _a2.name) || "";
+    return formData.name && !formData.name.startsWith(currentProductTypeName);
+  };
+  const isFormSubmitted = Boolean(versionId);
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      onSubmit(formData);
+      return;
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+    StyledForm,
+    {
+      id: "upload-version-form",
+      ref: formRef,
+      onSubmit: handleSubmit,
+      noValidate: true,
+      onKeyDown: handleKeyDown,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(StyledFormLayout, { children: [
+          !hidden.includes("productType") && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ayonReactComponents.FormRow, { label: "Product Type", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+            ayonReactComponents.Dropdown,
+            {
+              ref: dropdownRef,
+              options: productTypeOptions,
+              value: [formData.productType],
+              onChange: handleProductTypeChange,
+              widthExpand: true,
+              multiSelect: false,
+              "aria-label": "Product Type",
+              search: true,
+              disabled: isFormSubmitted
+            }
+          ) }),
+          !hidden.includes("name") && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ayonReactComponents.FormRow, { label: "Product Name", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+              ayonReactComponents.InputText,
+              {
+                value: formData.name,
+                onChange: handleNameChange,
+                placeholder: "Enter product name",
+                minLength: 1,
+                autoFocus: true,
+                "aria-label": "Product Name",
+                "aria-describedby": shouldShowRecommendation() ? "name-recommendation" : void 0,
+                disabled: isFormSubmitted
+              }
+            ),
+            shouldShowRecommendation() && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(RecommendationNote, { id: "name-recommendation", children: [
+              'We recommend prefixing with "',
+              (_a = productTypes[formData.productType]) == null ? void 0 : _a.name,
+              '".',
+              " ",
+              /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(InlineButton, { type: "button", onClick: handleApplyPrefix, children: "Apply prefix" })
+            ] })
+          ] }) }),
+          !hidden.includes("version") && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ayonReactComponents.FormRow, { label: "Version", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+            ayonReactComponents.InputNumber,
+            {
+              value: formData.version,
+              onChange: handleVersionChange,
+              min: minVersion,
+              step: 1,
+              "aria-label": "Version Number",
+              autoFocus: hidden.includes("name"),
+              disabled: isFormSubmitted
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ayonReactComponents.FormRow, { label: "Reviewable files" }),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(StyledUpload, { children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+          ReviewablesUpload.ReviewableUpload,
+          {
+            projectName,
+            versionId,
+            productId,
+            dispatch,
+            pendingFiles,
+            setPendingFiles,
+            onUpload: onCloseVersionUpload,
+            onFilesAdded: extractAndSetVersionFromFiles,
+            pt: {
+              upload: {
+                style: { minHeight: 80 }
+              },
+              dropzone: {
+                style: { inset: 0 }
+              }
+            }
+          }
+        ) })
+      ]
+    }
+  );
+};
+exports.UploadVersionForm = UploadVersionForm;
+//# sourceMappingURL=UploadVersionForm.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UploadVersionForm.cjs.js","sources":["../../../../../../src/components/VersionUploader/components/UploadVersionForm.tsx"],"sourcesContent":["import { FC, FormEvent, useEffect, useRef } from 'react'\nimport styled from 'styled-components'\nimport { FormLayout, FormRow, InputText, InputNumber, Dropdown } from '@ynput/ayon-react-components'\nimport { productTypes } from '@shared/util'\nimport type { DropdownRef } from '@ynput/ayon-react-components'\nimport { ReviewableUpload } from '@shared/components'\nimport { useVersionUploadContext } from '../context/VersionUploadContext'\n\nconst StyledForm = styled.form`\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-large);\n  padding: var(--padding-m);\n  width: 100%;\n`\n\nconst StyledFormLayout = styled(FormLayout)`\n  width: 100%;\n  margin: auto;\n\n  & > div {\n    align-items: start;\n  }\n\n  input {\n    width: 100%;\n  }\n`\n\nconst RecommendationNote = styled.div`\n  font-size: var(--font-size-xs);\n  color: var(--md-sys-color-outline);\n  margin-top: var(--base-gap-small);\n  line-height: 1.3;\n`\n\nconst InlineButton = styled.button`\n  background: none;\n  border: none;\n  color: var(--md-sys-color-primary);\n  text-decoration: underline;\n  cursor: pointer;\n  padding: 0;\n  font-size: inherit;\n  font-family: inherit;\n\n  &:hover {\n    color: var(--md-sys-color-primary-dark);\n  }\n`\n\nconst StyledUpload = styled.div`\n  position: relative;\n  min-height: 80px;\n`\n\ntype FormData = {\n  version: number\n  name: string\n  productType: string\n}\n\ninterface UploadVersionFormProps {\n  formData: FormData\n  onChange: (key: keyof FormData, value: string | number) => void\n  onSubmit: (formData: FormData) => void\n  hidden?: (keyof FormData)[]\n  projectName: string\n  minVersion?: number\n  versionId?: string | null\n  productId?: string | null\n}\n\nexport const UploadVersionForm: FC<UploadVersionFormProps> = ({\n  formData,\n  onChange,\n  onSubmit,\n  hidden = [],\n  projectName,\n  minVersion = 1,\n  versionId,\n  productId,\n}) => {\n  const previousProductTypeRef = useRef<string>(formData.productType)\n  const dropdownRef = useRef<DropdownRef>(null)\n  const formRef = useRef<HTMLFormElement>(null)\n  const {\n    pendingFiles,\n    setPendingFiles,\n    onCloseVersionUpload,\n    extractAndSetVersionFromFiles,\n    dispatch,\n  } = useVersionUploadContext()\n\n  const productTypeOptions = Object.entries(productTypes).map(([key, value]) => ({\n    value: key,\n    label: value.name,\n    icon: value.icon,\n  }))\n\n  useEffect(() => {\n    // Check if the current name starts with the previous product type name\n    const previousProductType = previousProductTypeRef.current\n    const previousProductTypeName = productTypes[previousProductType]?.name || ''\n    const currentProductTypeName = productTypes[formData.productType]?.name || ''\n\n    // Only sync if the product type actually changed\n    if (formData.productType !== previousProductType && previousProductTypeName) {\n      // Check if the current name starts with the previous product type name\n      if (formData.name.startsWith(previousProductTypeName)) {\n        // Extract the suffix after the previous product type name\n        const suffix = formData.name.slice(previousProductTypeName.length)\n        // Create the new name with the current product type + suffix\n        const newName = currentProductTypeName + suffix\n        onChange('name', newName)\n      }\n    }\n\n    // Update the ref to the current product type\n    previousProductTypeRef.current = formData.productType\n  }, [formData.productType, formData.name, onChange])\n\n  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault()\n    // @ts-expect-error - submitter is not defined in the type\n    const submitter = e.nativeEvent.submitter as HTMLButtonElement | null\n    // if the submitter is a button, check it's parent does not have the dropdown class\n    if (submitter && submitter.closest('.dropdown')) {\n      // if the submitter is a button inside a dropdown, do not submit the form\n      return\n    }\n\n    onSubmit(formData)\n  }\n\n  const handleVersionChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const value = parseInt(e.target.value, 10)\n    if (!isNaN(value)) {\n      onChange('version', value)\n    }\n  }\n\n  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    onChange('name', e.target.value)\n  }\n\n  const handleProductTypeChange = (value: string[]) => {\n    if (value.length > 0) {\n      onChange('productType', value[0])\n      //   focus the name input after changing product type\n    }\n  }\n\n  const handleApplyPrefix = () => {\n    const currentProductTypeName = productTypes[formData.productType]?.name || ''\n    const currentName = formData.name || ''\n\n    // Capitalize the first letter of the existing name for camelCase\n    const capitalizedName = currentName.charAt(0).toUpperCase() + currentName.slice(1)\n    const newName = currentProductTypeName + capitalizedName\n    onChange('name', newName)\n  }\n\n  const shouldShowRecommendation = () => {\n    const currentProductTypeName = productTypes[formData.productType]?.name || ''\n    return formData.name && !formData.name.startsWith(currentProductTypeName)\n  }\n\n  // Disable form fields if version has been created\n  const isFormSubmitted = Boolean(versionId)\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLFormElement>) => {\n    // Submit form on Cmd/Ctrl + Enter\n    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {\n      e.preventDefault()\n      onSubmit(formData)\n      return\n    }\n  }\n\n  return (\n    <StyledForm\n      id=\"upload-version-form\"\n      ref={formRef}\n      onSubmit={handleSubmit}\n      noValidate\n      onKeyDown={handleKeyDown}\n    >\n      <StyledFormLayout>\n        {!hidden.includes('productType') && (\n          <FormRow label=\"Product Type\">\n            <Dropdown\n              ref={dropdownRef}\n              options={productTypeOptions}\n              value={[formData.productType]}\n              onChange={handleProductTypeChange}\n              widthExpand\n              multiSelect={false}\n              aria-label=\"Product Type\"\n              search\n              disabled={isFormSubmitted}\n            />\n          </FormRow>\n        )}\n\n        {!hidden.includes('name') && (\n          <FormRow label=\"Product Name\">\n            <div>\n              <InputText\n                value={formData.name}\n                onChange={handleNameChange}\n                placeholder=\"Enter product name\"\n                minLength={1}\n                autoFocus\n                aria-label=\"Product Name\"\n                aria-describedby={shouldShowRecommendation() ? 'name-recommendation' : undefined}\n                disabled={isFormSubmitted}\n              />\n              {shouldShowRecommendation() && (\n                <RecommendationNote id=\"name-recommendation\">\n                  We recommend prefixing with \"{productTypes[formData.productType]?.name}\".{' '}\n                  <InlineButton type=\"button\" onClick={handleApplyPrefix}>\n                    Apply prefix\n                  </InlineButton>\n                </RecommendationNote>\n              )}\n            </div>\n          </FormRow>\n        )}\n\n        {!hidden.includes('version') && (\n          <FormRow label=\"Version\">\n            <InputNumber\n              value={formData.version}\n              onChange={handleVersionChange}\n              min={minVersion}\n              step={1}\n              aria-label=\"Version Number\"\n              autoFocus={hidden.includes('name')}\n              disabled={isFormSubmitted}\n            />\n          </FormRow>\n        )}\n      </StyledFormLayout>\n\n      <FormRow label=\"Reviewable files\" />\n      <StyledUpload>\n        <ReviewableUpload\n          projectName={projectName}\n          versionId={versionId}\n          productId={productId}\n          dispatch={dispatch}\n          pendingFiles={pendingFiles}\n          setPendingFiles={setPendingFiles}\n          onUpload={onCloseVersionUpload}\n          onFilesAdded={extractAndSetVersionFromFiles}\n          pt={{\n            upload: {\n              style: { minHeight: 80 },\n            },\n            dropzone: {\n              style: { inset: 0 },\n            },\n          }}\n        />\n      </StyledUpload>\n    </StyledForm>\n  )\n}\n"],"names":["FormLayout","useRef","useVersionUploadContext","useEffect","_a","jsxs","jsx","FormRow","Dropdown","InputText","InputNumber","ReviewableUpload"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ1B,MAAM,mBAAmB,OAAOA,8BAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa1C,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOlC,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAe5B,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAsBrB,MAAM,oBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS,CAAC;AAAA,EACV;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AACF,MAAM;;AACE,QAAA,yBAAyBC,MAAAA,OAAe,SAAS,WAAW;AAC5D,QAAA,cAAcA,aAAoB,IAAI;AACtC,QAAA,UAAUA,aAAwB,IAAI;AACtC,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACEC,6CAAwB;AAEtB,QAAA,qBAAqB,OAAO,QAAQ,YAAY,EAAE,IAAI,CAAC,CAAC,KAAK,KAAK,OAAO;AAAA,IAC7E,OAAO;AAAA,IACP,OAAO,MAAM;AAAA,IACb,MAAM,MAAM;AAAA,EAAA,EACZ;AAEFC,QAAAA,UAAU,MAAM;;AAEd,UAAM,sBAAsB,uBAAuB;AACnD,UAAM,4BAA0BC,MAAA,aAAa,mBAAmB,MAAhC,gBAAAA,IAAmC,SAAQ;AAC3E,UAAM,2BAAyB,kBAAa,SAAS,WAAW,MAAjC,mBAAoC,SAAQ;AAGvE,QAAA,SAAS,gBAAgB,uBAAuB,yBAAyB;AAE3E,UAAI,SAAS,KAAK,WAAW,uBAAuB,GAAG;AAErD,cAAM,SAAS,SAAS,KAAK,MAAM,wBAAwB,MAAM;AAEjE,cAAM,UAAU,yBAAyB;AACzC,iBAAS,QAAQ,OAAO;AAAA,MAAA;AAAA,IAC1B;AAIF,2BAAuB,UAAU,SAAS;AAAA,EAAA,GACzC,CAAC,SAAS,aAAa,SAAS,MAAM,QAAQ,CAAC;AAE5C,QAAA,eAAe,CAAC,MAAkC;AACtD,MAAE,eAAe;AAEX,UAAA,YAAY,EAAE,YAAY;AAEhC,QAAI,aAAa,UAAU,QAAQ,WAAW,GAAG;AAE/C;AAAA,IAAA;AAGF,aAAS,QAAQ;AAAA,EACnB;AAEM,QAAA,sBAAsB,CAAC,MAA2C;AACtE,UAAM,QAAQ,SAAS,EAAE,OAAO,OAAO,EAAE;AACrC,QAAA,CAAC,MAAM,KAAK,GAAG;AACjB,eAAS,WAAW,KAAK;AAAA,IAAA;AAAA,EAE7B;AAEM,QAAA,mBAAmB,CAAC,MAA2C;AAC1D,aAAA,QAAQ,EAAE,OAAO,KAAK;AAAA,EACjC;AAEM,QAAA,0BAA0B,CAAC,UAAoB;AAC/C,QAAA,MAAM,SAAS,GAAG;AACX,eAAA,eAAe,MAAM,CAAC,CAAC;AAAA,IAAA;AAAA,EAGpC;AAEA,QAAM,oBAAoB,MAAM;;AAC9B,UAAM,2BAAyBA,MAAA,aAAa,SAAS,WAAW,MAAjC,gBAAAA,IAAoC,SAAQ;AACrE,UAAA,cAAc,SAAS,QAAQ;AAG/B,UAAA,kBAAkB,YAAY,OAAO,CAAC,EAAE,gBAAgB,YAAY,MAAM,CAAC;AACjF,UAAM,UAAU,yBAAyB;AACzC,aAAS,QAAQ,OAAO;AAAA,EAC1B;AAEA,QAAM,2BAA2B,MAAM;;AACrC,UAAM,2BAAyBA,MAAA,aAAa,SAAS,WAAW,MAAjC,gBAAAA,IAAoC,SAAQ;AAC3E,WAAO,SAAS,QAAQ,CAAC,SAAS,KAAK,WAAW,sBAAsB;AAAA,EAC1E;AAGM,QAAA,kBAAkB,QAAQ,SAAS;AAEnC,QAAA,gBAAgB,CAAC,MAA4C;AAEjE,QAAI,EAAE,QAAQ,YAAY,EAAE,WAAW,EAAE,UAAU;AACjD,QAAE,eAAe;AACjB,eAAS,QAAQ;AACjB;AAAA,IAAA;AAAA,EAEJ;AAGE,SAAAC,2BAAA,kBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,KAAK;AAAA,MACL,UAAU;AAAA,MACV,YAAU;AAAA,MACV,WAAW;AAAA,MAEX,UAAA;AAAA,QAAAA,kDAAC,kBACE,EAAA,UAAA;AAAA,UAAA,CAAC,OAAO,SAAS,aAAa,KAC5BC,2BAAAA,kBAAAA,IAAAC,oBAAA,SAAA,EAAQ,OAAM,gBACb,UAAAD,2BAAA,kBAAA;AAAA,YAACE,oBAAA;AAAA,YAAA;AAAA,cACC,KAAK;AAAA,cACL,SAAS;AAAA,cACT,OAAO,CAAC,SAAS,WAAW;AAAA,cAC5B,UAAU;AAAA,cACV,aAAW;AAAA,cACX,aAAa;AAAA,cACb,cAAW;AAAA,cACX,QAAM;AAAA,cACN,UAAU;AAAA,YAAA;AAAA,UAAA,GAEd;AAAA,UAGD,CAAC,OAAO,SAAS,MAAM,sDACrBD,oBAAQ,SAAA,EAAA,OAAM,gBACb,UAAAF,2BAAA,kBAAA,KAAC,OACC,EAAA,UAAA;AAAA,YAAAC,2BAAA,kBAAA;AAAA,cAACG,oBAAA;AAAA,cAAA;AAAA,gBACC,OAAO,SAAS;AAAA,gBAChB,UAAU;AAAA,gBACV,aAAY;AAAA,gBACZ,WAAW;AAAA,gBACX,WAAS;AAAA,gBACT,cAAW;AAAA,gBACX,oBAAkB,6BAA6B,wBAAwB;AAAA,gBACvE,UAAU;AAAA,cAAA;AAAA,YACZ;AAAA,YACC,yBAAyB,KACvBJ,2BAAAA,kBAAAA,KAAA,oBAAA,EAAmB,IAAG,uBAAsB,UAAA;AAAA,cAAA;AAAA,eACb,kBAAa,SAAS,WAAW,MAAjC,mBAAoC;AAAA,cAAK;AAAA,cAAG;AAAA,+DACzE,cAAa,EAAA,MAAK,UAAS,SAAS,mBAAmB,UAExD,eAAA,CAAA;AAAA,YAAA,EACF,CAAA;AAAA,UAAA,EAAA,CAEJ,EACF,CAAA;AAAA,UAGD,CAAC,OAAO,SAAS,SAAS,KACxBC,2BAAAA,kBAAAA,IAAAC,oBAAA,SAAA,EAAQ,OAAM,WACb,UAAAD,2BAAA,kBAAA;AAAA,YAACI,oBAAA;AAAA,YAAA;AAAA,cACC,OAAO,SAAS;AAAA,cAChB,UAAU;AAAA,cACV,KAAK;AAAA,cACL,MAAM;AAAA,cACN,cAAW;AAAA,cACX,WAAW,OAAO,SAAS,MAAM;AAAA,cACjC,UAAU;AAAA,YAAA;AAAA,UAAA,EAEd,CAAA;AAAA,QAAA,GAEJ;AAAA,QAEAJ,2BAAAA,kBAAAA,IAACC,oBAAQ,SAAA,EAAA,OAAM,mBAAmB,CAAA;AAAA,yDACjC,cACC,EAAA,UAAAD,2BAAA,kBAAA;AAAA,UAACK,kBAAA;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,UAAU;AAAA,YACV,cAAc;AAAA,YACd,IAAI;AAAA,cACF,QAAQ;AAAA,gBACN,OAAO,EAAE,WAAW,GAAG;AAAA,cACzB;AAAA,cACA,UAAU;AAAA,gBACR,OAAO,EAAE,OAAO,EAAE;AAAA,cAAA;AAAA,YACpB;AAAA,UACF;AAAA,QAAA,EAEJ,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;;"}