Merge remote-tracking branch 'origin/dev' into benelan/9255-add-icons…

…-to-monorepo * origin/dev: feat(combobox, combobox-item): add `metadata` support for filtering (#9819) chore: release next feat(tooltip): support touch events (#9487) build(deps): update storybook monorepo to v8.2.4 (#9815) chore: release next feat(color-picker, color-picker-hex-input): Add input auto commit, blur and auto select enhancements. (#9701) build(deps): update dependency tailwindcss to v3.4.6 (#9814) build(deps): update dependency rollup to v4.18.1 (#9813) build(deps): pin dependencies (#9812)
Esri · Jul 22, 2024 · 40170e9 · 40170e9
2 parents 69b6945 + bd90f63
commit 40170e9
Show file tree

Hide file tree

Showing 18 changed files with 864 additions and 299 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -39,20 +39,20 @@
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/plugin-replace": "5.0.7",
     "@rollup/plugin-typescript": "11.1.6",
-    "@storybook/addon-a11y": "8.2.2",
-    "@storybook/addon-controls": "8.2.2",
-    "@storybook/addon-docs": "8.2.2",
-    "@storybook/addon-interactions": "8.2.2",
-    "@storybook/addon-mdx-gfm": "8.2.2",
-    "@storybook/addon-themes": "8.2.2",
+    "@storybook/addon-a11y": "8.2.4",
+    "@storybook/addon-controls": "8.2.4",
+    "@storybook/addon-docs": "8.2.4",
+    "@storybook/addon-interactions": "8.2.4",
+    "@storybook/addon-mdx-gfm": "8.2.4",
+    "@storybook/addon-themes": "8.2.4",
     "@storybook/addon-webpack5-compiler-babel": "3.0.3",
-    "@storybook/blocks": "8.2.2",
-    "@storybook/html": "8.2.2",
-    "@storybook/html-webpack5": "8.2.2",
-    "@storybook/manager-api": "8.2.2",
-    "@storybook/preview-api": "8.2.2",
+    "@storybook/blocks": "8.2.4",
+    "@storybook/html": "8.2.4",
+    "@storybook/html-webpack5": "8.2.4",
+    "@storybook/manager-api": "8.2.4",
+    "@storybook/preview-api": "8.2.4",
     "@storybook/storybook-deployer": "2.8.16",
-    "@storybook/test": "8.2.2",
+    "@storybook/test": "8.2.4",
     "@tokens-studio/sd-transforms": "0.12.2",
     "@types/dedent": "0.7.2",
     "@types/eslint": "8.56.10",
@@ -105,16 +105,16 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "rimraf": "5.0.9",
-    "rollup": "4.18.0",
+    "rollup": "4.18.1",
     "semver": "7.6.2",
     "shell-quote": "1.8.1",
-    "storybook": "8.2.2",
+    "storybook": "8.2.4",
     "storybook-addon-rtl": "1.0.0",
     "style-dictionary": "3.9.2",
     "stylelint": "15.11.0",
     "stylelint-config-recommended-scss": "12.0.0",
     "stylelint-use-logical-spec": "5.0.1",
-    "tailwindcss": "3.4.4",
+    "tailwindcss": "3.4.6",
     "ts-jest": "29.1.2",
     "tsx": "4.16.2",
     "turbo": "1.13.4",
@@ -134,8 +134,8 @@
     "patch-package": "8.0.0"
   },
   "optionalDependencies": {
-    "@nx/nx-darwin-arm64": "*",
-    "@nx/nx-win32-x64-msvc": "*",
-    "@nx/nx-linux-x64-gnu": "*"
+    "@nx/nx-darwin-arm64": "19.5.1",
+    "@nx/nx-win32-x64-msvc": "19.5.1",
+    "@nx/nx-linux-x64-gnu": "18.3.5"
   }
 }
diff --git a/packages/calcite-components-angular/projects/component-library/CHANGELOG.md b/packages/calcite-components-angular/projects/component-library/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.11.0-next.16](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.0-next.15...@esri/calcite-components-angular@2.11.0-next.16) (2024-07-22)
+
+**Note:** Version bump only for package @esri/calcite-components-angular
+
+## [2.11.0-next.15](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.0-next.14...@esri/calcite-components-angular@2.11.0-next.15) (2024-07-19)
+
+**Note:** Version bump only for package @esri/calcite-components-angular
+
 ## [2.11.0-next.14](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.0-next.13...@esri/calcite-components-angular@2.11.0-next.14) (2024-07-16)
 
 **Note:** Version bump only for package @esri/calcite-components-angular

