6.17.17

@comet/[email protected]

Patch Changes

• 8ef35ec: Fix input validation for missing child blocks

5.9.6

@comet/[email protected]

Patch Changes

• 31029dc: Fix input validation for missing child blocks

7.10.0

@comet/[email protected]

Minor Changes

• 8f924d5: Add new custom Dialog

  The component extends the MUI Dialog component to enable common use cases:

  • The title prop can be used to set the dialog title
  • A close button is shown when the onClose is used

  Example

  <Dialog
      title="Dialog Title"
      onClose={() => {
          // Handle dialog closing here
      }}
  />

• 6eba5ab: Add a forceVerticalContainerSize prop to FieldContainer

  Use it to define below which container size the vertical styling is applied when using the horizontal variant.

• 589b0b9: Enhance FieldContainer with secondaryHelperText prop and helperTextIcon prop

  • helperTextIcon displays an icon alongside the text for helperText, error or warning.
  • secondaryHelperText provides an additional helper text positioned beneath the input field, aligned to the bottom-right corner.

  Example:

  <FieldContainer label="Helper Text Icon" helperTextIcon={<Info />} helperText="Helper Text with icon" secondaryHelperText="0/100">
      <InputBase onChange={handleChange} value={value} placeholder="Placeholder" />
  </FieldContainer>

Patch Changes

• aa02ca1: Fix a bug in useDataGridExcelExport that would cause an Excel export to fail when a cell's value was undefined
• 6eba5ab: Prevent unintended layout shift after the initial render of FieldContainer when using the horizontal variant
• bf6b03f: Fix alignment of Alert icon with the title

@comet/[email protected]

Minor Changes

• 7e94c55: Rework GridFilterPanel to match the updated Comet CI

• 22f3d40: Adapt Chip styling to align with Comet DXP design

  • Fix hover styling
  • Add new styling for <Chip variant="filled" color="info">

• 589b0b9: Enhance FieldContainer with secondaryHelperText prop and helperTextIcon prop

  • helperTextIcon displays an icon alongside the text for helperText, error or warning.
  • secondaryHelperText provides an additional helper text positioned beneath the input field, aligned to the bottom-right corner.

  Example:

  <FieldContainer label="Helper Text Icon" helperTextIcon={<Info />} helperText="Helper Text with icon" secondaryHelperText="0/100">
      <InputBase onChange={handleChange} value={value} placeholder="Placeholder" />
  </FieldContainer>

Patch Changes

• b51bf6d: Adapt Radio and Checkbox styling to Comet DXP design

  Fix colors of disabled states.

• 71876ea: Adapt size of arrow in Select and Autocomplete fields according to Comet DXP design

@comet/[email protected]

Minor Changes

• 2b9fac2: Add support for passing title and alt text to useDamFileUpload

  This can be useful when importing files from an external DAM.

Patch Changes

• d210ef7: Remove vertical and horizontal scroll bars from block preview iframe

@comet/[email protected]

Patch Changes

• 7b2adae: API Generator: Don't generate an update input for the single generator

7.9.0

@comet/[email protected]

Minor Changes

• 6d6131b: Add the dataGridDateColumn and dataGridDateTimeColumn helpers for using the "date" and "dateTime" types in Data Grid

  -import { GridColDef } from "@comet/admin";
  +import { GridColDef, dataGridDateColumn, dataGridDateTimeColumn } from "@comet/admin";
  
   // ...
  
   const columns: GridColDef[] = [
       {
  -       type: "date",
  -       valueGetter: ({ value }) => value && new Date(value),
  -       renderCell: ({ value }) => value && <FormattedDate value={value} dateStyle="medium" />,
  +       ...dataGridDateColumn,
          field: "createdAt",
          headerName: "Created At",
       },
       {
  -      type: "dateTime",
  -      valueGetter: ({ value }) => value && new Date(value),
  -      renderCell: ({ value }) => value && <FormattedDate value={value} dateStyle="medium" timeStyle="short" />,
  +      ...dataGridDateTimeColumn,
         field: "updatedAt",
         headerName: "Updated At",
       },
   ];

