chore: Merge prerelease/minor into prerelease/major (#2837)

Co-authored-by: @NicholasBoll <[email protected]> Co-authored-by: @mannycarrera4 <[email protected]> Co-authored-by: @josh-bagwell <[email protected]> Co-authored-by: @NicholasBoll <[email protected]> Co-authored-by: @josh-bagwell <[email protected]>
Workday · Jul 22, 2024 · 2241ad8 · 2241ad8
2 parents fb8e6d3 + 1ed8b6b
commit 2241ad8
Show file tree

Hide file tree

Showing 17 changed files with 257 additions and 30 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [v11.0.19](https://github.com/Workday/canvas-kit/releases/tag/v11.0.19) (2024-07-19)
+
+### Components
+
+- fix(avatar): Lazy load avatar images ([#2834](https://github.com/Workday/canvas-kit/pull/2834)) ([@NicholasBoll](https://github.com/NicholasBoll))
+- fix: Popups render in the target's window ([#2829](https://github.com/Workday/canvas-kit/pull/2829)) ([@NicholasBoll](https://github.com/NicholasBoll), [@mannycarrera4](https://github.com/mannycarrera4))
+
+
+## [v10.3.46](https://github.com/Workday/canvas-kit/releases/tag/v10.3.46) (2024-07-19)
+
+### Components
+
+- fix: Popups render in the target's window ([#2829](https://github.com/Workday/canvas-kit/pull/2829)) ([@NicholasBoll](https://github.com/NicholasBoll), [@mannycarrera4](https://github.com/mannycarrera4))
+
+
+## [v10.3.45](https://github.com/Workday/canvas-kit/releases/tag/v10.3.45) (2024-07-18)
+
+### Components
+
+- fix(avatar): Lazy load avatar images ([#2834](https://github.com/Workday/canvas-kit/pull/2834)) ([@NicholasBoll](https://github.com/NicholasBoll))
 ## [v11.0.18](https://github.com/Workday/canvas-kit/releases/tag/v11.0.18) (2024-07-18)
 
 ### Components

diff --git a/lerna.json b/lerna.json
@@ -2,7 +2,7 @@
   "packages": [
     "modules/**"
   ],
-  "version": "11.0.18",
+  "version": "11.0.19",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "command": {

diff --git a/modules/codemod/package.json b/modules/codemod/package.json
@@ -2,7 +2,7 @@
   "name": "@workday/canvas-kit-codemod",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
-  "version": "11.0.18",
+  "version": "11.0.19",
   "description": "A collection of codemods for use on Workday Canvas Kit packages.",
   "main": "dist/es6/index.js",
   "sideEffects": false,

diff --git a/modules/css/package.json b/modules/css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-css",
-  "version": "11.0.18",
+  "version": "11.0.19",
   "description": "The parent module that contains all Workday Canvas Kit CSS components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",

diff --git a/modules/docs/package.json b/modules/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "11.0.18",
+  "version": "11.0.19",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,10 +44,10 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^11.0.18",
-    "@workday/canvas-kit-preview-react": "^11.0.18",
-    "@workday/canvas-kit-react": "^11.0.18",
-    "@workday/canvas-kit-styling": "^11.0.18",
+    "@workday/canvas-kit-labs-react": "^11.0.19",
+    "@workday/canvas-kit-preview-react": "^11.0.19",
+    "@workday/canvas-kit-react": "^11.0.19",
+    "@workday/canvas-kit-styling": "^11.0.19",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.0",
     "markdown-to-jsx": "^7.2.0",

diff --git a/modules/labs-css/package.json b/modules/labs-css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-labs-css",
-  "version": "11.0.18",
+  "version": "11.0.19",
   "description": "The parent module that contains all Workday Canvas Kit Labs CSS components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",

diff --git a/modules/labs-react/package.json b/modules/labs-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-labs-react",
-  "version": "11.0.18",
+  "version": "11.0.19",
   "description": "Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functionality. The Labs modules allow us to do that as needed.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -46,7 +46,7 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^11.0.18",
+    "@workday/canvas-kit-react": "^11.0.19",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",

diff --git a/modules/popup-stack/lib/PopupStack.ts b/modules/popup-stack/lib/PopupStack.ts
@@ -93,7 +93,10 @@ function getChildPopups(item: PopupStackItem, items: PopupStackItem[]): PopupSta
 
 interface Stack {
   items: PopupStackItem[];
-  container?: () => HTMLElement;
+  /**
+   * Returns the container of a stack given an optional element.
+   */
+  container?: (element?: HTMLElement) => HTMLElement;
   zIndex: {
     min: number;
     max: number;
@@ -167,12 +170,27 @@ const setToWindow = (path: string, value: any) => {
   }
 };
 
+/**
+ * TODO: Remove this after v12 and use `stack.container(el)` directly. This is temporary to make
+ * sure Popups can open in new windows while supporting older versions of Canvas Kit AND full screen
+ * mode.
+ */
+const getContainer = (stack: Stack, element?: HTMLElement): HTMLElement => {
+  let stackContainer = stack.container?.();
+  if (stackContainer === document.body) {
+    // Here's the transitory code
+    stackContainer = element?.ownerDocument.body;
+  }
+
+  return stackContainer || document.body;
+};
+
 // We need to make sure only one stack is ever in use on the page - ever. If a stack is already
 // defined on the page, we need to use that one. Never, ever, ever change this variable name on
 // window
 const stack: Stack = getFromWindow('workday.__popupStack') || {
   description: 'Global popup stack from @workday/canvas-kit/popup-stack',
-  container: () => document.body,
+  container: el => el?.ownerDocument.body || document.body,
   items: [],
   zIndex: {min: 30, max: 50, getValue: getValue},
   _adapter: {},
@@ -235,7 +253,7 @@ export const PopupStack = {
       return;
     }
     stack.items.push(item);
-    (stack.container?.() || document.body).appendChild(item.element);
+    getContainer(stack, item.owner).appendChild(item.element);
 
     setZIndexOfElements(PopupStack.getElements());
   },
@@ -255,8 +273,9 @@ export const PopupStack = {
         stack._adapter.remove(element);
         return;
       }
+      const item = stack.items.find(item => item.element === element);
       stack.items = stack.items.filter(item => item.element !== element);
-      (stack.container?.() || document.body).removeChild(element);
+      getContainer(stack, item?.owner).removeChild(element);
 
       setZIndexOfElements(PopupStack.getElements(stack));
     }

diff --git a/modules/popup-stack/package.json b/modules/popup-stack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-popup-stack",
-  "version": "11.0.18",
+  "version": "11.0.19",
   "description": "Stack for managing popup UIs to coordinate global concerns like escape key handling and rendering order",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",

diff --git a/modules/preview-css/package.json b/modules/preview-css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-css",
-  "version": "11.0.18",
+  "version": "11.0.19",
   "description": "The parent module that contains all Workday Canvas Kit Preview CSS components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",

diff --git a/modules/preview-react/package.json b/modules/preview-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-react",
-  "version": "11.0.18",
+  "version": "11.0.19",
   "description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -46,8 +46,8 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^11.0.18",
-    "@workday/canvas-kit-styling": "^11.0.18",
+    "@workday/canvas-kit-react": "^11.0.19",
+    "@workday/canvas-kit-styling": "^11.0.19",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.0",
     "@workday/design-assets-types": "^0.2.8"

diff --git a/modules/react-fonts/package.json b/modules/react-fonts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react-fonts",
-  "version": "11.0.18",
+  "version": "11.0.19",
   "description": "Fonts for canvas-kit-react",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",

diff --git a/modules/react/package.json b/modules/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "11.0.18",
+  "version": "11.0.19",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,8 +49,8 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^11.0.18",
-    "@workday/canvas-kit-styling": "^11.0.18",
+    "@workday/canvas-kit-popup-stack": "^11.0.19",
+    "@workday/canvas-kit-styling": "^11.0.19",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.0",
     "@workday/design-assets-types": "^0.2.8",

diff --git a/modules/react/popup/stories/Popup.stories.mdx b/modules/react/popup/stories/Popup.stories.mdx
@@ -10,6 +10,7 @@ import {FocusRedirect} from './examples/FocusRedirect';
 import {FocusTrap} from './examples/FocusTrap';
 import {RTL} from './examples/RTL';
 import {CustomTarget} from './examples/CustomTarget';
+import {ExternalWindow} from './examples/ExternalWindow';
 import {FullScreen} from './examples/FullScreen';
 
 <Meta title="Components/Popups/Popup" component={Popup} />
@@ -160,6 +161,16 @@ the popup's stack context when entering/exiting fullscreen.
 
 <ExampleCodeBlock code={FullScreen} />
 
+### Opening an external window
+
+A popup can open an external window. This isn't supported directly. The `Popup.Popper` subcomponent
+is replaced with a custom subcomponent that connects to the Popup model and controls the lifecycle
+of the extenal window. Be sure to connect the `unload` event of both the parent `window` and the
+external child `window` to the lifecycle of the Popup model to prevent memory leaks or zombie
+windows.
+
+<ExampleCodeBlock code={ExternalWindow} />
+
 ### RTL
 
 The Popup component automatically handles right-to-left rendering.
@@ -171,8 +182,8 @@ The Popup component automatically handles right-to-left rendering.
 ## Component API
 
 <>
-<SymbolDoc name="Popper" fileName="/react/" />
-<SymbolDoc name="Popup" fileName="/react/" />
+  <SymbolDoc name="Popper" fileName="/react/" />
+  <SymbolDoc name="Popup" fileName="/react/" />
 </>
 
 ## Hooks