@workday/canvas-kit-labs-react 7.1.5 → 7.2.0-427-next.2

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.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 = __importDefault(require("./AutocompleteList"));
-var Status_1 = __importDefault(require("./Status"));
-var Container = common_1.styled('div')({
+exports.Combobox = exports.getTextFromElement = exports.getOptionId = exports.listBoxIdPart = void 0;
+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,47 +51,42 @@ 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) {
-        if (child == null || typeof child === 'boolean' || child === {}) {
+const getTextFromElement = (children) => {
+    let text = '';
+    react_1.default.Children.map(children, child => {
+        if (child == null || typeof child === 'boolean') {
             text += '';
         }
         else if (typeof child === 'string' || typeof child === 'number') {
@@ -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,29 +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;
-            if (target === null) {
-                // IE11 swaps related and active target before it fires the blur event
-                target = document.activeElement;
-            }
+            const target = event.relatedTarget;
             if (target && comboboxRef.current.contains(target)) {
                 return;
             }
@@ -257,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();
@@ -306,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;
@@ -317,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 = { 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,
@@ -352,22 +319,23 @@ 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" })),
             showingAutocomplete && autocompleteItems && (react_1.default.createElement(MenuContainer, { padding: tokens_1.space.zero, depth: 3 },
                 react_1.default.createElement(card_1.Card.Body, null,
-                    react_1.default.createElement(AutocompleteList_1.default, { comboboxId: componentId, autocompleteItems: autocompleteItems, selectedIndex: selectedAutocompleteIndex, handleAutocompleteClick: handleAutocompleteClick, labelId: formLabelId, showGroupText: showGroupText }))))),
-        react_1.default.createElement(Status_1.default, { announcementText: announcementText })));
+                    react_1.default.createElement(AutocompleteList_1.AutocompleteList, { comboboxId: componentId, autocompleteItems: autocompleteItems, selectedIndex: selectedAutocompleteIndex, handleAutocompleteClick: handleAutocompleteClick, labelId: formLabelId, showGroupText: showGroupText }))))),
+        react_1.default.createElement(Status_1.Status, { announcementText: announcementText })));
 };
-exports.default = Combobox;
+exports.Combobox = Combobox;

package/dist/commonjs/combobox/lib/Status.d.ts

@@ -6,6 +6,5 @@ export interface StatusProps {
     expireMilliseconds?: number;
     announcementText?: string;
 }
-declare const Status: ({ ariaLive, role, ariaRelevant, expireMilliseconds, announcementText, ariaAtomic, }: StatusProps) => JSX.Element;
-export default Status;
+export declare const Status: ({ ariaLive, role, ariaRelevant, expireMilliseconds, announcementText, ariaAtomic, }: StatusProps) => JSX.Element;
 //# sourceMappingURL=Status.d.ts.map

package/dist/commonjs/combobox/lib/Status.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Status.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/Status.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,QAAQ,GAAG,WAAW,GAAG,KAAK,CAAC;IAC1C,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,aAAa,GAAG,SAAS,GAAG,OAAO,CAAC;IACxE,YAAY,CAAC,EAAE,WAAW,GAAG,gBAAgB,GAAG,KAAK,GAAG,UAAU,GAAG,MAAM,CAAC;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAID,QAAA,MAAM,MAAM,wFAOT,WAAW,gBAuBb,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Status.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/Status.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,QAAQ,GAAG,WAAW,GAAG,KAAK,CAAC;IAC1C,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,aAAa,GAAG,SAAS,GAAG,OAAO,CAAC;IACxE,YAAY,CAAC,EAAE,WAAW,GAAG,gBAAgB,GAAG,KAAK,GAAG,UAAU,GAAG,MAAM,CAAC;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAID,eAAO,MAAM,MAAM,wFAOhB,WAAW,gBAuBb,CAAC"}

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

@@ -22,23 +22,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-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 () {
+exports.Status = void 0;
+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]);
     return (react_1.default.createElement(Container, { "aria-live": ariaLive, role: role, "aria-relevant": ariaRelevant, "aria-atomic": ariaAtomic }, displayText));
 };
-exports.default = Status;
+exports.Status = Status;

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

@@ -1,4 +1,2 @@
 export * from './lib/theming';
-export { ComponentStatesTable } from './lib/storybook-utils/ComponentStatesTable';
-export { permutateProps } from './lib/storybook-utils/permutateProps';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../common/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAC,oBAAoB,EAAC,MAAM,4CAA4C,CAAC;AAChF,OAAO,EAAC,cAAc,EAAC,MAAM,sCAAsC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../common/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/dist/commonjs/common/index.js

@@ -10,9 +10,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.permutateProps = exports.ComponentStatesTable = void 0;
 __exportStar(require("./lib/theming"), exports);
-var ComponentStatesTable_1 = require("./lib/storybook-utils/ComponentStatesTable");
-Object.defineProperty(exports, "ComponentStatesTable", { enumerable: true, get: function () { return ComponentStatesTable_1.ComponentStatesTable; } });
-var permutateProps_1 = require("./lib/storybook-utils/permutateProps");
-Object.defineProperty(exports, "permutateProps", { enumerable: true, get: function () { return permutateProps_1.permutateProps; } });

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).
  *

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

@@ -1 +1 @@
-{"version":3,"file":"useThemeRTL.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/useThemeRTL.ts"],"names":[],"mappings":"AAMA,OAAO,EAAC,aAAa,EAAC,MAAM,kCAAkC,CAAC;AAI/D,oBAAY,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AAW5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,WAAW;6BAMD,aAAa,EAAE;;EAYxC"}
+{"version":3,"file":"useThemeRTL.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/useThemeRTL.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,aAAa,EAAC,MAAM,kCAAkC,CAAC;AAI/D,oBAAY,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AAc5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,WAAW;6BAMD,aAAa,EAAE;;EAYxC"}