@workday/canvas-kit-labs-react/dist/commonjs/combobox/lib/AutocompleteList.js

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/functi

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.AutocompleteList = void 0;
const react_1 = __importStar(require("react"));
const styled_1 = __importDefault(require("@emotion/styled"));
const tokens_1 = require("@workday/canvas-kit-react/tokens");
const common_1 = require("@workday/canvas-kit-react/common");
const Combobox_1 = require("./Combobox");
const Autocomplete = (0, styled_1.default)('ul')({
    margin: 0,
    maxHeight: 200,
    boxSizing: 'border-box',
    overflowY: 'auto',
    padding: `${tokens_1.space.xxs} 0`,
});
const AccessibleHide = (0, styled_1.default)('span')(common_1.accessibleHide);
const AutocompleteList = ({ autocompleteItems, comboboxId, selectedIndex, handleAutocompleteClick, labelId, showGroupText, }) => {
    const [randomComponentId] = (0, react_1.useState)(common_1.generateUniqueId); // https://codesandbox.io/s/p2ndq
    const componentId = comboboxId || randomComponentId;
    const listBoxProps = {
        role: 'listbox',
        id: `${componentId}-${Combobox_1.listBoxIdPart}`,
        'aria-labelledby': labelId,
    };
    const createListItem = (listboxItem, itemIndex, groupMessage) => {
        const children = [
            react_1.default.createElement(AccessibleHide, { key: `group-message-${itemIndex}` }, groupMessage),
            ...react_1.default.Children.toArray(listboxItem.props.children),
        ];
        return (react_1.default.createElement(react_1.Fragment, { key: itemIndex }, react_1.default.cloneElement(listboxItem, {
            children: children,
            id: (0, Combobox_1.getOptionId)(componentId, itemIndex),
            role: 'option',
            isFocused: selectedIndex === itemIndex,
            'aria-selected': selectedIndex === itemIndex ? true : undefined,
            onMouseDown: (event) => {
                // prevent focus from shifting away from the the combobox
                event.preventDefault();
            },
            onClick: (event) => {
                event.preventDefault();
                handleAutocompleteClick(event, listboxItem.props);
            },
        })));
    };
    if (!autocompleteItems.length) {
        return null;
    }
    else if (autocompleteItems[0].hasOwnProperty('header')) {
        let itemIndex = 0;
        return (react_1.default.createElement(Autocomplete, { ...listBoxProps }, autocompleteItems.map(({ header, items }, groupIndex) => {
            const groupLabel = `itemGroup-${componentId}-${groupIndex}`;
            return (react_1.default.createElement(react_1.Fragment, { key: groupLabel },
                react_1.default.cloneElement(header, {
                    role: 'presentation',
                    style: { pointerEvents: `none` },
                }),
                items.map((listboxItem) => {
                    const headerName = (0, Combobox_1.getTextFromElement)(header);
                    const groupMessage = showGroupText
                        ? `Entering group ${headerName}, with ${items.length} options.`
                        : undefined;
                    const item = createListItem(listboxItem, itemIndex, groupMessage);
                    itemIndex++;
                    return item;
                })));
        })));
    }
    else {
        return (react_1.default.createElement(Autocomplete, { ...listBoxProps }, autocompleteItems.map((listboxItem, index) => createListItem(listboxItem, index))));
    }
};
exports.AutocompleteList = AutocompleteList;