Version Packages (canary)

[github-actions]

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to canary, this PR will be updated.

Releases

@bigcommerce/catalyst-core@1.4.1

Patch Changes

• #2811 b57bffa Thanks @chanceaclark! - Fix pagination cursor persistence when changing sort order. The before and after query parameters are now cleared when the sort option changes, preventing stale pagination cursors from causing incorrect results or empty pages.

• #2813 ea9d633 Thanks @jorgemoya! - Delete duplicate Select component.

• #2816 b4b87a3 Thanks @chanceaclark! - Add support for additional HTML attributes on script tags. The scripts transformer now extracts and passes through attributes like async, defer, crossorigin, and data-* attributes from BigCommerce script tags to the C15T consent manager, ensuring scripts load with their intended behavior.

• #2817 d469078 Thanks @jorgemoya! - Persist the checkbox product modifier since it can modify pricing and other product data. By persisting this and tracking in the url, this will trigger a product refetch when added or removed. Incidentally, now we manually control what fields are persisted, since option.isVariantOption doesn't apply to checkbox, additionally multi options modifiers that are not variant options can also modify price and other product data.

  Migration

  Step 1

  Update product-options-transformer.ts to manually track persisted fields:

  case 'DropdownList': {
      return {
          // before
          // persist: option.isVariantOption,
          // after (manually persist)
          persist: true,
          type: 'select',
          label: option.displayName,
          required: option.isRequired,
          name: option.entityId.toString(),
          defaultValue: values.find((value) => value.isDefault)?.entityId.toString(),
          options: values.map((value) => ({
          label: value.label,
          value: value.entityId.toString(),
          })),
      };
  }

  Fields that persist and can affect product pricing when selected:

  • Swatch
  • RectangleBoxes
  • RadioButtons
  • ProductPickList
  • ProductPickListWithImages
  • CheckboxOption

  Step 2

  Remove isVariantOption from GQL query since we no longer use it:

  export const ProductOptionsFragment = graphql(
    `
      fragment ProductOptionsFragment on Product {
        entityId
        productOptions(first: 50) {
          edges {
            node {
              __typename
              entityId
              displayName
              isRequired
              isVariantOption // remove this
              ...MultipleChoiceFieldFragment
              ...CheckboxFieldFragment
              ...NumberFieldFragment
              ...TextFieldFragment
              ...MultiLineTextFieldFragment
              ...DateFieldFragment
            }
          }
        }
      }
    `,
    [
      MultipleChoiceFieldFragment,
      CheckboxFieldFragment,
      NumberFieldFragment,
      TextFieldFragment,
      MultiLineTextFieldFragment,
      DateFieldFragment,
    ],
  );

  Step 3

  Update product-detail-form.tsx to include separate handing of the checkbox field:

  const defaultValue = fields.reduce<{
    [Key in keyof SchemaRawShape]?: z.infer<SchemaRawShape[Key]>;
  }>(
    (acc, field) => {
      // Checkbox field has to be handled separately because we want to convert checked or unchecked value to true or undefined respectively.
      // This is because the form expects a boolean value, but we want to store the checked or unchecked value in the query params.
      if (field.type === 'checkbox') {
        if (params[field.name] === field.checkedValue) {
          return {
            ...acc,
            [field.name]: 'true',
          };
        }
  
        if (params[field.name] === field.uncheckedValue) {
          return {
            ...acc,
            [field.name]: undefined,
          };
        }
  
        return {
          ...acc,
          [field.name]: field.defaultValue, // Default value is either 'true' or undefined
        };
      }
  
      return {
        ...acc,
        [field.name]: params[field.name] ?? field.defaultValue,
      };
    },
    { quantity: minQuantity ?? 1 },
  );
  
  ...
  
  const handleChange = useCallback(
    (value: string) => {
      // Checkbox field has to be handled separately because we want to convert 'true' or '' to the checked or unchecked value respectively.
      if (field.type === 'checkbox') {
        void setParams({ [field.name]: value ? field.checkedValue : field.uncheckedValue });
      } else {
        void setParams({ [field.name]: value || null }); // Passing `null` to remove the value from the query params if fieldValue is falsey
      }
  
      controls.change(value || ''); // If fieldValue is falsey, we set it to an empty string
    },
    [setParams, field, controls],
  );

  Step 4

  Update schema in core/vibes/soul/sections/product-detail/schema.ts:

  type CheckboxField = {
    type: 'checkbox';
    defaultValue?: string;
    checkedValue: string; // add
    uncheckedValue: string; // add
  } & FormField;

• #2814 fcb946e Thanks @matthewvolk! - Shoppers will now see the store's actual password complexity requirements in the tooltip on the new customer registration form, preventing confusion and failed registration attempts. The schema() function in core/vibes/soul/form/dynamic-form/schema.ts now accepts an optional second parameter passwordComplexity to enable dynamic password validation. The DynamicForm, DynamicFormSection components and their associated server actions also accept an optional passwordComplexity prop that flows through to the schema. Action Required: If you have custom registration or password forms and want to use store-specific password complexity settings, fetch passwordComplexitySettings from the GraphQL API (under site.settings.customers.passwordComplexitySettings) and pass it to your DynamicFormSection component and maintain it in your server action's state. If you don't pass it, password validation defaults to: minimum 8 characters, at least one number, and at least one special character. Conflict Resolution: If merging into custom forms, ensure the passwordComplexity prop is threaded through: Page → DynamicFormSection → DynamicForm → useActionState → schema(). In server actions, add passwordComplexity?: Parameters[1] to your state type and include it in all return statements to maintain state consistency.

• #2809 dd559b2 Thanks @jorgemoya! - Minor UX improvements for the Reviews section:

  • Show totalCount for reviews.
  • Show averageRating up to the first decimal.
  • Hide averageRating next to rating stars when there are no reviews.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
catalyst	Ready	Preview, Comment	Jan 9, 2026 10:57pm