@workday/canvas-kit-react 10.3.2 → 10.3.5

package/dist/es6/radio/lib/Radio.js

@@ -85,17 +85,31 @@ const RadioInput = styled('input')({
             borderWidth: '2px',
             borderColor: variant === 'inverse' ? colors.blackPepper400 : themeFocusOutline,
             boxShadow: 'none',
-            ...{ boxShadow: `0 0 0 ${0} ${variant === 'inverse' ? colors.blackPepper400 : undefined}, 0 0 0 calc(${variant === 'inverse' ? 2 : 0} + ${0}) ${variant === 'inverse' ? colors.frenchVanilla100 : undefined}` },
+            ...focusRing({
+                width: variant === 'inverse' ? 2 : 0,
+                separation: 0,
+                animate: false,
+                innerColor: variant === 'inverse' ? colors.blackPepper400 : undefined,
+                outerColor: variant === 'inverse' ? colors.frenchVanilla100 : undefined,
+            }),
         },
     },
     '&:checked:focus ~ div:first-of-type': {
-        ...{ boxShadow: `0 0 0 ${2} ${variant === 'inverse' ? colors.blackPepper400 : undefined}, 0 0 0 calc(${2} + ${2}) ${variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline}` },
+        ...focusRing({
+            separation: 2,
+            width: 2,
+            innerColor: variant === 'inverse' ? colors.blackPepper400 : undefined,
+            outerColor: variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline,
+        }),
         borderColor: variant === 'inverse' ? colors.frenchVanilla100 : themePrimary.main,
         borderWidth: '2px',
     },
     ...mouseFocusBehavior({
         '&:focus ~ div:first-of-type': {
-            ...{ boxShadow: `0 0 0 ${"0px"} ${"--cnvs-base-palette-french-vanilla-100"}, 0 0 0 calc(${0} + ${"0px"}) ${variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline}` },
+            ...focusRing({
+                width: 0,
+                outerColor: variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline,
+            }),
             borderWidth: '1px',
             borderColor: checked
                 ? variant === 'inverse'

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

@@ -3,7 +3,8 @@ import { ExtractProps, Themeable } from '@workday/canvas-kit-react/common';
 import { Combobox } from '@workday/canvas-kit-react/combobox';
 import { TextInput } from '@workday/canvas-kit-react/text-input';
 import { CanvasSystemIcon } from '@workday/design-assets-types';
-export interface SelectInputProps extends ExtractProps<typeof TextInput> {
+import { CSProps } from '@workday/canvas-kit-styling';
+export interface SelectInputProps extends ExtractProps<typeof TextInput>, CSProps {
     /**
      * The Icon to render at the start of the `input`. Use this prop if your options
      * include icons that you would like to render in the `input` when selected.

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,EAEL,YAAY,EAEZ,SAAS,EACV,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,QAAQ,EAAC,MAAM,oCAAoC,CAAC;AAE5D,OAAO,EAAa,SAAS,EAAC,MAAM,sCAAsC,CAAC;AAO3E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,MAAM,WAAW,gBAAiB,SAAQ,YAAY,CAAC,OAAO,SAAS,CAAC;IACtE;;;;OAIG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AAUD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBvB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAWrB,CAAC;AAEH,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":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,YAAY,EAEZ,SAAS,EACV,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,QAAQ,EAAC,MAAM,oCAAoC,CAAC;AAE5D,OAAO,EAAa,SAAS,EAAC,MAAM,sCAAsC,CAAC;AAO3E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAe,OAAO,EAAC,MAAM,6BAA6B,CAAC;AAElE,MAAM,WAAW,gBAAiB,SAAQ,YAAY,CAAC,OAAO,SAAS,CAAC,EAAE,OAAO;IAC/E;;;;OAIG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AAqBD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0DvB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAWrB,CAAC;AAEH,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"}

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

@@ -9,15 +9,17 @@ import { useSelectModel } from './hooks/useSelectModel';
 import { useSelectCard } from './hooks/useSelectCard';
 import { useSelectInput } from './hooks/useSelectInput';
 import { createStyles } from '@workday/canvas-kit-styling';
-const selectInputStyles = createStyles({ name: "hi4l13", styles: "caret-color:transparent;cursor:default;&::selection{background-color:transparent;}" });
+const selectInputStyles = createStyles({ name: "1gpclr4", styles: "caret-color:transparent;cursor:default;&::selection{background-color:transparent;}" });
+const hiddenSelectStyles = createStyles({ name: "1uxiz6e", styles: "position:absolute;top:0px;bottom:0px;left:0px;right:0px;opacity:0px;cursor:default;pointer-events:none;" });
 export const SelectInput = createSubcomponent(TextInput)({
     modelHook: useSelectModel,
     elemPropsHook: useSelectInput,
-})(({ placeholder = 'Choose an option', inputStartIcon, ...elemProps }, Element, model) => {
+})(({ placeholder = 'Choose an option', inputStartIcon, error, textInputProps, disabled, ref, onChange, onInput, onFocus, value, name, ...elemProps }, Element, model) => {
     return (React.createElement(InputGroup, null,
         inputStartIcon && model.state.selectedIds.length > 0 && (React.createElement(InputGroup.InnerStart, { pointerEvents: "none" },
             React.createElement(SystemIcon, { icon: inputStartIcon }))),
-        React.createElement(InputGroup.Input, Object.assign({ as: Element, placeholder: placeholder }, mergeStyles(elemProps, [selectInputStyles]))),
+        React.createElement(InputGroup.Input, { error: error, disabled: disabled, className: hiddenSelectStyles, tabIndex: -1, "aria-hidden": true, onChange: onChange, onInput: onInput, value: value, onFocus: onFocus, name: name, ref: ref }),
+        React.createElement(InputGroup.Input, Object.assign({ as: Element, disabled: disabled, placeholder: placeholder, error: error }, textInputProps, mergeStyles(elemProps, [selectInputStyles]))),
         React.createElement(InputGroup.InnerEnd, { position: "absolute", pointerEvents: "none" },
             React.createElement(SystemIcon, { icon: caretDownSmallIcon }))));
 });

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

@@ -80,8 +80,13 @@ export declare const useSelectInput: import("@workday/canvas-kit-react/common").
     getId: (item: any) => string;
 }, {
     readonly onKeyDown: (event: React.KeyboardEvent) => void;
-    readonly ref: (instance: HTMLInputElement | null) => void;
+    readonly onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
     readonly autoComplete: "off";
+    readonly onFocus: () => void;
+    readonly textInputProps: {
+        readonly ref: React.RefObject<HTMLInputElement>;
+    };
+    readonly ref: (instance: HTMLInputElement | null) => void;
     readonly defaultValue: string | undefined;
 } & {
     onKeyDown(event: React.KeyboardEvent<Element>): void;

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;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAkBJ,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqCzC,CAAC"}
+{"version":3,"file":"useSelectInput.d.ts","sourceRoot":"","sources":["../../../../../select/lib/hooks/useSelectInput.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA8CF,mBAAmB;+BAvCP,MAAM,WAAW,CAAC,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0FvE,CAAC"}

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

@@ -1,13 +1,24 @@
-import { composeHooks, createElemPropsHook, useForkRef, useLocalRef, useResizeObserver, } from '@workday/canvas-kit-react/common';
+import React from 'react';
+import { composeHooks, createElemPropsHook, useLocalRef, useResizeObserver, dispatchInputEvent, } from '@workday/canvas-kit-react/common';
 import { useComboboxInput, useComboboxKeyboardTypeAhead, useComboboxMoveCursorToSelected, useComboboxResetCursorToSelected, } from '@workday/canvas-kit-react/combobox';
 import { useSelectModel } from './useSelectModel';
 /**
  * `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(createElemPropsHook(useSelectModel)((model, ref, elemProps = {}) => {
-    const { localRef, elementRef } = useLocalRef(useForkRef(ref, ref));
+    const { elementRef } = useLocalRef(ref);
+    const textInputRef = React.useRef(null);
+    // Update the text value of the input
+    const handleOnChange = (event) => {
+        var _a;
+        const value = (_a = model.navigation.getItem(event.target.value, model)) === null || _a === void 0 ? void 0 : _a.textValue;
+        const nativeInputValue = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(textInputRef.current), 'value');
+        if (nativeInputValue && nativeInputValue.set) {
+            nativeInputValue.set.call(textInputRef.current, value);
+        }
+    };
     useResizeObserver({
-        ref: localRef,
+        ref: textInputRef,
         onResize: data => {
             if (model.state.visibility === 'visible') {
                 // Width of the Input + 2px border + 8px padding
@@ -16,6 +27,20 @@ export const useSelectInput = composeHooks(createElemPropsHook(useSelectModel)((
             }
         },
     });
+    // The intent is if items are loaded after the component is rendered, it will update the input with the value.
+    // **Note: We might need to watch for other things or how often we should do this**
+    React.useEffect(() => {
+        if (model.state.inputRef.current &&
+            model.state.items.length > 0 &&
+            model.state.selectedIds[0]) {
+            const value = model.navigation.getItem(model.state.selectedIds[0], model).id;
+            if (model.state.inputRef.current.value !== value) {
+                // 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);
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [model.state.inputRef, model.state.items.length]);
     return {
         onKeyDown(event) {
             // Prevent the keys from being enter in the input
@@ -39,8 +64,21 @@ export const useSelectInput = composeHooks(createElemPropsHook(useSelectModel)((
                 }
             }
         },
-        ref: elementRef,
+        onChange: handleOnChange,
         autoComplete: 'off',
-        defaultValue: model.navigation.getItem(model.state.selectedIds[0], model).textValue || model.state.value,
+        // 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: elementRef,
+        // Account for the case where an initial item is selected when the Select first renders
+        defaultValue: model.state.selectedIds.length > 0 && model.state.items.length > 0
+            ? model.navigation.getItem(model.state.selectedIds[0], model).textValue ||
+                model.state.value
+            : undefined,
     };
 }), useComboboxKeyboardTypeAhead, useComboboxResetCursorToSelected, useComboboxMoveCursorToSelected, useComboboxInput);

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

@@ -1 +1 @@
-{"version":3,"file":"useSelectModel.d.ts","sourceRoot":"","sources":["../../../../../select/lib/hooks/useSelectModel.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAYzB,CAAC"}
+{"version":3,"file":"useSelectModel.d.ts","sourceRoot":"","sources":["../../../../../select/lib/hooks/useSelectModel.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAWzB,CAAC"}

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

@@ -24,6 +24,5 @@ export const useSelectModel = createModelHook({
     },
     contextOverride: useComboboxModel.Context,
 })(config => {
-    const model = useComboboxModel(config);
-    return model;
+    return useComboboxModel(config);
 });

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

@@ -31,7 +31,7 @@ const SwitchInput = styled('input')({
         '&:focus': {
             outline: 'none',
             '& ~ div:first-of-type': {
-                ...{ boxShadow: `0 0 0 ${2} ${"--cnvs-base-palette-french-vanilla-100"}, 0 0 0 calc(${"2px"} + ${2}) ${"--cnvs-brand-common-focus-outline"}` },
+                ...focusRing({ separation: 2, animate: false }, theme),
             },
         },
         '& ~ div:first-of-type': {
@@ -41,7 +41,7 @@ const SwitchInput = styled('input')({
           0 0 0 5px ${errorColors.outer}`,
         },
         '&:focus ~ div:first-of-type': {
-            ...{ boxShadow: `0 0 0 ${2} ${"--cnvs-base-palette-french-vanilla-100"}, 0 0 0 calc(${"2px"} + ${2}) ${"--cnvs-brand-common-focus-outline"}` },
+            ...focusRing({ separation: 2, animate: false }, theme),
         },
     };
     return {

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

@@ -31,7 +31,7 @@ export const StyledTabItem = styled(Box.as('button'))(({ theme }) => ({
     },
     '&:focus': {
         outline: `none`,
-        ...{ boxShadow: `inset 0 0 0 ${2} ${"--cnvs-brand-common-focus-outline"} inset 0 0 0 calc(${0} + ${2}) ${"--cnvs-base-palette-french-vanilla-100"}` },
+        ...focusRing({ inset: 'outer', width: 0, separation: 2 }, theme),
     },
     '&:disabled, &[aria-disabled]': {
         color: colors.licorice100,

package/dist/es6/text-input/lib/TextInput.js

@@ -15,10 +15,10 @@ const StyledTextInput = styled('input')({
     '&::placeholder': {
         color: inputColors.placeholder,
     },
-    '&:hover': {
+    '&:hover, &.hover': {
         borderColor: inputColors.hoverBorder,
     },
-    '&:focus:not([disabled])': {
+    '&:focus-visible:not([disabled]), &.focus:not([disabled]), &:focus:not([disabled])': {
         borderColor: inputColors.focusBorder,
         boxShadow: `inset 0 0 0 1px ${inputColors.focusBorder}`,
         outline: 'none',
@@ -41,7 +41,7 @@ const StyledTextInput = styled('input')({
     width: '100%',
 }, ({ theme, error }) => {
     return {
-        '&:focus:not([disabled])': {
+        '&:focus-visible:not([disabled]), &.focus:not([disabled])': {
             borderColor: theme.canvas.palette.common.focusOutline,
             boxShadow: `inset 0 0 0 1px ${theme.canvas.palette.common.focusOutline}`,
             outline: 'none',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "10.3.2",
+  "version": "10.3.5",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -50,8 +50,8 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^10.3.2",
-    "@workday/canvas-kit-styling": "^10.3.2",
+    "@workday/canvas-kit-popup-stack": "^10.3.5",
+    "@workday/canvas-kit-styling": "^10.3.5",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^1.0.0",
     "@workday/design-assets-types": "^0.2.8",
@@ -69,5 +69,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "07021e74cb126d51459bb4046b3760bf2573a007"
+  "gitHead": "ff2e0a2ef7bfedfa90006e0195ac8fcc1039b39c"
 }

package/select/lib/Select.tsx

@@ -15,9 +15,9 @@ import {useSelectModel} from './hooks/useSelectModel';
 import {useSelectCard} from './hooks/useSelectCard';
 import {useSelectInput} from './hooks/useSelectInput';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {createStyles} from '@workday/canvas-kit-styling';
+import {createStyles, CSProps} from '@workday/canvas-kit-styling';
 
-export interface SelectInputProps extends ExtractProps<typeof TextInput> {
+export interface SelectInputProps extends ExtractProps<typeof TextInput>, CSProps {
   /**
    * The Icon to render at the start of the `input`. Use this prop if your options
    * include icons that you would like to render in the `input` when selected.
@@ -34,11 +34,39 @@ const selectInputStyles = createStyles({
   },
 });
 
+const hiddenSelectStyles = createStyles({
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0,
+  opacity: 0,
+  cursor: 'default',
+  pointerEvents: 'none',
+});
+
 export const SelectInput = createSubcomponent(TextInput)({
   modelHook: useSelectModel,
   elemPropsHook: useSelectInput,
 })<SelectInputProps>(
-  ({placeholder = 'Choose an option', inputStartIcon, ...elemProps}, Element, model) => {
+  (
+    {
+      placeholder = 'Choose an option',
+      inputStartIcon,
+      error,
+      textInputProps,
+      disabled,
+      ref,
+      onChange,
+      onInput,
+      onFocus,
+      value,
+      name,
+      ...elemProps
+    },
+    Element,
+    model
+  ) => {
     return (
       <InputGroup>
         {inputStartIcon && model.state.selectedIds.length > 0 && (
@@ -46,11 +74,29 @@ export const SelectInput = createSubcomponent(TextInput)({
             <SystemIcon icon={inputStartIcon} />
           </InputGroup.InnerStart>
         )}
+        {/* Hidden input to handle ids */}
+        <InputGroup.Input
+          error={error}
+          disabled={disabled}
+          className={hiddenSelectStyles}
+          tabIndex={-1}
+          aria-hidden={true}
+          onChange={onChange}
+          onInput={onInput}
+          value={value}
+          onFocus={onFocus}
+          name={name}
+          ref={ref}
+        />
+        {/* Visual input */}
         <InputGroup.Input
           as={Element}
+          disabled={disabled}
           placeholder={placeholder}
+          error={error}
+          {...textInputProps}
           {...mergeStyles(elemProps, [selectInputStyles])}
-        ></InputGroup.Input>
+        />
         <InputGroup.InnerEnd position="absolute" pointerEvents="none">
           <SystemIcon icon={caretDownSmallIcon} />
         </InputGroup.InnerEnd>

package/select/lib/hooks/useSelectInput.ts

@@ -2,9 +2,9 @@ import React from 'react';
 import {
   composeHooks,
   createElemPropsHook,
-  useForkRef,
   useLocalRef,
   useResizeObserver,
+  dispatchInputEvent,
 } from '@workday/canvas-kit-react/common';
 import {
   useComboboxInput,
@@ -18,56 +18,98 @@ import {useSelectModel} from './useSelectModel';
  * `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(
-  createElemPropsHook(useSelectModel)((model, ref, elemProps: {keySofar?: string} = {}) => {
-    const {localRef, elementRef} = useLocalRef<HTMLInputElement>(
-      useForkRef(ref as React.Ref<HTMLElement>, ref)
-    );
+  createElemPropsHook(useSelectModel)(
+    (model, ref, elemProps: {keySofar?: string; placeholder?: string} = {}) => {
+      const {elementRef} = useLocalRef<HTMLInputElement>(ref as any);
+      const textInputRef = React.useRef<HTMLInputElement>(null);
 
-    useResizeObserver({
-      ref: localRef,
-      onResize: data => {
-        if (model.state.visibility === 'visible') {
-          // Width of the Input + 2px border + 8px padding
-          const calculatedWidth = data.width ? data.width + 42 + 8 : 0;
-          model.events.setWidth(calculatedWidth);
+      // Update the text value of the input
+      const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const value = model.navigation.getItem(event.target.value, model)?.textValue;
+        const nativeInputValue = Object.getOwnPropertyDescriptor(
+          Object.getPrototypeOf(textInputRef.current),
+          'value'
+        );
+        if (nativeInputValue && nativeInputValue.set) {
+          nativeInputValue.set.call(textInputRef.current, value);
         }
-      },
-    });
+      };
 
-    return {
-      onKeyDown(event: React.KeyboardEvent) {
-        // Prevent the keys from being enter in the input
-        if (event.key !== 'Tab') {
-          event.preventDefault();
-        }
-
-        // Select should open if Spacebar is typed and nothing has been typed AND the menu is hidden
-        if (
-          event.key === 'Spacebar' ||
-          (event.key === ' ' && model.state.visibility === 'hidden' && elemProps?.keySofar === '')
-        ) {
-          model.events.show();
-        }
-        // if the menu is visible
+      useResizeObserver({
+        ref: textInputRef,
+        onResize: data => {
+          if (model.state.visibility === 'visible') {
+            // Width of the Input + 2px border + 8px padding
+            const calculatedWidth = data.width ? data.width + 42 + 8 : 0;
+            model.events.setWidth(calculatedWidth);
+          }
+        },
+      });
+      // The intent is if items are loaded after the component is rendered, it will update the input with the value.
+      // **Note: We might need to watch for other things or how often we should do this**
+      React.useEffect(() => {
         if (
-          (event.key === 'Spacebar' || event.key === ' ') &&
-          model.state.visibility === 'visible'
+          model.state.inputRef.current &&
+          model.state.items.length > 0 &&
+          model.state.selectedIds[0]
         ) {
-          // If key so far is empty, they're done typing, select the item where the cursor is located and hide the menu
-          if (elemProps?.keySofar === '') {
-            model.events.select({
-              id: model.state.cursorId,
-            });
-            model.events.hide();
+          const value = model.navigation.getItem(model.state.selectedIds[0], model).id;
+          if (model.state.inputRef.current.value !== value) {
+            // 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);
           }
         }
-      },
-      ref: elementRef,
-      autoComplete: 'off',
-      defaultValue:
-        model.navigation.getItem(model.state.selectedIds[0], model).textValue || model.state.value,
-    } as const;
-  }),
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, [model.state.inputRef, model.state.items.length]);
+
+      return {
+        onKeyDown(event: React.KeyboardEvent) {
+          // Prevent the keys from being enter in the input
+          if (event.key !== 'Tab') {
+            event.preventDefault();
+          }
+
+          // Select should open if Spacebar is typed and nothing has been typed AND the menu is hidden
+          if (
+            event.key === 'Spacebar' ||
+            (event.key === ' ' && model.state.visibility === 'hidden' && elemProps?.keySofar === '')
+          ) {
+            model.events.show();
+          }
+          // if the menu is visible
+          if (
+            (event.key === 'Spacebar' || event.key === ' ') &&
+            model.state.visibility === 'visible'
+          ) {
+            // If key so far is empty, they're done typing, select the item where the cursor is located and hide the menu
+            if (elemProps?.keySofar === '') {
+              model.events.select({
+                id: model.state.cursorId,
+              });
+              model.events.hide();
+            }
+          }
+        },
+        onChange: handleOnChange,
+        autoComplete: 'off',
+        // When the hidden input is focused, we want to show the focus/hover states of the input that sits below it.
+        onFocus() {
+          textInputRef.current?.focus();
+        },
+        textInputProps: {
+          ref: textInputRef,
+        },
+        ref: elementRef,
+
+        // Account for the case where an initial item is selected when the Select first renders
+        defaultValue:
+          model.state.selectedIds.length > 0 && model.state.items.length > 0
+            ? model.navigation.getItem(model.state.selectedIds[0], model).textValue ||
+              model.state.value
+            : undefined,
+      } as const;
+    }
+  ),
   useComboboxKeyboardTypeAhead,
   useComboboxResetCursorToSelected,
   useComboboxMoveCursorToSelected,

package/select/lib/hooks/useSelectModel.tsx

@@ -25,6 +25,5 @@ export const useSelectModel = createModelHook({
   },
   contextOverride: useComboboxModel.Context,
 })(config => {
-  const model = useComboboxModel(config);
-  return model;
+  return useComboboxModel(config);
 });

package/text-input/lib/TextInput.tsx

@@ -38,10 +38,10 @@ const StyledTextInput = styled('input')<
     '&::placeholder': {
       color: inputColors.placeholder,
     },
-    '&:hover': {
+    '&:hover, &.hover': {
       borderColor: inputColors.hoverBorder,
     },
-    '&:focus:not([disabled])': {
+    '&:focus-visible:not([disabled]), &.focus:not([disabled]), &:focus:not([disabled])': {
       borderColor: inputColors.focusBorder,
       boxShadow: `inset 0 0 0 1px ${inputColors.focusBorder}`,
       outline: 'none',
@@ -68,7 +68,7 @@ const StyledTextInput = styled('input')<
     },
   ({theme, error}) => {
     return {
-      '&:focus:not([disabled])': {
+      '&:focus-visible:not([disabled]), &.focus:not([disabled])': {
         borderColor: theme.canvas.palette.common.focusOutline,
         boxShadow: `inset 0 0 0 1px ${theme.canvas.palette.common.focusOutline}`,
         outline: 'none',