@workday/canvas-kit-react 8.5.0-339-next.0 → 8.5.0-342-next.2

package/dist/es6/collection/lib/useGridModel.js

@@ -24,6 +24,10 @@ import { createModelHook } from '@workday/canvas-kit-react/common';
 import { navigationManager } from './useCursorListModel';
 import { useListModel } from './useListModel';
 var _a = useListModel.defaultConfig, columnCount = _a.columnCount, orientation = _a.orientation, defaultConfig = __rest(_a, ["columnCount", "orientation"]);
+/**
+ * The Grid model extends the `ListModel` and changes some config. For example, the `columnCount` is
+ * required on the grid model's configuration and `orientation` is removed.
+ */
 export var useGridModel = createModelHook({
     defaultConfig: __assign(__assign({}, defaultConfig), { 
         /**

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

@@ -2,12 +2,21 @@ import React from 'react';
 import { Item } from './useBaseListModel';
 import { VirtualItem } from './react-virtual';
 /**
- * Registers an item with a list. It will return elemProps with a `data-id` which can be used by other
- * hooks to identify the item in the list.
+ * This elemProps hook is the base of all item component hooks. It registers an item with a
+ * collection and sets the `data-id` that is used by other hooks. It should always be the last
+ * defined hook when using `composeHooks` (`composeHooks` executes hooks right to left and merges
+ * props left to right). It is used by `ListBox.Item` and all `*.Item` subcomponents.
+ *
+ * ```ts
+ * const useMyItem = composeHooks(
+ *   useListItemSelect, // additional hooks go here
+ *   useListItemRegister // always last
+ * );
+ * ```
  */
 export declare const useListItemRegister: <P extends {}, R>(model: {
     state: {
-        selectedIds: import("./useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
@@ -21,7 +30,7 @@ export declare const useListItemRegister: <P extends {}, R>(model: {
         UNSTABLE_defaultItemHeight: number;
         containerRef: React.RefObject<HTMLDivElement>;
         id: string;
-        orientation: import("./useBaseListModel").Orientation;
+        orientation: "horizontal" | "vertical";
         indexRef: React.MutableRefObject<number>;
         nonInteractiveIds: string[];
         isVirtualized: boolean;
@@ -60,7 +69,7 @@ export declare const useListItemRegister: <P extends {}, R>(model: {
     selection: import("./useSelectionListModel").SelectionManager;
     navigation: import("./useCursorListModel").NavigationManager;
     getId: (item: any) => string;
-}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {
+}, elemProps?: P | undefined, ref?: React.Ref<R> | undefined) => {
     ref: (instance: HTMLElement | null) => void;
     'data-id': string;
     disabled: boolean | undefined;

package/dist/es6/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;;;GAGG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAmE/B,CAAC"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAmE/B,CAAC"}

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

@@ -2,8 +2,17 @@ import React from 'react';
 import { useMountLayout, createElemPropsHook, useLocalRef, useForkRef, } from '@workday/canvas-kit-react/common';
 import { useListModel } from './useListModel';
 /**
- * Registers an item with a list. It will return elemProps with a `data-id` which can be used by other
- * hooks to identify the item in the list.
+ * This elemProps hook is the base of all item component hooks. It registers an item with a
+ * collection and sets the `data-id` that is used by other hooks. It should always be the last
+ * defined hook when using `composeHooks` (`composeHooks` executes hooks right to left and merges
+ * props left to right). It is used by `ListBox.Item` and all `*.Item` subcomponents.
+ *
+ * ```ts
+ * const useMyItem = composeHooks(
+ *   useListItemSelect, // additional hooks go here
+ *   useListItemRegister // always last
+ * );
+ * ```
  */
 export var useListItemRegister = createElemPropsHook(useListModel)(function (_a, ref, elemProps) {
     var _b, _c, _d;

package/dist/es6/collection/lib/useListItemRovingFocus.d.ts

@@ -22,10 +22,18 @@ export declare const orientationKeyMap: {
     };
 };
 /**
- * Handles the roving focus behavior of a Cursor model. It should be added to the element
- * representing a list item.
+ * This elemProps hook is used for cursor navigation by using [Roving
+ * Tabindex](https://w3c.github.io/aria-practices/#kbd_roving_tabindex). Only a single item in the
+ * collection has a tab stop. Pressing an arrow key moves the tab stop to a different item in the
+ * corresponding direction. See the [Roving Tabindex](#roving-tabindex) example. This elemProps hook
+ * should be applied to an `*.Item` component.
  *
- * @see https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex
+ * ```ts
+ * const useMyItem = composeHooks(
+ *   useListItemRovingFocus, // adds the roving tabindex support
+ *   useListItemRegister
+ * );
+```
  */
 export declare const useListItemRovingFocus: <P extends {}, R>(model: {
     state: {
@@ -41,7 +49,7 @@ export declare const useListItemRovingFocus: <P extends {}, R>(model: {
         UNSTABLE_defaultItemHeight: number;
         containerRef: React.RefObject<HTMLDivElement>;
         id: string;
-        orientation: import("./useBaseListModel").Orientation;
+        orientation: "horizontal" | "vertical";
         indexRef: React.MutableRefObject<number>;
         nonInteractiveIds: string[];
         isVirtualized: boolean;
@@ -74,14 +82,14 @@ export declare const useListItemRovingFocus: <P extends {}, R>(model: {
     };
     navigation: import("./useCursorListModel").NavigationManager;
     getId: (item: any) => string;
-}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {
+}, elemProps?: P | undefined, ref?: React.Ref<R> | undefined) => {
     onKeyDown(event: React.KeyboardEvent): void;
     onFocus(): void;
     onBlur(): void;
     onClick(): void;
     'data-focus-id': string;
     tabIndex: number;
-    ref: ((instance: any) => void) | React.RefObject<any> | null | undefined;
+    ref: React.Ref<any> | undefined;
 } & P & (R extends HTMLOrSVGElement ? {
     ref: React.Ref<R>;
 } : {});

package/dist/es6/collection/lib/useListItemRovingFocus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useListItemRovingFocus.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemRovingFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;CAqBpB,CAAC;AA+BX;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAqCZ,mBAAmB;;;;;;;;;OA+CzC,CAAC"}
+{"version":3,"file":"useListItemRovingFocus.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemRovingFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;CAqBpB,CAAC;AA+BX;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAqCZ,mBAAmB;;;;;;;;;OA+CzC,CAAC"}

package/dist/es6/collection/lib/useListItemRovingFocus.js

@@ -52,10 +52,18 @@ var ctrlKeyMap = {
 var keys = function (obj) { return Object.keys(obj); };
 var hasOwnKey = function (obj, key) { return obj.hasOwnProperty(key); };
 /**
- * Handles the roving focus behavior of a Cursor model. It should be added to the element
- * representing a list item.
+ * This elemProps hook is used for cursor navigation by using [Roving
+ * Tabindex](https://w3c.github.io/aria-practices/#kbd_roving_tabindex). Only a single item in the
+ * collection has a tab stop. Pressing an arrow key moves the tab stop to a different item in the
+ * corresponding direction. See the [Roving Tabindex](#roving-tabindex) example. This elemProps hook
+ * should be applied to an `*.Item` component.
  *
- * @see https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex
+ * ```ts
+ * const useMyItem = composeHooks(
+ *   useListItemRovingFocus, // adds the roving tabindex support
+ *   useListItemRegister
+ * );
+```
  */
 export var useListItemRovingFocus = createElemPropsHook(useCursorListModel)(function (_a, ref, elemProps) {
     var state = _a.state, events = _a.events, getId = _a.getId, navigation = _a.navigation;

package/dist/es6/collection/lib/useListItemSelect.d.ts

@@ -1,7 +1,19 @@
 import React from 'react';
+/**
+ * This elemProps hook adds selection support to a `*.Item` subcomponent of a collection. It adds a
+ * click handler that toggles selection status according to the [Selection
+ * Manager](#selection-manager) used.
+ *
+ * ```ts
+ * const useMyItem = composeHooks(
+ *   useListItemSelect, // adds selection support to an item
+ *   useListItemRegister
+ * );
+ * ```
+ */
 export declare const useListItemSelect: <P extends {}, R>(model: {
     state: {
-        selectedIds: import("./useSelectionListModel").SelectedIds;
+        selectedIds: string[] | "all";
         unselectedIds: string[];
         cursorId: string;
         columnCount: number;
@@ -15,7 +27,7 @@ export declare const useListItemSelect: <P extends {}, R>(model: {
         UNSTABLE_defaultItemHeight: number;
         containerRef: React.RefObject<HTMLDivElement>;
         id: string;
-        orientation: import("./useBaseListModel").Orientation;
+        orientation: "horizontal" | "vertical";
         indexRef: React.MutableRefObject<number>;
         nonInteractiveIds: string[];
         isVirtualized: boolean;
@@ -54,7 +66,7 @@ export declare const useListItemSelect: <P extends {}, R>(model: {
     selection: import("./useSelectionListModel").SelectionManager;
     navigation: import("./useCursorListModel").NavigationManager;
     getId: (item: any) => string;
-}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {
+}, elemProps?: P | undefined, ref?: React.Ref<R> | undefined) => {
     onClick: (event: React.MouseEvent<HTMLElement>) => void;
 } & P & (R extends HTMLOrSVGElement ? {
     ref: React.Ref<R>;

package/dist/es6/collection/lib/useListItemSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useListItemSelect.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAGF,gBAAgB,CAAC,WAAW,CAAC;;;OAYxD,CAAC"}
+{"version":3,"file":"useListItemSelect.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAGF,gBAAgB,CAAC,WAAW,CAAC;;;OAYxD,CAAC"}

package/dist/es6/collection/lib/useListItemSelect.js

@@ -1,5 +1,17 @@
 import { createElemPropsHook } from '@workday/canvas-kit-react/common';
 import { useListModel } from './useListModel';
+/**
+ * This elemProps hook adds selection support to a `*.Item` subcomponent of a collection. It adds a
+ * click handler that toggles selection status according to the [Selection
+ * Manager](#selection-manager) used.
+ *
+ * ```ts
+ * const useMyItem = composeHooks(
+ *   useListItemSelect, // adds selection support to an item
+ *   useListItemRegister
+ * );
+ * ```
+ */
 export var useListItemSelect = createElemPropsHook(useListModel)(function (_a, _, elemProps) {
     var state = _a.state, events = _a.events;
     if (elemProps === void 0) { elemProps = {}; }