@workday/canvas-kit-docs 16.2.3 → 16.2.5

package/dist/es6/lib/docs.js

@@ -238101,7 +238101,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               "value": "DOMRect"
             }
           },
-          "description": "When provided, this optional callback will be used to determine positioning for the Popper element\ninstead of calling `getBoundingClientRect` on the `anchorElement` prop. Use this when you need\ncomplete control over positioning. When this prop is specified, it is safe to pass `null` into the\n`anchorElement` prop. If `null` is passed into the `anchorElement` prop, an `owner` will not be\nprovided for the `PopupStack`.",
+          "description": "When provided, this optional callback will be used to determine positioning for the Popper element\ninstead of calling `getBoundingClientRect` on the `anchorElement` prop. Use this when you need\ncomplete control over positioning. When this prop is specified, it is safe to pass `null` into the\n`anchorElement` prop. If `null` is passed into the `anchorElement` prop, an `owner` will not be\nprovided for the `PopupStack`. If an `anchorElement` is also provided, Popper listens to its\nscroll containers and uses it for clipping, so the Popper still updates when it scrolls.",
           "declarations": [
             {
               "name": "getAnchorClientRect",
@@ -271462,7 +271462,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               "value": "DOMRect"
             }
           },
-          "description": "When provided, this optional callback will be used to determine positioning for the Popper element\ninstead of calling `getBoundingClientRect` on the `anchorElement` prop. Use this when you need\ncomplete control over positioning. When this prop is specified, it is safe to pass `null` into the\n`anchorElement` prop. If `null` is passed into the `anchorElement` prop, an `owner` will not be\nprovided for the `PopupStack`.",
+          "description": "When provided, this optional callback will be used to determine positioning for the Popper element\ninstead of calling `getBoundingClientRect` on the `anchorElement` prop. Use this when you need\ncomplete control over positioning. When this prop is specified, it is safe to pass `null` into the\n`anchorElement` prop. If `null` is passed into the `anchorElement` prop, an `owner` will not be\nprovided for the `PopupStack`. If an `anchorElement` is also provided, Popper listens to its\nscroll containers and uses it for clipping, so the Popper still updates when it scrolls.",
           "declarations": [
             {
               "name": "getAnchorClientRect",
@@ -336715,6 +336715,31 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       "name": "usePopupPopper"
     }
   },
+  {
+    "name": "menuPopperOffset",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/menu/lib/MenuPopper.tsx",
+    "description": "The `[skidding, distance]` offset every menu popper sits at relative to its anchor.",
+    "declarations": [
+      {
+        "name": "menuPopperOffset",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/menu/lib/MenuPopper.tsx"
+      }
+    ],
+    "tags": {},
+    "type": {
+      "kind": "tuple",
+      "value": [
+        {
+          "kind": "primitive",
+          "value": "number"
+        },
+        {
+          "kind": "primitive",
+          "value": "number"
+        }
+      ]
+    }
+  },
   {
     "name": "defaultMenuPopperOptions",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/menu/lib/MenuPopper.tsx",
@@ -336773,11 +336798,17 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                             "parameters": [],
                             "members": [],
                             "returnType": {
-                              "kind": "array",
-                              "value": {
-                                "kind": "primitive",
-                                "value": "number"
-                              }
+                              "kind": "union",
+                              "value": [
+                                {
+                                  "kind": "primitive",
+                                  "value": "number"
+                                },
+                                {
+                                  "kind": "primitive",
+                                  "value": "number"
+                                }
+                              ]
                             }
                           },
                           "type": {
@@ -336785,11 +336816,17 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                             "parameters": [],
                             "members": [],
                             "returnType": {
-                              "kind": "array",
-                              "value": {
-                                "kind": "primitive",
-                                "value": "number"
-                              }
+                              "kind": "union",
+                              "value": [
+                                {
+                                  "kind": "primitive",
+                                  "value": "number"
+                                },
+                                {
+                                  "kind": "primitive",
+                                  "value": "number"
+                                }
+                              ]
                             }
                           },
                           "required": true,
