@workday/canvas-kit-preview-react 7.1.5 → 7.2.0-427-next.2

package/pill/lib/PillCount.tsx

@@ -25,7 +25,7 @@ export const PillCount = createComponent('span')({
         height={22}
         minWidth={22}
         padding={`0  ${space.xxxs}`}
-        marginInlineEnd={`-${space.xxs}`} // Remove padding from HStack on the right side
+        marginInlineEnd={`-${space.xxs}`} // Remove excess margin at the end
         marginInlineStart={`${space.xxxs}`}
         backgroundColor={colors.soap500}
         data-count="ck-pill-count"

package/pill/lib/PillIcon.tsx

@@ -21,7 +21,7 @@ export const PillIcon = createSubcomponent('span')({
 })<PillIconProps>(({size, icon, ...elemProps}, Element) => {
   return (
     <SystemIcon
-      marginInlineStart={`-${space.xxxs}`} // remove padding on the left from HStack
+      marginInlineStart={`-${space.xxxs}`} // remove excess margin from the start
       display="flex"
       as={Element}
       size={20}

package/segmented-control/LICENSE

@@ -0,0 +1,126 @@
+Apache License, Version 2.0 Apache License Version 2.0, January 2004
+
+http://www.apache.org/licenses/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions. "License" shall mean the terms and conditions for use, reproduction, and
+   distribution as defined by Sections 1 through 9 of this document. "Licensor" shall mean the
+   copyright owner or entity authorized by the copyright owner that is granting the License. "Legal
+   Entity" shall mean the union of the acting entity and all other entities that control, are
+   controlled by, or are under common control with that entity. For the purposes of this definition,
+   "control" means (i) the power, direct or indirect, to cause the direction or management of such
+   entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the
+   outstanding shares, or (iii) beneficial ownership of such entity. "You" (or "Your") shall mean an
+   individual or Legal Entity exercising permissions granted by this License. "Source" form shall
+   mean the preferred form for making modifications, including but not limited to software source
+   code, documentation source, and configuration files. "Object" form shall mean any form resulting
+   from mechanical transformation or translation of a Source form, including but not limited to
+   compiled object code, generated documentation, and conversions to other media types. "Work" shall
+   mean the work of authorship, whether in Source or Object form, made available under the License,
+   as indicated by a copyright notice that is included in or attached to the work (an example is
+   provided in the Appendix below). "Derivative Works" shall mean any work, whether in Source or
+   Object form, that is based on (or derived from) the Work and for which the editorial revisions,
+   annotations, elaborations, or other modifications represent, as a whole, an original work of
+   authorship. For the purposes of this License, Derivative Works shall not include works that
+   remain separable from, or merely link (or bind by name) to the interfaces of, the Work and
+   Derivative Works thereof. "Contribution" shall mean any work of authorship, including the
+   original version of the Work and any modifications or additions to that Work or Derivative Works
+   thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright
+   owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner.
+   For the purposes of this definition, "submitted" means any form of electronic, verbal, or written
+   communication sent to the Licensor or its representatives, including but not limited to
+   communication on electronic mailing lists, source code control systems, and issue tracking
+   systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and
+   improving the Work, but excluding communication that is conspicuously marked or otherwise
+   designated in writing by the copyright owner as "Not a Contribution." "Contributor" shall mean
+   Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by
+   Licensor and subsequently incorporated within the Work.
+
+2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor
+   hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+   copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform,
+   sublicense, and distribute the Work and such Derivative Works in Source or Object form.
+
+3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor
+   hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+   (except as stated in this section) patent license to make, have made, use, offer to sell, sell,
+   import, and otherwise transfer the Work, where such license applies only to those patent claims
+   licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or
+   by combination of their Contribution(s) with the Work to which such Contribution(s) was
+   submitted. If You institute patent litigation against any entity (including a cross-claim or
+   counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work
+   constitutes direct or contributory patent infringement, then any patent licenses granted to You
+   under this License for that Work shall terminate as of the date such litigation is filed.
+
+4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof
+   in any medium, with or without modifications, and in Source or Object form, provided that You
+   meet the following conditions: You must give any other recipients of the Work or Derivative Works
+   a copy of this License; and You must cause any modified files to carry prominent notices stating
+   that You changed the files; and You must retain, in the Source form of any Derivative Works that
+   You distribute, all copyright, patent, trademark, and attribution notices from the Source form of
+   the Work, excluding those notices that do not pertain to any part of the Derivative Works; and If
+   the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works
+   that You distribute must include a readable copy of the attribution notices contained within such
+   NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in
+   at least one of the following places: within a NOTICE text file distributed as part of the
+   Derivative Works; within the Source form or documentation, if provided along with the Derivative
+   Works; or, within a display generated by the Derivative Works, if and wherever such third-party
+   notices normally appear. The contents of the NOTICE file are for informational purposes only and
+   do not modify the License. You may add Your own attribution notices within Derivative Works that
+   You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such
+   additional attribution notices cannot be construed as modifying the License. You may add Your own
+   copyright statement to Your modifications and may provide additional or different license terms
+   and conditions for use, reproduction, or distribution of Your modifications, or for any such
+   Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work
+   otherwise complies with the conditions stated in this License.
+
+5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution
+   intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms
+   and conditions of this License, without any additional terms or conditions. Notwithstanding the
+   above, nothing herein shall supersede or modify the terms of any separate license agreement you
+   may have executed with Licensor regarding such Contributions.
+
+6. Trademarks. This License does not grant permission to use the trade names, trademarks, service
+   marks, or product names of the Licensor, except as required for reasonable and customary use in
+   describing the origin of the Work and reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor
+   provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT
+   WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation,
+   any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+   PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or
+   redistributing the Work and assume any risks associated with Your exercise of permissions under
+   this License.
+
+8. Limitation of Liability. In no event and under no legal theory, whether in tort (including
+   negligence), contract, or otherwise, unless required by applicable law (such as deliberate and
+   grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for
+   damages, including any direct, indirect, special, incidental, or consequential damages of any
+   character arising as a result of this License or out of the use or inability to use the Work
+   (including but not limited to damages for loss of goodwill, work stoppage, computer failure or
+   malfunction, or any and all other commercial damages or losses), even if such Contributor has
+   been advised of the possibility of such damages.
+
+9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works
+   thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty,
+   indemnity, or other liability obligations and/or rights consistent with this License. However, in
+   accepting such obligations, You may act only on Your own behalf and on Your sole responsibility,
+   not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each
+   Contributor harmless for any liability incurred by, or claims asserted against, such Contributor
+   by reason of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS
+
+©2022 Workday, Inc. All rights reserved. Workday and the Workday logo are registered trademarks of
+Workday, Inc. All other brand and product names are trademarks or registered trademarks of their
+respective holders.
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in
+compliance with the License. You may obtain a copy of the License at
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under the License is
+distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing permissions and limitations under the
+License.

package/segmented-control/README.md

@@ -0,0 +1,6 @@
+# Canvas Kit React Segmented Control
+
+`SegmentedControl` contains primary and secondary actions related to a page or task.
+
+For more detailed information on this component, please refer to the
+[storybook documentation](https://workday.github.io/canvas-kit/?path=/docs/preview-segmented-control-react--basic)

package/segmented-control/index.ts

@@ -0,0 +1,4 @@
+export * from './lib/SegmentedControl';
+export * from './lib/hooks/useSegmentedControlModel';
+export * from './lib/hooks/useSegmentedControlItem';
+export {useSegmentedControlList} from './lib/SegmentedControlList';

package/segmented-control/lib/SegmentedControl.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import {createContainer} from '@workday/canvas-kit-react/common';
+
+import {useSegmentedControlModel} from './hooks/useSegmentedControlModel';
+import {SegmentedControlList} from './SegmentedControlList';
+import {SegmentedControlItem} from './SegmentedControlItem';
+
+export interface SegmentedControlProps {
+  children: React.ReactNode;
+}
+
+/**
+ * `SegmentedControl` is a container component that is responsible for creating a
+ * {@link SegmentedControlModel} and sharing it with its subcomponents using React context. It does
+ * not represent a real element.
+ *
+ * ```tsx
+ * <SegmentedControl items={[]}>{Child components}</SegmentedControl>
+ * ```
+ *
+ * Alternatively, you may pass in a model using the [hoisted model
+ * pattern](/getting-started/for-developers/resources/compound-components/#configuring-a-model).
+ *
+ * ```tsx
+ * const model = useSegmentedControlModel({
+ *   items: [],
+ * });
+ *
+ * <SegmentedControl model={model}>{Child components}</SegmentedControl>;
+ * ```
+ */
+export const SegmentedControl = createContainer()({
+  displayName: 'SegmentedControl',
+  modelHook: useSegmentedControlModel,
+  subComponents: {
+    /**
+     * `SegmentedControl.List` renders {@link Grid} under the hood. It is a container for
+     * {@link SegmentedControlItem SegmentedControl.Item} subcomponents.
+     *
+     * ```tsx
+     * <SegmentedControl.List>{SegmentedControl.Items}</SegmentedControl.List>
+     * ```
+     */
+    List: SegmentedControlList,
+    /**
+     * `SegmentedControl.Item` is a `button` element built on `BaseButton`. `SegmentedControl.Item`
+     * has a `data-id` prop to handle `onSelect` properly.
+     *
+     * ```tsx
+     * <SegmentedControl.Item data-id="table">Table</SegmentedControl.Item>
+     * ```
+     */
+    Item: SegmentedControlItem,
+  },
+})<SegmentedControlProps>(({children}) => {
+  return <>{children}</>;
+});

package/segmented-control/lib/SegmentedControlItem.tsx

@@ -0,0 +1,175 @@
+import * as React from 'react';
+
+import {colors, type, space} from '@workday/canvas-kit-react/tokens';
+import {createSubcomponent, useIsRTL} from '@workday/canvas-kit-react/common';
+import {Tooltip, TooltipProps} from '@workday/canvas-kit-react/tooltip';
+import {
+  BaseButton,
+  ButtonContainerProps,
+  ButtonColors,
+  ButtonSizes,
+  getMinWidthStyles,
+} from '@workday/canvas-kit-react/button';
+import {CanvasSystemIcon} from '@workday/design-assets-types';
+import {useSegmentedControlModel} from './hooks/useSegmentedControlModel';
+import {Text} from '@workday/canvas-kit-react/text';
+import {useSegmentedControlItem} from './hooks/useSegmentedControlItem';
+
+export interface ItemProps extends ButtonContainerProps {
+  /**
+   * Optionally pass index to the item. This should be done if `SegmentedControl.Item` components were created
+   * via a `[Array::map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)` function. This index will ensure keyboard navigation works even if items are
+   * inserted out of order.
+   */
+  index?: number;
+  /**
+   * The contents of the item. This is text used as the accessible name of the button for screen readers.
+   */
+  children?: React.ReactNode;
+  /**
+   * The identifier of the item. This identifier will be used in change events and for `initialTab`.
+   * If this property is not provided, it will default to a string representation
+   * of the the zero-based index of the item when it was initialized.
+   */
+  'data-id'?: string;
+  /**
+   * Optional id. If not set, it will inherit the ID passed to the `SegmentedControl` component and append the
+   * index at the end. Only set this for advanced cases.
+   */
+  id?: string;
+  /**
+   * Part of the ARIA specification for buttons. Lets screen readers know which button is active. This
+   * should either be `true` or `false`. This is automatically set by the
+   * component and should only be used in advanced cases.
+   */
+  'aria-pressed'?: boolean;
+  /**
+   * The icon of the button.
+   */
+  icon?: CanvasSystemIcon;
+  /**
+   * Tooltip Props
+   */
+  tooltipProps?: Omit<TooltipProps, 'children'>;
+}
+
+const getButtonSize = (size: ButtonContainerProps['size']) => {
+  switch (size) {
+    case 'large':
+      return 'medium';
+    case 'medium':
+      return 'small';
+    case 'small':
+      return 'extraSmall';
+    default:
+      return 'medium';
+  }
+};
+
+const getIconButtonColors = (toggled?: boolean): ButtonColors => {
+  return {
+    default: {
+      background: toggled ? colors.frenchVanilla100 : colors.soap200,
+      border: toggled ? colors.licorice200 : 'transparent',
+      icon: toggled ? colors.blackPepper400 : colors.licorice400,
+      label: toggled ? colors.blackPepper400 : colors.licorice400,
+    },
+    hover: {
+      background: toggled ? colors.frenchVanilla100 : colors.soap400,
+      icon: colors.licorice400,
+      label: colors.licorice400,
+    },
+    active: {
+      background: toggled ? colors.frenchVanilla100 : colors.soap400,
+      icon: colors.licorice400,
+      label: colors.licorice400,
+    },
+    focus: {},
+    disabled: {
+      background: colors.soap200,
+      opacity: '1',
+    },
+  };
+};
+
+const getPaddingStyles = (
+  children: React.ReactNode,
+  size: ButtonContainerProps['size'],
+  icon: CanvasSystemIcon | undefined
+) => {
+  if (!children) {
+    return 0;
+  }
+
+  switch (size) {
+    case 'large':
+      return icon ? `0 ${space.m} 0 20px` : `0 ${space.m}`;
+
+    case 'medium':
+      return icon ? `0 20px 0 ${space.s}` : `0 ${space.s}`;
+
+    case 'small':
+      return icon ? `0 ${space.xs} 0 ${space.xxs}` : `0 ${space.xs}`;
+
+    default:
+      return icon ? `0 20px 0 ${space.s}` : `0 ${space.s}`;
+  }
+};
+
+const geButtonStyles = (size: ButtonSizes, children: React.ReactNode, icon?: CanvasSystemIcon) => {
+  const buttonSize = getButtonSize(size);
+  const minWidthValue = getMinWidthStyles(children, children ? size : buttonSize);
+
+  return {
+    height: getMinWidthStyles(false, buttonSize),
+    minWidth: minWidthValue,
+    padding: getPaddingStyles(children, size, icon),
+  };
+};
+
+const Container = ({
+  tooltipProps,
+  children,
+}: {
+  tooltipProps?: Omit<TooltipProps, 'children'>;
+  children: React.ReactElement;
+}) => {
+  return tooltipProps ? (
+    <Tooltip {...tooltipProps}>{children}</Tooltip>
+  ) : (
+    <React.Fragment>{children}</React.Fragment>
+  );
+};
+
+export const SegmentedControlItem = createSubcomponent('button')({
+  displayName: 'SegmentedControl.Item',
+  modelHook: useSegmentedControlModel,
+  elemPropsHook: useSegmentedControlItem,
+})<ItemProps>(({children, icon, tooltipProps, ...elemProps}, Element, {state: {size}}) => {
+  const {color, ...textStyles} = type.levels.subtext[size === 'small' ? 'medium' : 'large'];
+
+  return (
+    <Container tooltipProps={tooltipProps}>
+      <BaseButton
+        as={Element}
+        borderRadius="m"
+        colors={getIconButtonColors(elemProps['aria-pressed'])}
+        {...geButtonStyles(size, children, icon)}
+        {...elemProps}
+      >
+        {icon && (
+          <BaseButton.Icon
+            size={size === 'small' ? 'extraSmall' : 'medium'}
+            icon={icon}
+            shouldMirrorIcon={useIsRTL()}
+          />
+        )}
+        {children && (
+          <Text {...textStyles} fontWeight="bold" textAlign="left">
+            {children}
+          </Text>
+        )}
+      </BaseButton>
+    </Container>
+  );
+});

package/segmented-control/lib/SegmentedControlList.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+
+import {
+  createSubcomponent,
+  ExtractProps,
+  createElemPropsHook,
+} from '@workday/canvas-kit-react/common';
+import {Grid} from '@workday/canvas-kit-react/layout';
+import {useListRenderItems} from '@workday/canvas-kit-react/collection';
+import {useSegmentedControlModel} from './hooks/useSegmentedControlModel';
+
+export interface SegmentedControlListProps<T = any>
+  extends Omit<Partial<ExtractProps<typeof Grid, never>>, 'children'> {
+  'aria-label': string;
+  children: ((item: T) => React.ReactNode) | React.ReactNode;
+}
+
+export const useSegmentedControlList = createElemPropsHook(useSegmentedControlModel)(
+  ({state: {orientation, disabled, items}}) => {
+    const directionName = orientation === 'vertical' ? 'Row' : 'Column';
+    return {
+      [`gridTemplate${directionName}s`]: `repeat(${items.length}, 1fr)`,
+      opacity: disabled ? 0.4 : undefined,
+    };
+  }
+);
+
+export const SegmentedControlList = createSubcomponent('div')({
+  displayName: 'SegmentedControl.List',
+  modelHook: useSegmentedControlModel,
+  elemPropsHook: useSegmentedControlList,
+})<SegmentedControlListProps>(({children, ...elemProps}, Element, model) => {
+  return (
+    <Grid
+      as={Element}
+      display="inline-grid"
+      role="group"
+      backgroundColor="soap200"
+      border="1px solid transparent"
+      borderColor="licorice200"
+      borderRadius="l"
+      padding="3px"
+      gridGap="xxs"
+      {...elemProps}
+    >
+      {useListRenderItems(model, children)}
+    </Grid>
+  );
+});

package/segmented-control/lib/hooks/useSegmentedControlItem.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+
+import {createElemPropsHook, composeHooks} from '@workday/canvas-kit-react/common';
+import {
+  useListItemRegister,
+  isSelected,
+  useListItemSelect,
+} from '@workday/canvas-kit-react/collection';
+import {useSegmentedControlModel} from './useSegmentedControlModel';
+
+export const useSegmentedControlItem = composeHooks(
+  useListItemSelect,
+  createElemPropsHook(useSegmentedControlModel)(
+    (model, _, elemProps: {'data-id'?: string; children?: React.ReactNode} = {}) => {
+      const name = elemProps['data-id'] || '';
+      const selected = !!name && isSelected(name, model.state);
+
+      return {
+        id: `${model.state.id}-${name}`,
+        'aria-pressed': selected,
+      };
+    }
+  ),
+  useListItemRegister,
+  createElemPropsHook(useSegmentedControlModel)(({state}) => {
+    return {
+      // override the default disabled functionality of `useListItemRegister`
+      // it shouldn't allow to set disabled state only for one button
+      // state prop will disable the whole container
+      disabled: state.disabled ? true : undefined,
+    };
+  })
+);

package/segmented-control/lib/hooks/useSegmentedControlModel.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import {createModelHook} from '@workday/canvas-kit-react/common';
+import {defaultGetId, useListModel} from '@workday/canvas-kit-react/collection';
+
+export const useSegmentedControlModel = createModelHook({
+  defaultConfig: {
+    ...useListModel.defaultConfig,
+    /**
+     * Optional id for the whole `SegmentedControl` group. If not provided, a unique id will be created.
+     * @default useUniqueId()
+     */
+    id: '',
+    /**
+     * An initially selected value. This value must match the `data-id` of the `SegmentedControl.Item` component.
+     * If not provided, the first value will be selected.
+     */
+    initialValue: '',
+    /**
+     * Sets disabled state for all segmented control buttons
+     * @default false
+     */
+    disabled: false,
+    /**
+     * Sets the size of the segmented control container and its buttons. Can be `small`, `medium` or `large`.
+     * @default 'medium'
+     */
+    size: 'medium' as 'small' | 'medium' | 'large',
+    /**
+     * The SegmentedControl can rendered in a horizontal or vertical orientation.
+     * We suggest to use the `vertical` orientation only for icon only variant.
+     * @default 'horizontal'
+     */
+    orientation: 'horizontal' as typeof useListModel.defaultConfig.orientation,
+  },
+  requiredConfig: useListModel.requiredConfig,
+})(config => {
+  const getId = config.getId || defaultGetId;
+  const initialSelectedRef = React.useRef(config.initialValue);
+  const items = config.items;
+
+  const model = useListModel(
+    useListModel.mergeConfig(config, {
+      orientation: config.orientation || 'horizontal',
+      items,
+      onRegisterItem(data) {
+        if (!initialSelectedRef.current) {
+          initialSelectedRef.current = getId(data.item);
+          events.select({id: initialSelectedRef.current});
+        }
+      },
+      initialSelectedIds: config.initialValue
+        ? [config.initialValue]
+        : config.items?.length
+        ? [getId(config.items![0])]
+        : [],
+      shouldVirtualize: false,
+    })
+  );
+
+  const state = {
+    ...model.state,
+    disabled: config.disabled,
+    size: config.size,
+  };
+
+  const events = {
+    ...model.events,
+  };
+
+  return {
+    ...model,
+    state,
+    events,
+  };
+});

package/segmented-control/package.json

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

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,3 @@
-import Select from './lib/Select';
-
-export default Select;
-export {Select};
 export * from './lib/Select';
 
 export {

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';
@@ -288,7 +288,7 @@ const defaultRenderSelected: RenderSelectedFunction = option => {
   return option.label;
 };
 
-const SelectBase = ({
+export const SelectBase = ({
   'aria-labelledby': ariaLabelledBy,
   'aria-required': ariaRequired,
   as,
@@ -475,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;