@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
30 lines (29 loc) • 1.49 kB
JavaScript
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));
});