UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

30 lines (29 loc) 1.49 kB
import React from 'react'; import { createElemPropsHook, createSubcomponent } from '@workday/canvas-kit-react/common'; import { useMenuModel, menuListStencil } from '@workday/canvas-kit-react/menu'; import { ListBox } from '@workday/canvas-kit-react/collection'; import { system } from '@workday/canvas-tokens-web'; import { useComboboxModel } from './hooks/useComboboxModel'; import { createStencil, cssVar, handleCsProp } from '@workday/canvas-kit-styling'; /** * The `listbox` uses `aria-labelledby` pointing to the {@link ComboboxInput Combobox.Input}. This * input should be labelled by a form field label for proper accessibility. Use {@link FormField} to * ensure proper accessibility. */ export const useComboboxMenuList = createElemPropsHook(useMenuModel)(model => { return { role: 'listbox', 'aria-labelledby': model.state.id, id: `${model.state.id}-list`, }; }); const comboboxMenuListStencil = createStencil({ base: { name: "d5h44c", styles: "box-sizing:border-box;" }, extends: menuListStencil }, "combobox-menu-list-04543a"); export const ComboboxMenuList = createSubcomponent('ul')({ modelHook: useComboboxModel, elemPropsHook: useComboboxMenuList, })(({ children, ...elemProps }, Element, model) => { return (React.createElement(ListBox, { as: Element, model: model, marginY: cssVar(system.space.x2), ...handleCsProp(elemProps, comboboxMenuListStencil({ orientation: model.state.orientation })) }, children)); });