@ynput/ayon-frontend-shared 0.2.15 → 0.2.16

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

@@ -5,6 +5,183 @@ const styled = require("styled-components");
 const React = require("react");
 const ReactMarkdown = require("react-markdown");
 const ayonReactComponents = require("@ynput/ayon-react-components");
+require("clsx");
+require("../ThumbnailSimple/ThumbnailSimple.cjs.js");
+require("../EmptyPlaceholder/EmptyPlaceholder.cjs.js");
+require("../EmptyPlaceholder/EmptyPlaceholderFlex.styled.cjs.js");
+require("react-toastify");
+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("@dnd-kit/core");
+require("@dnd-kit/sortable");
+require("../ReviewablesList/ReviewablesList.styled.cjs.js");
+require("../../containers/ContextMenu/ContextMenuContext.cjs.js");
+;/* empty css                                                 */
+require("lodash");
+require("../../util/pubsub.cjs.js");
+require("axios");
+require("../ReviewablesList/ReviewablesUpload.styled.cjs.js");
+require("../../context/RemoteModulesContext.cjs.js");
+require("../../context/DetailsPanelContext.cjs.js");
+require("../../context/ThumbnailUploaderContext.cjs.js");
+require("../../context/SettingsPanelContext.cjs.js");
+require("../../context/pip/PiPProvider.cjs.js");
+require("react-dom");
+require("../../context/pip/PiPWrapper.cjs.js");
+require("../../context/AddonProjectContext.cjs.js");
+require("../../context/AddonContext.cjs.js");
+require("../../context/PowerpackContext.cjs.js");
+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("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/SelectionCellsContext.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/ColumnSettingsContext.cjs.js");
+require("../../containers/ProjectTreeTable/context/CellEditingContext.cjs.js");
+require("../../containers/ProjectTreeTable/context/ClipboardContext.cjs.js");
+require("../../containers/ProjectTreeTable/context/ProjectTableSelectionContext.cjs.js");
+require("../../containers/ProjectTreeTable/context/ProjectDataContext.cjs.js");
+require("../../containers/ProjectTreeTable/context/ProjectTableModulesContext.cjs.js");
+require("@tanstack/react-table");
+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("../../containers/DetailsPanel/DetailsPanel.styled.cjs.js");
+require("../../../../_virtual/runtime.cjs.js");
+require("../../../../_virtual/semver.cjs.js");
+require("react-redux");
+require("custom-protocol-check");
+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("../EntityThumbnailUploader/EntityThumbnailUploader.styled.cjs.js");
+require("../ThumbnailUploader/ThumbnailUploader.styled.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");
+const Badge = require("../Badge/Badge.cjs.js");
 const getDefaults = (fields, values) => {
   const defaults = {};
   fields.forEach((field) => {
@@ -54,6 +231,22 @@ const FormLabel = ({ field }) => {
   const text = typeof field.value === "string" ? field.value : "Invalid label value";
   return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(LabelContainer, { className: field.highlight || "normal", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ReactMarkdown, { children: text }) });
 };
+const DropdownItemTemplate = (option) => {
+  const endContent = /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { style: { flex: 1 } }),
+    option.badges && option.badges.map((badge, index) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Badge.Badge, { children: badge }, index))
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+    ayonReactComponents.DefaultItemTemplate,
+    {
+      option,
+      dataKey: "value",
+      labelKey: "label",
+      value: [option.value],
+      endContent
+    }
+  );
+};
 const FormField = ({ field, value, onChange }) => {
   if (field.type === "text") {
     const parsedValue = typeof value === "string" ? value : "";
@@ -108,7 +301,8 @@ const FormField = ({ field, value, onChange }) => {
         value: parsedValue ? [parsedValue] : [],
         onSelectionChange: (e) => onChange(e[0]),
         className: `form-field`,
-        multiSelect: false
+        multiSelect: false,
+        itemTemplate: DropdownItemTemplate
       }
     );
   }
@@ -122,7 +316,8 @@ const FormField = ({ field, value, onChange }) => {
         value: parsedValue,
         onSelectionChange: (e) => onChange(e),
         className: `form-field`,
-        multiSelect: true
+        multiSelect: true,
+        itemTemplate: DropdownItemTemplate
       }
     );
   }
