@guardian/stand 0.0.46 → 0.0.48

package/dist/components/Select/Select.cjs

@@ -8,18 +8,26 @@ react = require_runtime.__toESM(react);
 let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
 let react_aria_components = require("react-aria-components");
 //#region src/components/Select/Select.tsx
-function Option({ children, theme = {} }) {
+function Option({ children, theme = {}, id, ...props }) {
+	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultSelectTheme, theme);
+	const resolvedId = id ?? children;
 	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.ListBoxItem, {
-		css: require_styles.listBoxItemStyles(require_mergeDeep.mergeDeep(require_styles.defaultSelectTheme, theme)),
+		css: require_styles.listBoxItemStyles(mergedTheme),
+		id: resolvedId,
+		...props,
 		children
 	});
 }
 function ListBox({ children, theme = {} }) {
 	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultSelectTheme, theme);
 	const items = [];
-	react.default.Children.forEach(children, (child, i) => {
+	react.default.Children.forEach(children, (child, index) => {
 		if (!react.default.isValidElement(child)) return;
-		if (child.type === Option) items.push(react.default.cloneElement(child, { key: `${child.key}-${i}` }));
+		if (child.type === Option) {
+			const optionChild = child;
+			const key = `${optionChild.props.id ?? optionChild.props.children}-${index}`;
+			items.push(react.default.cloneElement(optionChild, { key }));
+		}
 	});
 	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.ListBox, {
 		css: require_styles.listBoxStyles(mergedTheme),
@@ -40,7 +48,9 @@ function Select({ isInvalid, theme = {}, children, ...props }) {
 				size: "lg"
 			})]
 		}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Popover, {
-			css: require_styles.popoverStyles(mergedTheme),
+			css: require_styles.popoverStyles(),
+			offset: mergedTheme.shared.offset,
+			containerPadding: mergedTheme.shared.containerPadding,
 			children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ListBox, { children })
 		})]
 	});

package/dist/components/Select/Select.d.cts

