@workday/canvas-kit-react/dist/es6/collection/lib/ListBox.js

The parent module that contains all Workday Canvas Kit React components

import React from 'react';
import { createContainer, createElemPropsHook, createSubcomponent, } from '@workday/canvas-kit-react/common';
import { mergeStyles } from '@workday/canvas-kit-react/layout';
import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
import { useListModel } from './useListModel';
import { useListRenderItems } from './useListRenderItem';
import { useListItemRegister } from './useListItemRegister';
export const ListBoxItem = createSubcomponent('li')({
    displayName: 'Item',
    modelHook: useListModel,
    elemPropsHook: useListItemRegister,
})((elemProps, Element) => {
    return React.createElement(Element, { ...mergeStyles(elemProps) });
});
export const useListBox = createElemPropsHook(useListModel)(model => {
    return {
        style: {
            position: 'relative',
            height: model.state.isVirtualized ? model.state.UNSTABLE_virtual.totalSize : undefined,
        },
    };
});
const listBoxContainerStencil = createStencil({
    base: { name: "d5h42o", styles: "box-sizing:border-box;& :where([data-part=\"list\"]){display:flex;flex-direction:column;margin-block-start:var(--cnvs-sys-space-zero);margin-block-end:var(--cnvs-sys-space-zero);}" },
    modifiers: {
        orientation: {
            vertical: { name: "d5h42p", styles: "overflow-y:auto;" },
            horizontal: { name: "d5h42q", styles: "overflow-y:undefined;& :where([data-part=\"list\"]){flex-direction:row;}" }
        }
    }
}, "list-box-container-625603");
/**
 * The `ListBox` component that offers vertical rendering of a collection in the form of a
 * 2-dimension list. It supports virtualization, rendering only visible items in the DOM while also
 * providing aria attributes to allow screen readers to still navigate virtual lists. The `ListBox`
 * contains a basic `ListBox.Item` that renders list items that render correctly with virtualization
 * and adds `aria-setsize` and `aria-posinset` for screen readers.

 * The `ListBox` is very basic and only adds enough functionality to render correctly. No additional
 * behaviors are added to navigate or select. React Hooks are provided to add this functionality and
 * are used by higher level components like `Menu` and `Menu.Item` which utilize `ListBox`. The
 * `ListBox` contains two `Box` elements:
 *
 * - Outer Box: Presentational container element responsible for overflow and height. `height` and
 *   `maxHeight` props will be applied here.
 * - Inner Box: The element responsible for the virtual container. Height is controlled by the model
 *   and cannot be changed by the developer. All props and ref will be spread to this element.
 */
export const ListBox = createContainer('ul')({
    displayName: 'ListBox',
    modelHook: useListModel,
    elemPropsHook: useListBox,
    subComponents: {
        /**
         * The `ListBox.Item` is a simple placeholder for listbox items. The functionality of a
         * collection item varies between components. For example, a `Tabs.Item` and a `Menu.Item` have
         * shared functionality, but have different behavior. All collection-based components should
         * implement a custom `Item` subcomponent using the collection-based behavior hooks. The [Roving
         * Tabindex](#roving-tabindex) example uses the `elemPropsHook` to provide additional
         * functionality. `elemPropsHook` is provided on all compound components and is useful in the
         * example to add additional functionality without making a new component.
         */
        Item: ListBoxItem,
    },
})(({ height, maxHeight, marginY, marginBottom, overflowY, marginTop, ...elemProps }, Element, model) => {
    // We're removing `marginY, marginBottom, overflowY, marginTo` from elemProps and applying them to the container as to not interfere with the virtualization size. We set
    // the `marginY` on the Flex to `0` to avoid inaccurate scrollbars
    return (React.createElement("div", { ref: model.state.containerRef, ...handleCsProp({
            style: {
                height,
                maxHeight,
                marginBottom: marginBottom !== null && marginBottom !== void 0 ? marginBottom : marginY,
                marginTop: marginTop !== null && marginTop !== void 0 ? marginTop : marginY,
            },
        }, listBoxContainerStencil({ orientation: model.state.orientation })) },
        React.createElement(Element, { ...mergeStyles(elemProps), "data-part": "list" }, useListRenderItems(model, elemProps.children))));
});