@workday/canvas-kit-preview-react 7.0.0-alpha.97-next.23 → 8.0.0-alpha.111-next.0

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

@@ -2,5 +2,5 @@ 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';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../select/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,cAAc,CAAC;AAElC,eAAe,MAAM,CAAC;AACtB,OAAO,EAAC,MAAM,EAAC,CAAC;AAChB,cAAc,cAAc,CAAC;AAE7B,OAAO,EAAC,MAAM,EAAE,gBAAgB,EAAE,oBAAoB,EAAC,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../select/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,cAAc,CAAC;AAElC,eAAe,MAAM,CAAC;AACtB,OAAO,EAAC,MAAM,EAAC,CAAC;AAChB,cAAc,cAAc,CAAC;AAE7B,OAAO,EACL,MAAM,EACN,gBAAgB,EAChB,oBAAoB,EACpB,sBAAsB,GACvB,MAAM,kBAAkB,CAAC"}

package/dist/commonjs/select/lib/SelectBase.d.ts

@@ -17,6 +17,9 @@ export interface NormalizedOption extends Option {
     id: string;
     label: string;
 }
+export interface RenderSelectedFunction {
+    (option: NormalizedOption): React.ReactNode;
+}
 export interface RenderableOption extends NormalizedOption {
     focused: boolean;
     selected: boolean;
@@ -47,6 +50,22 @@ export interface CoreSelectBaseProps extends Themeable, GrowthBehavior, Pick<Rea
      * @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.
      */
@@ -118,6 +137,6 @@ export interface SelectBaseProps extends CoreSelectBaseProps, StyledType {
 }
 export declare const buttonBorderWidth = 1;
 export declare const buttonDefaultWidth = 280;
-declare const SelectBase: ({ "aria-labelledby": ariaLabelledBy, "aria-required": ariaRequired, as, forwardedButtonRef, localButtonRef, disabled, error, focusedOptionIndex, grow, inputRef, menuPlacement, menuRef, menuVisibility, onChange, onKeyDown, onClose, onOptionSelection, options, renderOption, required, shouldMenuAutoFlip, shouldMenuAutoFocus, value, ...elemProps }: SelectBaseProps) => JSX.Element;
+declare const SelectBase: ({ "aria-labelledby": ariaLabelledBy, "aria-required": ariaRequired, as, forwardedButtonRef, localButtonRef, disabled, error, focusedOptionIndex, grow, inputRef, menuPlacement, menuRef, menuVisibility, onChange, onKeyDown, onClose, onOptionSelection, options, renderOption, renderSelected, required, shouldMenuAutoFlip, shouldMenuAutoFocus, value, ...elemProps }: SelectBaseProps) => JSX.Element;
 export default SelectBase;
 //# sourceMappingURL=SelectBase.d.ts.map

package/dist/commonjs/select/lib/SelectBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectBase.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectBase.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SelectBase.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectBase.tsx"],"names":[],"mappings":"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"}

package/dist/commonjs/select/lib/SelectBase.js

@@ -126,10 +126,13 @@ var SelectWrapper = common_1.styled('div')({
     });
 });
 var defaultRenderOption = function (option) {
-    return react_1.default.createElement("div", null, option.label);
+    return react_1.default.createElement("div", null, defaultRenderSelected(option));
+};
+var defaultRenderSelected = function (option) {
+    return option.label;
 };
 var SelectBase = function (_a) {
-    var ariaLabelledBy = _a["aria-labelledby"], ariaRequired = _a["aria-required"], as = _a.as, forwardedButtonRef = _a.forwardedButtonRef, localButtonRef = _a.localButtonRef, disabled = _a.disabled, error = _a.error, _b = _a.focusedOptionIndex, focusedOptionIndex = _b === void 0 ? 0 : _b, grow = _a.grow, inputRef = _a.inputRef, _c = _a.menuPlacement, menuPlacement = _c === void 0 ? 'bottom' : _c, menuRef = _a.menuRef, _d = _a.menuVisibility, menuVisibility = _d === void 0 ? 'closed' : _d, onChange = _a.onChange, onKeyDown = _a.onKeyDown, onClose = _a.onClose, onOptionSelection = _a.onOptionSelection, options = _a.options, _e = _a.renderOption, renderOption = _e === void 0 ? defaultRenderOption : _e, required = _a.required, _f = _a.shouldMenuAutoFlip, shouldMenuAutoFlip = _f === void 0 ? true : _f, _g = _a.shouldMenuAutoFocus, shouldMenuAutoFocus = _g === void 0 ? true : _g, value = _a.value, elemProps = __rest(_a, ['aria-labelledby', 'aria-required', "as", "forwardedButtonRef", "localButtonRef", "disabled", "error", "focusedOptionIndex", "grow", "inputRef", "menuPlacement", "menuRef", "menuVisibility", "onChange", "onKeyDown", "onClose", "onOptionSelection", "options", "renderOption", "required", "shouldMenuAutoFlip", "shouldMenuAutoFocus", "value"]);
+    var ariaLabelledBy = _a["aria-labelledby"], ariaRequired = _a["aria-required"], as = _a.as, forwardedButtonRef = _a.forwardedButtonRef, localButtonRef = _a.localButtonRef, disabled = _a.disabled, error = _a.error, _b = _a.focusedOptionIndex, focusedOptionIndex = _b === void 0 ? 0 : _b, grow = _a.grow, inputRef = _a.inputRef, _c = _a.menuPlacement, menuPlacement = _c === void 0 ? 'bottom' : _c, menuRef = _a.menuRef, _d = _a.menuVisibility, menuVisibility = _d === void 0 ? 'closed' : _d, onChange = _a.onChange, onKeyDown = _a.onKeyDown, onClose = _a.onClose, onOptionSelection = _a.onOptionSelection, options = _a.options, _e = _a.renderOption, renderOption = _e === void 0 ? defaultRenderOption : _e, _f = _a.renderSelected, renderSelected = _f === void 0 ? defaultRenderSelected : _f, required = _a.required, _g = _a.shouldMenuAutoFlip, shouldMenuAutoFlip = _g === void 0 ? true : _g, _h = _a.shouldMenuAutoFocus, shouldMenuAutoFocus = _h === void 0 ? true : _h, value = _a.value, elemProps = __rest(_a, ['aria-labelledby', 'aria-required', "as", "forwardedButtonRef", "localButtonRef", "disabled", "error", "focusedOptionIndex", "grow", "inputRef", "menuPlacement", "menuRef", "menuVisibility", "onChange", "onKeyDown", "onClose", "onOptionSelection", "options", "renderOption", "renderSelected", "required", "shouldMenuAutoFlip", "shouldMenuAutoFocus", "value"]);
     var focusedOptionRef = react_1.default.useRef(null);
     var menuId = common_1.useUniqueId();
     var renderOptions = function (renderOption) {
@@ -204,7 +207,6 @@ var SelectBase = function (_a) {
     // Do a bit of error-checking in case options weren't provided
     var hasOptions = options.length > 0;
     var selectedOption = hasOptions ? options[utils_1.getCorrectedIndexByValue(options, value)] : null;
-    var selectedOptionLabel = selectedOption ? selectedOption.label : '';
     var selectedOptionValue = selectedOption ? selectedOption.value : '';
     return (react_1.default.createElement(SelectWrapper, { grow: grow, disabled: disabled },
         react_1.default.createElement(SelectButton, __assign({ "aria-expanded": menuVisibility !== 'closed' ? 'true' : undefined, "aria-haspopup": "listbox", "aria-controls": menuVisibility !== 'closed' ? menuId : undefined, as: as, disabled: disabled, error: error, grow: grow, menuVisibility: menuVisibility, onKeyDown: onKeyDown, 
@@ -213,7 +215,7 @@ var SelectBase = function (_a) {
             // the menu)
             onKeyUp: function (e) {
                 e.preventDefault();
-            }, ref: forwardedButtonRef, type: "button", value: selectedOptionValue }, elemProps), selectedOptionLabel),
+            }, ref: forwardedButtonRef, type: "button", value: selectedOptionValue }, elemProps), !!selectedOption && renderSelected(selectedOption)),
         react_1.default.createElement(SelectInput, { onChange: onChange, ref: inputRef, type: "text", value: selectedOptionValue }),
         hasOptions && menuVisibility !== 'closed' && (react_1.default.createElement(SelectMenu_1.default, { "aria-activedescendant": options[focusedOptionIndex].id, "aria-labelledby": ariaLabelledBy, "aria-required": ariaRequired || required ? true : undefined, buttonRef: localButtonRef, id: menuId, error: error, menuRef: menuRef, onKeyDown: onKeyDown, onClose: onClose, placement: menuPlacement, shouldAutoFlip: shouldMenuAutoFlip, shouldAutoFocus: shouldMenuAutoFocus, visibility: menuVisibility }, renderOptions(renderOption))),
         react_1.default.createElement(SelectMenuIcon, { className: "menu-icon", icon: canvas_system_icons_web_1.caretDownSmallIcon, color: disabled ? tokens_1.colors.licorice100 : tokens_1.colors.licorice200, colorHover: disabled ? tokens_1.colors.licorice100 : tokens_1.colors.licorice500, size: menuIconSize })));

