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

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

@@ -1,25 +1,3 @@
-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, { useEffect, useLayoutEffect, useRef, useState, useCallback } from 'react';
 import { jsx, keyframes } from '@emotion/react';
 import { useForkRef, styled, useIsRTL, useUniqueId, } from '@workday/canvas-kit-react/common';
@@ -30,20 +8,17 @@ import { xSmallIcon } from '@workday/canvas-system-icons-web';
 import flatten from 'lodash.flatten';
 import { AutocompleteList } from './AutocompleteList';
 import { Status } from './Status';
-var Container = styled('div')({
+const Container = styled('div')({
     display: 'inline-block',
-}, function (_a) {
-    var grow = _a.grow;
-    return ({
-        width: grow ? '100%' : 'auto',
-    });
-});
-var InputContainer = styled('div')({
-    display: "flex",
-    alignItems: "center",
+}, ({ grow }) => ({
+    width: grow ? '100%' : 'auto',
+}));
+const InputContainer = styled('div')({
+    display: `flex`,
+    alignItems: `center`,
     position: 'relative',
 });
-var fadeInKeyframes = keyframes({
+const fadeInKeyframes = keyframes({
     '0%': {
         opacity: 0,
     },
@@ -51,45 +26,40 @@ var fadeInKeyframes = keyframes({
         opacity: 1,
     },
 });
-var MenuContainer = styled(Card)({
+const MenuContainer = styled(Card)({
     position: 'absolute',
     zIndex: 1,
     left: 0,
     top: '100%',
     borderRadius: borderRadius.m,
     background: commonColors.background,
-    border: "none",
-    marginTop: "-" + borderRadius.m,
+    border: `none`,
+    marginTop: `-${borderRadius.m}`,
     width: '100%',
     minWidth: 0,
-    animation: fadeInKeyframes + " 200ms ease-out",
+    animation: `${fadeInKeyframes} 200ms ease-out`,
     maxHeight: 200,
     overflow: 'hidden',
 });
-var ResetButton = styled(TertiaryButton)({
+const ResetButton = styled(TertiaryButton)({
     position: 'absolute',
-    margin: "auto " + space.xxxs,
+    margin: `auto ${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,
-    });
-});
-export var listBoxIdPart = "listbox";
-var optionIdPart = "option";
-export var getOptionId = function (baseId, index) {
-    return baseId + "-" + optionIdPart + "-" + index;
-};
-export var getTextFromElement = function (children) {
-    var text = '';
-    React.Children.map(children, function (child) {
+}, ({ shouldShow }) => ({
+    visibility: shouldShow ? 'visible' : 'hidden',
+    opacity: shouldShow ? 1 : 0,
+}));
+export const listBoxIdPart = `listbox`;
+const optionIdPart = `option`;
+export const getOptionId = (baseId, index) => `${baseId}-${optionIdPart}-${index}`;
+export const getTextFromElement = (children) => {
+    let text = '';
+    React.Children.map(children, child => {
         if (child == null || typeof child === 'boolean') {
             text += '';
         }
@@ -105,89 +75,88 @@ export var getTextFromElement = function (children) {
     });
     return text;
 };
-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.isValidElement(child) && React.Children.only(child);
 };
-export 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 = useState(false), isOpened = _e[0], setIsOpened = _e[1];
-    var _f = useState(''), value = _f[0], _setValue = _f[1]; // Don't call _setValue directly instead call setInputValue to make sure onChange fires correctly
-    var _g = useState(false), showingAutocomplete = _g[0], setShowingAutocomplete = _g[1];
-    var _h = useState(null), selectedAutocompleteIndex = _h[0], setSelectedAutocompleteIndex = _h[1];
-    var _j = useState([]), interactiveAutocompleteItems = _j[0], setInteractiveAutocompleteItems = _j[1];
-    var _k = useState(''), announcementText = _k[0], setAnnouncementText = _k[1];
+export const Combobox = ({ autocompleteItems, children, grow, initialValue, onChange, onFocus, onBlur, showClearButton, clearButtonVariant = undefined, clearButtonAriaLabel = `Reset Search Input`, labelId, getStatusText = buildStatusString, id, ...elemProps }) => {
+    const [isOpened, setIsOpened] = useState(false);
+    const [value, _setValue] = useState(''); // Don't call _setValue directly instead call setInputValue to make sure onChange fires correctly
+    const [showingAutocomplete, setShowingAutocomplete] = useState(false);
+    const [selectedAutocompleteIndex, setSelectedAutocompleteIndex] = useState(null);
+    const [interactiveAutocompleteItems, setInteractiveAutocompleteItems] = useState([]);
+    const [announcementText, setAnnouncementText] = 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 = useRef(null);
+    const inputRef = 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 = useForkRef(children.ref, inputRef);
-    var comboboxRef = useRef(null);
-    var randomComponentId = useUniqueId();
-    var randomLabelId = useUniqueId();
-    var componentId = id || randomComponentId;
-    var formLabelId = labelId || randomLabelId;
-    var _l = useState(false), showGroupText = _l[0], setShowGroupText = _l[1];
+    const elementRef = useForkRef(children.ref, inputRef);
+    const comboboxRef = useRef(null);
+    const randomComponentId = useUniqueId();
+    const randomLabelId = useUniqueId();
+    const componentId = id || randomComponentId;
+    const formLabelId = labelId || randomLabelId;
+    const [showGroupText, setShowGroupText] = 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`
-    useLayoutEffect(function () {
-        var shouldShow = interactiveAutocompleteItems.length > 0 && isOpened;
+    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 = useIsRTL();
-    var setInputValue = useCallback(function (newValue) {
+    const isRTL = useIsRTL();
+    const setInputValue = 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]);
-    useEffect(function () {
+    useEffect(() => {
         if (initialValue !== null && initialValue !== undefined) {
             setInputValue(initialValue);
         }
     }, [initialValue, setInputValue]);
-    useEffect(function () {
-        var getInteractiveAutocompleteItems = function () {
+    useEffect(() => {
+        const getInteractiveAutocompleteItems = () => {
             if (autocompleteItems &&
                 autocompleteItems.length &&
                 autocompleteItems[0].hasOwnProperty('header')) {
-                return flatten(autocompleteItems.map(function (group) { return group.items; }));
+                return flatten(autocompleteItems.map(group => group.items));
             }
             return autocompleteItems || [];
         };
         setInteractiveAutocompleteItems(getInteractiveAutocompleteItems());
     }, [autocompleteItems]);
-    var handleAutocompleteClick = function (event, menuItemProps) {
+    const handleAutocompleteClick = (event, menuItemProps) => {
         if (menuItemProps.isDisabled) {
             return;
         }
@@ -198,25 +167,25 @@ export 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;
             }
@@ -226,45 +195,45 @@ export 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();
@@ -275,7 +244,7 @@ export 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;
@@ -286,25 +255,27 @@ export 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] = space.xl, _a));
+            const paddingDirection = isRTL ? 'paddingLeft' : 'paddingRight';
+            cssOverride = {
+                ...cssOverride,
+                [paddingDirection]: space.xl,
+            };
         }
-        var newTextInputProps = {
+        const newTextInputProps = {
             type: 'text',
             id: componentId,
             grow: grow,
@@ -321,16 +292,17 @@ export var Combobox = function (_a) {
             onBlur: handleBlur,
             css: cssOverride,
             role: 'combobox',
-            'aria-owns': showingAutocomplete ? componentId + "-" + listBoxIdPart : undefined,
+            'aria-owns': showingAutocomplete ? `${componentId}-${listBoxIdPart}` : undefined,
             'aria-haspopup': true,
             'aria-expanded': showingAutocomplete,
         };
-        var cloneElement = function (element, props) {
-            return jsx(element.type, __assign(__assign({}, element.props), props));
-        };
-        return cloneElement(inputElement, __assign(__assign({}, inputElement.props), newTextInputProps));
+        const cloneElement = (element, props) => jsx(element.type, {
+            ...element.props,
+            ...props,
+        });
+        return cloneElement(inputElement, { ...inputElement.props, ...newTextInputProps });
     };
-    return (React.createElement(Container, __assign({ grow: grow }, elemProps),
+    return (React.createElement(Container, Object.assign({ grow: grow }, elemProps),
         React.createElement(InputContainer, { ref: comboboxRef },
             isValidSingleChild(children) && React.Children.map(children, renderChildren),
             showClearButton && (React.createElement(ResetButton, { shouldShow: !!value, "aria-label": clearButtonAriaLabel, icon: xSmallIcon, variant: clearButtonVariant, onClick: resetSearchInput, onBlur: handleBlur, size: "small", type: "button" })),

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

@@ -1,17 +1,16 @@
 import React, { useState, useEffect } from 'react';
 import styled from '@emotion/styled';
 import { accessibleHide } from '@workday/canvas-kit-react/common';
-var Container = styled('div')(accessibleHide);
-export 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 = useState(announcementText), displayText = _g[0], setDisplayText = _g[1];
-    useEffect(function () {
+const Container = styled('div')(accessibleHide);
+export const Status = ({ ariaLive = 'polite', role = 'status', ariaRelevant = 'additions', expireMilliseconds = 500, announcementText = '', ariaAtomic, }) => {
+    const [displayText, setDisplayText] = useState(announcementText);
+    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/es6/common/lib/theming/index.d.ts

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

package/dist/es6/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/es6/common/lib/theming/index.js

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

package/dist/es6/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/es6/common/lib/theming/useThemeRTL.d.ts.map

@@ -1 +1 @@
-{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}

package/dist/es6/common/lib/theming/useThemeRTL.js

@@ -1,35 +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 __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;
-};
 import { useIsRTL, useTheme } from '@workday/canvas-kit-react/common';
 import { useMemo } from 'react';
 import rtlCSSJS from 'rtl-css-js';
-var getDirectionalStyles = function (isRTL) {
-    var styles = [];
-    for (var _i = 1; _i < arguments.length; _i++) {
-        styles[_i - 1] = arguments[_i];
-    }
+const getDirectionalStyles = (isRTL, ...styles) => {
     return isRTL ? rtlCSSJS(styles) : styles;
 };
-var getConvertedStyles = function (styles, convertFunc) {
+const getConvertedStyles = (styles, convertFunc) => {
     return convertFunc ? convertFunc(styles) : styles;
 };
 /**
+ * @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).
  *
@@ -59,22 +40,18 @@ var getConvertedStyles = function (styles, convertFunc) {
  * }
  */
 export function useThemeRTL() {
-    var theme = useTheme();
-    var direction = useIsRTL(theme);
-    var convertFunc = theme.canvas._styleRewriteFn;
-    var themeRTL = useMemo(function () {
-        return function () {
-            var cssObject = [];
-            for (var _i = 0; _i < arguments.length; _i++) {
-                cssObject[_i] = arguments[_i];
-            }
-            var styles = getDirectionalStyles.apply(void 0, __spreadArrays([direction], cssObject));
-            return styles.reduce(function (first, second) {
-                var convertedFirst = getConvertedStyles(first, convertFunc);
-                var convertedSecond = getConvertedStyles(second, convertFunc);
-                return __assign(__assign({}, convertedFirst), convertedSecond);
+    const theme = useTheme();
+    const direction = useIsRTL(theme);
+    const convertFunc = theme.canvas._styleRewriteFn;
+    const themeRTL = useMemo(() => {
+        return (...cssObject) => {
+            const styles = getDirectionalStyles(direction, ...cssObject);
+            return styles.reduce((first, second) => {
+                const convertedFirst = getConvertedStyles(first, convertFunc);
+                const convertedSecond = getConvertedStyles(second, convertFunc);
+                return { ...convertedFirst, ...convertedSecond };
             }, {});
         };
     }, [direction, convertFunc]);
-    return { themeRTL: themeRTL, theme: theme };
+    return { themeRTL, theme };
 }

package/dist/es6/expandable/lib/Expandable.d.ts

@@ -8,68 +8,101 @@ export interface ExpandableProps extends ExtractProps<typeof Flex, never> {
      */
     children?: React.ReactNode;
 }
+/**
+ * `Expandable` wraps an `Expandable.Target` and an `Expandable.Content`. By default, it provides a
+ * `DisclosureModel` for its subcomponents. Alternatively, a model may be passed in using the
+ * hoisted model pattern.
+ */
 export declare const Expandable: import("@workday/canvas-kit-react/common").ElementComponentM<"div", ExpandableProps & Partial<{
     id: string;
     initialVisibility: import("@workday/canvas-kit-react/disclosure").Visibility;
 }> & {
     onShow?: ((data: Event | React.SyntheticEvent<Element, Event> | undefined, prevState: {
         id: string;
-        visibility: import("@workday/canvas-kit-react/disclosure").Visibility;
+        visibility: "hidden" | "visible";
     }) => void) | undefined;
     onHide?: ((data: Event | React.SyntheticEvent<Element, Event> | undefined, prevState: {
         id: string;
-        visibility: import("@workday/canvas-kit-react/disclosure").Visibility;
+        visibility: "hidden" | "visible";
     }) => void) | undefined;
 } & {
     shouldShow?: ((data: Event | React.SyntheticEvent<Element, Event> | undefined, state: {
         id: string;
-        visibility: import("@workday/canvas-kit-react/disclosure").Visibility;
+        visibility: "hidden" | "visible";
     }) => boolean) | undefined;
     shouldHide?: ((data: Event | React.SyntheticEvent<Element, Event> | undefined, state: {
         id: string;
-        visibility: import("@workday/canvas-kit-react/disclosure").Visibility;
+        visibility: "hidden" | "visible";
     }) => boolean) | undefined;
 }, {
     state: {
         id: string;
-        visibility: import("@workday/canvas-kit-react/disclosure").Visibility;
+        visibility: "hidden" | "visible";
     };
     events: {
         show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
     };
 }> & {
+    /**
+     * `Expandable.Target` creates a heading and a button. The heading is a semantic heading to
+     * describe the associated content. The button provides users the ability to toggle the
+     * associated content.
+     *
+     * As according to the [W3 disclosure
+     * specification](https://www.w3.org/TR/wai-aria-practices-1.1/#disclosure), the button has
+     * `aria-expanded` and `aria-controls` attributes set by default
+     *
+     * This component should hold an `Expandable.Icon`, an optional `Expandable.Avatar`, and an
+     * `Expandable.Title`.
+     */
     Target: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./ExpandableTarget").ExpandableTargetProps, {
         state: {
             id: string;
-            visibility: import("@workday/canvas-kit-react/disclosure").Visibility;
+            visibility: "hidden" | "visible";
         };
         events: {
             show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
-    Content: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("./ExpandableContent").ExpandableContentProps, {
+    /**
+     * `Expandable.Title` styles the target text that describes the content.
+     */
+    Title: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("./ExpandableTitle").ExpandableTitleProps>;
+    /**
+     * `Expandable.Icon` creates an icon to visually indicate the state of the content. It takes an
+     * `iconPosition` prop to determine which chevron icon to use.
+     */
+    Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./ExpandableIcon").ExpandableIconProps, {
         state: {
             id: string;
-            visibility: import("@workday/canvas-kit-react/disclosure").Visibility;
+            visibility: "hidden" | "visible";
         };
         events: {
             show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
-    Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./ExpandableIcon").ExpandableIconProps, {
+    /**
+     * `Expandable.Avatar` is an optional component that creates an `Avatar` to display a decorative
+     * image.
+     */
+    Avatar: import("@workday/canvas-kit-react/common").ElementComponent<"button", import("./ExpandableAvatar").ExpandableAvatarProps>;
+    /**
+     * `Expandable.Content` holds the content that will be conditionally expanded and collapsed. It
+     * has an `id` to ensure the `Expandable.Target` properly set it to the `aria-controls`
+     * attribute.
+     */
+    Content: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("./ExpandableContent").ExpandableContentProps, {
         state: {
             id: string;
-            visibility: import("@workday/canvas-kit-react/disclosure").Visibility;
+            visibility: "hidden" | "visible";
         };
         events: {
             show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
-    Avatar: import("@workday/canvas-kit-react/common").ElementComponent<"button", import("./ExpandableAvatar").ExpandableAvatarProps>;
-    Title: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("./ExpandableTitle").ExpandableTitleProps>;
 };
 //# sourceMappingURL=Expandable.d.ts.map