@@ -169,24 +364,33 @@ const SimpleFormDialog = ({
       header: title,
       footer,
       style: { minHeight: 500, minWidth: 600 },
-      children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ayonReactComponents.FormLayout, { style: { width: "95%" }, children: fields.map((field) => {
-        if (field.type === "label") {
-          return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(FormLabel, { field }, field.name);
-        }
-        return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ayonReactComponents.FormRow, { label: field.label || "", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
-          FormField,
-          {
-            field,
-            value: formData[field.name],
-            onChange: (value) => {
-              setFormData((prev) => ({
-                ...prev,
-                [field.name]: value
-              }));
+      children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+        ayonReactComponents.FormLayout,
+        {
+          style: { width: "95%" },
+          onKeyDown: (e) => {
+            e.stopPropagation();
+          },
+          children: fields.map((field) => {
+            if (field.type === "label") {
+              return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(FormLabel, { field }, field.name);
             }
-          }
-        ) }, field.name);
-      }) })
+            return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ayonReactComponents.FormRow, { label: field.label || "", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+              FormField,
+              {
+                field,
+                value: formData[field.name],
+                onChange: (value) => {
+                  setFormData((prev) => ({
+                    ...prev,
+                    [field.name]: value
+                  }));
+                }
+              }
+            ) }, field.name);
+          })
+        }
+      )
     }
   );
 };

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

@@ -1 +1 @@
-{"version":3,"file":"SimpleFormDialog.cjs.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  ScrollPanel,\n  Button,\n  Spacer,\n  Dialog,\n  FormLayout,\n  FormRow,\n  InputNumber,\n  InputText,\n  InputSwitch,\n  Dropdown,\n} from '@ynput/ayon-react-components'\n\nimport type { SimpleFormField } from '@shared/api'\n\nexport type SimpleFormValue = string | number | boolean | string[] | 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    }\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 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      />\n    )\n  } // Handle select\n\n  if (field.type === 'multiselect') {\n    const parsedValue = Array.isArray(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      />\n    )\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 && (\n        <Button onClick={() => onClose()} label={cancelLabel} icon={cancelIcon} />\n      )}\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 style={{ width: '95%' }}>\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":["jsx","InputText","InputSwitch","InputNumber","Dropdown","useState","useEffect","jsxs","Spacer","Button","Dialog","FormLayout","FormRow"],"mappings":"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"}
+{"version":3,"file":"SimpleFormDialog.cjs.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'\n\nimport type { FormSelectOption, SimpleFormField } from '@shared/api'\n\nexport type SimpleFormValue = string | number | boolean | string[] | 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    }\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}>{badge}</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 : []\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\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":["jsx","jsxs","Fragment","Badge","DefaultItemTemplate","InputText","InputSwitch","InputNumber","Dropdown","useState","useEffect","Spacer","Button","Dialog","FormLayout","FormRow"],"mappings":"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"}

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

@@ -2,7 +2,184 @@ import { j as jsxRuntimeExports } from "../../../../_virtual/jsx-runtime.es.js";
 import styled from "styled-components";
 import { useState, useEffect } from "react";
 import ReactMarkdown from "react-markdown";
