@strapi/admin 5.57.0 → 5.59.0

package/dist/admin/admin/src/pages/Settings/pages/Webhooks/components/Events.js.map

@@ -1 +1 @@
-{"version":3,"file":"Events.js","sources":["../../../../../../../../../admin/src/pages/Settings/pages/Webhooks/components/Events.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Checkbox,\n  Flex,\n  RawTable as Table,\n  RawTbody as Tbody,\n  RawTd as Td,\n  RawTh as Th,\n  RawThead as Thead,\n  RawTr as Tr,\n  Typography,\n  VisuallyHidden,\n  Field,\n  CheckboxProps,\n} from '@strapi/design-system';\nimport { MessageDescriptor, useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useField } from '../../../../../components/Form';\n\n/* -------------------------------------------------------------------------------------------------\n * EventsRoot\n * -----------------------------------------------------------------------------------------------*/\n\ninterface EventsRootProps {\n  children: React.ReactNode;\n}\n\nconst EventsRoot = ({ children }: EventsRootProps) => {\n  const { formatMessage } = useIntl();\n\n  const label = formatMessage({\n    id: 'Settings.webhooks.form.events',\n    defaultMessage: 'Events',\n  });\n\n  return (\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\n      <Field.Label aria-hidden>{label}</Field.Label>\n      {/* @ts-expect-error – TODO: add colCount & rowCount */}\n      <StyledTable aria-label={label}>{children}</StyledTable>\n    </Flex>\n  );\n};\n\n// TODO check whether we want to move alternating background colour tables to the design system\nconst StyledTable = styled(Table)`\n  tbody tr:nth-child(odd) {\n    background: ${({ theme }) => theme.colors.neutral100};\n  }\n\n  thead th span {\n    color: ${({ theme }) => theme.colors.neutral500};\n  }\n\n  td,\n  th {\n    padding-block-start: ${({ theme }) => theme.spaces[3]};\n    padding-block-end: ${({ theme }) => theme.spaces[3]};\n    width: 6%;\n    vertical-align: middle;\n  }\n\n  tbody tr td:first-child {\n    /**\n     * Add padding to the start of the first column to avoid the checkbox appearing\n     * too close to the edge of the table\n     */\n    padding-inline-start: ${({ theme }) => theme.spaces[2]};\n  }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * EventsHeaders\n * -----------------------------------------------------------------------------------------------*/\n\ninterface EventsHeadersProps {\n  getHeaders?: typeof getCEHeaders;\n}\n\nconst getCEHeaders = (): MessageDescriptor[] => {\n  const headers = [\n    { id: 'Settings.webhooks.events.create', defaultMessage: 'Create' },\n    { id: 'Settings.webhooks.events.update', defaultMessage: 'Update' },\n    { id: 'app.utils.delete', defaultMessage: 'Delete' },\n    { id: 'app.utils.publish', defaultMessage: 'Publish' },\n    { id: 'app.utils.unpublish', defaultMessage: 'Unpublish' },\n  ];\n\n  return headers;\n};\n\nconst EventsHeaders = ({ getHeaders = getCEHeaders }: EventsHeadersProps) => {\n  const { formatMessage } = useIntl();\n  const headers = getHeaders();\n\n  return (\n    <Thead>\n      <Tr>\n        <Th>\n          <VisuallyHidden>\n            {formatMessage({\n              id: 'Settings.webhooks.event.select',\n              defaultMessage: 'Select event',\n            })}\n          </VisuallyHidden>\n        </Th>\n        {headers.map((header) => {\n          if (['app.utils.publish', 'app.utils.unpublish'].includes(header?.id ?? '')) {\n            return (\n              <Th\n                key={header.id}\n                title={formatMessage({\n                  id: 'Settings.webhooks.event.publish-tooltip',\n                  defaultMessage: 'This event only exists for content with draft & publish enabled',\n                })}\n              >\n                <Typography variant=\"sigma\" textColor=\"neutral600\">\n                  {formatMessage(header)}\n                </Typography>\n              </Th>\n            );\n          }\n\n          return (\n            <Th key={header.id}>\n              <Typography variant=\"sigma\" textColor=\"neutral600\">\n                {formatMessage(header)}\n              </Typography>\n            </Th>\n          );\n        })}\n      </Tr>\n    </Thead>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * EventsBody\n * -----------------------------------------------------------------------------------------------*/\ninterface FormikContextValue {\n  events: string[];\n}\n\ninterface EventsBodyProps {\n  providedEvents?: Record<string, FormikContextValue['events']>;\n}\n\nconst EventsBody = ({ providedEvents }: EventsBodyProps) => {\n  const events = providedEvents || getCEEvents();\n  const { value = [], onChange } = useField<string[]>('events');\n\n  const inputName = 'events';\n  const inputValue = value;\n  const disabledEvents: string[] = [];\n\n  const formattedValue = inputValue.reduce<Record<string, string[]>>((acc, curr) => {\n    const key = curr.split('.')[0];\n\n    if (!acc[key]) {\n      acc[key] = [];\n    }\n    acc[key].push(curr);\n\n    return acc;\n  }, {});\n\n  const handleSelect: EventsRowProps['handleSelect'] = (name, value) => {\n    const set = new Set(inputValue);\n\n    if (value) {\n      set.add(name);\n    } else {\n      set.delete(name);\n    }\n\n    onChange(inputName, Array.from(set));\n  };\n\n  const handleSelectAll: EventsRowProps['handleSelectAll'] = (name, value) => {\n    const set = new Set(inputValue);\n\n    if (value) {\n      events[name].forEach((event) => {\n        if (!disabledEvents.includes(event)) {\n          set.add(event);\n        }\n      });\n    } else {\n      events[name].forEach((event) => set.delete(event));\n    }\n\n    onChange(inputName, Array.from(set));\n  };\n\n  return (\n    <Tbody>\n      {Object.entries(events).map(([event, value]) => {\n        return (\n          <EventsRow\n            disabledEvents={disabledEvents}\n            key={event}\n            name={event}\n            events={value}\n            inputValue={formattedValue[event]}\n            handleSelect={handleSelect}\n            handleSelectAll={handleSelectAll}\n          />\n        );\n      })}\n    </Tbody>\n  );\n};\n\nconst getCEEvents = (): Required<Pick<EventsBodyProps, 'providedEvents'>>['providedEvents'] => {\n  const entryEvents: FormikContextValue['events'] = [\n    'entry.create',\n    'entry.update',\n    'entry.delete',\n    'entry.publish',\n    'entry.unpublish',\n  ];\n\n  return {\n    entry: entryEvents,\n    media: ['media.create', 'media.update', 'media.delete'],\n  };\n};\n\n/* -------------------------------------------------------------------------------------------------\n * EventsRow\n * -----------------------------------------------------------------------------------------------*/\n\ninterface EventsRowProps {\n  disabledEvents?: string[];\n  events?: string[];\n  inputValue?: string[];\n  handleSelect: (name: string, value: boolean) => void;\n  handleSelectAll: (name: string, value: boolean) => void;\n  name: string;\n}\n\nconst EventsRow = ({\n  disabledEvents = [],\n  name,\n  events = [],\n  inputValue = [],\n  handleSelect,\n  handleSelectAll,\n}: EventsRowProps) => {\n  const { formatMessage } = useIntl();\n  const enabledCheckboxes = events.filter((event) => !disabledEvents.includes(event));\n\n  const hasSomeCheckboxSelected = inputValue.length > 0;\n  const areAllCheckboxesSelected = inputValue.length === enabledCheckboxes.length;\n\n  const onChangeAll: CheckboxProps['onCheckedChange'] = () => {\n    const valueToSet = !areAllCheckboxesSelected;\n\n    handleSelectAll(name, valueToSet);\n  };\n\n  const targetColumns = 5;\n\n  return (\n    <Tr>\n      <Td>\n        <Checkbox\n          aria-label={formatMessage({\n            id: 'global.select-all-entries',\n            defaultMessage: 'Select all entries',\n          })}\n          name={name}\n          checked={\n            hasSomeCheckboxSelected && !areAllCheckboxesSelected\n              ? 'indeterminate'\n              : areAllCheckboxesSelected\n          }\n          onCheckedChange={onChangeAll}\n        >\n          {removeHyphensAndTitleCase(name)}\n        </Checkbox>\n      </Td>\n\n      {events.map((event) => {\n        return (\n          <Td key={event} textAlign=\"center\">\n            <Flex width=\"100%\" justifyContent=\"center\">\n              <Checkbox\n                disabled={disabledEvents.includes(event)}\n                aria-label={event}\n                name={event}\n                checked={inputValue.includes(event)}\n                onCheckedChange={(value) => handleSelect(event, !!value)}\n              />\n            </Flex>\n          </Td>\n        );\n      })}\n      {events.length < targetColumns && <Td colSpan={targetColumns - events.length} />}\n    </Tr>\n  );\n};\n\n/**\n * Converts a string to title case and removes hyphens.\n */\nconst removeHyphensAndTitleCase = (str: string): string =>\n  str\n    .replace(/-/g, ' ')\n    .split(' ')\n    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())\n    .join(' ');\n\nconst Events = { Root: EventsRoot, Headers: EventsHeaders, Body: EventsBody, Row: EventsRow };\n\nexport { Events };\nexport type { EventsRowProps, EventsHeadersProps, EventsRootProps, EventsBodyProps };\n"],"names":["EventsRoot","children","formatMessage","useIntl","label","id","defaultMessage","_jsxs","Flex","direction","alignItems","gap","_jsx","Field","Label","aria-hidden","StyledTable","aria-label","styled","Table","theme","colors","neutral100","neutral500","spaces","getCEHeaders","headers","EventsHeaders","getHeaders","Thead","Tr","Th","VisuallyHidden","map","header","includes","title","Typography","variant","textColor","EventsBody","providedEvents","events","getCEEvents","value","onChange","useField","inputName","inputValue","disabledEvents","formattedValue","reduce","acc","curr","key","split","push","handleSelect","name","set","Set","add","delete","Array","from","handleSelectAll","forEach","event","Tbody","Object","entries","EventsRow","entryEvents","entry","media","enabledCheckboxes","filter","hasSomeCheckboxSelected","length","areAllCheckboxesSelected","onChangeAll","valueToSet","targetColumns","Td","Checkbox","checked","onCheckedChange","removeHyphensAndTitleCase","textAlign","width","justifyContent","disabled","colSpan","str","replace","word","charAt","toUpperCase","slice","toLowerCase","join","Events","Root","Headers","Body"],"mappings":"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"}
+{"version":3,"file":"Events.js","sources":["../../../../../../../../../admin/src/pages/Settings/pages/Webhooks/components/Events.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Checkbox,\n  Flex,\n  RawTable as Table,\n  RawTbody as Tbody,\n  RawTd as Td,\n  RawTh as Th,\n  RawThead as Thead,\n  RawTr as Tr,\n  Typography,\n  VisuallyHidden,\n  Field,\n  CheckboxProps,\n} from '@strapi/design-system';\nimport { MessageDescriptor, useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useField } from '../../../../../components/Form';\n\nconst EMPTY_DISABLED_EVENTS: NonNullable<EventsRowProps['disabledEvents']> = [];\nconst EMPTY_EVENTS: NonNullable<EventsRowProps['events']> = [];\nconst EMPTY_INPUT_VALUE: NonNullable<EventsRowProps['inputValue']> = [];\n\n/* -------------------------------------------------------------------------------------------------\n * EventsRoot\n * -----------------------------------------------------------------------------------------------*/\n\ninterface EventsRootProps {\n  children: React.ReactNode;\n}\n\nconst EventsRoot = ({ children }: EventsRootProps) => {\n  const { formatMessage } = useIntl();\n\n  const label = formatMessage({\n    id: 'Settings.webhooks.form.events',\n    defaultMessage: 'Events',\n  });\n\n  return (\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\n      <Field.Label aria-hidden>{label}</Field.Label>\n      {/* @ts-expect-error – TODO: add colCount & rowCount */}\n      <StyledTable aria-label={label}>{children}</StyledTable>\n    </Flex>\n  );\n};\n\n// TODO check whether we want to move alternating background colour tables to the design system\nconst StyledTable = styled(Table)`\n  tbody tr:nth-child(odd) {\n    background: ${({ theme }) => theme.colors.neutral100};\n  }\n\n  thead th span {\n    color: ${({ theme }) => theme.colors.neutral500};\n  }\n\n  td,\n  th {\n    padding-block-start: ${({ theme }) => theme.spaces[3]};\n    padding-block-end: ${({ theme }) => theme.spaces[3]};\n    width: 6%;\n    vertical-align: middle;\n  }\n\n  tbody tr td:first-child {\n    /**\n     * Add padding to the start of the first column to avoid the checkbox appearing\n     * too close to the edge of the table\n     */\n    padding-inline-start: ${({ theme }) => theme.spaces[2]};\n  }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * EventsHeaders\n * -----------------------------------------------------------------------------------------------*/\n\ninterface EventsHeadersProps {\n  getHeaders?: typeof getCEHeaders;\n}\n\nconst getCEHeaders = (): MessageDescriptor[] => {\n  const headers = [\n    { id: 'Settings.webhooks.events.create', defaultMessage: 'Create' },\n    { id: 'Settings.webhooks.events.update', defaultMessage: 'Update' },\n    { id: 'app.utils.delete', defaultMessage: 'Delete' },\n    { id: 'app.utils.publish', defaultMessage: 'Publish' },\n    { id: 'app.utils.unpublish', defaultMessage: 'Unpublish' },\n  ];\n\n  return headers;\n};\n\nconst EventsHeaders = ({ getHeaders = getCEHeaders }: EventsHeadersProps) => {\n  const { formatMessage } = useIntl();\n  const headers = getHeaders();\n\n  return (\n    <Thead>\n      <Tr>\n        <Th>\n          <VisuallyHidden>\n            {formatMessage({\n              id: 'Settings.webhooks.event.select',\n              defaultMessage: 'Select event',\n            })}\n          </VisuallyHidden>\n        </Th>\n        {headers.map((header) => {\n          if (['app.utils.publish', 'app.utils.unpublish'].includes(header?.id ?? '')) {\n            return (\n              <Th\n                key={header.id}\n                title={formatMessage({\n                  id: 'Settings.webhooks.event.publish-tooltip',\n                  defaultMessage: 'This event only exists for content with draft & publish enabled',\n                })}\n              >\n                <Typography variant=\"sigma\" textColor=\"neutral600\">\n                  {formatMessage(header)}\n                </Typography>\n              </Th>\n            );\n          }\n\n          return (\n            <Th key={header.id}>\n              <Typography variant=\"sigma\" textColor=\"neutral600\">\n                {formatMessage(header)}\n              </Typography>\n            </Th>\n          );\n        })}\n      </Tr>\n    </Thead>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * EventsBody\n * -----------------------------------------------------------------------------------------------*/\ninterface FormikContextValue {\n  events: string[];\n}\n\ninterface EventsBodyProps {\n  providedEvents?: Record<string, FormikContextValue['events']>;\n}\n\nconst EventsBody = ({ providedEvents }: EventsBodyProps) => {\n  const events = providedEvents || getCEEvents();\n  const { value = [], onChange } = useField<string[]>('events');\n\n  const inputName = 'events';\n  const inputValue = value;\n  const disabledEvents: string[] = [];\n\n  const formattedValue = inputValue.reduce<Record<string, string[]>>((acc, curr) => {\n    const key = curr.split('.')[0];\n\n    if (!acc[key]) {\n      acc[key] = [];\n    }\n    acc[key].push(curr);\n\n    return acc;\n  }, {});\n\n  const handleSelect: EventsRowProps['handleSelect'] = (name, value) => {\n    const set = new Set(inputValue);\n\n    if (value) {\n      set.add(name);\n    } else {\n      set.delete(name);\n    }\n\n    onChange(inputName, Array.from(set));\n  };\n\n  const handleSelectAll: EventsRowProps['handleSelectAll'] = (name, value) => {\n    const set = new Set(inputValue);\n\n    if (value) {\n      events[name].forEach((event) => {\n        if (!disabledEvents.includes(event)) {\n          set.add(event);\n        }\n      });\n    } else {\n      events[name].forEach((event) => set.delete(event));\n    }\n\n    onChange(inputName, Array.from(set));\n  };\n\n  return (\n    <Tbody>\n      {Object.entries(events).map(([event, value]) => {\n        return (\n          <EventsRow\n            disabledEvents={disabledEvents}\n            key={event}\n            name={event}\n            events={value}\n            inputValue={formattedValue[event]}\n            handleSelect={handleSelect}\n            handleSelectAll={handleSelectAll}\n          />\n        );\n      })}\n    </Tbody>\n  );\n};\n\nconst getCEEvents = (): Required<Pick<EventsBodyProps, 'providedEvents'>>['providedEvents'] => {\n  const entryEvents: FormikContextValue['events'] = [\n    'entry.create',\n    'entry.update',\n    'entry.delete',\n    'entry.publish',\n    'entry.unpublish',\n  ];\n\n  return {\n    entry: entryEvents,\n    media: ['media.create', 'media.update', 'media.delete'],\n  };\n};\n\n/* -------------------------------------------------------------------------------------------------\n * EventsRow\n * -----------------------------------------------------------------------------------------------*/\n\ninterface EventsRowProps {\n  disabledEvents?: string[];\n  events?: string[];\n  inputValue?: string[];\n  handleSelect: (name: string, value: boolean) => void;\n  handleSelectAll: (name: string, value: boolean) => void;\n  name: string;\n}\n\nconst EventsRow = ({\n  disabledEvents = EMPTY_DISABLED_EVENTS,\n  name,\n  events = EMPTY_EVENTS,\n  inputValue = EMPTY_INPUT_VALUE,\n  handleSelect,\n  handleSelectAll,\n}: EventsRowProps) => {\n  const { formatMessage } = useIntl();\n  const enabledCheckboxes = events.filter((event) => !disabledEvents.includes(event));\n\n  const hasSomeCheckboxSelected = inputValue.length > 0;\n  const areAllCheckboxesSelected = inputValue.length === enabledCheckboxes.length;\n\n  const onChangeAll: CheckboxProps['onCheckedChange'] = () => {\n    const valueToSet = !areAllCheckboxesSelected;\n\n    handleSelectAll(name, valueToSet);\n  };\n\n  const targetColumns = 5;\n\n  return (\n    <Tr>\n      <Td>\n        <Checkbox\n          aria-label={formatMessage({\n            id: 'global.select-all-entries',\n            defaultMessage: 'Select all entries',\n          })}\n          name={name}\n          checked={\n            hasSomeCheckboxSelected && !areAllCheckboxesSelected\n              ? 'indeterminate'\n              : areAllCheckboxesSelected\n          }\n          onCheckedChange={onChangeAll}\n        >\n          {removeHyphensAndTitleCase(name)}\n        </Checkbox>\n      </Td>\n\n      {events.map((event) => {\n        return (\n          <Td key={event} textAlign=\"center\">\n            <Flex width=\"100%\" justifyContent=\"center\">\n              <Checkbox\n                disabled={disabledEvents.includes(event)}\n                aria-label={event}\n                name={event}\n                checked={inputValue.includes(event)}\n                onCheckedChange={(value) => handleSelect(event, !!value)}\n              />\n            </Flex>\n          </Td>\n        );\n      })}\n      {events.length < targetColumns && <Td colSpan={targetColumns - events.length} />}\n    </Tr>\n  );\n};\n\n/**\n * Converts a string to title case and removes hyphens.\n */\nconst removeHyphensAndTitleCase = (str: string): string =>\n  str\n    .replace(/-/g, ' ')\n    .split(' ')\n    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())\n    .join(' ');\n\nconst Events = { Root: EventsRoot, Headers: EventsHeaders, Body: EventsBody, Row: EventsRow };\n\nexport { Events };\nexport type { EventsRowProps, EventsHeadersProps, EventsRootProps, EventsBodyProps };\n"],"names":["EMPTY_DISABLED_EVENTS","EMPTY_EVENTS","EMPTY_INPUT_VALUE","EventsRoot","children","formatMessage","useIntl","label","id","defaultMessage","_jsxs","Flex","direction","alignItems","gap","_jsx","Field","Label","aria-hidden","StyledTable","aria-label","styled","Table","theme","colors","neutral100","neutral500","spaces","getCEHeaders","headers","EventsHeaders","getHeaders","Thead","Tr","Th","VisuallyHidden","map","header","includes","title","Typography","variant","textColor","EventsBody","providedEvents","events","getCEEvents","value","onChange","useField","inputName","inputValue","disabledEvents","formattedValue","reduce","acc","curr","key","split","push","handleSelect","name","set","Set","add","delete","Array","from","handleSelectAll","forEach","event","Tbody","Object","entries","EventsRow","entryEvents","entry","media","enabledCheckboxes","filter","hasSomeCheckboxSelected","length","areAllCheckboxesSelected","onChangeAll","valueToSet","targetColumns","Td","Checkbox","checked","onCheckedChange","removeHyphensAndTitleCase","textAlign","width","justifyContent","disabled","colSpan","str","replace","word","charAt","toUpperCase","slice","toLowerCase","join","Events","Root","Headers","Body"],"mappings":"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"}

