@strapi/admin 4.11.0-exp.9xg4-3qfm-9w8f.1 → 4.11.0

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/WebhookForm/index.js

@@ -1,145 +1,159 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
+import { Field, FormikProvider, useFormik } from 'formik';
+import { useIntl } from 'react-intl';
 import { Form, Link } from '@strapi/helper-plugin';
 import { ArrowLeft, Check, Play as Publish } from '@strapi/icons';
 import {
-  ContentLayout,
-  HeaderLayout,
-  Box,
+  Grid,
+  GridItem,
   Button,
   Flex,
   TextInput,
-  Grid,
-  GridItem,
+  HeaderLayout,
+  ContentLayout,
+  Box,
 } from '@strapi/design-system';
-import { Field, Formik } from 'formik';
 
-import { useIntl } from 'react-intl';
-import EventInput from '../EventInput';
+import EventTable from 'ee_else_ce/pages/SettingsPage/pages/Webhooks/EditView/components/EventTable';
+import { makeWebhookValidationSchema } from './utils/makeWebhookValidationSchema';
 import HeadersInput from '../HeadersInput';
 import TriggerContainer from '../TriggerContainer';
-import schema from '../utils/schema';
 
 const WebhookForm = ({
   handleSubmit,
-  data,
   triggerWebhook,
   isCreating,
   isTriggering,
   triggerResponse,
-  isDraftAndPublishEvents,
+  data,
 }) => {
   const { formatMessage } = useIntl();
   const [showTriggerResponse, setShowTriggerResponse] = useState(false);
 
+  /**
+   * Map the headers into a form that can be used within the formik form
+   * @param {Object} headers
+   * @returns {Array}
+   */
+  const mapHeaders = (headers) => {
+    if (!Object.keys(headers).length) {
+      return [{ key: '', value: '' }];
+    }
+
+    return Object.entries(headers).map(([key, value]) => ({ key, value }));
+  };
+
+  const formik = useFormik({
+    initialValues: {
+      name: data?.name || '',
+      url: data?.url || '',
+      headers: mapHeaders(data?.headers || {}),
+      events: data?.events || [],
+    },
+    onSubmit: handleSubmit,
+    validationSchema: makeWebhookValidationSchema({ formatMessage }),
+    validateOnChange: false,
+    validateOnBlur: false,
+  });
+
   return (
-    <Formik
-      onSubmit={handleSubmit}
-      initialValues={{
-        name: data?.name || '',
-        url: data?.url || '',
-        headers: Object.keys(data?.headers || []).length
-          ? Object.entries(data.headers).map(([key, value]) => ({ key, value }))
-          : [{ key: '', value: '' }],
-        events: data?.events || [],
-      }}
-      validationSchema={schema}
-      validateOnChange={false}
-      validateOnBlur={false}
-    >
-      {({ handleSubmit, errors }) => (
-        <Form noValidate>
-          <HeaderLayout
-            primaryAction={
-              <Flex gap={2}>
-                <Button
-                  onClick={() => {
-                    triggerWebhook();
-                    setShowTriggerResponse(true);
-                  }}
-                  variant="tertiary"
-                  startIcon={<Publish />}
-                  disabled={isCreating || isTriggering}
-                  size="L"
-                >
-                  {formatMessage({
-                    id: 'Settings.webhooks.trigger',
-                    defaultMessage: 'Trigger',
-                  })}
-                </Button>
-                <Button startIcon={<Check />} onClick={handleSubmit} type="submit" size="L">
-                  {formatMessage({
-                    id: 'global.save',
-                    defaultMessage: 'Save',
-                  })}
-                </Button>
-              </Flex>
-            }
-            title={
-              isCreating
-                ? formatMessage({
-                    id: 'Settings.webhooks.create',
-                    defaultMessage: 'Create a webhook',
-                  })
-                : data?.name
-            }
-            navigationAction={
-              <Link startIcon={<ArrowLeft />} to="/settings/webhooks">
+    <FormikProvider value={formik}>
+      <Form onSubmit={formik.handleSubmit}>
+        <HeaderLayout
+          primaryAction={
+            <Flex gap={2}>
+              <Button
+                onClick={() => {
+                  triggerWebhook();
+                  setShowTriggerResponse(true);
+                }}
+                variant="tertiary"
+                startIcon={<Publish />}
+                disabled={isCreating || isTriggering}
+                size="L"
+              >
                 {formatMessage({
-                  id: 'global.back',
-                  defaultMessage: 'Back',
+                  id: 'Settings.webhooks.trigger',
+                  defaultMessage: 'Trigger',
                 })}
-              </Link>
-            }
-          />
-          <ContentLayout>
-            <Flex direction="column" alignItems="stretch" gap={4}>
-              {showTriggerResponse && (
-                <div className="trigger-wrapper">
-                  <TriggerContainer
-                    isPending={isTriggering}
-                    response={triggerResponse}
-                    onCancel={() => setShowTriggerResponse(false)}
-                  />
-                </div>
-              )}
-              <Box background="neutral0" padding={8} shadow="filterShadow" hasRadius>
-                <Flex direction="column" alignItems="stretch" gap={6}>
-                  <Grid gap={6}>
-                    <GridItem col={6}>
-                      <Field
-                        as={TextInput}
-                        name="name"
-                        error={errors.name && formatMessage({ id: errors.name })}
-                        label={formatMessage({
-                          id: 'global.name',
-                          defaultMessage: 'Name',
-                        })}
-                        required
-                      />
-                    </GridItem>
-                    <GridItem col={12}>
-                      <Field
-                        as={TextInput}
-                        name="url"
-                        error={errors.url && formatMessage({ id: errors.url })}
-                        label={formatMessage({
-                          id: 'Settings.roles.form.input.url',
-                          defaultMessage: 'Url',
-                        })}
-                        required
-                      />
-                    </GridItem>
-                  </Grid>
-                  <HeadersInput />
-                  <EventInput isDraftAndPublish={isDraftAndPublishEvents} />
-                </Flex>
-              </Box>
+              </Button>
+              <Button
+                startIcon={<Check />}
+                type="submit"
+                size="L"
+                disabled={!formik.dirty}
+                loading={formik.isSubmitting}
+              >
+                {formatMessage({
+                  id: 'global.save',
+                  defaultMessage: 'Save',
+                })}
+              </Button>
             </Flex>
-          </ContentLayout>
-        </Form>
-      )}
-    </Formik>
+          }
+          title={
+            isCreating
+              ? formatMessage({
+                  id: 'Settings.webhooks.create',
+                  defaultMessage: 'Create a webhook',
+                })
+              : data?.name
+          }
+          navigationAction={
+            <Link startIcon={<ArrowLeft />} to="/settings/webhooks">
+              {formatMessage({
+                id: 'global.back',
+                defaultMessage: 'Back',
+              })}
+            </Link>
+          }
+        />
+        <ContentLayout>
+          <Flex direction="column" alignItems="stretch" gap={4}>
+            {showTriggerResponse && (
+              <TriggerContainer
+                isPending={isTriggering}
+                response={triggerResponse}
+                onCancel={() => setShowTriggerResponse(false)}
+              />
+            )}
+            <Box background="neutral0" padding={8} shadow="filterShadow" hasRadius>
+              <Flex direction="column" alignItems="stretch" gap={6}>
+                <Grid gap={6}>
+                  <GridItem col={6}>
+                    <Field
+                      as={TextInput}
+                      name="name"
+                      error={formik?.errors?.name && formik.errors.name}
+                      label={formatMessage({
+                        id: 'global.name',
+                        defaultMessage: 'Name',
+                      })}
+                      required
+                    />
+                  </GridItem>
+                  <GridItem col={12}>
+                    <Field
+                      as={TextInput}
+                      name="url"
+                      error={formik?.errors?.url && formik.errors.url}
+                      label={formatMessage({
+                        id: 'Settings.roles.form.input.url',
+                        defaultMessage: 'Url',
+                      })}
+                      required
+                    />
+                  </GridItem>
+                </Grid>
+                <HeadersInput />
+                <EventTable />
+              </Flex>
+            </Box>
+          </Flex>
+        </ContentLayout>
+      </Form>
+    </FormikProvider>
   );
 };
 
