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

package/dist/es6/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/es6/multi-select/lib/MultiSelectInput.js

@@ -1,22 +1,23 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { system } from '@workday/canvas-tokens-web';
 import { caretDownSmallIcon, searchIcon } from '@workday/canvas-system-icons-web';
 import { composeHooks, createElemPropsHook, createSubcomponent, } from '@workday/canvas-kit-react/common';
 import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
 import { InputGroup, TextInput } from '@workday/canvas-kit-react/text-input';
 import { SystemIcon } from '@workday/canvas-kit-react/icon';
+import { getCursor } from '@workday/canvas-kit-react/collection';
 import { useComboboxInput, useComboboxInputConstrained } from '@workday/canvas-kit-react/combobox';
 import { useMultiSelectModel } from './useMultiSelectModel';
 import { MultiSelectedList } from './MultiSelectedList';
 export const multiSelectStencil = createStencil({
-    base: { name: "f06u26", 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");
+    base: { name: "ndjk4m", 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");
 export const useMultiSelectInput = composeHooks(createElemPropsHook(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 = 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
@@ -39,27 +40,11 @@ export const MultiSelectInput = createSubcomponent(TextInput)({
     modelHook: useMultiSelectModel,
     elemPropsHook: useMultiSelectInput,
 })(({ className, cs, style, 'aria-labelledby': ariaLabelledBy, removeLabel, formInputProps, ...elemProps }, Element, model) => {
-    return (React.createElement("div", { ...handleCsProp({ className, cs, style }, multiSelectStencil({})) },
-        React.createElement(InputGroup, null,
-            React.createElement(InputGroup.Input, { "data-part": "form-input", ...formInputProps }),
-            React.createElement(InputGroup.Input, { "data-part": "user-input", as: Element, "aria-labelledby": ariaLabelledBy, readOnly: true, ...elemProps }),
-            React.createElement(InputGroup.InnerEnd, { pointerEvents: "none" },
-                React.createElement(SystemIcon, { icon: caretDownSmallIcon }))),
-        React.createElement(MultiSelectedList, { removeLabel: removeLabel })));
+    return (_jsxs("div", { ...handleCsProp({ className, cs, style }, multiSelectStencil({})), children: [_jsxs(InputGroup, { children: [_jsx(InputGroup.Input, { "data-part": "form-input", ...formInputProps }), _jsx(InputGroup.Input, { "data-part": "user-input", as: Element, "aria-labelledby": ariaLabelledBy, readOnly: true, ...elemProps }), _jsx(InputGroup.InnerEnd, { pointerEvents: "none", children: _jsx(SystemIcon, { icon: caretDownSmallIcon }) })] }), _jsx(MultiSelectedList, { removeLabel: removeLabel })] }));
 });
 export const MultiSelectSearchInput = createSubcomponent(TextInput)({
     modelHook: useMultiSelectModel,
     elemPropsHook: useMultiSelectInput,
 })(({ className, cs, style, 'aria-labelledby': ariaLabelledBy, removeLabel, formInputProps, ref, ...elemProps }, Element, model) => {
-    return (React.createElement("div", { ...handleCsProp({ className, cs, style }, multiSelectStencil({})) },
-        React.createElement(InputGroup, null,
-            React.createElement(InputGroup.InnerStart, { pointerEvents: "none", width: system.space.x8 },
-                React.createElement(SystemIcon, { icon: searchIcon, size: system.space.x4 })),
-            React.createElement(InputGroup.Input, { "data-part": "form-input", placeholder: null, ...formInputProps }),
-            React.createElement(InputGroup.Input, { "data-part": "user-input", as: Element, "aria-labelledby": ariaLabelledBy, ...elemProps }),
-            React.createElement(InputGroup.InnerEnd, { width: system.space.x4 },
-                React.createElement(InputGroup.ClearButton, null)),
-            React.createElement(InputGroup.InnerEnd, { pointerEvents: "none" },
-                React.createElement(SystemIcon, { icon: caretDownSmallIcon }))),
-        React.createElement(MultiSelectedList, { removeLabel: removeLabel })));
+    return (_jsxs("div", { ...handleCsProp({ className, cs, style }, multiSelectStencil({})), children: [_jsxs(InputGroup, { children: [_jsx(InputGroup.InnerStart, { pointerEvents: "none", width: system.space.x8, children: _jsx(SystemIcon, { icon: searchIcon, size: system.space.x4 }) }), _jsx(InputGroup.Input, { "data-part": "form-input", placeholder: null, ...formInputProps }), _jsx(InputGroup.Input, { "data-part": "user-input", as: Element, "aria-labelledby": ariaLabelledBy, ...elemProps }), _jsx(InputGroup.InnerEnd, { width: system.space.x4, children: _jsx(InputGroup.ClearButton, {}) }), _jsx(InputGroup.InnerEnd, { pointerEvents: "none", children: _jsx(SystemIcon, { icon: caretDownSmallIcon }) })] }), _jsx(MultiSelectedList, { removeLabel: removeLabel })] }));
 });