package/dist/admin/admin/src/pages/Settings/pages/Webhooks/components/Events.mjs

@@ -5,6 +5,9 @@ import { useIntl } from 'react-intl';
 import { styled } from 'styled-components';
 import { useField } from '../../../../../components/Form.mjs';
 
+const EMPTY_DISABLED_EVENTS = [];
+const EMPTY_EVENTS = [];
+const EMPTY_INPUT_VALUE = [];
 const EventsRoot = ({ children })=>{
     const { formatMessage } = useIntl();
     const label = formatMessage({
@@ -187,7 +190,7 @@ const getCEEvents = ()=>{
         ]
     };
 };
-const EventsRow = ({ disabledEvents = [], name, events = [], inputValue = [], handleSelect, handleSelectAll })=>{
+const EventsRow = ({ disabledEvents = EMPTY_DISABLED_EVENTS, name, events = EMPTY_EVENTS, inputValue = EMPTY_INPUT_VALUE, handleSelect, handleSelectAll })=>{
     const { formatMessage } = useIntl();
     const enabledCheckboxes = events.filter((event)=>!disabledEvents.includes(event));
     const hasSomeCheckboxSelected = inputValue.length > 0;

package/dist/admin/admin/src/pages/Settings/pages/Webhooks/components/Events.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Events.mjs","sources":["../../../../../../../../../admin/src/pages/Settings/pages/Webhooks/components/Events.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Checkbox,\n  Flex,\n  RawTable as Table,\n  RawTbody as Tbody,\n  RawTd as Td,\n  RawTh as Th,\n  RawThead as Thead,\n  RawTr as Tr,\n  Typography,\n  VisuallyHidden,\n  Field,\n  CheckboxProps,\n} from '@strapi/design-system';\nimport { MessageDescriptor, useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useField } from '../../../../../components/Form';\n\n/* -------------------------------------------------------------------------------------------------\n * EventsRoot\n * -----------------------------------------------------------------------------------------------*/\n\ninterface EventsRootProps {\n  children: React.ReactNode;\n}\n\nconst EventsRoot = ({ children }: EventsRootProps) => {\n  const { formatMessage } = useIntl();\n\n  const label = formatMessage({\n    id: 'Settings.webhooks.form.events',\n    defaultMessage: 'Events',\n  });\n\n  return (\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\n      <Field.Label aria-hidden>{label}</Field.Label>\n      {/* @ts-expect-error – TODO: add colCount & rowCount */}\n      <StyledTable aria-label={label}>{children}</StyledTable>\n    </Flex>\n  );\n};\n\n// TODO check whether we want to move alternating background colour tables to the design system\nconst StyledTable = styled(Table)`\n  tbody tr:nth-child(odd) {\n    background: ${({ theme }) => theme.colors.neutral100};\n  }\n\n  thead th span {\n    color: ${({ theme }) => theme.colors.neutral500};\n  }\n\n  td,\n  th {\n    padding-block-start: ${({ theme }) => theme.spaces[3]};\n    padding-block-end: ${({ theme }) => theme.spaces[3]};\n    width: 6%;\n    vertical-align: middle;\n  }\n\n  tbody tr td:first-child {\n    /**\n     * Add padding to the start of the first column to avoid the checkbox appearing\n     * too close to the edge of the table\n     */\n    padding-inline-start: ${({ theme }) => theme.spaces[2]};\n  }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * EventsHeaders\n * -----------------------------------------------------------------------------------------------*/\n\ninterface EventsHeadersProps {\n  getHeaders?: typeof getCEHeaders;\n}\n\nconst getCEHeaders = (): MessageDescriptor[] => {\n  const headers = [\n    { id: 'Settings.webhooks.events.create', defaultMessage: 'Create' },\n    { id: 'Settings.webhooks.events.update', defaultMessage: 'Update' },\n    { id: 'app.utils.delete', defaultMessage: 'Delete' },\n    { id: 'app.utils.publish', defaultMessage: 'Publish' },\n    { id: 'app.utils.unpublish', defaultMessage: 'Unpublish' },\n  ];\n\n  return headers;\n};\n\nconst EventsHeaders = ({ getHeaders = getCEHeaders }: EventsHeadersProps) => {\n  const { formatMessage } = useIntl();\n  const headers = getHeaders();\n\n  return (\n    <Thead>\n      <Tr>\n        <Th>\n          <VisuallyHidden>\n            {formatMessage({\n              id: 'Settings.webhooks.event.select',\n              defaultMessage: 'Select event',\n            })}\n          </VisuallyHidden>\n        </Th>\n        {headers.map((header) => {\n          if (['app.utils.publish', 'app.utils.unpublish'].includes(header?.id ?? '')) {\n            return (\n              <Th\n                key={header.id}\n                title={formatMessage({\n                  id: 'Settings.webhooks.event.publish-tooltip',\n                  defaultMessage: 'This event only exists for content with draft & publish enabled',\n                })}\n              >\n                <Typography variant=\"sigma\" textColor=\"neutral600\">\n                  {formatMessage(header)}\n                </Typography>\n              </Th>\n            );\n          }\n\n          return (\n            <Th key={header.id}>\n              <Typography variant=\"sigma\" textColor=\"neutral600\">\n                {formatMessage(header)}\n              </Typography>\n            </Th>\n          );\n        })}\n      </Tr>\n    </Thead>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * EventsBody\n * -----------------------------------------------------------------------------------------------*/\ninterface FormikContextValue {\n  events: string[];\n}\n\ninterface EventsBodyProps {\n  providedEvents?: Record<string, FormikContextValue['events']>;\n}\n\nconst EventsBody = ({ providedEvents }: EventsBodyProps) => {\n  const events = providedEvents || getCEEvents();\n  const { value = [], onChange } = useField<string[]>('events');\n\n  const inputName = 'events';\n  const inputValue = value;\n  const disabledEvents: string[] = [];\n\n  const formattedValue = inputValue.reduce<Record<string, string[]>>((acc, curr) => {\n    const key = curr.split('.')[0];\n\n    if (!acc[key]) {\n      acc[key] = [];\n    }\n    acc[key].push(curr);\n\n    return acc;\n  }, {});\n\n  const handleSelect: EventsRowProps['handleSelect'] = (name, value) => {\n    const set = new Set(inputValue);\n\n    if (value) {\n      set.add(name);\n    } else {\n      set.delete(name);\n    }\n\n    onChange(inputName, Array.from(set));\n  };\n\n  const handleSelectAll: EventsRowProps['handleSelectAll'] = (name, value) => {\n    const set = new Set(inputValue);\n\n    if (value) {\n      events[name].forEach((event) => {\n        if (!disabledEvents.includes(event)) {\n          set.add(event);\n        }\n      });\n    } else {\n      events[name].forEach((event) => set.delete(event));\n    }\n\n    onChange(inputName, Array.from(set));\n  };\n\n  return (\n    <Tbody>\n      {Object.entries(events).map(([event, value]) => {\n        return (\n          <EventsRow\n            disabledEvents={disabledEvents}\n            key={event}\n            name={event}\n            events={value}\n            inputValue={formattedValue[event]}\n            handleSelect={handleSelect}\n            handleSelectAll={handleSelectAll}\n          />\n        );\n      })}\n    </Tbody>\n  );\n};\n\nconst getCEEvents = (): Required<Pick<EventsBodyProps, 'providedEvents'>>['providedEvents'] => {\n  const entryEvents: FormikContextValue['events'] = [\n    'entry.create',\n    'entry.update',\n    'entry.delete',\n    'entry.publish',\n    'entry.unpublish',\n  ];\n\n  return {\n    entry: entryEvents,\n    media: ['media.create', 'media.update', 'media.delete'],\n  };\n};\n\n/* -------------------------------------------------------------------------------------------------\n * EventsRow\n * -----------------------------------------------------------------------------------------------*/\n\ninterface EventsRowProps {\n  disabledEvents?: string[];\n  events?: string[];\n  inputValue?: string[];\n  handleSelect: (name: string, value: boolean) => void;\n  handleSelectAll: (name: string, value: boolean) => void;\n  name: string;\n}\n\nconst EventsRow = ({\n  disabledEvents = [],\n  name,\n  events = [],\n  inputValue = [],\n  handleSelect,\n  handleSelectAll,\n}: EventsRowProps) => {\n  const { formatMessage } = useIntl();\n  const enabledCheckboxes = events.filter((event) => !disabledEvents.includes(event));\n\n  const hasSomeCheckboxSelected = inputValue.length > 0;\n  const areAllCheckboxesSelected = inputValue.length === enabledCheckboxes.length;\n\n  const onChangeAll: CheckboxProps['onCheckedChange'] = () => {\n    const valueToSet = !areAllCheckboxesSelected;\n\n    handleSelectAll(name, valueToSet);\n  };\n\n  const targetColumns = 5;\n\n  return (\n    <Tr>\n      <Td>\n        <Checkbox\n          aria-label={formatMessage({\n            id: 'global.select-all-entries',\n            defaultMessage: 'Select all entries',\n          })}\n          name={name}\n          checked={\n            hasSomeCheckboxSelected && !areAllCheckboxesSelected\n              ? 'indeterminate'\n              : areAllCheckboxesSelected\n          }\n          onCheckedChange={onChangeAll}\n        >\n          {removeHyphensAndTitleCase(name)}\n        </Checkbox>\n      </Td>\n\n      {events.map((event) => {\n        return (\n          <Td key={event} textAlign=\"center\">\n            <Flex width=\"100%\" justifyContent=\"center\">\n              <Checkbox\n                disabled={disabledEvents.includes(event)}\n                aria-label={event}\n                name={event}\n                checked={inputValue.includes(event)}\n                onCheckedChange={(value) => handleSelect(event, !!value)}\n              />\n            </Flex>\n          </Td>\n        );\n      })}\n      {events.length < targetColumns && <Td colSpan={targetColumns - events.length} />}\n    </Tr>\n  );\n};\n\n/**\n * Converts a string to title case and removes hyphens.\n */\nconst removeHyphensAndTitleCase = (str: string): string =>\n  str\n    .replace(/-/g, ' ')\n    .split(' ')\n    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())\n    .join(' ');\n\nconst Events = { Root: EventsRoot, Headers: EventsHeaders, Body: EventsBody, Row: EventsRow };\n\nexport { Events };\nexport type { EventsRowProps, EventsHeadersProps, EventsRootProps, EventsBodyProps };\n"],"names":["EventsRoot","children","formatMessage","useIntl","label","id","defaultMessage","_jsxs","Flex","direction","alignItems","gap","_jsx","Field","Label","aria-hidden","StyledTable","aria-label","styled","Table","theme","colors","neutral100","neutral500","spaces","getCEHeaders","headers","EventsHeaders","getHeaders","Thead","Tr","Th","VisuallyHidden","map","header","includes","title","Typography","variant","textColor","EventsBody","providedEvents","events","getCEEvents","value","onChange","useField","inputName","inputValue","disabledEvents","formattedValue","reduce","acc","curr","key","split","push","handleSelect","name","set","Set","add","delete","Array","from","handleSelectAll","forEach","event","Tbody","Object","entries","EventsRow","entryEvents","entry","media","enabledCheckboxes","filter","hasSomeCheckboxSelected","length","areAllCheckboxesSelected","onChangeAll","valueToSet","targetColumns","Td","Checkbox","checked","onCheckedChange","removeHyphensAndTitleCase","textAlign","width","justifyContent","disabled","colSpan","str","replace","word","charAt","toUpperCase","slice","toLowerCase","join","Events","Root","Headers","Body"],"mappings":"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"}
+{"version":3,"file":"Events.mjs","sources":["../../../../../../../../../admin/src/pages/Settings/pages/Webhooks/components/Events.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Checkbox,\n  Flex,\n  RawTable as Table,\n  RawTbody as Tbody,\n  RawTd as Td,\n  RawTh as Th,\n  RawThead as Thead,\n  RawTr as Tr,\n  Typography,\n  VisuallyHidden,\n  Field,\n  CheckboxProps,\n} from '@strapi/design-system';\nimport { MessageDescriptor, useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useField } from '../../../../../components/Form';\n\nconst EMPTY_DISABLED_EVENTS: NonNullable<EventsRowProps['disabledEvents']> = [];\nconst EMPTY_EVENTS: NonNullable<EventsRowProps['events']> = [];\nconst EMPTY_INPUT_VALUE: NonNullable<EventsRowProps['inputValue']> = [];\n\n/* -------------------------------------------------------------------------------------------------\n * EventsRoot\n * -----------------------------------------------------------------------------------------------*/\n\ninterface EventsRootProps {\n  children: React.ReactNode;\n}\n\nconst EventsRoot = ({ children }: EventsRootProps) => {\n  const { formatMessage } = useIntl();\n\n  const label = formatMessage({\n    id: 'Settings.webhooks.form.events',\n    defaultMessage: 'Events',\n  });\n\n  return (\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\n      <Field.Label aria-hidden>{label}</Field.Label>\n      {/* @ts-expect-error – TODO: add colCount & rowCount */}\n      <StyledTable aria-label={label}>{children}</StyledTable>\n    </Flex>\n  );\n};\n\n// TODO check whether we want to move alternating background colour tables to the design system\nconst StyledTable = styled(Table)`\n  tbody tr:nth-child(odd) {\n    background: ${({ theme }) => theme.colors.neutral100};\n  }\n\n  thead th span {\n    color: ${({ theme }) => theme.colors.neutral500};\n  }\n\n  td,\n  th {\n    padding-block-start: ${({ theme }) => theme.spaces[3]};\n    padding-block-end: ${({ theme }) => theme.spaces[3]};\n    width: 6%;\n    vertical-align: middle;\n  }\n\n  tbody tr td:first-child {\n    /**\n     * Add padding to the start of the first column to avoid the checkbox appearing\n     * too close to the edge of the table\n     */\n    padding-inline-start: ${({ theme }) => theme.spaces[2]};\n  }\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * EventsHeaders\n * -----------------------------------------------------------------------------------------------*/\n\ninterface EventsHeadersProps {\n  getHeaders?: typeof getCEHeaders;\n}\n\nconst getCEHeaders = (): MessageDescriptor[] => {\n  const headers = [\n    { id: 'Settings.webhooks.events.create', defaultMessage: 'Create' },\n    { id: 'Settings.webhooks.events.update', defaultMessage: 'Update' },\n    { id: 'app.utils.delete', defaultMessage: 'Delete' },\n    { id: 'app.utils.publish', defaultMessage: 'Publish' },\n    { id: 'app.utils.unpublish', defaultMessage: 'Unpublish' },\n  ];\n\n  return headers;\n};\n\nconst EventsHeaders = ({ getHeaders = getCEHeaders }: EventsHeadersProps) => {\n  const { formatMessage } = useIntl();\n  const headers = getHeaders();\n\n  return (\n    <Thead>\n      <Tr>\n        <Th>\n          <VisuallyHidden>\n            {formatMessage({\n              id: 'Settings.webhooks.event.select',\n              defaultMessage: 'Select event',\n            })}\n          </VisuallyHidden>\n        </Th>\n        {headers.map((header) => {\n          if (['app.utils.publish', 'app.utils.unpublish'].includes(header?.id ?? '')) {\n            return (\n              <Th\n                key={header.id}\n                title={formatMessage({\n                  id: 'Settings.webhooks.event.publish-tooltip',\n                  defaultMessage: 'This event only exists for content with draft & publish enabled',\n                })}\n              >\n                <Typography variant=\"sigma\" textColor=\"neutral600\">\n                  {formatMessage(header)}\n                </Typography>\n              </Th>\n            );\n          }\n\n          return (\n            <Th key={header.id}>\n              <Typography variant=\"sigma\" textColor=\"neutral600\">\n                {formatMessage(header)}\n              </Typography>\n            </Th>\n          );\n        })}\n      </Tr>\n    </Thead>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * EventsBody\n * -----------------------------------------------------------------------------------------------*/\ninterface FormikContextValue {\n  events: string[];\n}\n\ninterface EventsBodyProps {\n  providedEvents?: Record<string, FormikContextValue['events']>;\n}\n\nconst EventsBody = ({ providedEvents }: EventsBodyProps) => {\n  const events = providedEvents || getCEEvents();\n  const { value = [], onChange } = useField<string[]>('events');\n\n  const inputName = 'events';\n  const inputValue = value;\n  const disabledEvents: string[] = [];\n\n  const formattedValue = inputValue.reduce<Record<string, string[]>>((acc, curr) => {\n    const key = curr.split('.')[0];\n\n    if (!acc[key]) {\n      acc[key] = [];\n    }\n    acc[key].push(curr);\n\n    return acc;\n  }, {});\n\n  const handleSelect: EventsRowProps['handleSelect'] = (name, value) => {\n    const set = new Set(inputValue);\n\n    if (value) {\n      set.add(name);\n    } else {\n      set.delete(name);\n    }\n\n    onChange(inputName, Array.from(set));\n  };\n\n  const handleSelectAll: EventsRowProps['handleSelectAll'] = (name, value) => {\n    const set = new Set(inputValue);\n\n    if (value) {\n      events[name].forEach((event) => {\n        if (!disabledEvents.includes(event)) {\n          set.add(event);\n        }\n      });\n    } else {\n      events[name].forEach((event) => set.delete(event));\n    }\n\n    onChange(inputName, Array.from(set));\n  };\n\n  return (\n    <Tbody>\n      {Object.entries(events).map(([event, value]) => {\n        return (\n          <EventsRow\n            disabledEvents={disabledEvents}\n            key={event}\n            name={event}\n            events={value}\n            inputValue={formattedValue[event]}\n            handleSelect={handleSelect}\n            handleSelectAll={handleSelectAll}\n          />\n        );\n      })}\n    </Tbody>\n  );\n};\n\nconst getCEEvents = (): Required<Pick<EventsBodyProps, 'providedEvents'>>['providedEvents'] => {\n  const entryEvents: FormikContextValue['events'] = [\n    'entry.create',\n    'entry.update',\n    'entry.delete',\n    'entry.publish',\n    'entry.unpublish',\n  ];\n\n  return {\n    entry: entryEvents,\n    media: ['media.create', 'media.update', 'media.delete'],\n  };\n};\n\n/* -------------------------------------------------------------------------------------------------\n * EventsRow\n * -----------------------------------------------------------------------------------------------*/\n\ninterface EventsRowProps {\n  disabledEvents?: string[];\n  events?: string[];\n  inputValue?: string[];\n  handleSelect: (name: string, value: boolean) => void;\n  handleSelectAll: (name: string, value: boolean) => void;\n  name: string;\n}\n\nconst EventsRow = ({\n  disabledEvents = EMPTY_DISABLED_EVENTS,\n  name,\n  events = EMPTY_EVENTS,\n  inputValue = EMPTY_INPUT_VALUE,\n  handleSelect,\n  handleSelectAll,\n}: EventsRowProps) => {\n  const { formatMessage } = useIntl();\n  const enabledCheckboxes = events.filter((event) => !disabledEvents.includes(event));\n\n  const hasSomeCheckboxSelected = inputValue.length > 0;\n  const areAllCheckboxesSelected = inputValue.length === enabledCheckboxes.length;\n\n  const onChangeAll: CheckboxProps['onCheckedChange'] = () => {\n    const valueToSet = !areAllCheckboxesSelected;\n\n    handleSelectAll(name, valueToSet);\n  };\n\n  const targetColumns = 5;\n\n  return (\n    <Tr>\n      <Td>\n        <Checkbox\n          aria-label={formatMessage({\n            id: 'global.select-all-entries',\n            defaultMessage: 'Select all entries',\n          })}\n          name={name}\n          checked={\n            hasSomeCheckboxSelected && !areAllCheckboxesSelected\n              ? 'indeterminate'\n              : areAllCheckboxesSelected\n          }\n          onCheckedChange={onChangeAll}\n        >\n          {removeHyphensAndTitleCase(name)}\n        </Checkbox>\n      </Td>\n\n      {events.map((event) => {\n        return (\n          <Td key={event} textAlign=\"center\">\n            <Flex width=\"100%\" justifyContent=\"center\">\n              <Checkbox\n                disabled={disabledEvents.includes(event)}\n                aria-label={event}\n                name={event}\n                checked={inputValue.includes(event)}\n                onCheckedChange={(value) => handleSelect(event, !!value)}\n              />\n            </Flex>\n          </Td>\n        );\n      })}\n      {events.length < targetColumns && <Td colSpan={targetColumns - events.length} />}\n    </Tr>\n  );\n};\n\n/**\n * Converts a string to title case and removes hyphens.\n */\nconst removeHyphensAndTitleCase = (str: string): string =>\n  str\n    .replace(/-/g, ' ')\n    .split(' ')\n    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())\n    .join(' ');\n\nconst Events = { Root: EventsRoot, Headers: EventsHeaders, Body: EventsBody, Row: EventsRow };\n\nexport { Events };\nexport type { EventsRowProps, EventsHeadersProps, EventsRootProps, EventsBodyProps };\n"],"names":["EMPTY_DISABLED_EVENTS","EMPTY_EVENTS","EMPTY_INPUT_VALUE","EventsRoot","children","formatMessage","useIntl","label","id","defaultMessage","_jsxs","Flex","direction","alignItems","gap","_jsx","Field","Label","aria-hidden","StyledTable","aria-label","styled","Table","theme","colors","neutral100","neutral500","spaces","getCEHeaders","headers","EventsHeaders","getHeaders","Thead","Tr","Th","VisuallyHidden","map","header","includes","title","Typography","variant","textColor","EventsBody","providedEvents","events","getCEEvents","value","onChange","useField","inputName","inputValue","disabledEvents","formattedValue","reduce","acc","curr","key","split","push","handleSelect","name","set","Set","add","delete","Array","from","handleSelectAll","forEach","event","Tbody","Object","entries","EventsRow","entryEvents","entry","media","enabledCheckboxes","filter","hasSomeCheckboxSelected","length","areAllCheckboxesSelected","onChangeAll","valueToSet","targetColumns","Td","Checkbox","checked","onCheckedChange","removeHyphensAndTitleCase","textAlign","width","justifyContent","disabled","colSpan","str","replace","word","charAt","toUpperCase","slice","toLowerCase","join","Events","Root","Headers","Body"],"mappings":"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"}

package/dist/admin/admin/src/pages/Settings/pages/Webhooks/components/HeadersInput.js

@@ -38,8 +38,22 @@ const HeadersInput = ()=>{
     const removeFieldRow = Form.useForm('HeadersInput', (state)=>state.removeFieldRow);
     const setFieldValue = Form.useForm('HeadersInput', (state)=>state.onChange);
     const { value = [] } = Form.useField('headers');
+    const rowKeyPrefix = React__namespace.useId();
+    const nextRowKey = React__namespace.useRef(0);
+    const rowKeys = React__namespace.useRef([]);
+    while(rowKeys.current.length < value.length){
+        rowKeys.current.push(`${rowKeyPrefix}-${nextRowKey.current}`);
+        nextRowKey.current += 1;
+    }
+    rowKeys.current.length = value.length;
+    const rows = value.map((_, index)=>({
+            index,
+            key: rowKeys.current[index]
+        }));
     const removeRow = (index)=>{
-        // if we are removing the last row, simply clear it
+        // Removing the only row clears it in place instead of deleting it, so the list length
+        // stays 1 and its key stays valid. Splicing rowKeys here would drop a key that the render
+        // body regenerates on the next pass, which would remount the row and tear down its inputs.
         if (value.length === 1) {
             setFieldValue('headers', [
                 {
@@ -48,6 +62,7 @@ const HeadersInput = ()=>{
                 }
             ]);
         } else {
+            rowKeys.current.splice(index, 1);
             removeFieldRow('headers', index);
         }
     };
@@ -67,7 +82,7 @@ const HeadersInput = ()=>{
                 background: "neutral100",
                 hasRadius: true,
                 children: [
-                    value.map((val, index)=>{
+                    rows.map(({ index, key })=>{
                         return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Grid.Root, {
                             gap: 4,
                             padding: 2,
@@ -129,7 +144,7 @@ const HeadersInput = ()=>{
                                     })
                                 })
                             ]
-                        }, `${index}-${JSON.stringify(val.key)}`);
+                        }, key);
                     }),
                     /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
                         paddingTop: 4,

package/dist/admin/admin/src/pages/Settings/pages/Webhooks/components/HeadersInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeadersInput.js","sources":["../../../../../../../../../admin/src/pages/Settings/pages/Webhooks/components/HeadersInput.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Box,\n  Flex,\n  Grid,\n  TextButton,\n  ComboboxOption,\n  Combobox,\n  ComboboxProps,\n  IconButton,\n  Field as DSField,\n} from '@strapi/design-system';\nimport { Minus, Plus } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useField, useForm } from '../../../../../components/Form';\nimport { StringInput } from '../../../../../components/FormInputs/String';\n\nconst AddHeaderButton = styled(TextButton)`\n  cursor: pointer;\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * HeadersInput\n * -----------------------------------------------------------------------------------------------*/\n\ninterface Header {\n  key: HTTPHeaders;\n  value: string;\n}\n\nconst HeadersInput = () => {\n  const { formatMessage } = useIntl();\n\n  const addFieldRow = useForm('HeadersInput', (state) => state.addFieldRow);\n  const removeFieldRow = useForm('HeadersInput', (state) => state.removeFieldRow);\n  const setFieldValue = useForm('HeadersInput', (state) => state.onChange);\n  const { value = [] } = useField<Header[]>('headers');\n\n  const removeRow = (index: number) => {\n    // if we are removing the last row, simply clear it\n    if (value.length === 1) {\n      setFieldValue('headers', [{ key: '', value: '' }]);\n    } else {\n      removeFieldRow('headers', index);\n    }\n  };\n\n  return (\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\n      <DSField.Label>\n        {formatMessage({\n          id: 'Settings.webhooks.form.headers',\n          defaultMessage: 'Headers',\n        })}\n      </DSField.Label>\n      <Box padding={8} background=\"neutral100\" hasRadius>\n        {value.map((val, index) => {\n          return (\n            <Grid.Root key={`${index}-${JSON.stringify(val.key)}`} gap={4} padding={2}>\n              <Grid.Item xs={12} col={6} direction=\"column\" alignItems=\"stretch\">\n                <HeaderCombobox\n                  name={`headers.${index}.key`}\n                  aria-label={`row ${index + 1} key`}\n                  label={formatMessage({\n                    id: 'Settings.webhooks.key',\n                    defaultMessage: 'Key',\n                  })}\n                />\n              </Grid.Item>\n              <Grid.Item xs={12} col={6} direction=\"column\" alignItems=\"stretch\">\n                <Flex alignItems=\"flex-end\" gap={2}>\n                  <Box style={{ flex: 1 }}>\n                    <StringInput\n                      name={`headers.${index}.value`}\n                      aria-label={`row ${index + 1} value`}\n                      label={formatMessage({\n                        id: 'Settings.webhooks.value',\n                        defaultMessage: 'Value',\n                      })}\n                      type=\"text\"\n                    />\n                  </Box>\n                  <IconButton\n                    width=\"4rem\"\n                    height=\"4rem\"\n                    onClick={() => removeRow(index)}\n                    color=\"primary600\"\n                    label={formatMessage(\n                      {\n                        id: 'Settings.webhooks.headers.remove',\n                        defaultMessage: 'Remove header row {number}',\n                      },\n                      { number: index + 1 }\n                    )}\n                    type=\"button\"\n                  >\n                    <Minus width=\"0.8rem\" />\n                  </IconButton>\n                </Flex>\n              </Grid.Item>\n            </Grid.Root>\n          );\n        })}\n        <Box paddingTop={4}>\n          <AddHeaderButton\n            type=\"button\"\n            onClick={() => {\n              addFieldRow('headers', { key: '', value: '' });\n            }}\n            startIcon={<Plus />}\n          >\n            {formatMessage({\n              id: 'Settings.webhooks.create.header',\n              defaultMessage: 'Create new header',\n            })}\n          </AddHeaderButton>\n        </Box>\n      </Box>\n    </Flex>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * HeaderCombobox\n * -----------------------------------------------------------------------------------------------*/\n\ninterface HeaderComboboxProps extends Omit<ComboboxProps, 'children' | 'name'> {\n  name: string;\n  label: string;\n}\n\nconst HeaderCombobox = ({ name, label, ...restProps }: HeaderComboboxProps) => {\n  const [options, setOptions] = React.useState<HTTPHeaders[]>([...HTTP_HEADERS]);\n  const { value: headers } = useField<Header[]>('headers');\n  const field = useField<string>(name);\n\n  React.useEffect(() => {\n    const headerOptions = HTTP_HEADERS.filter(\n      (key) => !headers?.some((header) => header.key !== field.value && header.key === key)\n    );\n\n    setOptions(headerOptions);\n  }, [headers, field.value]);\n\n  const handleChange: ComboboxProps['onChange'] = (value) => {\n    field.onChange(name, value);\n  };\n\n  const handleCreateOption = (value?: string) => {\n    setOptions((prev) => [...prev, value as HTTPHeaders]);\n\n    if (value) {\n      handleChange(value);\n    }\n  };\n\n  return (\n    <DSField.Root name={name} error={field.error}>\n      <DSField.Label>{label}</DSField.Label>\n      <Combobox\n        {...restProps}\n        onClear={() => handleChange('')}\n        onChange={handleChange}\n        onCreateOption={handleCreateOption}\n        placeholder=\"\"\n        creatable\n        value={field.value}\n      >\n        {options.map((key) => (\n          <ComboboxOption value={key} key={key}>\n            {key}\n          </ComboboxOption>\n        ))}\n      </Combobox>\n      <DSField.Error />\n    </DSField.Root>\n  );\n};\n\nconst HTTP_HEADERS = [\n  'A-IM',\n  'Accept',\n  'Accept-Charset',\n  'Accept-Encoding',\n  'Accept-Language',\n  'Accept-Datetime',\n  'Access-Control-Request-Method',\n  'Access-Control-Request-Headers',\n  'Authorization',\n  'Cache-Control',\n  'Connection',\n  'Content-Length',\n  'Content-Type',\n  'Cookie',\n  'Date',\n  'Expect',\n  'Forwarded',\n  'From',\n  'Host',\n  'If-Match',\n  'If-Modified-Since',\n  'If-None-Match',\n  'If-Range',\n  'If-Unmodified-Since',\n  'Max-Forwards',\n  'Origin',\n  'Pragma',\n  'Proxy-Authorization',\n  'Range',\n  'Referer',\n  'TE',\n  'User-Agent',\n  'Upgrade',\n  'Via',\n  'Warning',\n] as const;\n\ntype HTTPHeaders = (typeof HTTP_HEADERS)[number];\n\nexport { HeadersInput };\n"],"names":["AddHeaderButton","styled","TextButton","HeadersInput","formatMessage","useIntl","addFieldRow","useForm","state","removeFieldRow","setFieldValue","onChange","value","useField","removeRow","index","length","key","_jsxs","Flex","direction","alignItems","gap","_jsx","DSField","Label","id","defaultMessage","Box","padding","background","hasRadius","map","val","Grid","Root","Item","xs","col","HeaderCombobox","name","aria-label","label","style","flex","StringInput","type","IconButton","width","height","onClick","color","number","Minus","JSON","stringify","paddingTop","startIcon","Plus","restProps","options","setOptions","React","useState","HTTP_HEADERS","headers","field","useEffect","headerOptions","filter","some","header","handleChange","handleCreateOption","prev","error","Combobox","onClear","onCreateOption","placeholder","creatable","ComboboxOption","Error"],"mappings":"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"}
+{"version":3,"file":"HeadersInput.js","sources":["../../../../../../../../../admin/src/pages/Settings/pages/Webhooks/components/HeadersInput.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Box,\n  Flex,\n  Grid,\n  TextButton,\n  ComboboxOption,\n  Combobox,\n  ComboboxProps,\n  IconButton,\n  Field as DSField,\n} from '@strapi/design-system';\nimport { Minus, Plus } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useField, useForm } from '../../../../../components/Form';\nimport { StringInput } from '../../../../../components/FormInputs/String';\n\nconst AddHeaderButton = styled(TextButton)`\n  cursor: pointer;\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * HeadersInput\n * -----------------------------------------------------------------------------------------------*/\n\ninterface Header {\n  key: HTTPHeaders;\n  value: string;\n}\n\nconst HeadersInput = () => {\n  const { formatMessage } = useIntl();\n\n  const addFieldRow = useForm('HeadersInput', (state) => state.addFieldRow);\n  const removeFieldRow = useForm('HeadersInput', (state) => state.removeFieldRow);\n  const setFieldValue = useForm('HeadersInput', (state) => state.onChange);\n  const { value = [] } = useField<Header[]>('headers');\n  const rowKeyPrefix = React.useId();\n  const nextRowKey = React.useRef(0);\n  const rowKeys = React.useRef<string[]>([]);\n\n  while (rowKeys.current.length < value.length) {\n    rowKeys.current.push(`${rowKeyPrefix}-${nextRowKey.current}`);\n    nextRowKey.current += 1;\n  }\n  rowKeys.current.length = value.length;\n\n  const rows = value.map((_, index) => ({\n    index,\n    key: rowKeys.current[index],\n  }));\n\n  const removeRow = (index: number) => {\n    // Removing the only row clears it in place instead of deleting it, so the list length\n    // stays 1 and its key stays valid. Splicing rowKeys here would drop a key that the render\n    // body regenerates on the next pass, which would remount the row and tear down its inputs.\n    if (value.length === 1) {\n      setFieldValue('headers', [{ key: '', value: '' }]);\n    } else {\n      rowKeys.current.splice(index, 1);\n      removeFieldRow('headers', index);\n    }\n  };\n\n  return (\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\n      <DSField.Label>\n        {formatMessage({\n          id: 'Settings.webhooks.form.headers',\n          defaultMessage: 'Headers',\n        })}\n      </DSField.Label>\n      <Box padding={8} background=\"neutral100\" hasRadius>\n        {rows.map(({ index, key }) => {\n          return (\n            <Grid.Root key={key} gap={4} padding={2}>\n              <Grid.Item xs={12} col={6} direction=\"column\" alignItems=\"stretch\">\n                <HeaderCombobox\n                  name={`headers.${index}.key`}\n                  aria-label={`row ${index + 1} key`}\n                  label={formatMessage({\n                    id: 'Settings.webhooks.key',\n                    defaultMessage: 'Key',\n                  })}\n                />\n              </Grid.Item>\n              <Grid.Item xs={12} col={6} direction=\"column\" alignItems=\"stretch\">\n                <Flex alignItems=\"flex-end\" gap={2}>\n                  <Box style={{ flex: 1 }}>\n                    <StringInput\n                      name={`headers.${index}.value`}\n                      aria-label={`row ${index + 1} value`}\n                      label={formatMessage({\n                        id: 'Settings.webhooks.value',\n                        defaultMessage: 'Value',\n                      })}\n                      type=\"text\"\n                    />\n                  </Box>\n                  <IconButton\n                    width=\"4rem\"\n                    height=\"4rem\"\n                    onClick={() => removeRow(index)}\n                    color=\"primary600\"\n                    label={formatMessage(\n                      {\n                        id: 'Settings.webhooks.headers.remove',\n                        defaultMessage: 'Remove header row {number}',\n                      },\n                      { number: index + 1 }\n                    )}\n                    type=\"button\"\n                  >\n                    <Minus width=\"0.8rem\" />\n                  </IconButton>\n                </Flex>\n              </Grid.Item>\n            </Grid.Root>\n          );\n        })}\n        <Box paddingTop={4}>\n          <AddHeaderButton\n            type=\"button\"\n            onClick={() => {\n              addFieldRow('headers', { key: '', value: '' });\n            }}\n            startIcon={<Plus />}\n          >\n            {formatMessage({\n              id: 'Settings.webhooks.create.header',\n              defaultMessage: 'Create new header',\n            })}\n          </AddHeaderButton>\n        </Box>\n      </Box>\n    </Flex>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * HeaderCombobox\n * -----------------------------------------------------------------------------------------------*/\n\ninterface HeaderComboboxProps extends Omit<ComboboxProps, 'children' | 'name'> {\n  name: string;\n  label: string;\n}\n\nconst HeaderCombobox = ({ name, label, ...restProps }: HeaderComboboxProps) => {\n  const [options, setOptions] = React.useState<HTTPHeaders[]>([...HTTP_HEADERS]);\n  const { value: headers } = useField<Header[]>('headers');\n  const field = useField<string>(name);\n\n  React.useEffect(() => {\n    const headerOptions = HTTP_HEADERS.filter(\n      (key) => !headers?.some((header) => header.key !== field.value && header.key === key)\n    );\n\n    setOptions(headerOptions);\n  }, [headers, field.value]);\n\n  const handleChange: ComboboxProps['onChange'] = (value) => {\n    field.onChange(name, value);\n  };\n\n  const handleCreateOption = (value?: string) => {\n    setOptions((prev) => [...prev, value as HTTPHeaders]);\n\n    if (value) {\n      handleChange(value);\n    }\n  };\n\n  return (\n    <DSField.Root name={name} error={field.error}>\n      <DSField.Label>{label}</DSField.Label>\n      <Combobox\n        {...restProps}\n        onClear={() => handleChange('')}\n        onChange={handleChange}\n        onCreateOption={handleCreateOption}\n        placeholder=\"\"\n        creatable\n        value={field.value}\n      >\n        {options.map((key) => (\n          <ComboboxOption value={key} key={key}>\n            {key}\n          </ComboboxOption>\n        ))}\n      </Combobox>\n      <DSField.Error />\n    </DSField.Root>\n  );\n};\n\nconst HTTP_HEADERS = [\n  'A-IM',\n  'Accept',\n  'Accept-Charset',\n  'Accept-Encoding',\n  'Accept-Language',\n  'Accept-Datetime',\n  'Access-Control-Request-Method',\n  'Access-Control-Request-Headers',\n  'Authorization',\n  'Cache-Control',\n  'Connection',\n  'Content-Length',\n  'Content-Type',\n  'Cookie',\n  'Date',\n  'Expect',\n  'Forwarded',\n  'From',\n  'Host',\n  'If-Match',\n  'If-Modified-Since',\n  'If-None-Match',\n  'If-Range',\n  'If-Unmodified-Since',\n  'Max-Forwards',\n  'Origin',\n  'Pragma',\n  'Proxy-Authorization',\n  'Range',\n  'Referer',\n  'TE',\n  'User-Agent',\n  'Upgrade',\n  'Via',\n  'Warning',\n] as const;\n\ntype HTTPHeaders = (typeof HTTP_HEADERS)[number];\n\nexport { HeadersInput };\n"],"names":["AddHeaderButton","styled","TextButton","HeadersInput","formatMessage","useIntl","addFieldRow","useForm","state","removeFieldRow","setFieldValue","onChange","value","useField","rowKeyPrefix","React","useId","nextRowKey","useRef","rowKeys","current","length","push","rows","map","_","index","key","removeRow","splice","_jsxs","Flex","direction","alignItems","gap","_jsx","DSField","Label","id","defaultMessage","Box","padding","background","hasRadius","Grid","Root","Item","xs","col","HeaderCombobox","name","aria-label","label","style","flex","StringInput","type","IconButton","width","height","onClick","color","number","Minus","paddingTop","startIcon","Plus","restProps","options","setOptions","useState","HTTP_HEADERS","headers","field","useEffect","headerOptions","filter","some","header","handleChange","handleCreateOption","prev","error","Combobox","onClear","onCreateOption","placeholder","creatable","ComboboxOption","Error"],"mappings":"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"}

package/dist/admin/admin/src/pages/Settings/pages/Webhooks/components/HeadersInput.mjs

@@ -16,8 +16,22 @@ const HeadersInput = ()=>{
     const removeFieldRow = useForm('HeadersInput', (state)=>state.removeFieldRow);
     const setFieldValue = useForm('HeadersInput', (state)=>state.onChange);
     const { value = [] } = useField('headers');
+    const rowKeyPrefix = React.useId();
+    const nextRowKey = React.useRef(0);
+    const rowKeys = React.useRef([]);
+    while(rowKeys.current.length < value.length){
+        rowKeys.current.push(`${rowKeyPrefix}-${nextRowKey.current}`);
+        nextRowKey.current += 1;
+    }
+    rowKeys.current.length = value.length;
+    const rows = value.map((_, index)=>({
+            index,
+            key: rowKeys.current[index]
+        }));
     const removeRow = (index)=>{
-        // if we are removing the last row, simply clear it
+        // Removing the only row clears it in place instead of deleting it, so the list length
+        // stays 1 and its key stays valid. Splicing rowKeys here would drop a key that the render
+        // body regenerates on the next pass, which would remount the row and tear down its inputs.
         if (value.length === 1) {
             setFieldValue('headers', [
                 {
@@ -26,6 +40,7 @@ const HeadersInput = ()=>{
                 }
             ]);
         } else {
+            rowKeys.current.splice(index, 1);
             removeFieldRow('headers', index);
         }
     };
@@ -45,7 +60,7 @@ const HeadersInput = ()=>{
                 background: "neutral100",
                 hasRadius: true,
                 children: [
-                    value.map((val, index)=>{
+                    rows.map(({ index, key })=>{
                         return /*#__PURE__*/ jsxs(Grid.Root, {
                             gap: 4,
                             padding: 2,
@@ -107,7 +122,7 @@ const HeadersInput = ()=>{
                                     })
                                 })
                             ]
-                        }, `${index}-${JSON.stringify(val.key)}`);
+                        }, key);
                     }),
                     /*#__PURE__*/ jsx(Box, {
                         paddingTop: 4,

package/dist/admin/admin/src/pages/Settings/pages/Webhooks/components/HeadersInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"HeadersInput.mjs","sources":["../../../../../../../../../admin/src/pages/Settings/pages/Webhooks/components/HeadersInput.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Box,\n  Flex,\n  Grid,\n  TextButton,\n  ComboboxOption,\n  Combobox,\n  ComboboxProps,\n  IconButton,\n  Field as DSField,\n} from '@strapi/design-system';\nimport { Minus, Plus } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useField, useForm } from '../../../../../components/Form';\nimport { StringInput } from '../../../../../components/FormInputs/String';\n\nconst AddHeaderButton = styled(TextButton)`\n  cursor: pointer;\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * HeadersInput\n * -----------------------------------------------------------------------------------------------*/\n\ninterface Header {\n  key: HTTPHeaders;\n  value: string;\n}\n\nconst HeadersInput = () => {\n  const { formatMessage } = useIntl();\n\n  const addFieldRow = useForm('HeadersInput', (state) => state.addFieldRow);\n  const removeFieldRow = useForm('HeadersInput', (state) => state.removeFieldRow);\n  const setFieldValue = useForm('HeadersInput', (state) => state.onChange);\n  const { value = [] } = useField<Header[]>('headers');\n\n  const removeRow = (index: number) => {\n    // if we are removing the last row, simply clear it\n    if (value.length === 1) {\n      setFieldValue('headers', [{ key: '', value: '' }]);\n    } else {\n      removeFieldRow('headers', index);\n    }\n  };\n\n  return (\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\n      <DSField.Label>\n        {formatMessage({\n          id: 'Settings.webhooks.form.headers',\n          defaultMessage: 'Headers',\n        })}\n      </DSField.Label>\n      <Box padding={8} background=\"neutral100\" hasRadius>\n        {value.map((val, index) => {\n          return (\n            <Grid.Root key={`${index}-${JSON.stringify(val.key)}`} gap={4} padding={2}>\n              <Grid.Item xs={12} col={6} direction=\"column\" alignItems=\"stretch\">\n                <HeaderCombobox\n                  name={`headers.${index}.key`}\n                  aria-label={`row ${index + 1} key`}\n                  label={formatMessage({\n                    id: 'Settings.webhooks.key',\n                    defaultMessage: 'Key',\n                  })}\n                />\n              </Grid.Item>\n              <Grid.Item xs={12} col={6} direction=\"column\" alignItems=\"stretch\">\n                <Flex alignItems=\"flex-end\" gap={2}>\n                  <Box style={{ flex: 1 }}>\n                    <StringInput\n                      name={`headers.${index}.value`}\n                      aria-label={`row ${index + 1} value`}\n                      label={formatMessage({\n                        id: 'Settings.webhooks.value',\n                        defaultMessage: 'Value',\n                      })}\n                      type=\"text\"\n                    />\n                  </Box>\n                  <IconButton\n                    width=\"4rem\"\n                    height=\"4rem\"\n                    onClick={() => removeRow(index)}\n                    color=\"primary600\"\n                    label={formatMessage(\n                      {\n                        id: 'Settings.webhooks.headers.remove',\n                        defaultMessage: 'Remove header row {number}',\n                      },\n                      { number: index + 1 }\n                    )}\n                    type=\"button\"\n                  >\n                    <Minus width=\"0.8rem\" />\n                  </IconButton>\n                </Flex>\n              </Grid.Item>\n            </Grid.Root>\n          );\n        })}\n        <Box paddingTop={4}>\n          <AddHeaderButton\n            type=\"button\"\n            onClick={() => {\n              addFieldRow('headers', { key: '', value: '' });\n            }}\n            startIcon={<Plus />}\n          >\n            {formatMessage({\n              id: 'Settings.webhooks.create.header',\n              defaultMessage: 'Create new header',\n            })}\n          </AddHeaderButton>\n        </Box>\n      </Box>\n    </Flex>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * HeaderCombobox\n * -----------------------------------------------------------------------------------------------*/\n\ninterface HeaderComboboxProps extends Omit<ComboboxProps, 'children' | 'name'> {\n  name: string;\n  label: string;\n}\n\nconst HeaderCombobox = ({ name, label, ...restProps }: HeaderComboboxProps) => {\n  const [options, setOptions] = React.useState<HTTPHeaders[]>([...HTTP_HEADERS]);\n  const { value: headers } = useField<Header[]>('headers');\n  const field = useField<string>(name);\n\n  React.useEffect(() => {\n    const headerOptions = HTTP_HEADERS.filter(\n      (key) => !headers?.some((header) => header.key !== field.value && header.key === key)\n    );\n\n    setOptions(headerOptions);\n  }, [headers, field.value]);\n\n  const handleChange: ComboboxProps['onChange'] = (value) => {\n    field.onChange(name, value);\n  };\n\n  const handleCreateOption = (value?: string) => {\n    setOptions((prev) => [...prev, value as HTTPHeaders]);\n\n    if (value) {\n      handleChange(value);\n    }\n  };\n\n  return (\n    <DSField.Root name={name} error={field.error}>\n      <DSField.Label>{label}</DSField.Label>\n      <Combobox\n        {...restProps}\n        onClear={() => handleChange('')}\n        onChange={handleChange}\n        onCreateOption={handleCreateOption}\n        placeholder=\"\"\n        creatable\n        value={field.value}\n      >\n        {options.map((key) => (\n          <ComboboxOption value={key} key={key}>\n            {key}\n          </ComboboxOption>\n        ))}\n      </Combobox>\n      <DSField.Error />\n    </DSField.Root>\n  );\n};\n\nconst HTTP_HEADERS = [\n  'A-IM',\n  'Accept',\n  'Accept-Charset',\n  'Accept-Encoding',\n  'Accept-Language',\n  'Accept-Datetime',\n  'Access-Control-Request-Method',\n  'Access-Control-Request-Headers',\n  'Authorization',\n  'Cache-Control',\n  'Connection',\n  'Content-Length',\n  'Content-Type',\n  'Cookie',\n  'Date',\n  'Expect',\n  'Forwarded',\n  'From',\n  'Host',\n  'If-Match',\n  'If-Modified-Since',\n  'If-None-Match',\n  'If-Range',\n  'If-Unmodified-Since',\n  'Max-Forwards',\n  'Origin',\n  'Pragma',\n  'Proxy-Authorization',\n  'Range',\n  'Referer',\n  'TE',\n  'User-Agent',\n  'Upgrade',\n  'Via',\n  'Warning',\n] as const;\n\ntype HTTPHeaders = (typeof HTTP_HEADERS)[number];\n\nexport { HeadersInput };\n"],"names":["AddHeaderButton","styled","TextButton","HeadersInput","formatMessage","useIntl","addFieldRow","useForm","state","removeFieldRow","setFieldValue","onChange","value","useField","removeRow","index","length","key","_jsxs","Flex","direction","alignItems","gap","_jsx","DSField","Label","id","defaultMessage","Box","padding","background","hasRadius","map","val","Grid","Root","Item","xs","col","HeaderCombobox","name","aria-label","label","style","flex","StringInput","type","IconButton","width","height","onClick","color","number","Minus","JSON","stringify","paddingTop","startIcon","Plus","restProps","options","setOptions","React","useState","HTTP_HEADERS","headers","field","useEffect","headerOptions","filter","some","header","handleChange","handleCreateOption","prev","error","Combobox","onClear","onCreateOption","placeholder","creatable","ComboboxOption","Error"],"mappings":"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"}
+{"version":3,"file":"HeadersInput.mjs","sources":["../../../../../../../../../admin/src/pages/Settings/pages/Webhooks/components/HeadersInput.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Box,\n  Flex,\n  Grid,\n  TextButton,\n  ComboboxOption,\n  Combobox,\n  ComboboxProps,\n  IconButton,\n  Field as DSField,\n} from '@strapi/design-system';\nimport { Minus, Plus } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useField, useForm } from '../../../../../components/Form';\nimport { StringInput } from '../../../../../components/FormInputs/String';\n\nconst AddHeaderButton = styled(TextButton)`\n  cursor: pointer;\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * HeadersInput\n * -----------------------------------------------------------------------------------------------*/\n\ninterface Header {\n  key: HTTPHeaders;\n  value: string;\n}\n\nconst HeadersInput = () => {\n  const { formatMessage } = useIntl();\n\n  const addFieldRow = useForm('HeadersInput', (state) => state.addFieldRow);\n  const removeFieldRow = useForm('HeadersInput', (state) => state.removeFieldRow);\n  const setFieldValue = useForm('HeadersInput', (state) => state.onChange);\n  const { value = [] } = useField<Header[]>('headers');\n  const rowKeyPrefix = React.useId();\n  const nextRowKey = React.useRef(0);\n  const rowKeys = React.useRef<string[]>([]);\n\n  while (rowKeys.current.length < value.length) {\n    rowKeys.current.push(`${rowKeyPrefix}-${nextRowKey.current}`);\n    nextRowKey.current += 1;\n  }\n  rowKeys.current.length = value.length;\n\n  const rows = value.map((_, index) => ({\n    index,\n    key: rowKeys.current[index],\n  }));\n\n  const removeRow = (index: number) => {\n    // Removing the only row clears it in place instead of deleting it, so the list length\n    // stays 1 and its key stays valid. Splicing rowKeys here would drop a key that the render\n    // body regenerates on the next pass, which would remount the row and tear down its inputs.\n    if (value.length === 1) {\n      setFieldValue('headers', [{ key: '', value: '' }]);\n    } else {\n      rowKeys.current.splice(index, 1);\n      removeFieldRow('headers', index);\n    }\n  };\n\n  return (\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\n      <DSField.Label>\n        {formatMessage({\n          id: 'Settings.webhooks.form.headers',\n          defaultMessage: 'Headers',\n        })}\n      </DSField.Label>\n      <Box padding={8} background=\"neutral100\" hasRadius>\n        {rows.map(({ index, key }) => {\n          return (\n            <Grid.Root key={key} gap={4} padding={2}>\n              <Grid.Item xs={12} col={6} direction=\"column\" alignItems=\"stretch\">\n                <HeaderCombobox\n                  name={`headers.${index}.key`}\n                  aria-label={`row ${index + 1} key`}\n                  label={formatMessage({\n                    id: 'Settings.webhooks.key',\n                    defaultMessage: 'Key',\n                  })}\n                />\n              </Grid.Item>\n              <Grid.Item xs={12} col={6} direction=\"column\" alignItems=\"stretch\">\n                <Flex alignItems=\"flex-end\" gap={2}>\n                  <Box style={{ flex: 1 }}>\n                    <StringInput\n                      name={`headers.${index}.value`}\n                      aria-label={`row ${index + 1} value`}\n                      label={formatMessage({\n                        id: 'Settings.webhooks.value',\n                        defaultMessage: 'Value',\n                      })}\n                      type=\"text\"\n                    />\n                  </Box>\n                  <IconButton\n                    width=\"4rem\"\n                    height=\"4rem\"\n                    onClick={() => removeRow(index)}\n                    color=\"primary600\"\n                    label={formatMessage(\n                      {\n                        id: 'Settings.webhooks.headers.remove',\n                        defaultMessage: 'Remove header row {number}',\n                      },\n                      { number: index + 1 }\n                    )}\n                    type=\"button\"\n                  >\n                    <Minus width=\"0.8rem\" />\n                  </IconButton>\n                </Flex>\n              </Grid.Item>\n            </Grid.Root>\n          );\n        })}\n        <Box paddingTop={4}>\n          <AddHeaderButton\n            type=\"button\"\n            onClick={() => {\n              addFieldRow('headers', { key: '', value: '' });\n            }}\n            startIcon={<Plus />}\n          >\n            {formatMessage({\n              id: 'Settings.webhooks.create.header',\n              defaultMessage: 'Create new header',\n            })}\n          </AddHeaderButton>\n        </Box>\n      </Box>\n    </Flex>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * HeaderCombobox\n * -----------------------------------------------------------------------------------------------*/\n\ninterface HeaderComboboxProps extends Omit<ComboboxProps, 'children' | 'name'> {\n  name: string;\n  label: string;\n}\n\nconst HeaderCombobox = ({ name, label, ...restProps }: HeaderComboboxProps) => {\n  const [options, setOptions] = React.useState<HTTPHeaders[]>([...HTTP_HEADERS]);\n  const { value: headers } = useField<Header[]>('headers');\n  const field = useField<string>(name);\n\n  React.useEffect(() => {\n    const headerOptions = HTTP_HEADERS.filter(\n      (key) => !headers?.some((header) => header.key !== field.value && header.key === key)\n    );\n\n    setOptions(headerOptions);\n  }, [headers, field.value]);\n\n  const handleChange: ComboboxProps['onChange'] = (value) => {\n    field.onChange(name, value);\n  };\n\n  const handleCreateOption = (value?: string) => {\n    setOptions((prev) => [...prev, value as HTTPHeaders]);\n\n    if (value) {\n      handleChange(value);\n    }\n  };\n\n  return (\n    <DSField.Root name={name} error={field.error}>\n      <DSField.Label>{label}</DSField.Label>\n      <Combobox\n        {...restProps}\n        onClear={() => handleChange('')}\n        onChange={handleChange}\n        onCreateOption={handleCreateOption}\n        placeholder=\"\"\n        creatable\n        value={field.value}\n      >\n        {options.map((key) => (\n          <ComboboxOption value={key} key={key}>\n            {key}\n          </ComboboxOption>\n        ))}\n      </Combobox>\n      <DSField.Error />\n    </DSField.Root>\n  );\n};\n\nconst HTTP_HEADERS = [\n  'A-IM',\n  'Accept',\n  'Accept-Charset',\n  'Accept-Encoding',\n  'Accept-Language',\n  'Accept-Datetime',\n  'Access-Control-Request-Method',\n  'Access-Control-Request-Headers',\n  'Authorization',\n  'Cache-Control',\n  'Connection',\n  'Content-Length',\n  'Content-Type',\n  'Cookie',\n  'Date',\n  'Expect',\n  'Forwarded',\n  'From',\n  'Host',\n  'If-Match',\n  'If-Modified-Since',\n  'If-None-Match',\n  'If-Range',\n  'If-Unmodified-Since',\n  'Max-Forwards',\n  'Origin',\n  'Pragma',\n  'Proxy-Authorization',\n  'Range',\n  'Referer',\n  'TE',\n  'User-Agent',\n  'Upgrade',\n  'Via',\n  'Warning',\n] as const;\n\ntype HTTPHeaders = (typeof HTTP_HEADERS)[number];\n\nexport { HeadersInput };\n"],"names":["AddHeaderButton","styled","TextButton","HeadersInput","formatMessage","useIntl","addFieldRow","useForm","state","removeFieldRow","setFieldValue","onChange","value","useField","rowKeyPrefix","React","useId","nextRowKey","useRef","rowKeys","current","length","push","rows","map","_","index","key","removeRow","splice","_jsxs","Flex","direction","alignItems","gap","_jsx","DSField","Label","id","defaultMessage","Box","padding","background","hasRadius","Grid","Root","Item","xs","col","HeaderCombobox","name","aria-label","label","style","flex","StringInput","type","IconButton","width","height","onClick","color","number","Minus","paddingTop","startIcon","Plus","restProps","options","setOptions","useState","HTTP_HEADERS","headers","field","useEffect","headerOptions","filter","some","header","handleChange","handleCreateOption","prev","error","Combobox","onClear","onCreateOption","placeholder","creatable","ComboboxOption","Error"],"mappings":"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"}

package/dist/admin/admin/src/pages/Settings/pages/Webhooks/components/WebhookForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"WebhookForm.js","sources":["../../../../../../../../../admin/src/pages/Settings/pages/Webhooks/components/WebhookForm.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Button, Flex, Grid } from '@strapi/design-system';\nimport { Check, Play as Publish } from '@strapi/icons';\nimport { IntlShape, useIntl } from 'react-intl';\nimport * as yup from 'yup';\n\nimport { TriggerWebhook } from '../../../../../../../shared/contracts/webhooks';\nimport { Form, FormHelpers } from '../../../../../components/Form';\nimport { InputRenderer } from '../../../../../components/FormInputs/Renderer';\nimport { Layouts } from '../../../../../components/Layouts/Layout';\nimport { BackButton } from '../../../../../features/BackButton';\nimport { useEnterprise } from '../../../../../hooks/useEnterprise';\n\nimport { EventTableCE } from './EventsTable';\nimport { HeadersInput } from './HeadersInput';\nimport { TriggerContainer } from './TriggerContainer';\n\nimport type { Modules } from '@strapi/types';\n\ninterface WebhookFormValues {\n  name: Modules.WebhookStore.Webhook['name'];\n  url: Modules.WebhookStore.Webhook['url'];\n  headers: Array<{ key: string; value: string }>;\n  events: Modules.WebhookStore.Webhook['events'];\n}\n\ninterface WebhookFormProps {\n  data?: Modules.WebhookStore.Webhook;\n  handleSubmit: (\n    values: WebhookFormValues,\n    helpers: FormHelpers<WebhookFormValues>\n  ) => Promise<void>;\n  isCreating: boolean;\n  isTriggering: boolean;\n  triggerWebhook: () => void;\n  triggerResponse?: TriggerWebhook.Response['data'];\n}\n\nconst WebhookForm = ({\n  handleSubmit,\n  triggerWebhook,\n  isCreating,\n  isTriggering,\n  triggerResponse,\n  data,\n}: WebhookFormProps) => {\n  const { formatMessage } = useIntl();\n  const [showTriggerResponse, setShowTriggerResponse] = React.useState(false);\n  const EventTable = useEnterprise(\n    EventTableCE,\n    async () =>\n      (\n        await import(\n          '../../../../../../../ee/admin/src/pages/SettingsPage/pages/Webhooks/components/EventsTable'\n        )\n      ).EventsTableEE\n  );\n\n  /**\n   * Map the headers into a form that can be used within the formik form\n   */\n  const mapHeaders = (headers: Modules.WebhookStore.Webhook['headers']) => {\n    if (!Object.keys(headers).length) {\n      return [{ key: '', value: '' }];\n    }\n\n    return Object.entries(headers).map(([key, value]) => ({ key, value }));\n  };\n\n  // block rendering until the EE component is fully loaded\n  if (!EventTable) {\n    return null;\n  }\n\n  return (\n    <Form\n      initialValues={{\n        name: data?.name || '',\n        url: data?.url || '',\n        headers: mapHeaders(data?.headers || {}),\n        events: data?.events || [],\n      }}\n      method={isCreating ? 'POST' : 'PUT'}\n      onSubmit={handleSubmit}\n      validationSchema={makeWebhookValidationSchema({ formatMessage })}\n    >\n      {({ isSubmitting, modified }) => (\n        <>\n          <Layouts.Header\n            primaryAction={\n              <Flex width=\"100%\" gap={2}>\n                <Button\n                  onClick={() => {\n                    triggerWebhook();\n                    setShowTriggerResponse(true);\n                  }}\n                  variant=\"tertiary\"\n                  startIcon={<Publish />}\n                  disabled={isCreating || isTriggering}\n                  fullWidth\n                >\n                  {formatMessage({\n                    id: 'Settings.webhooks.trigger',\n                    defaultMessage: 'Trigger',\n                  })}\n                </Button>\n                <Button\n                  startIcon={<Check />}\n                  type=\"submit\"\n                  disabled={!modified}\n                  loading={isSubmitting}\n                  fullWidth\n                >\n                  {formatMessage({\n                    id: 'global.save',\n                    defaultMessage: 'Save',\n                  })}\n                </Button>\n              </Flex>\n            }\n            title={\n              isCreating\n                ? formatMessage({\n                    id: 'Settings.webhooks.create',\n                    defaultMessage: 'Create a webhook',\n                  })\n                : data?.name\n            }\n            navigationAction={\n              // The back link for mobile works differently; it is placed higher up in the DOM.\n              <Box display={{ initial: 'none', medium: 'block' }}>\n                <BackButton fallback=\"../webhooks\" />\n              </Box>\n            }\n          />\n          <Layouts.Content>\n            <Flex direction=\"column\" alignItems=\"stretch\" gap={4}>\n              {showTriggerResponse && (\n                <TriggerContainer\n                  isPending={isTriggering}\n                  response={triggerResponse}\n                  onCancel={() => setShowTriggerResponse(false)}\n                />\n              )}\n              <Box background=\"neutral0\" padding={8} shadow=\"filterShadow\" hasRadius>\n                <Flex direction=\"column\" alignItems=\"stretch\" gap={6}>\n                  <Grid.Root gap={6}>\n                    {[\n                      {\n                        label: formatMessage({\n                          id: 'global.name',\n                          defaultMessage: 'Name',\n                        }),\n                        name: 'name',\n                        required: true,\n                        size: 6,\n                        type: 'string' as const,\n                      },\n                      {\n                        label: formatMessage({\n                          id: 'Settings.roles.form.input.url',\n                          defaultMessage: 'Url',\n                        }),\n                        name: 'url',\n                        required: true,\n                        size: 12,\n                        type: 'string' as const,\n                      },\n                    ].map(({ size, ...field }) => (\n                      <Grid.Item\n                        key={field.name}\n                        col={size}\n                        xs={12}\n                        direction=\"column\"\n                        alignItems=\"stretch\"\n                      >\n                        <InputRenderer {...field} />\n                      </Grid.Item>\n                    ))}\n                  </Grid.Root>\n                  <HeadersInput />\n                  <EventTable />\n                </Flex>\n              </Box>\n            </Flex>\n          </Layouts.Content>\n        </>\n      )}\n    </Form>\n  );\n};\n\nconst NAME_REGEX = /(^$)|(^[A-Za-z][_0-9A-Za-z ]*$)/;\nconst URL_REGEX = /(^$)|((https?:\\/\\/.*)(d*)\\/?(.*))/;\n\nconst makeWebhookValidationSchema = ({ formatMessage }: Pick<IntlShape, 'formatMessage'>) =>\n  yup.object().shape({\n    name: yup\n      .string()\n      .nullable()\n      .required(\n        formatMessage({\n          id: 'Settings.webhooks.validation.name.required',\n          defaultMessage: 'Name is required',\n        })\n      )\n      .matches(\n        NAME_REGEX,\n        formatMessage({\n          id: 'Settings.webhooks.validation.name.regex',\n          defaultMessage:\n            'The name must start with a letter and only contain letters, numbers, spaces and underscores',\n        })\n      ),\n    url: yup\n      .string()\n      .nullable()\n      .required(\n        formatMessage({\n          id: 'Settings.webhooks.validation.url.required',\n          defaultMessage: 'Url is required',\n        })\n      )\n      .matches(\n        URL_REGEX,\n        formatMessage({\n          id: 'Settings.webhooks.validation.url.regex',\n          defaultMessage: 'The value must be a valid Url',\n        })\n      ),\n    headers: yup.lazy((array) => {\n      const baseSchema = yup.array();\n\n      if (array.length === 1) {\n        const { key, value } = array[0];\n\n        if (!key && !value) {\n          return baseSchema;\n        }\n      }\n\n      return baseSchema.of(\n        yup.object().shape({\n          key: yup\n            .string()\n            .required(\n              formatMessage({\n                id: 'Settings.webhooks.validation.key',\n                defaultMessage: 'Key is required',\n              })\n            )\n            .nullable(),\n          value: yup\n            .string()\n            .required(\n              formatMessage({\n                id: 'Settings.webhooks.validation.value',\n                defaultMessage: 'Value is required',\n              })\n            )\n            .nullable(),\n        })\n      );\n    }),\n    events: yup.array(),\n  });\n\nexport { WebhookForm };\nexport type { WebhookFormValues, WebhookFormProps };\n"],"names":["WebhookForm","handleSubmit","triggerWebhook","isCreating","isTriggering","triggerResponse","data","formatMessage","useIntl","showTriggerResponse","setShowTriggerResponse","React","useState","EventTable","useEnterprise","EventTableCE","EventsTableEE","mapHeaders","headers","Object","keys","length","key","value","entries","map","_jsx","Form","initialValues","name","url","events","method","onSubmit","validationSchema","makeWebhookValidationSchema","isSubmitting","modified","_jsxs","_Fragment","Layouts","Header","primaryAction","Flex","width","gap","Button","onClick","variant","startIcon","Publish","disabled","fullWidth","id","defaultMessage","Check","type","loading","title","navigationAction","Box","display","initial","medium","BackButton","fallback","Content","direction","alignItems","TriggerContainer","isPending","response","onCancel","background","padding","shadow","hasRadius","Grid","Root","label","required","size","field","Item","col","xs","InputRenderer","HeadersInput","NAME_REGEX","URL_REGEX","yup","object","shape","string","nullable","matches","lazy","array","baseSchema","of"],"mappings":"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"}
+{"version":3,"file":"WebhookForm.js","sources":["../../../../../../../../../admin/src/pages/Settings/pages/Webhooks/components/WebhookForm.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Button, Flex, Grid } from '@strapi/design-system';\nimport { Check, Play as Publish } from '@strapi/icons';\nimport { IntlShape, useIntl } from 'react-intl';\nimport * as yup from 'yup';\n\nimport { TriggerWebhook } from '../../../../../../../shared/contracts/webhooks';\nimport { Form, FormHelpers } from '../../../../../components/Form';\nimport { InputRenderer } from '../../../../../components/FormInputs/Renderer';\nimport { Layouts } from '../../../../../components/Layouts/Layout';\nimport { BackButton } from '../../../../../features/BackButton';\nimport { useEnterprise } from '../../../../../hooks/useEnterprise';\n\nimport { EventTableCE } from './EventsTable';\nimport { HeadersInput } from './HeadersInput';\nimport { TriggerContainer } from './TriggerContainer';\n\nimport type { Modules } from '@strapi/types';\n\ninterface WebhookFormValues {\n  name: Modules.WebhookStore.Webhook['name'];\n  url: Modules.WebhookStore.Webhook['url'];\n  headers: Array<{ key: string; value: string }>;\n  events: Modules.WebhookStore.Webhook['events'];\n}\n\ninterface WebhookFormProps {\n  data?: Modules.WebhookStore.Webhook;\n  handleSubmit: (\n    values: WebhookFormValues,\n    helpers: FormHelpers<WebhookFormValues>\n  ) => Promise<void>;\n  isCreating: boolean;\n  isTriggering: boolean;\n  triggerWebhook: () => void;\n  triggerResponse?: TriggerWebhook.Response['data'];\n}\n\nconst WebhookForm = ({\n  handleSubmit,\n  triggerWebhook,\n  isCreating,\n  isTriggering,\n  triggerResponse,\n  data,\n}: WebhookFormProps) => {\n  const { formatMessage } = useIntl();\n  const [showTriggerResponse, setShowTriggerResponse] = React.useState(false);\n  const EventTable = useEnterprise(\n    EventTableCE,\n    async () =>\n      (\n        await import('../../../../../../../ee/admin/src/pages/SettingsPage/pages/Webhooks/components/EventsTable')\n      ).EventsTableEE\n  );\n\n  /**\n   * Map the headers into a form that can be used within the formik form\n   */\n  const mapHeaders = (headers: Modules.WebhookStore.Webhook['headers']) => {\n    if (!Object.keys(headers).length) {\n      return [{ key: '', value: '' }];\n    }\n\n    return Object.entries(headers).map(([key, value]) => ({ key, value }));\n  };\n\n  // block rendering until the EE component is fully loaded\n  if (!EventTable) {\n    return null;\n  }\n\n  return (\n    <Form\n      initialValues={{\n        name: data?.name || '',\n        url: data?.url || '',\n        headers: mapHeaders(data?.headers || {}),\n        events: data?.events || [],\n      }}\n      method={isCreating ? 'POST' : 'PUT'}\n      onSubmit={handleSubmit}\n      validationSchema={makeWebhookValidationSchema({ formatMessage })}\n    >\n      {({ isSubmitting, modified }) => (\n        <>\n          <Layouts.Header\n            primaryAction={\n              <Flex width=\"100%\" gap={2}>\n                <Button\n                  onClick={() => {\n                    triggerWebhook();\n                    setShowTriggerResponse(true);\n                  }}\n                  variant=\"tertiary\"\n                  startIcon={<Publish />}\n                  disabled={isCreating || isTriggering}\n                  fullWidth\n                >\n                  {formatMessage({\n                    id: 'Settings.webhooks.trigger',\n                    defaultMessage: 'Trigger',\n                  })}\n                </Button>\n                <Button\n                  startIcon={<Check />}\n                  type=\"submit\"\n                  disabled={!modified}\n                  loading={isSubmitting}\n                  fullWidth\n                >\n                  {formatMessage({\n                    id: 'global.save',\n                    defaultMessage: 'Save',\n                  })}\n                </Button>\n              </Flex>\n            }\n            title={\n              isCreating\n                ? formatMessage({\n                    id: 'Settings.webhooks.create',\n                    defaultMessage: 'Create a webhook',\n                  })\n                : data?.name\n            }\n            navigationAction={\n              // The back link for mobile works differently; it is placed higher up in the DOM.\n              <Box display={{ initial: 'none', medium: 'block' }}>\n                <BackButton fallback=\"../webhooks\" />\n              </Box>\n            }\n          />\n          <Layouts.Content>\n            <Flex direction=\"column\" alignItems=\"stretch\" gap={4}>\n              {showTriggerResponse && (\n                <TriggerContainer\n                  isPending={isTriggering}\n                  response={triggerResponse}\n                  onCancel={() => setShowTriggerResponse(false)}\n                />\n              )}\n              <Box background=\"neutral0\" padding={8} shadow=\"filterShadow\" hasRadius>\n                <Flex direction=\"column\" alignItems=\"stretch\" gap={6}>\n                  <Grid.Root gap={6}>\n                    {[\n                      {\n                        label: formatMessage({\n                          id: 'global.name',\n                          defaultMessage: 'Name',\n                        }),\n                        name: 'name',\n                        required: true,\n                        size: 6,\n                        type: 'string' as const,\n                      },\n                      {\n                        label: formatMessage({\n                          id: 'Settings.roles.form.input.url',\n                          defaultMessage: 'Url',\n                        }),\n                        name: 'url',\n                        required: true,\n                        size: 12,\n                        type: 'string' as const,\n                      },\n                    ].map(({ size, ...field }) => (\n                      <Grid.Item\n                        key={field.name}\n                        col={size}\n                        xs={12}\n                        direction=\"column\"\n                        alignItems=\"stretch\"\n                      >\n                        <InputRenderer {...field} />\n                      </Grid.Item>\n                    ))}\n                  </Grid.Root>\n                  <HeadersInput />\n                  <EventTable />\n                </Flex>\n              </Box>\n            </Flex>\n          </Layouts.Content>\n        </>\n      )}\n    </Form>\n  );\n};\n\nconst NAME_REGEX = /(^$)|(^[A-Za-z][_0-9A-Za-z ]*$)/;\nconst URL_REGEX = /(^$)|((https?:\\/\\/.*)(d*)\\/?(.*))/;\n\nconst makeWebhookValidationSchema = ({ formatMessage }: Pick<IntlShape, 'formatMessage'>) =>\n  yup.object().shape({\n    name: yup\n      .string()\n      .nullable()\n      .required(\n        formatMessage({\n          id: 'Settings.webhooks.validation.name.required',\n          defaultMessage: 'Name is required',\n        })\n      )\n      .matches(\n        NAME_REGEX,\n        formatMessage({\n          id: 'Settings.webhooks.validation.name.regex',\n          defaultMessage:\n            'The name must start with a letter and only contain letters, numbers, spaces and underscores',\n        })\n      ),\n    url: yup\n      .string()\n      .nullable()\n      .required(\n        formatMessage({\n          id: 'Settings.webhooks.validation.url.required',\n          defaultMessage: 'Url is required',\n        })\n      )\n      .matches(\n        URL_REGEX,\n        formatMessage({\n          id: 'Settings.webhooks.validation.url.regex',\n          defaultMessage: 'The value must be a valid Url',\n        })\n      ),\n    headers: yup.lazy((array) => {\n      const baseSchema = yup.array();\n\n      if (array.length === 1) {\n        const { key, value } = array[0];\n\n        if (!key && !value) {\n          return baseSchema;\n        }\n      }\n\n      return baseSchema.of(\n        yup.object().shape({\n          key: yup\n            .string()\n            .required(\n              formatMessage({\n                id: 'Settings.webhooks.validation.key',\n                defaultMessage: 'Key is required',\n              })\n            )\n            .nullable(),\n          value: yup\n            .string()\n            .required(\n              formatMessage({\n                id: 'Settings.webhooks.validation.value',\n                defaultMessage: 'Value is required',\n              })\n            )\n            .nullable(),\n        })\n      );\n    }),\n    events: yup.array(),\n  });\n\nexport { WebhookForm };\nexport type { WebhookFormValues, WebhookFormProps };\n"],"names":["WebhookForm","handleSubmit","triggerWebhook","isCreating","isTriggering","triggerResponse","data","formatMessage","useIntl","showTriggerResponse","setShowTriggerResponse","React","useState","EventTable","useEnterprise","EventTableCE","EventsTableEE","mapHeaders","headers","Object","keys","length","key","value","entries","map","_jsx","Form","initialValues","name","url","events","method","onSubmit","validationSchema","makeWebhookValidationSchema","isSubmitting","modified","_jsxs","_Fragment","Layouts","Header","primaryAction","Flex","width","gap","Button","onClick","variant","startIcon","Publish","disabled","fullWidth","id","defaultMessage","Check","type","loading","title","navigationAction","Box","display","initial","medium","BackButton","fallback","Content","direction","alignItems","TriggerContainer","isPending","response","onCancel","background","padding","shadow","hasRadius","Grid","Root","label","required","size","field","Item","col","xs","InputRenderer","HeadersInput","NAME_REGEX","URL_REGEX","yup","object","shape","string","nullable","matches","lazy","array","baseSchema","of"],"mappings":"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"}