@workday/canvas-kit-react 9.0.0-alpha.412-next.14 → 9.0.0-alpha.414-next.16

package/collection/lib/useCursorListModel.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {assert, createModelHook, Generic} from '@workday/canvas-kit-react/common';
 
-import {useBaseListModel, Item, defaultGetId as getId} from './useBaseListModel';
+import {useBaseListModel, Item} from './useBaseListModel';
 
 type NavigationInput = Pick<ReturnType<typeof useCursorListModel>, 'state'>;
 
@@ -365,7 +365,7 @@ export const useCursorListModel = createModelHook({
     registerItem(data: Parameters<typeof list.events.registerItem>[0]) {
       // point the cursor at the first item
       if (!initialCurrentRef.current) {
-        initialCurrentRef.current = getId(data.item);
+        initialCurrentRef.current = list.getId(data.item);
         setCursorId(initialCurrentRef.current);
       }
       list.events.registerItem(data);

package/collection/lib/useListItemRegister.tsx

@@ -5,6 +5,7 @@ import {
   createElemPropsHook,
   useLocalRef,
   useForkRef,
+  slugify,
 } from '@workday/canvas-kit-react/common';
 
 import {Item} from './useBaseListModel';
@@ -26,7 +27,7 @@ import {useListModel} from './useListModel';
  */
 export const useListItemRegister = createElemPropsHook(useListModel)(
   (
-    {state, events, getId},
+    {state, events},
     ref?: React.Ref<HTMLElement>,
     elemProps: {
       'data-id'?: string;
@@ -64,7 +65,7 @@ export const useListItemRegister = createElemPropsHook(useListModel)(
 
       // TODO: Better lookup that using `items.find`. We need a more generic collection to handle seeing if an item already exists
       // bail early if item already exists. This happens if items were already provided.
-      if (state.items.find(item => getId(item) === itemId)) {
+      if (state.items.find(item => item.id === itemId)) {
         return;
       }
       events.registerItem({
@@ -89,6 +90,7 @@ export const useListItemRegister = createElemPropsHook(useListModel)(
       'aria-setsize': elemProps.virtual?.size,
       'aria-posinset': elemProps.virtual ? elemProps.item!.index + 1 : undefined,
       style,
+      id: slugify(`${state.id}-${localId}`),
     };
   }
 );

package/common/lib/utils/index.ts

@@ -10,6 +10,7 @@ export * from './assert';
 export * from './useMount';
 export * from './components';
 export * from './models';
+export * from './slugify';
 export * from './elements';
 export * from './useConstant';
 export * from './useIsFullscreen';

package/common/lib/utils/slugify.ts

@@ -0,0 +1,11 @@
+/**
+ * Function that takes a string and returns a "slug" which can be used in HTML
+ */
+export function slugify(input: string): string {
+  return input
+    .trim()
+    .replace(/[^\w\s-]/g, '')
+    .replace(/[\s_-]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .toLowerCase();
+}

package/dialog/lib/Dialog.tsx

@@ -14,16 +14,82 @@ export interface DialogProps {
   children: React.ReactNode;
 }
 
+/**
+ * This component is the container component and does not render any semantic elements. It provides
+ * a React Context model for the `Dialog` subcomponents. If you manually pass a `model` to all
+ * subcomponents, this container component isn't needed. If you do not pass a `model`, the `Dialog`
+ * container component will build a default one using `useDialogModel`. `Dialog` is a composition of a
+ * {@link Popup} component and has a similar structure to `Popup`.
+ */
 export const Dialog = createContainer()({
   displayName: 'Dialog',
   modelHook: useDialogModel,
   subComponents: {
+    /**
+     * A `Dialog.Body` is a thin wrapper around {@link CardBody Card.Body} and doesn't actually take
+     * a model. It adds `body` styling and nothing else.
+     */
     Body: Popup.Body,
+    /**
+     * A `Dialog.Card` is a wrapper around the {@link Card} component, but hooked up to a
+     * {@link DialogModel}. By default, this element has a `role=dialog`, `aria-labelledby` and an `id`.
+     * The behavior hook used is called {@link useDialogCard}.
+     */
     Card: DialogCard,
+    /**
+     * A `Dialog.CloseIcon` is an icon button that is the `X` at the top of a dialog. It will hide a
+     * dialog when clicked. The behavior hook used is called {@link usePopupCloseButton}.
+     */
     CloseIcon: Popup.CloseIcon,
+    /**
+     * A `Dialog.Target` is any element that is meant to show the Dialog. The default component
+     * rendered by this component is a {@link SecondaryButton} element. You can override this by
+     * passing the desired component via `as`. Many examples above use `as={DeleteButton}`. If you
+     * want to render a {@link TertiaryButton} instead, use `as={TertiaryButton}`. The behavior hook
+     * used is called {@link usePopupTarget}.
+     *
+     * ```tsx
+     * const model = useDialogModel();
+     *
+     * // using this component
+     * <Dialog.Target>Show Dialog</Dialog.Target>
+     *
+     * // using props instead
+     * const dialogTargetButtonProps = useDialogTarget(model);
+     * <SecondaryButton {...dialogTargetButtonProps}>Show Dialog</SecondaryButton>
+     * ```
+     *
+     * `Dialog.Target` doesn't provide any styling by default. All styling comes from the default
+     * component used, which is {@link SecondaryButton}. If you don't want any styling, you can do
+     * the following:
+     *
+     * ```tsx
+     * <Dialog.Target as="button">Open</Dialog.Target>
+     * ```
+     *
+     * To add your own styling, you could either add a `css` prop, or make a styled button and pass
+     * that styled component via the `as` prop.
+     */
     Target: Popup.Target,
+    /**
+     * A `Dialog.Heading` is a wrapper around {@link CardHeading Card.Heading} that connect the
+     * heading to a {@link DialogModel}. It will add an `id` to the element that match the
+     * `aria-labelledby` that is applied to the `Dialog.Card` element for accessibility. The behavior
+     * hook used is called {@link usePopupHeading}.
+     */
     Heading: Popup.Heading,
+    /**
+     * A `Dialog.Popper` is a wrapper around {@link PopupPopper Popup.Popper}. The behavior
+     * hook used is called {@link useDialogPopper}.
+     */
+
     Popper: DialogPopper,
+    /**
+     * A `Dialog.CloseButton` is a button that will hide a dialog. By default, this is a
+     * {@link SecondaryButton} component, but `as` can be used to render any button element (i.e
+     * {@link DeleteButton} or {@link PrimaryButton}). The behavior hook used is called
+     * {@link usePopupCloseButton}.
+     */
     CloseButton: Popup.CloseButton,
   },
 })(({children}: DialogProps) => {

package/dist/commonjs/action-bar/lib/ActionBarItem.d.ts

@@ -107,6 +107,7 @@ export declare const useActionBarItem: import("@workday/canvas-kit-react/common"
     'aria-setsize': number | undefined;
     'aria-posinset': number | undefined;
     style: React.CSSProperties;
+    id: string;
 }>;
 export declare const ActionBarItem: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"button", import("@workday/canvas-kit-react/button").SecondaryButtonProps>, ActionBarItemProps, {
     state: {

package/dist/commonjs/action-bar/lib/ActionBarItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBarItem.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,MAAM,WAAW,kBAAkB;IACjC;;;;;;OAMG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAAgE,CAAC;AAE9F,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMxB,CAAC"}
+{"version":3,"file":"ActionBarItem.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,MAAM,WAAW,kBAAkB;IACjC;;;;;;OAMG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAAgE,CAAC;AAE9F,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMxB,CAAC"}

package/dist/commonjs/breadcrumbs/lib/BreadcrumbsCurrentItem.d.ts

@@ -168,6 +168,7 @@ export declare const useBreadcrumbsItem: import("@workday/canvas-kit-react/commo
     'aria-setsize': number | undefined;
     'aria-posinset': number | undefined;
     style: React.CSSProperties;
+    id: string;
 }>;
 export declare const BreadcrumbsCurrentItem: import("@workday/canvas-kit-react/common").ElementComponentM<"li", BreadcrumbsCurrentItemProps, {
     state: {

package/dist/commonjs/breadcrumbs/lib/BreadcrumbsCurrentItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbsCurrentItem.d.ts","sourceRoot":"","sources":["../../../../breadcrumbs/lib/BreadcrumbsCurrentItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAkB,oBAAoB,EAAC,MAAM,mCAAmC,CAAC;AAMxF,OAAO,EAAO,SAAS,EAAC,MAAM,gCAAgC,CAAC;AAE/D,MAAM,WAAW,2BAA4B,SAAQ,SAAS;IAC5D,YAAY,CAAC,EAAE,oBAAoB,CAAC;CACrC;AAED,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkB9B,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwBlC,CAAC"}
+{"version":3,"file":"BreadcrumbsCurrentItem.d.ts","sourceRoot":"","sources":["../../../../breadcrumbs/lib/BreadcrumbsCurrentItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAkB,oBAAoB,EAAC,MAAM,mCAAmC,CAAC;AAMxF,OAAO,EAAO,SAAS,EAAC,MAAM,gCAAgC,CAAC;AAE/D,MAAM,WAAW,2BAA4B,SAAQ,SAAS;IAC5D,YAAY,CAAC,EAAE,oBAAoB,CAAC;CACrC;AAED,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkB9B,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwBlC,CAAC"}

package/dist/commonjs/breadcrumbs/lib/BreadcrumbsItem.d.ts

@@ -111,6 +111,7 @@ export declare const useBreadcrumbsItem: import("@workday/canvas-kit-react/commo
     'aria-setsize': number | undefined;
     'aria-posinset': number | undefined;
     style: React.CSSProperties;
+    id: string;
 }>;
 export declare const BreadcrumbsItem: import("@workday/canvas-kit-react/common").ElementComponentM<"li", BreadcrumbsItemProps, {
     state: {

package/dist/commonjs/breadcrumbs/lib/BreadcrumbsItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbsItem.d.ts","sourceRoot":"","sources":["../../../../breadcrumbs/lib/BreadcrumbsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,EAAO,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAOjE,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD;;;;;;OAMG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoB9B,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwB1B,CAAC"}
+{"version":3,"file":"BreadcrumbsItem.d.ts","sourceRoot":"","sources":["../../../../breadcrumbs/lib/BreadcrumbsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,EAAO,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAOjE,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD;;;;;;OAMG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoB9B,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwB1B,CAAC"}

package/dist/commonjs/collection/lib/useCursorListModel.d.ts

@@ -139,6 +139,23 @@ export declare const useCursorListModel: (<TT_Special_Generic>(config?: (Partial
     pageSize: number;
     id: string;
     getId: (item: any) => string;
+    /**
+     * Factory function that does type checking to create navigation managers. Navigation managers
+     * are expected to handle all methods of a grid. If your use-case isn't meant to handle a grid,
+     * pick one of the existing navigation managers and override the methods you wish to implement.
+     *
+     * For example,
+     * ```tsx
+     * import {createNavigationManager, wrappingNavigationManager} from '@workday/canvas-kit-react/collection'
+     *
+     * const navigationManager = createNavigationManager({
+     *   ...wrappingNavigationManager,
+     *   getNext(id, {state}) {
+     *     //
+     *   }
+     * })
+     * ```
+     */
     getTextValue: (item: any) => string;
     nonInteractiveIds: string[];
     orientation: import("./useBaseListModel").Orientation;
@@ -1122,6 +1139,23 @@ export declare const useCursorListModel: (<TT_Special_Generic>(config?: (Partial
     pageSize: number;
     id: string;
     getId: (item: any) => string;
+    /**
+     * Factory function that does type checking to create navigation managers. Navigation managers
+     * are expected to handle all methods of a grid. If your use-case isn't meant to handle a grid,
+     * pick one of the existing navigation managers and override the methods you wish to implement.
+     *
+     * For example,
+     * ```tsx
+     * import {createNavigationManager, wrappingNavigationManager} from '@workday/canvas-kit-react/collection'
+     *
+     * const navigationManager = createNavigationManager({
+     *   ...wrappingNavigationManager,
+     *   getNext(id, {state}) {
+     *     //
+     *   }
+     * })
+     * ```
+     */
     getTextValue: (item: any) => string;
     nonInteractiveIds: string[];
     orientation: import("./useBaseListModel").Orientation;

package/dist/commonjs/collection/lib/useCursorListModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCursorListModel.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useCursorListModel.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"useCursorListModel.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useCursorListModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA0B,OAAO,EAAC,MAAM,kCAAkC,CAAC;AAElF,OAAO,EAAmB,IAAI,EAAC,MAAM,oBAAoB,CAAC;AAE1D,aAAK,eAAe,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,kBAAkB,CAAC,EAAE,OAAO,CAAC,CAAC;AAE5E;;;;GAIG;AACH,MAAM,WAAW,iBAAiB;IAChC;0CACsC;IACtC,QAAQ,EAAE,mBAAmB,CAAC;IAC9B;mCAC+B;IAC/B,OAAO,EAAE,mBAAmB,CAAC;IAC7B,0CAA0C;IAC1C,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC,OAAO,CAAC,CAAC;IAC/D;2FACuF;IACvF,OAAO,EAAE,mBAAmB,CAAC;IAC7B;uCACmC;IACnC,UAAU,EAAE,mBAAmB,CAAC;IAChC;+FAC2F;IAC3F,WAAW,EAAE,mBAAmB,CAAC;IACjC;0CACsC;IACtC,cAAc,EAAE,mBAAmB,CAAC;IACpC;kBACc;IACd,aAAa,EAAE,mBAAmB,CAAC;IACnC;kBACc;IACd,YAAY,EAAE,mBAAmB,CAAC;IAClC;;yEAEqE;IACrE,WAAW,EAAE,mBAAmB,CAAC;IACjC;;gFAE4E;IAC5E,eAAe,EAAE,mBAAmB,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,uBAAuB,YAAa,iBAAiB,sBAAY,CAAC;AAE/E;;GAEG;AACH,oBAAY,mBAAmB,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,MAAM,CAAC;AAEpF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,mBAAuC,CAAC;AAC/D;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,mBAA4D,CAAC;AAEnF;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,mBAM3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,mBAU1B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,mBAK7B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,mBAMzB,CAAC;AAQF,eAAO,MAAM,qBAAqB,WAAY,MAAM,aAC3C,MAAM,aACJ,eAAe,qBAEvB,MAoDF,CAAC;AAEF,eAAO,MAAM,aAAa,WAAY,MAAM,aACnC,MAAM,aACJ,eAAe,qBAEvB,MA2CF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,mBAYpC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,iBAAiB,mBAY5B,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,kBAAkB;IAG3B;;OAEG;;IAEH;;;OAGG;;IAEH;;;;;;;;;;;OAWG;;IAEH;;;OAGG;;;;IAzQP;;;;;;;;;;;;;;;;OAgBG;;;;;;;;;;;;QAsRC,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;;;;;;;;;;;;;;;;;;YAmBa,MAAM;;QA9BtB,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;;;;;;;;;;;;;;;;;;QAXH,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;;;;;;;;;;;;;;;;;;QAXH,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;;;;;;;;;;;;;;;;;;QAXH,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;;;;;;;;;;;;;;;;;;QAXH,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;;;;;;;;;;;;;;;;;;QAXH,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;;;;;;;;;;;;;;;;;;QAXH,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;;;;;;;;;;;;;;;;;;QAXH,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;;;;;;;;;;;;;;;;;;QAXH,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;;;;;;;;;;;;;;;;;;QAXH,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;;;;;;;;;;;;;;;;;;QAXH,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;;;;;;;;;;;;;;;;;;;;QAXH,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;;;;;;;;;;;;;;;;;;;;QAXH,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;;;;;;;;;;;;;;;;;;;;;;QAXH,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;;;;;;;;;;;;;;;;;;YAmBa,MAAM;;QA9BtB,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;;;;;;;;;;;;;;;;;;QAXH,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;;;;;;;;;;;;;;;;;;QAXH,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;;;;;;;;;;;;;;;;;;QAXH,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;;;;;;;;;;;;;;;;;;QAXH,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;;;;;;;;;;;;;;;;;;QAXH,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;;;;;;;;;;;;;;;;;;QAXH,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;;;;;;;;;;;;;;;;;;QAXH,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;;;;;;;;;;;;;;;;;;QAXH,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;;;;;;;;;;;;;;;;;;QAXH,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;;;;;;;;;;;;;;;;;;QAXH,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;;;;;;;;;;;;;;;;;;;;QAXH,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;;;;;;;;;;;;;;;;;;;;QAXH,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;;;;;;;;;;;;;;;;;;;QAXH,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;;;;;;;;;;;;;;;;;;QAMH;;;WAGG;;;;;QASH,mEAAmE;mBACxD;YAAC,EAAE,EAAE,MAAM,CAAA;SAAC;QAIvB;;;;;WAKG;;QAKH;;;WAGG;;QAKH;;;;;WAKG;;QAOH;;;;;WAKG;;QAKH,mDAAmD;;QAKnD,kDAAkD;;;;;;;;;;;;;;;;IArIlD;;OAEG;;IAEH;;;OAGG;;IAEH;;;;;;;;;;;OAWG;;IAEH;;;OAGG;;;;IAzQP;;;;;;;;;;;;;;;;OAgBG;;;;;;;;IAsRC,wDAAwD;;IAExD;;;;OAIG;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;IAMH;;;OAGG;;;;;IASH,mEAAmE;eACxD;QAAC,EAAE,EAAE,MAAM,CAAA;KAAC;IAIvB;;;;;OAKG;;IAKH;;;OAGG;;IAKH;;;;;OAKG;;IAOH;;;;;OAKG;;IAKH,mDAAmD;;IAKnD,kDAAkD;;;;;;;;;;;;;;QA/ElD,wDAAwD;;QAExD;;;;WAIG;;QAEH;;;WAGG;;;;;;;;;;;;;;;;;;;QAMH;;;WAGG;;;;;QASH,mEAAmE;mBACxD;YAAC,EAAE,EAAE,MAAM,CAAA;SAAC;QAIvB;;;;;WAKG;;QAKH;;;WAGG;;QAKH;;;;;WAKG;;QAOH;;;;;WAKG;;QAKH,mDAAmD;;QAKnD,kDAAkD;;;;;;;;;;;;;;;EA0BpD,CAAC"}

package/dist/commonjs/collection/lib/useCursorListModel.js

@@ -301,7 +301,7 @@ exports.useCursorListModel = common_1.createModelHook({
         registerItem(data) {
             // point the cursor at the first item
             if (!initialCurrentRef.current) {
-                initialCurrentRef.current = useBaseListModel_1.defaultGetId(data.item);
+                initialCurrentRef.current = list.getId(data.item);
                 setCursorId(initialCurrentRef.current);
             }
             list.events.registerItem(data);

package/dist/commonjs/collection/lib/useListItemRegister.d.ts

@@ -79,5 +79,6 @@ export declare const useListItemRegister: import("@workday/canvas-kit-react/comm
     'aria-setsize': number | undefined;
     'aria-posinset': number | undefined;
     style: React.CSSProperties;
+    id: string;
 }>;
 //# sourceMappingURL=useListItemRegister.d.ts.map

package/dist/commonjs/collection/lib/useListItemRegister.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useListItemRegister.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemRegister.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAS3C,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAC,WAAW,EAAC,MAAM,iBAAiB,CAAC;AAG5C;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmE/B,CAAC"}
+{"version":3,"file":"useListItemRegister.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemRegister.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAU3C,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAC,WAAW,EAAC,MAAM,iBAAiB,CAAC;AAG5C;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoE/B,CAAC"}

package/dist/commonjs/collection/lib/useListItemRegister.js

@@ -20,7 +20,7 @@ const useListModel_1 = require("./useListModel");
  * );
  * ```
  */
-exports.useListItemRegister = common_1.createElemPropsHook(useListModel_1.useListModel)(({ state, events, getId }, ref, elemProps = {}) => {
+exports.useListItemRegister = common_1.createElemPropsHook(useListModel_1.useListModel)(({ state, events }, ref, elemProps = {}) => {
     var _a, _b, _c;
     const [localId, setLocalId] = react_1.default.useState(elemProps['data-id'] || ((_a = elemProps.item) === null || _a === void 0 ? void 0 : _a.id) || '');
     const { localRef, elementRef } = common_1.useLocalRef(common_1.useForkRef(ref, (_b = elemProps.virtual) === null || _b === void 0 ? void 0 : _b.measureRef));
@@ -47,7 +47,7 @@ exports.useListItemRegister = common_1.createElemPropsHook(useListModel_1.useLis
         const itemId = localId || String(defaultId);
         // TODO: Better lookup that using `items.find`. We need a more generic collection to handle seeing if an item already exists
         // bail early if item already exists. This happens if items were already provided.
-        if (state.items.find(item => getId(item) === itemId)) {
+        if (state.items.find(item => item.id === itemId)) {
             return;
         }
         events.registerItem({
@@ -70,5 +70,6 @@ exports.useListItemRegister = common_1.createElemPropsHook(useListModel_1.useLis
         'aria-setsize': (_c = elemProps.virtual) === null || _c === void 0 ? void 0 : _c.size,
         'aria-posinset': elemProps.virtual ? elemProps.item.index + 1 : undefined,
         style,
+        id: common_1.slugify(`${state.id}-${localId}`),
     };
 });

package/dist/commonjs/common/lib/utils/index.d.ts

@@ -10,6 +10,7 @@ export * from './assert';
 export * from './useMount';
 export * from './components';
 export * from './models';
+export * from './slugify';
 export * from './elements';
 export * from './useConstant';
 export * from './useIsFullscreen';

package/dist/commonjs/common/lib/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC"}

package/dist/commonjs/common/lib/utils/index.js

@@ -22,6 +22,7 @@ __exportStar(require("./assert"), exports);
 __exportStar(require("./useMount"), exports);
 __exportStar(require("./components"), exports);
 __exportStar(require("./models"), exports);
+__exportStar(require("./slugify"), exports);
 __exportStar(require("./elements"), exports);
 __exportStar(require("./useConstant"), exports);
 __exportStar(require("./useIsFullscreen"), exports);

package/dist/commonjs/common/lib/utils/slugify.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Function that takes a string and returns a "slug" which can be used in HTML
+ */
+export declare function slugify(input: string): string;
+//# sourceMappingURL=slugify.d.ts.map

package/dist/commonjs/common/lib/utils/slugify.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slugify.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/slugify.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAO7C"}

package/dist/commonjs/common/lib/utils/slugify.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.slugify = void 0;
+/**
+ * Function that takes a string and returns a "slug" which can be used in HTML
+ */
+function slugify(input) {
+    return input
+        .trim()
+        .replace(/[^\w\s-]/g, '')
+        .replace(/[\s_-]+/g, '-')
+        .replace(/^-+|-+$/g, '')
+        .toLowerCase();
+}
+exports.slugify = slugify;

package/dist/commonjs/dialog/lib/Dialog.d.ts

@@ -5,6 +5,13 @@ export interface DialogProps {
      */
     children: React.ReactNode;
 }
+/**
+ * This component is the container component and does not render any semantic elements. It provides
+ * a React Context model for the `Dialog` subcomponents. If you manually pass a `model` to all
+ * subcomponents, this container component isn't needed. If you do not pass a `model`, the `Dialog`
+ * container component will build a default one using `useDialogModel`. `Dialog` is a composition of a
+ * {@link Popup} component and has a similar structure to `Popup`.
+ */
 export declare const Dialog: import("@workday/canvas-kit-react/common").ComponentM<DialogProps & Partial<{
     returnFocusRef: React.RefObject<any> | undefined;
     initialFocusRef: React.RefObject<any> | undefined;
@@ -88,6 +95,10 @@ export declare const Dialog: import("@workday/canvas-kit-react/common").Componen
         hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
     };
 }> & {
+    /**
+     * A `Dialog.Body` is a thin wrapper around {@link CardBody Card.Body} and doesn't actually take
+     * a model. It adds `body` styling and nothing else.
+     */
     Body: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("../..").BackgroundStyleProps & import("../../layout/lib/utils/border/color").BorderColorStyleProps & import("../../layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("../../layout/lib/utils/border/radius").BorderRadiusStyleProps & import("../../layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("../../layout/lib/utils/border/width").BorderWidthStyleProps & import("../..").ColorStyleProps & import("../..").DepthStyleProps & import("../..").FlexItemStyleProps & import("../..").GridItemStyleProps & import("../..").LayoutStyleProps & import("../..").OtherStyleProps & import("../..").PositionStyleProps & import("../..").SpaceStyleProps & import("../..").TextStyleProps & React.HTMLAttributes<HTMLDivElement>, {
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
@@ -106,6 +117,11 @@ export declare const Dialog: import("@workday/canvas-kit-react/common").Componen
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
+    /**
+     * A `Dialog.Card` is a wrapper around the {@link Card} component, but hooked up to a
+     * {@link DialogModel}. By default, this element has a `role=dialog`, `aria-labelledby` and an `id`.
+     * The behavior hook used is called {@link useDialogCard}.
+     */
     Card: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("../../popup/lib/PopupCard").PopupCardProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
@@ -141,6 +157,10 @@ export declare const Dialog: import("@workday/canvas-kit-react/common").Componen
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
+    /**
+     * A `Dialog.CloseIcon` is an icon button that is the `X` at the top of a dialog. It will hide a
+     * dialog when clicked. The behavior hook used is called {@link usePopupCloseButton}.
+     */
     CloseIcon: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("../../popup/lib/PopupCloseIcon").PopupCloseIconProps, {
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
@@ -159,6 +179,35 @@ export declare const Dialog: import("@workday/canvas-kit-react/common").Componen
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
+    /**
+     * A `Dialog.Target` is any element that is meant to show the Dialog. The default component
+     * rendered by this component is a {@link SecondaryButton} element. You can override this by
+     * passing the desired component via `as`. Many examples above use `as={DeleteButton}`. If you
+     * want to render a {@link TertiaryButton} instead, use `as={TertiaryButton}`. The behavior hook
+     * used is called {@link usePopupTarget}.
+     *
+     * ```tsx
+     * const model = useDialogModel();
+     *
+     * // using this component
+     * <Dialog.Target>Show Dialog</Dialog.Target>
+     *
+     * // using props instead
+     * const dialogTargetButtonProps = useDialogTarget(model);
+     * <SecondaryButton {...dialogTargetButtonProps}>Show Dialog</SecondaryButton>
+     * ```
+     *
+     * `Dialog.Target` doesn't provide any styling by default. All styling comes from the default
+     * component used, which is {@link SecondaryButton}. If you don't want any styling, you can do
+     * the following:
+     *
+     * ```tsx
+     * <Dialog.Target as="button">Open</Dialog.Target>
+     * ```
+     *
+     * To add your own styling, you could either add a `css` prop, or make a styled button and pass
+     * that styled component via the `as` prop.
+     */
     Target: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"button", import("../..").SecondaryButtonProps>, {}, {
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
@@ -177,6 +226,12 @@ export declare const Dialog: import("@workday/canvas-kit-react/common").Componen
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
+    /**
+     * A `Dialog.Heading` is a wrapper around {@link CardHeading Card.Heading} that connect the
+     * heading to a {@link DialogModel}. It will add an `id` to the element that match the
+     * `aria-labelledby` that is applied to the `Dialog.Card` element for accessibility. The behavior
+     * hook used is called {@link usePopupHeading}.
+     */
     Heading: import("@workday/canvas-kit-react/common").ElementComponentM<"h2", import("../../popup/lib/PopupHeading").PopupHeadingProps, {
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
@@ -195,6 +250,10 @@ export declare const Dialog: import("@workday/canvas-kit-react/common").Componen
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
+    /**
+     * A `Dialog.Popper` is a wrapper around {@link PopupPopper Popup.Popper}. The behavior
+     * hook used is called {@link useDialogPopper}.
+     */
     Popper: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("../../popup/lib/PopupPopper").PopupPopperProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
@@ -230,6 +289,12 @@ export declare const Dialog: import("@workday/canvas-kit-react/common").Componen
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
+    /**
+     * A `Dialog.CloseButton` is a button that will hide a dialog. By default, this is a
+     * {@link SecondaryButton} component, but `as` can be used to render any button element (i.e
+     * {@link DeleteButton} or {@link PrimaryButton}). The behavior hook used is called
+     * {@link usePopupCloseButton}.
+     */
     CloseButton: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"button", import("../..").SecondaryButtonProps>, import("../../popup/lib/PopupCloseButton").PopupCloseButtonProps, {
         state: {
             stackRef: React.RefObject<HTMLDivElement>;

package/dist/commonjs/dialog/lib/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../dialog/lib/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAcjB,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../dialog/lib/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIf;;;OAGG;;;;;;;;;;;;;;;;;;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;;;;;;;;;;;;;;;;;;;IAEH;;;;;OAKG;;;;;;;;;;;;;;;;;;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAGH;;;;;OAKG;;;;;;;;;;;;;;;;;;;CAKL,CAAC"}

package/dist/commonjs/dialog/lib/Dialog.js

@@ -10,16 +10,81 @@ const popup_1 = require("@workday/canvas-kit-react/popup");
 const DialogPopper_1 = require("./DialogPopper");
 const DialogCard_1 = require("./DialogCard");
 const hooks_1 = require("./hooks");
+/**
+ * This component is the container component and does not render any semantic elements. It provides
+ * a React Context model for the `Dialog` subcomponents. If you manually pass a `model` to all
+ * subcomponents, this container component isn't needed. If you do not pass a `model`, the `Dialog`
+ * container component will build a default one using `useDialogModel`. `Dialog` is a composition of a
+ * {@link Popup} component and has a similar structure to `Popup`.
+ */
 exports.Dialog = common_1.createContainer()({
     displayName: 'Dialog',
     modelHook: hooks_1.useDialogModel,
     subComponents: {
+        /**
+         * A `Dialog.Body` is a thin wrapper around {@link CardBody Card.Body} and doesn't actually take
+         * a model. It adds `body` styling and nothing else.
+         */
         Body: popup_1.Popup.Body,
+        /**
+         * A `Dialog.Card` is a wrapper around the {@link Card} component, but hooked up to a
+         * {@link DialogModel}. By default, this element has a `role=dialog`, `aria-labelledby` and an `id`.
+         * The behavior hook used is called {@link useDialogCard}.
+         */
         Card: DialogCard_1.DialogCard,
+        /**
+         * A `Dialog.CloseIcon` is an icon button that is the `X` at the top of a dialog. It will hide a
+         * dialog when clicked. The behavior hook used is called {@link usePopupCloseButton}.
+         */
         CloseIcon: popup_1.Popup.CloseIcon,
+        /**
+         * A `Dialog.Target` is any element that is meant to show the Dialog. The default component
+         * rendered by this component is a {@link SecondaryButton} element. You can override this by
+         * passing the desired component via `as`. Many examples above use `as={DeleteButton}`. If you
+         * want to render a {@link TertiaryButton} instead, use `as={TertiaryButton}`. The behavior hook
+         * used is called {@link usePopupTarget}.
+         *
+         * ```tsx
+         * const model = useDialogModel();
+         *
+         * // using this component
+         * <Dialog.Target>Show Dialog</Dialog.Target>
+         *
+         * // using props instead
+         * const dialogTargetButtonProps = useDialogTarget(model);
+         * <SecondaryButton {...dialogTargetButtonProps}>Show Dialog</SecondaryButton>
+         * ```
+         *
+         * `Dialog.Target` doesn't provide any styling by default. All styling comes from the default
+         * component used, which is {@link SecondaryButton}. If you don't want any styling, you can do
+         * the following:
+         *
+         * ```tsx
+         * <Dialog.Target as="button">Open</Dialog.Target>
+         * ```
+         *
+         * To add your own styling, you could either add a `css` prop, or make a styled button and pass
+         * that styled component via the `as` prop.
+         */
         Target: popup_1.Popup.Target,
+        /**
+         * A `Dialog.Heading` is a wrapper around {@link CardHeading Card.Heading} that connect the
+         * heading to a {@link DialogModel}. It will add an `id` to the element that match the
+         * `aria-labelledby` that is applied to the `Dialog.Card` element for accessibility. The behavior
+         * hook used is called {@link usePopupHeading}.
+         */
         Heading: popup_1.Popup.Heading,
+        /**
+         * A `Dialog.Popper` is a wrapper around {@link PopupPopper Popup.Popper}. The behavior
+         * hook used is called {@link useDialogPopper}.
+         */
         Popper: DialogPopper_1.DialogPopper,
+        /**
+         * A `Dialog.CloseButton` is a button that will hide a dialog. By default, this is a
+         * {@link SecondaryButton} component, but `as` can be used to render any button element (i.e
+         * {@link DeleteButton} or {@link PrimaryButton}). The behavior hook used is called
+         * {@link usePopupCloseButton}.
+         */
         CloseButton: popup_1.Popup.CloseButton,
     },
 })(({ children }) => {

package/dist/commonjs/menu/lib/MenuItem.d.ts

@@ -107,6 +107,7 @@ export declare const useMenuItem: import("@workday/canvas-kit-react/common").Beh
     'aria-setsize': number | undefined;
     'aria-posinset': number | undefined;
     style: React.CSSProperties;
+    id: string;
 }>;
 export declare const MenuItem: import("@workday/canvas-kit-react/common").ElementComponentM<"button", MenuItemProps, {
     state: {

package/dist/commonjs/menu/lib/MenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAsB/B,MAAM,WAAW,aAAa;IAC5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AA4FD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBA0BF,MAAM,cAAc;;;;;;;;;;;;;;;;;;EAazC,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBnB,CAAC"}
+{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAsB/B,MAAM,WAAW,aAAa;IAC5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AA4FD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBA0BF,MAAM,cAAc;;;;;;;;;;;;;;;;;;;EAazC,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBnB,CAAC"}

package/dist/commonjs/menu/lib/MenuItem.js

@@ -128,10 +128,10 @@ exports.useMenuItem = common_1.composeHooks(common_1.createElemPropsHook(useMenu
                 });
             }
         }
-        // We only need to run when the ID has changed. If the static API is used, the first time
+        // We only need to run when the ID or cursorId has changed. If the static API is used, the first time
         // this is run, the id will be blank
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [id]);
+    }, [id, model.state.cursorId]);
     return {
         ref: elementRef,
         role: 'menuitem',