@kaizen/components 0.0.0-canary-split-purify-styles-step-20240502055001 → 0.0.0-canary-expose-ref-for-icon-button-20240506023922

package/dist/types/__future__/Select/subcomponents/ListBox/ListBox.d.ts

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes } from "react";
 import { AriaListBoxOptions } from "@react-aria/listbox";
-import { OverrideClassName } from "~types/OverrideClassName";
+import { OverrideClassName } from "../../../../types/OverrideClassName";
 import { SelectOption, SelectItem } from "../../types";
 export type SingleListBoxProps<Option extends SelectOption> = OverrideClassName<HTMLAttributes<HTMLUListElement>> & {
     children: React.ReactNode;

package/dist/types/__future__/Select/subcomponents/Option/Option.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import { OverrideClassName } from "~types/OverrideClassName";
+import { OverrideClassName } from "../../../../types/OverrideClassName";
 import { SelectOption, SelectOptionNode } from "../../types";
 export type OptionProps<Option extends SelectOption = SelectOption> = {
     item: SelectOptionNode<Option>;

package/dist/types/__future__/Select/subcomponents/Overlay/Overlay.d.ts

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from "react";
-import { OverrideClassName } from "~types/OverrideClassName";
+import { OverrideClassName } from "../../../../types/OverrideClassName";
 import { SelectOption } from "../../types";
 export type OverlayProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & {
     children: React.ReactNode;

package/dist/types/__future__/Select/subcomponents/SelectToggle/SelectToggle.d.ts

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes } from "react";
 import { DOMAttributes, FocusableElement } from "@react-types/shared";
-import { OverrideClassName } from "~types/OverrideClassName";
+import { OverrideClassName } from "../../../../types/OverrideClassName";
 export type SelectToggleProps = {
     label: React.ReactNode;
     labelProps: DOMAttributes<FocusableElement>;

package/dist/types/__future__/Tag/RemovableTag/subcomponents/RemoveButton.d.ts

@@ -1,5 +1,5 @@
 import { ButtonHTMLAttributes } from "react";
-import { OverrideClassName } from "~types/OverrideClassName";
+import { OverrideClassName } from "../../../../types/OverrideClassName";
 export type RemoveButtonBaseProps = {
     ariaLabel: string;
     onClick: () => void;

package/dist/types/__future__/Tag/RemovableTag/subcomponents/RemoveTagIcon.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import type { IconProps } from "~components/Icon/types";
+import type { IconProps } from "../../../../Icon/types";
 export declare const RemoveTagIcon: (props: IconProps) => JSX.Element;

package/dist/types/__future__/Tag/Tag/Tag.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode, HTMLAttributes } from "react";
-import { OverrideClassName } from "~types/OverrideClassName";
+import { OverrideClassName } from "../../../types/OverrideClassName";
 import { TagColors } from "./types";
 export type TagProps = {
     children: ReactNode;

package/dist/types/__future__/Workflow/Workflow.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import { OverrideClassName } from "~types/OverrideClassName";
+import { OverrideClassName } from "../../types/OverrideClassName";
 import { FooterProps, HeaderProps } from "./subcomponents";
 export type WorkflowProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & FooterProps & Pick<HeaderProps, "workflowName" | "status" | "headerActions">;
 export declare const Workflow: {

package/dist/types/__future__/Workflow/subcomponents/Footer/Footer.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { OverrideClassName } from "~types/OverrideClassName";
+import { OverrideClassName } from "../../../../types/OverrideClassName";
 import { ProgressStepperProps, FooterRootProps } from "./components";
 export type FooterProps = {
     /** An action to return to a previous step */

package/dist/types/__future__/Workflow/subcomponents/Footer/components/FooterActions/FooterActions.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import { OverrideClassName } from "~types/OverrideClassName";
+import { OverrideClassName } from "../../../../../../types/OverrideClassName";
 export type FooterActionsProps = {
     actionType?: "Previous" | "Next";
     action?: JSX.Element;

package/dist/types/__future__/Workflow/subcomponents/Footer/components/Root/Root.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import { OverrideClassName } from "~types/OverrideClassName";
+import { OverrideClassName } from "../../../../../../types/OverrideClassName";
 export type FooterRootProps = OverrideClassName<HTMLAttributes<HTMLHeadingElement>>;
 export declare const FooterRoot: {
     ({ children, classNameOverride, ...restProps }: FooterRootProps): JSX.Element;

package/dist/types/__future__/Workflow/subcomponents/Header/components/Actions/Actions.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import { OverrideClassName } from "~types/OverrideClassName";
+import { OverrideClassName } from "../../../../../../types/OverrideClassName";
 export type WorkflowActionsProps = {
     /**
      * Header actions will render in order of the array.

package/dist/types/__future__/Workflow/subcomponents/Header/components/Branding/Branding.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from "react";
-import { BrandProps } from "~components/Brand";
-import { OverrideClassName } from "~types/OverrideClassName";
+import { BrandProps } from "../../../../../../Brand";
+import { OverrideClassName } from "../../../../../../types/OverrideClassName";
 export type WorflowBrandingProps = {
     variant?: BrandProps["variant"];
     alt: string;

package/dist/types/__future__/Workflow/subcomponents/Header/components/Root/Root.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import { OverrideClassName } from "~types/OverrideClassName";
+import { OverrideClassName } from "../../../../../../types/OverrideClassName";
 export type HeaderRootProps = OverrideClassName<HTMLAttributes<HTMLHeadingElement>>;
 export declare const HeaderRoot: {
     ({ children, classNameOverride, ...restProps }: HeaderRootProps): JSX.Element;

package/dist/types/__future__/Workflow/subcomponents/Header/components/Titles/Titles.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from "react";
-import { DefaultTagProps } from "~components/Tag";
-import { OverrideClassName } from "~types/OverrideClassName";
+import { DefaultTagProps } from "../../../../../../Tag";
+import { OverrideClassName } from "../../../../../../types/OverrideClassName";
 export type WorkflowStatus = {
     /** @default: "statusDraft" */
     variant?: DefaultTagProps["variant"];

package/dist/types/__future__/Workflow/subcomponents/Main/Main.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from "react";
-import { OverrideClassName } from "~types/OverrideClassName";
+import { OverrideClassName } from "../../../../types/OverrideClassName";
 export type WorkflowMainProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & {
     children: ReactNode;
 };

package/dist/types/__future__/Workflow/subcomponents/Wrapper/Wrapper.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from "react";
-import { OverrideClassName } from "~types/OverrideClassName";
+import { OverrideClassName } from "../../../../types/OverrideClassName";
 export type WorkflowWrapperProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & {
     children: ReactNode;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-split-purify-styles-step-20240502055001",
+  "version": "0.0.0-canary-expose-ref-for-icon-button-20240506023922",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -73,8 +73,7 @@
     "tslib": "^2.6.2",
     "use-debounce": "^10.0.0",
     "uuid": "^9.0.1",
-    "@kaizen/hosted-assets": "2.0.3",
-    "@kaizen/package-bundler": "0.0.0-canary-split-purify-styles-step-20240502055001"
+    "@kaizen/hosted-assets": "2.0.3"
   },
   "dependenciesComments": {
     "react-day-picker": "Version locked until a11y gets fixed (https://github.com/gpbl/react-day-picker/pull/1708)"
@@ -83,6 +82,11 @@
     "@babel/plugin-transform-react-pure-annotations": "^7.24.1",
     "@cultureamp/frontend-apis": "^9.4.3",
     "@cultureamp/i18n-react-intl": "^2.5.5",
+    "@rollup/plugin-alias": "^5.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-typescript": "^11.1.6",
     "@types/lodash.debounce": "^4.0.9",
     "@types/react-dom": "^18.2.23",
     "@types/react-textfit": "^1.1.4",
@@ -94,13 +98,16 @@
     "query-string": "^9.0.0",
     "react-intl": "^6.6.4",
     "rollup": "^4.13.2",
+    "rollup-plugin-ignore": "^1.0.10",
+    "rollup-plugin-node-externals": "^7.1.1",
+    "rollup-plugin-postcss": "^4.0.2",
     "sass": "^1.72.0",
     "serialize-query-params": "^2.0.2",
-    "style-inject": "^0.3.0",
     "svgo": "^3.2.0",
     "ts-jest": "^29.1.2",
     "ts-node": "^10.9.2",
-    "@kaizen/package-bundler": "0.0.0-canary-split-purify-styles-step-20240502055001",
+    "ts-patch": "^3.1.2",
+    "typescript-transform-paths": "^3.4.7",
     "@kaizen/design-tokens": "10.3.20",
     "@kaizen/tailwind": "1.2.6"
   },
@@ -110,18 +117,19 @@
     "react-intl": "^6.6.4"
   },
   "scripts": {
-    "build": "pnpm package-bundler build",
-    "clean": "pnpm package-bundler clean",
-    "rollup": "pnpm package-bundler rollup",
-    "types": "pnpm package-bundler types",
-    "styles": "pnpm styles:global && pnpm package-bundler styles && pnpm styles:combine-styles",
-    "styles:global": "postcss ./styles/global.css --output dist/global.css",
-    "styles:combine-styles": "concat-cli -f ./dist/*.css -o ./dist/styles.css && rm ./dist/global.css",
-    "dist:clean": "pnpm package-bundler dist:clean",
-    "help": "pnpm package-bundler help",
+    "build": "pnpm clean && pnpm prepublishOnly",
     "test": "FORCE_COLOR=1 jest",
     "test:ci": "pnpm test -- --ci",
     "test:treeshake": "agadoo ./dist/esm/index.mjs",
+    "clean": "rimraf dist",
+    "build:components": "rollup -c && pnpm build:types",
+    "build:styles": "postcss styles/global.css --output dist/global.css",
+    "build:types": "tspc --project tsconfig.types.json",
+    "compile": "tsc",
+    "dist:clean": "rm ./dist/global.css ./dist/raw-styles.css",
+    "dist:combine-styles": "concat-cli -f ./dist/*.css ./dist/esm/*.css -o ./dist/raw-styles.css",
+    "dist:postcss": "postcss dist/raw-styles.css --output dist/styles.css",
+    "postBuild": "pnpm dist:combine-styles && pnpm dist:postcss",
     "update-icons": "./src/Icon/bin/update-icons.sh",
     "i18n:extract": "pnpm i18n-extract"
   }

package/src/Button/IconButton/IconButton.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { forwardRef, Ref } from "react"
 import {
   GenericButton,
   GenericProps,
@@ -6,6 +6,7 @@ import {
   WorkingProps,
   WorkingUndefinedProps,
   ButtonBadgeProps,
+  ButtonRef,
 } from "../GenericButton"
 
 export type IconButtonProps = GenericProps &
@@ -28,8 +29,10 @@ export type IconButtonProps = GenericProps &
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3062890984/Button Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-iconbutton--docs Storybook}
  */
-export const IconButton = (props: IconButtonProps): JSX.Element => (
-  <GenericButton iconButton {...props} />
+export const IconButton = forwardRef(
+  (props: IconButtonProps, ref: Ref<ButtonRef | undefined>): JSX.Element => (
+    <GenericButton iconButton {...props} ref={ref} />
+  )
 )
 
 IconButton.defaultProps = {

package/src/LikertScaleLegacy/LikertScaleLegacy.module.scss

@@ -23,11 +23,17 @@ $block-height: 35px;
 $desktop-rater-width: 220px;
 $desktop-rater-height: 63px;
 
-$first: $color-yellow-300;
-$second: $color-yellow-400;
-$third: $color-orange-400;
-$fourth: $color-orange-500;
-$fifth: $color-red-500;
+$classical-first: $color-yellow-300;
+$classical-second: $color-yellow-400;
+$classical-third: $color-orange-400;
+$classical-fourth: $color-orange-500;
+$classical-fifth: $color-red-500;
+
+$blue-first: $color-blue-100;
+$blue-second: $color-blue-200;
+$blue-third: $color-blue-300;
+$blue-fourth: $color-blue-400;
+$blue-fifth: $color-blue-500;
 
 @mixin pop {
   -webkit-animation: pop cubic-bezier(0, 0.94, 0.32, 1) 0.7s 1;
@@ -212,45 +218,88 @@ $fifth: $color-red-500;
     left: 100%;
   }
 
-  &.suggested,
-  &.selected {
+  &.suggested.classicalColorSchema,
+  &.selected.classicalColorSchema {
     .field1 {
-      background-color: $first;
+      background-color: $classical-first;
 
       &::after {
-        background-color: $first;
+        background-color: $classical-first;
       }
     }
 
     .field2 {
-      background-color: $second;
+      background-color: $classical-second;
 
       &::after {
-        background-color: $second;
+        background-color: $classical-second;
       }
     }
 
     .field3 {
-      background-color: $third;
+      background-color: $classical-third;
 
       &::after {
-        background-color: $third;
+        background-color: $classical-third;
       }
     }
 
     .field4 {
-      background-color: $fourth;
+      background-color: $classical-fourth;
 
       &::after {
-        background-color: $fourth;
+        background-color: $classical-fourth;
       }
     }
 
     .field5 {
-      background-color: $fifth;
+      background-color: $classical-fifth;
 
       &::after {
-        background-color: $fifth;
+        background-color: $classical-fifth;
+      }
+    }
+  }
+
+  &.suggested.blueColorSchema,
+  &.selected.blueColorSchema {
+    .field1 {
+      background-color: $blue-first;
+
+      &::after {
+        background-color: $blue-first;
+      }
+    }
+
+    .field2 {
+      background-color: $blue-second;
+
+      &::after {
+        background-color: $blue-second;
+      }
+    }
+
+    .field3 {
+      background-color: $blue-third;
+
+      &::after {
+        background-color: $blue-third;
+      }
+    }
+
+    .field4 {
+      background-color: $blue-fourth;
+
+      &::after {
+        background-color: $blue-fourth;
+      }
+    }
+
+    .field5 {
+      background-color: $blue-fifth;
+
+      &::after {
+        background-color: $blue-fifth;
       }
     }
   }

package/src/LikertScaleLegacy/LikertScaleLegacy.tsx

@@ -3,7 +3,7 @@ import classnames from "classnames"
 import { FieldMessage } from "~components/FieldMessage"
 import { CheckIcon } from "~components/Icon"
 import { Text } from "~components/Text"
-import { ScaleValue, Scale, ScaleItem } from "./types"
+import { ScaleValue, Scale, ScaleItem, ColorSchema } from "./types"
 import determineSelectionFromKeyPress from "./utils/determineSelectionFromKeyPress"
 import styles from "./LikertScaleLegacy.module.scss"
 
@@ -22,6 +22,7 @@ export type LikertScaleProps = {
   automationId?: string
   "data-testid"?: string
   reversed?: boolean
+  colorSchema?: ColorSchema | "classical"
   validationMessage?: string
   status?: "default" | "error"
   onSelect: (value: ScaleItem | null) => void
@@ -39,6 +40,7 @@ export const LikertScaleLegacy = ({
   scale,
   selectedItem,
   reversed,
+  colorSchema = "classical",
   "data-testid": dataTestId,
   onSelect,
   validationMessage,
@@ -156,6 +158,9 @@ export const LikertScaleLegacy = ({
             <div
               className={classnames(
                 styles.likertItem,
+                colorSchema == "blue"
+                  ? styles.blueColorSchema
+                  : styles.classicalColorSchema,
                 styles[`likertItem${item.value}`],
                 isSelected && styles.selected,
                 isSuggested && styles.suggested,

package/src/LikertScaleLegacy/_docs/LikertScaleLegacy.stickersheet.stories.tsx

@@ -43,7 +43,7 @@ const scale: Scale = [
 ]
 
 const StickerSheetTemplate: StickerSheetStory = {
-  render: ({ isReversed }) => (
+  render: ({ isReversed, colorSchema }) => (
     <StickerSheet isReversed={isReversed}>
       <StickerSheet.Body>
         <StickerSheet.Row rowTitle="Not rated">
@@ -53,6 +53,7 @@ const StickerSheetTemplate: StickerSheetStory = {
             selectedItem={scale[0]}
             onSelect={(): void => undefined}
             reversed={isReversed}
+            colorSchema={colorSchema}
           />
         </StickerSheet.Row>
         <StickerSheet.Row rowTitle="Strongly disagree">
@@ -62,6 +63,7 @@ const StickerSheetTemplate: StickerSheetStory = {
             selectedItem={scale[1]}
             onSelect={(): void => undefined}
             reversed={isReversed}
+            colorSchema={colorSchema}
           />
         </StickerSheet.Row>
         <StickerSheet.Row rowTitle="Disagree">
@@ -71,6 +73,7 @@ const StickerSheetTemplate: StickerSheetStory = {
             selectedItem={scale[2]}
             onSelect={(): void => undefined}
             reversed={isReversed}
+            colorSchema={colorSchema}
           />
         </StickerSheet.Row>
         <StickerSheet.Row rowTitle="Neither agree or disagree">
@@ -80,6 +83,7 @@ const StickerSheetTemplate: StickerSheetStory = {
             selectedItem={scale[3]}
             onSelect={(): void => undefined}
             reversed={isReversed}
+            colorSchema={colorSchema}
           />
         </StickerSheet.Row>
         <StickerSheet.Row rowTitle="Agree">
@@ -89,6 +93,7 @@ const StickerSheetTemplate: StickerSheetStory = {
             selectedItem={scale[4]}
             onSelect={(): void => undefined}
             reversed={isReversed}
+            colorSchema={colorSchema}
           />
         </StickerSheet.Row>
         <StickerSheet.Row rowTitle="Strongly agree">
@@ -98,6 +103,7 @@ const StickerSheetTemplate: StickerSheetStory = {
             selectedItem={scale[5]}
             onSelect={(): void => undefined}
             reversed={isReversed}
+            colorSchema={colorSchema}
           />
         </StickerSheet.Row>
         <StickerSheet.Row rowTitle="Validation">
@@ -107,6 +113,7 @@ const StickerSheetTemplate: StickerSheetStory = {
             selectedItem={scale[0]}
             onSelect={(): void => undefined}
             reversed={isReversed}
+            colorSchema={colorSchema}
             validationMessage="Error message here"
             status="error"
           />
@@ -118,18 +125,33 @@ const StickerSheetTemplate: StickerSheetStory = {
 
 export const StickerSheetDefault: StickerSheetStory = {
   ...StickerSheetTemplate,
-  name: "Sticker Sheet (Default)",
+  name: "Sticker Sheet (Default - Classical)",
 }
 
-export const StickerSheetReversed: StickerSheetStory = {
+export const StickerBlueSheetDefault: StickerSheetStory = {
   ...StickerSheetTemplate,
-  name: "Sticker Sheet (Reversed)",
+  name: "Sticker Sheet (Blue)",
+  args: { colorSchema: "blue" },
+}
+
+export const StickerSheetClassicalReversed: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (Classical Reversed)",
   parameters: {
     backgrounds: { default: "Purple 700" },
   },
   args: { isReversed: true },
 }
 
+export const StickerSheetBlueReversed: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (Blue Reversed)",
+  parameters: {
+    backgrounds: { default: "Purple 700" },
+  },
+  args: { isReversed: true, colorSchema: "blue" },
+}
+
 export const StickerSheetRTL: StickerSheetStory = {
   ...StickerSheetTemplate,
   name: "Sticker Sheet (RTL)",

package/src/LikertScaleLegacy/types.ts

@@ -5,4 +5,6 @@ export type ScaleItem = {
   label: string
 }
 
+export type ColorSchema = "classical" | "blue"
+
 export type Scale = ScaleItem[]

package/src/Modal/ConfirmationModal/ConfirmationModal.tsx

@@ -39,6 +39,9 @@ export type ConfirmationModalProps = {
   title: string
   onConfirm?: () => void
   onDismiss: () => void
+  /** A callback that is triggered after the modal is opened. */
+  onAfterEnter?: () => void
+  /** A callback that is triggered after the modal is closed. */
   onAfterLeave?: () => void
   confirmLabel?: string
   dismissLabel?: string
@@ -99,6 +102,7 @@ export const ConfirmationModal = ({
   title,
   onConfirm,
   onAfterLeave,
+  onAfterEnter,
   confirmLabel = "Confirm",
   dismissLabel = "Cancel",
   confirmWorking,
@@ -134,6 +138,7 @@ export const ConfirmationModal = ({
       onEscapeKeyup={onDismiss}
       onOutsideModalClick={onDismiss}
       onAfterLeave={onAfterLeave}
+      onAfterEnter={onAfterEnter}
     >
       <div className={styles.modal} data-modal {...props}>
         <ModalHeader onDismiss={onDismiss}>

package/src/Modal/ContextModal/ContextModal.tsx

@@ -32,6 +32,9 @@ export type ContextModalProps = Readonly<
     title: string
     onConfirm?: () => void
     onDismiss: () => void
+    /** A callback that is triggered after the modal is opened. */
+    onAfterEnter?: () => void
+    /** A callback that is triggered after the modal is closed. */
     onAfterLeave?: () => void
     confirmLabel?: string
     confirmWorking?: { label: string; labelHidden?: boolean }
@@ -59,6 +62,7 @@ export const ContextModal = ({
   onConfirm,
   onDismiss: propsOnDismiss,
   onAfterLeave,
+  onAfterEnter,
   confirmLabel = "Confirm",
   confirmWorking,
   renderBackground,
@@ -100,6 +104,7 @@ export const ContextModal = ({
       onEscapeKeyup={onDismiss}
       onOutsideModalClick={onDismiss}
       onAfterLeave={onAfterLeave}
+      onAfterEnter={onAfterEnter}
     >
       <div className={styles.modal} data-modal {...props}>
         {renderBackground && renderBackground()}

package/src/Modal/GenericModal/GenericModal.tsx

@@ -13,6 +13,9 @@ export type GenericModalProps = {
   focusLockDisabled?: boolean
   onEscapeKeyup?: (event: KeyboardEvent) => void
   onOutsideModalClick?: (event: React.MouseEvent) => void
+  /** A callback that is triggered after the modal is opened. */
+  onAfterEnter?: () => void
+  /** A callback that is triggered after the modal is closed. */
   onAfterLeave?: () => void
 }
 
@@ -23,6 +26,7 @@ export const GenericModal = ({
   focusLockDisabled,
   onEscapeKeyup,
   onOutsideModalClick,
+  onAfterEnter,
   onAfterLeave: propsOnAfterLeave,
 }: GenericModalProps): JSX.Element => {
   const reactId = useId()
@@ -50,18 +54,19 @@ export const GenericModal = ({
     }
   }
 
-  const focusAccessibleLabel = (): void => {
-    if (modalLayer) {
-      const labelElement: HTMLElement | null =
-        document.getElementById(labelledByID)
-      if (labelElement) {
-        labelElement.focus()
-      }
+  const focusOnAccessibleLabel = (): void => {
+    // Check if focus already exists within the modal
+    if (modalLayer?.contains(document.activeElement)) {
+      return
     }
+
+    const labelElement: HTMLElement | null =
+      document.getElementById(labelledByID)
+
+    labelElement?.focus()
   }
 
   const a11yWarn = (): void => {
-    if (!modalLayer) return
     // Ensure that consumers have provided an element that labels the modal
     // to meet ARIA accessibility guidelines.
     if (!document.getElementById(labelledByID)) {
@@ -86,8 +91,11 @@ export const GenericModal = ({
 
   const onAfterEnterHandler = (): void => {
     scrollModalToTop()
-    focusAccessibleLabel()
-    a11yWarn()
+    if (modalLayer) {
+      onAfterEnter?.()
+      focusOnAccessibleLabel()
+      a11yWarn()
+    }
   }
 
   const onBeforeEnterHandler = (): void => {