@workday/canvas-kit-docs 13.0.0-alpha.1107-next.0 → 13.0.0-alpha.1111-next.0

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": "12.6.7",
-    "@workday/canvas-kit-preview-react": "12.6.7",
-    "@workday/canvas-kit-react": "12.6.7",
-    "@workday/canvas-kit-react-fonts": "^12.6.7",
-    "@workday/canvas-kit-styling": "12.6.7",
+    "@workday/canvas-kit-labs-react": "12.6.8",
+    "@workday/canvas-kit-preview-react": "12.6.8",
+    "@workday/canvas-kit-react": "12.6.8",
+    "@workday/canvas-kit-react-fonts": "^12.6.8",
+    "@workday/canvas-kit-styling": "12.6.8",
     "@workday/canvas-system-icons-web": "3.0.22",
     "@workday/canvas-tokens-web": "2.0.0"
   },

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

@@ -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": "12.6.7",
-    "@workday/canvas-kit-preview-react": "12.6.7",
-    "@workday/canvas-kit-react": "12.6.7",
-    "@workday/canvas-kit-react-fonts": "^12.6.7",
-    "@workday/canvas-kit-styling": "12.6.7",
+    "@workday/canvas-kit-labs-react": "12.6.8",
+    "@workday/canvas-kit-preview-react": "12.6.8",
+    "@workday/canvas-kit-react": "12.6.8",
+    "@workday/canvas-kit-react-fonts": "^12.6.8",
+    "@workday/canvas-kit-styling": "12.6.8",
     "@workday/canvas-system-icons-web": "3.0.22",
     "@workday/canvas-tokens-web": "2.0.0"
   },

package/dist/mdx/13.0-UPGRADE-GUIDE.mdx