-import { Dialog, FormLayout, FormRow, Spacer, Button, InputText, InputSwitch, InputNumber, Dropdown } from "@ynput/ayon-react-components";
+import { Dialog, FormLayout, FormRow, Spacer, Button, InputText, InputSwitch, InputNumber, Dropdown, DefaultItemTemplate } from "@ynput/ayon-react-components";
+import "clsx";
+import "../ThumbnailSimple/ThumbnailSimple.es.js";
+import "../EmptyPlaceholder/EmptyPlaceholder.es.js";
+import "../EmptyPlaceholder/EmptyPlaceholderFlex.styled.es.js";
+import "react-toastify";
+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 "@dnd-kit/core";
+import "@dnd-kit/sortable";
+import "../ReviewablesList/ReviewablesList.styled.es.js";
+import "../../containers/ContextMenu/ContextMenuContext.es.js";
+/* empty css                                               */
+import "lodash";
+import "../../util/pubsub.es.js";
+import "axios";
+import "../ReviewablesList/ReviewablesUpload.styled.es.js";
+import "../../context/RemoteModulesContext.es.js";
+import "../../context/DetailsPanelContext.es.js";
+import "../../context/ThumbnailUploaderContext.es.js";
+import "../../context/SettingsPanelContext.es.js";
+import "../../context/pip/PiPProvider.es.js";
+import "react-dom";
+import "../../context/pip/PiPWrapper.es.js";
+import "../../context/AddonProjectContext.es.js";
+import "../../context/AddonContext.es.js";
+import "../../context/PowerpackContext.es.js";
+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 "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/SelectionCellsContext.es.js";
+import "../../containers/ProjectTreeTable/context/ProjectTableContext.es.js";
+import "../../containers/ProjectTreeTable/context/ProjectTableQueriesContext.es.js";
+import "../../containers/ProjectTreeTable/context/SelectedRowsContext.es.js";
+import "../../containers/ProjectTreeTable/context/ColumnSettingsContext.es.js";
+import "../../containers/ProjectTreeTable/context/CellEditingContext.es.js";
+import "../../containers/ProjectTreeTable/context/ClipboardContext.es.js";
+import "../../containers/ProjectTreeTable/context/ProjectTableSelectionContext.es.js";
+import "../../containers/ProjectTreeTable/context/ProjectDataContext.es.js";
+import "../../containers/ProjectTreeTable/context/ProjectTableModulesContext.es.js";
+import "@tanstack/react-table";
+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 "../../../../_virtual/runtime.es.js";
+import "../../../../_virtual/semver.es.js";
+import "react-redux";
+import "custom-protocol-check";
+import "../../containers/DetailsPanel/FeedFilters/FeedFilters.styled.es.js";
+import "../../containers/DetailsPanel/DetailsPanelHeader/DetailsPanelHeader.styled.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 "../EntityThumbnailUploader/EntityThumbnailUploader.styled.es.js";
+import "../ThumbnailUploader/ThumbnailUploader.styled.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 } from "../Badge/Badge.es.js";
 const getDefaults = (fields, values) => {
   const defaults = {};
   fields.forEach((field) => {
@@ -52,6 +229,22 @@ const FormLabel = ({ field }) => {
   const text = typeof field.value === "string" ? field.value : "Invalid label value";
   return /* @__PURE__ */ jsxRuntimeExports.jsx(LabelContainer, { className: field.highlight || "normal", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ReactMarkdown, { children: text }) });
 };
+const DropdownItemTemplate = (option) => {
+  const endContent = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { flex: 1 } }),
+    option.badges && option.badges.map((badge, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { children: badge }, index))
+  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    DefaultItemTemplate,
+    {
+      option,
+      dataKey: "value",
+      labelKey: "label",
+      value: [option.value],
+      endContent
+    }
+  );
+};
 const FormField = ({ field, value, onChange }) => {
   if (field.type === "text") {
     const parsedValue = typeof value === "string" ? value : "";
@@ -106,7 +299,8 @@ const FormField = ({ field, value, onChange }) => {
         value: parsedValue ? [parsedValue] : [],
         onSelectionChange: (e) => onChange(e[0]),
         className: `form-field`,
-        multiSelect: false
+        multiSelect: false,
+        itemTemplate: DropdownItemTemplate
       }
     );
   }
@@ -120,7 +314,8 @@ const FormField = ({ field, value, onChange }) => {
         value: parsedValue,
         onSelectionChange: (e) => onChange(e),
         className: `form-field`,
-        multiSelect: true
+        multiSelect: true,
+        itemTemplate: DropdownItemTemplate
       }
     );
   }
@@ -167,24 +362,33 @@ const SimpleFormDialog = ({
       header: title,
       footer,
       style: { minHeight: 500, minWidth: 600 },
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(FormLayout, { style: { width: "95%" }, children: fields.map((field) => {
-        if (field.type === "label") {
-          return /* @__PURE__ */ jsxRuntimeExports.jsx(FormLabel, { field }, field.name);
-        }
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(FormRow, { label: field.label || "", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          FormField,
-          {
-            field,
-            value: formData[field.name],
-            onChange: (value) => {
-              setFormData((prev) => ({
-                ...prev,
-                [field.name]: value
-              }));
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        FormLayout,
+        {
+          style: { width: "95%" },
+          onKeyDown: (e) => {
+            e.stopPropagation();
+          },
+          children: fields.map((field) => {
+            if (field.type === "label") {
+              return /* @__PURE__ */ jsxRuntimeExports.jsx(FormLabel, { field }, field.name);
             }
-          }
-        ) }, field.name);
-      }) })
+            return /* @__PURE__ */ jsxRuntimeExports.jsx(FormRow, { label: field.label || "", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              FormField,
+              {
+                field,
+                value: formData[field.name],
+                onChange: (value) => {
+                  setFormData((prev) => ({
+                    ...prev,
+                    [field.name]: value
+                  }));
+                }
+              }
+            ) }, field.name);
+          })
+        }
+      )
     }
   );
 };