@workday/canvas-kit-react/dist/es6/segmented-control/lib/SegmentedControl.js

The parent module that contains all Workday Canvas Kit React components

import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
import { createContainer } from '@workday/canvas-kit-react/common';
import { SegmentedControlItem } from './SegmentedControlItem';
import { SegmentedControlList } from './SegmentedControlList';
import { useSegmentedControlModel } from './hooks/useSegmentedControlModel';
/**
 * `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,
    },
})(({ children }) => {
    return _jsx(_Fragment, { children: children });
});