@@ -17,17 +17,18 @@ any questions.
 - [Codemod](#codemod)
   - [Instructions](#instructions)
 - [Component Updates](#component-updates)
-  - [Styling API and CSS Tokens](#styling-api-and-css-tokens)
-  - [Avatar](#avatar)
-  - [Expandable](#expandable)
-  - [External Hyperlink](#external-hyperlink)
+	- [Styling API and CSS Tokens](#styling-api-and-css-tokens)
+	- [Avatar](#avatar)
+	- [Expandable](#expandable)
+	- [External Hyperlink](#external-hyperlink)
 	- [Form Field and Form Field Group](#form-field-and-form-field-group)
-  - [Pill](#pill)
-  - [Tabs](#tabs)
+	- [Pill (Preview)](#pill-preview)
+	- [SidePanel (Preview)](#sidepanel-preview)
+	- [Tabs](#tabs)
 - [Brand Refresh](#brand-refresh)
   - [Logo Updates](#logo-updates)
 - [Infrastructure](#infrastructure)
-	- [Supporting react-jsx](#supoorting-react-jsx)
+	- [Supporting react-jsx](#supporting-react-jsx)
 - [Troubleshooting](#troubleshooting)
 - [Glossary](#glossary)
   - [Main](#main)
@@ -197,14 +198,14 @@ The `orientation` prop on `FormField` component has been updated to remove the d
 ```
 
 
-### Pill
+### Pill (Preview)
 
 **PR:** [#3104](https://github.com/Workday/canvas-kit/pull/3104)
 
 A few changes have been made to `Pill` to ensure proper accessibility and styles.
 
 - The border color on hover has been updated from `licorice400` to `licorice500` to match our design specs.
-- We've removed extra elements and leverage [flex box}(https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox) to ensure only the label receives overflow styles. When `maxWidth` is set, it is set on the parent `<Pill/>` element and the child elements will be styled accordingly. Before v13, `maxWidth` wasn't calculating the width of all its elements and wasn't a true pixel value.
+- We've removed extra elements and leverage [flex box](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox) to ensure only the label receives overflow styles. When `maxWidth` is set, it is set on the parent `<Pill/>` element and the child elements will be styled accordingly. Before v13, `maxWidth` wasn't calculating the width of all its elements and wasn't a true pixel value.
 
 ##### Breaking Changes
 
@@ -213,6 +214,13 @@ A few changes have been made to `Pill` to ensure proper accessibility and styles
 - `<Pill.IconButton/>` no longer has a default `aria-label="remove"`. You *must* provide an `aria-label` for `<Pill.IconButton/>` to ensure proper accessibility. Our examples have been updated to reflect this change.
 - `<Pill.Label/>` is a *required* element when using other sub-components like `<Pill.Icon/>` to ensure that the label truncates correctly.
 
+### SidePanel (Preview)
+
+**PR:** [3258](https://github.com/Workday/canvas-kit/pull/3258)
+
+When we supported IE 11 we needed to use  [CSS Animation](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations) to support animation events. Since we dropped support for IE11, we can now use [CSS Transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions) to animate the `width` of the `SidePanel` when it's expanding or collapsing.
+As part of this change, we also removed the `onAnimationStart` prop. Since moving to transitions, React doesn't support `onTransitionStart`, therefore the prop is no longer needed.
+
 ### Tabs
 
 **PR:** [#3119](https://github.com/Workday/canvas-kit/pull/3119)
@@ -279,7 +287,6 @@ If you're using `react@16.x.x`, you'll need to upgrade to `react@17.x.x` to use
 
 >**Note:** You'll need to update the way `jsx` transpiles. The automatic runtime feature, enabled through the `@babel/preset-react` preset with the `runtime: "automatic"` option, handles the importing of functions that JSX transpiles to.
 
-```sh
 
 ## Troubleshooting
 

package/dist/mdx/react/collection/mdx/examples/MultiSelection.tsx

@@ -8,6 +8,7 @@ import {
   useListModel,
   ListItemProps,
   ListBox,
+  getCursor,
 } from '@workday/canvas-kit-react/collection';
 import {composeHooks, createSubcomponent} from '@workday/canvas-kit-react/common';
 
@@ -47,7 +48,7 @@ export default () => {
         <Item data-id="third">Third</Item>
       </ListBox>
 
-      <p>Cursor ID: {model.state.cursorId}</p>
+      <p>Cursor ID: {getCursor(model.state)}</p>
       <p>
         Selected IDs: {(model.state.selectedIds !== 'all' ? model.state.selectedIds : []).join(',')}
       </p>

package/dist/mdx/react/collection/mdx/examples/Selection.tsx

@@ -7,6 +7,7 @@ import {
   useListModel,
   ListItemProps,
   ListBox,
+  getCursor,
 } from '@workday/canvas-kit-react/collection';
 import {
   composeHooks,
@@ -51,7 +52,7 @@ export default () => {
         <SelectableItem data-id="third">Third</SelectableItem>
       </ListBox>
 
-      <p>Cursor ID: {model.state.cursorId}</p>
+      <p>Cursor ID: {getCursor(model.state)}</p>
       <p>Selected ID: {model.state.selectedIds[0]}</p>
     </>
   );

package/dist/mdx/react/menu/Menu.mdx

@@ -4,6 +4,8 @@ import ContextMenu from './examples/ContextMenu';
 import Icons from './examples/Icons';
 import SelectableMenu from './examples/SelectableMenu';
 import Grouping from './examples/Grouping';
+import Nested from './examples/Nested';
+import NestedDynamic from './examples/Nested';
 
 # Canvas Kit Menu
 
@@ -81,6 +83,26 @@ and are not selectable with the keyboard or mouse.
 
 <ExampleCodeBlock code={Grouping} />
 
+### Nested
+
+Menus support nesting. If you only have a few items and not very many nesting levels, the menu can
+be defined statically using JSX. A submenu is defined using the `<Menu.Submenu>` component. The
+`Submenu` is implemented as a special `Menu` subcomponent. The API of the submenu is the same as the
+`Menu` except the submenu's target is also a menu item. The component is named `TargetItem` to
+indicate this dual role.
+
+<ExampleCodeBlock code={Nested} />
+
+### Nested Dynamic Items
+
+Menu nesting is simpler with the dynamic API. In this example, a `renderItem` function is defined to
+allow recursive nesting of items using a data structure you define. A submenu will inherit the
+`getId` and `getTextValue` functions of the parent menu. While you can pass a specialize `getId` or
+`getTextValue` function to each submenu, it may be simpler to use the same one for the menu and
+submenus.
+
+<ExampleCodeBlock code={NestedDynamic} />
+
 ## Component API
 
 <SymbolDoc name="Menu" fileName="/react/" />

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import {chevronRightSmallIcon} from '@workday/canvas-system-icons-web';
+
+import {Menu} from '@workday/canvas-kit-react/menu';
+import {BodyText} from '@workday/canvas-kit-react/text';
+
+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="first-sub-item">First Sub Item</Menu.Submenu.Item>
+                    <Menu.Submenu.Item data-id="second-sub-item">First Sub Item</Menu.Submenu.Item>
+                    <Menu.Submenu.Item data-id="third-sub-item">Third Sub Item</Menu.Submenu.Item>
+                    <Menu.Submenu.Item data-id="fourth-sub-item">Fourth Sub Item</Menu.Submenu.Item>
+                  </Menu.Submenu.List>
+                </Menu.Submenu.Card>
+              </Menu.Submenu.Popper>
+            </Menu.Submenu>
+            <Menu.Divider />
+            <Menu.Item data-id="third-item">
+              Third Item (with a really, really, really long label)
+            </Menu.Item>
+            <Menu.Item aria-disabled data-id="fourth-item">
+              Fourth Item
+            </Menu.Item>
+          </Menu.List>
+        </Menu.Card>
+      </Menu.Popper>
+      <BodyText size="small" marginTop="s">
+        Selected: <span data-testid="output">{selected}</span>
+      </BodyText>
+    </Menu>
+  );
+};

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

@@ -0,0 +1,105 @@
+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';
+
+type Item = {
+  type?: 'item';
+  id: string;
+  label: string;
+};
+type SubmenuItem = {
+  id: string;
+  label: string;
+  type: 'submenu';
+  children: (Item | SubmenuItem)[];
+};
+
+// This is a user-defined object. The structure uses `id` for the item identifier which is the
+// default key used by the collection system and therefore doesn't require a `getId` function to be
+// passed to the model. The `label` isn't the standard text value used by the collection system, so
+// a `getTextValue` function is required. The `type` and `children` aren't important at all to the
+// menu and are used in the template by the user-defined `renderItem` function.
+const items: (SubmenuItem | Item)[] = [
+  {id: 'first-item', label: 'First Item'},
+  {
+    id: 'second-item',
+    label: 'Second Item',
+    type: 'submenu',
+    children: [
+      {id: 'first-sub-item', label: 'First Sub Item'},
+      {
+        id: 'second-sub-item',
+        label: 'Second Sub Item',
+        type: 'submenu',
+        children: [
+          {id: 'first-sub-sub-item', label: 'First Sub Sub Item'},
+          {
+            id: 'second-sub-sub-item',
+            type: 'submenu',
+            label: 'Second Sub Sub Item',
+            children: [
+              {id: 'first-sub-sub-sub-item', label: 'First Sub Sub Sub Item'},
+              {
+                id: 'second-sub-sub-sub-item',
+                label: 'Second Sub Sub Sub Item',
+              },
+              {id: 'third-sub-sub-sub-item', label: 'Third Sub Sub Sub Item'},
+              {id: 'fourth-sub-sub-sub-item', label: 'Fourth Sub Sub Sub Item'},
+            ],
+          },
+          {id: 'third-sub-sub-item', label: 'Third Sub Sub Item'},
+          {id: 'fourth-sub-sub-item', label: 'Fourth Sub Sub Item'},
+        ],
+      },
+      {id: 'third-sub-item', label: 'Third Sub Item'},
+      {id: 'fourth-sub-item', label: 'Fourth Sub Item'},
+    ],
+  },
+  {id: 'third-item', label: 'Third Item'},
+  {id: 'fourth-item', label: 'Fourth Item'},
+];
+
+export default () => {
+  const [selected, setSelected] = React.useState('');
+
+  // defining this inline function allows use to recurse any nesting level defined by the `items`
+  // array.
+  function renderItem(item: SubmenuItem | Item) {
+    if (item.type === 'submenu') {
+      return (
+        <Menu.Submenu id={item.id} items={item.children}>
+          <Menu.Submenu.TargetItem>{item.label}</Menu.Submenu.TargetItem>
+          <Menu.Submenu.Popper>
+            <Menu.Submenu.Card>
+              <Menu.Submenu.List>{renderItem}</Menu.Submenu.List>
+            </Menu.Submenu.Card>
+          </Menu.Submenu.Popper>
+        </Menu.Submenu>
+      );
+    }
+    return <Menu.Item>{item.label}</Menu.Item>;
+  }
+
+  return (
+    <Menu
+      items={items}
+      id="first-menu"
+      getTextValue={item => item.label}
+      onSelect={data => {
+        setSelected(data.id);
+      }}
+    >
+      <Menu.Target>Open Menu</Menu.Target>
+      <Menu.Popper>
+        <Menu.Card>
+          <Menu.List>{renderItem}</Menu.List>
+        </Menu.Card>
+      </Menu.Popper>
+      <BodyText size="small" cs={{marginBlockStart: system.space.x4}}>
+        Selected: <span data-testid="output">{selected}</span>
+      </BodyText>
+    </Menu>
+  );
+};

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

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import {isCursor} from '@workday/canvas-kit-react/collection';
 import {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';
 
 type Tab = {
@@ -32,14 +33,14 @@ export default () => {
    * @param id The id of the item that will be removed
    */
   const removeItem = <T extends unknown>(id: string, model: ReturnType<typeof useTabsModel>) => {
-    const index = model.state.items.findIndex(item => item.id === model.state.cursorId);
+    const index = model.state.items.findIndex(item => isCursor(model.state, item.id));
     const nextIndex = index === model.state.items.length - 1 ? index - 1 : index + 1;
     const nextId = model.state.items[nextIndex].id;
     if (model.state.selectedIds[0] === id) {
       // We're removing the currently selected item. Select next item
       model.events.select({id: nextId});
     }
-    if (model.state.cursorId === id) {
+    if (isCursor(model.state, id)) {
       // We're removing the currently focused item. Focus next item
       model.events.goTo({id: nextId});
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "13.0.0-alpha.1107-next.0",
+  "version": "13.0.0-alpha.1111-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -45,10 +45,10 @@
     "@emotion/styled": "^11.6.0",
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^13.0.0-alpha.1107-next.0",
-    "@workday/canvas-kit-preview-react": "^13.0.0-alpha.1107-next.0",
-    "@workday/canvas-kit-react": "^13.0.0-alpha.1107-next.0",
-    "@workday/canvas-kit-styling": "^13.0.0-alpha.1107-next.0",
+    "@workday/canvas-kit-labs-react": "^13.0.0-alpha.1111-next.0",
+    "@workday/canvas-kit-preview-react": "^13.0.0-alpha.1111-next.0",
+    "@workday/canvas-kit-react": "^13.0.0-alpha.1111-next.0",
+    "@workday/canvas-kit-styling": "^13.0.0-alpha.1111-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.1.1",
     "markdown-to-jsx": "^7.2.0",
@@ -61,5 +61,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "68413fa0564895825344e09a927b4848ebfe4824"
+  "gitHead": "b0529fc270482d902e8da5ba424763cfb0b6b994"
 }