• 7cea765: Add UI for Impersonation Feature

  • Add indicator to display when impersonation mode is active in UserHeaderItem
  • Add button to allow users to switch on impersonation in the UserGrid
  • Integrate CrudMoreActionsMenu in UserPageToolbar with an impersonation entry for easy access to this feature.
  • Add ImpersonateUser icon

Patch Changes

• 48cac4d: Fix styling issues of inputs like FinalFormInput, FinalFormNumberInput, FinalFormSelect, TextAreaField

  • Change background-color, border-color and color of the label for different states (default, disabled and focused).
  • For required inputs, fix spacing between the label and asterisk.
  • Fix font-weight and margin of helperText.

• 0919e3b: Remove right padding from form fields without an end adornment

@comet/[email protected]

Patch Changes

• 1d73f3f: Add missing spacing to the clear-color button of ColorPicker

@comet/[email protected]

Minor Changes

• 7cea765: Add UI for Impersonation Feature

  • Add indicator to display when impersonation mode is active in UserHeaderItem
  • Add button to allow users to switch on impersonation in the UserGrid
  • Integrate CrudMoreActionsMenu in UserPageToolbar with an impersonation entry for easy access to this feature.
  • Add ImpersonateUser icon

Patch Changes

• 55d40ef: Add icon for indeterminate checkbox

@comet/[email protected]

Minor Changes

• 9aa6947: Add hover styling for MUI's Switch

Patch Changes

• 48cac4d: Fix styling issues of inputs like FinalFormInput, FinalFormNumberInput, FinalFormSelect, TextAreaField

  • Change background-color, border-color and color of the label for different states (default, disabled and focused).
  • For required inputs, fix spacing between the label and asterisk.
  • Fix font-weight and margin of helperText.

• 55d40ef: Add icon for indeterminate checkbox

@comet/[email protected]

Minor Changes

• 92f9d07: Add hiddenForState option to createCompositeBlock

  This function can be used to hide a block in the AdminComponent for a given state.

  Example

  const TextWithMediaVariantBlock = createCompositeBlock({
      name: "TextWithMediaVariant",
      blocks: {
          variant: {
              block: createCompositeBlockSelectField<string>({
                  defaultValue: "text-image",
                  fieldProps: { label: "Variant", fullWidth: true },
                  options: [
                      { value: "text-image", label: "Text Image" },
                      { value: "text-only", label: "Text Only" },
                  ],
              }),
          },
          text: {
              block: RichTextBlock,
          },
          media: {
              block: MediaBlock,
              // The media block isn't needed for the "text-only" variant
              hiddenForState: (state) => state.variant === "text-only",
          },
      },
  });

• 047b9d1: Add label prop to ColumnsLayoutPreview

  Use it to customize the label of the column displayed in the FinalFormLayoutSelect.
  For instance, to add an icon or add custom text:

  <ColumnsLayoutPreviewContent width={10} label={<Image />} />

• 59b4b6f: Add visibleOrderedBlocksForState option to createCompositeBlock

  The option can be used to hide and order child blocks in the AdminComponent.
  It should return an array of visible block keys for a given state.
  The order of the keys define the order in which the blocks will be rendered.
  If key is not present in the array, the block will not be rendered.

  Example

  const LayoutBlock = createCompositeBlock({
      /* ... */
      blocks: {
          layout: {
              /* A layout select */
          },
          headline1: { block: HeadlineBlock },
          image1: { block: DamImageBlock },
          headline2: { block: HeadlineBlock },
          image2: { block: DamImageBlock },
      },
      visibleOrderedBlocksForState: (state: LayoutBlockData) => {
          if (state.layout === "compact") {
              // headline2 and image2 will be hidden
              return ["headline1", "image1"];
          } else {
              return ["headline1", "image1", "headline2", "image2"];
          }
      },
  });

@comet/[email protected]

Minor Changes

• 7cea765: Add UI for Impersonation Feature

  • Add indicator to display when impersonation mode is active in UserHeaderItem
  • Add button to allow users to switch on impersonation in the UserGrid
  • Integrate CrudMoreActionsMenu in UserPageToolbar with an impersonation entry for easy access to this feature.
  • Add ImpersonateUser icon

