@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
33 lines (32 loc) • 1.79 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ComboboxMenuList = exports.useComboboxMenuList = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const common_1 = require("@workday/canvas-kit-react/common");
const menu_1 = require("@workday/canvas-kit-react/menu");
const collection_1 = require("@workday/canvas-kit-react/collection");
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
const useComboboxModel_1 = require("./hooks/useComboboxModel");
const canvas_kit_styling_1 = require("@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.
*/
exports.useComboboxMenuList = (0, common_1.createElemPropsHook)(menu_1.useMenuModel)(model => {
return {
role: 'listbox',
'aria-labelledby': model.state.id,
id: `${model.state.id}-list`,
};
});
const comboboxMenuListStencil = (0, canvas_kit_styling_1.createStencil)({
base: { name: "3zve4r", styles: "box-sizing:border-box;" },
extends: menu_1.menuListStencil
}, "combobox-menu-list-c3dbbc");
exports.ComboboxMenuList = (0, common_1.createSubcomponent)('ul')({
modelHook: useComboboxModel_1.useComboboxModel,
elemPropsHook: exports.useComboboxMenuList,
})(({ children, ...elemProps }, Element, model) => {
return ((0, jsx_runtime_1.jsx)(collection_1.ListBox, { as: Element, model: model, marginY: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.space.x2), ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, comboboxMenuListStencil({ orientation: model.state.orientation })), children: children }));
});