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

package/dist/es6/checkbox/lib/Checkbox.js

@@ -1,38 +1,16 @@
-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 * as React from 'react';
 import { createComponent, ErrorType, useUniqueId, focusRing, mouseFocusBehavior, getErrorColors, styled, useTheme, } from '@workday/canvas-kit-react/common';
 import { borderRadius, colors, inputColors, spaceNumbers } from '@workday/canvas-kit-react/tokens';
 import { SystemIcon } from '@workday/canvas-kit-react/icon';
 import { checkSmallIcon } from '@workday/canvas-system-icons-web';
 import { LabelText } from '@workday/canvas-kit-react/text';
-var checkboxHeight = 18;
-var checkboxTapArea = spaceNumbers.m;
-var checkboxContainerHeight = checkboxTapArea;
-var checkboxLabelDistance = spaceNumbers.xs;
-var checkboxWidth = 18;
-var rippleRadius = (spaceNumbers.l - checkboxWidth) / 2;
-var CheckboxContainer = styled('div')({
+const checkboxHeight = 18;
+const checkboxTapArea = spaceNumbers.m;
+const checkboxContainerHeight = checkboxTapArea;
+const checkboxLabelDistance = spaceNumbers.xs;
+const checkboxWidth = 18;
+const rippleRadius = (spaceNumbers.l - checkboxWidth) / 2;
+const CheckboxContainer = styled('div')({
     display: 'flex',
     alignItems: 'center',
     minHeight: checkboxContainerHeight,
@@ -43,74 +21,94 @@ var CheckboxContainer = styled('div')({
  * :hover on the checkbox when you hover on it's corresponding label.
  * This stops the ripple from showing when you hover on the label.
  */
-var CheckboxInputWrapper = styled('div')({
+const CheckboxInputWrapper = styled('div')({
     display: 'flex',
     height: checkboxHeight,
     minWidth: checkboxWidth,
     marginTop: '3px',
     alignSelf: 'flex-start',
 });
-var CheckboxRipple = styled('span')({
+const CheckboxRipple = styled('span')({
     borderRadius: borderRadius.circle,
-    boxShadow: "0 0 0 0 " + colors.soap200,
+    boxShadow: `0 0 0 0 ${colors.soap200}`,
     height: checkboxHeight,
     transition: 'box-shadow 150ms ease-out',
     width: checkboxWidth,
     position: 'absolute',
     pointerEvents: 'none', // This is a decorative element we don't want it to block clicks to input
-}, function (_a) {
-    var variant = _a.variant;
-    return ({
-        opacity: variant === 'inverse' ? '0.4' : '1',
-    });
-});
+}, ({ variant }) => ({
+    opacity: variant === 'inverse' ? '0.4' : '1',
+}));
 /**
  * Note: `~ div:first-of-type` refers to `CheckboxBackground`
  * and was easier to use than a component selector in this case.
  */
-var CheckboxInput = styled('input')(function (_a) {
-    var _b = _a.theme.canvas.palette, themePrimary = _b.primary, themeFocusOutline = _b.common.focusOutline, variant = _a.variant;
-    return (__assign({ borderRadius: borderRadius.s, width: checkboxTapArea, height: checkboxTapArea, margin: 0, marginTop: '-3px', marginLeft: '-3px', position: 'absolute', opacity: 0, '&:not(:disabled)': {
-            cursor: 'pointer',
-        }, 
-        // States
-        '&:not(:checked):not(:disabled):not(:focus):hover, &:not(:checked):not(:disabled):active': {
-            '~ div:first-of-type': {
-                borderColor: variant === 'inverse' ? colors.soap300 : inputColors.hoverBorder,
-            },
-        }, '&:checked ~ div:first-of-type': {
-            borderColor: variant === 'inverse' ? colors.soap300 : themePrimary.main,
-            backgroundColor: variant === 'inverse' ? colors.frenchVanilla100 : themePrimary.main,
-        }, '&:disabled ~ div:first-of-type': {
-            borderColor: inputColors.disabled.border,
-            backgroundColor: variant === 'inverse' ? colors.soap300 : inputColors.disabled.background,
-            opacity: variant === 'inverse' ? '.4' : '1',
-        }, '&:disabled:checked ~ div:first-of-type': {
-            borderColor: variant === 'inverse' ? colors.soap300 : themePrimary.light,
-            backgroundColor: variant === 'inverse' ? colors.soap300 : themePrimary.light,
-        }, 
-        // Focus
-        '&:focus, &:active': {
-            outline: 'none',
-        }, '&:focus ~ div:first-of-type': __assign({ borderColor: variant === 'inverse' ? colors.blackPepper400 : themePrimary.main, borderWidth: '2px', boxShadow: 'none' }, focusRing({
+const CheckboxInput = styled('input')(({ theme: { canvas: { palette: { primary: themePrimary, common: { focusOutline: themeFocusOutline }, }, }, }, variant, }) => ({
+    borderRadius: borderRadius.s,
+    width: checkboxTapArea,
+    height: checkboxTapArea,
+    margin: 0,
+    marginTop: '-3px',
+    marginLeft: '-3px',
+    position: 'absolute',
+    opacity: 0,
+    '&:not(:disabled)': {
+        cursor: 'pointer',
+    },
+    // States
+    '&:not(:checked):not(:disabled):not(:focus):hover, &:not(:checked):not(:disabled):active': {
+        '~ div:first-of-type': {
+            borderColor: variant === 'inverse' ? colors.soap300 : inputColors.hoverBorder,
+        },
+    },
+    '&:checked ~ div:first-of-type': {
+        borderColor: variant === 'inverse' ? colors.soap300 : themePrimary.main,
+        backgroundColor: variant === 'inverse' ? colors.frenchVanilla100 : themePrimary.main,
+    },
+    '&:disabled ~ div:first-of-type': {
+        borderColor: inputColors.disabled.border,
+        backgroundColor: variant === 'inverse' ? colors.soap300 : inputColors.disabled.background,
+        opacity: variant === 'inverse' ? '.4' : '1',
+    },
+    '&:disabled:checked ~ div:first-of-type': {
+        borderColor: variant === 'inverse' ? colors.soap300 : themePrimary.light,
+        backgroundColor: variant === 'inverse' ? colors.soap300 : themePrimary.light,
+    },
+    // Focus
+    '&:focus, &:active': {
+        outline: 'none',
+    },
+    '&:focus ~ div:first-of-type': {
+        borderColor: variant === 'inverse' ? colors.blackPepper400 : themePrimary.main,
+        borderWidth: '2px',
+        boxShadow: 'none',
+        ...focusRing({
             width: variant === 'inverse' ? 2 : 0,
             separation: 0,
             animate: false,
             innerColor: variant === 'inverse' ? colors.blackPepper400 : undefined,
             outerColor: variant === 'inverse' ? colors.frenchVanilla100 : undefined,
-        })), '&:checked:focus ~ div:first-of-type': __assign(__assign({}, focusRing({
+        }),
+    },
+    '&:checked:focus ~ div:first-of-type': {
+        ...focusRing({
             width: 2,
             separation: 2,
             animate: false,
             innerColor: variant === 'inverse' ? colors.blackPepper400 : undefined,
             outerColor: variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline,
-        })), { borderColor: variant === 'inverse' ? colors.frenchVanilla100 : themePrimary.main, borderWidth: '2px', '& span': {
-                marginLeft: '-7px',
-            } }) }, mouseFocusBehavior({
+        }),
+        borderColor: variant === 'inverse' ? colors.frenchVanilla100 : themePrimary.main,
+        borderWidth: '2px',
+        '& span': {
+            marginLeft: '-7px',
+        },
+    },
+    ...mouseFocusBehavior({
         '&:focus ~ div:first-of-type': {
             border: variant === 'inverse'
-                ? "1px solid " + colors.soap300
-                : "1px solid " + inputColors.hoverBorder,
+                ? `1px solid ${colors.soap300}`
+                : `1px solid ${inputColors.hoverBorder}`,
             boxShadow: 'none',
             '& span': {
                 marginLeft: '-6px',
@@ -123,41 +121,47 @@ var CheckboxInput = styled('input')(function (_a) {
             borderColor: themePrimary.light,
             backgroundColor: variant === 'inverse' ? colors.soap300 : themePrimary.light,
         },
-    })));
-}, function (_a) {
-    var disabled = _a.disabled;
-    return ({
-        '&:hover ~ span:first-of-type': {
-            boxShadow: disabled ? undefined : "0 0 0 " + rippleRadius + "px " + colors.soap200,
-        },
-    });
-}, function (_a) {
-    var theme = _a.theme, error = _a.error, variant = _a.variant;
-    var errorColors = getErrorColors(error, theme);
+    }),
+}), ({ disabled }) => ({
+    '&:hover ~ span:first-of-type': {
+        boxShadow: disabled ? undefined : `0 0 0 ${rippleRadius}px ${colors.soap200}`,
+    },
+}), ({ theme, error, variant }) => {
+    const errorColors = getErrorColors(error, theme);
     if (errorColors.outer === errorColors.inner) {
         errorColors.outer = 'transparent';
     }
-    var errorStyles = {
+    const errorStyles = {
         '& ~ div:first-of-type': {
-            border: variant === 'inverse' ? "1px solid " + colors.soap300 : "1px solid " + errorColors.inner,
-            boxShadow: "0 0 0 1px " + errorColors.inner + ", 0 0 0 2px " + errorColors.outer,
+            border: variant === 'inverse' ? `1px solid ${colors.soap300}` : `1px solid ${errorColors.inner}`,
+            boxShadow: `0 0 0 1px ${errorColors.inner}, 0 0 0 2px ${errorColors.outer}`,
         },
         '&:not(:checked):not(:disabled):not(:focus):hover, &:not(:checked):not(:disabled):active': {
             '~ div:first-of-type': {
-                borderColor: variant === 'inverse' ? "1px solid " + colors.soap300 : errorColors.inner,
+                borderColor: variant === 'inverse' ? `1px solid ${colors.soap300}` : errorColors.inner,
             },
         },
         '&:checked ~ div:first-of-type': {
             borderColor: variant === 'inverse' ? colors.soap300 : theme.canvas.palette.primary.main,
-            boxShadow: "\n              0 0 0 2px " + colors.frenchVanilla100 + ",\n              0 0 0 4px " + errorColors.inner + ",\n              0 0 0 5px " + errorColors.outer,
+            boxShadow: `
+              0 0 0 2px ${colors.frenchVanilla100},
+              0 0 0 4px ${errorColors.inner},
+              0 0 0 5px ${errorColors.outer}`,
         },
     };
-    return __assign(__assign({}, mouseFocusBehavior(__assign(__assign({}, errorStyles), { '&:not(:checked):focus ~ div:first-of-type': {
-            border: "1px solid " + errorColors.inner,
-            boxShadow: "0 0 0 1px " + errorColors.inner + ", 0 0 0 2px " + errorColors.outer,
-        } }))), errorStyles);
+    return {
+        // Error rings take precedence over focus
+        ...mouseFocusBehavior({
+            ...errorStyles,
+            '&:not(:checked):focus ~ div:first-of-type': {
+                border: `1px solid ${errorColors.inner}`,
+                boxShadow: `0 0 0 1px ${errorColors.inner}, 0 0 0 2px ${errorColors.outer}`,
+            },
+        }),
+        ...errorStyles,
+    };
 });
-var CheckboxBackground = styled('div')({
+const CheckboxBackground = styled('div')({
     alignItems: 'center',
     backgroundColor: colors.frenchVanilla100,
     borderRadius: borderRadius.s,
@@ -170,13 +174,10 @@ var CheckboxBackground = styled('div')({
     position: 'absolute',
     transition: 'border 200ms ease, background 200ms',
     width: checkboxWidth,
-}, function (_a) {
-    var variant = _a.variant;
-    return ({
-        border: "1px solid " + (variant === 'inverse' ? colors.soap300 : inputColors.border),
-    });
-});
-var CheckboxCheck = styled('div')({
+}, ({ variant }) => ({
+    border: `1px solid ${variant === 'inverse' ? colors.soap300 : inputColors.border}`,
+}));
+const CheckboxCheck = styled('div')({
     display: 'flex',
     flexDirection: 'column',
     // When using align-items: center on a flex container in the column direction,
@@ -192,38 +193,28 @@ var CheckboxCheck = styled('div')({
         marginLeft: '-6px',
         transition: 'margin 200ms ease',
     },
-}, function (_a) {
-    var checked = _a.checked;
-    return ({
-        opacity: checked ? 1 : 0,
-        transform: checked ? 'scale(1)' : 'scale(0.5)',
-    });
-});
-var IndeterminateBox = styled('div')({
+}, ({ checked }) => ({
+    opacity: checked ? 1 : 0,
+    transform: checked ? 'scale(1)' : 'scale(0.5)',
+}));
+const IndeterminateBox = styled('div')({
     width: '10px',
     height: '2px',
-}, function (_a) {
-    var theme = _a.theme, variant = _a.variant;
-    return ({
-        backgroundColor: variant === 'inverse'
-            ? theme.canvas.palette.primary.main
-            : theme.canvas.palette.primary.contrast,
-    });
-});
-export var Checkbox = createComponent('input')({
+}, ({ theme, variant }) => ({
+    backgroundColor: variant === 'inverse'
+        ? theme.canvas.palette.primary.main
+        : theme.canvas.palette.primary.contrast,
+}));
+export const Checkbox = createComponent('input')({
     displayName: 'Checkbox',
-    Component: function (_a, ref, Element) {
-        var _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.label, label = _c === void 0 ? '' : _c, 
-        // TODO: Fix useTheme and make it a real hook
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        _d = _a.theme, 
-        // TODO: Fix useTheme and make it a real hook
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        theme = _d === void 0 ? useTheme() : _d, id = _a.id, disabled = _a.disabled, indeterminate = _a.indeterminate, variant = _a.variant, elemProps = __rest(_a, ["checked", "label", "theme", "id", "disabled", "indeterminate", "variant"]);
-        var inputId = useUniqueId(id);
+    Component: ({ checked = false, label = '', 
+    // TODO: Fix useTheme and make it a real hook
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    theme = useTheme(), id, disabled, indeterminate, variant, ...elemProps }, ref, Element) => {
+        const inputId = useUniqueId(id);
         return (React.createElement(CheckboxContainer, null,
             React.createElement(CheckboxInputWrapper, { disabled: disabled },
-                React.createElement(CheckboxInput, __assign({ as: Element, checked: checked, disabled: disabled, id: inputId, ref: ref, type: "checkbox", variant: variant, "aria-checked": indeterminate ? 'mixed' : checked }, elemProps)),
+                React.createElement(CheckboxInput, Object.assign({ as: Element, checked: checked, disabled: disabled, id: inputId, ref: ref, type: "checkbox", variant: variant, "aria-checked": indeterminate ? 'mixed' : checked }, elemProps)),
                 React.createElement(CheckboxRipple, { variant: variant }),
                 React.createElement(CheckboxBackground, { variant: variant, checked: checked, disabled: disabled },
                     React.createElement(CheckboxCheck, { checked: checked }, indeterminate ? (React.createElement(IndeterminateBox, { variant: variant })) : (React.createElement(SystemIcon, { icon: checkSmallIcon, color: variant === 'inverse'
@@ -232,6 +223,6 @@ export var Checkbox = createComponent('input')({
             label && (React.createElement(LabelText, { htmlFor: inputId, disabled: disabled, variant: variant, paddingLeft: checkboxLabelDistance }, label))));
     },
     subComponents: {
-        ErrorType: ErrorType,
+        ErrorType,
     },
 });

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

@@ -1,39 +1,17 @@
-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 React from 'react';
 import { createContainer, createElemPropsHook, createSubcomponent, } from '@workday/canvas-kit-react/common';
 import { Box } from '@workday/canvas-kit-react/layout';
 import { useListModel } from './useListModel';
 import { useListRenderItems } from './useListRenderItem';
 import { useListItemRegister } from './useListItemRegister';
-export var ListBoxItem = createSubcomponent('li')({
+export const ListBoxItem = createSubcomponent('li')({
     displayName: 'Item',
     modelHook: useListModel,
     elemPropsHook: useListItemRegister,
-})(function (elemProps, Element) {
-    return React.createElement(Box, __assign({ as: Element }, elemProps));
+})((elemProps, Element) => {
+    return React.createElement(Box, Object.assign({ as: Element }, elemProps));
 });
-export var useListBox = createElemPropsHook(useListModel)(function (model) {
+export const useListBox = createElemPropsHook(useListModel)(model => {
     return {
         style: {
             position: 'relative',
@@ -58,7 +36,7 @@ export var useListBox = createElemPropsHook(useListModel)(function (model) {
  * - Inner Box: The element responsible for the virtual container. Height is controlled by the model
  *   and cannot be changed by the developer. All props and ref will be spread to this element.
  */
-export var ListBox = createContainer('ul')({
+export const ListBox = createContainer('ul')({
     displayName: 'ListBox',
     modelHook: useListModel,
     elemPropsHook: useListBox,
@@ -74,9 +52,8 @@ export var ListBox = createContainer('ul')({
          */
         Item: ListBoxItem,
     },
-})(function (_a, Element, model) {
-    var height = _a.height, maxHeight = _a.maxHeight, elemProps = __rest(_a, ["height", "maxHeight"]);
+})(({ height, maxHeight, ...elemProps }, Element, model) => {
     // TODO figure out what style props should go to which `Box`
     return (React.createElement(Box, { ref: model.state.containerRef, height: height || model.state.isVirtualized ? model.state.UNSTABLE_virtual.totalSize : undefined, maxHeight: maxHeight, overflowY: model.state.orientation === 'vertical' ? 'auto' : undefined },
-        React.createElement(Box, __assign({ as: Element }, elemProps), useListRenderItems(model, elemProps.children))));
+        React.createElement(Box, Object.assign({ as: Element }, elemProps), useListRenderItems(model, elemProps.children))));
 });

package/dist/es6/collection/lib/react-virtual.js

@@ -1,5 +1,5 @@
 // retype interfaces
 // delete when `react-virtual` accepts this PR: https://github.com/TanStack/react-virtual/pull/277
 import { useVirtual as useVirtualReactVirtual, defaultRangeExtractor } from 'react-virtual';
-var useVirtual = useVirtualReactVirtual;
+const useVirtual = useVirtualReactVirtual;
 export { defaultRangeExtractor, useVirtual };

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

@@ -1,22 +1,11 @@
-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 { useVirtual } from './react-virtual';
 import { useUniqueId, assert, createModelHook } from '@workday/canvas-kit-react/common';
-export var defaultGetId = function (item) {
+export const defaultGetId = (item) => {
     assert(item.id, 'A list item must have an `id` field or a `getId` function defined');
     return item.id;
 };
-export var defaultGetTextValue = function (item) {
+export const defaultGetTextValue = (item) => {
     return item.text || '';
 };
 // interface Collection<T> {
@@ -51,13 +40,14 @@ export var defaultGetTextValue = function (item) {
 //   }
 // }
 // force Typescript to use `Generic` as a symbol
-var genericDefaultConfig = {
+const genericDefaultConfig = {
     items: [],
 };
-export var useBaseListModel = createModelHook({
-    defaultConfig: __assign(__assign({}, genericDefaultConfig), { 
+export const useBaseListModel = createModelHook({
+    defaultConfig: {
+        ...genericDefaultConfig,
         /** IDREF of the list. Children ids can be derived from this id */
-        id: '', 
+        id: '',
         /**
          * Optional function to return an id of an item. If not provided, the default function will return
          * the `id` property from the object of each item. If you did not provide `items`, do not override
@@ -65,72 +55,78 @@ export var useBaseListModel = createModelHook({
          * will create an internal array of items where `id` is the only property and the default `getId`
          * will return the desired result.
          */
-        getId: function (item) { return item.id; }, getTextValue: function (item) { return (item.text || ''); }, 
+        getId: (item) => item.id,
+        getTextValue: (item) => (item.text || ''),
         /**
          * Array of all ids which are currently disabled. This is used for navigation to skip over items
          * which are not focusable.
          */
-        nonInteractiveIds: [], 
+        nonInteractiveIds: [],
         /**
          * The orientation of a list of items. Values are either `vertical` or `horizontal`. This value will
          * effect which ids activate progression through a list. For example, `horizontal` will activate with
          * left and right arrows while `vertical` will activate with up and down arrows.
          * @default 'vertical'
          */
-        orientation: 'vertical', 
+        orientation: 'vertical',
         /**
          * Best guess to the default item height for virtualization. Getting this number correct
          * avoids a rerender while the list is initializing.
          *
          * @default 50
          */
-        defaultItemHeight: 50, shouldVirtualize: true }),
-})(function (config) {
+        defaultItemHeight: 50,
+        shouldVirtualize: true,
+    },
+})(config => {
     var _a;
-    var id = useUniqueId(config.id);
-    var getId = config.getId || defaultGetId;
-    var getTextValue = config.getTextValue || defaultGetTextValue;
-    var orientation = React.useState(config.orientation || 'vertical')[0];
-    var _b = React.useState(config.defaultItemHeight), UNSTABLE_defaultItemHeight = _b[0], setDefaultItemHeight = _b[1];
-    var isVirtualized = config.shouldVirtualize && !!((_a = config.items) === null || _a === void 0 ? void 0 : _a.length);
-    var indexRef = React.useRef(0);
-    var containerRef = React.useRef(null);
-    var items = React.useMemo(function () {
-        return (config.items || []).map(function (item, index) {
-            return {
-                id: getId(item),
-                index: index,
-                value: item,
-                textValue: getTextValue(item),
-            };
-        });
-    }, [config.items, getId, getTextValue]);
-    var _c = React.useState([]), staticItems = _c[0], setStaticItems = _c[1];
-    var UNSTABLE_virtual = useVirtual({
+    const id = useUniqueId(config.id);
+    const getId = config.getId || defaultGetId;
+    const getTextValue = config.getTextValue || defaultGetTextValue;
+    const [orientation] = React.useState(config.orientation || 'vertical');
+    const [UNSTABLE_defaultItemHeight, setDefaultItemHeight] = React.useState(config.defaultItemHeight);
+    const isVirtualized = config.shouldVirtualize && !!((_a = config.items) === null || _a === void 0 ? void 0 : _a.length);
+    const indexRef = React.useRef(0);
+    const containerRef = React.useRef(null);
+    const items = React.useMemo(() => (config.items || []).map((item, index) => {
+        return {
+            id: getId(item),
+            index,
+            value: item,
+            textValue: getTextValue(item),
+        };
+    }), [config.items, getId, getTextValue]);
+    const [staticItems, setStaticItems] = React.useState([]);
+    const UNSTABLE_virtual = useVirtual({
         size: items.length,
         parentRef: containerRef,
-        estimateSize: React.useCallback(function () { return UNSTABLE_defaultItemHeight; }, [UNSTABLE_defaultItemHeight]),
+        estimateSize: React.useCallback(() => UNSTABLE_defaultItemHeight, [UNSTABLE_defaultItemHeight]),
         horizontal: config.orientation === 'horizontal',
         overscan: 3, // overscan of 3 helps rapid navigation
     });
     // Force Typescript to recognize the `Generic` symbol
-    var genericState = {
+    const genericState = {
         items: items.length ? items : staticItems,
     };
-    var state = __assign(__assign({}, genericState), { UNSTABLE_virtual: UNSTABLE_virtual,
-        UNSTABLE_defaultItemHeight: UNSTABLE_defaultItemHeight,
-        containerRef: containerRef,
-        id: id,
-        orientation: orientation,
-        indexRef: indexRef, nonInteractiveIds: config.nonInteractiveIds || [], isVirtualized: isVirtualized });
-    var events = {
+    const state = {
+        ...genericState,
+        UNSTABLE_virtual,
+        UNSTABLE_defaultItemHeight,
+        containerRef,
+        id,
+        orientation,
+        indexRef,
+        nonInteractiveIds: config.nonInteractiveIds || [],
+        isVirtualized,
+    };
+    const 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. This event is only called for static rendering.
          */
-        registerItem: function (data) {
+        registerItem(data) {
             indexRef.current++;
-            setStaticItems(function (items) {
+            setStaticItems(items => {
                 return items.concat({
                     id: getId(data.item),
                     value: data.item,
@@ -143,11 +139,11 @@ export var useBaseListModel = createModelHook({
          * Unregister an item by its identifier. This should be called when the component is unmounted.
          * This event is only called for static rendering.
          */
-        unregisterItem: function (data) {
-            setStaticItems(function (items) {
+        unregisterItem(data) {
+            setStaticItems(items => {
                 // this extra `if` ensures reference stability for no-ops
-                if (items.find(function (item) { return getId(item.value) === data.id; })) {
-                    return items.filter(function (item) { return getId(item.value) !== data.id; });
+                if (items.find(item => getId(item.value) === data.id)) {
+                    return items.filter(item => getId(item.value) !== data.id);
                 }
                 else {
                     return items;
@@ -163,9 +159,9 @@ export var useBaseListModel = createModelHook({
          * "detached" since the browser recalculates scroll bar position while the overflow container is
          * updated.
          */
-        updateItemHeight: function (data) {
+        updateItemHeight(data) {
             setDefaultItemHeight(data.value);
         },
     };
-    return { state: state, events: events, getId: getId };
+    return { state, events, getId };
 });