diff --git a/packages/calcite-components-angular/projects/component-library/package.json b/packages/calcite-components-angular/projects/component-library/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components-angular",
-  "version": "2.11.0-next.14",
+  "version": "2.11.0-next.16",
   "description": "A set of Angular components that wrap Esri's Calcite Components.",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "bugs": {
@@ -17,7 +17,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@esri/calcite-components": "^2.11.0-next.14",
+    "@esri/calcite-components": "^2.11.0-next.16",
     "tslib": "2.6.3"
   },
   "peerDependencies": {

diff --git a/packages/calcite-components-react/CHANGELOG.md b/packages/calcite-components-react/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.11.0-next.16](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.0-next.15...@esri/calcite-components-react@2.11.0-next.16) (2024-07-22)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
+## [2.11.0-next.15](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.0-next.14...@esri/calcite-components-react@2.11.0-next.15) (2024-07-19)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
 ## [2.11.0-next.14](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.0-next.13...@esri/calcite-components-react@2.11.0-next.14) (2024-07-16)
 
 **Note:** Version bump only for package @esri/calcite-components-react

diff --git a/packages/calcite-components-react/package.json b/packages/calcite-components-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components-react",
-  "version": "2.11.0-next.14",
+  "version": "2.11.0-next.16",
   "description": "A set of React components that wrap calcite components",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "repository": {
@@ -28,7 +28,7 @@
     "tsc": "tsc"
   },
   "dependencies": {
-    "@esri/calcite-components": "^2.11.0-next.14"
+    "@esri/calcite-components": "^2.11.0-next.16"
   },
   "peerDependencies": {
     "react": ">=16.7",

diff --git a/packages/calcite-components/CHANGELOG.md b/packages/calcite-components/CHANGELOG.md
@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.11.0-next.16](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.0-next.15...@esri/calcite-components@2.11.0-next.16) (2024-07-22)
+
+### Features
+
+- **tooltip:** support touch events ([#9487](https://github.com/Esri/calcite-design-system/issues/9487)) ([77459fb](https://github.com/Esri/calcite-design-system/commit/77459fbfb54163dffb85e9ca1178e39938bf38eb)), closes [#9273](https://github.com/Esri/calcite-design-system/issues/9273)
+
+## [2.11.0-next.15](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.0-next.14...@esri/calcite-components@2.11.0-next.15) (2024-07-19)
+
+### Features
+
+- **color-picker, color-picker-hex-input:** Add input auto commit, blur and auto select enhancements. ([#9701](https://github.com/Esri/calcite-design-system/issues/9701)) ([281a869](https://github.com/Esri/calcite-design-system/commit/281a86954e266a554dfbbf96c0a641820f11dc56)), closes [#9624](https://github.com/Esri/calcite-design-system/issues/9624)
+
 ## [2.11.0-next.14](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.0-next.13...@esri/calcite-components@2.11.0-next.14) (2024-07-16)
 
 ### Bug Fixes

diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "2.11.0-next.14",
+  "version": "2.11.0-next.16",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",

diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
@@ -1393,6 +1393,10 @@ export namespace Components {
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
         "iconFlipRtl": boolean;
+        /**
+          * Provides additional metadata to the component used in filtering.
+         */
+        "metadata": Record<string, unknown>;
         /**
           * Specifies the size of the component inherited from the `calcite-combobox`, defaults to `m`.
          */
@@ -9244,6 +9248,10 @@ declare namespace LocalJSX {
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
         "iconFlipRtl"?: boolean;
+        /**
+          * Provides additional metadata to the component used in filtering.
+         */
+        "metadata"?: Record<string, unknown>;
         /**
           * Fires whenever the component is selected or unselected.
          */

diff --git a/...es/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts b/...es/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts
@@ -108,6 +108,66 @@ describe("calcite-color-picker-hex-input", () => {
     expect(await input.getProperty("value")).toBe("#fafafafa");
   });
 
+  it("commits shorthand hex on blur", async () => {
+    const defaultHex = "#b33f33";
+    const editedHex = "#aabbcc";
+    const page = await newE2EPage();
+    await page.setContent(`<calcite-color-picker-hex-input value='${defaultHex}'></calcite-color-picker-hex-input>`);
+
+    const input = await page.find(`calcite-color-picker-hex-input`);
+    await selectText(input);
+    await page.keyboard.type("ab");
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+
+    expect(await input.getProperty("value")).toBe(defaultHex);
+
+    await selectText(input);
+    await page.keyboard.type("abc");
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+
+    expect(await input.getProperty("value")).toBe(editedHex);
+
+    await selectText(input);
+    await page.keyboard.type("abcd");
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+
+    expect(await input.getProperty("value")).toBe(editedHex);
+  });
+
+  it("commits shorthand hexa on blur", async () => {
+    const defaultHexa = "#b33f33ff";
+    const editedHexa = "#aabbccdd";
+    const page = await newE2EPage();
+    await page.setContent(
+      `<calcite-color-picker-hex-input alpha-channel value='${defaultHexa}'></calcite-color-picker-hex-input>`,
+    );
+
+    const input = await page.find(`calcite-color-picker-hex-input`);
+    await selectText(input);
+    await page.keyboard.type("abc");
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+
+    expect(await input.getProperty("value")).toBe(defaultHexa);
+
+    await selectText(input);
+    await page.keyboard.type("abcd");
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+
+    expect(await input.getProperty("value")).toBe(editedHexa);
+
+    await selectText(input);
+    await page.keyboard.type("abcde");
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+
+    expect(await input.getProperty("value")).toBe(editedHexa);
+  });
+
   it("normalizes value when initialized", async () => {
     const page = await newE2EPage();
     await page.setContent("<calcite-color-picker-hex-input value='#f0f'></calcite-color-picker-hex-input>");
@@ -272,11 +332,10 @@ describe("calcite-color-picker-hex-input", () => {
     await selectText(input);
     const longhandHexWithExtraChars = "bbbbbbbbc";
     await page.keyboard.type(longhandHexWithExtraChars);
-    await page.keyboard.press("Enter");
     await page.waitForChanges();
 
-    const hexWithPreviousAlphaCharsPreserved = "#bbbbbbdd";
-    expect(await input.getProperty("value")).toBe(hexWithPreviousAlphaCharsPreserved);
+    const hexWithAlphaCharsPreserved = "#bbbbbbbb";
+    expect(await input.getProperty("value")).toBe(hexWithAlphaCharsPreserved);
   });
 
   describe("keyboard interaction", () => {

diff --git a/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.tsx b/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.tsx
@@ -18,6 +18,7 @@ import {
   hexChar,
   hexify,
   isLonghandHex,
+  isShorthandHex,
   isValidHex,
   normalizeHex,
   opacityToAlpha,
@@ -146,8 +147,10 @@ export class ColorPickerHexInput implements LoadableComponent {
     const willClearValue = allowEmpty && !inputValue;
     const isLonghand = isLonghandHex(hex);
 
-    // ensure modified pasted hex values are committed since we prevent default to remove the # char.
-    this.onHexInputChange();
+    if (isShorthandHex(hex, this.alphaChannel)) {
+      // ensure modified pasted hex values are committed since we prevent default to remove the # char.
+      this.onHexInputChange();
+    }
 
     if (willClearValue || (isValidHex(hex) && isLonghand)) {
       return;
@@ -180,6 +183,10 @@ export class ColorPickerHexInput implements LoadableComponent {
       allowEmpty && !internalColor ? "" : this.formatOpacityForInternalInput(internalColor);
   };
 
+  private onOpacityInputInput = (): void => {
+    this.onOpacityInputChange();
+  };
+
   private onHexInputChange = (): void => {
     const nodeValue = this.hexInputNode.value;
     let value = nodeValue;
@@ -210,7 +217,13 @@ export class ColorPickerHexInput implements LoadableComponent {
     this.internalSetValue(value, this.value);
   };
 
-  private onHexInput = (): void => {
+  private onInputFocus = (event: Event): void => {
+    event.type === "calciteInternalInputTextFocus"
+      ? this.hexInputNode.selectText()
+      : this.opacityInputNode.selectText();
+  };
+
+  private onHexInputInput = (): void => {
     const hexInputValue = `#${this.hexInputNode.value}`;
     const oldValue = this.value;
 
@@ -228,7 +241,7 @@ export class ColorPickerHexInput implements LoadableComponent {
     const { key } = event;
     const composedPath = event.composedPath();
 
-    if (key === "Tab" || key === "Enter") {
+    if ((key === "Tab" && isShorthandHex(value, this.alphaChannel)) || key === "Enter") {
       if (composedPath.includes(hexInputNode)) {
         this.onHexInputChange();
       } else {
@@ -326,10 +339,11 @@ export class ColorPickerHexInput implements LoadableComponent {
         <calcite-input-text
           class={CSS.hexInput}
           label={messages?.hex || hexLabel}
-          maxLength={6}
+          maxLength={this.alphaChannel ? 8 : 6}
           onCalciteInputTextChange={this.onHexInputChange}
-          onCalciteInputTextInput={this.onHexInput}
+          onCalciteInputTextInput={this.onHexInputInput}
           onCalciteInternalInputTextBlur={this.onHexInputBlur}
+          onCalciteInternalInputTextFocus={this.onInputFocus}
           onKeyDown={this.onInputKeyDown}
           onPaste={this.onHexInputPaste}
           prefixText="#"
@@ -347,8 +361,9 @@ export class ColorPickerHexInput implements LoadableComponent {
             min={OPACITY_LIMITS.min}
             numberButtonType="none"
             numberingSystem={this.numberingSystem}
-            onCalciteInputNumberChange={this.onOpacityInputChange}
+            onCalciteInputNumberInput={this.onOpacityInputInput}
             onCalciteInternalInputNumberBlur={this.onOpacityInputBlur}
+            onCalciteInternalInputNumberFocus={this.onInputFocus}
             onKeyDown={this.onInputKeyDown}
             ref={this.storeOpacityInputRef}
             scale={inputScale}