@sonic-equipment/ui 260.0.9 → 260.1.0

package/dist/country-language-selector/connected-country-language-selector.js

@@ -82,7 +82,8 @@ function ConnectedCountryLanguageSelector({ className, countries: _countries, is
                     path = `/${optionKey}`;
                 }
                 menuOptions[optionKey] =
-                    environment === 'next-production' ? (jsx("span", { lang: languageCode, children: `${t(optionCountryLabel)} - ${t(optionLanguageLabel)}` })) : (jsxs("span", { lang: languageCode, children: [`${t(optionCountryLabel)} - ${t(optionLanguageLabel)}`, jsx("code", { style: { fontSize: '12px' }, children: path })] }));
+                    environment === 'next-production' ||
+                        environment === 'production' ? (jsx("span", { lang: languageCode, children: `${t(optionCountryLabel)} - ${t(optionLanguageLabel)}` })) : (jsxs("span", { lang: languageCode, children: [`${t(optionCountryLabel)} - ${t(optionLanguageLabel)}`, jsx("code", { style: { fontSize: '12px' }, children: path })] }));
                 optionData.push({
                     country: countryCode,
                     key: optionKey,

package/dist/forms/fields/select-field/select-field.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { Select, Button, SelectValue, Popover, ListBox, Header, ListBoxSection, ListBoxItem } from 'react-aria-components';
 import clsx from 'clsx';
 import { Icon } from '../../../icon/icon.js';
@@ -12,15 +12,13 @@ import { Label } from '../../elements/label/label.js';
 import { FormFieldLayout } from '../../layout/form/form-field-layout.js';
 import styles from './select-field.module.css.js';
 
-/* eslint-disable @eslint-react/hooks-extra/no-direct-set-state-in-use-effect */
 function SelectField({ className, 'data-test-selector': dataTestSelector, defaultSelectedOption, info, isDisabled, isInvalid, isLoading, isRequired, label, name, onChange, optionGroups, options, placeholder, selectedOption, showLabel = true, showPlaceholder, size = 'lg', variant = 'outline', }) {
     const [selectedKey, setSelectedKey] = useState(defaultSelectedOption);
-    useEffect(() => {
-        if (selectedOption)
-            setSelectedKey(selectedOption);
-    }, [selectedOption]);
+    const isControlled = selectedOption !== undefined;
+    const currentSelectedKey = isControlled ? selectedOption : selectedKey;
     const handleChange = (key) => {
-        setSelectedKey(key);
+        if (!isControlled)
+            setSelectedKey(key);
         onChange?.(key);
     };
     const grouplessOptions = Object.keys(options).filter(key => {
@@ -32,21 +30,21 @@ function SelectField({ className, 'data-test-selector': dataTestSelector, defaul
             [styles['loading']]: isLoading,
         }, className), "data-test-selector": dataTestSelector, defaultSelectedKey: defaultSelectedOption === undefined
             ? undefined
-            : String(defaultSelectedOption), isDisabled: isDisabled, isInvalid: isInvalid, isRequired: isRequired, name: name, onSelectionChange: key => handleChange(key), placeholder: placeholder || label, selectedKey: selectedOption === undefined ? undefined : String(selectedOption), children: jsx(FormFieldLayout, { errorSlot: jsx(FieldError, {}), infoSlot: info && jsx(InfoIconTooltip, { children: info }), labelSlot: showLabel && jsx(Label, { isRequired: isRequired, children: label }), children: jsxs(Fragment, { children: [jsxs(Button, { className: styles.button, children: [jsx(SelectValue, { className: styles.value, "data-test-selector": "value" }), isLoading ? (jsx(ProgressCircle, { "aria-hidden": "true", className: styles.loading, variant: "gray" })) : (jsx(Icon, { className: styles.icon, name: "ArrowDown", size: "xxs" }))] }), jsx(Popover, { className: clsx(styles.popover, styles[variant]), placement: "bottom left", children: jsxs(ListBox, { className: styles.listbox, "data-test-selector": dataTestSelector ? `${dataTestSelector}_options` : undefined, children: [showPlaceholder && (jsx(Header, { className: styles.header, children: placeholder || label })), optionGroups &&
+            : String(defaultSelectedOption), isDisabled: isDisabled, isInvalid: isInvalid, isRequired: isRequired, name: name, onSelectionChange: key => handleChange(key), placeholder: placeholder || label, selectedKey: selectedOption === undefined ? undefined : String(selectedOption), children: jsx(FormFieldLayout, { errorSlot: jsx(FieldError, {}), infoSlot: info && jsx(InfoIconTooltip, { children: info }), labelSlot: showLabel && jsx(Label, { isRequired: isRequired, children: label }), children: jsxs(Fragment, { children: [jsxs(Button, { className: styles.button, children: [jsx(SelectValue, { className: styles.value, "data-test-selector": "value" }), isLoading ? (jsx(ProgressCircle, { "aria-hidden": "true", className: styles.loading, variant: "gray" })) : (jsx(Icon, { className: styles.icon, name: "ArrowDown", size: "xxs" }))] }), jsx(Popover, { className: clsx(styles.popover, styles[variant]), maxHeight: 300, placement: "bottom left", children: jsxs(ListBox, { className: styles.listbox, "data-test-selector": dataTestSelector ? `${dataTestSelector}_options` : undefined, children: [showPlaceholder && (jsx(Header, { className: styles.header, children: placeholder || label })), optionGroups &&
                                     optionGroups.map(({ key: groupKey, options: groupOptions, reactNode }) => {
                                         return (groupOptions.some(k => k in options) && (jsxs(ListBoxSection, { className: styles.section, children: [jsx(Header, { className: styles.header, children: reactNode || label }), groupOptions.map(optionKey => {
                                                     const value = options[optionKey];
                                                     const textValue = childrenToText(value);
-                                                    return (jsxs(ListBoxItem, { "aria-label": textValue, className: styles.item, id: optionKey, textValue: textValue, children: [selectedKey === optionKey && (jsx("span", { className: styles.icon, slot: "description", children: jsx(Icon, { className: styles.check, name: "Checkmark" }) })), jsx("span", { className: styles.label, slot: "label", children: value })] }, optionKey));
+                                                    return (jsxs(ListBoxItem, { "aria-label": textValue, className: styles.item, id: optionKey, textValue: textValue, children: [currentSelectedKey === optionKey && (jsx("span", { className: styles.icon, slot: "description", children: jsx(Icon, { className: styles.check, name: "Checkmark" }) })), jsx("span", { className: styles.label, slot: "label", children: value })] }, optionKey));
                                                 })] }, groupKey)));
                                     }), optionGroups && grouplessOptions.length > 0 && (jsx(ListBoxSection, { className: styles.section, children: grouplessOptions.map(optionKey => {
                                         const value = options[optionKey];
                                         const textValue = childrenToText(value);
-                                        return (jsxs(ListBoxItem, { "aria-label": textValue, className: styles.item, id: optionKey, textValue: textValue, children: [selectedKey === optionKey && (jsx("span", { className: styles.icon, slot: "description", children: jsx(Icon, { className: styles.check, name: "Checkmark" }) })), jsx("span", { className: styles.label, slot: "label", children: value })] }, optionKey));
+                                        return (jsxs(ListBoxItem, { "aria-label": textValue, className: styles.item, id: optionKey, textValue: textValue, children: [currentSelectedKey === optionKey && (jsx("span", { className: styles.icon, slot: "description", children: jsx(Icon, { className: styles.check, name: "Checkmark" }) })), jsx("span", { className: styles.label, slot: "label", children: value })] }, optionKey));
                                     }) })), !optionGroups &&
                                     Object.entries(options).map(([optionKey, value]) => {
                                         const textValue = childrenToText(value);
-                                        return (jsxs(ListBoxItem, { "aria-label": textValue, className: styles.item, id: optionKey, textValue: textValue, children: [selectedKey === optionKey && (jsx("span", { className: styles.icon, slot: "description", children: jsx(Icon, { className: styles.check, name: "Checkmark" }) })), jsx("span", { className: styles.label, slot: "label", children: value })] }, optionKey));
+                                        return (jsxs(ListBoxItem, { "aria-label": textValue, className: styles.item, id: optionKey, textValue: textValue, children: [currentSelectedKey === optionKey && (jsx("span", { className: styles.icon, slot: "description", children: jsx(Icon, { className: styles.check, name: "Checkmark" }) })), jsx("span", { className: styles.label, slot: "label", children: value })] }, optionKey));
                                     })] }) })] }) }) }));
 }
 

package/dist/lists/menu-list/menu-list-item.js

@@ -11,7 +11,7 @@ import styles from './menu-list.module.css.js';
 function MenuListItem({ 'aria-controls': ariaControls, badge, children, className, 'data-test-selector': dataTestSelector, hasChildren, href, image, isSelected, onClick, openInNewTab, ...rest }) {
     const t = useFormattedMessage();
     useMenuListItem({ canCollapse: Boolean(badge) });
-    return (jsxs("li", { "aria-owns": ariaControls, className: clsx(styles['menu-list-item'], isSelected && styles['selected'], hasChildren && styles['has-children'], className), "data-test-selector": dataTestSelector, ...rest, children: [image && (jsx("span", { className: styles['image'], role: "presentation", children: jsx(Image, { fit: "contain", image: image, title: "" }) })), badge && jsx("span", { className: styles['badge'], children: badge }), jsx(Link, { "aria-controls": ariaControls, "aria-expanded": ariaControls && isSelected, "aria-haspopup": hasChildren ? 'true' : undefined, className: styles['label'], href: href || undefined, onClick: onClick, role: hasChildren ? 'menuitem' : undefined, target: openInNewTab ? '_blank' : undefined, children: jsx("span", { children: children }) }), hasChildren && (jsx(Icon, { className: styles['icon'], label: t('Submenu'), name: "ArrowRight", size: "xxs" }))] }));
+    return (jsxs("li", { "aria-owns": ariaControls, className: clsx(styles['menu-list-item'], isSelected && styles['selected'], hasChildren && styles['has-children'], className), "data-test-selector": dataTestSelector, ...rest, children: [image && (jsx("span", { className: styles['image'], role: "presentation", children: jsx(Image, { fit: "contain", image: image, title: "" }) })), badge && jsx("span", { className: styles['badge'], children: badge }), jsx(Link, { ignoreLocalePrefix: true, "aria-controls": ariaControls, "aria-expanded": ariaControls && isSelected, "aria-haspopup": hasChildren ? 'true' : undefined, className: styles['label'], href: href || undefined, onClick: onClick, role: hasChildren ? 'menuitem' : undefined, target: openInNewTab ? '_blank' : undefined, children: jsx("span", { children: children }) }), hasChildren && (jsx(Icon, { className: styles['icon'], label: t('Submenu'), name: "ArrowRight", size: "xxs" }))] }));
 }
 
 export { MenuListItem };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "260.0.9",
+  "version": "260.1.0",
   "type": "module",
   "license": "MIT",
   "engines": {