package/dist/es6/select/index.d.ts

@@ -2,5 +2,5 @@ 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';
 //# sourceMappingURL=index.d.ts.map

package/dist/es6/select/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../select/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,cAAc,CAAC;AAElC,eAAe,MAAM,CAAC;AACtB,OAAO,EAAC,MAAM,EAAC,CAAC;AAChB,cAAc,cAAc,CAAC;AAE7B,OAAO,EAAC,MAAM,EAAE,gBAAgB,EAAE,oBAAoB,EAAC,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../select/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,cAAc,CAAC;AAElC,eAAe,MAAM,CAAC;AACtB,OAAO,EAAC,MAAM,EAAC,CAAC;AAChB,cAAc,cAAc,CAAC;AAE7B,OAAO,EACL,MAAM,EACN,gBAAgB,EAChB,oBAAoB,EACpB,sBAAsB,GACvB,MAAM,kBAAkB,CAAC"}

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

@@ -17,6 +17,9 @@ export interface NormalizedOption extends Option {
     id: string;
     label: string;
 }
+export interface RenderSelectedFunction {
+    (option: NormalizedOption): React.ReactNode;
+}
 export interface RenderableOption extends NormalizedOption {
     focused: boolean;
     selected: boolean;
@@ -47,6 +50,22 @@ export interface CoreSelectBaseProps extends Themeable, GrowthBehavior, Pick<Rea
      * @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.
      */
@@ -118,6 +137,6 @@ export interface SelectBaseProps extends CoreSelectBaseProps, StyledType {
 }
 export declare const buttonBorderWidth = 1;
 export declare const buttonDefaultWidth = 280;
-declare const SelectBase: ({ "aria-labelledby": ariaLabelledBy, "aria-required": ariaRequired, as, forwardedButtonRef, localButtonRef, disabled, error, focusedOptionIndex, grow, inputRef, menuPlacement, menuRef, menuVisibility, onChange, onKeyDown, onClose, onOptionSelection, options, renderOption, required, shouldMenuAutoFlip, shouldMenuAutoFocus, value, ...elemProps }: SelectBaseProps) => JSX.Element;
+declare const SelectBase: ({ "aria-labelledby": ariaLabelledBy, "aria-required": ariaRequired, as, forwardedButtonRef, localButtonRef, disabled, error, focusedOptionIndex, grow, inputRef, menuPlacement, menuRef, menuVisibility, onChange, onKeyDown, onClose, onOptionSelection, options, renderOption, renderSelected, required, shouldMenuAutoFlip, shouldMenuAutoFocus, value, ...elemProps }: SelectBaseProps) => JSX.Element;
 export default SelectBase;
 //# sourceMappingURL=SelectBase.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SelectBase.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectBase.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SelectBase.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectBase.tsx"],"names":[],"mappings":"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"}

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

@@ -101,10 +101,13 @@ var SelectWrapper = styled('div')({
     });
 });
 var defaultRenderOption = function (option) {
-    return React.createElement("div", null, option.label);
+    return React.createElement("div", null, defaultRenderSelected(option));
+};
+var defaultRenderSelected = function (option) {
+    return option.label;
 };
 var SelectBase = function (_a) {
-    var ariaLabelledBy = _a["aria-labelledby"], ariaRequired = _a["aria-required"], as = _a.as, forwardedButtonRef = _a.forwardedButtonRef, localButtonRef = _a.localButtonRef, disabled = _a.disabled, error = _a.error, _b = _a.focusedOptionIndex, focusedOptionIndex = _b === void 0 ? 0 : _b, grow = _a.grow, inputRef = _a.inputRef, _c = _a.menuPlacement, menuPlacement = _c === void 0 ? 'bottom' : _c, menuRef = _a.menuRef, _d = _a.menuVisibility, menuVisibility = _d === void 0 ? 'closed' : _d, onChange = _a.onChange, onKeyDown = _a.onKeyDown, onClose = _a.onClose, onOptionSelection = _a.onOptionSelection, options = _a.options, _e = _a.renderOption, renderOption = _e === void 0 ? defaultRenderOption : _e, required = _a.required, _f = _a.shouldMenuAutoFlip, shouldMenuAutoFlip = _f === void 0 ? true : _f, _g = _a.shouldMenuAutoFocus, shouldMenuAutoFocus = _g === void 0 ? true : _g, value = _a.value, elemProps = __rest(_a, ['aria-labelledby', 'aria-required', "as", "forwardedButtonRef", "localButtonRef", "disabled", "error", "focusedOptionIndex", "grow", "inputRef", "menuPlacement", "menuRef", "menuVisibility", "onChange", "onKeyDown", "onClose", "onOptionSelection", "options", "renderOption", "required", "shouldMenuAutoFlip", "shouldMenuAutoFocus", "value"]);
+    var ariaLabelledBy = _a["aria-labelledby"], ariaRequired = _a["aria-required"], as = _a.as, forwardedButtonRef = _a.forwardedButtonRef, localButtonRef = _a.localButtonRef, disabled = _a.disabled, error = _a.error, _b = _a.focusedOptionIndex, focusedOptionIndex = _b === void 0 ? 0 : _b, grow = _a.grow, inputRef = _a.inputRef, _c = _a.menuPlacement, menuPlacement = _c === void 0 ? 'bottom' : _c, menuRef = _a.menuRef, _d = _a.menuVisibility, menuVisibility = _d === void 0 ? 'closed' : _d, onChange = _a.onChange, onKeyDown = _a.onKeyDown, onClose = _a.onClose, onOptionSelection = _a.onOptionSelection, options = _a.options, _e = _a.renderOption, renderOption = _e === void 0 ? defaultRenderOption : _e, _f = _a.renderSelected, renderSelected = _f === void 0 ? defaultRenderSelected : _f, required = _a.required, _g = _a.shouldMenuAutoFlip, shouldMenuAutoFlip = _g === void 0 ? true : _g, _h = _a.shouldMenuAutoFocus, shouldMenuAutoFocus = _h === void 0 ? true : _h, value = _a.value, elemProps = __rest(_a, ['aria-labelledby', 'aria-required', "as", "forwardedButtonRef", "localButtonRef", "disabled", "error", "focusedOptionIndex", "grow", "inputRef", "menuPlacement", "menuRef", "menuVisibility", "onChange", "onKeyDown", "onClose", "onOptionSelection", "options", "renderOption", "renderSelected", "required", "shouldMenuAutoFlip", "shouldMenuAutoFocus", "value"]);
     var focusedOptionRef = React.useRef(null);
     var menuId = useUniqueId();
     var renderOptions = function (renderOption) {
@@ -179,7 +182,6 @@ var SelectBase = function (_a) {
     // Do a bit of error-checking in case options weren't provided
     var hasOptions = options.length > 0;
     var selectedOption = hasOptions ? options[getCorrectedIndexByValue(options, value)] : null;
-    var selectedOptionLabel = selectedOption ? selectedOption.label : '';
     var selectedOptionValue = selectedOption ? selectedOption.value : '';
     return (React.createElement(SelectWrapper, { grow: grow, disabled: disabled },
         React.createElement(SelectButton, __assign({ "aria-expanded": menuVisibility !== 'closed' ? 'true' : undefined, "aria-haspopup": "listbox", "aria-controls": menuVisibility !== 'closed' ? menuId : undefined, as: as, disabled: disabled, error: error, grow: grow, menuVisibility: menuVisibility, onKeyDown: onKeyDown, 
@@ -188,7 +190,7 @@ var SelectBase = function (_a) {
             // the menu)
             onKeyUp: function (e) {
                 e.preventDefault();
-            }, ref: forwardedButtonRef, type: "button", value: selectedOptionValue }, elemProps), selectedOptionLabel),
+            }, ref: forwardedButtonRef, type: "button", value: selectedOptionValue }, elemProps), !!selectedOption && renderSelected(selectedOption)),
         React.createElement(SelectInput, { onChange: onChange, ref: inputRef, type: "text", value: selectedOptionValue }),
         hasOptions && menuVisibility !== 'closed' && (React.createElement(SelectMenu, { "aria-activedescendant": options[focusedOptionIndex].id, "aria-labelledby": ariaLabelledBy, "aria-required": ariaRequired || required ? true : undefined, buttonRef: localButtonRef, id: menuId, error: error, menuRef: menuRef, onKeyDown: onKeyDown, onClose: onClose, placement: menuPlacement, shouldAutoFlip: shouldMenuAutoFlip, shouldAutoFocus: shouldMenuAutoFocus, visibility: menuVisibility }, renderOptions(renderOption))),
         React.createElement(SelectMenuIcon, { className: "menu-icon", icon: caretDownSmallIcon, color: disabled ? colors.licorice100 : colors.licorice200, colorHover: disabled ? colors.licorice100 : colors.licorice500, size: menuIconSize })));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-react",
-  "version": "7.0.0-alpha.97-next.23+36224fdd",
+  "version": "8.0.0-alpha.111-next.0+2f9c1930",
   "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",
@@ -45,15 +45,15 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^7.0.0-alpha.97-next.23+36224fdd",
+    "@workday/canvas-kit-react": "^8.0.0-alpha.111-next.0+2f9c1930",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.4"
   },
   "devDependencies": {
     "@workday/canvas-accent-icons-web": "^3.0.0",
-    "@workday/canvas-kit-labs-react": "^7.0.0-alpha.97-next.23+36224fdd",
+    "@workday/canvas-kit-labs-react": "^8.0.0-alpha.111-next.0+2f9c1930",
     "formik": "^2.2.9",
     "yup": "^0.31.1"
   },
-  "gitHead": "36224fddf0e1c2382b1cbbeb1a2a2d356bfd22a3"
+  "gitHead": "2f9c193032b814210ceff5a30bbcc5dc2dd1a37c"
 }

package/select/index.ts

@@ -4,4 +4,9 @@ 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/SelectBase.tsx

@@ -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,7 +281,11 @@ 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 = ({
@@ -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' && (