@spectrum-css/combobox - npm Package Compare versions

Comparing version 3.1.2 to 3.1.3

CHANGELOG.md

 # Change Log
 
+## 3.1.3
+
+### Patch Changes
+
+- [#3045](https://github.com/adobe/spectrum-css/pull/3045) [`5d6e03f`](https://github.com/adobe/spectrum-css/commit/5d6e03f30891f9171f1a600b06d534ee85719277) Thanks [@castastrophe](https://github.com/castastrophe)! - Improve changeset suggestions by using exports instead of files in component packages
+
+- Updated dependencies [[`5d6e03f`](https://github.com/adobe/spectrum-css/commit/5d6e03f30891f9171f1a600b06d534ee85719277)]:
+  - @spectrum-css/progresscircle@3.1.3
+  - @spectrum-css/pickerbutton@5.1.2
+  - @spectrum-css/textfield@7.2.1
+  - @spectrum-css/popover@7.1.5
+  - @spectrum-css/menu@7.1.6
+
 ## 3.1.2
@@ -46,3 +59,5 @@
 <a name="3.0.0"></a>
-#3.0.0
+
+## 3.0.0
+
 🗓
@@ -66,3 +81,5 @@ 2024-04-18 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.1.6...@spectrum-css/combobox@3.0.0)
 <a name="2.1.6"></a>
-##2.1.6
+
+## 2.1.6
+
 🗓
@@ -74,3 +91,5 @@ 2024-03-07 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.1.5...@spectrum-css/combobox@2.1.6)
 <a name="2.1.5"></a>
-##2.1.5
+
+## 2.1.5
+
 🗓
@@ -82,3 +101,5 @@ 2024-02-26 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.1.4...@spectrum-css/combobox@2.1.5)
 <a name="2.1.4"></a>
-##2.1.4
+
+## 2.1.4
+
 🗓
@@ -90,3 +111,5 @@ 2024-02-15 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.1.3...@spectrum-css/combobox@2.1.4)
 <a name="2.1.3"></a>
-##2.1.3
+
+## 2.1.3
+
 🗓
@@ -98,3 +121,5 @@ 2024-02-12 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.1.2...@spectrum-css/combobox@2.1.3)
 <a name="2.1.2"></a>
-##2.1.2
+
+## 2.1.2
+
 🗓
@@ -106,3 +131,5 @@ 2024-02-06
 <a name="2.1.1"></a>
-##2.1.1
+
+## 2.1.1
+
 🗓
@@ -114,3 +141,5 @@ 2024-02-05 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.1.0...@spectrum-css/combobox@2.1.1)
 <a name="2.1.0"></a>
-#2.1.0
+
+## 2.1.0
+
 🗓
@@ -122,3 +151,5 @@ 2024-02-05 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.48...@spectrum-css/combobox@2.1.0)
 <a name="2.0.48"></a>
-##2.0.48
+
+## 2.0.48
+
 🗓
@@ -130,3 +161,5 @@ 2024-01-16 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.47...@spectrum-css/combobox@2.0.48)
 <a name="2.0.47"></a>
-##2.0.47
+
+## 2.0.47
+
 🗓
@@ -138,3 +171,5 @@ 2023-12-12 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.46...@spectrum-css/combobox@2.0.47)
 <a name="2.0.46"></a>
-##2.0.46
+
+## 2.0.46
+
 🗓
@@ -146,3 +181,5 @@ 2023-12-04 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.45...@spectrum-css/combobox@2.0.46)
 <a name="2.0.45"></a>
-##2.0.45
+
+## 2.0.45
+
 🗓
@@ -154,3 +191,5 @@ 2023-11-15 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.43...@spectrum-css/combobox@2.0.45)
 <a name="2.0.44"></a>
-##2.0.44
+
+## 2.0.44
+
 🗓
@@ -162,3 +201,5 @@ 2023-11-13 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.43...@spectrum-css/combobox@2.0.44)
 <a name="2.0.43"></a>