Patch Changes

• 6d6131b: Use consistent date and time formatting across the Admin UI
• 27510c2: Prevent ContentScopeIndicator from crashing when a scope part is undefined
• 8ed5795: Don't add non-existing scope parts to the DamScope as undefined
• 7ce4b0f: Fix DAM license duration input when no values are provided

7.8.0

@comet/[email protected]

Minor Changes

• 139616b: Add FullHeightContent component

  Used to help components take advantage of all the available content height, e.g., when using a DataGrid inside Tabs already contained in a MainContent component.

  Usage example for FullHeightContent:

  <MainContent>
      <RouterTabs>
          <RouterTab label="DataGrid Example" path="">
              <FullHeightContent>
                  <DataGrid />
              </FullHeightContent>
          </RouterTab>
          <RouterTab label="Another tab" path="/another-tab">
              Content of another tab
          </RouterTab>
      </RouterTabs>
  </MainContent>

  Example where MainContent with fullHeight should be used, instead of FullHeightContent:

  <MainContent fullHeight>
      <DataGrid />
  </MainContent>

• d8fca05: Add second InitialFormValues generic to FinalForm

  This allows differentiating between a form's values and initial values.

• d8298d5: Add the StackMainContent component

  This version of MainContent only adds content spacing and height when it's the last visible StackSwitch.
  Using StackMainContent instead of MainContent prevents unintended or duplicate spacings in cases where multiple MainContent components are used inside nested StackSwitch components.

Patch Changes

• a168e55: Open collapsible menu item on refresh if its child or sub-child is selected

• e16ad1a: Fix a bug that prevented dynamically rendered tabs in Tabs

• 139616b: Fix the fullHeight behavior of MainContent

  When used inside certain elements, e.g. with position: relative, the height would be calculated incorrectly.

• eefb054: Render empty values correctly when using renderStaticSelectCell as a DataGrid column's renderCell function

• 795ec73: Fix the spacing between the text and chip in CrudMoreActionsMenu

• 8617c3b: Fix URL prefix in SubRouteIndexRoute

• daacf1e: Fix a bug in ToolbarBreadcrumbs where it was possible to open the mobile breadcrumbs menu when there were no items to be shown in the menu

• 9cc75c1: Prevent the width of the mobile breadcrumbs menu of ToolbarBreadcrumbs from being far too small

@comet/[email protected]

Minor Changes

• e78315c: Add ContactPage icon
• c6d3ac3: Add new icons Backward and Forward

@comet/[email protected]

Minor Changes

• 059636a: Pass the graphQLApiUrl for useBlockPreviewFetch through the IFrameBridge

  It's not necessary to set it in the site anymore. To migrate, remove the argument from useBlockPreviewFetch():

  const PreviewPage = () => {
      const iFrameBridge = useIFrameBridge();
  
  -   const { fetch, graphQLFetch } = useBlockPreviewFetch(graphQLApiUrl);
  +   const { fetch, graphQLFetch } = useBlockPreviewFetch();
  
      const [blockData, setBlockData] = useState<PageContentBlockData>();
      useEffect(() => {
          async function load() {
  +           if (!graphQLFetch) {
  +               return;
  +           }
              if (!iFrameBridge.block) {
                  setBlockData(undefined);
                  return;
              }
              const newData = await recursivelyLoadBlockData({
                  blockType: "PageContent",
                  blockData: iFrameBridge.block,
                  graphQLFetch,
                  fetch,
                  pageTreeNodeId: undefined, //we don't have a pageTreeNodeId in preview
              });
              setBlockData(newData);
          }
          load();
      }, [iFrameBridge.block, fetch, graphQLFetch]);
  
      return <div>{blockData && <PageContentBlock data={blockData} />}</div>;
  };

Patch Changes

• 4338a6c: Make the space select required in the form when using createSpaceBlock()

@comet/[email protected]

Minor Changes

• 44a5455: Allow replacing a file with a new one on the file detail page in the DAM

