@ynput/ayon-frontend-shared 0.2.17 → 0.2.19

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

@@ -0,0 +1,402 @@
+import { j as jsxRuntimeExports } from "../../../../../_virtual/jsx-runtime.es.js";
+import { useRef, useEffect } from "react";
+import styled from "styled-components";
+import { FormLayout, FormRow, Dropdown, InputText, InputNumber } from "@ynput/ayon-react-components";
+import productTypes from "../../../util/productTypes.es.js";
+import "lodash";
+import "react-toastify";
+import "../../../util/pubsub.es.js";
+import "clsx";
+import "../../ThumbnailSimple/ThumbnailSimple.es.js";
+import "../../EmptyPlaceholder/EmptyPlaceholder.es.js";
+import "../../EmptyPlaceholder/EmptyPlaceholderFlex.styled.es.js";
+import "../../../api/base/client.es.js";
+import "../../../api/generated/graphql.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/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/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/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/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/entities/getEntity.es.js";
+import "../../../api/queries/entities/getEntityPanel.es.js";
+import "../../../api/queries/entities/updateEntity.es.js";
+import "../../../api/queries/entityLists/getLists.es.js";
+import "../../../api/queries/entityLists/updateLists.es.js";
+import "../../../api/queries/entityLists/getListsAttributes.es.js";
+import "../../../api/queries/entityLists/updateListsAttributes.es.js";
+import "../../../api/queries/folders/getFolders.es.js";
+import "../../../api/queries/overview/getOverview.es.js";
+import "../../../api/queries/overview/updateOverview.es.js";
+import "../../../api/queries/project/getProject.es.js";
+import "../../../api/queries/project/updateProject.es.js";
+import "../../../api/queries/review/getReview.es.js";
+import "../../../api/queries/review/updateReview.es.js";
+import "../../../api/queries/system/getSystem.es.js";
+import "../../../api/queries/userDashboard/getUserDashboard.es.js";
+import "../../../api/queries/users/getUsers.es.js";
+import "../../../api/queries/users/updateUsers.es.js";
+import "../../../api/queries/watchers/getWatchers.es.js";
+import "../../../api/queries/permissions/getPermissions.es.js";
+import "../../../api/queries/grouping/getGrouping.es.js";
+import "../../../api/queries/versions/updateVersions.es.js";
+import "../../../api/queries/products/createProduct.es.js";
+import "@dnd-kit/core";
+import "@dnd-kit/sortable";
+import "../../ReviewablesList/ReviewablesList.styled.es.js";
+import "../../../containers/ContextMenu/ContextMenuContext.es.js";
+/* empty css                                                  */
+import { ReviewableUpload } from "../../ReviewablesList/ReviewablesUpload.es.js";
+import "../../../context/RemoteModulesContext.es.js";
+import "../../../context/DetailsPanelContext.es.js";
+import "../../../context/ThumbnailUploaderContext.es.js";
+import "../../../context/SettingsPanelContext.es.js";
+import "../../../context/pip/PiPProvider.es.js";
+import "react-dom";
+import "../../../context/pip/PiPWrapper.es.js";
+import "../../../context/AddonProjectContext.es.js";
+import "../../../context/AddonContext.es.js";
+import "../../../context/PowerpackContext.es.js";
+import "axios";
+import "../../ReviewableCard/ReviewableCard.es.js";
+import "../../ReviewableProgressCard/ReviewableProgressCard.styled.es.js";
+import "../../FileThumbnail/FileThumbnail.es.js";
+import "../../Thumbnail/Thumbnail.styled.es.js";
+import "../../Thumbnail/StackedThumbnails.es.js";
+import "../../../containers/Feed/context/FeedContext.es.js";
+import "../../../containers/Feed/components/Tooltips/UserTooltip/UserTooltip.styled.es.js";
+import "../../../containers/Feed/components/Tooltips/EntityTooltip/EntityTooltip.styled.es.js";
+import "../../../containers/Feed/components/FileUploadPreview/FileUploadPreview.styled.es.js";
+import "../../../containers/Feed/components/FileUploadPreview/Mimes/TextMime.es.js";
+import "react-markdown";
+import "remark-emoji";
+import "remark-gfm";
+import "remark-directive";
+import "remark-directive-rehype";
+import "../../../containers/Feed/components/CommentInput/CommentInput.es.js";
+import "../../../containers/Feed/components/ReactionContainer/Reactions.styled.es.js";
+import "../../../containers/Feed/components/FilesGrid/FilesGrid.styled.es.js";
+import "../../../containers/Feed/components/FileUploadCard/FileUploadCard.styled.es.js";
+import "../../../containers/Feed/components/CommentInput/quillToMarkdown.es.js";
+import "../../../containers/Feed/components/ActivityComment/ActivityComment.styled.es.js";
+import "../../../containers/Feed/components/ActivityCheckbox/ActivityCheckbox.styled.es.js";
+import "../../../containers/Feed/components/ActivityReference/ActivityReference.styled.es.js";
+import "react-router-dom";
+import "../../../containers/Feed/components/ActivityStatus/ActivityStatus.es.js";
+import "../../../containers/Feed/components/ActivityHeader/ActivityHeader.styled.es.js";
+import "../../../containers/Feed/components/ActivityDate.es.js";
+import "../../../containers/Feed/components/ActivityStatusChange/ActivityStatusChange.styled.es.js";
+import "../../../containers/Feed/components/ActivityAssigneeChange/ActivityAssigneeChange.styled.es.js";
+import "../../../containers/Feed/components/ActivityVersions/ActivityVersions.styled.es.js";
+import "../../../containers/Feed/components/ActivityGroup/ActivityGroup.styled.es.js";
+import "../../../containers/Feed/Feed.styled.es.js";
+import "date-fns";
+import "../../../containers/ProjectTreeTable/ProjectTreeTable.es.js";
+import "../../../containers/ProjectTreeTable/context/CellEditingContext.es.js";
+import "../../../containers/ProjectTreeTable/context/ClipboardContext.es.js";
+import "@tanstack/react-table";
+import "../../../containers/ProjectTreeTable/context/SelectionCellsContext.es.js";
+import "../../../containers/ProjectTreeTable/context/ColumnSettingsContext.es.js";
+import "../../../containers/ProjectTreeTable/context/ProjectTableContext.es.js";
+import "../../../containers/ProjectTreeTable/context/ProjectTableQueriesContext.es.js";
+import "../../../containers/ProjectTreeTable/context/SelectedRowsContext.es.js";
+import "../../../../../_virtual/runtime.es.js";
+import "../../../../../_virtual/semver.es.js";
+import "react-redux";
+import "custom-protocol-check";
+import "../../../containers/ProjectTreeTable/components/GroupSettingsFallback.es.js";
+import "../../../containers/ProjectTreeTable/context/ProjectDataContext.es.js";
+import "../../../containers/ProjectTreeTable/widgets/CollapsedWidget.es.js";
+import "../../../containers/ProjectTreeTable/widgets/DateWidget.es.js";
+import "../../../containers/ProjectTreeTable/widgets/EnumWidget.es.js";
+import "../../../containers/ProjectTreeTable/widgets/TextWidget.es.js";
+import "../../../containers/ProjectTreeTable/widgets/BooleanWidget.es.js";
+import "../../../containers/ProjectTreeTable/widgets/CellWidget.es.js";
+import "../../../containers/ProjectTreeTable/widgets/EntityNameWidget.es.js";
+import "../../../containers/ProjectTreeTable/widgets/GroupHeaderWidget.es.js";
+import "../../../containers/ProjectTreeTable/widgets/ThumbnailWidget.es.js";
+import "../../../containers/ProjectTreeTable/ProjectTreeTable.styled.es.js";
+import "../../../containers/ProjectTreeTable/components/SelectionCell.es.js";
+import "../../../containers/ProjectTreeTable/components/RowSelectionHeader.es.js";
+import "../../../containers/ProjectTreeTable/widgets/LoadMoreWidget.es.js";
+import "../../../containers/DetailsPanel/DetailsPanel.styled.es.js";
+import "../../../containers/DetailsPanel/FeedFilters/FeedFilters.styled.es.js";
+import "../../../containers/DetailsPanel/DetailsPanelHeader/DetailsPanelHeader.styled.es.js";
+import "../../PlayableIcon/PlayableIcon.es.js";
+import "../../../containers/DetailsPanel/DetailsPanelFiles/DetailsPanelFiles.es.js";
+import "../../../containers/DetailsPanel/DetailsPanelSlideOut/DetailsPanelSlideOut.styled.es.js";
+import "../../../containers/DetailsPanel/DetailsPanelFloating/DetailsPanelFloating.styled.es.js";
+import "../../../containers/Actions/Actions.styled.es.js";
+import "../../../containers/Actions/ActionsDropdown/ActionsDropdown.es.js";
+import "../../../containers/Actions/ActionIcon.es.js";
+import "../../EntityPanelUploader/EntityPanelUploader.styled.es.js";
+import "../../SimpleFormDialog/SimpleFormDialog.es.js";
+import "../../EntityPath/EntityPath.styled.es.js";
+import "../../EntityPath/SegmentProvider.es.js";
+import "../../DetailsPanelAttributes/DetailsPanelAttributesEditor.es.js";
+import "../../Watchers/Watchers.es.js";
+import "../../ProjectTableSettings/ProjectTableSettings.es.js";
+import "../../Powerpack/PowerpackButton.es.js";
+import "../../Powerpack/PricingLink.es.js";
+import "../../Powerpack/PowerpackDialog.styled.es.js";
+import "../../SettingsPanel/SettingsPanel.es.js";
+import "../../SettingsPanel/SettingsPanelItemTemplate.es.js";
+import "../../AttributeEditor/components/MinMaxField.es.js";
+import "../../EnumEditor/EnumEditor.styled.es.js";
+import "../../SearchFilter/filterDates.es.js";
+import "../../Badge/Badge.es.js";
+import "./UploadVersionDialog.es.js";
+import { useVersionUploadContext } from "../context/VersionUploadContext.es.js";
+const StyledForm = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-gap-large);
+  padding: var(--padding-m);
+  width: 100%;
+`;
+const StyledFormLayout = styled(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 = useRef(formData.productType);
+  const dropdownRef = useRef(null);
+  const formRef = useRef(null);
+  const {
+    pendingFiles,
+    setPendingFiles,
+    onCloseVersionUpload,
+    extractAndSetVersionFromFiles,
+    dispatch
+  } = useVersionUploadContext();
+  const productTypeOptions = Object.entries(productTypes).map(([key, value]) => ({
+    value: key,
+    label: value.name,
+    icon: value.icon
+  }));
+  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__ */ jsxRuntimeExports.jsxs(
+    StyledForm,
+    {
+      id: "upload-version-form",
+      ref: formRef,
+      onSubmit: handleSubmit,
+      noValidate: true,
+      onKeyDown: handleKeyDown,
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(StyledFormLayout, { children: [
+          !hidden.includes("productType") && /* @__PURE__ */ jsxRuntimeExports.jsx(FormRow, { label: "Product Type", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            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__ */ jsxRuntimeExports.jsx(FormRow, { label: "Product Name", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              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__ */ jsxRuntimeExports.jsxs(RecommendationNote, { id: "name-recommendation", children: [
+              'We recommend prefixing with "',
+              (_a = productTypes[formData.productType]) == null ? void 0 : _a.name,
+              '".',
+              " ",
+              /* @__PURE__ */ jsxRuntimeExports.jsx(InlineButton, { type: "button", onClick: handleApplyPrefix, children: "Apply prefix" })
+            ] })
+          ] }) }),
+          !hidden.includes("version") && /* @__PURE__ */ jsxRuntimeExports.jsx(FormRow, { label: "Version", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            InputNumber,
+            {
+              value: formData.version,
+              onChange: handleVersionChange,
+              min: minVersion,
+              step: 1,
+              "aria-label": "Version Number",
+              autoFocus: hidden.includes("name"),
+              disabled: isFormSubmitted
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(FormRow, { label: "Reviewable files" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(StyledUpload, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ReviewableUpload,
+          {
+            projectName,
+            versionId,
+            productId,
+            dispatch,
+            pendingFiles,
+            setPendingFiles,
+            onUpload: onCloseVersionUpload,
+            onFilesAdded: extractAndSetVersionFromFiles,
+            pt: {
+              upload: {
+                style: { minHeight: 80 }
+              },
+              dropzone: {
+                style: { inset: 0 }
+              }
+            }
+          }
+        ) })
+      ]
+    }
+  );
+};
+export {
+  UploadVersionForm
+};
+//# sourceMappingURL=UploadVersionForm.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UploadVersionForm.es.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":["_a","jsxs","jsx"],"mappings":"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"}