@workday/canvas-kit-react 9.0.0-alpha.368-next.6 → 9.0.0-alpha.382-next.2

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

@@ -1,14 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import React from 'react';
 import { assert, createModelHook } from '@workday/canvas-kit-react/common';
 import { useBaseListModel, defaultGetId as getId } from './useBaseListModel';
@@ -29,94 +18,81 @@ import { useBaseListModel, defaultGetId as getId } from './useBaseListModel';
  * })
  * ```
  */
-export var createNavigationManager = function (manager) { return manager; };
+export const createNavigationManager = (manager) => manager;
 /**
  * Get the first item in a list regardless of column count
  */
-export var getFirst = function (_, _a) {
-    var state = _a.state;
-    return state.items[0];
-};
+export const getFirst = (_, { state }) => state.items[0];
 /**
  * Get the last item in a list regardless of column count
  */
-export var getLast = function (_, _a) {
-    var state = _a.state;
-    return state.items[state.items.length - 1];
-};
+export const getLast = (_, { state }) => state.items[state.items.length - 1];
 /**
  * Get the first item in a row. If column count is 0, it will return the results of `getFirst`
  */
-export var getFirstOfRow = function (id, _a) {
-    var state = _a.state;
+export const getFirstOfRow = (id, { state }) => {
     if (state.columnCount) {
-        var item = getItem(id, { state: state });
-        var currentIndex = item.index;
-        var offset = currentIndex % state.columnCount;
+        const item = getItem(id, { state });
+        const currentIndex = item.index;
+        const offset = currentIndex % state.columnCount;
         return state.items[currentIndex - offset];
     }
-    return getFirst(id, { state: state });
+    return getFirst(id, { state });
 };
 /**
  * get the last item in a row - if column count is 0, it will return the results of `getLast`
  */
-export var getLastOfRow = function (id, _a) {
-    var state = _a.state;
+export const getLastOfRow = (id, { state }) => {
     if (state.columnCount) {
-        var item = getItem(id, { state: state });
-        var currentIndex = item.index;
-        var offset = (currentIndex % state.columnCount) - state.columnCount + 1;
-        var nextIndex = currentIndex - offset;
+        const item = getItem(id, { state });
+        const currentIndex = item.index;
+        const offset = (currentIndex % state.columnCount) - state.columnCount + 1;
+        let nextIndex = currentIndex - offset;
         if (nextIndex >= state.items.length) {
             nextIndex = state.items.length - 1;
         }
         return state.items[nextIndex];
     }
-    return getLast(id, { state: state });
+    return getLast(id, { state });
 };
 /**
  * get the item in the previous page. This can be author defined. By default it will return the
  * first item for a list, and the first item in the same column for a grid.
  */
-export var getPreviousPage = function (id, _a) {
-    var state = _a.state;
+export const getPreviousPage = (id, { state }) => {
     if (state.columnCount) {
-        var item = getItem(id, { state: state });
-        var currentIndex = item.index;
+        const item = getItem(id, { state });
+        const currentIndex = item.index;
         return state.items[currentIndex % state.columnCount];
     }
-    return getFirst(id, { state: state });
+    return getFirst(id, { state });
 };
 /**
  * get the item in the next page. This can be author defined. By default, it will return the last
  * item for a list, and the last item in the same column for a grid.
  */
-export var getNextPage = function (id, _a) {
-    var state = _a.state;
+export const getNextPage = (id, { state }) => {
     if (state.columnCount) {
-        var item = getItem(id, { state: state });
-        var currentIndex = item.index;
-        var lastRowIndex = state.items.length - state.columnCount;
+        const item = getItem(id, { state });
+        const currentIndex = item.index;
+        const lastRowIndex = state.items.length - state.columnCount;
         return state.items[lastRowIndex + (currentIndex % state.columnCount)];
     }
-    return getLast(id, { state: state });
+    return getLast(id, { state });
 };
-var getItem = function (id, _a) {
-    var state = _a.state;
-    var item = id ? state.items.find(function (item) { return getId(item) === id; }) : getFirst(id, { state: state }); // no id, return first item
-    assert(item, "Item not found: " + id);
+const getItem = (id, { state }) => {
+    const item = id ? state.items.find(item => getId(item) === id) : getFirst(id, { state }); // no id, return first item
+    assert(item, `Item not found: ${id}`);
     return item;
 };
-export var getWrappingOffsetItem = function (offset) { return function (id, _a, tries) {
-    var state = _a.state;
-    if (tries === void 0) { tries = state.items.length; }
-    var items = state.items;
-    var item = getItem(id, { state: state });
-    var currentIndex = item.index;
-    var nextIndex = currentIndex + offset;
+export const getWrappingOffsetItem = (offset) => (id, { state }, tries = state.items.length) => {
+    const items = state.items;
+    const item = getItem(id, { state });
+    const currentIndex = item.index;
+    let nextIndex = currentIndex + offset;
     // calculate idealLength as in if the grid was a perfect rectangle
-    var rows = Math.ceil(items.length / state.columnCount);
-    var idealLength = rows * state.columnCount;
+    const rows = Math.ceil(items.length / state.columnCount);
+    const idealLength = rows * state.columnCount;
     if (nextIndex < 0) {
         if (offset === -1) {
             // if the offset is -1, we want to wrap to the end
@@ -150,22 +126,20 @@ export var getWrappingOffsetItem = function (offset) { return function (id, _a,
     if (state.nonInteractiveIds.includes(getId(items[nextIndex])) && tries > 0) {
         // The next item is disabled, try again, but only if we haven't already tried everything.
         // Avoid an infinite loop with `tries`
-        return getWrappingOffsetItem(offset)(getId(items[nextIndex]), { state: state }, tries - 1);
+        return getWrappingOffsetItem(offset)(getId(items[nextIndex]), { state }, tries - 1);
     }
     return items[nextIndex];
-}; };
-export var getOffsetItem = function (offset) { return function (id, _a, tries) {
-    var state = _a.state;
-    if (tries === void 0) { tries = state.items.length; }
-    var items = state.items, columnCount = state.columnCount;
-    var item = getItem(id, { state: state });
-    var currentIndex = item.index;
-    var nextIndex = currentIndex + offset;
+};
+export const getOffsetItem = (offset) => (id, { state }, tries = state.items.length) => {
+    const { items, columnCount } = state;
+    const item = getItem(id, { state });
+    const currentIndex = item.index;
+    let nextIndex = currentIndex + offset;
     if (Math.abs(offset) < columnCount) {
         // if we're here, the columnCount is non-zero and the absolute value of offset is less than the
         // column count. We don't want to wrap, so we'll bound within the row
-        var currentIndexInRow = currentIndex % columnCount;
-        var nextIndexInRow = nextIndex - currentIndex + currentIndexInRow;
+        const currentIndexInRow = currentIndex % columnCount;
+        const nextIndexInRow = nextIndex - currentIndex + currentIndexInRow;
         if (nextIndexInRow >= columnCount || nextIndexInRow < 0) {
             nextIndex = currentIndex;
         }
@@ -173,7 +147,7 @@ export var getOffsetItem = function (offset) { return function (id, _a, tries) {
     else if (columnCount) {
         // if we're here, there's a column count, but the offset will move into another row. We need to
         // bound to row values
-        var nextRow = Math.floor(nextIndex / columnCount);
+        const nextRow = Math.floor(nextIndex / columnCount);
         if (nextRow < 0 || nextRow >= columnCount) {
             nextIndex = currentIndex;
         }
@@ -192,73 +166,62 @@ export var getOffsetItem = function (offset) { return function (id, _a, tries) {
     if (state.nonInteractiveIds.includes(getId(items[nextIndex])) && tries > 0) {
         // The next item is disabled, try again, but only if we haven't already tried everything.
         // Avoid an infinite loop with `tries`
-        return getOffsetItem(offset)(getId(items[nextIndex]), { state: state }, tries - 1);
+        return getOffsetItem(offset)(getId(items[nextIndex]), { state }, tries - 1);
     }
     return items[nextIndex];
-}; };
+};
 /**
  * The default navigation manager of lists. This navigation manager will wrap around when the edge
  * is hit. For example, if the user is the the right-most item in a list or right-most item in a
  * row, the cursor will wrap around to the beginning or the next row.
  */
-export var wrappingNavigationManager = createNavigationManager({
-    getFirst: getFirst,
-    getLast: getLast,
-    getItem: getItem,
+export const wrappingNavigationManager = createNavigationManager({
+    getFirst,
+    getLast,
+    getItem,
     getNext: getWrappingOffsetItem(1),
-    getNextRow: function (id, _a) {
-        var state = _a.state;
-        return getWrappingOffsetItem(state.columnCount)(id, { state: state });
-    },
+    getNextRow: (id, { state }) => getWrappingOffsetItem(state.columnCount)(id, { state }),
     getPrevious: getWrappingOffsetItem(-1),
-    getPreviousRow: function (id, _a) {
-        var state = _a.state;
-        return getWrappingOffsetItem(-state.columnCount)(id, { state: state });
-    },
-    getPreviousPage: getPreviousPage,
-    getNextPage: getNextPage,
-    getFirstOfRow: getFirstOfRow,
-    getLastOfRow: getLastOfRow,
+    getPreviousRow: (id, { state }) => getWrappingOffsetItem(-state.columnCount)(id, { state }),
+    getPreviousPage,
+    getNextPage,
+    getFirstOfRow,
+    getLastOfRow,
 });
 /**
  * The default navigation of grids. This navigation manager will not wrap, but will stop when an
  * edge is detected. This could be the last item in a list or the last item of a row in a grid.
  */
-export var navigationManager = createNavigationManager({
-    getFirst: getFirst,
-    getLast: getLast,
-    getItem: getItem,
+export const navigationManager = createNavigationManager({
+    getFirst,
+    getLast,
+    getItem,
     getNext: getOffsetItem(1),
-    getNextRow: function (id, _a) {
-        var state = _a.state;
-        return getOffsetItem(state.columnCount)(id, { state: state });
-    },
+    getNextRow: (id, { state }) => getOffsetItem(state.columnCount)(id, { state }),
     getPrevious: getOffsetItem(-1),
-    getPreviousRow: function (id, _a) {
-        var state = _a.state;
-        return getOffsetItem(-state.columnCount)(id, { state: state });
-    },
-    getPreviousPage: getPreviousPage,
-    getNextPage: getNextPage,
-    getFirstOfRow: getFirstOfRow,
-    getLastOfRow: getLastOfRow,
+    getPreviousRow: (id, { state }) => getOffsetItem(-state.columnCount)(id, { state }),
+    getPreviousPage,
+    getNextPage,
+    getFirstOfRow,
+    getLastOfRow,
 });
 /**
  * A `CursorModel` extends a `ListModel` and adds a "cursor" to the list. A cursor is a pointer to a
  * current position in the list. The most common use-case is keeping track of which item currently
  * has focus within the list. Many w3c list role types specify a single tab stop within the list.
  */
-export var useCursorListModel = createModelHook({
-    defaultConfig: __assign(__assign({}, useBaseListModel.defaultConfig), { 
+export const useCursorListModel = createModelHook({
+    defaultConfig: {
+        ...useBaseListModel.defaultConfig,
         /**
          * Initial cursor position. If not provided, the cursor will point to the first item in the list
          */
-        initialCursorId: '', 
+        initialCursorId: '',
         /**
          * If this is set it will cause a wrapping of a list that will turn it into a grid
          * @default 0
          */
-        columnCount: 0, 
+        columnCount: 0,
         /**
          * Controls the state changes when the user sends navigation events to the model. For example,
          * when the user hits the "right" arrow, a behavior hook will determine directionality
@@ -271,30 +234,34 @@ export var useCursorListModel = createModelHook({
          * to screen reader users. This would require the overflow menu to accept both up/down keys as
          * well as left/right keys to give a more consistent experience to all users.
          */
-        navigation: wrappingNavigationManager }),
+        navigation: wrappingNavigationManager,
+    },
     requiredConfig: useBaseListModel.requiredConfig,
-})(function (config) {
+})(config => {
     var _a;
-    var _b = React.useState(config.initialCursorId), cursorId = _b[0], setCursorId = _b[1];
-    var columnCount = config.columnCount || 0;
-    var list = useBaseListModel(config);
-    var initialCurrentRef = React.useRef(config.initialCursorId || (((_a = config.items) === null || _a === void 0 ? void 0 : _a.length) ? getId(list.state.items[0]) : ''));
-    var navigation = config.navigation;
-    var state = __assign(__assign({}, list.state), { 
+    const [cursorId, setCursorId] = React.useState(config.initialCursorId);
+    const columnCount = config.columnCount || 0;
+    const list = useBaseListModel(config);
+    const initialCurrentRef = React.useRef(config.initialCursorId || (((_a = config.items) === null || _a === void 0 ? void 0 : _a.length) ? getId(list.state.items[0]) : ''));
+    const navigation = config.navigation;
+    const state = {
+        ...list.state,
         /** The id of the list item the cursor is pointing to */
-        cursorId: cursorId,
+        cursorId,
         /**
          * Any positive non-zero value treats the list like a grid with rows and columns
          * @default 0
          * @private Use useGridModel instead to make a grid instead of a list
          */
-        columnCount: columnCount });
-    var events = __assign(__assign({}, list.events), { 
+        columnCount,
+    };
+    const events = {
+        ...list.events,
         /**
          * Register an item to the list. Takes in an identifier, a React.Ref and an optional index. This
          * should be called on component mount
          */
-        registerItem: function (data) {
+        registerItem(data) {
             // point the cursor at the first item
             if (!initialCurrentRef.current) {
                 initialCurrentRef.current = getId(data.item);
@@ -303,7 +270,7 @@ export var useCursorListModel = createModelHook({
             list.events.registerItem(data);
         },
         /** Directly sets the cursor to the list item by its identifier. */
-        goTo: function (data) {
+        goTo(data) {
             setCursorId(data.id);
         },
         /**
@@ -312,15 +279,15 @@ export var useCursorListModel = createModelHook({
          * currently on the last item. For a grid, the default navigation manager will stay on the last
          * item in a row.
          */
-        goToNext: function () {
-            setCursorId(getId(navigation.getNext(state.cursorId, { state: state })));
+        goToNext() {
+            setCursorId(getId(navigation.getNext(state.cursorId, { state })));
         },
         /**
          * Set the cursor to the "previous" item in the list. If the beginning of the list is detected,
          * it will wrap to the last item
          */
-        goToPrevious: function () {
-            setCursorId(getId(navigation.getPrevious(state.cursorId, { state: state })));
+        goToPrevious() {
+            setCursorId(getId(navigation.getPrevious(state.cursorId, { state })));
         },
         /**
          * Previous item perpendicular to the orientation of a list, or the previous row in a grid. For
@@ -328,9 +295,9 @@ export var useCursorListModel = createModelHook({
          * be ignored by the navigation manager, or return the same result as `previous()`. In a grid,
          * this would be the previous row (current position - column count).
          */
-        goToPreviousRow: function () {
+        goToPreviousRow() {
             setCursorId(getId(navigation.getPreviousRow(state.cursorId, {
-                state: state,
+                state,
             })));
         },
         /**
@@ -339,30 +306,31 @@ export var useCursorListModel = createModelHook({
          * the navigation manager, or return the same result as `next()`. In a grid, this would be the
          * next row (current position + column count).
          */
-        goToNextRow: function () {
-            setCursorId(getId(navigation.getNextRow(state.cursorId, { state: state })));
+        goToNextRow() {
+            setCursorId(getId(navigation.getNextRow(state.cursorId, { state })));
         },
         /** Set the cursor to the first item in the list */
-        goToFirst: function () {
-            setCursorId(getId(navigation.getFirst(state.cursorId, { state: state })));
+        goToFirst() {
+            setCursorId(getId(navigation.getFirst(state.cursorId, { state })));
         },
         /** Set the cursor to the last item in the list */
-        goToLast: function () {
-            setCursorId(getId(navigation.getLast(state.cursorId, { state: state })));
+        goToLast() {
+            setCursorId(getId(navigation.getLast(state.cursorId, { state })));
         },
-        goToFirstOfRow: function () {
-            setCursorId(getId(navigation.getFirstOfRow(state.cursorId, { state: state })));
+        goToFirstOfRow() {
+            setCursorId(getId(navigation.getFirstOfRow(state.cursorId, { state })));
         },
-        goToLastOfRow: function () {
-            setCursorId(getId(navigation.getLastOfRow(state.cursorId, { state: state })));
+        goToLastOfRow() {
+            setCursorId(getId(navigation.getLastOfRow(state.cursorId, { state })));
         },
-        goToNextPage: function () {
-            setCursorId(getId(navigation.getNextPage(state.cursorId, { state: state })));
+        goToNextPage() {
+            setCursorId(getId(navigation.getNextPage(state.cursorId, { state })));
         },
-        goToPreviousPage: function () {
+        goToPreviousPage() {
             setCursorId(getId(navigation.getPreviousPage(state.cursorId, {
-                state: state,
+                state,
             })));
-        } });
-    return __assign(__assign({}, list), { state: state, events: events, navigation: navigation });
+        },
+    };
+    return { ...list, state, events, navigation };
 });

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

@@ -1,35 +1,14 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 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"]);
+const { columnCount, orientation, ...defaultConfig } = useListModel.defaultConfig;
 /**
  * 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), { 
+export const useGridModel = createModelHook({
+    defaultConfig: {
+        ...defaultConfig,
         /**
          * Controls the state changes when the user sends navigation events to the model. For example,
          * when the user hits the "right" arrow, a behavior hook will determine directionality
@@ -40,14 +19,17 @@ export var useGridModel = createModelHook({
          * `getNext` will return the same item the cursor was previously on if the cursor is on the last
          * item of a row.
          */
-        navigation: navigationManager }),
-    requiredConfig: __assign({ 
+        navigation: navigationManager,
+    },
+    requiredConfig: {
         /**
          * The number of columns represented in a grid
          */
-        columnCount: 1 }, useListModel.requiredConfig),
+        columnCount: 1,
+        ...useListModel.requiredConfig,
+    },
     contextOverride: useListModel.Context,
-})(function (config) {
-    var list = useListModel(config);
+})(config => {
+    const list = useListModel(config);
     return list;
 });

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

@@ -14,22 +14,20 @@ import { useListModel } from './useListModel';
  * );
  * ```
  */