-##2.0.43
+
+## 2.0.43
+
 🗓
@@ -170,3 +211,5 @@ 2023-11-09 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.42...@spectrum-css/combobox@2.0.43)
 <a name="2.0.42"></a>
-##2.0.42
+
+## 2.0.42
+
 🗓
@@ -178,3 +221,5 @@ 2023-10-13 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.41...@spectrum-css/combobox@2.0.42)
 <a name="2.0.41"></a>
-##2.0.41
+
+## 2.0.41
+
 🗓
@@ -186,3 +231,5 @@ 2023-09-26 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.40...@spectrum-css/combobox@2.0.41)
 <a name="2.0.40"></a>
-##2.0.40
+
+## 2.0.40
+
 🗓
@@ -194,3 +241,5 @@ 2023-09-18 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.39...@spectrum-css/combobox@2.0.40)
 <a name="2.0.39"></a>
-##2.0.39
+
+## 2.0.39
+
 🗓
@@ -202,3 +251,5 @@ 2023-09-14 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.38...@spectrum-css/combobox@2.0.39)
 <a name="2.0.38"></a>
-##2.0.38
+
+## 2.0.38
+
 🗓
@@ -210,3 +261,5 @@ 2023-09-13 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.37...@spectrum-css/combobox@2.0.38)
 <a name="2.0.37"></a>
-##2.0.37
+
+## 2.0.37
+
 🗓
@@ -218,3 +271,5 @@ 2023-09-07 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.36...@spectrum-css/combobox@2.0.37)
 <a name="2.0.36"></a>
-##2.0.36
+
+## 2.0.36
+
 🗓
@@ -226,3 +281,5 @@ 2023-09-01 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.35...@spectrum-css/combobox@2.0.36)
 <a name="2.0.35"></a>
-##2.0.35
+
+## 2.0.35
+
 🗓
@@ -234,3 +291,5 @@ 2023-08-31 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.34...@spectrum-css/combobox@2.0.35)
 <a name="2.0.34"></a>
-##2.0.34
+
+## 2.0.34
+
 🗓
@@ -242,3 +301,5 @@ 2023-08-31 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.33...@spectrum-css/combobox@2.0.34)
 <a name="2.0.33"></a>
-##2.0.33
+
+## 2.0.33
+
 🗓
@@ -250,3 +311,5 @@ 2023-08-29 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.32...@spectrum-css/combobox@2.0.33)
 <a name="2.0.32"></a>
-##2.0.32
+
+## 2.0.32
+
 🗓
@@ -260,3 +323,5 @@ 2023-08-25 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.31...@spectrum-css/combobox@2.0.32)
 <a name="2.0.31"></a>
-##2.0.31
+
+## 2.0.31
+
 🗓
@@ -268,3 +333,5 @@ 2023-08-22 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.30...@spectrum-css/combobox@2.0.31)
 <a name="2.0.30"></a>
-##2.0.30
+
+## 2.0.30
+
 🗓
@@ -276,3 +343,5 @@ 2023-08-22 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.28...@spectrum-css/combobox@2.0.30)
 <a name="2.0.29"></a>
-##2.0.29
+
+## 2.0.29
+
 🗓
@@ -284,3 +353,5 @@ 2023-08-18 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.28...@spectrum-css/combobox@2.0.29)
 <a name="2.0.28"></a>
-##2.0.28
+
+## 2.0.28
+
 🗓
@@ -292,3 +363,5 @@ 2023-08-16 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.27...@spectrum-css/combobox@2.0.28)
 <a name="2.0.27"></a>
-##2.0.27
+
+## 2.0.27
+
 🗓
@@ -300,3 +373,5 @@ 2023-08-10 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.26...@spectrum-css/combobox@2.0.27)
 <a name="2.0.26"></a>
-##2.0.26
+
+## 2.0.26
+
 🗓
@@ -308,3 +383,5 @@ 2023-08-07 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.25...@spectrum-css/combobox@2.0.26)
 <a name="2.0.25"></a>