@@ -148,7 +162,6 @@ WebhookForm.propTypes = {
   handleSubmit: PropTypes.func.isRequired,
   triggerWebhook: PropTypes.func.isRequired,
   isCreating: PropTypes.bool.isRequired,
-  isDraftAndPublishEvents: PropTypes.bool.isRequired,
   isTriggering: PropTypes.bool.isRequired,
   triggerResponse: PropTypes.object,
 };

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/WebhookForm/utils/makeWebhookValidationSchema.js

@@ -0,0 +1,62 @@
+import * as yup from 'yup';
+import { translatedErrors } from '@strapi/helper-plugin';
+
+const NAME_REGEX = /(^$)|(^[A-Za-z][_0-9A-Za-z ]*$)/;
+const URL_REGEX = /(^$)|((https?:\/\/.*)(d*)\/?(.*))/;
+
+export const makeWebhookValidationSchema = ({ formatMessage }) =>
+  yup.object().shape({
+    name: yup
+      .string()
+      .required(
+        formatMessage({
+          id: 'Settings.webhooks.validation.name',
+          defaultMessage: 'Name is required',
+        })
+      )
+      .matches(NAME_REGEX, translatedErrors.regex),
+    url: yup
+      .string()
+      .required(
+        formatMessage({
+          id: 'Settings.webhooks.validation.url.required',
+          defaultMessage: 'Url is required',
+        })
+      )
+      .matches(
+        URL_REGEX,
+        formatMessage({
+          id: translatedErrors.regex,
+          defaultMessage: 'The value does not match the regex',
+        })
+      ),
+    headers: yup.lazy((array) => {
+      let baseSchema = yup.array();
+
+      if (array.length === 1) {
+        const { key, value } = array[0];
+
+        if (!key && !value) {
+          return baseSchema;
+        }
+      }
+
+      return baseSchema.of(
+        yup.object().shape({
+          key: yup.string().required(
+            formatMessage({
+              id: 'Settings.webhooks.validation.key',
+              defaultMessage: 'Key is required',
+            })
+          ),
+          value: yup.string().required(
+            formatMessage({
+              id: 'Settings.webhooks.validation.value',
+              defaultMessage: 'Value is required',
+            })
+          ),
+        })
+      );
+    }),
+    events: yup.array(),
+  });

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/index.js

