@workday/canvas-kit-preview-react
Version:
Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.
72 lines (71 loc) • 6.88 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.MultiSelectSearchInput = exports.MultiSelectInput = exports.useMultiSelectInput = exports.multiSelectStencil = void 0;
const react_1 = __importDefault(require("react"));
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
const common_1 = require("@workday/canvas-kit-react/common");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const text_input_1 = require("@workday/canvas-kit-react/text-input");
const icon_1 = require("@workday/canvas-kit-react/icon");
const combobox_1 = require("@workday/canvas-kit-react/combobox");
const useMultiSelectModel_1 = require("./useMultiSelectModel");
const MultiSelectedList_1 = require("./MultiSelectedList");
exports.multiSelectStencil = (0, canvas_kit_styling_1.createStencil)({
base: { name: "nzjw26", styles: "box-sizing:border-box;border:1px solid var(--cnvs-sys-color-border-input-default);display:flex;flex-direction:column;background-color:var(--cnvs-sys-color-bg-default);border-radius:var(--cnvs-sys-shape-x1);min-height:var(--cnvs-sys-space-x10);transition:0.2s box-shadow, 0.2s border-color;margin:0;&:hover, &.hover{border-color:var(--cnvs-sys-color-border-input-strong);}&:focus-within{border-color:var(--cnvs-sys-color-border-primary-default);box-shadow:inset 0 0 0 1px var(--cnvs-sys-color-border-primary-default);}& [data-part=\"user-input\"]{font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);background-color:var(--cnvs-sys-color-bg-transparent);border-radius:var(--cnvs-sys-shape-x1);border:none !important;box-shadow:none !important;outline-width:0px;&:where(:not([aria-autocomplete])){caret-color:transparent;cursor:default;&::selection{background-color:transparent;}}}& :where([data-part=\"form-input\"]){position:absolute;top:var(--cnvs-sys-space-zero);bottom:var(--cnvs-sys-space-zero);left:var(--cnvs-sys-space-zero);right:var(--cnvs-sys-space-zero);opacity:var(--cnvs-sys-opacity-zero);cursor:default;pointer-events:none;}& :where([data-part=\"separator\"]){background-color:var(--cnvs-sys-color-border-divider);height:1px;margin:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x2);}& :where([data-part=\"list\"]){display:flex;gap:var(--cnvs-sys-space-x2);padding:var(--cnvs-sys-space-x2);flex-wrap:wrap;}" }
}, "multi-select-5f5351");
exports.useMultiSelectInput = (0, common_1.composeHooks)((0, common_1.createElemPropsHook)(useMultiSelectModel_1.useMultiSelectModel)((model, ref) => {
return {
onKeyDown(event) {
// Space bar key is hit and menu is open
if (event.key === ' ' && model.state.visibility === 'visible') {
const id = model.state.cursorId;
// There are 2 modes. Search mode and navigation mode. Searching clears the cursor. Using
// the down arrow enables the cursor and thus navigation mode.
// - Navigation mode: toggle cursor item
// - Search mode: enter a space in the search
if (id) {
model.events.select({ id });
event.preventDefault();
}
}
if ((event.key === 'ArrowDown' || event.key === 'ArrowUp') &&
model.state.visibility === 'hidden') {
// prevent navigating vertically on the input
model.events.show(event);
event.preventDefault();
}
},
};
}), combobox_1.useComboboxInputConstrained, combobox_1.useComboboxInput);
exports.MultiSelectInput = (0, common_1.createSubcomponent)(text_input_1.TextInput)({
modelHook: useMultiSelectModel_1.useMultiSelectModel,
elemPropsHook: exports.useMultiSelectInput,
})(({ className, cs, style, 'aria-labelledby': ariaLabelledBy, removeLabel, formInputProps, ...elemProps }, Element, model) => {
return (react_1.default.createElement("div", { ...(0, canvas_kit_styling_1.handleCsProp)({ className, cs, style }, (0, exports.multiSelectStencil)({})) },
react_1.default.createElement(text_input_1.InputGroup, null,
react_1.default.createElement(text_input_1.InputGroup.Input, { "data-part": "form-input", ...formInputProps }),
react_1.default.createElement(text_input_1.InputGroup.Input, { "data-part": "user-input", as: Element, "aria-labelledby": ariaLabelledBy, readOnly: true, ...elemProps }),
react_1.default.createElement(text_input_1.InputGroup.InnerEnd, { pointerEvents: "none" },
react_1.default.createElement(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.caretDownSmallIcon }))),
react_1.default.createElement(MultiSelectedList_1.MultiSelectedList, { removeLabel: removeLabel })));
});
exports.MultiSelectSearchInput = (0, common_1.createSubcomponent)(text_input_1.TextInput)({
modelHook: useMultiSelectModel_1.useMultiSelectModel,
elemPropsHook: exports.useMultiSelectInput,
})(({ className, cs, style, 'aria-labelledby': ariaLabelledBy, removeLabel, formInputProps, ref, ...elemProps }, Element, model) => {
return (react_1.default.createElement("div", { ...(0, canvas_kit_styling_1.handleCsProp)({ className, cs, style }, (0, exports.multiSelectStencil)({})) },
react_1.default.createElement(text_input_1.InputGroup, null,
react_1.default.createElement(text_input_1.InputGroup.InnerStart, { pointerEvents: "none", width: canvas_tokens_web_1.system.space.x8 },
react_1.default.createElement(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.searchIcon, size: canvas_tokens_web_1.system.space.x4 })),
react_1.default.createElement(text_input_1.InputGroup.Input, { "data-part": "form-input", placeholder: null, ...formInputProps }),
react_1.default.createElement(text_input_1.InputGroup.Input, { "data-part": "user-input", as: Element, "aria-labelledby": ariaLabelledBy, ...elemProps }),
react_1.default.createElement(text_input_1.InputGroup.InnerEnd, { width: canvas_tokens_web_1.system.space.x4 },
react_1.default.createElement(text_input_1.InputGroup.ClearButton, null)),
react_1.default.createElement(text_input_1.InputGroup.InnerEnd, { pointerEvents: "none" },
react_1.default.createElement(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.caretDownSmallIcon }))),
react_1.default.createElement(MultiSelectedList_1.MultiSelectedList, { removeLabel: removeLabel })));
});