@workday/canvas-kit-preview-react 13.0.0-alpha.996-next.0 → 13.0.0

package/dist/commonjs/multi-select/lib/MultiSelectInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectInput.d.ts","sourceRoot":"","sources":["../../../../multi-select/lib/MultiSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,EAAgB,OAAO,EAAe,MAAM,6BAA6B,CAAC;AAMjF,OAAO,EAAC,sBAAsB,EAAC,MAAM,qBAAqB,CAAC;AAG3D,eAAO,MAAM,kBAAkB,yIAiE7B,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAGT,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sMA2BzC,CAAC;AAEF,MAAM,WAAW,qBACf,SAAQ,OAAO,EACb,IAAI,CACF,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,UAAU,GAAG,WAAW,GAAG,OAAO,GAAG,iBAAiB,CACvD,EACD,IAAI,CAAC,sBAAsB,EAAE,aAAa,CAAC;CAAG;AAElD,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoC5B,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8ClC,CAAC"}
+{"version":3,"file":"MultiSelectInput.d.ts","sourceRoot":"","sources":["../../../../multi-select/lib/MultiSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,EAAgB,OAAO,EAAe,MAAM,6BAA6B,CAAC;AAOjF,OAAO,EAAC,sBAAsB,EAAC,MAAM,qBAAqB,CAAC;AAG3D,eAAO,MAAM,kBAAkB,iJAiE7B,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAGT,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sMA2BzC,CAAC;AAEF,MAAM,WAAW,qBACf,SAAQ,OAAO,EACb,IAAI,CACF,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,UAAU,GAAG,WAAW,GAAG,OAAO,GAAG,iBAAiB,CACvD,EACD,IAAI,CAAC,sBAAsB,EAAE,aAAa,CAAC;CAAG;AAElD,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoC5B,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8ClC,CAAC"}

package/dist/commonjs/multi-select/lib/MultiSelectInput.js

@@ -1,28 +1,26 @@
 "use strict";
-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 jsx_runtime_1 = require("react/jsx-runtime");
 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 collection_1 = require("@workday/canvas-kit-react/collection");
 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: "y3fh26", 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-base-font-family-50);font-weight:var(--cnvs-base-font-weight-400);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);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");
+    base: { name: "htmr4m", 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-b789ee");
 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;
+                const id = (0, collection_1.getCursor)(model.state);
                 // 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
@@ -45,27 +43,11 @@ exports.MultiSelectInput = (0, common_1.createSubcomponent)(text_input_1.TextInp
     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 })));
+    return ((0, jsx_runtime_1.jsxs)("div", { ...(0, canvas_kit_styling_1.handleCsProp)({ className, cs, style }, (0, exports.multiSelectStencil)({})), children: [(0, jsx_runtime_1.jsxs)(text_input_1.InputGroup, { children: [(0, jsx_runtime_1.jsx)(text_input_1.InputGroup.Input, { "data-part": "form-input", ...formInputProps }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.Input, { "data-part": "user-input", as: Element, "aria-labelledby": ariaLabelledBy, readOnly: true, ...elemProps }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.InnerEnd, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.caretDownSmallIcon }) })] }), (0, jsx_runtime_1.jsx)(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 })));
+    return ((0, jsx_runtime_1.jsxs)("div", { ...(0, canvas_kit_styling_1.handleCsProp)({ className, cs, style }, (0, exports.multiSelectStencil)({})), children: [(0, jsx_runtime_1.jsxs)(text_input_1.InputGroup, { children: [(0, jsx_runtime_1.jsx)(text_input_1.InputGroup.InnerStart, { pointerEvents: "none", width: canvas_tokens_web_1.system.space.x8, children: (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.searchIcon, size: canvas_tokens_web_1.system.space.x4 }) }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.Input, { "data-part": "form-input", placeholder: null, ...formInputProps }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.Input, { "data-part": "user-input", as: Element, "aria-labelledby": ariaLabelledBy, ...elemProps }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.InnerEnd, { width: canvas_tokens_web_1.system.space.x4, children: (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.ClearButton, {}) }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.InnerEnd, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.caretDownSmallIcon }) })] }), (0, jsx_runtime_1.jsx)(MultiSelectedList_1.MultiSelectedList, { removeLabel: removeLabel })] }));
 });