@workday/canvas-kit-react 15.0.0-alpha.0010-next.0 → 15.0.0-alpha.0028-next.0

package/dist/es6/toast/lib/Toast.js

@@ -42,7 +42,7 @@ const getAriaAttributes = (mode, id) => {
     }
 };
 const toastStencil = createStencil({
-    base: { name: "1pflhw", styles: "box-sizing:border-box;display:flex;flex-direction:row;width:calc(calc(var(--cnvs-sys-space-x20) * 4) + var(--cnvs-sys-space-x10));padding:var(--cnvs-sys-space-zero);gap:var(--cnvs-sys-space-x1);" }
+    base: { name: "3yvih6", styles: "box-sizing:border-box;display:flex;flex-direction:row;width:calc(calc(var(--cnvs-sys-space-x20) * 4) + var(--cnvs-sys-space-x10));padding:var(--cnvs-sys-space-zero);gap:var(--cnvs-sys-space-x1);" }
 }, "toast-55513d");
 /**
  * Toast is a compound component that has different modes based on its contents. The modes add the proper aria attributes for accessibility

package/dist/es6/toast/lib/ToastBody.js

@@ -4,7 +4,7 @@ import { Flex, mergeStyles } from '@workday/canvas-kit-react/layout';
 import { createStencil } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 export const toastBodyStencil = createStencil({
-    base: { name: "34kb6l", styles: "box-sizing:border-box;align-items:flex-start;flex-direction:column;justify-content:center;padding-top:var(--cnvs-sys-space-x4);padding-bottom:var(--cnvs-sys-space-x4);flex-grow:1;gap:var(--cnvs-sys-space-x1);" }
+    base: { name: "3gvpgg", styles: "box-sizing:border-box;align-items:flex-start;flex-direction:column;justify-content:center;padding-top:var(--cnvs-sys-space-x4);padding-bottom:var(--cnvs-sys-space-x4);flex-grow:1;gap:var(--cnvs-sys-space-x1);" }
 }, "toast-body-ac2901");
 export const ToastBody = createComponent('div')({
     displayName: 'Toast.Body',

package/dist/es6/toast/lib/ToastCloseIcon.js

@@ -4,7 +4,7 @@ import { Popup } from '@workday/canvas-kit-react/popup';
 import { createStencil } from '@workday/canvas-kit-styling';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
 export const toastCloseIconStencil = createStencil({
-    base: { name: "la0ic", styles: "box-sizing:border-box;position:relative;" }
+    base: { name: "32guf5", styles: "box-sizing:border-box;position:relative;" }
 }, "toast-close-icon-f7cf19");
 export const ToastCloseIcon = createComponent('button')({
     displayName: 'Toast.CloseIcon',

package/dist/es6/toast/lib/ToastIcon.js

@@ -4,7 +4,7 @@ import { SystemIcon } from '@workday/canvas-kit-react/icon';
 import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 export const toastIconStencil = createStencil({
-    base: { name: "f6atw", styles: "box-sizing:border-box;align-self:start;margin:var(--cnvs-sys-space-x4) var(--cnvs-sys-space-x3);" }
+    base: { name: "jofju", styles: "box-sizing:border-box;align-self:start;margin:var(--cnvs-sys-space-x4) var(--cnvs-sys-space-x3);" }
 }, "toast-icon-22b05a");
 export const ToastIcon = createComponent('div')({
     displayName: 'Toast.Icon',

package/dist/es6/toast/lib/ToastMessage.js

@@ -6,7 +6,7 @@ import { createStencil } from '@workday/canvas-kit-styling';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { system } from '@workday/canvas-tokens-web';
 export const toastMessageStencil = createStencil({
-    base: { name: "3cch7p", styles: "box-sizing:border-box;word-break:break-word;margin-block-start:var(--cnvs-sys-space-zero);margin-block-end:var(--cnvs-sys-space-zero);" }
+    base: { name: "30ykwn", styles: "box-sizing:border-box;word-break:break-word;margin-block-start:var(--cnvs-sys-space-zero);margin-block-end:var(--cnvs-sys-space-zero);" }
 }, "toast-message-19d226");
 export const ToastMessage = createSubcomponent('p')({
     modelHook: useToastModel,

package/dist/es6/tooltip/lib/TooltipContainer.js

@@ -11,13 +11,13 @@ const tooltipTranslateVars = createVars({ id: "9bc811", args: ["positionX", "pos
 /**
  * Keyframe for the Tooltip animation.
  */
