@workday/canvas-kit-react 12.0.0-alpha.862-next.0 → 12.0.0-alpha.898-next.0

package/dist/es6/select/lib/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../select/lib/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE9D,OAAO,EAAC,QAAQ,EAAC,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAA8B,OAAO,EAAS,MAAM,6BAA6B,CAAC;AACzF,OAAO,EAAa,SAAS,EAAC,MAAM,sCAAsC,CAAC;AAM3E,OAAO,EAEL,YAAY,EAEZ,SAAS,EAEV,MAAM,kCAAkC,CAAC;AAG1C,MAAM,WAAW,gBAAiB,SAAQ,YAAY,CAAC,OAAO,SAAS,CAAC,EAAE,OAAO;IAC/E;;;;OAIG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AAgCD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8EvB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAWrB,CAAC;AAMH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASrB,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,YAAY,CAAC,OAAO,QAAQ,CAAC;CAAG;AAChF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIf;;;;;;;;;;;;OAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;OAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CASL,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../select/lib/Select.tsx"],"names":[],"mappings":"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H;;;;;;;;;;;;;WAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CAbH;;;;;;;;;;;;;WAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CAbH;;;;;;;;;;;;;WAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CAbH;;;;;;;;;;;;;WAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CAbH;;;;;;;;;;;;;WAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CAbH;;;;;;;;;;;;;WAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CAbH;;;;;;;;;;;;;WAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CAbH;;;;;;;;;;;;;WAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CAbH;;;;;;;;;;;;;WAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CAbH;;;;;;;;;;;;;WAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CAbH;;;;;;;;;;;;;WAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CAbH;;;;;;;;;;;;;WAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CAbH;;;;;;;;;;;;;WAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CAbH;;;;;;;;;;;;;WAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CAbH;;;;;;;;;;;;;WAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CAbH;;;;;;;;;;;;;WAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CAbH;;;;;;;;;;;;;WAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CAbH;;;;;;;;;;;;;WAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CAbH;;;;;;;;;;;;;WAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CAbH;;;;;;;;;;;;;WAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CAbH;;;;;;;;;;;;;WAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CAbH;;;;;;;;;;;;;WAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CAbH;;;;;;;;;;;;;WAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CAbH;;;;;;;;;;;;;WAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CAbH;;;;;;;;;;;;;WAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA3BH;;;;;;;;;;;;OAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gDAEH;;;;;;;;;;;;;eAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAbH;;;;;;;;;;;;;OAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gDAbH;;;;;;;;;;;;;eAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gDAhCH;;;;;;;;;;;;;eAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gDAbH;;;;;;;;;;;;;eAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqBH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gDAnDH;;;;;;;;;;;;;eAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAwCH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gDAtEH;;;;;;;;;;;;;eAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gDAbH;;;;;;;;;;;;;eAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oDAbH;;;;;;;;;;;;;mBAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkEL,CAAC"}

package/dist/es6/select/lib/Select.js

@@ -8,42 +8,28 @@ import { SystemIcon } from '@workday/canvas-kit-react/icon';
 import { useSelectCard } from './hooks/useSelectCard';
 import { useSelectInput } from './hooks/useSelectInput';
 import { useSelectModel } from './hooks/useSelectModel';
