@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
36 lines (35 loc) • 1.93 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ComboboxMenuList = exports.useComboboxMenuList = void 0;
const react_1 = __importDefault(require("react"));
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: "ojxa4c", styles: "box-sizing:border-box;" },
extends: menu_1.menuListStencil
}, "combobox-menu-list-04543a");
exports.ComboboxMenuList = (0, common_1.createSubcomponent)('ul')({
modelHook: useComboboxModel_1.useComboboxModel,
elemPropsHook: exports.useComboboxMenuList,
})(({ children, ...elemProps }, Element, model) => {
return (react_1.default.createElement(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));
});