@workday/canvas-kit-react/dist/commonjs/select/lib/Select.js

The parent module that contains all Workday Canvas Kit React components

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Select = void 0;
const react_1 = __importDefault(require("react"));
const combobox_1 = require("@workday/canvas-kit-react/combobox");
const useSelectModel_1 = require("./hooks/useSelectModel");
const common_1 = require("@workday/canvas-kit-react/common");
const SelectInput_1 = require("./SelectInput");
const SelectCard_1 = require("./SelectCard");
const SelectItem_1 = require("./SelectItem");
/**
 * Use `Select` to allow users to choose an option from a list or type characters to select a matching option.
 *
 * **Note: `Select` must wrap `FormField` and `FormField` must wrap all `Select` children to ensure proper accessibility. **
 *
 * ```tsx
 * <Select items={options}>
 *  <FormField label="Your Label">
 *    <Select.Input onChange={e => handleChange(e)} id="contact-select" />
 *    <Select.Popper>
 *      <Select.Card>
 *        <Select.List>
 *          {item => <Select.Item>{item.id}</Select.Item>}
 *        </Select.List>
 *      </Select.Card>
 *      </Select.Popper>
 *    </FormField>
 * </Select>
 * ```
 */
exports.Select = (0, common_1.createContainer)()({
    displayName: 'Select',
    modelHook: useSelectModel_1.useSelectModel,
    subComponents: {
        /**
         * `Select.Input` renders a {@link ComboboxMenu Combobox.Input} that handles keyboard navigation and interaction defined by [WAI](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/).
         * This component can either be [controlled or uncontrolled](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
         *
         * ```tsx
         * <Select items={options}>
         *   <FormField label="Contact">
         *     <Select.Input onChange={(event) => handleChange(event)}>
         *     ...
         *   </FormField>
         * </Select>
         * ```
         */
        Input: SelectInput_1.SelectInput,
        /**
         * `Select.Popper` renders a {@link ComboboxPopper Combobox.Menu.Popper}. You have access to all `Popper` props.
         *
         * ```tsx
         * <Select items={options}>
         *  <FormField label="Your Label">
         *    <Select.Input onChange={(event) => handleChange(event)}>
         *    <Select.Popper>
         *    ...
         *    </Select.Popper>
         *  </FormField>
         * </Select>
         * ```
         */
        Popper: combobox_1.Combobox.Menu.Popper,
        /**
         * `Select.Card` renders a {@link ComboboxCard Combobox.Card}. You have access to all `Card` props.
         *
         * **Note: The card will be the width of its corresponding `Select.Input`**.
         *
         * ```tsx
         * <Select items={options}>
         *  <FormField label="Your Label">
         *    <Select.Input onChange={(event) => handleChange(event)}>
         *    <Select.Popper>
         *      <Select.Card>
         *        ...
         *      </Select.Card>
         *    </Select.Popper>
         *  </FormField>
         * </Select>
         * ```
         */
        Card: SelectCard_1.SelectCard,
        /**
         * `Select.List` renders a {@link ComboboxMenuList Combobox.Menu.List}. You have access to all `ListBox` props.
         *
         * ```tsx
         * <Select items={options}>
         *  <FormField label="Your Label">
         *    <Select.Input onChange={(event) => handleChange(event)}>
         *    <Select.Popper>
         *      <Select.Card>
         *        <Select.List>
         *          {(item) => <Select.Item>{item}</Select.Item>}
         *        </Select.List
         *      </Select.Card>
         *    </Select.Popper>
         *  </FormField>
         * </Select>
         * ```
         */
        List: combobox_1.Combobox.Menu.List,
        /**
         * `Select.Item` renders a {@link ComboboxMenuItem Combobox.Menu.Item} with aria role of `option`. You can optionally render a `Icon`.
         *
         * ```tsx
         * <Select items={options}>
         *  <FormField label="Your Label">
         *    <Select.Input onChange={(event) => handleChange(event)}>
         *      <Select.Popper>
         *        <Select.Card>
         *          <Select.List>
         *            {(item) => <Select.Item><Select.Item.Icon icon={icon} />{item}</Select.Item>}
         *          </Select.List
         *        </Select.Card>
         *      </Select.Popper>
         *  </FormField>
         * </Select>
         * ```
         */
        Item: SelectItem_1.SelectItem,
    },
})(({ children, ...elemProps }, _, model) => {
    return (react_1.default.createElement(combobox_1.Combobox, { model: model, ...elemProps }, children));
});