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

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

@@ -1,23 +1,12 @@
 "use strict";
-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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useListItemRovingFocus = exports.orientationKeyMap = void 0;
-var react_1 = __importDefault(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var useCursorListModel_1 = require("./useCursorListModel");
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const useCursorListModel_1 = require("./useCursorListModel");
 exports.orientationKeyMap = {
     horizontal: {
         ArrowLeft: 'goToPrevious',
@@ -40,7 +29,7 @@ exports.orientationKeyMap = {
         PageUp: 'goToPreviousPage',
     },
 };
-var rightToLeftMap = {
+const rightToLeftMap = {
     ArrowLeft: 'ArrowRight',
     Left: 'Right',
     ArrowRight: 'ArrowLeft',
@@ -50,13 +39,21 @@ var rightToLeftMap = {
     PageDown: 'PageDown',
     PageUp: 'PageUp',
 };
-var gridKeyMap = __assign(__assign({}, exports.orientationKeyMap.horizontal), { Home: 'goToFirstOfRow', End: 'goToLastOfRow', ArrowUp: 'goToPreviousRow', Up: 'goToPreviousRow', ArrowDown: 'goToNextRow', Down: 'goToNextRow' });
-var ctrlKeyMap = {
+const gridKeyMap = {
+    ...exports.orientationKeyMap.horizontal,
+    Home: 'goToFirstOfRow',
+    End: 'goToLastOfRow',
+    ArrowUp: 'goToPreviousRow',
+    Up: 'goToPreviousRow',
+    ArrowDown: 'goToNextRow',
+    Down: 'goToNextRow',
+};
+const ctrlKeyMap = {
     Home: 'goToFirst',
     End: 'goToLast',
 };
-var keys = function (obj) { return Object.keys(obj); };
-var hasOwnKey = function (obj, key) { return obj.hasOwnProperty(key); };
+const keys = (obj) => Object.keys(obj);
+const hasOwnKey = (obj, key) => obj.hasOwnProperty(key);
 /**
  * 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
@@ -71,29 +68,27 @@ var hasOwnKey = function (obj, key) { return obj.hasOwnProperty(key); };
  * );
 ```
  */
-exports.useListItemRovingFocus = common_1.createElemPropsHook(useCursorListModel_1.useCursorListModel)(function (_a, ref, elemProps) {
-    var state = _a.state, events = _a.events, navigation = _a.navigation;
-    if (elemProps === void 0) { elemProps = {}; }
+exports.useListItemRovingFocus = common_1.createElemPropsHook(useCursorListModel_1.useCursorListModel)(({ state, events, navigation }, ref, elemProps = {}) => {
     // Tracks when this element has focus. If this item is removed while still focused, we have to
     // inform the model to move the cursor to the next item.
-    var focusRef = react_1.default.useRef(false);
+    const focusRef = react_1.default.useRef(false);
     // Create a ref out of state. We don't want to watch state on unmount, so we use a ref to get the
     // current value at the time of unmounting. Otherwise, `state.items` would be a cached value of an
     // empty array
-    var stateRef = react_1.default.useRef(state);
+    const stateRef = react_1.default.useRef(state);
     stateRef.current = state;
-    var keyDownRef = react_1.default.useRef(false);
-    var isRTL = common_1.useIsRTL();
-    react_1.default.useEffect(function () {
+    const keyDownRef = react_1.default.useRef(false);
+    const isRTL = common_1.useIsRTL();
+    react_1.default.useEffect(() => {
         if (keyDownRef.current) {
-            var item_1 = navigation.getItem(state.cursorId, { state: state });
+            const item = navigation.getItem(state.cursorId, { state });
             if (state.isVirtualized) {
-                state.UNSTABLE_virtual.scrollToIndex(item_1.index);
+                state.UNSTABLE_virtual.scrollToIndex(item.index);
             }
-            requestAnimationFrame(function () {
+            requestAnimationFrame(() => {
                 var _a;
                 (_a = document
-                    .querySelector("[data-focus-id=\"" + (state.id + "-" + item_1.id) + "\"]")) === null || _a === void 0 ? void 0 : _a.focus();
+                    .querySelector(`[data-focus-id="${`${state.id}-${item.id}`}"]`)) === null || _a === void 0 ? void 0 : _a.focus();
             });
             keyDownRef.current = false;
         }
@@ -101,11 +96,11 @@ exports.useListItemRovingFocus = common_1.createElemPropsHook(useCursorListModel
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [state.cursorId]);
     return {
-        onKeyDown: function (event) {
+        onKeyDown(event) {
             var _a;
             // Test ctrl key first
             if (event.ctrlKey) {
-                for (var key in ctrlKeyMap) {
+                for (const key in ctrlKeyMap) {
                     if (hasOwnKey(ctrlKeyMap, key)) {
                         if (event.key === key) {
                             keyDownRef.current = true;
@@ -117,10 +112,10 @@ exports.useListItemRovingFocus = common_1.createElemPropsHook(useCursorListModel
                 }
             }
             // Try regular keys
-            keys(state.columnCount > 0 ? gridKeyMap : exports.orientationKeyMap[state.orientation]).forEach(function (key) {
+            keys(state.columnCount > 0 ? gridKeyMap : exports.orientationKeyMap[state.orientation]).forEach(key => {
                 var _a;
                 if (isRTL ? event.key === rightToLeftMap[key] : event.key === key) {
-                    var eventName = state.columnCount > 0 ? gridKeyMap[key] : exports.orientationKeyMap[state.orientation][key];
+                    const eventName = state.columnCount > 0 ? gridKeyMap[key] : exports.orientationKeyMap[state.orientation][key];
                     keyDownRef.current = true;
                     if (events[eventName]) {
                         (_a = events[eventName]) === null || _a === void 0 ? void 0 : _a.call(events);
@@ -129,21 +124,21 @@ exports.useListItemRovingFocus = common_1.createElemPropsHook(useCursorListModel
                 }
             });
         },
-        onFocus: function () {
+        onFocus() {
             focusRef.current = true;
         },
-        onBlur: function () {
+        onBlur() {
             focusRef.current = false;
         },
-        onClick: function () {
+        onClick() {
             events.goTo({ id: elemProps['data-id'] });
         },
-        'data-focus-id': state.id + "-" + elemProps['data-id'],
+        'data-focus-id': `${state.id}-${elemProps['data-id']}`,
         tabIndex: !state.cursorId
             ? 0 // cursor isn't known yet, be safe and mark this as focusable
             : !!elemProps['data-id'] && state.cursorId === elemProps['data-id']
                 ? 0 // A name is known and cursor is here
                 : -1,
-        ref: ref,
+        ref,
     };
 });

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

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useListItemSelect = void 0;
-var common_1 = require("@workday/canvas-kit-react/common");
-var useListModel_1 = require("./useListModel");
+const common_1 = require("@workday/canvas-kit-react/common");
+const useListModel_1 = require("./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
@@ -15,16 +15,14 @@ var useListModel_1 = require("./useListModel");
  * );
  * ```
  */
-exports.useListItemSelect = common_1.createElemPropsHook(useListModel_1.useListModel)(function (_a, _, elemProps) {
-    var state = _a.state, events = _a.events;
-    if (elemProps === void 0) { elemProps = {}; }
-    var name = elemProps['data-id'] || '';
-    var onClick = function (event) {
+exports.useListItemSelect = common_1.createElemPropsHook(useListModel_1.useListModel)(({ state, events }, _, elemProps = {}) => {
+    const name = elemProps['data-id'] || '';
+    const onClick = (event) => {
         if (state.nonInteractiveIds.includes(name) ||
             event.currentTarget.hasAttribute('aria-disabled')) {
             return;
         }
         events.select({ id: name });
     };
-    return { onClick: onClick };
+    return { onClick };
 });

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

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useListModel = void 0;
-var common_1 = require("@workday/canvas-kit-react/common");
-var useSelectionListModel_1 = require("./useSelectionListModel");
+const common_1 = require("@workday/canvas-kit-react/common");
+const useSelectionListModel_1 = require("./useSelectionListModel");
 /**
  * The List model contains the the state and events necessary to track items, selection, and a cursor.
  * Various hooks can be used for a List model to create common behaviors associated with lists, such as

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

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useListRenderItems = void 0;
-var react_1 = __importDefault(require("react"));
+const react_1 = __importDefault(require("react"));
 /**
  * This hook is meant to be used inside the render function of `List` style components. It is used
  * by `ListBox`. This hook gives list-based components their static and dynamic APIs to handle list
@@ -20,25 +20,25 @@ var react_1 = __importDefault(require("react"));
 ```
  */
 function useListRenderItems(model, children) {
-    var items = typeof children === 'function'
+    const items = typeof children === 'function'
         ? model.state.isVirtualized
-            ? model.state.UNSTABLE_virtual.virtualItems.map(function (virtual) {
-                var item = model.state.items[virtual.index];
-                var child = children(item.value, virtual.index);
+            ? model.state.UNSTABLE_virtual.virtualItems.map(virtual => {
+                const item = model.state.items[virtual.index];
+                const child = children(item.value, virtual.index);
                 if (react_1.default.isValidElement(child)) {
                     return react_1.default.cloneElement(child, {
                         // We call this `virtual` instead of `virtualItem` to avoid a React render warning
                         // about capital letters in attributes. React thinks this will be applied to the DOM
                         // element even though we remove it later...
-                        virtual: virtual,
+                        virtual,
                         key: item.id,
-                        item: item,
+                        item,
                     });
                 }
                 return child;
             })
-            : model.state.items.map(function (item) {
-                var child = children(item.value, item.index);
+            : model.state.items.map(item => {
+                const child = children(item.value, item.index);
                 if (react_1.default.isValidElement(child)) {
                     return react_1.default.cloneElement(child, {
                         key: item.id,

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

@@ -4,10 +4,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useListResetCursorOnBlur = void 0;
-var react_1 = __importDefault(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var useListItemRovingFocus_1 = require("./useListItemRovingFocus");
-var useListModel_1 = require("./useListModel");
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const useListItemRovingFocus_1 = require("./useListItemRovingFocus");
+const useListModel_1 = require("./useListModel");
 /**
  * This elemProps hook resets the cursor when the list looses focus. By default,
  * [useListItemRovingFocus](#use-list-item-roving-focus) will leave the last focused item as the
@@ -22,20 +22,19 @@ var useListModel_1 = require("./useListModel");
  * );
 ```
  */
-exports.useListResetCursorOnBlur = common_1.createElemPropsHook(useListModel_1.useListModel)(function (_a) {
-    var state = _a.state, events = _a.events;
-    var programmaticFocusRef = react_1.default.useRef(false);
+exports.useListResetCursorOnBlur = common_1.createElemPropsHook(useListModel_1.useListModel)(({ state, events }) => {
+    const programmaticFocusRef = react_1.default.useRef(false);
     return {
-        onKeyDown: function (event) {
+        onKeyDown(event) {
             // Programmatic focus only on any focus change via keyboard
             if (Object.keys(useListItemRovingFocus_1.orientationKeyMap[state.orientation]).indexOf(event.key) !== -1) {
                 programmaticFocusRef.current = true;
             }
         },
-        onFocus: function () {
+        onFocus() {
             programmaticFocusRef.current = false;
         },
-        onBlur: function () {
+        onBlur() {
             if (!programmaticFocusRef.current) {
                 events.goTo({ id: state.selectedIds[0] });
             }

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

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useOverflowListItemMeasure = void 0;
-var common_1 = require("@workday/canvas-kit-react/common");
-var useOverflowListModel_1 = require("./useOverflowListModel");
-var hiddenStyles = {
+const common_1 = require("@workday/canvas-kit-react/common");
+const useOverflowListModel_1 = require("./useOverflowListModel");
+const hiddenStyles = {
     position: 'absolute',
     left: -99999,
 };
@@ -18,13 +18,12 @@ var hiddenStyles = {
  * )
  * ```
  */
-exports.useOverflowListItemMeasure = common_1.createElemPropsHook(useOverflowListModel_1.useOverflowListModel)(function (model, ref, elemProps) {
-    if (elemProps === void 0) { elemProps = {}; }
-    var _a = common_1.useLocalRef(ref), elementRef = _a.elementRef, localRef = _a.localRef;
-    var name = elemProps['data-id'] || '';
-    common_1.useMountLayout(function () {
+exports.useOverflowListItemMeasure = common_1.createElemPropsHook(useOverflowListModel_1.useOverflowListModel)((model, ref, elemProps = {}) => {
+    const { elementRef, localRef } = common_1.useLocalRef(ref);
+    const name = elemProps['data-id'] || '';
+    common_1.useMountLayout(() => {
         if (localRef.current) {
-            var styles = getComputedStyle(localRef.current);
+            const styles = getComputedStyle(localRef.current);
             model.events.addItemWidth({
                 id: name,
                 width: localRef.current.offsetWidth +
@@ -32,11 +31,11 @@ exports.useOverflowListItemMeasure = common_1.createElemPropsHook(useOverflowLis
                     parseFloat(styles.marginRight),
             });
         }
-        return function () {
+        return () => {
             model.events.removeItemWidth({ id: name });
         };
     });
-    var hidden = model.state.hiddenIds.includes(name);
+    const hidden = model.state.hiddenIds.includes(name);
     return {
         ref: elementRef,
         'aria-hidden': hidden || undefined,

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

@@ -20,20 +20,20 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useOverflowListMeasure = void 0;
-var React = __importStar(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var useOverflowListModel_1 = require("./useOverflowListModel");
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const useOverflowListModel_1 = require("./useOverflowListModel");
 /**
  * This elemProps hook measures a list and reports it to an `OverflowListModel`. This is used in
  * overflow detection.
  */
-exports.useOverflowListMeasure = common_1.createElemPropsHook(useOverflowListModel_1.useOverflowListModel)(function (model, ref) {
-    var localRef = React.useRef(null);
-    var resizeRef = common_1.useResizeObserver({
+exports.useOverflowListMeasure = common_1.createElemPropsHook(useOverflowListModel_1.useOverflowListModel)((model, ref) => {
+    const localRef = React.useRef(null);
+    const { ref: resizeRef } = common_1.useResizeObserver({
         ref: localRef,
         onResize: model.events.setContainerWidth,
-    }).ref;
-    var elementRef = common_1.useForkRef(ref, resizeRef);
+    });
+    const elementRef = common_1.useForkRef(ref, resizeRef);
     return {
         ref: elementRef,
     };

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

@@ -1,35 +1,24 @@
 "use strict";
-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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useOverflowListModel = exports.getHiddenIds = void 0;
-var react_1 = __importDefault(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var useSelectionListModel_1 = require("./useSelectionListModel");
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const useSelectionListModel_1 = require("./useSelectionListModel");
 function getHiddenIds(containerWidth, overflowTargetWidth, itemWidthCache, selectedIds) {
     /** Allows us to prioritize showing the selected item */
-    var selectedKey;
+    let selectedKey;
     /** Tally of combined item widths. We'll add items that fit until the container is full */
-    var itemWidth = 0;
+    let itemWidth = 0;
     /** Tally ids that won't fit inside the container. These will be used by components to hide
      * elements that won't fit in the container */
-    var hiddenIds = [];
+    const hiddenIds = [];
     if (selectedIds !== 'all' && selectedIds.length) {
         selectedKey = selectedIds[0];
     }
-    if (Object.keys(itemWidthCache).reduce(function (sum, key) { return sum + itemWidthCache[key]; }, 0) <= containerWidth) {
+    if (Object.keys(itemWidthCache).reduce((sum, key) => sum + itemWidthCache[key], 0) <= containerWidth) {
         // All items fit, return empty array
         return [];
     }
@@ -46,7 +35,7 @@ function getHiddenIds(containerWidth, overflowTargetWidth, itemWidthCache, selec
     else {
         itemWidth += overflowTargetWidth;
     }
-    for (var key in itemWidthCache) {
+    for (const key in itemWidthCache) {
         if (key !== selectedKey) {
             itemWidth += itemWidthCache[key];
             if (itemWidth > containerWidth) {
@@ -58,69 +47,85 @@ function getHiddenIds(containerWidth, overflowTargetWidth, itemWidthCache, selec
 }
 exports.getHiddenIds = getHiddenIds;
 exports.useOverflowListModel = common_1.createModelHook({
-    defaultConfig: __assign(__assign({}, useSelectionListModel_1.useSelectionListModel.defaultConfig), { initialHiddenIds: [], containerWidth: 0, 
+    defaultConfig: {
+        ...useSelectionListModel_1.useSelectionListModel.defaultConfig,
+        initialHiddenIds: [],
+        containerWidth: 0,
         /**
          * Determines if overflow should actually occur. For example, touch devices are better at
          * side-scrolling than mouse devices. In these cases, it makes sense to disable overflowing.
          * @default true
-         */ shouldCalculateOverflow: true }),
+         */ shouldCalculateOverflow: true,
+    },
     requiredConfig: useSelectionListModel_1.useSelectionListModel.requiredConfig,
     contextOverride: useSelectionListModel_1.useSelectionListModel.Context,
-})(function (config) {
-    var shouldCalculateOverflow = config.shouldCalculateOverflow === undefined ? true : config.shouldCalculateOverflow;
-    var _a = react_1.default.useState(config.initialHiddenIds), hiddenIds = _a[0], setHiddenIds = _a[1];
-    var _b = react_1.default.useState({}), itemWidthCache = _b[0], setItemWidthCache = _b[1];
-    var _c = react_1.default.useState(0), containerWidth = _c[0], setContainerWidth = _c[1];
-    var containerWidthRef = react_1.default.useRef(0);
-    var itemWidthCacheRef = react_1.default.useRef(itemWidthCache);
-    var _d = react_1.default.useState(0), overflowTargetWidth = _d[0], setOverflowTargetWidth = _d[1];
-    var overflowTargetWidthRef = react_1.default.useRef(0);
-    var internalHiddenIds = shouldCalculateOverflow ? hiddenIds : [];
+})(config => {
+    const shouldCalculateOverflow = config.shouldCalculateOverflow === undefined ? true : config.shouldCalculateOverflow;
+    const [hiddenIds, setHiddenIds] = react_1.default.useState(config.initialHiddenIds);
+    const [itemWidthCache, setItemWidthCache] = react_1.default.useState({});
+    const [containerWidth, setContainerWidth] = react_1.default.useState(0);
+    const containerWidthRef = react_1.default.useRef(0);
+    const itemWidthCacheRef = react_1.default.useRef(itemWidthCache);
+    const [overflowTargetWidth, setOverflowTargetWidth] = react_1.default.useState(0);
+    const overflowTargetWidthRef = react_1.default.useRef(0);
+    const internalHiddenIds = shouldCalculateOverflow ? hiddenIds : [];
     // Cursors skip over disabled ids, but know nothing of hidden ids. We'll go ahead and disable
     // hidden ids as well
-    var nonInteractiveIds = (config.nonInteractiveIds || []).concat(internalHiddenIds);
-    var model = useSelectionListModel_1.useSelectionListModel(__assign(__assign({}, config), { nonInteractiveIds: nonInteractiveIds }));
-    var state = __assign(__assign({}, model.state), { hiddenIds: internalHiddenIds, itemWidthCache: itemWidthCache,
-        containerWidth: containerWidth,
-        overflowTargetWidth: overflowTargetWidth });
-    var events = __assign(__assign({}, model.events), { select: function (data) {
-            var selectedIds = model.selection.select(data.id, state).selectedIds;
-            var ids = getHiddenIds(containerWidthRef.current, overflowTargetWidthRef.current, itemWidthCacheRef.current, selectedIds);
+    const nonInteractiveIds = (config.nonInteractiveIds || []).concat(internalHiddenIds);
+    const model = useSelectionListModel_1.useSelectionListModel({
+        ...config,
+        nonInteractiveIds,
+    });
+    const state = {
+        ...model.state,
+        hiddenIds: internalHiddenIds,
+        itemWidthCache,
+        containerWidth,
+        overflowTargetWidth,
+    };
+    const events = {
+        ...model.events,
+        select(data) {
+            const { selectedIds } = model.selection.select(data.id, state);
+            const ids = getHiddenIds(containerWidthRef.current, overflowTargetWidthRef.current, itemWidthCacheRef.current, selectedIds);
             model.events.select(data);
             setHiddenIds(ids);
         },
-        setContainerWidth: function (data) {
+        setContainerWidth(data) {
             containerWidthRef.current = data.width || 0;
             setContainerWidth(data.width || 0);
-            var ids = getHiddenIds(containerWidthRef.current, overflowTargetWidthRef.current, itemWidthCacheRef.current, state.selectedIds);
+            const ids = getHiddenIds(containerWidthRef.current, overflowTargetWidthRef.current, itemWidthCacheRef.current, state.selectedIds);
             setHiddenIds(ids);
         },
-        setOverflowTargetWidth: function (data) {
+        setOverflowTargetWidth(data) {
             overflowTargetWidthRef.current = data.width;
             setOverflowTargetWidth(data.width);
         },
-        addItemWidth: function (data) {
-            var _a;
-            itemWidthCacheRef.current = __assign(__assign({}, itemWidthCacheRef.current), (_a = {}, _a[data.id] = data.width, _a));
+        addItemWidth(data) {
+            itemWidthCacheRef.current = {
+                ...itemWidthCacheRef.current,
+                [data.id]: data.width,
+            };
             setItemWidthCache(itemWidthCacheRef.current);
-            var ids = getHiddenIds(containerWidthRef.current, overflowTargetWidthRef.current, itemWidthCacheRef.current, state.selectedIds);
+            const ids = getHiddenIds(containerWidthRef.current, overflowTargetWidthRef.current, itemWidthCacheRef.current, state.selectedIds);
             setHiddenIds(ids);
         },
-        removeItemWidth: function (data) {
-            var newCache = __assign({}, itemWidthCacheRef.current);
+        removeItemWidth(data) {
+            const newCache = { ...itemWidthCacheRef.current };
             delete newCache[data.id];
             itemWidthCacheRef.current = newCache;
             setItemWidthCache(itemWidthCacheRef.current);
-            var ids = getHiddenIds(containerWidthRef.current, overflowTargetWidthRef.current, itemWidthCacheRef.current, state.selectedIds !== 'all'
-                ? state.selectedIds.filter(function (sId) { return data.id !== sId; })
+            const ids = getHiddenIds(containerWidthRef.current, overflowTargetWidthRef.current, itemWidthCacheRef.current, state.selectedIds !== 'all'
+                ? state.selectedIds.filter(sId => data.id !== sId)
                 : state.selectedIds);
             setHiddenIds(ids);
         },
-        addHiddenKey: function (data) {
-            setHiddenIds(function (ids) { return ids.concat(data.id); });
+        addHiddenKey(data) {
+            setHiddenIds(ids => ids.concat(data.id));
+        },
+        removeHiddenKey(data) {
+            setHiddenIds(ids => ids.filter(key => key !== data.id));
         },
-        removeHiddenKey: function (data) {
-            setHiddenIds(function (ids) { return ids.filter(function (key) { return key !== data.id; }); });
-        } });
-    return __assign(__assign({}, model), { state: state, events: events });
+    };
+    return { ...model, state, events };
 });

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

@@ -4,11 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useOverflowListTarget = void 0;
-var react_1 = __importDefault(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var useOverflowListModel_1 = require("./useOverflowListModel");
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const useOverflowListModel_1 = require("./useOverflowListModel");
 // use a hidden style instead of `hidden` attribute for measurement purposes. `hidden` elements have no dimensions
-var hiddenStyle = {
+const hiddenStyle = {
     position: 'absolute',
     left: -99999,
 };
@@ -16,14 +16,14 @@ var hiddenStyle = {
  * This elemProps hook measures an overflow list target and reports it to an `OverflowListModel`.
  * This is used in overflow detection.
  */
-exports.useOverflowListTarget = common_1.createElemPropsHook(useOverflowListModel_1.useOverflowListModel)(function (model, ref) {
-    var _a = common_1.useLocalRef(ref), elementRef = _a.elementRef, localRef = _a.localRef;
+exports.useOverflowListTarget = common_1.createElemPropsHook(useOverflowListModel_1.useOverflowListModel)((model, ref) => {
+    const { elementRef, localRef } = common_1.useLocalRef(ref);
     // track first render to force correct size calculations
-    var firstRender = react_1.default.useRef(true);
-    common_1.useMountLayout(function () {
+    const firstRender = react_1.default.useRef(true);
+    common_1.useMountLayout(() => {
         firstRender.current = false;
         if (localRef.current) {
-            var styles = getComputedStyle(localRef.current);
+            const styles = getComputedStyle(localRef.current);
             model.events.setOverflowTargetWidth({
                 width: localRef.current.offsetWidth +
                     parseFloat(styles.marginLeft) +
@@ -31,7 +31,7 @@ exports.useOverflowListTarget = common_1.createElemPropsHook(useOverflowListMode
             });
         }
     });
-    var isHidden = !model.state.hiddenIds.length;
+    const isHidden = !model.state.hiddenIds.length;
     return {
         ref: elementRef,
         'aria-hidden': isHidden,