@workday/canvas-kit-react 8.0.0-alpha.253-next.22 → 8.0.0-alpha.428-next.2

package/dist/commonjs/collection/lib/useSelectionListModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSelectionListModel.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useSelectionListModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,oBAAY,WAAW,GAAG,KAAK,GAAG,MAAM,EAAE,CAAC;AAE3C,oBAAY,SAAS,GAAG;IACtB,WAAW,EAAE,WAAW,CAAC;IACzB,aAAa,EAAE,MAAM,EAAE,CAAC;CACzB,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,GAAG,SAAS,CAAC;CACrD;AAED,eAAO,MAAM,UAAU,OAAQ,MAAM,kCAAgC,SAAS,YAK7E,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,gBAIpC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,gBAmBnC,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;YAoBZ,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAAN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QADxB,gDAAgD;qBACnC;YAAC,EAAE,EAAE,MAAM,CAAA;SAAC;QAKzB;;;WAGG;;QAIH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAfH,gDAAgD;iBACnC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAC;IAKzB;;;OAGG;;IAIH;;OAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAfH,gDAAgD;qBACnC;YAAC,EAAE,EAAE,MAAM,CAAA;SAAC;QAKzB;;;WAGG;;QAIH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAOL,CAAC"}
+{"version":3,"file":"useSelectionListModel.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useSelectionListModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,oBAAY,WAAW,GAAG,KAAK,GAAG,MAAM,EAAE,CAAC;AAE3C,oBAAY,SAAS,GAAG;IACtB,WAAW,EAAE,WAAW,CAAC;IACzB,aAAa,EAAE,MAAM,EAAE,CAAC;CACzB,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,GAAG,SAAS,CAAC;CACrD;AAED,eAAO,MAAM,UAAU,OAAQ,MAAM,kCAAgC,SAAS,YAK7E,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,gBAIpC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,gBAmBnC,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;YAqBZ,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAAN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QADxB,gDAAgD;qBACnC;YAAC,EAAE,EAAE,MAAM,CAAA;SAAC;QAKzB;;;WAGG;;QAIH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAfH,gDAAgD;iBACnC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAC;IAKzB;;;OAGG;;IAIH;;OAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAfH,gDAAgD;qBACnC;YAAC,EAAE,EAAE,MAAM,CAAA;SAAC;QAKzB;;;WAGG;;QAIH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAOL,CAAC"}

package/dist/commonjs/collection/lib/useSelectionListModel.js