• b721ac0: Harmonize the size and alignment of the DAM filters

• c6d3ac3: Add support for file replacement on upload in the DAM

  When uploading a file to the DAM with the same filename as an existing file, it's now possible to replace the existing file.
  This is useful when you want to update a file without changing its URL.

• 4037b4d: Rework the DAM crop/focus settings UI

• 059636a: Pass the graphQLApiUrl for useBlockPreviewFetch through the IFrameBridge

  It's not necessary to set it in the site anymore. To migrate, remove the argument from useBlockPreviewFetch():

  const PreviewPage = () => {
      const iFrameBridge = useIFrameBridge();
  
  -   const { fetch, graphQLFetch } = useBlockPreviewFetch(graphQLApiUrl);
  +   const { fetch, graphQLFetch } = useBlockPreviewFetch();
  
      const [blockData, setBlockData] = useState<PageContentBlockData>();
      useEffect(() => {
          async function load() {
  +           if (!graphQLFetch) {
  +               return;
  +           }
              if (!iFrameBridge.block) {
                  setBlockData(undefined);
                  return;
              }
              const newData = await recursivelyLoadBlockData({
                  blockType: "PageContent",
                  blockData: iFrameBridge.block,
                  graphQLFetch,
                  fetch,
                  pageTreeNodeId: undefined, //we don't have a pageTreeNodeId in preview
              });
              setBlockData(newData);
          }
          load();
      }, [iFrameBridge.block, fetch, graphQLFetch]);
  
      return <div>{blockData && <PageContentBlock data={blockData} />}</div>;
  };

Patch Changes

• bfa5dba: Fix schema generation if FileUpload object type isn't used

  Previously, the file uploads module always added the downloadUrl and imageUrl fields to the FileUpload object type, even if the type wasn't used in the application.
  This lead to errors when generating the GraphQL schema.

  Now, the fields are only added if the download option of the module is used.

  Note: As a consequence, the finalFormFileUploadFragment doesn't include the fields anymore.
  To enable downloading file uploads in forms, use the newly added finalFormFileUploadDownloadableFragment:

  export const productFormFragment = gql`
      fragment ProductFormFragment on Product {
          priceList {
  -           ...FinalFormFileUpload
  +           ...FinalFormFileUploadDownloadable
          }
      }
  
  -   ${finalFormFileUploadFragment}
  +   ${finalFormFileUploadDownloadableFragment}
  `;

• 62ead06: Master Menu: render collapsible or grouped menu items only when at least one item of the submenu is allowed.

@comet/[email protected]

Patch Changes

• f20ec6c: Make class-validator a peer dependency

@comet/[email protected]

Minor Changes

• 44a5455: Allow replacing a file with a new one on the file detail page in the DAM

• 45fbc54: Rename User to UserPermissionsUser in GraphQL schema

  This prevents naming collisions if a web wants to use a User type.

  Additionally prefix remaining user permissions-specific actions with UserPermissions.

• c6d3ac3: Add support for file replacement on upload in the DAM

  When uploading a file to the DAM with the same filename as an existing file, it's now possible to replace the existing file.
  This is useful when you want to update a file without changing its URL.

Patch Changes

• bfa5dba: Fix schema generation if FileUpload object type isn't used

  Previously, the file uploads module always added the downloadUrl and imageUrl fields to the FileUpload object type, even if the type wasn't used in the application.
  This lead to errors when generating the GraphQL schema.

  Now, the fields are only added if the download option of the module is used.

  Note: As a consequence, the finalFormFileUploadFragment doesn't include the fields anymore.
  To enable downloading file uploads in forms, use the newly added finalFormFileUploadDownloadableFragment:

  export const productFormFragment = gql`
      fragment ProductFormFragment on Product {
          priceList {
  -           ...FinalFormFileUpload
  +           ...FinalFormFileUploadDownloadable
          }
      }
  
  -   ${finalFormFileUploadFragment}
  +   ${finalFormFileUploadDownloadableFragment}
  `;

• 02a5bdc: API Generator: Fix generated types for position code

• f20ec6c: Make class-validator a peer dependency

