@workday/canvas-kit-docs 16.0.6 → 16.0.9

package/dist/es6/lib/specs.js

@@ -1895,6 +1895,20 @@ module.exports = {specifications: [
                       }
                     ]
                   },
+                  {
+                    "type": "describe",
+                    "name": "when a disabled item has focus and the menu is closed and reopened",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should move focus to the first item instead of the disabled item"
+                      },
+                      {
+                        "type": "it",
+                        "name": "should not leave focus on the disabled item"
+                      }
+                    ]
+                  },
                   {
                     "type": "describe",
                     "name": "when the enter key is pressed",
@@ -1917,6 +1931,112 @@ module.exports = {specifications: [
               }
             ]
           },
+          {
+            "type": "describe",
+            "name": "given the [Components/Popups/Menu, NestedSiblings] story is rendered",
+            "children": [
+              {
+                "type": "describe",
+                "name": "when the \"Second Item\" submenu is opened by hovering",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should set aria-expanded to true on \"Second Item\""
+                  },
+                  {
+                    "type": "describe",
+                    "name": "when the sibling \"Third Item\" is then hovered",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should close the \"Second Item\" submenu"
+                      },
+                      {
+                        "type": "it",
+                        "name": "should set aria-expanded to false on \"Second Item\""
+                      },
+                      {
+                        "type": "it",
+                        "name": "should leave only the root menu and one submenu open"
+                      },
+                      {
+                        "type": "describe",
+                        "name": "when the original \"Second Item\" is hovered again",
+                        "children": [
+                          {
+                            "type": "it",
+                            "name": "should close the \"Third Item\" submenu"
+                          },
+                          {
+                            "type": "it",
+                            "name": "should leave only the root menu and one submenu open"
+                          }
+                        ]
+                      }
+                    ]
+                  }
+                ]
+              },
+              {
+                "type": "describe",
+                "name": "when a submenu is opened with the right arrow key",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should open the submenu"
+                  },
+                  {
+                    "type": "it",
+                    "name": "should keep the submenu open and move focus into it"
+                  },
+                  {
+                    "type": "describe",
+                    "name": "when the left arrow key is pressed",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should close the submenu"
+                      },
+                      {
+                        "type": "it",
+                        "name": "should return focus to the \"Second Item\" target"
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the [Components/Popups/Menu, NestedDynamic] story is rendered",
+            "children": [
+              {
+                "type": "describe",
+                "name": "when hovering deeper into a chain of nested submenus",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should keep the ancestor submenu open"
+                  },
+                  {
+                    "type": "it",
+                    "name": "should keep every menu in the open chain visible"
+                  },
+                  {
+                    "type": "describe",
+                    "name": "when hovering back onto the ancestor item in the open trail",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should keep the open trail intact"
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          },
           {
             "type": "describe",
             "name": "given the [Testing/Popups/Menu, MenuWithFallbackPlacements] example is rendered",

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.0.6",
-    "@workday/canvas-kit-preview-react": "16.0.6",
-    "@workday/canvas-kit-react": "16.0.6",
-    "@workday/canvas-kit-react-fonts": "^16.0.6",
-    "@workday/canvas-kit-styling": "16.0.6",
+    "@workday/canvas-kit-labs-react": "16.0.9",
+    "@workday/canvas-kit-preview-react": "16.0.9",
+    "@workday/canvas-kit-react": "16.0.9",
+    "@workday/canvas-kit-react-fonts": "^16.0.9",
+    "@workday/canvas-kit-styling": "16.0.9",
     "@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.0.6",
-    "@workday/canvas-kit-preview-react": "16.0.6",
-    "@workday/canvas-kit-react": "16.0.6",
-    "@workday/canvas-kit-react-fonts": "^16.0.6",
-    "@workday/canvas-kit-styling": "16.0.6",
+    "@workday/canvas-kit-labs-react": "16.0.9",
+    "@workday/canvas-kit-preview-react": "16.0.9",
+    "@workday/canvas-kit-react": "16.0.9",
+    "@workday/canvas-kit-react-fonts": "^16.0.9",
+    "@workday/canvas-kit-styling": "16.0.9",
     "@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/Menu.mdx

@@ -34,6 +34,8 @@ yarn add @workday/canvas-kit-react
 `Menu` will automatically focus on the cursor item (first item by default). The `Menu` uses a menu
 model which composes a list model and a popup model and sets up accessibility features for you.
 
+> **Note:** When content exceeds `60vh`, the menu content is clipped and the menu becomes scrollable.
+
 ### Alt Example
 
 The `alt` variant is designed for use on alternative page backgrounds (`system.color.bg.alt.default`). Use this variant to maintain proper visual hierarchy when placing components on colored backgrounds. While the default variant should be used on `system.color.bg.default` backgrounds, the `alt` variant ensures the component remains visually elevated on `system.color.bg.alt.default` backgrounds.

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

@@ -0,0 +1,60 @@
+import React from 'react';
+
+import {Menu} from '@workday/canvas-kit-react/menu';
+import {BodyText} from '@workday/canvas-kit-react/text';
+import {system} from '@workday/canvas-tokens-web';
+
+export default () => {
+  const [selected, setSelected] = React.useState('');
+  return (
+    <Menu
+      id="first-menu"
+      onSelect={data => {
+        setSelected(data.id);
+      }}
+    >
+      <Menu.Target>Open Menu</Menu.Target>
+      <Menu.Popper>
+        <Menu.Card>
+          <Menu.List>
+            <Menu.Item data-id="first-item">First Item</Menu.Item>
+            <Menu.Submenu id="second-menu">
+              <Menu.Submenu.TargetItem data-id="second-item">Second Item</Menu.Submenu.TargetItem>
+              <Menu.Submenu.Popper>
+                <Menu.Submenu.Card>
+                  <Menu.Submenu.List>
+                    <Menu.Submenu.Item data-id="second-first-sub-item">
+                      Second: First Sub Item
+                    </Menu.Submenu.Item>
+                    <Menu.Submenu.Item data-id="second-second-sub-item">
+                      Second: Second Sub Item
+                    </Menu.Submenu.Item>
+                  </Menu.Submenu.List>
+                </Menu.Submenu.Card>
+              </Menu.Submenu.Popper>
+            </Menu.Submenu>
+            <Menu.Submenu id="third-menu">
+              <Menu.Submenu.TargetItem data-id="third-item">Third Item</Menu.Submenu.TargetItem>
+              <Menu.Submenu.Popper>
+                <Menu.Submenu.Card>
+                  <Menu.Submenu.List>
+                    <Menu.Submenu.Item data-id="third-first-sub-item">
+                      Third: First Sub Item
+                    </Menu.Submenu.Item>
+                    <Menu.Submenu.Item data-id="third-second-sub-item">
+                      Third: Second Sub Item
+                    </Menu.Submenu.Item>
+                  </Menu.Submenu.List>
+                </Menu.Submenu.Card>
+              </Menu.Submenu.Popper>
+            </Menu.Submenu>
+            <Menu.Item data-id="fourth-item">Fourth Item</Menu.Item>
+          </Menu.List>
+        </Menu.Card>
+      </Menu.Popper>
+      <BodyText size="small" cs={{marginBlockStart: system.gap.md}}>
+        Selected: <span data-testid="output">{selected}</span>
+      </BodyText>
+    </Menu>
+  );
+};

package/dist/mdx/react/tabs/examples/OverflowTabs.tsx

@@ -7,23 +7,24 @@ import {px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 type MyTabItem = {
-  id: string;
+  contextId: string;
   text: React.ReactNode;
   contents: string;
 };
 
 export default () => {
   const [items] = React.useState<MyTabItem[]>([
-    {id: 'first', text: 'First Tab', contents: 'Contents of First Tab'},
-    {id: 'second', text: 'Second Tab', contents: 'Contents of Second Tab'},
-    {id: 'third', text: 'Third Tab', contents: 'Contents of Third Tab'},
-    {id: 'fourth', text: 'Fourth Tab', contents: 'Contents of Fourth Tab'},
-    {id: 'fifth', text: 'Fifth Tab', contents: 'Contents of Fifth Tab'},
-    {id: 'sixth', text: 'Sixth Tab', contents: 'Contents of Sixth Tab'},
-    {id: 'seventh', text: 'Seventh Tab', contents: 'Contents of Seventh Tab'},
+    {contextId: 'first', text: 'First Tab', contents: 'Contents of First Tab'},
+    {contextId: 'second', text: 'Second Tab', contents: 'Contents of Second Tab'},
+    {contextId: 'third', text: 'Third Tab', contents: 'Contents of Third Tab'},
+    {contextId: 'fourth', text: 'Fourth Tab', contents: 'Contents of Fourth Tab'},
+    {contextId: 'fifth', text: 'Fifth Tab', contents: 'Contents of Fifth Tab'},
+    {contextId: 'sixth', text: 'Sixth Tab', contents: 'Contents of Sixth Tab'},
+    {contextId: 'seventh', text: 'Seventh Tab', contents: 'Contents of Seventh Tab'},
   ]);
   const model = useTabsModel({
     items,
+    getId: (item: MyTabItem) => item.contextId,
   });
   const [containerWidth, setContainerWidth] = React.useState('100%');
   return (

package/dist/mdx/react/tooltip/Tooltip.mdx

@@ -1,6 +1,7 @@
 import {ExampleCodeBlock, Specifications, SymbolDoc} from '@workday/canvas-kit-docs';
 import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
 import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
+import AIDisclosure from './examples/AIDisclosure';
 import CustomContent from './examples/CustomContent';
 import Default from './examples/Default';
 import DelayedTooltip from './examples/DelayedTooltip';
@@ -141,6 +142,15 @@ a dialog instead.
 
 <ExampleCodeBlock code={CustomContent} />
 
+### AI Disclosure
+
+Use a tooltip to disclose when content or functionality is powered by AI. Pair an icon button with a
+tooltip near the content it describes so users understand how it was produced before they act on it.
+The tooltip labels the button, making the disclosure available to both sighted and screen reader
+users.
+
+<ExampleCodeBlock code={AIDisclosure} />
+
 ### Delayed Tooltip
 
 The default delay for showing and hiding a tooltip are 300ms and 100ms, respectively. You can

package/dist/mdx/react/tooltip/examples/AIDisclosure.tsx

@@ -0,0 +1,38 @@
+import {ExternalHyperlink, TertiaryButton} from '@workday/canvas-kit-react/button';
+import {Card} from '@workday/canvas-kit-react/card';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {infoSparkleIcon} from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
+
+const containerStyles = createStyles({
+  background: system.color.bg.alt.default,
+  padding: system.padding.xl,
+});
+
+export default () => {
+  return (
+    <div className={containerStyles}>
+      <Card>
+        <Card.Heading>
+          Giant Pacific Octopus
+          <Tooltip title="This content is generated by AI" variant="alt" placement="right-end">
+            <TertiaryButton
+              size="extraSmall"
+              icon={infoSparkleIcon}
+              aria-label="This functionality is powered by AI"
+            />
+          </Tooltip>
+        </Card.Heading>
+        <Card.Body>
+          The giant Pacific octopus (Enteroctopus dofleini), also known as the North Pacific giant
+          octopus, is a large marine cephalopod belonging to the genus Enteroctopus and
+          Enteroctopodidae family. –{' '}
+          <ExternalHyperlink href="https://en.wikipedia.org/wiki/Giant_Pacific_octopus">
+            View Source
+          </ExternalHyperlink>
+        </Card.Body>
+      </Card>
+    </div>
+  );
+};

package/dist/mdx/react/tooltip/examples/Ellipsis.tsx

@@ -52,6 +52,11 @@ export default () => {
       <OverflowTooltip>
         <CustomContent />
       </OverflowTooltip>
+      <OverflowTooltip showDelay={2000} hideDelay={2000}>
+        <SecondaryButton cs={{maxWidth: px2rem(200)}}>
+          2 second delay on show and hide content
+        </SecondaryButton>
+      </OverflowTooltip>
     </React.Fragment>
   );
 };

package/dist/mdx/styling/mdx/Stencils.mdx

@@ -405,7 +405,9 @@ To style elements in the render function, we'll need to choose what elements to
 the example below, we're able to spread the parts directly to elements. The Stencil will generate
 the type and value most appropriate for the context the part is used. In the Stencil, the part is
 represented by a string that looks like `[data-part="{partValue}"]` and in the render function, it
-is an object that looks like `{'data-part': partValue}`.
+is an object that looks like `{'data-part': partValue}`. That object also has a non-enumerable
+`selector` property (`[data-part="{partValue}"]`) for targeting the part from another stencil's
+style object without writing the attribute selector by hand.
 
 ```jsx
 import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
@@ -444,6 +446,22 @@ const MyButton = ({children, ...elemProps}) => {
 };
 ```
 
+To target a part from another stencil, use `.selector`. Spreading the part onto an element still
+only applies `data-part`.
+
+```jsx
+const cardStencil = createStencil({
+  base: {
+    [`&:where(:has(${myButtonStencil.parts.icon.selector}))`]: {
+      paddingInlineStart: 0,
+    },
+    [`& ${myButtonStencil.parts.label.selector}`]: {
+      fontWeight: 700,
+    },
+  },
+});
+```
+
 As a reusable component, you can use component parts to style elements that are not exposed in the
 API. Consumers can also use the type safe Stencil to target that element to style it as well. As a
 general rule, a Stencil maps to a component. Multiple Stencils per component usually means nested

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "16.0.6",
+  "version": "16.0.9",
   "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.0.6",
-    "@workday/canvas-kit-preview-react": "^16.0.6",
-    "@workday/canvas-kit-react": "^16.0.6",
-    "@workday/canvas-kit-styling": "^16.0.6",
+    "@workday/canvas-kit-labs-react": "^16.0.9",
+    "@workday/canvas-kit-preview-react": "^16.0.9",
+    "@workday/canvas-kit-react": "^16.0.9",
+    "@workday/canvas-kit-styling": "^16.0.9",
     "@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": "66fbb19d5308fd96929a6bcad407016f71574a9d"
+  "gitHead": "83ec5bdb4736eabff2829149a705ed07f00af83f"
 }