@workday/canvas-kit-react 6.8.9 → 6.9.0-next.5

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCursorListModel.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useCursorListModel.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,368 @@
+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';
+/**
+ * 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}) {
+ *     //
+ *   }
+ * })
+ * ```
+ */
+export var createNavigationManager = function (manager) { return 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];
+};
+/**
+ * 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];
+};
+/**
+ * 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;
+    if (state.columnCount) {
+        var item = getItem(id, { state: state });
+        var currentIndex = item.index;
+        var offset = currentIndex % state.columnCount;
+        return state.items[currentIndex - offset];
+    }
+    return getFirst(id, { state: 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;
+    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;
+        if (nextIndex >= state.items.length) {
+            nextIndex = state.items.length - 1;
+        }
+        return state.items[nextIndex];
+    }
+    return getLast(id, { state: 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;
+    if (state.columnCount) {
+        var item = getItem(id, { state: state });
+        var currentIndex = item.index;
+        return state.items[currentIndex % state.columnCount];
+    }
+    return getFirst(id, { state: 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;
+    if (state.columnCount) {
+        var item = getItem(id, { state: state });
+        var currentIndex = item.index;
+        var lastRowIndex = state.items.length - state.columnCount;
+        return state.items[lastRowIndex + (currentIndex % state.columnCount)];
+    }
+    return getLast(id, { state: 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);
+    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;
+    // calculate idealLength as in if the grid was a perfect rectangle
+    var rows = Math.ceil(items.length / state.columnCount);
+    var idealLength = rows * state.columnCount;
+    if (nextIndex < 0) {
+        if (offset === -1) {
+            // if the offset is -1, we want to wrap to the end
+            nextIndex = items.length - 1;
+        }
+        else {
+            // if the offset is smaller than -1, we want to wrap by column
+            if (idealLength + nextIndex >= items.length) {
+                // we'll overflow the grid because there isn't enough items. Move `nextIndex` up so we wrap in
+                // the right spot
+                nextIndex -= state.columnCount;
+            }
+            nextIndex = idealLength + nextIndex;
+        }
+    }
+    else if (nextIndex >= items.length) {
+        if (offset === 1) {
+            // if the offset is 1, we want to wrap to the beginning
+            nextIndex = 0;
+        }
+        else {
+            // if the offset is larger than 1, we want to wrap by column
+            if (nextIndex - idealLength < 0) {
+                // we're going to overflow the grid because there isn't enough items. Move `nextIndex` down to
+                // the missing item in the next row. This way we'll end up wrapping in the right spot
+                nextIndex += state.columnCount;
+            }
+            nextIndex = nextIndex - idealLength;
+        }
+    }
+    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 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;
+    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;
+        if (nextIndexInRow >= columnCount || nextIndexInRow < 0) {
+            nextIndex = currentIndex;
+        }
+    }
+    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);
+        if (nextRow < 0 || nextRow >= columnCount) {
+            nextIndex = currentIndex;
+        }
+        // make sure we don't go out of bounds if the grid isn't a perfect rectangle
+        if (nextIndex > items.length - 1) {
+            nextIndex = currentIndex;
+        }
+    }
+    // make sure we're always in bounds
+    if (nextIndex < 0) {
+        nextIndex = 0;
+    }
+    else if (nextIndex >= items.length) {
+        nextIndex = items.length - 1;
+    }
+    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 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,
+    getNext: getWrappingOffsetItem(1),
+    getNextRow: function (id, _a) {
+        var state = _a.state;
+        return getWrappingOffsetItem(state.columnCount)(id, { state: 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,
+});
+/**
+ * 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,
+    getNext: getOffsetItem(1),
+    getNextRow: function (id, _a) {
+        var state = _a.state;
+        return getOffsetItem(state.columnCount)(id, { state: 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,
+});
+/**
+ * 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), { 
+        /**
+         * Initial cursor position. If not provided, the cursor will point to the first item in the list
+         */
+        initialCursorId: '', 
+        /**
+         * If this is set it will cause a wrapping of a list that will turn it into a grid
+         * @default 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
+         * (left-to-right or right-to-left) and call the correct navigation method. In our example, a
+         * left-to-right language would send a `getNext`. The navigation manager may return the next item
+         * in the list. Different managers can be created for slightly different use cases. The default
+         * navigation manager will accept `orientation` and directionality to determine mapping.
+         *
+         * An example override might be a tab list with an overflow menu that is meant to be transparent
+         * 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 }),
+    requiredConfig: useBaseListModel.requiredConfig,
+})(function (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(config.items[0]) : ''));
+    var navigation = config.navigation;
+    var state = __assign(__assign({}, list.state), { 
+        /** The id of the list item the cursor is pointing to */
+        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), { 
+        /**
+         * 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) {
+            // point the cursor at the first item
+            if (!initialCurrentRef.current) {
+                initialCurrentRef.current = getId(data.item);
+                setCursorId(initialCurrentRef.current);
+            }
+            list.events.registerItem(data);
+        },
+        /** Directly sets the cursor to the list item by its identifier. */
+        goTo: function (data) {
+            setCursorId(data.id);
+        },
+        /**
+         * Set the cursor to the "next" item in the list. This event delegates to the `getNext` method of
+         * the navigation manager. For a list, the default navigation manager will wrap if cursor is
+         * 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 })));
+        },
+        /**
+         * 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 })));
+        },
+        /**
+         * Previous item perpendicular to the orientation of a list, or the previous row in a grid. For
+         * example, if a list is horizontal, the previous row would describe an up direction. This could
+         * 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 () {
+            setCursorId(getId(navigation.getPreviousRow(state.cursorId, {
+                state: state,
+            })));
+        },
+        /**
+         * Next item perpendicular to the orientation of a list, or the next row in a grid. For example,
+         * if a list is horizontal, the next row would describe a down direction. This could be ignored by
+         * 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 })));
+        },
+        /** Set the cursor to the first item in the list */
+        goToFirst: function () {
+            setCursorId(getId(navigation.getFirst(state.cursorId, { state: state })));
+        },
+        /** Set the cursor to the last item in the list */
+        goToLast: function () {
+            setCursorId(getId(navigation.getLast(state.cursorId, { state: state })));
+        },
+        goToFirstOfRow: function () {
+            setCursorId(getId(navigation.getFirstOfRow(state.cursorId, { state: state })));
+        },
+        goToLastOfRow: function () {
+            setCursorId(getId(navigation.getLastOfRow(state.cursorId, { state: state })));
+        },
+        goToNextPage: function () {
+            setCursorId(getId(navigation.getNextPage(state.cursorId, { state: state })));
+        },
+        goToPreviousPage: function () {
+            setCursorId(getId(navigation.getPreviousPage(state.cursorId, {
+                state: state,
+            })));
+        } });
+    return __assign(__assign({}, list), { state: state, events: events, navigation: navigation });
+});