-import { createSubcomponent, createContainer, useLocalRef, } from '@workday/canvas-kit-react/common';
+import { createSubcomponent, createContainer } from '@workday/canvas-kit-react/common';
 import { system } from '@workday/canvas-tokens-web';
 const selectInputStencil = createStencil({
-    base: { name: "10220f", styles: "box-sizing:border-box;caret-color:transparent;cursor:default;&::selection{background-color:transparent;}" }
-}, "select-input-52ab4b");
+    base: { name: "hbbc51", styles: "box-sizing:border-box;caret-color:transparent;cursor:default;&::selection{background-color:transparent;}" }
+}, "select-input-ef8a40");
 const selectIconsStencil = createStencil({
-    base: { name: "def785", styles: "box-sizing:border-box;position:absolute;pointer-events:none;" }
-}, "select-icons-3130c0");
+    base: { name: "hbbc52", styles: "box-sizing:border-box;position:absolute;pointer-events:none;" }
+}, "select-icons-20326d");
 const hiddenSelectInputStencil = createStencil({
-    base: { name: "cf34d9", styles: "box-sizing:border-box;position:absolute;top:var(--cnvs-sys-space-zero);bottom:var(--cnvs-sys-space-zero);left:var(--cnvs-sys-space-zero);right:var(--cnvs-sys-space-zero);opacity:var(--cnvs-sys-opacity-zero);cursor:default;pointer-events:none;" }
-}, "hidden-select-input-926b2b");
+    base: { name: "hbbc53", styles: "box-sizing:border-box;position:absolute;top:var(--cnvs-sys-space-zero);bottom:var(--cnvs-sys-space-zero);left:var(--cnvs-sys-space-zero);right:var(--cnvs-sys-space-zero);opacity:var(--cnvs-sys-opacity-zero);cursor:default;pointer-events:none;" }
+}, "hidden-select-input-209e09");
 export const SelectInput = createSubcomponent(TextInput)({
     modelHook: useSelectModel,
     elemPropsHook: useSelectInput,
 })(({ placeholder = 'Choose an option', inputStartIcon, error, textInputProps, disabled, width, ref, onChange, onInput, value, name, ...elemProps }, Element, model) => {
-    const { localRef, elementRef } = useLocalRef(ref);
-    // We need to create a proxy between the multiple inputs. We need to redirect a few methods to
-    // the visible input
-    React.useImperativeHandle(elementRef, () => {
-        if (localRef.current) {
-            localRef.current.focus = (options) => {
-                textInputProps.ref.current.focus(options);
-            };
-            localRef.current.blur = () => {
-                textInputProps.ref.current.blur();
-            };
-        }
-        return localRef.current;
-    }, [textInputProps.ref, localRef]);
     return (React.createElement(InputGroup, { "data-width": "ck-formfield-width" },
-        inputStartIcon && model.state.selectedIds.length > 0 && (React.createElement(InputGroup.InnerStart, Object.assign({}, selectIconsStencil()),
-            React.createElement(SystemIcon, { icon: inputStartIcon }))),
-        React.createElement(InputGroup.Input, Object.assign({ error: error, disabled: disabled, tabIndex: -1, "aria-hidden": true, onChange: onChange, onInput: onInput, value: value, name: name, ref: elementRef }, hiddenSelectInputStencil())),
-        React.createElement(InputGroup.Input, Object.assign({ as: Element, disabled: disabled, placeholder: placeholder, error: error }, textInputProps, mergeStyles(elemProps, selectInputStencil()))),
-        React.createElement(InputGroup.InnerEnd, Object.assign({}, selectIconsStencil()),
-            React.createElement(SystemIcon, { icon: caretDownSmallIcon }))));
+        inputStartIcon && model.state.selectedIds.length > 0 && (React.createElement(InputGroup.InnerStart, { "data-part": "select-start-icon-container", ...selectIconsStencil() },
+            React.createElement(SystemIcon, { "data-part": "select-start-icon", icon: inputStartIcon }))),
+        React.createElement(InputGroup.Input, { error: error, disabled: disabled, tabIndex: -1, "aria-hidden": true, onChange: onChange, onInput: onInput, value: value, name: name, ref: ref, "data-part": "select-hidden-input", ...hiddenSelectInputStencil() }),
+        React.createElement(InputGroup.Input, { as: Element, disabled: disabled, placeholder: placeholder, error: error, "data-part": "select-visual-input", ...textInputProps, ...mergeStyles(elemProps, selectInputStencil()) }),
+        React.createElement(InputGroup.InnerEnd, { "data-part": "select-caret-container" },
+            React.createElement(SystemIcon, { "data-part": "select-caret-icon", icon: caretDownSmallIcon }))));
 });
 export const SelectItem = createSubcomponent('li')({
     modelHook: useSelectModel,
@@ -51,14 +37,14 @@ export const SelectItem = createSubcomponent('li')({
         Icon: Combobox.Menu.Item.Icon,
     },
 })(({ children, ...elemProps }, Element, _model) => {
-    return (React.createElement(Combobox.Menu.Item, Object.assign({ role: "option", as: Element }, elemProps), children));
+    return (React.createElement(Combobox.Menu.Item, { role: "option", as: Element, ...elemProps }, children));
 });
-const selectCardStyles = createStyles({ name: "555ee5", styles: "max-height:18.75rem;" });
+const selectCardStyles = createStyles({ name: "hbbc54", styles: "max-height:18.75rem;" });
 export const SelectCard = createSubcomponent('div')({
     modelHook: useSelectModel,
     elemPropsHook: useSelectCard,
 })(({ children, ...elemProps }, Element) => {
-    return (React.createElement(Combobox.Menu.Card, Object.assign({ as: Element }, mergeStyles(elemProps, selectCardStyles)), children));
+    return (React.createElement(Combobox.Menu.Card, { as: Element, ...mergeStyles(elemProps, selectCardStyles) }, children));
 });
 /**
  * Use `Select` to allow users to choose an option from a list or type characters to select a matching option.
@@ -172,5 +158,5 @@ export const Select = createContainer()({
         Item: SelectItem,
     },
 })(({ children, ...elemProps }, _, model) => {
-    return (React.createElement(Combobox, Object.assign({ model: model }, elemProps), children));
+    return (React.createElement(Combobox, { model: model, ...elemProps }, children));
 });

package/dist/es6/select/lib/hooks/useSelectInput.d.ts

@@ -86,7 +86,7 @@ export declare const useSelectInput: import("@workday/canvas-kit-react/common").
     readonly onClick: (event: React.MouseEvent<Element, MouseEvent>) => void;
     readonly value: string | undefined;
     readonly role: "combobox";
-    readonly 'aria-haspopup': boolean | "grid" | "true" | "listbox" | "menu" | "false" | "dialog" | "tree" | undefined;
+    readonly 'aria-haspopup': boolean | "grid" | "true" | "false" | "listbox" | "menu" | "dialog" | "tree" | undefined;
     readonly 'aria-expanded': boolean;
     readonly 'aria-autocomplete': "list";
     readonly 'aria-controls': `${string}-list`;
@@ -109,14 +109,15 @@ export declare const useSelectInput: import("@workday/canvas-kit-react/common").
     readonly onKeyDown: (event: React.KeyboardEvent) => void;
     readonly onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
     readonly autoComplete: "off";
+    readonly ref: (instance: HTMLInputElement | null) => void;
     readonly onFocus: () => void;
     readonly textInputProps: {
-        readonly ref: React.RefObject<HTMLInputElement>;
+        readonly ref: (instance: HTMLInputElement | null) => void;
         readonly onChange: typeof noop;
         readonly value: string;
     };
-    readonly ref: (instance: HTMLInputElement | null) => void;
     readonly 'aria-haspopup': "menu";
+    readonly keySoFar: null;
 }>;
 export {};
 //# sourceMappingURL=useSelectInput.d.ts.map

package/dist/es6/select/lib/hooks/useSelectInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSelectInput.d.ts","sourceRoot":"","sources":["../../../../../select/lib/hooks/useSelectInput.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,iBAAS,IAAI,SAEZ;AAED;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAgGF,mBAAmB;+BArFP,MAAM,WAAW,CAAC,gBAAgB,CAAC;;;;;;;;;;EAmIvE,CAAC"}
+{"version":3,"file":"useSelectInput.d.ts","sourceRoot":"","sources":["../../../../../select/lib/hooks/useSelectInput.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,iBAAS,IAAI,SAEZ;AAED;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA4HF,mBAAmB;+BAtFP,MAAM,WAAW,CAAC,gBAAgB,CAAC;;;;;;;;;;;EAqIvE,CAAC"}

package/dist/es6/select/lib/hooks/useSelectInput.js

@@ -9,8 +9,24 @@ function noop() {
  * `useSelectInput` extends {@link useComboboxInput useComboboxInput}  and {@link useComboboxKeyboardTypeAhead useComboboxKeyboardTypeAhead} and adds type ahead functionality and Select-specific [keyboard support](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/).
  */
 export const useSelectInput = composeHooks(useComboboxInput, useComboboxKeyboardTypeAhead, useComboboxResetCursorToSelected, useComboboxMoveCursorToSelected, createElemPropsHook(useSelectModel)((model, ref, elemProps = {}) => {
-    const { elementRef } = useLocalRef(ref);
-    const textInputRef = React.useRef(null);
+    const { elementRef: textInputElementRef, localRef: textInputRef } = useLocalRef(
+    // PopupModel says the targetRef is a `HTMLButtonElement`, but it is a `HTMLInputElement`
+    model.state.targetRef);
+    const { localRef: hiddenLocalRef, elementRef: hiddenElementRef } = useLocalRef(ref);
+    // We need to create a proxy between the multiple inputs. We need to redirect a few methods to
+    // the visible input
+    React.useImperativeHandle(hiddenElementRef, () => {
+        if (hiddenLocalRef.current) {
+            hiddenLocalRef.current.focus = (options) => {
+                textInputRef.current.focus(options);
+            };
+            hiddenLocalRef.current.blur = () => {
+                textInputRef.current.blur();
+            };
+        }
+        return hiddenLocalRef.current;
+    }, [textInputRef, hiddenLocalRef]);
+    // Remap the Popup model's targetRef to be the visible ref. `ref` and `model.state.targetRef` are already linked. We have to override that.
     // Update the text value of the input
     const handleOnChange = (event) => {
         var _a;
@@ -38,6 +54,7 @@ export const useSelectInput = composeHooks(useComboboxInput, useComboboxKeyboard
             model.state.items.length > 0 &&
             model.state.selectedIds[0]) {
             const value = model.navigation.getItem(model.state.selectedIds[0], model).id;
+            const oldValue = model.state.inputRef.current.value;
             // force the hidden input to have the correct value
             if (model.state.inputRef.current.value !== value) {
                 const nativeInputValue = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(model.state.inputRef.current), 'value');
@@ -45,8 +62,8 @@ export const useSelectInput = composeHooks(useComboboxInput, useComboboxKeyboard
                     nativeInputValue.set.call(model.state.inputRef.current, value);
                 }
             }
-            if (model.state.selectedIds[0] !== value &&
-                model.state.inputRef.current.value !== value) {
+            if (model.state.selectedIds[0] !== oldValue &&
+                model.state.inputRef.current.value !== oldValue) {
                 // Programmatically dispatch an onChange once items are loaded. This account for when a consumer wants an initial selected item and they're loading them from a server.
                 dispatchInputEvent(model.state.inputRef.current, value);
             }
@@ -105,19 +122,20 @@ export const useSelectInput = composeHooks(useComboboxInput, useComboboxKeyboard
         },
         onChange: handleOnChange,
         autoComplete: 'off',
+        ref: hiddenElementRef,
         // When the hidden input is focused, we want to show the focus/hover states of the input that sits below it.
         onFocus() {
             var _a;
             (_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         },
         textInputProps: {
-            ref: textInputRef,
+            ref: textInputElementRef,
             onChange: noop,
             value: model.state.selectedIds.length > 0 && model.state.items.length > 0
                 ? model.navigation.getItem(model.state.selectedIds[0], model).textValue
                 : '',
         },
-        ref: elementRef,
         'aria-haspopup': 'menu',
+        keySoFar: null,
     };
 }));

package/dist/es6/side-panel/lib/SidePanel.d.ts

@@ -74,7 +74,7 @@ export declare class SidePanel extends React.Component<SidePanelProps, SidePanel
     };
     componentDidMount(): void;
     componentWillUnmount(): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
     private handleResize;
     private onToggleClick;
     private toggleButtonDirection;

package/dist/es6/side-panel/lib/SidePanel.js

@@ -114,7 +114,7 @@ export class SidePanel extends React.Component {
     }
     render() {
         const { backgroundColor = SidePanelBackgroundColor.White, openNavigationAriaLabel = 'open navigation', closeNavigationAriaLabel = 'close navigation', openDirection = SidePanelOpenDirection.Left, breakpoint = 768, openWidth = 300, header, onToggleClick, open, padding, onBreakpointChange, ...elemProps } = this.props;
-        return (React.createElement(SidePanelContainer, Object.assign({ role: "region", padding: padding, openDirection: openDirection, openWidth: openWidth, backgroundColor: backgroundColor, open: open }, elemProps),
+        return (React.createElement(SidePanelContainer, { role: "region", padding: padding, openDirection: openDirection, openWidth: openWidth, backgroundColor: backgroundColor, open: open, ...elemProps },
             React.createElement(ChildrenContainer, { open: open, openWidth: openWidth },
                 header && open ? (React.createElement(Heading, { as: "h2", size: "small", marginTop: "zero" }, header)) : null,
                 this.props.children),

package/dist/es6/skeleton/lib/parts/skeletonHeader.js

@@ -4,5 +4,5 @@ import { borderRadius, colors } from '@workday/canvas-kit-react/tokens';
 import { SkeletonShape } from './skeletonShape';
 export const SkeletonHeader = createComponent('div')({
     displayName: 'Skeleton.Header',
-    Component: ({ backgroundColor = colors.soap200, height = '28px', width = '100%', ...elemProps }, ref, Element) => (React.createElement(SkeletonShape, Object.assign({ ref: ref, as: Element, backgroundColor: backgroundColor, borderRadius: borderRadius.s, height: height, width: width }, elemProps))),
+    Component: ({ backgroundColor = colors.soap200, height = '28px', width = '100%', ...elemProps }, ref, Element) => (React.createElement(SkeletonShape, { ref: ref, as: Element, backgroundColor: backgroundColor, borderRadius: borderRadius.s, height: height, width: width, ...elemProps })),
 });

package/dist/es6/skeleton/lib/parts/skeletonShape.js

@@ -11,5 +11,5 @@ const Shape = styled('div')(({ backgroundColor, borderRadius, height, width }) =
 }));
 export const SkeletonShape = createComponent('div')({
     displayName: 'Skeleton.Shape',
-    Component: ({ backgroundColor = colors.soap200, borderRadius = 0, height = '100%', width = '100%', ...elemProps }, ref, Element) => (React.createElement(Shape, Object.assign({ ref: ref, as: Element, backgroundColor: backgroundColor, borderRadius: borderRadius, height: height, width: width }, elemProps))),
+    Component: ({ backgroundColor = colors.soap200, borderRadius = 0, height = '100%', width = '100%', ...elemProps }, ref, Element) => (React.createElement(Shape, { ref: ref, as: Element, backgroundColor: backgroundColor, borderRadius: borderRadius, height: height, width: width, ...elemProps })),
 });

package/dist/es6/skeleton/lib/parts/skeletonText.js

@@ -22,5 +22,5 @@ const createTextLines = (lineCount, backgroundColor) => {
 };
 export const SkeletonText = createComponent('div')({
     displayName: 'Skeleton.Text',
-    Component: ({ backgroundColor = colors.soap200, lineCount = 2, ...elemProps }, ref, Element) => lineCount <= 0 ? null : (React.createElement(TextContainer, Object.assign({ ref: ref, as: Element }, elemProps), createTextLines(lineCount, backgroundColor))),
+    Component: ({ backgroundColor = colors.soap200, lineCount = 2, ...elemProps }, ref, Element) => lineCount <= 0 ? null : (React.createElement(TextContainer, { ref: ref, as: Element, ...elemProps }, createTextLines(lineCount, backgroundColor))),
 });

package/dist/es6/skeleton/lib/skeleton.js

@@ -33,7 +33,7 @@ const SkeletonAnimator = styled('div')({
  */
 export const Skeleton = createComponent('div')({
     displayName: 'Skeleton',
-    Component: ({ children, 'aria-label': loadingAriaLabel = 'Loading', ...elemProps }, ref, Element) => (React.createElement(SkeletonAnimator, Object.assign({ ref: ref, as: Element }, elemProps),
+    Component: ({ children, 'aria-label': loadingAriaLabel = 'Loading', ...elemProps }, ref, Element) => (React.createElement(SkeletonAnimator, { ref: ref, as: Element, ...elemProps },
         React.createElement(AccessibleHide, null, loadingAriaLabel),
         React.createElement("div", { "aria-hidden": true }, children))),
     subComponents: {

package/dist/es6/status-indicator/lib/StatusIndicator.d.ts

@@ -68,6 +68,6 @@ export interface StatusIndicatorProps extends React.HTMLAttributes<HTMLSpanEleme
 export declare class StatusIndicator extends React.Component<StatusIndicatorProps> {
     static Type: typeof StatusIndicatorType;
     static Emphasis: typeof StatusIndicatorEmphasis;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 //# sourceMappingURL=StatusIndicator.d.ts.map

package/dist/es6/status-indicator/lib/StatusIndicator.js

@@ -120,7 +120,7 @@ export class StatusIndicator extends React.Component {
     render() {
         const { emphasis = StatusIndicatorEmphasis.High, maxWidth = 200, type, icon, label, ...elemProps } = this.props;
         const variant = statusIndicatorStyles.variants[type][emphasis];
-        return (React.createElement(Container, Object.assign({ type: type, emphasis: emphasis, maxWidth: maxWidth }, elemProps),
+        return (React.createElement(Container, { type: type, emphasis: emphasis, maxWidth: maxWidth, ...elemProps },
             icon && (React.createElement(SystemIcon, { colorHover: variant.color, color: variant.color, icon: icon, size: 14, style: { paddingRight: space.xxxs } })),
             React.createElement(StatusLabel, null, label)));
     }

package/dist/es6/switch/lib/Switch.js

@@ -4,50 +4,50 @@ import { createStencil, px2rem } from '@workday/canvas-kit-styling';
 import { brand, system } from '@workday/canvas-tokens-web';
 import { mergeStyles } from '../../layout';
 const switchContainerStencil = createStencil({
-    base: { name: "aeab09", styles: "box-sizing:border-box;position:relative;height:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);" }
+    base: { name: "hbbc55", styles: "box-sizing:border-box;position:relative;height:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);" }
 }, "switch-container-e9661f");
 const SwitchContainer = createComponent('div')({
     displayName: 'SwitchContainer',
     Component: ({ children, ...elemProps }, ref, Element) => {
-        return (React.createElement(Element, Object.assign({ ref: ref }, mergeStyles(elemProps, switchContainerStencil())), children));
+        return (React.createElement(Element, { ref: ref, ...mergeStyles(elemProps, switchContainerStencil()) }, children));
     },
 });
 const switchInputStencil = createStencil({
-    base: { name: "1c1c2b", styles: "box-sizing:border-box;display:flex;position:absolute;height:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);margin:var(--cnvs-sys-space-zero);margin-left:var(--cnvs-sys-space-x1);border-radius:var(--cnvs-sys-shape-round);opacity:0;cursor:pointer;&:checked, &.checked{& ~ div:first-of-type{background-color:var(--cnvs-brand-primary-base);}&:disabled, &.disabled{& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}}&:disabled, &.disabled{cursor:not-allowed;& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}&:focus-visible, &:focus, &.focus{outline:none;& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}}" },
+    base: { name: "hbbc56", styles: "box-sizing:border-box;display:flex;position:absolute;height:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);margin:var(--cnvs-sys-space-zero);margin-left:var(--cnvs-sys-space-x1);border-radius:var(--cnvs-sys-shape-round);opacity:0;cursor:pointer;&:checked, &.checked{& ~ div:first-of-type{background-color:var(--cnvs-brand-primary-base);}&:disabled, &.disabled{& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}}&:disabled, &.disabled{cursor:not-allowed;& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}&:focus-visible, &:focus, &.focus{outline:none;& ~ div:first-of-type{box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}}" },
     modifiers: {
         error: {
-            error: { name: "786eb0", styles: "& ~ div:first-of-type{box-shadow:\n              0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),\n              0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-error-base),\n              0 0 0 0.3125rem transparent;}" },
-            alert: { name: "a877d0", styles: "& ~ div:first-of-type{box-shadow:\n          0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),\n          0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-alert-base),\n          0 0 0 0.3125rem var(--cnvs-brand-alert-darkest);}" }
+            error: { name: "hbbc57", styles: "& ~ div:first-of-type{box-shadow:\n              0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),\n              0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-error-base),\n              0 0 0 0.3125rem transparent;}" },
+            alert: { name: "hbbc58", styles: "& ~ div:first-of-type{box-shadow:\n          0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),\n          0 0 0 var(--cnvs-sys-space-x1) var(--cnvs-brand-alert-base),\n          0 0 0 0.3125rem var(--cnvs-brand-alert-darkest);}" }
         }
     }
 }, "switch-input-001dec");
 const SwitchInput = createComponent('input')({
     displayName: 'SwitchInput',
     Component: ({ error, ...elemProps }, ref, Element) => {
-        return React.createElement(Element, Object.assign({ ref: ref }, mergeStyles(elemProps, switchInputStencil({ error }))));
+        return React.createElement(Element, { ref: ref, ...mergeStyles(elemProps, switchInputStencil({ error })) });
     },
 });
 const switchBackgroundStencil = createStencil({
-    base: { name: "f185ac", styles: "box-sizing:border-box;position:absolute;display:flex;align-items:center;pointer-events:none;margin-top:var(--cnvs-sys-space-x1);width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x4);border-radius:var(--cnvs-sys-shape-round);padding:var(--cnvs-sys-space-zero) 0.125rem;transition:background-color 200ms ease;background-color:var(--cnvs-sys-color-bg-muted-soft);" }
+    base: { name: "hbbc59", styles: "box-sizing:border-box;position:absolute;display:flex;align-items:center;pointer-events:none;margin-top:var(--cnvs-sys-space-x1);width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x4);border-radius:var(--cnvs-sys-shape-round);padding:var(--cnvs-sys-space-zero) 0.125rem;transition:background-color 200ms ease;background-color:var(--cnvs-sys-color-bg-muted-soft);" }
 }, "switch-background-17579c");
 const SwitchBackground = createComponent('div')({
     displayName: 'SwitchBackground',
     Component: ({ children, ...elemProps }, ref, Element) => {
-        return (React.createElement(Element, Object.assign({ ref: ref }, mergeStyles(elemProps, switchBackgroundStencil())), children));
+        return (React.createElement(Element, { ref: ref, ...mergeStyles(elemProps, switchBackgroundStencil()) }, children));
     },
 });
 const switchCircleStencil = createStencil({
-    base: { name: "7a2c97", styles: "box-sizing:border-box;width:var(--cnvs-sys-space-x3);height:var(--cnvs-sys-space-x3);border-radius:var(--cnvs-sys-shape-round);box-shadow:var(--cnvs-sys-depth-1);transition:transform 150ms ease;pointer-events:none;background-color:var(--cnvs-brand-primary-accent);transform:translateX(var(--cnvs-sys-space-zero));" },
+    base: { name: "hbbc5a", styles: "box-sizing:border-box;width:var(--cnvs-sys-space-x3);height:var(--cnvs-sys-space-x3);border-radius:var(--cnvs-sys-shape-round);box-shadow:var(--cnvs-sys-depth-1);transition:transform 150ms ease;pointer-events:none;background-color:var(--cnvs-brand-primary-accent);transform:translateX(var(--cnvs-sys-space-zero));" },
     modifiers: {
         checked: {
-            true: { name: "06e4c0", styles: "transform:translateX(var(--cnvs-sys-space-x4));" }
+            true: { name: "hbbc5b", styles: "transform:translateX(var(--cnvs-sys-space-x4));" }
         }
     }
 }, "switch-circle-2d1f0c");
 const SwitchCircle = createComponent('div')({
     displayName: 'SwitchCircle',
     Component: ({ checked, ...elemProps }, ref, Element) => {
-        return React.createElement(Element, Object.assign({ ref: ref }, mergeStyles(elemProps, switchCircleStencil({ checked }))));
+        return React.createElement(Element, { ref: ref, ...mergeStyles(elemProps, switchCircleStencil({ checked })) });
     },
 });
 export const Switch = createComponent('input')({
@@ -55,7 +55,7 @@ export const Switch = createComponent('input')({
     Component: ({ checked = false, id, disabled = false, onChange, value, ...elemProps }, ref, Element) => {
         const inputId = useUniqueId(id);
         return (React.createElement(SwitchContainer, null,
-            React.createElement(SwitchInput, Object.assign({ as: Element, checked: checked, disabled: disabled, id: inputId, ref: ref, onChange: onChange, role: "switch", type: "checkbox", value: value }, elemProps)),
+            React.createElement(SwitchInput, { as: Element, checked: checked, disabled: disabled, id: inputId, ref: ref, onChange: onChange, role: "switch", type: "checkbox", value: value, ...elemProps }),
             React.createElement(SwitchBackground, null,
                 React.createElement(SwitchCircle, { checked: checked }))));
     },

package/dist/es6/table/lib/Table.js

@@ -11,7 +11,7 @@ import { TableCaption } from './TableCaption';
 import { createStencil, px2rem } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 const tableStencil = createStencil({
-    base: { name: "2ced58", styles: "box-sizing:border-box;font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-400);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);display:grid;border:0.0625rem solid var(--cnvs-sys-color-border-container);border-radius:var(--cnvs-sys-shape-x2);overflow:auto;color:var(--cnvs-sys-color-text-default);" }
+    base: { name: "hbbc5j", styles: "box-sizing:border-box;font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-400);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);display:grid;border:0.0625rem solid var(--cnvs-sys-color-border-container);border-radius:var(--cnvs-sys-shape-x2);overflow:auto;color:var(--cnvs-sys-color-text-default);" }
 }, "table-773355");
 /**
  * `Table` is a simple styled compound component that renders a [table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) element. It is used to present information in a two-dimensional table comprised of rows and columns of cells containing data.
@@ -58,7 +58,7 @@ export default function App() {
 export const Table = createComponent('table')({
     displayName: 'Table',
     Component: ({ children, ...elemProps }, ref, Element) => {
-        return (React.createElement(Element, Object.assign({ ref: ref }, mergeStyles(elemProps, tableStencil())), children));
+        return (React.createElement(Element, { ref: ref, ...mergeStyles(elemProps, tableStencil()) }, children));
     },
     subComponents: {
         /**

package/dist/es6/table/lib/TableBody.js

@@ -3,11 +3,11 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { createStencil } from '@workday/canvas-kit-styling';
 const tableBodyStencil = createStencil({
-    base: { name: "afe05d", styles: "box-sizing:border-box;display:grid;tr {&:last-of-type{td, th{border-bottom:none;}}&:first-of-type{td, th{border-top:none;}}}td {&:last-of-type{border-inline-end:none;}&:first-of-type{border-inline-start:none;}}" }
+    base: { name: "hbbc5d", styles: "box-sizing:border-box;display:grid;tr {&:last-of-type{td, th{border-bottom:none;}}&:first-of-type{td, th{border-top:none;}}}td {&:last-of-type{border-inline-end:none;}&:first-of-type{border-inline-start:none;}}" }
 }, "table-body-dbe12a");
 export const TableBody = createComponent('tbody')({
     displayName: 'Table.Body',
     Component: ({ children, ...elemProps }, ref, Element) => {
-        return (React.createElement(Element, Object.assign({ ref: ref }, mergeStyles(elemProps, tableBodyStencil())), children));
+        return (React.createElement(Element, { ref: ref, ...mergeStyles(elemProps, tableBodyStencil()) }, children));
     },
 });

package/dist/es6/table/lib/TableCaption.js

@@ -4,11 +4,11 @@ import { createComponent } from '@workday/canvas-kit-react/common';
 import { createStencil, px2rem } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 const tableCaptionStencil = createStencil({
-    base: { name: "78005d", styles: "box-sizing:border-box;display:flex;border-bottom:0.0625rem solid var(--cnvs-sys-color-border-container);padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);" }
+    base: { name: "hbbc5i", styles: "box-sizing:border-box;display:flex;border-bottom:0.0625rem solid var(--cnvs-sys-color-border-container);padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);" }
 }, "table-caption-106f16");
 export const TableCaption = createComponent('caption')({
     displayName: 'Table.Caption',
     Component: ({ children, ...elemProps }, ref, Element) => {
-        return (React.createElement(Element, Object.assign({ ref: ref }, mergeStyles(elemProps, tableCaptionStencil())), children));
+        return (React.createElement(Element, { ref: ref, ...mergeStyles(elemProps, tableCaptionStencil()) }, children));
     },
 });

package/dist/es6/table/lib/TableCell.js

@@ -4,11 +4,11 @@ import { createComponent } from '@workday/canvas-kit-react/common';
 import { createStencil, px2rem } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 const tableCellStencil = createStencil({
-    base: { name: "02da1e", styles: "box-sizing:border-box;display:grid;align-items:center;background-color:var(--cnvs-sys-color-bg-default);border-bottom:0.0625rem solid var(--cnvs-sys-color-border-divider);grid-template-columns:1fr;justify-content:start;min-height:3.5rem;padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);word-break:break-word;" }
+    base: { name: "hbbc5g", styles: "box-sizing:border-box;display:grid;align-items:center;background-color:var(--cnvs-sys-color-bg-default);border-bottom:0.0625rem solid var(--cnvs-sys-color-border-divider);grid-template-columns:1fr;justify-content:start;min-height:3.5rem;padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);word-break:break-word;" }
 }, "table-cell-c39aaf");
 export const TableCell = createComponent('td')({
     displayName: 'Table.Cell',
     Component: ({ children, ...elemProps }, ref, Element) => {
-        return (React.createElement(Element, Object.assign({ ref: ref }, mergeStyles(elemProps, tableCellStencil())), children));
+        return (React.createElement(Element, { ref: ref, ...mergeStyles(elemProps, tableCellStencil()) }, children));
     },
 });

package/dist/es6/table/lib/TableFooter.js

@@ -3,11 +3,11 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { createStencil } from '@workday/canvas-kit-styling';
 const tableFooterStencil = createStencil({
-    base: { name: "1b51ed", styles: "box-sizing:border-box;display:grid;" }
+    base: { name: "hbbc5h", styles: "box-sizing:border-box;display:grid;" }
 }, "table-footer-9bbb07");
 export const TableFooter = createComponent('tfoot')({
     displayName: 'Table.Footer',
     Component: ({ children, ...elemProps }, ref, Element) => {
-        return (React.createElement(Element, Object.assign({ ref: ref }, mergeStyles(elemProps, tableFooterStencil())), children));
+        return (React.createElement(Element, { ref: ref, ...mergeStyles(elemProps, tableFooterStencil()) }, children));
     },
 });

package/dist/es6/table/lib/TableHead.js

@@ -4,11 +4,11 @@ import { createComponent } from '@workday/canvas-kit-react/common';
 import { calc, createStencil } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 const tableHeadStencil = createStencil({
-    base: { name: "6f3bdd", styles: "box-sizing:border-box;display:grid;background-color:var(--cnvs-sys-color-bg-alt-softer);min-height:calc(var(--cnvs-sys-space-x16) - var(--cnvs-sys-space-x4));th {&:first-of-type{border-inline-start:none;}&:last-of-type{border-inline-end:none;}}" }
+    base: { name: "hbbc5c", styles: "box-sizing:border-box;display:grid;background-color:var(--cnvs-sys-color-bg-alt-softer);min-height:calc(var(--cnvs-sys-space-x16) - var(--cnvs-sys-space-x4));th {&:first-of-type{border-inline-start:none;}&:last-of-type{border-inline-end:none;}}" }
 }, "table-head-c91e37");
 export const TableHead = createComponent('thead')({
     displayName: 'Table.Head',
     Component: ({ children, ...elemProps }, ref, Element) => {
-        return (React.createElement(Element, Object.assign({ ref: ref }, mergeStyles(elemProps, tableHeadStencil())), children));
+        return (React.createElement(Element, { ref: ref, ...mergeStyles(elemProps, tableHeadStencil()) }, children));
     },
 });

package/dist/es6/table/lib/TableHeader.js

@@ -4,11 +4,11 @@ import { createComponent } from '@workday/canvas-kit-react/common';
 import { calc, createStencil, px2rem } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 const tableHeaderStencil = createStencil({
-    base: { name: "ead3aa", styles: "box-sizing:border-box;display:grid;align-items:center;background-color:var(--cnvs-sys-color-bg-default);border-bottom:0.0625rem solid var(--cnvs-sys-color-border-divider);justify-content:start;min-height:calc(var(--cnvs-sys-space-x16) - var(--cnvs-sys-space-x2));padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);word-break:break-word;font-weight:var(--cnvs-sys-font-weight-medium);" }
+    base: { name: "hbbc5f", styles: "box-sizing:border-box;display:grid;align-items:center;background-color:var(--cnvs-sys-color-bg-default);border-bottom:0.0625rem solid var(--cnvs-sys-color-border-divider);justify-content:start;min-height:calc(var(--cnvs-sys-space-x16) - var(--cnvs-sys-space-x2));padding:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);word-break:break-word;font-weight:var(--cnvs-sys-font-weight-medium);" }
 }, "table-header-8f0b37");
 export const TableHeader = createComponent('th')({
     displayName: 'Table.Header',
     Component: ({ children, ...elemProps }, ref, Element) => {
-        return (React.createElement(Element, Object.assign({ ref: ref }, mergeStyles(elemProps, tableHeaderStencil())), children));
+        return (React.createElement(Element, { ref: ref, ...mergeStyles(elemProps, tableHeaderStencil()) }, children));
     },
 });

package/dist/es6/table/lib/TableRow.js

@@ -5,7 +5,7 @@ import { createStencil, createVars } from '@workday/canvas-kit-styling';
 const childrenVars = createVars({ id: "4d9bf5", args: ["cellNumber"] });
 // Styles for rows including dynamic sizing for amount of cells within a row
 const tableRowStencil = createStencil({
-    base: { name: "3b5604", styles: "box-sizing:border-box;display:grid;grid-auto-flow:column;grid-template-columns:repeat(var(--cellNumber-4d9bf5), minmax(10rem, 1fr));" }
+    base: { name: "hbbc5e", styles: "box-sizing:border-box;display:grid;grid-auto-flow:column;grid-template-columns:repeat(var(--cellNumber-4d9bf5), minmax(10rem, 1fr));" }
 }, "table-row-a6e914");
 export const TableRow = createComponent('tr')({
     displayName: 'Table.Row',
@@ -18,6 +18,6 @@ export const TableRow = createComponent('tr')({
          * This is the calculated amount of valid React children
          */
         const childrenArray = validChildren(children).length;
-        return (React.createElement(Element, Object.assign({ ref: ref }, mergeStyles(elemProps, [tableRowStencil(), { [childrenVars.cellNumber]: childrenArray }])), children));
+        return (React.createElement(Element, { ref: ref, ...mergeStyles(elemProps, [tableRowStencil(), { [childrenVars.cellNumber]: childrenArray }]) }, children));
     },
 });

package/dist/es6/tabs/lib/Tabs.d.ts

@@ -5876,7 +5876,7 @@ export declare const Tabs: import("@workday/canvas-kit-react/common").ComponentM
             }, {}, {}>;
             Text: import("@emotion/styled").StyledComponent<{
                 theme?: import("@emotion/react").Theme | undefined;
-                as?: React.ElementType<any> | undefined;
+                as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
             }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
         };
         Divider: import("@workday/canvas-kit-react/common").ElementComponent<"hr", unknown>;

package/dist/es6/tabs/lib/TabsItem.d.ts

@@ -233,6 +233,7 @@ export declare const useTabsItem: import("@workday/canvas-kit-react/common").Beh
     ref: (instance: HTMLElement | null) => void;
     'aria-hidden': true | undefined;
     style: {};
+    inert: string | undefined;
 } & {
     onKeyDown(event: React.KeyboardEvent<Element>): void;
     onClick(): void;

package/dist/es6/tabs/lib/TabsItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabsItem.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAIL,UAAU,EAIV,YAAY,EAKb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,GAAG,EAAE,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAYhE,MAAM,WAAW,aACf,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC,EACrC,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IACjC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;;;OAaG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,aAAa;;;;oDAwEzB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiBvB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiBnB,CAAC"}
+{"version":3,"file":"TabsItem.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAIL,UAAU,EAIV,YAAY,EAKb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,GAAG,EAAE,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAYhE,MAAM,WAAW,aACf,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC,EACrC,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IACjC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;;;OAaG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,aAAa;;;;oDAwEzB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiBvB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiBnB,CAAC"}

package/dist/es6/tabs/lib/TabsItem.js

@@ -92,5 +92,5 @@ export const TabsItem = createSubcomponent('button')({
 })(({ children, ...elemProps }, Element) => {
     const modality = useModalityType();
     return (React.createElement(OverflowTooltip, null,
-        React.createElement(StyledTabItem, Object.assign({ as: Element, maxWidth: modality === 'touch' ? undefined : 280 }, elemProps), children)));
+        React.createElement(StyledTabItem, { as: Element, maxWidth: modality === 'touch' ? undefined : 280, ...elemProps }, children)));
 });

package/dist/es6/tabs/lib/TabsList.js

@@ -23,9 +23,9 @@ export const TabsList = createSubcomponent('div')({
 })(({ children, overflowButton, ...elemProps }, Element, model) => {
     const modality = useModalityType();
     const touchStates = useTouchDirection();
-    return (React.createElement(StyledStack, Object.assign({ as: Element, position: "relative", borderBottom: `1px solid ${commonColors.divider}`, paddingX: modality === 'touch' ? 'zero' : 'm', gap: "xs", maskImage: modality === 'touch' && touchStates.isDragging
+    return (React.createElement(StyledStack, { as: Element, position: "relative", borderBottom: `1px solid ${commonColors.divider}`, paddingX: modality === 'touch' ? 'zero' : 'm', gap: "xs", maskImage: modality === 'touch' && touchStates.isDragging
             ? `linear-gradient(${touchStates.direction === 'left' ? 'to left' : 'to right'}, white 80%, transparent)`
-            : undefined }, elemProps),
+            : undefined, ...elemProps },
         useListRenderItems(model, children),
         overflowButton));
 });

package/dist/es6/tabs/lib/TabsMenuPopper.js

@@ -8,5 +8,5 @@ export const TabsMenuPopper = createSubcomponent('div')({
     modelHook: useMenuModel,
     elemPropsHook: useTabsMenuPopper,
 })(({ children, ...elemProps }) => {
-    return React.createElement(Popper, Object.assign({}, elemProps), children);
+    return React.createElement(Popper, { ...elemProps }, children);
 });

package/dist/es6/tabs/lib/TabsOverflowButton.js

@@ -16,7 +16,7 @@ export const TabsOverflowButton = createSubcomponent('button')({
     modelHook: useTabsModel,
     elemPropsHook: useTabsOverflowButton,
 })(({ children, ...elemProps }, Element) => {
-    return (React.createElement(StyledTabItem, Object.assign({ type: "button", gap: "xxxs", as: Element }, elemProps),
+    return (React.createElement(StyledTabItem, { type: "button", gap: "xxxs", as: Element, ...elemProps },
         React.createElement("span", null, children),
         React.createElement(SystemIcon, { icon: chevronDownSmallIcon })));
 });

package/dist/es6/tabs/lib/TabsPanel.js

@@ -29,5 +29,5 @@ export const TabsPanel = createSubcomponent('div')({
     modelHook: useTabsModel,
     elemPropsHook: useTabsPanel,
 })(({ children, ...elemProps }, Element) => {
-    return (React.createElement(StyledTabsPanel, Object.assign({ as: Element }, elemProps), children));
+    return (React.createElement(StyledTabsPanel, { as: Element, ...elemProps }, children));
 });

package/dist/es6/testing/lib/ComponentStatesTable.d.ts

@@ -22,5 +22,5 @@ export interface ComponentStatesTableProps {
      */
     children(props: Props): React.ReactNode;
 }
-export declare const ComponentStatesTable: ({ rowProps, columnProps, children, }: ComponentStatesTableProps) => JSX.Element;
+export declare const ComponentStatesTable: ({ rowProps, columnProps, children, }: ComponentStatesTableProps) => React.JSX.Element;
 //# sourceMappingURL=ComponentStatesTable.d.ts.map

package/dist/es6/testing/lib/ComponentStatesTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComponentStatesTable.d.ts","sourceRoot":"","sources":["../../../../testing/lib/ComponentStatesTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,eAAe,EAAE,KAAK,EAAC,MAAM,aAAa,CAAC;AAEnD;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC;;;;OAIG;IACH,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B;;;;OAIG;IACH,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B;;;OAGG;IACH,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC;CACzC;AAgBD,eAAO,MAAM,oBAAoB,yCAI9B,yBAAyB,gBAkC3B,CAAC"}
+{"version":3,"file":"ComponentStatesTable.d.ts","sourceRoot":"","sources":["../../../../testing/lib/ComponentStatesTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,eAAe,EAAE,KAAK,EAAC,MAAM,aAAa,CAAC;AAEnD;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC;;;;OAIG;IACH,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B;;;;OAIG;IACH,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B;;;OAGG;IACH,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC;CACzC;AAgBD,eAAO,MAAM,oBAAoB,yCAI9B,yBAAyB,sBAkC3B,CAAC"}

package/dist/es6/testing/lib/StaticStates.js

@@ -21,5 +21,5 @@ export const convertToStaticStates = obj => {
 export const StaticStates = ({ children, theme, ...elemProps }) => {
     const localTheme = useTheme(theme);
     localTheme._styleRewriteFn = convertToStaticStates;
-    return (React.createElement(CanvasProvider, Object.assign({ theme: localTheme }, elemProps), children));
+    return (React.createElement(CanvasProvider, { theme: localTheme, ...elemProps }, children));
 };