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

The parent module that contains all Workday Canvas Kit React components

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SegmentedControl = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const common_1 = require("@workday/canvas-kit-react/common");
const SegmentedControlItem_1 = require("./SegmentedControlItem");
const SegmentedControlList_1 = require("./SegmentedControlList");
const useSegmentedControlModel_1 = require("./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>
 * ```
 */
exports.SegmentedControl = (0, common_1.createContainer)()({
    displayName: 'SegmentedControl',
    modelHook: useSegmentedControlModel_1.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_1.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_1.SegmentedControlItem,
    },
})(({ children }) => {
    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
});