@@ -336815,11 +336852,17 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                             "parameters": [],
                             "members": [],
                             "returnType": {
-                              "kind": "array",
-                              "value": {
-                                "kind": "primitive",
-                                "value": "number"
-                              }
+                              "kind": "union",
+                              "value": [
+                                {
+                                  "kind": "primitive",
+                                  "value": "number"
+                                },
+                                {
+                                  "kind": "primitive",
+                                  "value": "number"
+                                }
+                              ]
                             }
                           },
                           "type": {
@@ -336827,11 +336870,17 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                             "parameters": [],
                             "members": [],
                             "returnType": {
-                              "kind": "array",
-                              "value": {
-                                "kind": "primitive",
-                                "value": "number"
-                              }
+                              "kind": "union",
+                              "value": [
+                                {
+                                  "kind": "primitive",
+                                  "value": "number"
+                                },
+                                {
+                                  "kind": "primitive",
+                                  "value": "number"
+                                }
+                              ]
                             }
                           },
                           "required": true,
@@ -336893,11 +336942,17 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                           "parameters": [],
                           "members": [],
                           "returnType": {
-                            "kind": "array",
-                            "value": {
-                              "kind": "primitive",
-                              "value": "number"
-                            }
+                            "kind": "tuple",
+                            "value": [
+                              {
+                                "kind": "primitive",
+                                "value": "number"
+                              },
+                              {
+                                "kind": "primitive",
+                                "value": "number"
+                              }
+                            ]
                           }
                         },
                         "description": "",
@@ -337069,7 +337124,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               "value": "DOMRect"
             }
           },
-          "description": "When provided, this optional callback will be used to determine positioning for the Popper element\ninstead of calling `getBoundingClientRect` on the `anchorElement` prop. Use this when you need\ncomplete control over positioning. When this prop is specified, it is safe to pass `null` into the\n`anchorElement` prop. If `null` is passed into the `anchorElement` prop, an `owner` will not be\nprovided for the `PopupStack`.",
+          "description": "When provided, this optional callback will be used to determine positioning for the Popper element\ninstead of calling `getBoundingClientRect` on the `anchorElement` prop. Use this when you need\ncomplete control over positioning. When this prop is specified, it is safe to pass `null` into the\n`anchorElement` prop. If `null` is passed into the `anchorElement` prop, an `owner` will not be\nprovided for the `PopupStack`. If an `anchorElement` is also provided, Popper listens to its\nscroll containers and uses it for clipping, so the Popper still updates when it scrolls.",
           "declarations": [
             {
               "name": "getAnchorClientRect",
@@ -338006,7 +338061,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               "value": "DOMRect"
             }
           },
-          "description": "When provided, this optional callback will be used to determine positioning for the Popper element\ninstead of calling `getBoundingClientRect` on the `anchorElement` prop. Use this when you need\ncomplete control over positioning. When this prop is specified, it is safe to pass `null` into the\n`anchorElement` prop. If `null` is passed into the `anchorElement` prop, an `owner` will not be\nprovided for the `PopupStack`.",
+          "description": "When provided, this optional callback will be used to determine positioning for the Popper element\ninstead of calling `getBoundingClientRect` on the `anchorElement` prop. Use this when you need\ncomplete control over positioning. When this prop is specified, it is safe to pass `null` into the\n`anchorElement` prop. If `null` is passed into the `anchorElement` prop, an `owner` will not be\nprovided for the `PopupStack`. If an `anchorElement` is also provided, Popper listens to its\nscroll containers and uses it for clipping, so the Popper still updates when it scrolls.",
           "declarations": [
             {
               "name": "getAnchorClientRect",
@@ -388034,7 +388089,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               "value": "DOMRect"
             }
           },
-          "description": "When provided, this optional callback will be used to determine positioning for the Popper element\ninstead of calling `getBoundingClientRect` on the `anchorElement` prop. Use this when you need\ncomplete control over positioning. When this prop is specified, it is safe to pass `null` into the\n`anchorElement` prop. If `null` is passed into the `anchorElement` prop, an `owner` will not be\nprovided for the `PopupStack`.",
+          "description": "When provided, this optional callback will be used to determine positioning for the Popper element\ninstead of calling `getBoundingClientRect` on the `anchorElement` prop. Use this when you need\ncomplete control over positioning. When this prop is specified, it is safe to pass `null` into the\n`anchorElement` prop. If `null` is passed into the `anchorElement` prop, an `owner` will not be\nprovided for the `PopupStack`. If an `anchorElement` is also provided, Popper listens to its\nscroll containers and uses it for clipping, so the Popper still updates when it scrolls.",
           "declarations": [
             {
               "name": "getAnchorClientRect",
@@ -393498,7 +393553,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               "value": "DOMRect"
             }
           },
