@workday/canvas-kit-labs-react 16.1.3 → 16.2.0-0604-next.0

package/dist/es6/selection-group/lib/hooks/useSelectionGroupModel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectionGroupModel.d.ts","sourceRoot":"","sources":["../../../../../selection-group/lib/hooks/useSelectionGroupModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACL,gBAAgB,EAIjB,MAAM,sCAAsC,CAAC;AAG9C,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,UAAU,CAAC;AACvD,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AACjE,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,SAAS,CAAC;AAatD,eAAO,MAAM,sBAAsB;IAG/B;;;OAGG;;IAEH;;;;;;;;;OASG;;IAEH;;;;;;OAMG;;IAEH;;;;;;;OAOG;;IAEH;;;OAGG;;IAEH;;;;OAIG;;IAEH;;;;OAIG;;IAEH;;;;;;;;OAQG;;IAEH;;;;;OAKG;;IAEH;;;OAGG;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA3EH;;;OAGG;;IAEH;;;;;;;;;OASG;;IAEH;;;;;;OAMG;;IAEH;;;;;;;OAOG;;IAEH;;;OAGG;;IAEH;;;;OAIG;;IAEH;;;;OAIG;;IAEH;;;;;;;;OAQG;;IAEH;;;;;OAKG;;IAEH;;;OAGG;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2FL,CAAC"}

package/dist/es6/selection-group/lib/hooks/useSelectionGroupModel.js

