@workday/canvas-kit-preview-react 8.0.0 → 8.0.2

package/menu/lib/Menu.tsx

@@ -1,23 +1,35 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
 
-import {MenuItemProps} from './MenuItem';
+import {DeprecatedMenuItemProps} from './MenuItem';
 import {Card} from '@workday/canvas-kit-react/card';
 import {commonColors, space, borderRadius} from '@workday/canvas-kit-react/tokens';
 import {hideMouseFocus, GrowthBehavior, generateUniqueId} from '@workday/canvas-kit-react/common';
 
-export interface MenuProps extends GrowthBehavior, React.HTMLAttributes<HTMLUListElement> {
+/**
+ * ### Deprecated Menu
+ *
+ * As of Canvas Kit v8, Menu is being soft-deprecated.
+ * It will be hard-deprecated (completely removed) in v9. Please see the
+ * [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
+ * for more information.
+ */
+export interface DeprecatedMenuProps
+  extends GrowthBehavior,
+    React.HTMLAttributes<HTMLUListElement> {
   /**
-   * The MenuItem children of the Menu (must be at least one). Also accepts other components which share the same interface as `MenuItem`.
+   * The DeprecatedMenuItem children of the DeprecatedMenu (must be at least one). Also accepts other components which share the same interface as `DeprecatedMenuItem`.
    */
-  children?: React.ReactElement<MenuItemProps> | React.ReactElement<MenuItemProps>[];
+  children?:
+    | React.ReactElement<DeprecatedMenuItemProps>
+    | React.ReactElement<DeprecatedMenuItemProps>[];
   /**
-   * If true, set the Menu to the open state. Useful for showing and hiding the Menu from a parent component such as a menu button.
+   * If true, set the DeprecatedMenu to the open state. Useful for showing and hiding the DeprecatedMenu from a parent component such as a menu button.
    * @default true
    */
   isOpen?: boolean;
   /**
-   * The width of the Menu. If no value is provided, the Menu will collapse around its content.
+   * The width of the DeprecatedMenu. If no value is provided, the DeprecatedMenu will collapse around its content.
    */
   width?: number | string;
   /**
@@ -25,7 +37,7 @@ export interface MenuProps extends GrowthBehavior, React.HTMLAttributes<HTMLULis
    */
   onSelect?: () => void;
   /**
-   * The function called when the Menu should close. This is called after a menu item is selected or if the escape shortcut key is used. This will not fire if the menu item sets `shouldClose` to false.
+   * The function called when the DeprecatedMenu should close. This is called after a menu item is selected or if the escape shortcut key is used. This will not fire if the menu item sets `shouldClose` to false.
    */
   onClose?: () => void;
   /**
@@ -33,16 +45,24 @@ export interface MenuProps extends GrowthBehavior, React.HTMLAttributes<HTMLULis
    */
   initialSelectedItem?: number;
   /**
-   * The unique id of the Menu used for ARIA and HTML `id` attributes.
+   * The unique id of the DeprecatedMenu used for ARIA and HTML `id` attributes.
    */
   id?: string;
   /**
-   * The HTML `id` of the element that labels the Menu. Often used with menu buttons.
+   * The HTML `id` of the element that labels the DeprecatedMenu. Often used with menu buttons.
    */
   'aria-labelledby'?: string;
 }
 
-export interface MenuState {
+/**
+ * ### Deprecated Menu State
+ *
+ * As of Canvas Kit v8, Menu is being soft-deprecated.
+ * It will be hard-deprecated (completely removed) in v9. Please see the
+ * [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
+ * for more information.
+ */
+export interface DeprecatedMenuState {
   selectedItemIndex: number;
 }
 
@@ -57,14 +77,22 @@ const List = styled('ul')({
   ...hideMouseFocus,
 });
 
-export default class Menu extends React.Component<MenuProps, MenuState> {
+/**
+ * ### Deprecated Menu
+ *
+ * As of Canvas Kit v8, this component is being soft-deprecated.
+ * It will be hard-deprecated (completely removed) in v9. Please see the
+ * [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
+ * for more information.
+ */
+export class DeprecatedMenu extends React.Component<DeprecatedMenuProps, DeprecatedMenuState> {
   private id = generateUniqueId();
   private animateId!: number;
 
   private menuRef: React.RefObject<HTMLUListElement>;
   private firstCharacters!: string[];
 
-  constructor(props: MenuProps) {
+  constructor(props: DeprecatedMenuProps) {
     super(props);
     this.menuRef = React.createRef();
 
@@ -79,7 +107,7 @@ export default class Menu extends React.Component<MenuProps, MenuState> {
     };
   }
 
-  componentDidUpdate(prevProps: MenuProps) {
+  componentDidUpdate(prevProps: DeprecatedMenuProps) {
     if (this.props.children !== prevProps.children) {
       this.setFirstCharacters();
       this.setInitialSelectedItem();
@@ -95,6 +123,13 @@ export default class Menu extends React.Component<MenuProps, MenuState> {
   }
 
   componentDidMount() {
+    console.warn(
+      `This component is being deprecated and will be removed in Canvas Kit V9.\n
+      For more information, please see the V8 upgrade guide:\n
+      https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page
+      `
+    );
+
     this.setFirstCharacters();
     this.setInitialSelectedItem();
   }
@@ -119,6 +154,7 @@ export default class Menu extends React.Component<MenuProps, MenuState> {
     } = this.props;
     const {selectedItemIndex} = this.state;
     const cardWidth = grow ? '100%' : width;
+    let interactiveItemIndex: number | null = null;
 
     return (
       <Card display="inline-block" padding={space.zero} width={cardWidth} depth={3}>
@@ -133,17 +169,22 @@ export default class Menu extends React.Component<MenuProps, MenuState> {
             ref={this.menuRef}
             {...elemProps}
           >
-            {React.Children.map(children, (menuItem, index) => {
+            {React.Children.map(children, menuItem => {
               if (!React.isValidElement(menuItem)) {
                 return;
               }
-              const itemId = `${id}-${index}`;
+              let itemId;
+              if (!menuItem.props.isHeader) {
+                interactiveItemIndex = (interactiveItemIndex ?? -1) + 1;
+                itemId = `${id}-${interactiveItemIndex}`;
+              }
               return (
                 <React.Fragment key={itemId}>
                   {React.cloneElement(menuItem, {
                     onClick: (event: React.MouseEvent) => this.handleClick(event, menuItem.props),
                     id: itemId,
-                    isFocused: selectedItemIndex === index,
+                    isFocused:
+                      selectedItemIndex === interactiveItemIndex && !menuItem.props.isHeader,
                   })}
                 </React.Fragment>
               );
@@ -175,9 +216,12 @@ export default class Menu extends React.Component<MenuProps, MenuState> {
     const children = React.Children.toArray(this.props.children);
     let nextSelectedIndex = 0;
     let isShortcut = false;
-    const itemCount = children.length;
-    const firstItem = 0;
-    const lastItem = itemCount - 1;
+    const interactiveItems = children.filter(child => {
+      return !(child as React.ReactElement<DeprecatedMenuItemProps>)?.props?.isHeader;
+    });
+    const interactiveItemCount = interactiveItems.length;
+    const firstIndex = 0;
+    const lastIndex = interactiveItemCount - 1;
 
     if (event.key.length === 1 && event.key.match(/\S/)) {
       let start = this.state.selectedItemIndex + 1;
@@ -197,18 +241,16 @@ export default class Menu extends React.Component<MenuProps, MenuState> {
       switch (event.key) {
         case 'ArrowUp':
         case 'ArrowDown':
-        case 'Down': // IE/Edge specific value
-        case 'Up': // IE/Edge specific value
           const direction = event.key === 'ArrowUp' ? -1 : 1;
           isShortcut = true;
           const nextIndex = this.state.selectedItemIndex + direction;
           nextSelectedIndex =
-            nextIndex < 0 ? lastItem : nextIndex >= itemCount ? firstItem : nextIndex;
+            nextIndex < 0 ? lastIndex : nextIndex >= interactiveItemCount ? firstIndex : nextIndex;
           break;
 
         case 'Home':
         case 'End':
-          const skipTo = event.key === 'Home' ? firstItem : lastItem;
+          const skipTo = event.key === 'Home' ? firstIndex : lastIndex;
           isShortcut = true;
           nextSelectedIndex = skipTo;
           break;
@@ -231,7 +273,9 @@ export default class Menu extends React.Component<MenuProps, MenuState> {
         case ' ':
         case 'Enter':
           nextSelectedIndex = this.state.selectedItemIndex;
-          const child = children[this.state.selectedItemIndex] as React.ReactElement<MenuItemProps>;
+          const child = interactiveItems[this.state.selectedItemIndex] as React.ReactElement<
+            DeprecatedMenuItemProps
+          >;
           this.handleClick(event, child.props);
           isShortcut = true;
           break;
@@ -248,11 +292,11 @@ export default class Menu extends React.Component<MenuProps, MenuState> {
 
   private handleClick = (
     event: React.MouseEvent | React.KeyboardEvent,
-    menuItemProps: MenuItemProps
+    menuItemProps: DeprecatedMenuItemProps
   ): void => {
     /* istanbul ignore next line for coverage */
     if (menuItemProps.isDisabled) {
-      // You should only hit this point if you are using a custom MenuItem implementation.
+      // You should only hit this point if you are using a custom DeprecatedMenuItem implementation.
       return;
     }
     if (menuItemProps.onClick) {
@@ -284,7 +328,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
@@ -308,6 +352,9 @@ export default class Menu extends React.Component<MenuProps, MenuState> {
     };
 
     const firstCharacters = React.Children.map(this.props.children, child => {
+      if ((child as React.ReactElement<DeprecatedMenuItemProps>)?.props?.isHeader) {
+        return;
+      }
       return getFirstCharacter(child);
     });
 

package/menu/lib/MenuItem.tsx

@@ -11,51 +11,64 @@ import {
 import {CanvasSystemIcon} from '@workday/design-assets-types';
 import {SystemIcon, SystemIconProps} from '@workday/canvas-kit-react/icon';
 
-export interface MenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
+/**
+ * ### Deprecated Menu Item Props
+ *
+ * As of Canvas Kit v8, Menu is being soft-deprecated.
+ * It will be hard-deprecated (completely removed) in v9. Please see the
+ * [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
+ * for more information.
+ */
+export interface DeprecatedMenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
   /**
-   * The function called when the MenuItem is clicked. If the item is a child of the Menu component, this callback will be decorated with the onSelect and onClose Menu callbacks. This callback will not fire if the item is disabled (see below).
+   * The function called when the DeprecatedMenuItem is clicked. If the item is a child of the DeprecatedMenu component, this callback will be decorated with the onSelect and onClose DeprecatedMenu callbacks. This callback will not fire if the item is disabled (see below).
    */
   onClick?: (event: React.MouseEvent) => void;
   /**
-   * The unique id for the MenuItem used for ARIA attributes. If the item is a child of the `Menu` component, this property will be generated and overridden.
+   * The unique id for the DeprecatedMenuItem used for ARIA attributes. If the item is a child of the `DeprecatedMenu` component, this property will be generated and overridden.
    */
   id?: string;
   /**
-   * The icon of the MenuItem. This icon is displayed before what you supplied for the children.
+   * The icon of the DeprecatedMenuItem. This icon is displayed before what you supplied for the children.
    */
   icon?: CanvasSystemIcon;
   /**
-   * The secondary icon of the MenuItem. This icon is displayed after what you supplied for the children.
+   * The secondary icon of the DeprecatedMenuItem. This icon is displayed after what you supplied for the children.
    */
   secondaryIcon?: CanvasSystemIcon;
   /**
-   * If true, render a top border on the MenuItem.
+   * If true, render a top border on the DeprecatedMenuItem.
    * @default false
    */
   hasDivider?: boolean;
   /**
-   * If true, set the MenuItem to the disabled state so it is not clickable.
+   * If true, render a header to group data, this menu item will not be intractable.
+   * @default false
+   */
+  isHeader?: boolean;
+  /**
+   * If true, set the DeprecatedMenuItem to the disabled state so it is not clickable.
    * @default false
    */
   isDisabled?: boolean;
   /**
-   * If true, set the MenuItem to be the currently selected item. If the item is a child of the Menu component, this property will be generated and overridden.
+   * If true, set the DeprecatedMenuItem to be the currently selected item. If the item is a child of the DeprecatedMenu component, this property will be generated and overridden.
    * @default false
    */
   isFocused?: boolean;
   /**
-   * The role of the MenuItem. Use this to override the role of the item (e.g. you can use this element as an option in a Combobox).
+   * The role of the DeprecatedMenuItem. Use this to override the role of the item (e.g. you can use this element as an option in a Combobox).
    * @default menuItem
    */
   role?: string;
   /**
-   * If true, allow the onClose Menu callback to be fired after the MenuItem has been clicked.
+   * If true, allow the onClose DeprecatedMenu callback to be fired after the DeprecatedMenuItem has been clicked.
    * @default true
    */
   shouldClose?: boolean;
 }
 
-const Item = styled('li')<Pick<MenuItemProps, 'isDisabled' | 'isFocused'>>(
+const Item = styled('li')<Pick<DeprecatedMenuItemProps, 'isDisabled' | 'isFocused' | 'isHeader'>>(
   {
     ...type.levels.subtext.large,
     padding: `${space.xxs} ${space.s}`,
@@ -71,6 +84,9 @@ const Item = styled('li')<Pick<MenuItemProps, 'isDisabled' | 'isFocused'>>(
       outline: 'none',
     },
   },
+  ({isHeader}) => {
+    return {pointerEvents: isHeader ? 'none' : 'all'};
+  },
   ({isFocused, isDisabled}) => {
     if (!isFocused && !isDisabled) {
       return {
@@ -237,10 +253,27 @@ const scrollIntoViewIfNeeded = (elem: HTMLElement, centerIfNeeded = true): void
   }
 };
 
-class MenuItem extends React.Component<MenuItemProps> {
+/**
+ * ### Deprecated Menu Item
+ *
+ * As of Canvas Kit v8, Menu is being soft-deprecated.
+ * It will be hard-deprecated (completely removed) in v9. Please see the
+ * [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
+ * for more information.
+ */
+export class DeprecatedMenuItem extends React.Component<DeprecatedMenuItemProps> {
   ref = React.createRef<HTMLLIElement>();
 
-  componentDidUpdate = (prevProps: MenuItemProps) => {
+  componentDidMount() {
+    console.warn(
+      `This component is being deprecated and will be removed in Canvas Kit V9.\n
+      For more information, please see the V8 upgrade guide:\n
+      https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page
+      `
+    );
+  }
+
+  componentDidUpdate = (prevProps: DeprecatedMenuItemProps) => {
     if (!prevProps.isFocused && this.props.isFocused) {
       if (this.ref.current) {
         scrollIntoViewIfNeeded(this.ref.current);
@@ -248,7 +281,7 @@ class MenuItem extends React.Component<MenuItemProps> {
     }
   };
 
-  render(): React.ReactNode {
+  render() {
     const {
       onClick,
       children,
@@ -258,6 +291,7 @@ class MenuItem extends React.Component<MenuItemProps> {
       hasDivider,
       isDisabled,
       isFocused,
+      isHeader,
       role,
       ...elemProps
     } = this.props;
@@ -272,11 +306,12 @@ class MenuItem extends React.Component<MenuItemProps> {
           ref={this.ref}
           tabIndex={-1}
           id={id}
-          role={role}
+          role={isHeader ? 'presentation' : role}
           onClick={this.handleClick}
           aria-disabled={isDisabled ? true : undefined}
           isDisabled={!!isDisabled}
           isFocused={!!isFocused}
+          isHeader={!!isHeader}
           {...elemProps}
         >
           {icon && iconProps && <StyledSystemIcon {...iconProps} />}
@@ -306,9 +341,7 @@ class MenuItem extends React.Component<MenuItemProps> {
  */
 // TODO: Remove this ts-ignore when we convert to a functional component
 // @ts-ignore
-MenuItem.defaultProps = {
+DeprecatedMenuItem.defaultProps = {
   shouldClose: true,
   role: 'menuitem',
 };
-
-export default MenuItem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-react",
-  "version": "8.0.0",
+  "version": "8.0.2",
   "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",
@@ -41,20 +41,21 @@
     "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": "^8.0.0",
+    "@workday/canvas-kit-react": "^8.0.2",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.8"
   },
   "devDependencies": {
     "@workday/canvas-accent-icons-web": "^3.0.0",
-    "@workday/canvas-kit-labs-react": "^8.0.0",
+    "@workday/canvas-kit-labs-react": "^8.0.2",
     "formik": "^2.2.9",
-    "yup": "^0.31.1"
+    "react-hook-form": "7.36.1",
+    "yup": "^0.32.11"
   },
-  "gitHead": "433a9d272804ceed26191ac1ef629d61fab4dcb4"
+  "gitHead": "0f1b4cb0314b4ff02e2c81fdcc7986fac582ae9e"
 }

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,2 @@
+export * from './lib/SegmentedControl';
+export * from './lib/hooks/useSegmentedControlModel';

package/segmented-control/lib/SegmentedControl.tsx

@@ -0,0 +1,21 @@
+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;
+}
+
+export const SegmentedControl = createContainer()({
+  displayName: 'SegmentedControl',
+  modelHook: useSegmentedControlModel,
+  subComponents: {
+    List: SegmentedControlList,
+    Item: SegmentedControlItem,
+  },
+})<SegmentedControlProps>(({children}) => {
+  return <>{children}</>;
+});