@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
85 lines (83 loc) • 5.08 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ListBox = exports.useListBox = exports.ListBoxItem = void 0;
const react_1 = __importDefault(require("react"));
const common_1 = require("@workday/canvas-kit-react/common");
const layout_1 = require("@workday/canvas-kit-react/layout");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
const useListModel_1 = require("./useListModel");
const useListRenderItem_1 = require("./useListRenderItem");
const useListItemRegister_1 = require("./useListItemRegister");
exports.ListBoxItem = (0, common_1.createSubcomponent)('li')({
displayName: 'Item',
modelHook: useListModel_1.useListModel,
elemPropsHook: useListItemRegister_1.useListItemRegister,
})((elemProps, Element) => {
return react_1.default.createElement(Element, { ...(0, layout_1.mergeStyles)(elemProps) });
});
exports.useListBox = (0, common_1.createElemPropsHook)(useListModel_1.useListModel)(model => {
return {
style: {
position: 'relative',
height: model.state.isVirtualized ? model.state.UNSTABLE_virtual.totalSize : undefined,
},
};
});
const listBoxContainerStencil = (0, canvas_kit_styling_1.createStencil)({
base: { name: "ojxa2o", 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: "ojxa2p", styles: "overflow-y:auto;" },
horizontal: { name: "ojxa2q", 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.
*/
exports.ListBox = (0, common_1.createContainer)('ul')({
displayName: 'ListBox',
modelHook: useListModel_1.useListModel,
elemPropsHook: exports.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: exports.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_1.default.createElement("div", { ref: model.state.containerRef, ...(0, canvas_kit_styling_1.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_1.default.createElement(Element, { ...(0, layout_1.mergeStyles)(elemProps), "data-part": "list" }, (0, useListRenderItem_1.useListRenderItems)(model, elemProps.children))));
});