@workday/canvas-kit-docs 15.1.12 → 15.1.14

package/dist/es6/lib/docs.js

@@ -177013,7 +177013,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",
@@ -206796,7 +206796,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",
@@ -272167,6 +272167,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",
@@ -272225,11 +272250,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": {
@@ -272237,11 +272268,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,
@@ -272267,11 +272304,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": {
@@ -272279,11 +272322,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,
@@ -272345,11 +272394,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": "",
@@ -272521,7 +272576,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",
@@ -273458,7 +273513,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",
@@ -323478,7 +323533,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",
@@ -328130,7 +328185,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",
@@ -384999,7 +385054,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

@@ -5039,6 +5039,286 @@ 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 still fall back below the parent"
+              },
+              {
+                "type": "it",
+                "name": "should stay inside the viewport"
+              },
+              {
+                "type": "describe",
+                "name": "when the parent menu is then scrolled",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should keep the vertical 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 still fall back below the parent"
+              },
+              {
+                "type": "it",
+                "name": "should stay inside the viewport"
+              },
+              {
+                "type": "describe",
+                "name": "when the parent menu is then scrolled",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should keep the vertical placement"
+                  },
+                  {
+                    "type": "it",
+                    "name": "should stay inside the viewport"
+                  },
+                  {
+                    "type": "it",
+                    "name": "should not move while the parent keeps scrolling"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
   {
     "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": "15.1.12",
-    "@workday/canvas-kit-preview-react": "15.1.12",
-    "@workday/canvas-kit-react": "15.1.12",
-    "@workday/canvas-kit-react-fonts": "^15.1.12",
-    "@workday/canvas-kit-styling": "15.1.12",
+    "@workday/canvas-kit-labs-react": "15.1.14",
+    "@workday/canvas-kit-preview-react": "15.1.14",
+    "@workday/canvas-kit-react": "15.1.14",
+    "@workday/canvas-kit-react-fonts": "^15.1.14",
+    "@workday/canvas-kit-styling": "15.1.14",
     "@workday/canvas-system-icons-web": "4.0.2",
     "@workday/canvas-expressive-icons-web": "1.0.1",
     "@workday/canvas-tokens-web": "4.2.0"

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": "15.1.12",
-    "@workday/canvas-kit-preview-react": "15.1.12",
-    "@workday/canvas-kit-react": "15.1.12",
-    "@workday/canvas-kit-react-fonts": "^15.1.12",
-    "@workday/canvas-kit-styling": "15.1.12",
+    "@workday/canvas-kit-labs-react": "15.1.14",
+    "@workday/canvas-kit-preview-react": "15.1.14",
+    "@workday/canvas-kit-react": "15.1.14",
+    "@workday/canvas-kit-react-fonts": "^15.1.14",
+    "@workday/canvas-kit-styling": "15.1.14",
     "@workday/canvas-system-icons-web": "4.0.2",
     "@workday/canvas-expressive-icons-web": "1.0.1",
     "@workday/canvas-tokens-web": "4.2.0"

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

@@ -0,0 +1,63 @@
+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)});
+
+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={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": "15.1.12",
+  "version": "15.1.14",
   "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": "^15.1.12",
-    "@workday/canvas-kit-preview-react": "^15.1.12",
-    "@workday/canvas-kit-react": "^15.1.12",
-    "@workday/canvas-kit-styling": "^15.1.12",
+    "@workday/canvas-kit-labs-react": "^15.1.14",
+    "@workday/canvas-kit-preview-react": "^15.1.14",
+    "@workday/canvas-kit-react": "^15.1.14",
+    "@workday/canvas-kit-styling": "^15.1.14",
     "@workday/canvas-system-icons-web": "4.2.0",
     "@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": "14e5d60c1526174d2420843610f67314fa0e540e"
+  "gitHead": "c11faa4de782aa959ab56dbe2d96014e4d034fef"
 }