-##2.0.25
+
+## 2.0.25
+
 🗓
@@ -316,3 +393,5 @@ 2023-08-03 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.24...@spectrum-css/combobox@2.0.25)
 <a name="2.0.24"></a>
-##2.0.24
+
+## 2.0.24
+
 🗓
@@ -324,3 +403,5 @@ 2023-07-31 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.23...@spectrum-css/combobox@2.0.24)
 <a name="2.0.23"></a>
-##2.0.23
+
+## 2.0.23
+
 🗓
@@ -334,3 +415,5 @@ 2023-07-24 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.22...@spectrum-css/combobox@2.0.23)
 <a name="2.0.22"></a>
-##2.0.22
+
+## 2.0.22
+
 🗓
@@ -342,3 +425,5 @@ 2023-07-17 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.21...@spectrum-css/combobox@2.0.22)
 <a name="2.0.21"></a>
-##2.0.21
+
+## 2.0.21
+
 🗓
@@ -350,3 +435,5 @@ 2023-07-14 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.20...@spectrum-css/combobox@2.0.21)
 <a name="2.0.20"></a>
-##2.0.20
+
+## 2.0.20
+
 🗓
@@ -358,3 +445,5 @@ 2023-07-11 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.19...@spectrum-css/combobox@2.0.20)
 <a name="2.0.19"></a>
-##2.0.19
+
+## 2.0.19
+
 🗓
@@ -366,3 +455,5 @@ 2023-06-29 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.18...@spectrum-css/combobox@2.0.19)
 <a name="2.0.18"></a>
-##2.0.18
+
+## 2.0.18
+
 🗓
@@ -374,3 +465,5 @@ 2023-06-28 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.17...@spectrum-css/combobox@2.0.18)
 <a name="2.0.17"></a>
-##2.0.17
+
+## 2.0.17
+
 🗓
@@ -382,3 +475,5 @@ 2023-06-21 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.16...@spectrum-css/combobox@2.0.17)
 <a name="2.0.16"></a>
-##2.0.16
+
+## 2.0.16
+
 🗓
@@ -390,3 +485,5 @@ 2023-06-15 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.15...@spectrum-css/combobox@2.0.16)
 <a name="2.0.15"></a>
-##2.0.15
+
+## 2.0.15
+
 🗓
@@ -400,3 +497,5 @@ 2023-06-12 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.14...@spectrum-css/combobox@2.0.15)
 <a name="2.0.14"></a>
-##2.0.14
+
+## 2.0.14
+
 🗓
@@ -408,3 +507,5 @@ 2023-06-02 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.13...@spectrum-css/combobox@2.0.14)
 <a name="2.0.13"></a>
-##2.0.13
+
+## 2.0.13
+
 🗓
@@ -515,3 +616,3 @@ 2023-06-01 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@2.0.12...@spectrum-css/combobox@2.0.13)
 
-# 2.0.0
+## 2.0.0
 
@@ -691,1 +792,10 @@ 🗓 2023-05-02 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/combobox@1.0.16...@spectrum-css/combobox@2.0.0)
 **Note:** Version bump only for package @spectrum-css/combobox
+
+### Component separated from InputGroup
+
+Combobox was previously a variant style for InputGroup. **InputGroup is deprecated**. The classes listed below containing `InputGroup` have been renamed or removed:
+
+- `.spectrum-InputGroup-textfield` -> `.spectrum-Combobox-textfield`
+- `.spectrum-InputGroup-input` -> `.spectrum-Combobox-input`
+- `.spectrum-InputGroup-button` -> `.spectrum-Combobox-button`
+- `.InputGroup` -> removed

package.json

 {
 	"name": "@spectrum-css/combobox",
-	"version": "3.1.2",
+	"version": "3.1.3",
 	"description": "The Spectrum CSS combobox component",
@@ -16,3 +16,12 @@ "license": "Apache-2.0",
 	},