@@ -1,25 +1,13 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSelectionListModel = exports.multiSelectionManager = exports.singleSelectionManager = exports.isSelected = void 0;
-var react_1 = __importDefault(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var useCursorListModel_1 = require("./useCursorListModel");
-var isSelected = function (id, _a) {
-    var selectedIds = _a.selectedIds, unselectedIds = _a.unselectedIds;
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const useCursorListModel_1 = require("./useCursorListModel");
+const isSelected = (id, { selectedIds, unselectedIds }) => {
     if (selectedIds === 'all') {
         return !unselectedIds.includes(id);
     }
@@ -27,45 +15,51 @@ var isSelected = function (id, _a) {
 };
 exports.isSelected = isSelected;
 exports.singleSelectionManager = {
-    select: function (id) {
+    select(id) {
         return { selectedIds: [id], unselectedIds: [] };
     },
 };
 exports.multiSelectionManager = {
-    select: function (id, _a) {
-        var selectedIds = _a.selectedIds, unselectedIds = _a.unselectedIds;
+    select(id, { selectedIds, unselectedIds }) {
         if (selectedIds === 'all') {
             // If we have all selected, start adding/removing from `unselectedIds`
-            var existingKey = unselectedIds.includes(id);
+            const existingKey = unselectedIds.includes(id);
             return {
                 selectedIds: 'all',
                 unselectedIds: existingKey
-                    ? unselectedIds.filter(function (key) { return key !== id; })
+                    ? unselectedIds.filter(key => key !== id)
                     : unselectedIds.concat(id),
             };
         }
         else {
-            var existingKey = selectedIds.includes(id);
+            const existingKey = selectedIds.includes(id);
             return {
-                selectedIds: existingKey ? selectedIds.filter(function (key) { return key !== id; }) : selectedIds.concat(id),
+                selectedIds: existingKey ? selectedIds.filter(key => key !== id) : selectedIds.concat(id),
                 unselectedIds: [],
             };
         }
     },
 };
 exports.useSelectionListModel = common_1.createModelHook({
-    defaultConfig: __assign(__assign({}, useCursorListModel_1.useCursorListModel.defaultConfig), { initialSelectedIds: [], initialUnselectedIds: [], selection: exports.singleSelectionManager }),
+    defaultConfig: {
+        ...useCursorListModel_1.useCursorListModel.defaultConfig,
+        initialSelectedIds: [],
+        initialUnselectedIds: [],
+        selection: exports.singleSelectionManager,
+    },
     requiredConfig: useCursorListModel_1.useCursorListModel.requiredConfig,
-})(function (config) {
-    var cursor = useCursorListModel_1.useCursorListModel(config);
-    var _a = react_1.default.useState(config.initialSelectedIds), selectedIds = _a[0], setSelectedIds = _a[1];
-    var _b = react_1.default.useState(config.initialUnselectedIds), unselectedIds = _b[0], setUnselectedIds = _b[1];
-    var selection = config.selection;
-    var state = __assign(__assign({}, cursor.state), { selectedIds: selectedIds, unselectedIds: unselectedIds });
-    var events = __assign(__assign({}, cursor.events), { 
+    contextOverride: useCursorListModel_1.useCursorListModel.Context,
+})(config => {
+    const cursor = useCursorListModel_1.useCursorListModel(config);
+    const [selectedIds, setSelectedIds] = react_1.default.useState(config.initialSelectedIds);
+    const [unselectedIds, setUnselectedIds] = react_1.default.useState(config.initialUnselectedIds);
+    const selection = config.selection;
+    const state = { ...cursor.state, selectedIds, unselectedIds };
+    const events = {
+        ...cursor.events,
         /** Select a specific item by its identifier. */
-        select: function (data) {
-            var _a = selection.select(data.id, state), selectedIds = _a.selectedIds, unselectedIds = _a.unselectedIds;
+        select(data) {
+            const { selectedIds, unselectedIds } = selection.select(data.id, state);
             setSelectedIds(selectedIds);
             setUnselectedIds(unselectedIds);
         },
@@ -73,14 +67,15 @@ exports.useSelectionListModel = common_1.createModelHook({
          * Select all items. This will set `selectedIds` to `'all'` and remove all `unselectedIds`.
          * This is especially useful for virtual lists where not all items are loaded in memory.
          */
-        selectAll: function () {
+        selectAll() {
             setSelectedIds('all');
         },
         /**
          * Unselect all items.
          */
-        unselectAll: function () {
+        unselectAll() {
             setSelectedIds([]);
-        } });
-    return __assign(__assign({}, cursor), { state: state, events: events, selection: selection });
+        },
+    };
+    return { ...cursor, state, events, selection };
 });

package/dist/commonjs/color-picker/lib/ColorInput.d.ts

@@ -35,5 +35,5 @@ export interface ColorInputProps extends Themeable, TextInputProps, GrowthBehavi
      */
     onValidColorChange?: (color: string) => void;
 }
-export declare const ColorInput: import("../../common").ElementComponent<"input", ColorInputProps>;
+export declare const ColorInput: import("@workday/canvas-kit-react/common").ElementComponent<"input", ColorInputProps>;
 //# sourceMappingURL=ColorInput.d.ts.map

package/dist/commonjs/color-picker/lib/ColorInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorInput.d.ts","sourceRoot":"","sources":["../../../../color-picker/lib/ColorInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAIL,cAAc,EACd,SAAS,EAET,SAAS,EAEV,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAY,cAAc,EAAC,MAAM,sCAAsC,CAAC;AAG/E,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,cAAc,EAAE,cAAc;IAChF;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAChE;;OAEG;IACH,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AA8ED,eAAO,MAAM,UAAU,mEA0DrB,CAAC"}
+{"version":3,"file":"ColorInput.d.ts","sourceRoot":"","sources":["../../../../color-picker/lib/ColorInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAIL,cAAc,EACd,SAAS,EAET,SAAS,EAEV,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAY,cAAc,EAAC,MAAM,sCAAsC,CAAC;AAG/E,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,cAAc,EAAE,cAAc;IAChF;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAChE;;OAEG;IACH,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AA8ED,eAAO,MAAM,UAAU,uFA0DrB,CAAC"}

package/dist/commonjs/color-picker/lib/ColorInput.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -29,26 +18,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColorInput = void 0;
-var React = __importStar(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var text_input_1 = require("@workday/canvas-kit-react/text-input");
-var ColorSwatch_1 = require("./parts/ColorSwatch");
-var colorInputWidth = 116;
-var CustomHexInput = common_1.styled(text_input_1.TextInput)({
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const text_input_1 = require("@workday/canvas-kit-react/text-input");
+const ColorSwatch_1 = require("./parts/ColorSwatch");
+const colorInputWidth = 116;
+const CustomHexInput = common_1.styled(text_input_1.TextInput)({
     boxSizing: 'border-box',
     minWidth: colorInputWidth,
     width: colorInputWidth,
@@ -56,74 +34,66 @@ var CustomHexInput = common_1.styled(text_input_1.TextInput)({
     '&:focus::placeholder': {
         color: 'transparent',
     },
-}, function (_a) {
-    var grow = _a.grow;
-    return grow && {
-        minWidth: '100%',
-        width: '100%',
-    };
-}, function (_a) {
-    var disabled = _a.disabled;
-    return ({
-        backgroundColor: disabled ? tokens_1.colors.soap200 : '',
-    });
-}, function (_a) {
-    var theme = _a.theme;
-    return ({
-        paddingLeft: theme.canvas.direction === common_1.ContentDirection.LTR ? '46px' : 'calc(100% - 86px) /* @noflip */',
-    });
-});
-var ColorInputContainer = common_1.styled('div')({
+}, ({ grow }) => grow && {
+    minWidth: '100%',
+    width: '100%',
+}, ({ disabled }) => ({
+    backgroundColor: disabled ? tokens_1.colors.soap200 : '',
+}), ({ theme }) => ({
+    paddingLeft: theme.canvas.direction === common_1.ContentDirection.LTR ? '46px' : 'calc(100% - 86px) /* @noflip */',
+    // We're using @noflip because ColorInput should stay LTR, therefore, we need to adjust the padding using ContentDirection, not using rtl-css-js.
+}));
+const ColorInputContainer = common_1.styled('div')({
     position: 'relative',
     width: colorInputWidth,
-}, function (_a) {
-    var grow = _a.grow;
-    return grow && {
-        minWidth: '100%',
-        width: '100%',
-    };
+}, ({ grow }) => grow && {
+    minWidth: '100%',
+    width: '100%',
 });
-var PoundSignPrefix = common_1.styled('span')(__assign(__assign({ position: 'absolute', top: 10 }, tokens_1.type.levels.subtext.large), { fontFamily: tokens_1.type.properties.fontFamilies.monospace }), function (_a) {
-    var disabled = _a.disabled;
-    return ({
-        color: disabled ? tokens_1.inputColors.disabled.text : undefined,
-    });
-}, function (_a) {
-    var theme = _a.theme;
-    return ({
-        left: theme.canvas.direction === common_1.ContentDirection.LTR ? '36px' : '88px',
-    });
-});
-var SwatchTile = common_1.styled(ColorSwatch_1.ColorSwatch)({
+const PoundSignPrefix = common_1.styled('span')({
+    position: 'absolute',
+    top: 10,
+    ...tokens_1.type.levels.subtext.large,
+    fontFamily: tokens_1.type.properties.fontFamilies.monospace,
+}, ({ disabled }) => ({
+    color: disabled ? tokens_1.inputColors.disabled.text : undefined,
+}), ({ theme }) => ({
+    left: theme.canvas.direction === common_1.ContentDirection.LTR ? '36px' : '88px',
+    //    - LTR -> left: 36px;
+    //    - RTL -> right: 88px;
+    //
+    // It's because we're changing the value of this attribute based on ContentDirection but the attribute itself is getting flipped by rtl-css-js.
+    // We're doing this to adjust the spacing of the # sign as it should always stay on the left of the input in both LTR and RTL.
+}));
+const SwatchTile = common_1.styled(ColorSwatch_1.ColorSwatch)({
     position: 'absolute',
     top: '10px',
     left: tokens_1.space.xxs,
     boxShadow: 'inset 0 0 0 1px rgba(0,0,0,0.25)',
     pointerEvents: 'none',
 });
-var isValidHex = function (value) {
+const isValidHex = (value) => {
     return /(^#?[0-9A-F]{3}$)|(^#?[0-9A-F]{6}$)/i.test(value);
 };
-var formatValue = function (value) {
+const formatValue = (value) => {
     return value.replace(/#/g, '').substring(0, 6);
 };
 exports.ColorInput = common_1.createComponent('input')({
     displayName: 'ColorInput',
-    Component: function (_a, ref, Element) {
-        var _b = _a.placeholder, placeholder = _b === void 0 ? 'FFFFFF' : _b, _c = _a.value, value = _c === void 0 ? '' : _c, showCheck = _a.showCheck, onChange = _a.onChange, onValidColorChange = _a.onValidColorChange, disabled = _a.disabled, error = _a.error, grow = _a.grow, elemProps = __rest(_a, ["placeholder", "value", "showCheck", "onChange", "onValidColorChange", "disabled", "error", "grow"]);
-        var formattedValue = formatValue(value);
-        var handleChange = function (e) {
-            var value = formatValue(e.currentTarget.value);
+    Component: ({ placeholder = 'FFFFFF', value = '', showCheck, onChange, onValidColorChange, disabled, error, grow, ...elemProps }, ref, Element) => {
+        const formattedValue = formatValue(value);
+        const handleChange = (e) => {
+            const value = formatValue(e.currentTarget.value);
             if (onChange) {
                 onChange(e);
             }
             if (isValidHex(value) && onValidColorChange) {
-                onValidColorChange("#" + common_1.expandHex(value));
+                onValidColorChange(`#${common_1.expandHex(value)}`);
             }
         };
         return (React.createElement(ColorInputContainer, { grow: grow },
-            React.createElement(CustomHexInput, __assign({ dir: "ltr", ref: ref, as: Element, onChange: handleChange, type: "text", placeholder: value ? undefined : placeholder, value: formattedValue, error: error, spellCheck: false, disabled: disabled, grow: grow, maxLength: 7 }, elemProps)),
-            React.createElement(SwatchTile, { showCheck: showCheck, color: isValidHex(formattedValue) ? "#" + formattedValue : '' }),
+            React.createElement(CustomHexInput, Object.assign({ dir: "ltr", ref: ref, as: Element, onChange: handleChange, type: "text", placeholder: value ? undefined : placeholder, value: formattedValue, error: error, spellCheck: false, disabled: disabled, grow: grow, maxLength: 7 }, elemProps)),
+            React.createElement(SwatchTile, { showCheck: showCheck, color: isValidHex(formattedValue) ? `#${formattedValue}` : '' }),
             React.createElement(PoundSignPrefix, { "aria-hidden": true, disabled: disabled }, "#")));
     },
 });

package/dist/commonjs/color-picker/lib/ColorPreview.d.ts

@@ -9,5 +9,5 @@ export interface ColorPreviewProps extends TextInputProps {
      */
     id?: string;
 }
-export declare const ColorPreview: import("../../common").ElementComponent<"input", ColorPreviewProps>;
+export declare const ColorPreview: import("@workday/canvas-kit-react/common").ElementComponent<"input", ColorPreviewProps>;
 //# sourceMappingURL=ColorPreview.d.ts.map

package/dist/commonjs/color-picker/lib/ColorPreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPreview.d.ts","sourceRoot":"","sources":["../../../../color-picker/lib/ColorPreview.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,cAAc,EAAC,MAAM,sCAAsC,CAAC;AAIpE,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACvD;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAQD,eAAO,MAAM,YAAY,qEAavB,CAAC"}
+{"version":3,"file":"ColorPreview.d.ts","sourceRoot":"","sources":["../../../../color-picker/lib/ColorPreview.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,cAAc,EAAC,MAAM,sCAAsC,CAAC;AAIpE,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACvD;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAQD,eAAO,MAAM,YAAY,yFAavB,CAAC"}

package/dist/commonjs/color-picker/lib/ColorPreview.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -29,36 +18,22 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColorPreview = void 0;
-var React = __importStar(require("react"));
-var ColorInput_1 = require("./ColorInput");
-var common_1 = require("@workday/canvas-kit-react/common");
-var styled_1 = __importDefault(require("@emotion/styled"));
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var StyledColorPreview = styled_1.default(ColorInput_1.ColorInput)({
+const React = __importStar(require("react"));
+const ColorInput_1 = require("./ColorInput");
+const common_1 = require("@workday/canvas-kit-react/common");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const StyledColorPreview = styled_1.default(ColorInput_1.ColorInput)({
     backgroundColor: tokens_1.colors.frenchVanilla100,
     borderColor: tokens_1.colors.frenchVanilla100,
     pointerEvents: 'none',
 });
 exports.ColorPreview = common_1.createComponent('input')({
     displayName: 'ColorPreview',
-    Component: function (_a, ref, Element) {
-        var id = _a.id, value = _a.value, elemProps = __rest(_a, ["id", "value"]);
-        return (React.createElement(StyledColorPreview, __assign({ ref: ref, as: Element, id: id, value: value, readOnly: true, placeholder: "" }, elemProps)));
-    },
+    Component: ({ id, value, ...elemProps }, ref, Element) => (React.createElement(StyledColorPreview, Object.assign({ ref: ref, as: Element, id: id, value: value, readOnly: true, placeholder: "" }, elemProps))),
 });

package/dist/commonjs/color-picker/lib/parts/ColorSwatch.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -29,29 +18,18 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColorSwatch = void 0;
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var common_1 = require("@workday/canvas-kit-react/common");
-var chroma_js_1 = __importDefault(require("chroma-js"));
-var React = __importStar(require("react"));
-var styled_1 = __importDefault(require("@emotion/styled"));
-var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
-var icon_1 = require("@workday/canvas-kit-react/icon");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const common_1 = require("@workday/canvas-kit-react/common");
+const chroma_js_1 = __importDefault(require("chroma-js"));
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
+const icon_1 = require("@workday/canvas-kit-react/icon");
 function compareColors(color1, color2) {
     // Check for validity or else you'll get an unknown format error when passing blank strings
     if (!chroma_js_1.default.valid(color1) || !chroma_js_1.default.valid(color2)) {
@@ -59,7 +37,7 @@ function compareColors(color1, color2) {
     }
     return chroma_js_1.default(color1).hex() === chroma_js_1.default(color2).hex();
 }
-var Container = styled_1.default('div')({
+const Container = styled_1.default('div')({
     width: 20,
     height: 20,
     borderRadius: tokens_1.borderRadius.s,
@@ -70,17 +48,11 @@ var Container = styled_1.default('div')({
         // Account for 24px icon
         margin: -2,
     },
-}, function (_a) {
-    var color = _a.color, showCheck = _a.showCheck;
-    return ({
-        backgroundColor: color,
-        boxShadow: showCheck || compareColors(color, tokens_1.colors.frenchVanilla100)
-            ? 'inset 0px 0px 0px 1px rgba(0, 0, 0, 0.25)'
-            : undefined,
-    });
-});
-var ColorSwatch = function (_a) {
-    var color = _a.color, _b = _a.showCheck, showCheck = _b === void 0 ? false : _b, elemProps = __rest(_a, ["color", "showCheck"]);
-    return (React.createElement(Container, __assign({ color: color, showCheck: showCheck }, elemProps), showCheck && (React.createElement(icon_1.SystemIcon, { fill: common_1.pickForegroundColor(color), fillHover: common_1.pickForegroundColor(color), icon: canvas_system_icons_web_1.checkSmallIcon, color: color }))));
-};
+}, ({ color, showCheck }) => ({
+    backgroundColor: color,
+    boxShadow: showCheck || compareColors(color, tokens_1.colors.frenchVanilla100)
+        ? 'inset 0px 0px 0px 1px rgba(0, 0, 0, 0.25)'
+        : undefined,
+}));
+const ColorSwatch = ({ color, showCheck = false, ...elemProps }) => (React.createElement(Container, Object.assign({ color: color, showCheck: showCheck }, elemProps), showCheck && (React.createElement(icon_1.SystemIcon, { fill: common_1.pickForegroundColor(color), fillHover: common_1.pickForegroundColor(color), icon: canvas_system_icons_web_1.checkSmallIcon, color: color }))));
 exports.ColorSwatch = ColorSwatch;

package/dist/commonjs/combobox/index.d.ts

@@ -0,0 +1,9 @@
+export { Combobox } from './lib/Combobox';
+export { useComboboxCard } from './lib/ComboboxCard';
+export { useComboboxMenuItem } from './lib/ComboboxMenuItem';
+export { useComboboxMenuList } from './lib/ComboboxMenuList';
+export { useComboboxInput } from './lib/ComboboxInput';
+export { useComboboxLoader } from './lib/useComboboxLoader';
+export { useComboboxModel } from './lib/useComboboxModel';
+export { useComboboxInputOpenWithArrowKeys as useComboboxOpenWithArrowKeys } from './lib/useComboboxInputOpenWithArrowKeys';
+//# sourceMappingURL=index.d.ts.map

package/dist/commonjs/combobox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../combobox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAC,eAAe,EAAC,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAC,mBAAmB,EAAC,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAC,mBAAmB,EAAC,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAC,gBAAgB,EAAC,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAC,iBAAiB,EAAC,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAC,gBAAgB,EAAC,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAC,iCAAiC,IAAI,4BAA4B,EAAC,MAAM,yCAAyC,CAAC"}

package/dist/commonjs/combobox/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useComboboxOpenWithArrowKeys = exports.useComboboxModel = exports.useComboboxLoader = exports.useComboboxInput = exports.useComboboxMenuList = exports.useComboboxMenuItem = exports.useComboboxCard = exports.Combobox = void 0;
+var Combobox_1 = require("./lib/Combobox");
+Object.defineProperty(exports, "Combobox", { enumerable: true, get: function () { return Combobox_1.Combobox; } });
+var ComboboxCard_1 = require("./lib/ComboboxCard");
+Object.defineProperty(exports, "useComboboxCard", { enumerable: true, get: function () { return ComboboxCard_1.useComboboxCard; } });
+var ComboboxMenuItem_1 = require("./lib/ComboboxMenuItem");
+Object.defineProperty(exports, "useComboboxMenuItem", { enumerable: true, get: function () { return ComboboxMenuItem_1.useComboboxMenuItem; } });
+var ComboboxMenuList_1 = require("./lib/ComboboxMenuList");
+Object.defineProperty(exports, "useComboboxMenuList", { enumerable: true, get: function () { return ComboboxMenuList_1.useComboboxMenuList; } });
+var ComboboxInput_1 = require("./lib/ComboboxInput");
+Object.defineProperty(exports, "useComboboxInput", { enumerable: true, get: function () { return ComboboxInput_1.useComboboxInput; } });
+var useComboboxLoader_1 = require("./lib/useComboboxLoader");
+Object.defineProperty(exports, "useComboboxLoader", { enumerable: true, get: function () { return useComboboxLoader_1.useComboboxLoader; } });
+var useComboboxModel_1 = require("./lib/useComboboxModel");
+Object.defineProperty(exports, "useComboboxModel", { enumerable: true, get: function () { return useComboboxModel_1.useComboboxModel; } });
+var useComboboxInputOpenWithArrowKeys_1 = require("./lib/useComboboxInputOpenWithArrowKeys");
+Object.defineProperty(exports, "useComboboxOpenWithArrowKeys", { enumerable: true, get: function () { return useComboboxInputOpenWithArrowKeys_1.useComboboxInputOpenWithArrowKeys; } });