@@ -0,0 +1,160 @@
+import React from 'react';
+import { multiSelectionManager, singleSelectionManager, useListModel, } from '@workday/canvas-kit-react/collection';
+import { createModelHook } from '@workday/canvas-kit-react/common';
+/**
+ * `createModelHook` runs a model's guards and callbacks unless the event it is wrapping is already
+ * a wrapped event. The overrides below delegate to events from the list model, which runs those
+ * same guards and callbacks because both models share a config, so they are marked as wrapped too.
+ * Without this, the `onGoTo*` callbacks would fire twice for a single key press.
+ */
+const asWrappedEvent = (fn) => {
+    fn._wrapped = true;
+    return fn;
+};
+export const useSelectionGroupModel = createModelHook({
+    defaultConfig: {
+        ...useListModel.defaultConfig,
+        /**
+         * Optional id for the whole `SelectionGroup`. If not provided, a unique id will be created.
+         * @default useUniqueId()
+         */
+        id: '',
+        /**
+         * The selection mode of the group. `single` allows one selection at a time and behaves like a
+         * radio group. `multiple` allows more than one selection and behaves like a checkbox group.
+         *
+         * This drives more than selection - it also determines the `radio`/`checkbox` role of an item,
+         * the `radiogroup`/`group` role of the list, whether the group is one tab stop or many, and the
+         * shape of the item's icon. The matching `selection` manager is derived from it, so most groups
+         * should set `mode` rather than passing a `selection` manager directly.
+         * @default 'single'
+         */
+        mode: 'single',
+        /**
+         * The selection manager the underlying list model uses. Leave this unset unless you need
+         * selection to behave differently from what `mode` provides - `mode` picks
+         * `singleSelectionManager` or `multiSelectionManager` for you. Setting this does not change
+         * the roles or keyboard behavior that `mode` controls.
+         * @default `singleSelectionManager`, or `multiSelectionManager` when `mode` is `'multiple'`
+         */
+        selection: undefined,
+        /**
+         * Controls how item widths are calculated within the group. All items in a group use the same
+         * sizing method.
+         * - `content`: each item is sized to its own label.
+         * - `equal`: each item is sized to match the widest item.
+         * - `column`: each item spans the full width of the group.
+         * @default 'content'
+         */
+        width: 'content',
+        /**
+         * The initially selected ids of the group. Use this for uncontrolled groups. For `single` mode,
+         * provide a single id. If not provided, nothing is selected until the user interacts.
+         */
+        initialSelectedIds: [],
+        /**
+         * The selected ids of the group. Providing this prop puts the model in a controlled state: the
+         * group renders exactly what is passed in and will not change on its own. Use `onSelect` to
+         * respond to selection.
+         */
+        selectedIds: undefined,
+        /**
+         * Sets disabled state for every item in the group. To disable individual items instead, pass
+         * their ids to `nonInteractiveIds` so keyboard navigation skips over them.
+         * @default false
+         */
+        disabled: false,
+        /**
+         * The type of error associated with the group (if applicable). Notification states apply to the
+         * whole group rather than to individual items.
+         *
+         * This prop only changes the group's border color, which is not sufficient on its own. Always
+         * pair it with visible text describing the state and reference that text with
+         * `aria-describedby`. Wrapping the group in a `FormField` with a `FormField.Hint` does this
+         * for you.
+         */
+        error: undefined,
+        /**
+         * If true, the group is marked invalid to assistive technology. Only applies when `mode` is
+         * `'single'`, because `aria-invalid` is not allowed on the `group` role that a multi-select
+         * group renders.
+         * @default true when `error` is `'error'`, otherwise undefined
+         */
+        'aria-invalid': undefined,
+        /**
+         * The id of the element describing the group, such as the hint text of a `FormField`. This is
+         * set automatically when the group is used as a `FormField.Input`.
+         */
+        'aria-describedby': undefined,
+        /**
+         * The orientation of keyboard navigation within the group.
+         * @default 'horizontal'
+         */
+        orientation: 'horizontal',
+    },
+    requiredConfig: useListModel.requiredConfig,
+})(config => {
+    var _a;
+    const isControlled = config.selectedIds !== undefined;
+    const selection = config.selection ||
+        (config.mode === 'multiple' ? multiSelectionManager : singleSelectionManager);
+    const listModel = useListModel(useListModel.mergeConfig(config, {
+        orientation: config.orientation || 'horizontal',
+        selection,
+        initialSelectedIds: config.selectedIds || config.initialSelectedIds,
+        shouldVirtualize: false,
+        // `mergeConfig` combines this with a `shouldSelect` from the consumer rather than replacing
+        // it. Guarding here means a blocked selection never reaches `onSelect`.
+        shouldSelect: () => !config.disabled,
+    }));
+    // A single-select group is a radio group, so selection follows focus while arrowing through
+    // items. The cursor events below set this, and the effect selects whatever the cursor landed on.
+    const shouldSelectCursorRef = React.useRef(false);
+    // A navigation event doesn't always move the cursor - a single-item group, or a non-wrapping
+    // navigation manager at either end of the list, leaves it where it is. Counting the events gives
+    // the effect below something that always changes, so an arrow key still selects in those cases.
+    const [navigationCount, setNavigationCount] = React.useState(0);
+    const state = {
+        ...listModel.state,
+        mode: config.mode,
+        width: config.width,
+        disabled: config.disabled,
+        error: config.error,
+        'aria-invalid': (_a = config['aria-invalid']) !== null && _a !== void 0 ? _a : (config.error === 'error' ? true : undefined),
+        'aria-describedby': config['aria-describedby'],
+        selectedIds: isControlled ? config.selectedIds : listModel.state.selectedIds,
+    };
+    const navigationEvents = Object.keys(listModel.events).filter(name => name.startsWith('goTo') && name !== 'goTo');
+    const selectFollowsFocusEvents = navigationEvents.reduce((result, eventName) => {
+        result[eventName] = asWrappedEvent(() => {
+            // Let the cursor model resolve the target and move the cursor. Navigation skips
+            // `nonInteractiveIds`, so this can't land selection on a non-interactive item.
+            listModel.events[eventName]();
+            shouldSelectCursorRef.current = true;
+            setNavigationCount(count => count + 1);
+        });
+        return result;
+    }, {});
+    const events = {
+        ...listModel.events,
+        ...(config.mode === 'single' ? selectFollowsFocusEvents : {}),
+    };
+    const { cursorId } = listModel.state;
+    React.useEffect(() => {
+        if (!shouldSelectCursorRef.current) {
+            return;
+        }
+        shouldSelectCursorRef.current = false;
+        if (typeof cursorId === 'string' && cursorId && !state.nonInteractiveIds.includes(cursorId)) {
+            listModel.events.select({ id: cursorId });
+        }
+        // Selection follows the cursor, so this should only run after a navigation event, whether or
+        // not that event moved the cursor.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [cursorId, navigationCount]);
+    return {
+        ...listModel,
+        state,
+        events,
+    };
+});

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

@@ -1 +1 @@
-export const version = '16.1.3';
+export const version = '16.1.1';

package/index.ts

@@ -1,3 +1,4 @@
 export * from './ai-ingress-button';
 export * from './kbd';
+export * from './selection-group';
 export * from './version';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-labs-react",
-  "version": "16.1.3",
+  "version": "16.2.0-0604-next.0",
   "description": "Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functionality. The Labs modules allow us to do that as needed.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -48,8 +48,8 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^16.1.3",
-    "@workday/canvas-kit-styling": "^16.1.3",
+    "@workday/canvas-kit-react": "^16.2.0-0604-next.0",
+    "@workday/canvas-kit-styling": "^16.2.0-0604-next.0",
     "@workday/canvas-system-icons-web": "^5.0.3",
     "@workday/canvas-tokens-web": "^4.4.0",
     "@workday/design-assets-types": "^0.3.0",
@@ -60,5 +60,5 @@
   "devDependencies": {
     "@types/lodash.flatten": "^4.4.6"
   },
-  "gitHead": "9983058bfdbabd7d5314434c5f81f39b3af78c19"
+  "gitHead": "58ce933e857e255360611f2330a230b167cead8d"
 }

package/selection-group/index.ts

@@ -0,0 +1,6 @@
+export * from './lib/SelectionGroup';
+export * from './lib/SelectionGroupIcon';
+export * from './lib/SelectionGroupList';
+export * from './lib/SelectionGroupItem';
+export * from './lib/hooks/useSelectionGroupModel';
+export * from './lib/hooks/useSelectionGroupItem';

package/selection-group/lib/SelectionGroup.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+
+import {createContainer} from '@workday/canvas-kit-react/common';
+
+import {SelectionGroupItem} from './SelectionGroupItem';
+import {SelectionGroupList} from './SelectionGroupList';
+import {useSelectionGroupModel} from './hooks/useSelectionGroupModel';
+
+export interface SelectionGroupProps {
+  children: React.ReactNode;
+}
+
+/**
+ * `SelectionGroup` is a container component that allows users to select one or more options from a
+ * predefined list using chip-style controls with a lightweight glyph indicator. It is responsible
+ * for creating a {@link useSelectionGroupModel SelectionGroupModel} and sharing it with its
+ * subcomponents using React context. It does not represent a real element.
+ *
+ * ```tsx
+ * <SelectionGroup mode="single">
+ *   <SelectionGroup.List aria-label="Select one option">
+ *     <SelectionGroup.Item data-id="first">First</SelectionGroup.Item>
+ *     <SelectionGroup.Item data-id="second">Second</SelectionGroup.Item>
+ *   </SelectionGroup.List>
+ * </SelectionGroup>
+ * ```
+ *
+ * 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 = useSelectionGroupModel({mode: 'multiple'});
+ *
+ * <SelectionGroup model={model}>{Child components}</SelectionGroup>
+ * ```
+ */
+export const SelectionGroup = createContainer()({
+  displayName: 'SelectionGroup',
+  modelHook: useSelectionGroupModel,
+  subComponents: {
+    /**
+     * `SelectionGroup.List` is a container for {@link SelectionGroupItem SelectionGroup.Item}
+     * subcomponents. It renders a `radiogroup` in `single` mode and a `group` in `multiple` mode,
+     * and carries the group's accessible label and notification state.
+     *
+     * ```tsx
+     * <SelectionGroup.List aria-label="Select all that apply">
+     *   {SelectionGroup.Items}
+     * </SelectionGroup.List>
+     * ```
+     */
+    List: SelectionGroupList,
+    /**
+     * `SelectionGroup.Item` is a `button` element with a glyph and a label. Each item requires a
+     * `data-id` prop to handle selection events properly.
+     *
+     * ```tsx
+     * <SelectionGroup.Item data-id="option-a">Option A</SelectionGroup.Item>
+     * ```
+     */
+    Item: SelectionGroupItem,
+  },
+})<SelectionGroupProps>(({children}) => {
+  return <>{children}</>;
+});

package/selection-group/lib/SelectionGroupIcon.tsx

@@ -0,0 +1,60 @@
+import {ExtractProps, createComponent} from '@workday/canvas-kit-react/common';
+import {SystemIcon} from '@workday/canvas-kit-react/icon';
+import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
+import {
+  checkCircleFillIcon,
+  checkboxFillIcon,
+  circleIcon,
+  squareIcon,
+} from '@workday/canvas-system-icons-web';
+
+import {SelectionGroupMode} from './hooks/useSelectionGroupModel';
+
+export interface SelectionGroupIconProps
+  extends Omit<ExtractProps<typeof SystemIcon, never>, 'icon'> {
+  /**
+   * The selection mode of the group the item belongs to. A circle is used for `single` and a
+   * square for `multiple`, matching the radio and checkbox controls each mode behaves like.
+   */
+  mode: SelectionGroupMode;
+  /**
+   * If true, the checked form of the icon is rendered.
+   */
+  selected: boolean;
+}
+
+export const selectionGroupIconStencil = createStencil({
+  base: {
+    flexShrink: 0,
+  },
+});
+
+/**
+ * The icon is always rendered, in both modes and in both selected states, so items never shift
+ * width on selection. The shape communicates the mode and the checkmark communicates selection, so
+ * selected state is never conveyed by color alone.
+ */
+const icons = {
+  single: {selected: checkCircleFillIcon, unselected: circleIcon},
+  multiple: {selected: checkboxFillIcon, unselected: squareIcon},
+} as const;
+
+export const SelectionGroupIcon = createComponent('span')({
+  displayName: 'SelectionGroupIcon',
+  Component: (
+    {mode, selected, size = 'xs', ...elemProps}: SelectionGroupIconProps,
+    ref,
+    Element
+  ) => (
+    <SystemIcon
+      as={Element}
+      ref={ref}
+      size={size}
+      // The item's `aria-checked` already conveys selection and its label provides the accessible
+      // name, so the icon is decorative.
+      aria-hidden={true}
+      icon={icons[mode][selected ? 'selected' : 'unselected']}
+      {...handleCsProp(elemProps, selectionGroupIconStencil())}
+    />
+  ),
+});

package/selection-group/lib/SelectionGroupItem.tsx

@@ -0,0 +1,143 @@
+import * as React from 'react';
+
+import {isSelected} from '@workday/canvas-kit-react/collection';
+import {cornerShapeStencil, createSubcomponent, focusRing} from '@workday/canvas-kit-react/common';
+import {systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+
+import {SelectionGroupIcon} from './SelectionGroupIcon';
+import {useSelectionGroupItem} from './hooks/useSelectionGroupItem';
+import {useSelectionGroupModel} from './hooks/useSelectionGroupModel';
+
+export interface SelectionGroupItemProps {
+  /**
+   * Optionally pass index to the item. This should be done if `SelectionGroup.Item` components were
+   * created via a `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. Labels should be short and concise.
+   */
+  children?: React.ReactNode;
+  /**
+   * The identifier of the item. This identifier will be used in change events.
+   * If this property is not provided, it will default to a string representation
+   * of 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 `SelectionGroup` component and
+   * append the index at the end. Only set this for advanced cases.
+   */
+  id?: string;
+}
+
+export const selectionGroupItemStencil = createStencil({
+  extends: cornerShapeStencil,
+  parts: {
+    label: 'selection-group-item-label',
+  },
+  base: ({labelPart}) => ({
+    [cornerShapeStencil.vars.shape]: system.legacy.shape.lg,
+    ...system.legacy.type.subtext.lg,
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: base.legacy.size75,
+    border: `${px2rem(1)} solid ${system.color.border.default}`,
+    padding: `${system.legacy.padding.xs} ${system.legacy.padding.sm}`,
+    backgroundColor: system.legacy.color.surface.default,
+    color: system.color.fg.strong,
+    cursor: 'pointer',
+    textAlign: 'start',
+    transition: 'background-color 80ms ease, color 80ms ease, border-color 80ms ease',
+    [systemIconStencil.vars.color]: 'currentColor',
+    [systemIconStencil.vars.accentColor]: 'currentColor',
+
+    [labelPart]: {
+      whiteSpace: 'nowrap',
+    },
+
+    '&:not([aria-checked="true"]):is(:hover, .hover)': {
+      backgroundColor: system.legacy.color.surface.overlay.hover.default,
+    },
+
+    '&:not([aria-checked="true"]):is(:active, .active)': {
+      backgroundColor: system.legacy.color.surface.overlay.pressed.default,
+    },
+
+    // The ring sits outside the item so it never competes with the selected background, and so a
+    // selected item and a focused item remain visually distinct.
+    '&:is(:focus-visible, .focus)': {
+      ...focusRing({separation: 1}),
+    },
+
+    '&:is(:disabled, .disabled)': {
+      cursor: 'default',
+      opacity: system.opacity.disabled,
+
+      '&:is(:hover, .hover)': {
+        backgroundColor: system.legacy.color.surface.default,
+      },
+    },
+
+    // No border on a selected item - a selected border would compete with the focus ring. The
+    // transparent border keeps the item the same size as an unselected one.
+    '&[aria-checked="true"]': {
+      backgroundColor: system.legacy.color.brand.surface.selected,
+      border: `${px2rem(1)} solid transparent`,
+      color: system.legacy.color.brand.fg.selected,
+
+      '&:is(:hover, .hover)': {
+        backgroundColor: system.legacy.color.brand.surface.selected,
+      },
+
+      '&:is(:active, .active)': {
+        backgroundColor: system.legacy.color.brand.surface.selected,
+      },
+
+      '&:is(:disabled, .disabled)': {
+        backgroundColor: system.legacy.color.brand.surface.selected,
+        color: system.legacy.color.brand.fg.selected,
+      },
+    },
+  }),
+  modifiers: {
+    width: {
+      content: {
+        width: 'fit-content',
+      },
+      equal: {
+        width: '100%',
+      },
+      column: {
+        width: '100%',
+      },
+    },
+  },
+});
+
+export const SelectionGroupItem = createSubcomponent('button')({
+  displayName: 'SelectionGroup.Item',
+  modelHook: useSelectionGroupModel,
+  elemPropsHook: useSelectionGroupItem,
+})<SelectionGroupItemProps>(({children, ...elemProps}, Element, model) => {
+  const name = elemProps['data-id'] || '';
+  const selected = !!name && isSelected(name, model.state);
+
+  return (
+    <Element
+      {...handleCsProp(
+        elemProps,
+        selectionGroupItemStencil({
+          width: model.state.width,
+        })
+      )}
+    >
+      <SelectionGroupIcon mode={model.state.mode} selected={selected} />
+      {children && <span {...selectionGroupItemStencil.parts.label}>{children}</span>}
+    </Element>
+  );
+});

package/selection-group/lib/SelectionGroupList.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+
+import {useListRenderItems} from '@workday/canvas-kit-react/collection';
+import {cornerShapeStencil, createSubcomponent} from '@workday/canvas-kit-react/common';
+import {CSProps, createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+import {useSelectionGroupModel} from './hooks/useSelectionGroupModel';
+
+export interface SelectionGroupListProps<T = any> extends CSProps {
+  /**
+   * Accessible label for the group. The label should state the selection mode, for example
+   * `"Select one"` or `"Select all that apply"`, so the mode is clear before interacting. Required
+   * unless `aria-labelledby` is provided or the group is wrapped in a `FormField` with a visible
+   * label.
+   */
+  'aria-label'?: string;
+  /**
+   * ID of an element that labels the group. Use when the group label is rendered outside the list.
+   */
+  'aria-labelledby'?: string;
+  children: ((item: T) => React.ReactNode) | React.ReactNode;
+}
+
+export const selectionGroupListStencil = createStencil({
+  extends: cornerShapeStencil,
+  base: {
+    [cornerShapeStencil.vars.shape]: system.legacy.shape.lg,
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: system.legacy.gap.xs,
+    width: 'fit-content',
+    boxSizing: 'border-box',
+    // Notification states draw a ring around the whole group, so the container always reserves the
+    // space the ring occupies. Without it the ring would sit underneath the opaque items.
+    border: `${px2rem(2)} solid transparent`,
+    padding: system.legacy.padding.xxs,
+    transition: '100ms border-color',
+  },
+  modifiers: {
+    width: {
+      content: {},
+      // `1fr` auto columns inside a `fit-content` grid all resolve to the widest item's
+      // max-content width, which sizes every item to the longest label without measuring the DOM.
+      equal: {
+        display: 'grid',
+        gridAutoFlow: 'column',
+        gridAutoColumns: '1fr',
+      },
+      column: {
+        flexDirection: 'column',
+        flexWrap: 'nowrap',
+        width: '100%',
+      },
+    },
+    error: {
+      error: {
+        borderColor: system.legacy.color.brand.border.critical,
+      },
+      caution: {
+        borderColor: system.legacy.color.brand.border.caution,
+      },
+    },
+  },
+});
+
+export const SelectionGroupList = createSubcomponent('div')({
+  displayName: 'SelectionGroup.List',
+  modelHook: useSelectionGroupModel,
+})<SelectionGroupListProps>(({children, ...elemProps}, Element, model) => {
+  return (
+    <Element
+      role={model.state.mode === 'single' ? 'radiogroup' : 'group'}
+      // `aria-invalid` is not an allowed attribute of the `group` role, so a multi-select group
+      // conveys its error state through the text referenced by `aria-describedby` instead.
+      aria-invalid={model.state.mode === 'single' ? model.state['aria-invalid'] : undefined}
+      aria-describedby={model.state['aria-describedby']}
+      {...handleCsProp(
+        elemProps,
+        selectionGroupListStencil({
+          width: model.state.width,
+          error: model.state.error,
+        })
+      )}
+    >
+      {useListRenderItems(model, children)}
+    </Element>
+  );
+});

package/selection-group/lib/hooks/useSelectionGroupItem.tsx

@@ -0,0 +1,46 @@
+import {
+  isSelected,
+  useListItemRegister,
+  useListItemRovingFocus,
+  useListItemSelect,
+} from '@workday/canvas-kit-react/collection';
+import {composeHooks, createElemPropsHook} from '@workday/canvas-kit-react/common';
+
+import {useSelectionGroupModel} from './useSelectionGroupModel';
+
+const useSelectionGroupItemProps = createElemPropsHook(useSelectionGroupModel)((
+  model,
+  _ref,
+  elemProps: {'data-id'?: string} = {}
+) => {
+  const name = elemProps['data-id'] || '';
+
+  return {
+    role: model.state.mode === 'single' ? 'radio' : 'checkbox',
+    'aria-checked': !!name && isSelected(name, model.state),
+    type: 'button',
+    // A single-select group is a radio group and uses a single roving tab stop. A multi-select
+    // group is a checkbox group, where every item is its own tab stop, so the roving tabindex
+    // applied by `useListItemRovingFocus` is overridden here.
+    ...(model.state.mode === 'multiple' ? {tabIndex: 0} : {}),
+  };
+});
+
+const useSelectionGroupItemDisabled = createElemPropsHook(useSelectionGroupModel)(({state}) => {
+  return {
+    // `useListItemRegister` resolves the item's own `disabled` prop and `nonInteractiveIds`, but
+    // it doesn't know about the group-level `disabled`. The key is only added when the group is
+    // disabled so that an `undefined` doesn't overwrite what `useListItemRegister` resolved. The
+    // native `disabled` attribute already conveys the state to assistive technology, so no
+    // `aria-disabled` is added alongside it.
+    ...(state.disabled ? {disabled: true} : {}),
+  };
+});
+
+export const useSelectionGroupItem = composeHooks(
+  useListItemSelect,
+  useListItemRovingFocus,
+  useSelectionGroupItemProps,
+  useListItemRegister,
+  useSelectionGroupItemDisabled
+);