@@ -3,7 +3,9 @@ import { OptionProps, SelectProps } from "./types.cjs";
 //#region src/components/Select/Select.d.ts
 declare function Option({
   children,
-  theme
+  theme,
+  id,
+  ...props
 }: OptionProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare function Select({
   isInvalid,

package/dist/components/Select/Select.d.ts

@@ -3,7 +3,9 @@ import { OptionProps, SelectProps } from "./types.js";
 //#region src/components/Select/Select.d.ts
 declare function Option({
   children,
-  theme
+  theme,
+  id,
+  ...props
 }: OptionProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare function Select({
   isInvalid,

package/dist/components/Select/Select.js

@@ -6,18 +6,26 @@ import React from "react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { Button, ListBox, ListBoxItem, Popover, Select, SelectValue } from "react-aria-components";
 //#region src/components/Select/Select.tsx
-function Option({ children, theme = {} }) {
+function Option({ children, theme = {}, id, ...props }) {
+	const mergedTheme = mergeDeep(defaultSelectTheme, theme);
+	const resolvedId = id ?? children;
 	return /* @__PURE__ */ jsx(ListBoxItem, {
-		css: listBoxItemStyles(mergeDeep(defaultSelectTheme, theme)),
+		css: listBoxItemStyles(mergedTheme),
+		id: resolvedId,
+		...props,
 		children
 	});
 }
 function ListBox$1({ children, theme = {} }) {
 	const mergedTheme = mergeDeep(defaultSelectTheme, theme);
 	const items = [];
-	React.Children.forEach(children, (child, i) => {
+	React.Children.forEach(children, (child, index) => {
 		if (!React.isValidElement(child)) return;
-		if (child.type === Option) items.push(React.cloneElement(child, { key: `${child.key}-${i}` }));
+		if (child.type === Option) {
+			const optionChild = child;
+			const key = `${optionChild.props.id ?? optionChild.props.children}-${index}`;
+			items.push(React.cloneElement(optionChild, { key }));
+		}
 	});
 	return /* @__PURE__ */ jsx(ListBox, {
 		css: listBoxStyles(mergedTheme),
@@ -38,7 +46,9 @@ function Select$1({ isInvalid, theme = {}, children, ...props }) {
 				size: "lg"
 			})]
 		}), /* @__PURE__ */ jsx(Popover, {
-			css: popoverStyles(mergedTheme),
+			css: popoverStyles(),
+			offset: mergedTheme.shared.offset,
+			containerPadding: mergedTheme.shared.containerPadding,
 			children: /* @__PURE__ */ jsx(ListBox$1, { children })
 		})]
 	});

package/dist/components/Select/styles.cjs

@@ -3,9 +3,10 @@ const require_select = require("../../styleD/build/typescript/component/select.c
 let _emotion_react = require("@emotion/react");
 //#region src/components/Select/styles.ts
 const defaultSelectTheme = require_select.componentSelect;
-const popoverStyles = (theme) => {
+const popoverStyles = () => {
 	return _emotion_react.css`
-		width: ${theme.shared.width};
+		/* width must be determined by the react-aria popover --trigger-width variable */
+		width: var(--trigger-width);
 	`;
 };
 const listBoxItemStyles = (theme) => {

package/dist/components/Select/styles.js

@@ -3,9 +3,10 @@ import { componentSelect } from "../../styleD/build/typescript/component/select.
 import { css } from "@emotion/react";
 //#region src/components/Select/styles.ts
 const defaultSelectTheme = componentSelect;
-const popoverStyles = (theme) => {
+const popoverStyles = () => {
 	return css`
-		width: ${theme.shared.width};
+		/* width must be determined by the react-aria popover --trigger-width variable */
+		width: var(--trigger-width);
 	`;
 };
 const listBoxItemStyles = (theme) => {

package/dist/components/Select/types.d.cts

@@ -4,7 +4,7 @@ import { SelectTheme } from "./styles.cjs";
 import { ListBoxItemProps, SelectProps } from "react-aria-components";
 
 //#region src/components/Select/types.d.ts
-interface OptionProps extends DefaultPropsWithChildren<SelectTheme, ListBoxItemProps['className']>, Omit<ListBoxItemProps, 'children'> {}
+interface OptionProps extends DefaultPropsWithChildren<SelectTheme, ListBoxItemProps['className'], string>, Omit<ListBoxItemProps, 'children'> {}
 type SelectProps$1 = FormInputContainerDefaultProps<SelectProps<object, 'single' | 'multiple'>, SelectTheme>;
 //#endregion
 export { OptionProps, SelectProps$1 as SelectProps };

package/dist/components/Select/types.d.ts

@@ -4,7 +4,7 @@ import { SelectTheme } from "./styles.js";
 import { ListBoxItemProps, SelectProps } from "react-aria-components";
 
 //#region src/components/Select/types.d.ts
-interface OptionProps extends DefaultPropsWithChildren<SelectTheme, ListBoxItemProps['className']>, Omit<ListBoxItemProps, 'children'> {}
+interface OptionProps extends DefaultPropsWithChildren<SelectTheme, ListBoxItemProps['className'], string>, Omit<ListBoxItemProps, 'children'> {}
 type SelectProps$1 = FormInputContainerDefaultProps<SelectProps<object, 'single' | 'multiple'>, SelectTheme>;
 //#endregion
 export { OptionProps, SelectProps$1 as SelectProps };

package/dist/styleD/build/css/component/select.css

@@ -4,6 +4,8 @@
 
 :root {
 	--component-select-shared-width: 100%;
+	--component-select-shared-offset: 8;
+	--component-select-shared-container-padding: 0;
 	--component-select-shared-hover-background-color: #f6f6f6;
 	--component-select-shared-hover-outline: none; /** Override outline focus styles on hover */
 	--component-select-shared-pressed-background-color: #ededed;

package/dist/styleD/build/typescript/component/select.cjs

@@ -4,6 +4,8 @@
 */
 const componentSelect = { shared: {
 	width: "100%",
+	offset: 8,
+	containerPadding: 0,
 	hover: {
 		backgroundColor: "#f6f6f6",
 		outline: "none"

package/dist/styleD/build/typescript/component/select.d.cts

@@ -5,6 +5,8 @@
 declare const componentSelect: {
   shared: {
     width: string;
+    offset: number;
+    containerPadding: number;
     hover: {
       backgroundColor: string;
       outline: string;

package/dist/styleD/build/typescript/component/select.d.ts

@@ -5,6 +5,8 @@
 declare const componentSelect: {
   shared: {
     width: string;
+    offset: number;
+    containerPadding: number;
     hover: {
       backgroundColor: string;
       outline: string;

package/dist/styleD/build/typescript/component/select.js

@@ -4,6 +4,8 @@
 */
 const componentSelect = { shared: {
 	width: "100%",
+	offset: 8,
+	containerPadding: 0,
 	hover: {
 		backgroundColor: "#f6f6f6",
 		outline: "none"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.46",
+  "version": "0.0.48",
   "repository": {
     "url": "https://github.com/guardian/stand"
   },
@@ -503,14 +503,14 @@
   },
   "peerDependencies": {
     "@emotion/react": ">=11.11.4 <=11.14.0",
-    "@guardian/prosemirror-invisibles": "3.1.1",
+    "@guardian/prosemirror-invisibles": "^3.1.1",
     "@internationalized/date": "^3.12.1",
-    "prosemirror-dropcursor": "1.8.2",
-    "prosemirror-history": "1.4.1",
-    "prosemirror-keymap": "1.2.2",
-    "prosemirror-model": "1.25.0",
-    "prosemirror-state": "1.4.3",
-    "prosemirror-view": "1.37.2",
+    "prosemirror-dropcursor": "^1.8.2",
+    "prosemirror-history": "^1.4.1",
+    "prosemirror-keymap": "^1.2.2",
+    "prosemirror-model": "^1.25.0",
+    "prosemirror-state": "^1.4.3",
+    "prosemirror-view": "^1.37.2",
     "react": "^17.0.2 || ^18.0.0 || ^19.0.0",
     "react-aria-components": ">= 1.13.0 <= 1.18.0",
     "react-dom": "^17.0.2 || ^18.0.0 || ^19.0.0",