@workday/canvas-kit-labs-react 8.0.0-alpha.253-next.22 → 8.0.0-alpha.428-next.2

package/common/lib/theming/index.ts

@@ -1,2 +1 @@
 export * from './useThemeRTL';
-export * from './useThemedRing';

package/common/lib/theming/useThemeRTL.ts

@@ -18,6 +18,9 @@ const getConvertedStyles = (
 };
 
 /**
+ * @deprecated Now that IE11 is no longer supported, we encourage consumers to use [CSS logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties)
+ *
+ *
  * A helpful hook for supporting bidirectional styles.
  * * Read below for more detail or [view the docs](https://github.com/Workday/canvas-kit/blob/master/modules/labs-react/common/README.md#useThemeRTL).
  *

package/dist/commonjs/combobox/lib/AutocompleteList.js

@@ -1,15 +1,4 @@
 "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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -29,55 +18,48 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __spreadArrays = (this && this.__spreadArrays) || function () {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AutocompleteList = void 0;
-var react_1 = __importStar(require("react"));
-var styled_1 = __importDefault(require("@emotion/styled"));
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var common_1 = require("@workday/canvas-kit-react/common");
-var Combobox_1 = require("./Combobox");
-var Autocomplete = styled_1.default('ul')({
+const react_1 = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const common_1 = require("@workday/canvas-kit-react/common");
+const Combobox_1 = require("./Combobox");
+const Autocomplete = styled_1.default('ul')({
     margin: 0,
     maxHeight: 200,
     boxSizing: 'border-box',
     overflowY: 'auto',
-    padding: tokens_1.space.xxs + " 0",
+    padding: `${tokens_1.space.xxs} 0`,
 });
-var AccessibleHide = styled_1.default('span')(common_1.accessibleHide);
-var AutocompleteList = function (_a) {
-    var autocompleteItems = _a.autocompleteItems, comboboxId = _a.comboboxId, selectedIndex = _a.selectedIndex, handleAutocompleteClick = _a.handleAutocompleteClick, labelId = _a.labelId, showGroupText = _a.showGroupText;
-    var randomComponentId = react_1.useState(common_1.generateUniqueId)[0]; // https://codesandbox.io/s/p2ndq
-    var componentId = comboboxId || randomComponentId;
-    var listBoxProps = {
+const AccessibleHide = styled_1.default('span')(common_1.accessibleHide);
+const AutocompleteList = ({ autocompleteItems, comboboxId, selectedIndex, handleAutocompleteClick, labelId, showGroupText, }) => {
+    const [randomComponentId] = react_1.useState(common_1.generateUniqueId); // https://codesandbox.io/s/p2ndq
+    const componentId = comboboxId || randomComponentId;
+    const listBoxProps = {
         role: 'listbox',
-        id: componentId + "-" + Combobox_1.listBoxIdPart,
+        id: `${componentId}-${Combobox_1.listBoxIdPart}`,
         'aria-labelledby': labelId,
     };
-    var createListItem = function (listboxItem, itemIndex, groupMessage) {
-        var children = __spreadArrays([
-            react_1.default.createElement(AccessibleHide, { key: "group-message-" + itemIndex }, groupMessage)
-        ], react_1.default.Children.toArray(listboxItem.props.children));
+    const createListItem = (listboxItem, itemIndex, groupMessage) => {
+        const children = [
+            react_1.default.createElement(AccessibleHide, { key: `group-message-${itemIndex}` }, groupMessage),
+            ...react_1.default.Children.toArray(listboxItem.props.children),
+        ];
         return (react_1.default.createElement(react_1.Fragment, { key: itemIndex }, react_1.default.cloneElement(listboxItem, {
             children: children,
             id: Combobox_1.getOptionId(componentId, itemIndex),
             role: 'option',
             isFocused: selectedIndex === itemIndex,
             'aria-selected': selectedIndex === itemIndex ? true : undefined,
-            onMouseDown: function (event) {
+            onMouseDown: (event) => {
                 // prevent focus from shifting away from the the combobox
                 event.preventDefault();
             },
-            onClick: function (event) {
+            onClick: (event) => {
                 event.preventDefault();
                 handleAutocompleteClick(event, listboxItem.props);
             },
@@ -87,30 +69,27 @@ var AutocompleteList = function (_a) {
         return null;
     }
     else if (autocompleteItems[0].hasOwnProperty('header')) {
-        var itemIndex_1 = 0;
-        return (react_1.default.createElement(Autocomplete, __assign({}, listBoxProps), autocompleteItems.map(function (_a, groupIndex) {
-            var header = _a.header, items = _a.items;
-            var groupLabel = "itemGroup-" + componentId + "-" + groupIndex;
+        let itemIndex = 0;
+        return (react_1.default.createElement(Autocomplete, Object.assign({}, listBoxProps), autocompleteItems.map(({ header, items }, groupIndex) => {
+            const groupLabel = `itemGroup-${componentId}-${groupIndex}`;
             return (react_1.default.createElement(react_1.Fragment, { key: groupLabel },
                 react_1.default.cloneElement(header, {
                     role: 'presentation',
-                    style: { pointerEvents: "none" },
+                    style: { pointerEvents: `none` },
                 }),
-                items.map(function (listboxItem) {
-                    var headerName = Combobox_1.getTextFromElement(header);
-                    var groupMessage = showGroupText
-                        ? "Entering group " + headerName + ", with " + items.length + " options."
+                items.map((listboxItem) => {
+                    const headerName = Combobox_1.getTextFromElement(header);
+                    const groupMessage = showGroupText
+                        ? `Entering group ${headerName}, with ${items.length} options.`
                         : undefined;
-                    var item = createListItem(listboxItem, itemIndex_1, groupMessage);
-                    itemIndex_1++;
+                    const item = createListItem(listboxItem, itemIndex, groupMessage);
+                    itemIndex++;
                     return item;
                 })));
         })));
     }
     else {
-        return (react_1.default.createElement(Autocomplete, __assign({}, listBoxProps), autocompleteItems.map(function (listboxItem, index) {
-            return createListItem(listboxItem, index);
-        })));
+        return (react_1.default.createElement(Autocomplete, Object.assign({}, listBoxProps), autocompleteItems.map((listboxItem, index) => createListItem(listboxItem, index))));
     }
 };
 exports.AutocompleteList = AutocompleteList;

package/dist/commonjs/combobox/lib/Combobox.js

@@ -1,15 +1,4 @@
 "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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -29,46 +18,32 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-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;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Combobox = exports.getTextFromElement = exports.getOptionId = exports.listBoxIdPart = void 0;
-var react_1 = __importStar(require("react"));
-var react_2 = require("@emotion/react");
-var common_1 = require("@workday/canvas-kit-react/common");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var card_1 = require("@workday/canvas-kit-react/card");
-var button_1 = require("@workday/canvas-kit-react/button");
-var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
-var lodash_flatten_1 = __importDefault(require("lodash.flatten"));
-var AutocompleteList_1 = require("./AutocompleteList");
-var Status_1 = require("./Status");
-var Container = common_1.styled('div')({
+const react_1 = __importStar(require("react"));
+const react_2 = require("@emotion/react");
+const common_1 = require("@workday/canvas-kit-react/common");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const card_1 = require("@workday/canvas-kit-react/card");
+const button_1 = require("@workday/canvas-kit-react/button");
+const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
+const lodash_flatten_1 = __importDefault(require("lodash.flatten"));
+const AutocompleteList_1 = require("./AutocompleteList");
+const Status_1 = require("./Status");
+const Container = common_1.styled('div')({
     display: 'inline-block',
-}, function (_a) {
-    var grow = _a.grow;
-    return ({
-        width: grow ? '100%' : 'auto',
-    });
-});
-var InputContainer = common_1.styled('div')({
-    display: "flex",
-    alignItems: "center",
+}, ({ grow }) => ({
+    width: grow ? '100%' : 'auto',
+}));
+const InputContainer = common_1.styled('div')({
+    display: `flex`,
+    alignItems: `center`,
     position: 'relative',
 });
-var fadeInKeyframes = react_2.keyframes({
+const fadeInKeyframes = react_2.keyframes({
     '0%': {
         opacity: 0,
     },
@@ -76,46 +51,41 @@ var fadeInKeyframes = react_2.keyframes({
         opacity: 1,
     },
 });
-var MenuContainer = common_1.styled(card_1.Card)({
+const MenuContainer = common_1.styled(card_1.Card)({
     position: 'absolute',
     zIndex: 1,
     left: 0,
     top: '100%',
     borderRadius: tokens_1.borderRadius.m,
     background: tokens_1.commonColors.background,
-    border: "none",
-    marginTop: "-" + tokens_1.borderRadius.m,
+    border: `none`,
+    marginTop: `-${tokens_1.borderRadius.m}`,
     width: '100%',
     minWidth: 0,
-    animation: fadeInKeyframes + " 200ms ease-out",
+    animation: `${fadeInKeyframes} 200ms ease-out`,
     maxHeight: 200,
     overflow: 'hidden',
 });
-var ResetButton = common_1.styled(button_1.TertiaryButton)({
+const ResetButton = common_1.styled(button_1.TertiaryButton)({
     position: 'absolute',
-    margin: "auto " + tokens_1.space.xxxs,
+    margin: `auto ${tokens_1.space.xxxs}`,
     top: 0,
     bottom: 0,
     right: 0,
     padding: 0,
     zIndex: 2,
     transition: 'opacity 120ms',
-}, function (_a) {
-    var shouldShow = _a.shouldShow;
-    return ({
-        visibility: shouldShow ? 'visible' : 'hidden',
-        opacity: shouldShow ? 1 : 0,
-    });
-});
-exports.listBoxIdPart = "listbox";
-var optionIdPart = "option";
-var getOptionId = function (baseId, index) {
-    return baseId + "-" + optionIdPart + "-" + index;
-};
+}, ({ shouldShow }) => ({
+    visibility: shouldShow ? 'visible' : 'hidden',
+    opacity: shouldShow ? 1 : 0,
+}));
+exports.listBoxIdPart = `listbox`;
+const optionIdPart = `option`;
+const getOptionId = (baseId, index) => `${baseId}-${optionIdPart}-${index}`;
 exports.getOptionId = getOptionId;
-var getTextFromElement = function (children) {
-    var text = '';
-    react_1.default.Children.map(children, function (child) {
+const getTextFromElement = (children) => {
+    let text = '';
+    react_1.default.Children.map(children, child => {
         if (child == null || typeof child === 'boolean') {
             text += '';
         }
@@ -132,89 +102,88 @@ var getTextFromElement = function (children) {
     return text;
 };
 exports.getTextFromElement = getTextFromElement;
-var buildStatusString = function (listCount) {
-    return "There " + (listCount === 1 ? 'is' : 'are') + " " + listCount + " suggestion" + (listCount === 1 ? '' : 's') + ".";
+const buildStatusString = (listCount) => {
+    return `There ${listCount === 1 ? 'is' : 'are'} ${listCount} suggestion${listCount === 1 ? '' : 's'}.`;
 };
-var isValidSingleChild = function (child) {
+const isValidSingleChild = (child) => {
     return react_1.default.isValidElement(child) && react_1.default.Children.only(child);
 };
-var Combobox = function (_a) {
-    var autocompleteItems = _a.autocompleteItems, children = _a.children, grow = _a.grow, initialValue = _a.initialValue, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, showClearButton = _a.showClearButton, _b = _a.clearButtonVariant, clearButtonVariant = _b === void 0 ? undefined : _b, _c = _a.clearButtonAriaLabel, clearButtonAriaLabel = _c === void 0 ? "Reset Search Input" : _c, labelId = _a.labelId, _d = _a.getStatusText, getStatusText = _d === void 0 ? buildStatusString : _d, id = _a.id, elemProps = __rest(_a, ["autocompleteItems", "children", "grow", "initialValue", "onChange", "onFocus", "onBlur", "showClearButton", "clearButtonVariant", "clearButtonAriaLabel", "labelId", "getStatusText", "id"]);
-    var _e = react_1.useState(false), isOpened = _e[0], setIsOpened = _e[1];
-    var _f = react_1.useState(''), value = _f[0], _setValue = _f[1]; // Don't call _setValue directly instead call setInputValue to make sure onChange fires correctly
-    var _g = react_1.useState(false), showingAutocomplete = _g[0], setShowingAutocomplete = _g[1];
-    var _h = react_1.useState(null), selectedAutocompleteIndex = _h[0], setSelectedAutocompleteIndex = _h[1];
-    var _j = react_1.useState([]), interactiveAutocompleteItems = _j[0], setInteractiveAutocompleteItems = _j[1];
-    var _k = react_1.useState(''), announcementText = _k[0], setAnnouncementText = _k[1];
+const Combobox = ({ autocompleteItems, children, grow, initialValue, onChange, onFocus, onBlur, showClearButton, clearButtonVariant = undefined, clearButtonAriaLabel = `Reset Search Input`, labelId, getStatusText = buildStatusString, id, ...elemProps }) => {
+    const [isOpened, setIsOpened] = react_1.useState(false);
+    const [value, _setValue] = react_1.useState(''); // Don't call _setValue directly instead call setInputValue to make sure onChange fires correctly
+    const [showingAutocomplete, setShowingAutocomplete] = react_1.useState(false);
+    const [selectedAutocompleteIndex, setSelectedAutocompleteIndex] = react_1.useState(null);
+    const [interactiveAutocompleteItems, setInteractiveAutocompleteItems] = react_1.useState([]);
+    const [announcementText, setAnnouncementText] = react_1.useState('');
     // Create a ref to the soon-to-be-created TextInput clone for internal use.
     // Use useForkRef to combine it with the ref already assigned to the original
     // TextInput (if it exists) to create a single callback ref which can be
     // forwarded to the TextInput clone.
-    var inputRef = react_1.useRef(null);
+    const inputRef = react_1.useRef(null);
     // We need access to the original TextInput's ref _property_ (not prop) so we
     // can combine it with the internal inputRef using useForkRef. ref isn't
     // listed in the ReactElement interface, but it's there, so we cast children
     // to satisfy TS.
-    var elementRef = common_1.useForkRef(children.ref, inputRef);
-    var comboboxRef = react_1.useRef(null);
-    var randomComponentId = common_1.useUniqueId();
-    var randomLabelId = common_1.useUniqueId();
-    var componentId = id || randomComponentId;
-    var formLabelId = labelId || randomLabelId;
-    var _l = react_1.useState(false), showGroupText = _l[0], setShowGroupText = _l[1];
+    const elementRef = common_1.useForkRef(children.ref, inputRef);
+    const comboboxRef = react_1.useRef(null);
+    const randomComponentId = common_1.useUniqueId();
+    const randomLabelId = common_1.useUniqueId();
+    const componentId = id || randomComponentId;
+    const formLabelId = labelId || randomLabelId;
+    const [showGroupText, setShowGroupText] = react_1.useState(false);
     // We're using LayoutEffect here because of an issue with the Synthetic event system and typing a key
     // after the listbox has been closed. Somehow the key is ignored unless we use `useLayoutEffect`
-    react_1.useLayoutEffect(function () {
-        var shouldShow = interactiveAutocompleteItems.length > 0 && isOpened;
+    react_1.useLayoutEffect(() => {
+        const shouldShow = interactiveAutocompleteItems.length > 0 && isOpened;
         setShowingAutocomplete(shouldShow);
         if (shouldShow) {
             setAnnouncementText(getStatusText(interactiveAutocompleteItems.length));
         }
     }, [getStatusText, interactiveAutocompleteItems, isOpened]);
     // Used to set the position of the reset button and the padding direction inside the input container
-    var isRTL = common_1.useIsRTL();
-    var setInputValue = react_1.useCallback(function (newValue) {
+    const isRTL = common_1.useIsRTL();
+    const setInputValue = react_1.useCallback((newValue) => {
         _setValue(newValue);
-        var inputDomElement = inputRef.current;
+        const inputDomElement = inputRef.current;
         // Changing value prop programmatically doesn't fire an Synthetic event or trigger native onChange.
         // We can not just update .value= in setState because React library overrides input value setter
         // but we can call the function directly on the input as context.
         // This will cause onChange events to fire no matter how value is updated.
         if (inputDomElement) {
-            var nativeInputValue = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(inputDomElement), 'value');
+            const nativeInputValue = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(inputDomElement), 'value');
             if (nativeInputValue && nativeInputValue.set) {
                 nativeInputValue.set.call(inputDomElement, newValue);
             }
-            var event_1;
+            let event;
             if (typeof Event === 'function') {
                 // modern browsers
-                event_1 = new Event('input', { bubbles: true });
+                event = new Event('input', { bubbles: true });
             }
             else {
                 // IE 11
-                event_1 = document.createEvent('Event');
-                event_1.initEvent('input', true, true);
+                event = document.createEvent('Event');
+                event.initEvent('input', true, true);
             }
-            inputDomElement.dispatchEvent(event_1);
+            inputDomElement.dispatchEvent(event);
         }
     }, [inputRef]);
-    react_1.useEffect(function () {
+    react_1.useEffect(() => {
         if (initialValue !== null && initialValue !== undefined) {
             setInputValue(initialValue);
         }
     }, [initialValue, setInputValue]);
-    react_1.useEffect(function () {
-        var getInteractiveAutocompleteItems = function () {
+    react_1.useEffect(() => {
+        const getInteractiveAutocompleteItems = () => {
             if (autocompleteItems &&
                 autocompleteItems.length &&
                 autocompleteItems[0].hasOwnProperty('header')) {
-                return lodash_flatten_1.default(autocompleteItems.map(function (group) { return group.items; }));
+                return lodash_flatten_1.default(autocompleteItems.map(group => group.items));
             }
             return autocompleteItems || [];
         };
         setInteractiveAutocompleteItems(getInteractiveAutocompleteItems());
     }, [autocompleteItems]);
-    var handleAutocompleteClick = function (event, menuItemProps) {
+    const handleAutocompleteClick = (event, menuItemProps) => {
         if (menuItemProps.isDisabled) {
             return;
         }
@@ -225,25 +194,25 @@ var Combobox = function (_a) {
             menuItemProps.onClick(event);
         }
     };
-    var focusInput = function () {
+    const focusInput = () => {
         if (inputRef.current) {
             inputRef.current.focus();
         }
     };
-    var handleClick = function (event) {
+    const handleClick = (event) => {
         if (!showingAutocomplete) {
             setShowingAutocomplete(true);
         }
     };
-    var handleFocus = function (event) {
+    const handleFocus = (event) => {
         setIsOpened(true);
         if (onFocus) {
             onFocus(event);
         }
     };
-    var handleBlur = function (event) {
+    const handleBlur = (event) => {
         if (comboboxRef.current) {
-            var target = event.relatedTarget;
+            const target = event.relatedTarget;
             if (target && comboboxRef.current.contains(target)) {
                 return;
             }
@@ -253,45 +222,45 @@ var Combobox = function (_a) {
             onBlur(event);
         }
     };
-    var resetSearchInput = function () {
+    const resetSearchInput = () => {
         setInputValue('');
         focusInput();
     };
-    var getGroupIndex = function (itemIndex) {
+    const getGroupIndex = (itemIndex) => {
         if (itemIndex != null &&
             autocompleteItems &&
             autocompleteItems.length &&
             autocompleteItems[0].hasOwnProperty('header')) {
-            var count_1 = 0;
-            return autocompleteItems.findIndex(function (groups) {
-                count_1 += groups.items.length;
-                return count_1 > itemIndex;
+            let count = 0;
+            return autocompleteItems.findIndex(groups => {
+                count += groups.items.length;
+                return count > itemIndex;
             });
         }
         else {
             return -1;
         }
     };
-    var handleKeyboardShortcuts = function (event) {
+    const handleKeyboardShortcuts = (event) => {
         if (event.ctrlKey || event.altKey || event.metaKey || !interactiveAutocompleteItems.length) {
             return;
         }
-        var autoCompleteItemCount = interactiveAutocompleteItems.length;
-        var firstItem = 0;
-        var lastItem = autoCompleteItemCount - 1;
-        var nextIndex = null;
+        const autoCompleteItemCount = interactiveAutocompleteItems.length;
+        const firstItem = 0;
+        const lastItem = autoCompleteItemCount - 1;
+        let nextIndex = null;
         setIsOpened(true);
         switch (event.key) {
             case 'ArrowUp':
             case 'Up': // IE/Edge specific value
-                var upIndex = selectedAutocompleteIndex !== null ? selectedAutocompleteIndex - 1 : lastItem;
+                const upIndex = selectedAutocompleteIndex !== null ? selectedAutocompleteIndex - 1 : lastItem;
                 nextIndex = upIndex < 0 ? lastItem : upIndex;
                 event.stopPropagation();
                 event.preventDefault();
                 break;
             case 'ArrowDown':
             case 'Down': // IE/Edge specific value
-                var downIndex = selectedAutocompleteIndex !== null ? selectedAutocompleteIndex + 1 : firstItem;
+                const downIndex = selectedAutocompleteIndex !== null ? selectedAutocompleteIndex + 1 : firstItem;
                 nextIndex = downIndex >= autoCompleteItemCount ? firstItem : downIndex;
                 event.stopPropagation();
                 event.preventDefault();
@@ -302,7 +271,7 @@ var Combobox = function (_a) {
                 break;
             case 'Enter':
                 if (selectedAutocompleteIndex != null) {
-                    var item = interactiveAutocompleteItems[selectedAutocompleteIndex];
+                    const item = interactiveAutocompleteItems[selectedAutocompleteIndex];
                     handleAutocompleteClick(event, item.props);
                     if (item.props.isDisabled) {
                         nextIndex = selectedAutocompleteIndex;
@@ -313,25 +282,27 @@ var Combobox = function (_a) {
                 break;
             default:
         }
-        var lastGroupIndex = getGroupIndex(selectedAutocompleteIndex);
-        var nextGroupIndex = getGroupIndex(nextIndex);
+        const lastGroupIndex = getGroupIndex(selectedAutocompleteIndex);
+        const nextGroupIndex = getGroupIndex(nextIndex);
         setShowGroupText(lastGroupIndex !== nextGroupIndex);
         setSelectedAutocompleteIndex(nextIndex);
     };
-    var handleSearchInputChange = function (event) {
+    const handleSearchInputChange = (event) => {
         if (onChange) {
             onChange(event);
         }
         _setValue(event.target.value); // Calling set value directly only for on change event
     };
-    var renderChildren = function (inputElement) {
-        var _a;
-        var cssOverride = { ':focus': { zIndex: 2 } };
+    const renderChildren = (inputElement) => {
+        let cssOverride = { ':focus': { zIndex: 2 } };
         if (showClearButton) {
-            var paddingDirection = isRTL ? 'paddingLeft' : 'paddingRight';
-            cssOverride = __assign(__assign({}, cssOverride), (_a = {}, _a[paddingDirection] = tokens_1.space.xl, _a));
+            const paddingDirection = isRTL ? 'paddingLeft' : 'paddingRight';
+            cssOverride = {
+                ...cssOverride,
+                [paddingDirection]: tokens_1.space.xl,
+            };
         }
-        var newTextInputProps = {
+        const newTextInputProps = {
             type: 'text',
             id: componentId,
             grow: grow,
@@ -348,16 +319,17 @@ var Combobox = function (_a) {
             onBlur: handleBlur,
             css: cssOverride,
             role: 'combobox',
-            'aria-owns': showingAutocomplete ? componentId + "-" + exports.listBoxIdPart : undefined,
+            'aria-owns': showingAutocomplete ? `${componentId}-${exports.listBoxIdPart}` : undefined,
             'aria-haspopup': true,
             'aria-expanded': showingAutocomplete,
         };
-        var cloneElement = function (element, props) {
-            return react_2.jsx(element.type, __assign(__assign({}, element.props), props));
-        };
-        return cloneElement(inputElement, __assign(__assign({}, inputElement.props), newTextInputProps));
+        const cloneElement = (element, props) => react_2.jsx(element.type, {
+            ...element.props,
+            ...props,
+        });
+        return cloneElement(inputElement, { ...inputElement.props, ...newTextInputProps });
     };
-    return (react_1.default.createElement(Container, __assign({ grow: grow }, elemProps),
+    return (react_1.default.createElement(Container, Object.assign({ grow: grow }, elemProps),
         react_1.default.createElement(InputContainer, { ref: comboboxRef },
             isValidSingleChild(children) && react_1.default.Children.map(children, renderChildren),
             showClearButton && (react_1.default.createElement(ResetButton, { shouldShow: !!value, "aria-label": clearButtonAriaLabel, icon: canvas_system_icons_web_1.xSmallIcon, variant: clearButtonVariant, onClick: resetSearchInput, onBlur: handleBlur, size: "small", type: "button" })),

package/dist/commonjs/combobox/lib/Status.js

@@ -23,20 +23,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Status = void 0;
-var react_1 = __importStar(require("react"));
-var styled_1 = __importDefault(require("@emotion/styled"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var Container = styled_1.default('div')(common_1.accessibleHide);
-var Status = function (_a) {
-    var _b = _a.ariaLive, ariaLive = _b === void 0 ? 'polite' : _b, _c = _a.role, role = _c === void 0 ? 'status' : _c, _d = _a.ariaRelevant, ariaRelevant = _d === void 0 ? 'additions' : _d, _e = _a.expireMilliseconds, expireMilliseconds = _e === void 0 ? 500 : _e, _f = _a.announcementText, announcementText = _f === void 0 ? '' : _f, ariaAtomic = _a.ariaAtomic;
-    var _g = react_1.useState(announcementText), displayText = _g[0], setDisplayText = _g[1];
-    react_1.useEffect(function () {
+const react_1 = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const Container = styled_1.default('div')(common_1.accessibleHide);
+const Status = ({ ariaLive = 'polite', role = 'status', ariaRelevant = 'additions', expireMilliseconds = 500, announcementText = '', ariaAtomic, }) => {
+    const [displayText, setDisplayText] = react_1.useState(announcementText);
+    react_1.useEffect(() => {
         if (!announcementText) {
             return;
         }
         setDisplayText(announcementText);
-        var clearText = setTimeout(function () { return setDisplayText(''); }, expireMilliseconds);
-        return function () {
+        const clearText = setTimeout(() => setDisplayText(''), expireMilliseconds);
+        return () => {
             clearTimeout(clearText);
         };
     }, [announcementText, expireMilliseconds]);

package/dist/commonjs/common/lib/theming/index.d.ts

@@ -1,3 +1,2 @@
 export * from './useThemeRTL';
-export * from './useThemedRing';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/common/lib/theming/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/dist/commonjs/common/lib/theming/index.js

@@ -11,4 +11,3 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./useThemeRTL"), exports);
-__exportStar(require("./useThemedRing"), exports);

package/dist/commonjs/common/lib/theming/useThemeRTL.d.ts

@@ -1,6 +1,9 @@
 import { CSSProperties } from '@workday/canvas-kit-react/tokens';
 export declare type ComponentStyles = Record<string, CSSProperties>;
 /**
+ * @deprecated Now that IE11 is no longer supported, we encourage consumers to use [CSS logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties)
+ *
+ *
  * A helpful hook for supporting bidirectional styles.
  * * Read below for more detail or [view the docs](https://github.com/Workday/canvas-kit/blob/master/modules/labs-react/common/README.md#useThemeRTL).
  *