-export var useListItemRegister = createElemPropsHook(useListModel)(function (_a, ref, elemProps) {
-    var _b, _c, _d;
-    var state = _a.state, events = _a.events, getId = _a.getId;
-    if (elemProps === void 0) { elemProps = {}; }
-    var _e = React.useState(elemProps['data-id'] || ((_b = elemProps.item) === null || _b === void 0 ? void 0 : _b.id) || ''), localId = _e[0], setLocalId = _e[1];
-    var _f = useLocalRef(useForkRef(ref, (_c = elemProps.virtual) === null || _c === void 0 ? void 0 : _c.measureRef)), localRef = _f.localRef, elementRef = _f.elementRef;
+export const useListItemRegister = createElemPropsHook(useListModel)(({ state, events, getId }, ref, elemProps = {}) => {
+    var _a, _b, _c;
+    const [localId, setLocalId] = React.useState(elemProps['data-id'] || ((_a = elemProps.item) === null || _a === void 0 ? void 0 : _a.id) || '');
+    const { localRef, elementRef } = useLocalRef(useForkRef(ref, (_b = elemProps.virtual) === null || _b === void 0 ? void 0 : _b.measureRef));
     // if the list is virtual, force the correct styling. Without this, weird things happen...
-    var style = elemProps.virtual
+    const style = elemProps.virtual
         ? {
             position: 'absolute',
             top: 0,
             left: 0,
-            transform: "translateY(" + elemProps.virtual.start + "px)",
+            transform: `translateY(${elemProps.virtual.start}px)`,
         }
         : {};
-    useMountLayout(function () {
+    useMountLayout(() => {
         var _a, _b;
         if (((_a = elemProps.virtual) === null || _a === void 0 ? void 0 : _a.index) === 0 && ((_b = localRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)) {
             // TODO: This update doesn't seem to be working correctly
@@ -39,11 +37,11 @@ export var useListItemRegister = createElemPropsHook(useListModel)(function (_a,
         if (elemProps.item) {
             return;
         }
-        var defaultId = state.indexRef.current;
-        var itemId = localId || String(defaultId);
+        const defaultId = state.indexRef.current;
+        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(function (item) { return getId(item) === itemId; })) {
+        if (state.items.find(item => getId(item) === itemId)) {
             return;
         }
         events.registerItem({
@@ -53,7 +51,7 @@ export var useListItemRegister = createElemPropsHook(useListModel)(function (_a,
             textValue: typeof elemProps.children === 'string' ? elemProps.children : '',
         });
         setLocalId(itemId);
-        return function () {
+        return () => {
             events.unregisterItem({ id: itemId });
         };
     });
@@ -63,8 +61,8 @@ export var useListItemRegister = createElemPropsHook(useListModel)(function (_a,
         disabled: elemProps.disabled || state.nonInteractiveIds.includes(localId) ? true : undefined,
         item: null,
         virtual: null,
-        'aria-setsize': (_d = elemProps.virtual) === null || _d === void 0 ? void 0 : _d.size,
+        'aria-setsize': (_c = elemProps.virtual) === null || _c === void 0 ? void 0 : _c.size,
         'aria-posinset': elemProps.virtual ? elemProps.item.index + 1 : undefined,
-        style: style,
+        style,
     };
 });