-	"main": "dist/index.css",
+	"exports": {
+		".": "./dist/index.css",
+		"./CHANGELOG.md": "./CHANGELOG.md",
+		"./index-*.css": "./dist/index-*.css",
+		"./index.css": "./dist/index.css",
+		"./metadata.json": "./metadata/metadata.json",
+		"./metadata/*": "./metadata/*",
+		"./package.json": "./package.json",
+		"./stories/*": "./stories/*"
+	},
 	"files": [
@@ -22,5 +31,6 @@ "dist/*",
 		"package.json",
-		"stories/template.js",
-		"metadata/mods.md"
+		"stories/*",
+		"metadata/*"
 	],
+	"main": "dist/index.css",
 	"peerDependencies": {
@@ -34,2 +44,7 @@ "@spectrum-css/menu": ">=7",
 	},
+	"peerDependenciesMeta": {
+		"@spectrum-css/progresscircle": {
+			"optional": true
+		}
+	},
 	"devDependencies": {
@@ -43,7 +58,2 @@ "@spectrum-css/menu": "workspace:^",
 	},
-	"peerDependenciesMeta": {
-		"@spectrum-css/progresscircle": {
-			"optional": true
-		}
-	},
 	"keywords": [
@@ -50,0 +60,0 @@ "spectrum",

stories/template.js

@@ -1,5 +0,1 @@
-import { html } from "lit";
-import { classMap } from "lit/directives/class-map.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-
 import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js";
@@ -9,12 +5,18 @@ import { Template as Menu } from "@spectrum-css/menu/stories/template.js";
 import { Template as Popover } from "@spectrum-css/popover/stories/template.js";
+import { getRandomId } from "@spectrum-css/preview/decorators";
 import { Template as TextField } from "@spectrum-css/textfield/stories/template.js";
+import { html } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { when } from "lit/directives/when.js";
 
-import { useArgs, useGlobals } from "@storybook/preview-api";
-
 import "../index.css";
 
-export const Template = ({
+const Combobox = ({
 	rootClass = "spectrum-Combobox",
-	id,
+	id = getRandomId("combobox"),
+	testId,
 	customClasses = [],
+	customStyles = {},
 	size = "m",
@@ -25,5 +27,2 @@ isOpen = true,
 	isDisabled = false,
-	showFieldLabel = false,
-	fieldLabelText = "Select location",
-	fieldLabelPosition = "top",
 	isFocused = false,
@@ -33,8 +32,6 @@ isKeyboardFocused = false,
 	selectedDay,
-	...globals
-}) => {
-	const [, updateArgs] = useArgs();
-	const [{ lang }] = useGlobals();
+} = {}, context = {}) => {
+	const { globals = {}, updateArgs } = context;
+	const lang = globals.lang ?? "en-US";
 
-
 	// If selectedDay is a string, convert it to a Date object
@@ -46,11 +43,2 @@ if (typeof selectedDay === "string" && selectedDay.length > 0) {
 	return html`
-		${showFieldLabel ?
-			FieldLabel({
-				...globals,
-				size,
-				label: fieldLabelText,
-				customStyles: { "max-inline-size": "100px"},
-				alignment: fieldLabelPosition === "left" && "left",
-			}) : null
-		}
 		<div
@@ -71,64 +59,92 @@ class=${classMap({
 			id=${ifDefined(id)}
+			data-testid=${ifDefined(testId ?? id)}
+			style=${styleMap(customStyles)}
 		>
+			${TextField({
+				size,
+				isQuiet,
+				isDisabled,
+				isInvalid,
+				isFocused,
+				isKeyboardFocused,
+				customClasses: [
+					`${rootClass}-textfield`,
+					...(isLoading ? ["is-loading"] : []),
+				],
+				customInputClasses: [`${rootClass}-input`],
+				isLoading,
+				customProgressCircleClasses: ["spectrum-Combobox-progress-circle"],
+				placeholder: "Type here this text should truncate",
+				name: "field",
+				value: selectedDay
+					? new Date(selectedDay).toLocaleDateString(lang)
+					: undefined,
+				onclick: function () {
+					if (!isOpen) updateArgs({ isOpen: true });
+				},
+			}, context)}
+			${PickerButton({
+				customClasses: [
+					`${rootClass}-button`,
+					... isInvalid ? ["is-invalid"] : [],
+				],
+				size,
+				iconType: "ui",
+				iconName: "ChevronDown",
+				isQuiet,
+				id: getRandomId("picker"),
+				isOpen,
+				isFocused,
+				isKeyboardFocused,
+				isDisabled,
+				position: "right",
+				onclick: function () {
+					updateArgs({ isOpen: !isOpen });
+				},
+			}, context)}
+		</div>
+	`;
+};
+
+export const Template = ({
+	size = "m",
+	isOpen = true,
+	isQuiet = false,
+	isDisabled = false,
+	showFieldLabel = false,
+	fieldLabelText = "Select location",
+	fieldLabelPosition = "top",
+	...args
+} = {}, context = {}) => {
+	const popoverHeight = size === "s" ? 106 : size === "l" ? 170 : size === "xl" ? 229 : 142; // default value is "m"
+	return html`
+		<div style=${styleMap({
+			// This accounts for the height of the popover when it is open to prevent testing issues
+			// and allow docs containers to be the right height
+			["margin-block-end"]: isOpen && !isDisabled ? `${popoverHeight}px` : undefined,
+		})}>
+			${when(showFieldLabel, () =>
+				FieldLabel({
+					size,
+					label: fieldLabelText,
+					customStyles: { "max-inline-size": "100px"},
+					alignment: fieldLabelPosition === "left" && "left",
+				}, context)
+			)}
 			${[
-				TextField({
-					...globals,
-					size,
-					isQuiet,
-					isDisabled,
-					isInvalid,
-					isFocused,
-					isKeyboardFocused,
-					customClasses: [
-						`${rootClass}-textfield`,
-						...(isLoading ? ["is-loading"] : []),
-					],
-					customInputClasses: [`${rootClass}-input`],
-					isLoading,
-					customProgressCircleClasses: ["spectrum-Combobox-progress-circle"],
-					placeholder: "Type here this text should truncate",
-					name: "field",
-					value: globals.selectedDay
-						? new Date(globals.selectedDay).toLocaleDateString(lang)
-						: undefined,
-					onclick: function () {
-						if (!isOpen) updateArgs({ isOpen: true });
-					},
-				}),
-				PickerButton({
-					...globals,
-					customClasses: [
-						`${rootClass}-button`,
-						... isInvalid ? ["is-invalid"] : [],
-					],
-					size,
-					iconType: "ui",
-					iconName: "ChevronDown",
-					isQuiet,
-					isOpen,
-					isFocused,
-					isKeyboardFocused,
-					isDisabled,
-					position: "right",
-					onclick: function () {
-						updateArgs({ isOpen: !isOpen });
-					},
-				}),
 				Popover({
-					...globals,
 					isOpen: isOpen && !isDisabled,
 					withTip: false,
-					position: "bottom",
+					position: "bottom-start",
 					isQuiet,
-					customStyles: isOpen
-						? {
-								position: "absolute",
-								top: "100%",
-								left: "0",
-								width: "100%",
-						}
-						: {},
+					trigger: (passthrough) => Combobox({
+						size,
+						isOpen,
+						isQuiet,
+						isDisabled,
+						...args,
+						...passthrough,
+					}, context),
 					content: [
 						Menu({
-							...globals,
 							size,
@@ -150,5 +166,7 @@ items: [
 							],
-						}),
+						}, context),
 					],
-				}),
+					popoverWidth: size === "s" ? 140 : size === "l" ? 191 : size === "xl" ? 192 : 166, // default value is "m"
+					popoverHeight,
+				}, context),
 			]}
@@ -155,0 +173,0 @@ </div>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

163278

increased by28.29%

Number of package files

16

increased by33.33%

Lines of code

1795

increased by26.86%

No dependency changes