-          "description": "When provided, this optional callback will be used to determine positioning for the Popper element\ninstead of calling `getBoundingClientRect` on the `anchorElement` prop. Use this when you need\ncomplete control over positioning. When this prop is specified, it is safe to pass `null` into the\n`anchorElement` prop. If `null` is passed into the `anchorElement` prop, an `owner` will not be\nprovided for the `PopupStack`.",
+          "description": "When provided, this optional callback will be used to determine positioning for the Popper element\ninstead of calling `getBoundingClientRect` on the `anchorElement` prop. Use this when you need\ncomplete control over positioning. When this prop is specified, it is safe to pass `null` into the\n`anchorElement` prop. If `null` is passed into the `anchorElement` prop, an `owner` will not be\nprovided for the `PopupStack`. If an `anchorElement` is also provided, Popper listens to its\nscroll containers and uses it for clipping, so the Popper still updates when it scrolls.",
           "declarations": [
             {
               "name": "getAnchorClientRect",
@@ -454265,7 +454320,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
               "value": "DOMRect"
             }
           },
-          "description": "When provided, this optional callback will be used to determine positioning for the Popper element\ninstead of calling `getBoundingClientRect` on the `anchorElement` prop. Use this when you need\ncomplete control over positioning. When this prop is specified, it is safe to pass `null` into the\n`anchorElement` prop. If `null` is passed into the `anchorElement` prop, an `owner` will not be\nprovided for the `PopupStack`.",
+          "description": "When provided, this optional callback will be used to determine positioning for the Popper element\ninstead of calling `getBoundingClientRect` on the `anchorElement` prop. Use this when you need\ncomplete control over positioning. When this prop is specified, it is safe to pass `null` into the\n`anchorElement` prop. If `null` is passed into the `anchorElement` prop, an `owner` will not be\nprovided for the `PopupStack`. If an `anchorElement` is also provided, Popper listens to its\nscroll containers and uses it for clipping, so the Popper still updates when it scrolls.",
           "declarations": [
             {
               "name": "getAnchorClientRect",

package/dist/es6/lib/specs.js

@@ -5969,6 +5969,282 @@ module.exports = {specifications: [
       }
     ]
   },
+  {
+    "type": "file",
+    "name": "SubmenuPlacement",
+    "children": [
+      {
+        "type": "describe",
+        "name": "Submenu placement",
+        "children": [
+          {
+            "type": "describe",
+            "name": "given a scrollable ltr menu at the start edge",
+            "children": [
+              {
+                "type": "it",
+                "name": "should pass axe checks"
+              },
+              {
+                "type": "it",
+                "name": "should open beside the parent on the right"
+              },
+              {
+                "type": "describe",
+                "name": "when the parent menu is scrolled",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should remain beside the parent without covering it"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given a scrollable ltr menu at the end edge",
+            "children": [
+              {
+                "type": "it",
+                "name": "should pass axe checks"
+              },
+              {
+                "type": "it",
+                "name": "should open beside the parent on the left"
+              },
+              {
+                "type": "describe",
+                "name": "when the parent menu is scrolled",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should remain beside the parent without covering it"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given a scrollable rtl menu at the start edge",
+            "children": [
+              {
+                "type": "it",
+                "name": "should pass axe checks"
+              },
+              {
+                "type": "it",
+                "name": "should open beside the parent on the left"
+              },
+              {
+                "type": "describe",
+                "name": "when the parent menu is scrolled",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should remain beside the parent without covering it"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given a scrollable rtl menu at the end edge",
+            "children": [
+              {
+                "type": "it",
+                "name": "should pass axe checks"
+              },
+              {
+                "type": "it",
+                "name": "should open beside the parent on the right"
+              },
+              {
+                "type": "describe",
+                "name": "when the parent menu is scrolled",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should remain beside the parent without covering it"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given an explicit submenu placement",
+            "children": [
+              {
+                "type": "it",
+                "name": "should preserve the custom placement"
+              },
+              {
+                "type": "it",
+                "name": "should pass axe checks"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given an empty fallback list at the right edge",
+            "children": [
+              {
+                "type": "it",
+                "name": "should still allow the opposite placement"
+              },
+              {
+                "type": "it",
+                "name": "should pass axe checks"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given custom Popper options",
+            "children": [
+              {
+                "type": "it",
+                "name": "should preserve the custom offset from the parent menu"
+              },
+              {
+                "type": "it",
+                "name": "should pass axe checks"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given a ltr viewport too narrow for either side",
+            "children": [
+              {
+                "type": "it",
+                "name": "should pass axe checks"
+              },
+              {
+                "type": "it",
+                "name": "should fall back below the parent"
+              },
+              {
+                "type": "it",
+                "name": "should align with the parent's left edge"
+              },
+              {
+                "type": "it",
+                "name": "should stay inside the viewport horizontally"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given a rtl viewport too narrow for either side",
+            "children": [
+              {
+                "type": "it",
+                "name": "should pass axe checks"
+              },
+              {
+                "type": "it",
+                "name": "should fall back below the parent"
+              },
+              {
+                "type": "it",
+                "name": "should align with the parent's right edge"
+              },
+              {
+                "type": "it",
+                "name": "should stay inside the viewport horizontally"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given a parent menu near the bottom of a narrow viewport",
+            "children": [
+              {
+                "type": "it",
+                "name": "should pass axe checks"
+              },
+              {
+                "type": "it",
+                "name": "should fall back above the parent"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given a 320x568 viewport too short to clear the parent",
+            "children": [
+              {
+                "type": "it",
+                "name": "should pass axe checks"
+              },
+              {
+                "type": "it",
+                "name": "should use bottom-start"
+              },
+              {
+                "type": "it",
+                "name": "should stay inside the viewport"
+              },
+              {
+                "type": "describe",
+                "name": "when the parent menu is then scrolled",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should keep its placement"
+                  },
+                  {
+                    "type": "it",
+                    "name": "should stay inside the viewport"
+                  },
+                  {
+                    "type": "it",
+                    "name": "should not move while the parent keeps scrolling"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given a 360x568 viewport too short to clear the parent",
+            "children": [
+              {
+                "type": "it",
+                "name": "should pass axe checks"
+              },
+              {
+                "type": "it",
+                "name": "should use right-start"
+              },
+              {
+                "type": "it",
+                "name": "should stay inside the viewport"
+              },
+              {
+                "type": "describe",
+                "name": "when the parent menu is then scrolled",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should keep its placement"
+                  },
+                  {
+                    "type": "it",
+                    "name": "should stay inside the viewport"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
   {
     "type": "file",
     "name": "Switch",

package/dist/es6/lib/stackblitzFiles/packageJSONFile.js

@@ -18,11 +18,11 @@ export const packageJSONFile = `{
     "@emotion/react": "11.11.4",
     "@types/react": "18.2.60",
     "@types/react-dom": "18.2.19",
-    "@workday/canvas-kit-labs-react": "16.2.3",
-    "@workday/canvas-kit-preview-react": "16.2.3",
-    "@workday/canvas-kit-react": "16.2.3",
-    "@workday/canvas-kit-react-fonts": "^16.2.3",
-    "@workday/canvas-kit-styling": "16.2.3",
+    "@workday/canvas-kit-labs-react": "16.2.5",
+    "@workday/canvas-kit-preview-react": "16.2.5",
+    "@workday/canvas-kit-react": "16.2.5",
+    "@workday/canvas-kit-react-fonts": "^16.2.5",
+    "@workday/canvas-kit-styling": "16.2.5",
     "@workday/canvas-system-icons-web": "^5.0.3",
     "@workday/canvas-expressive-icons-web": "1.0.1",
     "@workday/canvas-tokens-web": "4.4.0-beta.11"

package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts

@@ -19,11 +19,11 @@ export const packageJSONFile = `{
     "@emotion/react": "11.11.4",
     "@types/react": "18.2.60",
     "@types/react-dom": "18.2.19",
-    "@workday/canvas-kit-labs-react": "16.2.3",
-    "@workday/canvas-kit-preview-react": "16.2.3",
-    "@workday/canvas-kit-react": "16.2.3",
-    "@workday/canvas-kit-react-fonts": "^16.2.3",
-    "@workday/canvas-kit-styling": "16.2.3",
+    "@workday/canvas-kit-labs-react": "16.2.5",
+    "@workday/canvas-kit-preview-react": "16.2.5",
+    "@workday/canvas-kit-react": "16.2.5",
+    "@workday/canvas-kit-react-fonts": "^16.2.5",
+    "@workday/canvas-kit-styling": "16.2.5",
     "@workday/canvas-system-icons-web": "^5.0.3",
     "@workday/canvas-expressive-icons-web": "1.0.1",
     "@workday/canvas-tokens-web": "4.4.0-beta.11"

package/dist/mdx/react/menu/examples/ScrollableSubmenu.tsx

@@ -0,0 +1,69 @@
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {Menu, menuCardStencil} from '@workday/canvas-kit-react/menu';
+import {PopperProps} from '@workday/canvas-kit-react/popup';
+import {createStencil, createStyles, px2rem} from '@workday/canvas-kit-styling';
+
+const containerStencil = createStencil({
+  base: {},
+  modifiers: {
+    atEnd: {true: {justifyContent: 'flex-end'}},
+    alignBottom: {true: {position: 'fixed', bottom: 0, left: 0, right: 0}},
+  },
+});
+
+// A fixed height makes the parent list scroll independently of the page.
+const cardStyles = createStyles({[menuCardStencil.vars.maxHeight]: px2rem(280)});
+// Short enough that a Sana submenu cannot fit below the target when the menu is pinned to the
+// bottom of the viewport, so placement falls back above the parent.
+const bottomEdgeCardStyles = createStyles({[menuCardStencil.vars.maxHeight]: px2rem(160)});
+
+export default ({
+  dir = 'ltr',
+  atEnd = false,
+  alignBottom = false,
+  submenuPopperProps,
+}: {
+  dir?: 'ltr' | 'rtl';
+  atEnd?: boolean;
+  alignBottom?: boolean;
+  submenuPopperProps?: Pick<PopperProps, 'placement' | 'fallbackPlacements' | 'popperOptions'>;
+}) => (
+  <CanvasProvider dir={dir}>
+    <Flex cs={containerStencil({atEnd, alignBottom})}>
+      <Menu>
+        <Menu.Target>Open Menu</Menu.Target>
+        <Menu.Popper>
+          <Menu.Card
+            cs={alignBottom ? bottomEdgeCardStyles : cardStyles}
+            data-testid="scrollable-menu"
+          >
+            <Menu.List>
+              <Menu.Item data-id="first">First Item</Menu.Item>
+              <Menu.Item data-id="second">Second Item</Menu.Item>
+              <Menu.Submenu>
+                <Menu.Submenu.TargetItem data-id="submenu">More Items</Menu.Submenu.TargetItem>
+                <Menu.Submenu.Popper {...submenuPopperProps}>
+                  <Menu.Submenu.Card>
+                    <Menu.Submenu.List data-testid="submenu">
+                      {Array.from({length: 6}, (_, index) => (
+                        <Menu.Submenu.Item key={index} data-id={`sub-${index}`}>
+                          Additional Menu Item {index + 1}
+                        </Menu.Submenu.Item>
+                      ))}
+                    </Menu.Submenu.List>
+                  </Menu.Submenu.Card>
+                </Menu.Submenu.Popper>
+              </Menu.Submenu>
+              {Array.from({length: 15}, (_, index) => (
+                <Menu.Item key={index} data-id={`item-${index}`}>
+                  Item {index + 1}
+                </Menu.Item>
+              ))}
+            </Menu.List>
+          </Menu.Card>
+        </Menu.Popper>
+      </Menu>
+    </Flex>
+  </CanvasProvider>
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "16.2.3",
+  "version": "16.2.5",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -47,10 +47,10 @@
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/csf": "0.0.1",
     "@workday/canvas-expressive-icons-web": "1.0.2",
-    "@workday/canvas-kit-labs-react": "^16.2.3",
-    "@workday/canvas-kit-preview-react": "^16.2.3",
-    "@workday/canvas-kit-react": "^16.2.3",
-    "@workday/canvas-kit-styling": "^16.2.3",
+    "@workday/canvas-kit-labs-react": "^16.2.5",
+    "@workday/canvas-kit-preview-react": "^16.2.5",
+    "@workday/canvas-kit-react": "^16.2.5",
+    "@workday/canvas-kit-styling": "^16.2.5",
     "@workday/canvas-system-icons-web": "^5.0.3",
     "@workday/canvas-tokens-web": "^4.4.0",
     "markdown-to-jsx": "^7.2.0",
@@ -63,5 +63,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "dd5a27ab062642ac115722808e063150f7866115"
+  "gitHead": "e5b96bcbbd1f827623f9e75b13699b74b4ac03dd"
 }