@@ -1,60 +1,68 @@
-/**
- *
- * EditView
- *
- */
 import * as React from 'react';
 import {
   LoadingIndicatorPage,
   SettingsPageTitle,
   useNotification,
-  useOverlayBlocker,
   useFetchClient,
+  useAPIErrorHandler,
 } from '@strapi/helper-plugin';
 import { Main } from '@strapi/design-system';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 import { useContentTypes } from '../../../../../hooks/useContentTypes';
 import WebhookForm from './components/WebhookForm';
-import cleanData from './utils/formatData';
+
+const cleanData = (data) => ({
+  ...data,
+  headers: data.headers.reduce((acc, { key, value }) => {
+    if (key !== '') {
+      acc[key] = value;
+    }
+
+    return acc;
+  }, {}),
+});
 
 const EditView = () => {
   const {
     params: { id },
   } = useRouteMatch('/settings/webhooks/:id');
+  const isCreating = id === 'create';
 
   const { replace } = useHistory();
-  const { lockApp, unlockApp } = useOverlayBlocker();
   const toggleNotification = useNotification();
+  const { formatAPIError } = useAPIErrorHandler();
   const queryClient = useQueryClient();
-  const { isLoading: isLoadingForModels, collectionTypes } = useContentTypes();
+  const { isLoading: isLoadingForModels } = useContentTypes();
   const { put, get, post } = useFetchClient();
 
-  const isCreating = id === 'create';
-
-  const { isLoading, data } = useQuery(
-    ['get-webhook', id],
+  const {
+    isLoading,
+    data: webhookData,
+    error: webhookError,
+  } = useQuery(
+    ['webhooks', id],
     async () => {
-      try {
-        const {
-          data: { data },
-        } = await get(`/admin/webhooks/${id}`);
+      const {
+        data: { data },
+      } = await get(`/admin/webhooks/${id}`);
 
-        return data;
-      } catch (err) {
-        toggleNotification({
-          type: 'warning',
-          message: { id: 'notification.error' },
-        });
-
-        return null;
-      }
+      return data;
     },
     {
       enabled: !isCreating,
     }
   );
 
+  React.useEffect(() => {
+    if (webhookError) {
+      toggleNotification({
+        type: 'warning',
+        message: formatAPIError(webhookError),
+      });
+    }
+  }, [webhookError, toggleNotification, formatAPIError]);
+
   const {
     isLoading: isTriggering,
     data: triggerResponse,
@@ -64,10 +72,10 @@ const EditView = () => {
 
   const triggerWebhook = () =>
     mutate(null, {
-      onError() {
+      onError(error) {
         toggleNotification({
           type: 'warning',
-          message: { id: 'notification.error' },
+          message: formatAPIError(error),
         });
       },
     });
@@ -78,7 +86,6 @@ const EditView = () => {
 
   const handleSubmit = async (data) => {
     if (isCreating) {
-      lockApp();
       createWebhookMutation.mutate(cleanData(data), {
         onSuccess({ data: result }) {
           toggleNotification({
@@ -86,48 +93,37 @@ const EditView = () => {
             message: { id: 'Settings.webhooks.created' },
           });
           replace(`/settings/webhooks/${result.data.id}`);
-          unlockApp();
         },
-        onError(e) {
+        onError(error) {
           toggleNotification({
             type: 'warning',
-            message: { id: 'notification.error' },
+            message: formatAPIError(error),
           });
-          console.log(e);
-          unlockApp();
         },
       });
-    } else {
-      lockApp();
-      updateWebhookMutation.mutate(
-        { id, body: cleanData(data) },
-        {
-          onSuccess() {
-            queryClient.invalidateQueries(['get-webhook', id]);
-            toggleNotification({
-              type: 'success',
-              message: { id: 'notification.form.success.fields' },
-            });
-            unlockApp();
-          },
-          onError(e) {
-            toggleNotification({
-              type: 'warning',
-              message: { id: 'notification.error' },
-            });
-            console.log(e);
-            unlockApp();
-          },
-        }
-      );
+
+      return;
     }
+    updateWebhookMutation.mutate(
+      { id, body: cleanData(data) },
+      {
+        onSuccess() {
+          queryClient.invalidateQueries(['webhooks', id]);
+          toggleNotification({
+            type: 'success',
+            message: { id: 'notification.form.success.fields' },
+          });
+        },
+        onError(error) {
+          toggleNotification({
+            type: 'warning',
+            message: formatAPIError(error),
+          });
+        },
+      }
+    );
   };
 
-  const isDraftAndPublishEvents = React.useMemo(
-    () => collectionTypes.some((ct) => ct.options.draftAndPublish === true),
-    [collectionTypes]
-  );
-
   if (isLoading || isLoadingForModels) {
     return <LoadingIndicatorPage />;
   }
@@ -137,14 +133,13 @@ const EditView = () => {
       <SettingsPageTitle name="Webhooks" />
       <WebhookForm
         {...{
+          data: webhookData,
           handleSubmit,
-          data,
           triggerWebhook,
           isCreating,
           isTriggering,
           isTriggerIdle,
           triggerResponse: triggerResponse?.data.data,
-          isDraftAndPublishEvents,
         }}
       />
     </Main>

package/admin/src/translations/en.json

@@ -285,6 +285,8 @@
   "Settings.webhooks.create.header": "Create new header",
   "Settings.webhooks.created": "Webhook created",
   "Settings.webhooks.event.publish-tooltip": "This event only exists for contents with Draft/Publish system enabled",
+  "Settings.webhooks.event.select": "Select event",
+  "Settings.webhooks.events.isLoading": "Events loading",
   "Settings.webhooks.events.create": "Create",
   "Settings.webhooks.events.update": "Update",
   "Settings.webhooks.events.delete": "Delete webhook",
@@ -313,6 +315,10 @@
   "Settings.webhooks.trigger.test": "Test-trigger",
   "Settings.webhooks.trigger.title": "Save before Trigger",
   "Settings.webhooks.value": "Value",
+  "Settings.webhooks.validation.name": "Name is required",
+  "Settings.webhooks.validation.url.required": "Url is required",
+  "Settings.webhooks.validation.key": "Key is required",
+  "Settings.webhooks.validation.value": "Value is required",
   "Usecase.back-end": "Back-end developer",
   "Usecase.button.skip": "Skip this question",
   "Usecase.content-creator": "Content Creator",
@@ -795,7 +801,9 @@
   "content-manager.plugin.description.long": "Quick way to see, edit and delete the data in your database.",
   "content-manager.plugin.description.short": "Quick way to see, edit and delete the data in your database.",
   "content-manager.popUpWarning.bodyMessage.contentType.delete": "Are you sure to delete Content-Type?",
-  "content-manager.popUpWarning.bodyMessage.contentType.delete.all": "Are you sure to delete all Content-Types?",
+  "content-manager.popUpWarning.bodyMessage.contentType.delete.all": "Are you sure you want to delete these entries?",
+  "content-manager.popUpWarning.bodyMessage.contentType.publish.all": "Are you sure you want to publish these entries?",
+  "content-manager.popUpWarning.bodyMessage.contentType.unpublish.all": "Are you sure you want to unpublish these entries?",
   "content-manager.popUpWarning.warning.has-draft-relations.title": "Confirmation",
   "content-manager.popUpWarning.warning.publish-question": "Do you still want to publish?",
   "content-manager.popUpWarning.warning.unpublish": "If you don't publish this content, it will automatically turn into a Draft.",
@@ -818,6 +826,8 @@
   "content-manager.success.record.save": "Saved",
   "content-manager.success.record.unpublish": "Unpublished",
   "content-manager.utils.data-loaded": "The {number, plural, =1 {entry has} other {entries have}} successfully been loaded",
+  "content-manager.listView.validation.errors.title": "Action required",
+  "content-manager.listView.validation.errors.message": "Please make sure all fields are valid before publishing (required field, min/max character limit, etc.)",
   "dark": "Dark",
   "form.button.continue": "Continue",
   "form.button.done": "Done",

package/build/3562.e0b1a0b3.chunk.js

@@ -0,0 +1,50 @@
+(self.webpackChunk_strapi_admin=self.webpackChunk_strapi_admin||[]).push([[3562],{51355:function(E,m,r){var n=r(94318),u=r(3387),s="[object Boolean]";function x(v){return v===!0||v===!1||u(v)&&n(v)==s}E.exports=x},95919:function(E,m,r){var n=r(80022);function u(s){return n(s)&&s!=+s}E.exports=u},80022:function(E,m,r){var n=r(94318),u=r(3387),s="[object Number]";function x(v){return typeof v=="number"||u(v)&&n(v)==s}E.exports=x},59578:function(E,m,r){var n=r(41119);function u(s){return n(s).toLowerCase()}E.exports=u},98178:function(E,m,r){"use strict";r.d(m,{P1:function(){return j}});var n="NOT_FOUND";function u(l){var a;return{get:function(t){return a&&l(a.key,t)?a.value:n},put:function(t,o){a={key:t,value:o}},getEntries:function(){return a?[a]:[]},clear:function(){a=void 0}}}function s(l,a){var e=[];function t(p){var f=e.findIndex(function(g){return a(p,g.key)});if(f>-1){var h=e[f];return f>0&&(e.splice(f,1),e.unshift(h)),h.value}return n}function o(p,f){t(p)===n&&(e.unshift({key:p,value:f}),e.length>l&&e.pop())}function i(){return e}function c(){e=[]}return{get:t,put:o,getEntries:i,clear:c}}var x=function(a,e){return a===e};function v(l){return function(e,t){if(e===null||t===null||e.length!==t.length)return!1;for(var o=e.length,i=0;i<o;i++)if(!l(e[i],t[i]))return!1;return!0}}function M(l,a){var e=typeof a=="object"?a:{equalityCheck:a},t=e.equalityCheck,o=t===void 0?x:t,i=e.maxSize,c=i===void 0?1:i,p=e.resultEqualityCheck,f=v(o),h=c===1?u(f):s(c,f);function g(){var d=h.get(arguments);if(d===n){if(d=l.apply(null,arguments),p){var _=h.getEntries(),y=_.find(function(O){return p(O.value,d)});y&&(d=y.value)}h.put(arguments,d)}return d}return g.clearCache=function(){return h.clear()},g}function P(l){var a=Array.isArray(l[0])?l[0]:l;if(!a.every(function(t){return typeof t=="function"})){var e=a.map(function(t){return typeof t=="function"?"function "+(t.name||"unnamed")+"()":typeof t}).join(", ");throw new Error("createSelector expects all input-selectors to be functions, but received the following types: ["+e+"]")}return a}function b(l){for(var a=arguments.length,e=new Array(a>1?a-1:0),t=1;t<a;t++)e[t-1]=arguments[t];var o=function(){for(var c=arguments.length,p=new Array(c),f=0;f<c;f++)p[f]=arguments[f];var h=0,g,d={memoizeOptions:void 0},_=p.pop();if(typeof _=="object"&&(d=_,_=p.pop()),typeof _!="function")throw new Error("createSelector expects an output function after the inputs, but received: ["+typeof _+"]");var y=d,O=y.memoizeOptions,C=O===void 0?e:O,Z=Array.isArray(C)?C:[C],D=P(p),R=l.apply(void 0,[function(){return h++,_.apply(null,arguments)}].concat(Z)),A=l(function(){for(var B=[],S=D.length,T=0;T<S;T++)B.push(D[T].apply(null,arguments));return g=R.apply(null,B),g});return Object.assign(A,{resultFunc:_,memoizedResultFunc:R,dependencies:D,lastResult:function(){return g},recomputations:function(){return h},resetRecomputations:function(){return h=0}}),A};return o}var j=b(M),w=function(a,e){if(e===void 0&&(e=j),typeof a!="object")throw new Error("createStructuredSelector expects first argument to be an object "+("where each property is a selector, instead received a "+typeof a));var t=Object.keys(a),o=e(t.map(function(i){return a[i]}),function(){for(var i=arguments.length,c=new Array(i),p=0;p<i;p++)c[p]=arguments[p];return c.reduce(function(f,h,g){return f[t[g]]=h,f},{})});return o}},83828:function(E,m,r){"use strict";r.d(m,{U:function(){return a},y:function(){return w}});var n=r(74512),u=r(32735),s=r(8471),x=r(91045),v=r(74971),M=r(49372),P=r(87933),b=r(72850);const j=({theme:e,expanded:t,variant:o,disabled:i,error:c})=>c?`1px solid ${e.colors.danger600} !important`:i?`1px solid ${e.colors.neutral150}`:t?`1px solid ${e.colors.primary600}`:o==="primary"?`1px solid ${e.colors.neutral0}`:`1px solid ${e.colors.neutral100}`,w=(0,s.ZP)(M.Z)``,l=(0,s.ZP)(b.x)`
+  border: ${j};
+
+  &:hover:not([aria-disabled='true']) {
+    border: 1px solid ${({theme:e})=>e.colors.primary600};
+
+    ${w} {
+      color: ${({theme:e,expanded:t})=>t?void 0:e.colors.primary700};
+    }
+
+    ${M.Z} {
+      color: ${({theme:e,expanded:t})=>t?void 0:e.colors.primary600};
+    }
+
+    & > ${P.k} {
+      background: ${({theme:e})=>e.colors.primary100};
+    }
+
+    [data-strapi-dropdown='true'] {
+      background: ${({theme:e})=>e.colors.primary200};
+    }
+  }
+`,a=({children:e,disabled:t=!1,error:o,expanded:i=!1,hasErrorMessage:c=!0,id:p,onToggle:f,toggle:h,size:g="M",variant:d="primary",shadow:_})=>{const y=(0,v.M)(p),O=u.useMemo(()=>({expanded:i,onToggle:f,toggle:h,id:y,size:g,variant:d,disabled:t}),[t,i,y,f,g,h,d]);return(0,n.jsxs)(x.S.Provider,{value:O,children:[(0,n.jsx)(l,{"data-strapi-expanded":i,disabled:t,"aria-disabled":t,expanded:i,hasRadius:!0,variant:d,error:o,shadow:_,children:e}),o&&c&&(0,n.jsx)(b.x,{paddingTop:1,children:(0,n.jsx)(M.Z,{variant:"pi",textColor:"danger600",children:o})})]})}},89966:function(E,m,r){"use strict";r.d(m,{v:function(){return x}});var n=r(74512),u=r(91045),s=r(72850);const x=({children:v,...M})=>{const{expanded:P,id:b}=(0,u.A)();if(!P)return null;const j=`accordion-content-${b}`,w=`accordion-label-${b}`,l=`accordion-desc-${b}`;return(0,n.jsx)(s.x,{role:"region",id:j,"aria-labelledby":w,"aria-describedby":l,...M,children:v})}},91045:function(E,m,r){"use strict";r.d(m,{A:function(){return s},S:function(){return u}});var n=r(32735);const u=(0,n.createContext)({disabled:!1,expanded:!1,id:"",size:"M",variant:"primary"}),s=()=>(0,n.useContext)(u)},61762:function(E,m,r){"use strict";r.d(m,{B:function(){return e}});var n=r(74512),u=r(16899),s=r(8471),x=r(83828),v=r(91045);const M=({expanded:t,disabled:o,variant:i})=>{let c="neutral100";return t?c="primary100":o?c="neutral150":i==="primary"&&(c="neutral0"),c};var P=r(7563),b=r(99140),j=r(87933),w=r(49372);const l=(0,s.ZP)(P.A)`
+  text-align: left;
+
+  // necessary to make the ellipsis prop work on the title
+  > span {
+    max-width: 100%;
+  }
+
+  svg {
+    width: ${14/16}rem;
+    height: ${14/16}rem;
+
+    path {
+      fill: ${({theme:t,expanded:o})=>o?t.colors.primary600:t.colors.neutral500};
+    }
+  }
+`,a=(0,s.ZP)(j.k)`
+  min-height: ${({theme:t,size:o})=>t.sizes.accordions[o]};
+  border-radius: ${({theme:t,expanded:o})=>o?`${t.borderRadius} ${t.borderRadius} 0 0`:t.borderRadius};
+
+  &:hover {
+    svg {
+      path {
+        fill: ${({theme:t})=>t.colors.primary600};
+      }
+    }
+  }
+`,e=({title:t,description:o,as:i="span",togglePosition:c="right",action:p,...f})=>{const{onToggle:h,toggle:g,expanded:d,id:_,size:y,variant:O,disabled:C}=(0,v.A)(),Z=`accordion-content-${_}`,D=`accordion-label-${_}`,R=`accordion-desc-${_}`,A=y==="M"?6:4,$=y==="M"?A:A-2,B=M({expanded:d,disabled:C,variant:O}),S={as:i,fontWeight:y==="S"?"bold":void 0,id:D,textColor:d?"primary600":"neutral700",ellipsis:!0,variant:y==="M"?"delta":void 0},T=d?"primary600":"neutral600",W=d?"primary200":"neutral200",L=y==="M"?`${32/16}rem`:`${24/16}rem`,I=()=>{C||(g&&!h?(console.warn('Deprecation warning: Usage of "toggle" prop in Accordion component is deprecated. This is discouraged and will be removed in the next major release. Please use "onToggle" instead'),g()):h&&h())},U=(0,n.jsx)(j.k,{justifyContent:"center",borderRadius:"50%",height:L,width:L,transform:d?"rotate(180deg)":void 0,"data-strapi-dropdown":!0,"aria-hidden":!0,as:"span",background:W,cursor:C?"not-allowed":"pointer",onClick:I,shrink:0,children:(0,n.jsx)(b.J,{as:u.Z,width:y==="M"?`${11/16}rem`:`${8/16}rem`,color:d?"primary600":"neutral600"})});return(0,n.jsx)(a,{paddingBottom:$,paddingLeft:A,paddingRight:A,paddingTop:$,background:B,expanded:d,size:y,justifyContent:"space-between",cursor:C?"not-allowed":"",children:(0,n.jsxs)(j.k,{gap:3,flex:1,maxWidth:"100%",children:[c==="left"&&U,(0,n.jsx)(l,{onClick:I,"aria-disabled":C,"aria-expanded":d,"aria-controls":Z,"aria-labelledby":D,"data-strapi-accordion-toggle":!0,expanded:d,type:"button",flex:1,minWidth:0,...f,children:(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(x.y,{...S,children:t}),o&&(0,n.jsx)(w.Z,{as:"p",id:R,textColor:T,children:o})]})}),c==="right"&&(0,n.jsxs)(j.k,{gap:3,children:[U,p]}),c==="left"&&p]})})}},47081:function(E,m,r){"use strict";r.d(m,{Z:function(){return s}});var n=r(74512);const u=x=>(0,n.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1rem",height:"1rem",fill:"none",viewBox:"0 0 24 24",...x,children:[(0,n.jsx)("path",{fill:"#212134",d:"M16.563 5.587a2.503 2.503 0 1 0 0-5.007 2.503 2.503 0 0 0 0 5.007Z"}),(0,n.jsx)("path",{fill:"#212134",d:"M18.487 3.083c-.012.788-.487 1.513-1.229 1.797a1.954 1.954 0 0 1-2.184-.574A1.943 1.943 0 0 1 14.9 2.11c.4-.684 1.2-1.066 1.981-.927a1.954 1.954 0 0 1 1.606 1.9c.011.748 1.17.748 1.158 0A3.138 3.138 0 0 0 17.565.17c-1.176-.423-2.567-.03-3.36.933-.83 1.002-.968 2.45-.284 3.575.678 1.124 1.993 1.674 3.273 1.431 1.432-.272 2.428-1.593 2.451-3.019.012-.753-1.147-.753-1.158-.006ZM16.563 14.372a2.503 2.503 0 1 0 0-5.007 2.503 2.503 0 0 0 0 5.007Z"}),(0,n.jsx)("path",{fill:"#212134",d:"M18.487 11.867c-.012.789-.487 1.513-1.229 1.797a1.954 1.954 0 0 1-2.184-.574 1.943 1.943 0 0 1-.174-2.196c.4-.684 1.2-1.066 1.981-.927.928.156 1.588.968 1.606 1.9.011.748 1.17.748 1.158 0a3.138 3.138 0 0 0-2.08-2.914c-1.176-.423-2.567-.029-3.36.933-.83 1.002-.968 2.45-.284 3.575.678 1.124 1.993 1.675 3.273 1.431 1.432-.272 2.428-1.593 2.451-3.019.012-.753-1.147-.753-1.158-.005ZM16.563 23.392a2.503 2.503 0 1 0 0-5.006 2.503 2.503 0 0 0 0 5.006Z"}),(0,n.jsx)("path",{fill:"#212134",d:"M18.487 20.89c-.012.787-.487 1.512-1.229 1.796a1.954 1.954 0 0 1-2.184-.574 1.943 1.943 0 0 1-.174-2.196c.4-.684 1.2-1.066 1.981-.927.928.156 1.588.967 1.606 1.9.011.748 1.17.748 1.158 0a3.138 3.138 0 0 0-2.08-2.914c-1.176-.423-2.567-.03-3.36.933-.83 1.002-.968 2.45-.284 3.575.678 1.124 1.993 1.674 3.273 1.431 1.432-.272 2.428-1.593 2.451-3.019.012-.753-1.147-.753-1.158-.006ZM7.378 5.622a2.503 2.503 0 1 0 0-5.007 2.503 2.503 0 0 0 0 5.007Z"}),(0,n.jsx)("path",{fill:"#212134",d:"M9.302 3.119c-.011.788-.486 1.512-1.228 1.796a1.954 1.954 0 0 1-2.185-.574 1.943 1.943 0 0 1-.173-2.196c.4-.684 1.199-1.066 1.981-.927a1.943 1.943 0 0 1 1.605 1.9c.012.748 1.17.748 1.16 0A3.138 3.138 0 0 0 8.38.205c-1.176-.423-2.567-.029-3.36.933-.83 1.002-.968 2.45-.285 3.575.678 1.124 1.994 1.675 3.274 1.431 1.431-.272 2.428-1.593 2.451-3.019.012-.753-1.147-.753-1.159-.005ZM7.378 14.406a2.503 2.503 0 1 0 0-5.006 2.503 2.503 0 0 0 0 5.006Z"}),(0,n.jsx)("path",{fill:"#212134",d:"M9.302 11.902c-.011.788-.486 1.513-1.228 1.797a1.954 1.954 0 0 1-2.185-.574 1.943 1.943 0 0 1-.173-2.196c.4-.684 1.199-1.066 1.981-.927a1.943 1.943 0 0 1 1.605 1.9c.012.748 1.17.748 1.16 0A3.138 3.138 0 0 0 8.38 8.988c-1.176-.423-2.567-.03-3.36.933-.83 1.002-.968 2.45-.285 3.575.678 1.124 1.994 1.674 3.274 1.431 1.431-.272 2.428-1.593 2.451-3.019.012-.753-1.147-.753-1.159-.006ZM7.378 23.427a2.503 2.503 0 1 0 0-5.007 2.503 2.503 0 0 0 0 5.007Z"}),(0,n.jsx)("path",{fill:"#212134",d:"M9.302 20.924c-.011.788-.486 1.513-1.228 1.797a1.954 1.954 0 0 1-2.185-.574 1.943 1.943 0 0 1-.173-2.196c.4-.684 1.199-1.066 1.981-.927.933.156 1.594.967 1.605 1.9.012.748 1.17.748 1.16 0A3.139 3.139 0 0 0 8.38 18.01c-1.176-.423-2.567-.03-3.36.933-.83 1.002-.968 2.45-.285 3.569.678 1.124 1.994 1.675 3.274 1.431 1.431-.272 2.428-1.593 2.451-3.019.012-.747-1.147-.747-1.159 0Z"})]}),s=u},86308:function(E,m,r){"use strict";r.d(m,{Z:function(){return s}});var n=r(74512);const u=x=>(0,n.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1rem",height:"1rem",fill:"none",viewBox:"0 0 24 24",...x,children:[(0,n.jsx)("circle",{cx:12,cy:12,r:12,fill:"#212134"}),(0,n.jsx)("path",{fill:"#F6F6F9",d:"M17 12.569c0 .124-.1.224-.225.224h-3.981v3.982c0 .124-.101.225-.226.225h-1.136a.225.225 0 0 1-.226-.225v-3.981H7.226A.225.225 0 0 1 7 12.567v-1.136c0-.125.1-.226.225-.226h3.982V7.226c0-.124.1-.225.224-.225h1.138c.124 0 .224.1.224.225v3.982h3.982c.124 0 .225.1.225.224v1.138Z"})]}),s=u}}]);