@workday/canvas-kit-preview-react 7.0.0-alpha.103-next.28 → 7.0.0-alpha.129-next.3

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

@@ -74,8 +74,7 @@ var Option = styled('li')(__assign(__assign({}, type.levels.subtext.large), { cu
         padding: optionPadding + "px " + (error === ErrorType.Alert ? optionPadding - 1 : optionPadding) + "px",
     });
 });
-var SelectOption = function (_a) {
+export var SelectOption = function (_a) {
     var children = _a.children, _b = _a.focused, focused = _b === void 0 ? false : _b, _c = _a.interactive, interactive = _c === void 0 ? true : _c, optionRef = _a.optionRef, value = _a.value, elemProps = __rest(_a, ["children", "focused", "interactive", "optionRef", "value"]);
     return (React.createElement(Option, __assign({ "data-value": value, focused: focused, interactive: interactive, ref: optionRef, role: "option" }, elemProps), children));
 };
-export default SelectOption;

package/dist/es6/side-panel/index.d.ts

@@ -1,6 +1,3 @@
-import SidePanel from './lib/SidePanel';
-export default SidePanel;
-export { SidePanel };
 export * from './lib/hooks';
 export * from './lib/SidePanel';
 //# sourceMappingURL=index.d.ts.map

package/dist/es6/side-panel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../side-panel/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,iBAAiB,CAAC;AAExC,eAAe,SAAS,CAAC;AACzB,OAAO,EAAC,SAAS,EAAC,CAAC;AACnB,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../side-panel/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC"}

package/dist/es6/side-panel/index.js

@@ -1,5 +1,2 @@
-import SidePanel from './lib/SidePanel';
-export default SidePanel;
-export { SidePanel };
 export * from './lib/hooks';
 export * from './lib/SidePanel';

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

@@ -66,7 +66,7 @@ export declare const SidePanelContext: React.Context<{
     state: string;
     origin: string;
 }>;
-declare const SidePanel: {
+export declare const SidePanel: {
     ({ as, children, collapsedWidth, expanded, expandedWidth, onAnimationEnd, onAnimationStart, onExpandedChange, onStateTransition, origin, variant, touched, ...elemProps }: SidePanelProps): jsx.JSX.Element;
     ToggleButton: ({ variant, icon, tooltipTextExpand: expandLabel, tooltipTextCollapse: collapseLabel, ...rest }: ToggleButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>) => jsx.JSX.Element;
 };
@@ -82,5 +82,4 @@ export declare type ToggleButtonProps = TertiaryButtonProps & {
      */
     tooltipTextCollapse?: string;
 };
-export default SidePanel;
 //# sourceMappingURL=SidePanel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,0BAA0B;AAC1B,eAAe;AACf,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAM,GAAG,EAAuB,MAAM,gBAAgB,CAAC;AAC9D,OAAO,EAAiB,mBAAmB,EAAC,MAAM,kCAAkC,CAAC;AAKrF,oBAAY,gBAAgB,GAAG,UAAU,GAAG,WAAW,CAAC;AACxD,oBAAY,yBAAyB,GAAG,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,CAAC;AAE9F,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;;;OAIG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAChE;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B;;;;OAIG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB;AAsCD,eAAO,MAAM,gBAAgB;;;EAG3B,CAAC;AAEH,QAAA,MAAM,SAAS;+KAcZ,cAAc;mHA0Gd,iBAAiB,GAAG,MAAM,oBAAoB,CAAC,iBAAiB,CAAC;CAxBnE,CAAC;AAEF,oBAAY,iBAAiB,GAAG,mBAAmB,GAAG;IACpD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC;AAgDF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,0BAA0B;AAC1B,eAAe;AACf,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAM,GAAG,EAAuB,MAAM,gBAAgB,CAAC;AAC9D,OAAO,EAAiB,mBAAmB,EAAC,MAAM,kCAAkC,CAAC;AAKrF,oBAAY,gBAAgB,GAAG,UAAU,GAAG,WAAW,CAAC;AACxD,oBAAY,yBAAyB,GAAG,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,CAAC;AAE9F,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;;;OAIG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAChE;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B;;;;OAIG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB;AAsCD,eAAO,MAAM,gBAAgB;;;EAG3B,CAAC;AAEH,eAAO,MAAM,SAAS;+KAcnB,cAAc;mHA0Gd,iBAAiB,GAAG,MAAM,oBAAoB,CAAC,iBAAiB,CAAC;CAxBnE,CAAC;AAEF,oBAAY,iBAAiB,GAAG,mBAAmB,GAAG;IACpD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC"}

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

@@ -56,7 +56,7 @@ export var SidePanelContext = React.createContext({
     state: 'expanded',
     origin: 'left',
 });
-var SidePanel = function (_a) {
+export var SidePanel = function (_a) {
     var _b = _a.as, as = _b === void 0 ? 'section' : _b, children = _a.children, _c = _a.collapsedWidth, collapsedWidth = _c === void 0 ? 64 : _c, _d = _a.expanded, expanded = _d === void 0 ? true : _d, _e = _a.expandedWidth, expandedWidth = _e === void 0 ? 320 : _e, onAnimationEnd = _a.onAnimationEnd, onAnimationStart = _a.onAnimationStart, onExpandedChange = _a.onExpandedChange, onStateTransition = _a.onStateTransition, _f = _a.origin, origin = _f === void 0 ? 'left' : _f, _g = _a.variant, variant = _g === void 0 ? 'standard' : _g, touched = _a.touched, elemProps = __rest(_a, ["as", "children", "collapsedWidth", "expanded", "expandedWidth", "onAnimationEnd", "onAnimationStart", "onExpandedChange", "onStateTransition", "origin", "variant", "touched"]);
     var _h = React.useState(expanded ? 'expanded' : 'collapsed'), state = _h[0], setState = _h[1];
     React.useEffect(function () {
@@ -146,5 +146,4 @@ var ToggleButton = function (_a) {
         jsx(TertiaryButton, __assign({ type: "button", css: buttonStyle, icon: icon, variant: variant }, rest))));
 };
 SidePanel.ToggleButton = ToggleButton;
-export default SidePanel;
 var templateObject_1;

package/form-field/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/form-field",
   "module": "../dist/es6/form-field",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/form-field"
 }

package/menu/index.ts

@@ -1,7 +1,2 @@
-import Menu, {MenuProps} from './lib/Menu';
-import MenuItem from './lib/MenuItem';
-
-export {Menu, MenuItem, MenuProps};
-
-export default Menu;
+export * from './lib/Menu';
 export * from './lib/MenuItem';

package/menu/lib/Menu.tsx

@@ -57,7 +57,7 @@ const List = styled('ul')({
   ...hideMouseFocus,
 });
 
-export default class Menu extends React.Component<MenuProps, MenuState> {
+export class Menu extends React.Component<MenuProps, MenuState> {
   private id = generateUniqueId();
   private animateId!: number;
 
@@ -284,7 +284,7 @@ export default class Menu extends React.Component<MenuProps, MenuState> {
   private setFirstCharacters = (): void => {
     const getFirstCharacter = (child: React.ReactNode): string => {
       let character = '';
-      if (!child || typeof child === 'boolean' || child === {}) {
+      if (!child || typeof child === 'boolean') {
         character = '';
       } else if (typeof child === 'string' || typeof child === 'number') {
         character = child

package/menu/lib/MenuItem.tsx

@@ -237,7 +237,7 @@ const scrollIntoViewIfNeeded = (elem: HTMLElement, centerIfNeeded = true): void
   }
 };
 
-class MenuItem extends React.Component<MenuItemProps> {
+export class MenuItem extends React.Component<MenuItemProps> {
   ref = React.createRef<HTMLLIElement>();
 
   componentDidUpdate = (prevProps: MenuItemProps) => {
@@ -310,5 +310,3 @@ MenuItem.defaultProps = {
   shouldClose: true,
   role: 'menuitem',
 };
-
-export default MenuItem;

package/menu/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/menu",
   "module": "../dist/es6/menu",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/menu"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-react",
-  "version": "7.0.0-alpha.103-next.28+a55aeef9",
+  "version": "7.0.0-alpha.129-next.3+f4cdec5a",
   "description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -10,7 +10,8 @@
   "types": "dist/es6/index.d.ts",
   "repository": {
     "type": "git",
-    "url": "http://github.com/Workday/canvas-kit/tree/master/modules/canvas-kit-preview-react"
+    "url": "https://github.com/workday/canvas-kit.git",
+    "directory": "modules/preview-react"
   },
   "files": [
     "*/package.json",
@@ -40,20 +41,20 @@
     "workday"
   ],
   "peerDependencies": {
-    "react": "^16.8 || ^17.0"
+    "react": "^17.0 || ^18.0"
   },
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^7.0.0-alpha.103-next.28+a55aeef9",
+    "@workday/canvas-kit-react": "^7.0.0-alpha.129-next.3+f4cdec5a",
     "@workday/canvas-system-icons-web": "^3.0.0",
-    "@workday/design-assets-types": "^0.2.4"
+    "@workday/design-assets-types": "^0.2.8"
   },
   "devDependencies": {
     "@workday/canvas-accent-icons-web": "^3.0.0",
-    "@workday/canvas-kit-labs-react": "^7.0.0-alpha.103-next.28+a55aeef9",
+    "@workday/canvas-kit-labs-react": "^7.0.0-alpha.129-next.3+f4cdec5a",
     "formik": "^2.2.9",
     "yup": "^0.31.1"
   },
-  "gitHead": "a55aeef97c5138c9b1144584287afa8cac6fe17f"
+  "gitHead": "f4cdec5aa17c18b03695a3c99417e384fd9aecdc"
 }

package/pill/lib/Pill.tsx

@@ -92,6 +92,7 @@ const getRemovablePillColors = (disabled?: boolean) => {
       icon: colors.licorice200,
       background: colors.soap300,
       label: colors.blackPepper400,
+
       focusRing: focusRing({
         width: 0,
         innerColor: 'transparent',
@@ -124,7 +125,6 @@ const StyledBasePill = styled(BaseButton.as('button'))<StyledType & PillProps>(
   {
     ...pillBaseStyles,
     '&:focus': {
-      borderColor: colors.blueberry400,
       'span[data-count="ck-pill-count"]': {
         borderTop: `1px solid ${colors.blueberry400}`,
         borderBottom: `1px solid ${colors.blueberry400}`,
@@ -146,12 +146,18 @@ const StyledBasePill = styled(BaseButton.as('button'))<StyledType & PillProps>(
       },
     }),
   },
+  ({variant}) => ({
+    '&:focus': {
+      borderColor: variant === 'removable' ? undefined : colors.blueberry400,
+    },
+  }),
   boxStyleFn
 );
 
-const StyledNonInteractivePill = styled(StyledBasePill)({
+const StyledNonInteractivePill = styled(StyledBasePill)<StyledType>({
   cursor: 'default',
   overflow: 'revert', // override BaseButton overflow styles so the click target exists outside the pill for removable
+  position: 'relative',
 });
 
 export const Pill = createContainer('button')({
@@ -171,6 +177,7 @@ export const Pill = createContainer('button')({
           maxWidth={model.state.maxWidth}
           as={Element !== 'button' ? Element : 'span'}
           border={`1px solid ${colors.licorice200}`}
+          id={model.state.id}
           {...elemProps}
         >
           <PillLabel>{elemProps.children}</PillLabel>
@@ -201,6 +208,7 @@ export const Pill = createContainer('button')({
         <StyledNonInteractivePill
           colors={getRemovablePillColors(model.state.disabled)}
           as={Element !== 'button' ? Element : 'span'}
+          variant={variant}
           {...elemProps}
         >
           <HStack spacing="xxxs" display="inline-flex" alignItems="center" justifyContent="center">

package/pill/lib/PillAvatar.tsx

@@ -17,6 +17,7 @@ export const PillAvatar = createSubcomponent('button')({
       style={{opacity: model.state.disabled ? '.7' : '1'}}
       as="div"
       size={18}
+      altText={undefined}
       {...elemProps}
       disabled={model.state.disabled}
     >

package/pill/lib/PillIcon.tsx

@@ -25,6 +25,8 @@ export const PillIcon = createSubcomponent('span')({
       display="flex"
       as={Element}
       size={20}
+      role="img"
+      aria-label="add"
       icon={icon || plusIcon}
       {...elemProps}
     />

package/pill/lib/PillIconButton.tsx

@@ -6,7 +6,7 @@ import {SystemIcon, SystemIconProps} from '@workday/canvas-kit-react/icon';
 import {usePillModel} from './usePillModel';
 import {xSmallIcon} from '@workday/canvas-system-icons-web';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {borderRadius, colors, space} from '@workday/canvas-kit-react/tokens';
+import {colors, space} from '@workday/canvas-kit-react/tokens';
 import {BaseButton} from '@workday/canvas-kit-react/button';
 
 export interface PillIconButtonProps extends Omit<SystemIconProps, 'icon'> {
@@ -15,6 +15,11 @@ export interface PillIconButtonProps extends Omit<SystemIconProps, 'icon'> {
    * @default `xSmallIcon`
    */
   icon?: CanvasSystemIcon;
+  /**
+   * The aria label for the removable icon
+   * @default 'remove'
+   */
+  'aria-label'?: string;
 }
 
 const getIconColors = () => {
@@ -33,9 +38,7 @@ const getIconColors = () => {
       icon: colors.licorice500,
 
       focusRing: focusRing({
-        width: 0,
         innerColor: 'transparent',
-        outerColor: 'transparent',
       }),
     },
     disabled: {
@@ -45,51 +48,52 @@ const getIconColors = () => {
   };
 };
 
-const StyledFocusTarget = styled('span')<StyledType & PillIconButtonProps>({
-  height: 20,
-  position: 'absolute',
-  right: '5px',
-  left: space.xxxs,
-  margin: 0,
-  borderRadius: borderRadius.m,
-  '&:focus': {
-    outline: 'none',
-    ...focusRing({
-      outerColor: colors.blueberry400,
-      innerColor: 'transparent',
-      separation: 0,
-      width: 2,
-      inset: 'inner',
-    }),
-  },
-});
-
 const StyledIconButton = styled(BaseButton)<StyledType & PillIconButtonProps>({
-  marginInlineEnd: '-14px !important', // visually pull in the pill to the right size
-  paddingInlineEnd: space.xxxs, // add 4px padding outside the pill for click target
-  marginInlineStart: `-${space.xxs} !important`, // visually create space between label and the button
+  marginInlineEnd: '-7px', // visually pull in the pill to the right size
+  marginInlineStart: `-2px`, // visually create space between label and the button
+  overflow: 'visible',
+  '::after': {
+    content: '""',
+    height: space.l,
+    width: space.l,
+    position: 'absolute',
+    left: '-7px',
+    bottom: '-7px',
+    margin: 0,
+    pointerEvents: 'all',
+    cursor: 'pointer',
+  },
 });
 
 export const PillIconButton = createSubcomponent('button')({
   modelHook: usePillModel,
 })<PillIconButtonProps>(
-  ({size, icon = xSmallIcon, maxWidth, children, ...elemProps}, Element, model) => {
+  (
+    {size, icon = xSmallIcon, maxWidth, children, 'aria-label': ariaLabel = 'remove', ...elemProps},
+    Element,
+    model
+  ) => {
     return (
       <StyledIconButton
         borderRadius="s"
-        height={space.l}
-        width={space.l}
+        height={20}
+        width={20}
         padding="zero"
         disabled={model.state.disabled}
         colors={getIconColors()}
-        tabIndex={-1}
+        aria-labelledby={`removable-${model.state.id} label-${model.state.id}`}
         as={Element}
         position="relative"
         {...elemProps}
       >
-        {/* We made the clickable element in this case the button larger, and have the span be the visible focus area */}
-        <StyledFocusTarget aria-hidden="true" tabIndex={model.state.disabled ? -1 : 0} />
-        <SystemIcon icon={icon} size={24} />
+        <SystemIcon
+          aria-label={ariaLabel}
+          id={`removable-${model.state.id}`}
+          icon={icon}
+          size={space.m}
+          aria-hidden // This works for Chrome but not needed in Safari
+          role="img"
+        />
       </StyledIconButton>
     );
   }

package/pill/lib/PillLabel.tsx

@@ -26,6 +26,7 @@ export const PillLabel = createSubcomponent('span')({
         color={model.state.disabled ? colors.licorice100 : 'inherit'}
         maxWidth={model.state.maxWidth}
         as={Element}
+        id={`label-${model.state.id}`}
         {...elemProps}
       >
         {elemProps.children}

package/pill/lib/usePillModel.tsx

@@ -1,4 +1,4 @@
-import {createModelHook} from '@workday/canvas-kit-react/common';
+import {createModelHook, useUniqueId} from '@workday/canvas-kit-react/common';
 
 export const usePillModel = createModelHook({
   defaultConfig: {
@@ -11,10 +11,17 @@ export const usePillModel = createModelHook({
      * Use to disable a pill.
      */
     disabled: false,
+    /**
+     * ID used to add accessibility labels to pill elements.
+     * @default `useUniqueId()`
+     */
+    id: '',
   },
 })(config => {
+  const id = useUniqueId(config.id);
   const state = {
     ...config,
+    id,
   };
 
   return {state, events: {}};

package/pill/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/pill",
   "module": "../dist/es6/pill",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/pill"
 }

package/select/README.md

@@ -34,7 +34,7 @@ fully accessible (see below).
 
 ```tsx
 import * as React from 'react';
-import Select from '@workday/canvas-kit-preview-react/select';
+import {Select} from '@workday/canvas-kit-preview-react/select';
 
 function Example() {
   const options = [
@@ -58,8 +58,8 @@ function Example() {
 
 ```tsx
 import * as React from 'react';
-import Select from '@workday/canvas-kit-preview-react/select';
-import FormField from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 
 function Example() {
   const options = [
@@ -89,8 +89,8 @@ function Example() {
 
 ```tsx
 import * as React from 'react';
-import Select from '@workday/canvas-kit-preview-react/select';
-import FormField from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 
 function Example() {
   const options = ['California', 'Florida', 'New York', 'Pennsylvania', 'Texas'];
@@ -117,8 +117,8 @@ used to customize how each option is rendered.
 
 ```tsx
 import * as React from 'react';
-import Select from '@workday/canvas-kit-preview-react/select';
-import FormField from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {colors, typeColors} from '@workday/canvas-kit-react/tokens';
 import {
   activityStreamIcon,

package/select/index.ts

@@ -1,7 +1,9 @@
-import Select from './lib/Select';
 
-export default Select;
-export {Select};
 export * from './lib/Select';
 
-export {Option, RenderableOption, RenderOptionFunction} from './lib/SelectBase';
+export {
+  Option,
+  RenderableOption,
+  RenderOptionFunction,
+  RenderSelectedFunction,
+} from './lib/SelectBase';

package/select/lib/Select.tsx

@@ -7,7 +7,7 @@ import {
   generateUniqueId,
 } from '@workday/canvas-kit-react/common';
 import {menuAnimationDuration} from './SelectMenu';
-import SelectBase, {CoreSelectBaseProps, Option, NormalizedOption} from './SelectBase';
+import {SelectBase, CoreSelectBaseProps, Option, NormalizedOption} from './SelectBase';
 import {MenuVisibility} from './types';
 import {getCorrectedIndexByValue} from './utils';
 
@@ -587,5 +587,3 @@ export const Select = createComponent('button')({
     ErrorType,
   },
 });
-
-export default Select;

package/select/lib/SelectBase.tsx

@@ -20,8 +20,8 @@ import {
 import {caretDownSmallIcon} from '@workday/canvas-system-icons-web';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
 
-import SelectMenu from './SelectMenu';
-import SelectOption from './SelectOption';
+import {SelectMenu} from './SelectMenu';
+import {SelectOption} from './SelectOption';
 import {scrollIntoViewIfNeeded} from './scrolling';
 import {MenuPlacement, MenuVisibility} from './types';
 import {getCorrectedIndexByValue} from './utils';
@@ -49,6 +49,10 @@ export interface NormalizedOption extends Option {
   label: string;
 }
 
+export interface RenderSelectedFunction {
+  (option: NormalizedOption): React.ReactNode;
+}
+
 export interface RenderableOption extends NormalizedOption {
   focused: boolean;
   selected: boolean;
@@ -86,6 +90,22 @@ export interface CoreSelectBaseProps
    * @default defaultRenderOption
    */
   renderOption?: RenderOptionFunction;
+  /**
+   * The function called to render the selected option.
+   *
+   * The `option` argument passed to the function is an object which contains the following:
+   *
+   * * `data: object` (data object carried over from the corresponding option originally passed into the component)
+   * * `disabled: boolean`
+   * * `id: string`
+   * * `label: string`
+   * * `value: string`
+   *
+   * If you omit the `renderSelected` prop, each option will be rendered using a `defaultRenderSelected` function provided by the component.
+   *
+   * @default defaultRenderSelected
+   */
+  renderSelected?: RenderSelectedFunction;
   /**
    * The value of the Select.
    */
@@ -261,10 +281,14 @@ const SelectWrapper = styled('div')<Pick<SelectBaseProps, 'grow' | 'disabled'>>(
 );
 
 const defaultRenderOption: RenderOptionFunction = option => {
-  return <div>{option.label}</div>;
+  return <div>{defaultRenderSelected(option)}</div>;
+};
+
+const defaultRenderSelected: RenderSelectedFunction = option => {
+  return option.label;
 };
 
-const SelectBase = ({
+export const SelectBase = ({
   'aria-labelledby': ariaLabelledBy,
   'aria-required': ariaRequired,
   as,
@@ -284,6 +308,7 @@ const SelectBase = ({
   onOptionSelection,
   options,
   renderOption = defaultRenderOption,
+  renderSelected = defaultRenderSelected,
   required,
   shouldMenuAutoFlip = true,
   shouldMenuAutoFocus = true,
@@ -393,7 +418,6 @@ const SelectBase = ({
   // Do a bit of error-checking in case options weren't provided
   const hasOptions = options.length > 0;
   const selectedOption = hasOptions ? options[getCorrectedIndexByValue(options, value)] : null;
-  const selectedOptionLabel = selectedOption ? selectedOption.label : '';
   const selectedOptionValue = selectedOption ? selectedOption.value : '';
 
   return (
@@ -419,7 +443,7 @@ const SelectBase = ({
         value={selectedOptionValue}
         {...elemProps}
       >
-        {selectedOptionLabel}
+        {!!selectedOption && renderSelected(selectedOption)}
       </SelectButton>
       <SelectInput onChange={onChange} ref={inputRef} type="text" value={selectedOptionValue} />
       {hasOptions && menuVisibility !== 'closed' && (
@@ -451,5 +475,3 @@ const SelectBase = ({
     </SelectWrapper>
   );
 };
-
-export default SelectBase;

package/select/lib/SelectMenu.tsx

@@ -223,7 +223,7 @@ const generatePopperOptions = (
   };
 };
 
-const SelectMenu = ({
+export const SelectMenu = ({
   buttonRef,
   children,
   error,
@@ -294,5 +294,3 @@ const SelectMenu = ({
     </Popper>
   );
 };
-
-export default SelectMenu;

package/select/lib/SelectOption.tsx

@@ -105,7 +105,7 @@ const Option = styled('li')<SelectOptionProps>(
   })
 );
 
-const SelectOption = ({
+export const SelectOption = ({
   children,
   focused = false,
   interactive = true,
@@ -126,5 +126,3 @@ const SelectOption = ({
     </Option>
   );
 };
-
-export default SelectOption;

package/select/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/select",
   "module": "../dist/es6/select",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/select"
 }

package/side-panel/index.ts

@@ -1,6 +1,2 @@
-import SidePanel from './lib/SidePanel';
-
-export default SidePanel;
-export {SidePanel};
 export * from './lib/hooks';
 export * from './lib/SidePanel';

package/side-panel/lib/SidePanel.tsx

@@ -110,7 +110,7 @@ export const SidePanelContext = React.createContext({
   origin: 'left',
 });
 
-const SidePanel = ({
+export const SidePanel = ({
   as = 'section',
   children,
   collapsedWidth = 64,
@@ -267,4 +267,3 @@ const ToggleButton = ({
 };
 
 SidePanel.ToggleButton = ToggleButton;
-export default SidePanel;

package/side-panel/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/side-panel",
   "module": "../dist/es6/side-panel",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/side-panel"
 }

package/text-area/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/text-area",
   "module": "../dist/es6/text-area",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/text-area"
 }