@comet/[email protected]

Minor Changes

• 2352959: Export convertPreviewDataToHeaders to make createGraphQLFetch more configurable

• 059636a: Pass the graphQLApiUrl for useBlockPreviewFetch through the IFrameBridge

  It's not necessary to set it in the site anymore. To migrate, remove the argument from useBlockPreviewFetch():

  const PreviewPage = () => {
      const iFrameBridge = useIFrameBridge();
  
  -   const { fetch, graphQLFetch } = useBlockPreviewFetch(graphQLApiUrl);
  +   const { fetch, graphQLFetch } = useBlockPreviewFetch();
  
      const [blockData, setBlockData] = useState<PageContentBlockData>();
      useEffect(() => {
          async function load() {
  +           if (!graphQLFetch) {
  +               return;
  +           }
              if (!iFrameBridge.block) {
                  ...

6.17.16

@comet/[email protected]

Patch Changes

• ee5b5ae: DAM: Fix/set cache-control headers

  • Public endpoints should cache files for 1 day
  • Private endpoints should cache files for 1 year - but only in local caches (not CDN)

5.9.5

@comet/[email protected]

Patch Changes

• ec67253: DAM: Fix/set cache-control headers

  • Public endpoints should cache files for 1 day
  • Private endpoints should cache files for 1 year - but only in local caches (not CDN)

7.7.0

@comet/[email protected]

Patch Changes

• 8ffc90e: Set the select field in OneOfBlock to required based on the allowEmpty prop

• a9d2e2e: Fix linking from block preview to block admin for composite + list/blocks/columns block combinations

  Previously, the generated route was wrong if a composite contained multiple nested list, blocks or columns blocks.

@comet/[email protected]

Minor Changes

• 6cb498f: Add search results highlighting to ContentScopeSelect

  Also, add the helper function findTextMatches, which can be used to add search highlighting to a custom renderOption implementation:

  <ContentScopeSelect
      renderOption={(option, query) => {
          const text = `${option.domain.label} – ${option.language.label}`;
          const matches = findTextMatches(text, query);
          return <ListItemText primary={<MarkedMatches text={text} matches={matches} />} />;
      }}
  />

Patch Changes

• bb9215f: Don't move files to a folder called "." when uploading them to the DAM

  This bug only occurred in projects with a react-dropzone version >= 14.3.2.

@comet/[email protected]

Patch Changes

• af892c1: Prevent the API from crashing because of stream errors when delivering a file

• 253aebb: Allow overriding requestHandler in BlobStorageS3Storage

• af892c1: Prevent socket exhaustion in BlobStorageS3Storage

  By default, the S3 client allows a maximum of 50 open sockets.
  A socket is only released once a file is streamed completely.
  Meaning, it can remain open forever if a file stream is interrupted (e.g., when the user leaves the site).
  This could lead to socket exhaustion, preventing further file delivery.

  To resolve this, the following changes were made:

  1. Add a close handler to destroy the stream when the client disconnects
  2. Set a 60-second requestTimeout to close unused connections

@comet/[email protected]

Minor Changes

• 723a0b8: Disable showing related videos from other channels in YouTubeVideoBlock

  By setting the parameter rel to 0 only related videos from the same channel as the embedded video are shown.

6.17.15

@comet/[email protected]

Patch Changes

• 5e2e45e: Prevent the API from crashing because of stream errors when delivering a file

• 5e2e45e: Prevent socket exhaustion in BlobStorageS3Storage

  By default, the S3 client allows a maximum of 50 open sockets.
  A socket is only released once a file is streamed completely.
  Meaning, it can remain open forever if a file stream is interrupted (e.g., when the user leaves the site).
  This could lead to socket exhaustion, preventing further file delivery.

  To resolve this, the following changes were made:

  1. Add a close handler to destroy the stream when the client disconnects
  2. Set a 60-second requestTimeout to close unused connections

6.17.14

@comet/[email protected]

Patch Changes

• 1515d0a: Don't move files to a folder called "." when uploading them to the DAM

  This bug only occurred in projects with a react-dropzone version >= 14.3.2.