-const tooltipAnimation = keyframes({ name: "14lr2r", styles: "0%{opacity:0;transform:translate(var(--positionX-9bc811), var(--positionY-9bc811));}100%{opacity:1;transform:translate(0);}" });
+const tooltipAnimation = keyframes({ name: "15zpab", styles: "0%{opacity:0;transform:translate(var(--positionX-9bc811), var(--positionY-9bc811));}100%{opacity:1;transform:translate(0);}" });
 export const tooltipContainerStencil = createStencil({
     vars: {
         tooltipTransformOriginHorizontal: '',
         tooltipTransformOriginVertical: '',
     },
-    base: { name: "31umax", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-medium);font-size:var(--cnvs-sys-font-size-subtext-medium);letter-spacing:var(--cnvs-base-letter-spacing-100);display:inline-flex;position:relative;padding:var(--cnvs-sys-space-x3);color:var(--cnvs-sys-color-text-inverse);animation-name:animation-14lr2r;animation-duration:150ms;animation-timing-function:ease-out;transform-origin:var(--tooltipTransformOriginVertical-tooltip-container-6c30a8) var(--tooltipTransformOriginHorizontal-tooltip-container-6c30a8);a{color:var(--cnvs-sys-color-text-inverse);text-decoration:underline;}&:before{content:\"\";border-radius:var(--cnvs-sys-shape-x1);outline:0.0625rem solid transparent;outline-offset:-0.0625rem;z-index:-1;margin:var(--cnvs-sys-space-x1);background-color:var(--cnvs-sys-color-bg-translucent);position:absolute;top:0;left:0;right:0;bottom:0;}body:has(:focus-visible, .focus) &{padding:calc(var(--cnvs-sys-space-x4) - calc(var(--cnvs-sys-space-x1) / 2));&:before{margin:calc(var(--cnvs-sys-space-x1) + calc(var(--cnvs-sys-space-x1) / 2));}}[data-popper-reference-hidden] &{visibility:hidden;pointer-events:none;}[data-popper-placement=\"top-start\"] &, [data-popper-placement=\"bottom-start\"] &{left:calc(var(--cnvs-sys-space-x1) * -1);}[data-popper-placement=\"top-end\"] &, [data-popper-placement=\"bottom-end\"] &{right:calc(var(--cnvs-sys-space-x1) * -1);}[data-popper-placement=\"left-start\"] &, [data-popper-placement=\"right-start\"] &{top:calc(var(--cnvs-sys-space-x1) * -1);}[data-popper-placement=\"left-end\"] &, [data-popper-placement=\"right-end\"] &{bottom:calc(var(--cnvs-sys-space-x1) * -1);}" }
+    base: { name: "2dkxvg", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-medium);font-size:var(--cnvs-sys-font-size-subtext-medium);letter-spacing:var(--cnvs-base-letter-spacing-100);display:inline-flex;position:relative;padding:var(--cnvs-sys-space-x3);color:var(--cnvs-sys-color-text-inverse);animation-name:animation-15zpab;animation-duration:150ms;animation-timing-function:ease-out;transform-origin:var(--tooltipTransformOriginVertical-tooltip-container-6c30a8) var(--tooltipTransformOriginHorizontal-tooltip-container-6c30a8);a{color:var(--cnvs-sys-color-text-inverse);text-decoration:underline;}&:before{content:\"\";border-radius:var(--cnvs-sys-shape-x1);outline:0.0625rem solid transparent;outline-offset:-0.0625rem;z-index:-1;margin:var(--cnvs-sys-space-x1);background-color:var(--cnvs-sys-color-bg-translucent);position:absolute;top:0;left:0;right:0;bottom:0;}body:has(:focus-visible, .focus) &{padding:calc(var(--cnvs-sys-space-x4) - calc(var(--cnvs-sys-space-x1) / 2));&:before{margin:calc(var(--cnvs-sys-space-x1) + calc(var(--cnvs-sys-space-x1) / 2));}}[data-popper-reference-hidden] &{visibility:hidden;pointer-events:none;}[data-popper-placement=\"top-start\"] &, [data-popper-placement=\"bottom-start\"] &{left:calc(var(--cnvs-sys-space-x1) * -1);}[data-popper-placement=\"top-end\"] &, [data-popper-placement=\"bottom-end\"] &{right:calc(var(--cnvs-sys-space-x1) * -1);}[data-popper-placement=\"left-start\"] &, [data-popper-placement=\"right-start\"] &{top:calc(var(--cnvs-sys-space-x1) * -1);}[data-popper-placement=\"left-end\"] &, [data-popper-placement=\"right-end\"] &{bottom:calc(var(--cnvs-sys-space-x1) * -1);}" }
 }, "tooltip-container-6c30a8");
 export const TooltipContainer = createComponent('div')({
     displayName: 'TooltipContainer',

package/dist/es6/version/lib/version.js

@@ -1 +1 @@
-export const version = '14.1.19';
+export const version = '14.1.23';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "15.0.0-alpha.0010-next.0",
+  "version": "15.0.0-alpha.0028-next.0",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -52,9 +52,9 @@
     "@popperjs/core": "^2.5.4",
     "@tanstack/react-virtual": "^3.13.9",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^15.0.0-alpha.0010-next.0",
-    "@workday/canvas-kit-preview-react": "^15.0.0-alpha.0010-next.0",
-    "@workday/canvas-kit-styling": "^15.0.0-alpha.0010-next.0",
+    "@workday/canvas-kit-popup-stack": "^15.0.0-alpha.0028-next.0",
+    "@workday/canvas-kit-preview-react": "^15.0.0-alpha.0028-next.0",
+    "@workday/canvas-kit-styling": "^15.0.0-alpha.0028-next.0",
     "@workday/canvas-system-icons-web": "^3.0.36",
     "@workday/canvas-tokens-web": "4.0.0-alpha.3",
     "@workday/design-assets-types": "^0.2.10",
@@ -69,5 +69,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "596c44d0fd4c67d54185ce1a91b1ab3517981dd2"
+  "gitHead": "0054a4629daac5e8d66cc4ce3ab221681677150f"
 }

package/segmented-control/index.ts

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

package/segmented-control/lib/SegmentedControl.tsx

@@ -1,86 +1,57 @@
-import * as React from 'react';
+import React from 'react';
+import {createContainer} from '@workday/canvas-kit-react/common';
 
-import {createComponent} from '@workday/canvas-kit-react/common';
-import {SegmentedControlButton, SegmentedControlButtonProps} from './SegmentedControlButton';
+import {useSegmentedControlModel} from './hooks/useSegmentedControlModel';
+import {SegmentedControlList} from './SegmentedControlList';
+import {SegmentedControlItem} from './SegmentedControlItem';
 
-/**
- * @deprecated ⚠️ `SegmentedControlProps` in Main has been deprecated and will be removed in a future major version. Please use [`SegmentedControl` in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-segmented-control--docs) instead.
- */
 export interface SegmentedControlProps {
-  /**
-   * The Button children of the SegmentedControl (must be at least two).
-   * TODO: Add support for text children
-   */
-  children: React.ReactElement<SegmentedControlButtonProps>[];
-
-  /**
-   * The value or index of the Button that the SegmentedControl should be toggled on to.
-   * If a string is provided, the Button with the corresponding value will be selected.
-   * If a number is provided, the Button with the corresponding index will be selected.
-   * @default 0
-   */
-  value?: string | number;
-
-  /**
-   * The function called when a button in the SegmentedControl is toggled.
-   * If the selected button has a value, that value will be passed to the callback function;
-   * otherwise, the index of the button will be passed.
-   */
-  onChange?: (value: string | number) => void;
+  children: React.ReactNode;
 }
 
-const onButtonClick = (
-  existingOnClick: ((e: React.MouseEvent<HTMLButtonElement>) => void) | undefined,
-  onChange: ((value: string | number) => void) | undefined,
-  index: number,
-  event: React.MouseEvent<HTMLButtonElement>
-): void => {
-  if (existingOnClick) {
-    existingOnClick(event);
-  }
-
-  const target = event.currentTarget;
-  if (target && onChange) {
-    if (target.value) {
-      onChange(target.value);
-    } else {
-      onChange(index);
-    }
-  }
-};
-
 /**
- * @deprecated ⚠️ `SegmentedControl` in Main has been deprecated and will be removed in a future major version. Please use [`SegmentedControl` in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-segmented-control--docs) instead.
+ * `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 = createComponent('div')({
+export const SegmentedControl = createContainer()({
   displayName: 'SegmentedControl',
-  Component: ({value = 0, children, onChange, ...elemProps}: SegmentedControlProps, ref) => {
-    return (
-      <div {...elemProps}>
-        {React.Children.map(
-          children,
-          (
-            child: React.ReactElement<
-              SegmentedControlButtonProps & {
-                onClick?: React.MouseEventHandler<HTMLButtonElement>;
-              } & React.HTMLAttributes<HTMLButtonElement> // segmented control button will have correct props
-            >,
-            index: number
-          ) => {
-            if (typeof child.type === typeof SegmentedControlButton) {
-              return React.cloneElement(child, {
-                toggled: typeof value === 'number' ? index === value : child.props.value === value,
-                onClick: onButtonClick.bind(undefined, child.props.onClick, onChange, index),
-              });
-            }
-
-            return child;
-          }
-        )}
-      </div>
-    );
-  },
+  modelHook: useSegmentedControlModel,
   subComponents: {
-    Button: SegmentedControlButton,
+    /**
+     * `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,230 @@
+import * as React from 'react';
+
+import {BaseButton, ButtonContainerProps, buttonStencil} from '@workday/canvas-kit-react/button';
+import {CanvasSystemIcon} from '@workday/design-assets-types';
+import {createSubcomponent} from '@workday/canvas-kit-react/common';
+import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {Tooltip, TooltipProps} from '@workday/canvas-kit-react/tooltip';
+import {Text} from '@workday/canvas-kit-react/text';
+import {useSegmentedControlModel} from './hooks/useSegmentedControlModel';
+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'>;
+}
+
+export const segmentedControlItemStencil = createStencil({
+  extends: buttonStencil,
+  base: {
+    ...system.type.subtext.large,
+    fontWeight: system.fontWeight.bold,
+    textAlign: 'start',
+    paddingInline: system.space.zero,
+    gap: system.space.x1,
+
+    [buttonStencil.vars.borderRadius]: system.shape.x1,
+    [buttonStencil.vars.label]: system.color.fg.muted.strong,
+    [systemIconStencil.vars.color]: system.color.fg.muted.strong,
+
+    '&:hover, &.hover': {
+      [buttonStencil.vars.background]: system.color.bg.alt.strong,
+      [buttonStencil.vars.label]: system.color.fg.muted.strong,
+      [systemIconStencil.vars.color]: system.color.fg.muted.strong,
+    },
+
+    '&:active, &.active': {
+      [buttonStencil.vars.background]: system.color.bg.alt.strong,
+      [buttonStencil.vars.label]: system.color.fg.muted.strong,
+      [systemIconStencil.vars.color]: system.color.fg.muted.strong,
+    },
+
+    '&:focus-visible, &.focus': {
+      [buttonStencil.vars.label]: system.color.fg.muted.strong,
+      [systemIconStencil.vars.color]: system.color.fg.muted.strong,
+    },
+
+    '&:disabled, &.disabled': {
+      [buttonStencil.vars.background]: system.color.bg.alt.soft,
+    },
+
+    "&[aria-pressed='true']": {
+      [buttonStencil.vars.background]: system.color.bg.default,
+      [buttonStencil.vars.border]: system.color.border.input.default,
+      [systemIconStencil.vars.color]: system.color.fg.strong,
+      [buttonStencil.vars.label]: system.color.fg.strong,
+
+      '&:hover, &.hover': {
+        [systemIconStencil.vars.color]: system.color.fg.strong,
+        [buttonStencil.vars.label]: system.color.fg.strong,
+      },
+
+      '&:disabled, &.disabled': {
+        [buttonStencil.vars.border]: system.color.border.input.default,
+        [buttonStencil.vars.label]: system.color.fg.strong,
+        [systemIconStencil.vars.color]: system.color.fg.strong,
+      },
+    },
+    ':dir(rtl)': {
+      svg: {
+        transform: 'scaleX(-1)',
+      },
+    },
+  },
+  modifiers: {
+    size: {
+      large: {
+        height: system.space.x10,
+        gap: system.space.x2,
+      },
+      medium: {
+        height: system.space.x8,
+      },
+      small: {
+        ...system.type.subtext.medium,
+        fontWeight: system.fontWeight.bold,
+        height: system.space.x6,
+      },
+    },
+    variant: {
+      iconOnly: {},
+      textOnly: {},
+      iconWithText: {},
+    },
+  },
+  compound: [
+    {
+      modifiers: {size: 'large', variant: 'iconOnly'},
+      styles: {
+        minWidth: system.space.x10,
+      },
+    },
+    {
+      modifiers: {size: 'large', variant: 'iconWithText'},
+      styles: {
+        paddingInline: `${px2rem(20)} ${system.space.x6}`,
+      },
+    },
+    {
+      modifiers: {size: 'large', variant: 'textOnly'},
+      styles: {
+        paddingInline: system.space.x6,
+      },
+    },
+    {
+      modifiers: {size: 'medium', variant: 'iconOnly'},
+      styles: {
+        minWidth: system.space.x8,
+      },
+    },
+    {
+      modifiers: {size: 'medium', variant: 'iconWithText'},
+      styles: {
+        paddingInline: `${system.space.x4} ${px2rem(20)}`,
+      },
+    },
+    {
+      modifiers: {size: 'medium', variant: 'textOnly'},
+      styles: {
+        paddingInline: px2rem(20),
+      },
+    },
+    {
+      modifiers: {size: 'small', variant: 'iconOnly'},
+      styles: {
+        minWidth: system.space.x6,
+      },
+    },
+    {
+      modifiers: {size: 'small', variant: 'iconWithText'},
+      styles: {
+        paddingInline: `${system.space.x2} ${system.space.x3}`,
+      },
+    },
+    {
+      modifiers: {size: 'small', variant: 'textOnly'},
+      styles: {
+        paddingInline: system.space.x3,
+      },
+    },
+  ],
+});
+
+type ContainerProps = {
+  tooltipProps?: Omit<TooltipProps, 'children'>;
+  children: React.ReactElement;
+};
+
+const Container = ({tooltipProps, children}: ContainerProps) => {
+  return tooltipProps ? (
+    <Tooltip {...tooltipProps}>{children}</Tooltip>
+  ) : (
+    <React.Fragment>{children}</React.Fragment>
+  );
+};
+
+const getVariant = (icon: CanvasSystemIcon | undefined, children: React.ReactNode) => {
+  if (icon && children) {
+    return 'iconWithText';
+  } else if (!icon && children) {
+    return 'textOnly';
+  } else {
+    return 'iconOnly';
+  }
+};
+
+export const SegmentedControlItem = createSubcomponent('button')({
+  displayName: 'SegmentedControl.Item',
+  modelHook: useSegmentedControlModel,
+  elemPropsHook: useSegmentedControlItem,
+})<ItemProps>(({children, icon, tooltipProps, ...elemProps}, Element, {state: {size}}) => {
+  const variant = getVariant(icon, children);
+  const iconSize = size === 'small' ? 'extraSmall' : 'small';
+
+  return (
+    <Container tooltipProps={tooltipProps}>
+      <BaseButton
+        as={Element}
+        {...handleCsProp(elemProps, segmentedControlItemStencil({size, variant}))}
+      >
+        {icon && <BaseButton.Icon icon={icon} size={iconSize} />}
+        {children && <Text>{children}</Text>}
+      </BaseButton>
+    </Container>
+  );
+});

package/segmented-control/lib/SegmentedControlList.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+
+import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {Grid} from '@workday/canvas-kit-react/layout';
+import {system} from '@workday/canvas-tokens-web';
+import {useSegmentedControlModel} from './hooks/useSegmentedControlModel';
+import {useListRenderItems} from '@workday/canvas-kit-react/collection';
+
+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 segmentedControlListStencil = createStencil({
+  vars: {
+    items: '',
+  },
+  base: {
+    display: 'inline-grid',
+    backgroundColor: system.color.bg.alt.soft,
+    border: `${px2rem(1)} solid ${system.color.border.input.default}`,
+    borderRadius: system.shape.x2,
+    padding: px2rem(3),
+    gridGap: system.space.x2,
+  },
+  modifiers: {
+    disabled: {
+      true: {
+        opacity: system.opacity.disabled,
+      },
+    },
+    orientation: {
+      vertical: ({items}) => ({
+        gridTemplateRows: `repeat(${items}, 1fr)`,
+      }),
+      horizontal: ({items}) => ({
+        gridTemplateColumns: `repeat(${items}, 1fr)`,
+      }),
+    },
+  },
+});
+
+export const SegmentedControlList = createSubcomponent('div')({
+  displayName: 'SegmentedControl.List',
+  modelHook: useSegmentedControlModel,
+})<SegmentedControlListProps>(({children, ...elemProps}, Element, model) => {
+  return (
+    <Element
+      role="group"
+      {...handleCsProp(
+        elemProps,
+        segmentedControlListStencil({
+          disabled: model.state.disabled,
+          items: `${model.state.items.length}`,
+          orientation: model.state.orientation,
+        })
+      )}
+    >
+      {useListRenderItems(model, children)}
+    </Element>
+  );
+});

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 = data.id;
+          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/dist/commonjs/segmented-control/lib/SegmentedControlButton.d.ts

@@ -1,16 +0,0 @@
-import { ButtonContainerProps } from '@workday/canvas-kit-react/button';
-import { CanvasSystemIcon } from '@workday/design-assets-types';
-/**
- * @deprecated ⚠️ `SegmentedControlButtonProps` in Main has been deprecated and will be removed in a future major version. Please use [`SegmentedControl` in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-segmented-control--docs) instead.
- */
-export interface SegmentedControlButtonProps extends ButtonContainerProps {
-    toggled?: boolean;
-    icon: CanvasSystemIcon;
-    value?: string | number;
-    size?: 'small' | 'medium' | 'large';
-}
-/**
- * @deprecated ⚠️ `SegmentedControlButton` in Main has been deprecated and will be removed in a future major version. Please use [`SegmentedControl` in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-segmented-control--docs) instead.
- */
-export declare const SegmentedControlButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", SegmentedControlButtonProps>;
-//# sourceMappingURL=SegmentedControlButton.d.ts.map

package/dist/commonjs/segmented-control/lib/SegmentedControlButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SegmentedControlButton.d.ts","sourceRoot":"","sources":["../../../../segmented-control/lib/SegmentedControlButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,oBAAoB,EAAgB,MAAM,kCAAkC,CAAC;AAEjG,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AA+E9D;;GAEG;AACH,MAAM,WAAW,2BAA4B,SAAQ,oBAAoB;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,gBAAgB,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC;AAED;;GAEG;AACH,eAAO,MAAM,sBAAsB,oGAkBjC,CAAC"}