@sonic-equipment/ui 260.0.8 → 260.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/country-language-selection-list/connected-country-language-selection-list.js +0 -1
- package/dist/country-language-selection-list/country-language-selection-list.js +1 -1
- package/dist/country-language-selector/connected-country-language-selector.js +2 -1
- package/dist/forms/fields/select-field/select-field.js +9 -11
- package/dist/lists/menu-list/menu-list-item.js +1 -1
- package/package.json +1 -1
|
@@ -8,7 +8,7 @@ function CountryLanguageSelectionSublist({ handleClick, items, }) {
|
|
|
8
8
|
const t = useFormattedMessage();
|
|
9
9
|
return (jsx("ul", { className: styles.list, children: items.map(({ country, key, language, path }) => {
|
|
10
10
|
const label = t(`clselector.country.${country}.${language}`);
|
|
11
|
-
return (jsx("li", { children: jsx(Link, { color: "secondary", "data-country": country, "data-language": language, "data-test-selector": "clselector-option", href: path, hrefLang: language, onClick: () => handleClick(key), children: jsx("span", { lang: language, children: label }) }) }, key));
|
|
11
|
+
return (jsx("li", { children: jsx(Link, { ignoreLocalePrefix: true, color: "secondary", "data-country": country, "data-language": language, "data-test-selector": "clselector-option", href: path, hrefLang: language, onClick: () => handleClick(key), children: jsx("span", { lang: language, children: label }) }) }, key));
|
|
12
12
|
}) }));
|
|
13
13
|
}
|
|
14
14
|
function CountryLanguageSelectionList({ itemGroups, items, onSelect, }) {
|
|
@@ -82,7 +82,8 @@ function ConnectedCountryLanguageSelector({ className, countries: _countries, is
|
|
|
82
82
|
path = `/${optionKey}`;
|
|
83
83
|
}
|
|
84
84
|
menuOptions[optionKey] =
|
|
85
|
-
environment === 'next-production'
|
|
85
|
+
environment === 'next-production' ||
|
|
86
|
+
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 })] }));
|
|
86
87
|
optionData.push({
|
|
87
88
|
country: countryCode,
|
|
88
89
|
key: optionKey,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
3
|
-
import { useState
|
|
3
|
+
import { useState } from 'react';
|
|
4
4
|
import { Select, Button, SelectValue, Popover, ListBox, Header, ListBoxSection, ListBoxItem } from 'react-aria-components';
|
|
5
5
|
import clsx from 'clsx';
|
|
6
6
|
import { Icon } from '../../../icon/icon.js';
|
|
@@ -12,15 +12,13 @@ import { Label } from '../../elements/label/label.js';
|
|
|
12
12
|
import { FormFieldLayout } from '../../layout/form/form-field-layout.js';
|
|
13
13
|
import styles from './select-field.module.css.js';
|
|
14
14
|
|
|
15
|
-
/* eslint-disable @eslint-react/hooks-extra/no-direct-set-state-in-use-effect */
|
|
16
15
|
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', }) {
|
|
17
16
|
const [selectedKey, setSelectedKey] = useState(defaultSelectedOption);
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
setSelectedKey(selectedOption);
|
|
21
|
-
}, [selectedOption]);
|
|
17
|
+
const isControlled = selectedOption !== undefined;
|
|
18
|
+
const currentSelectedKey = isControlled ? selectedOption : selectedKey;
|
|
22
19
|
const handleChange = (key) => {
|
|
23
|
-
|
|
20
|
+
if (!isControlled)
|
|
21
|
+
setSelectedKey(key);
|
|
24
22
|
onChange?.(key);
|
|
25
23
|
};
|
|
26
24
|
const grouplessOptions = Object.keys(options).filter(key => {
|
|
@@ -32,21 +30,21 @@ function SelectField({ className, 'data-test-selector': dataTestSelector, defaul
|
|
|
32
30
|
[styles['loading']]: isLoading,
|
|
33
31
|
}, className), "data-test-selector": dataTestSelector, defaultSelectedKey: defaultSelectedOption === undefined
|
|
34
32
|
? undefined
|
|
35
|
-
: 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 &&
|
|
33
|
+
: 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 &&
|
|
36
34
|
optionGroups.map(({ key: groupKey, options: groupOptions, reactNode }) => {
|
|
37
35
|
return (groupOptions.some(k => k in options) && (jsxs(ListBoxSection, { className: styles.section, children: [jsx(Header, { className: styles.header, children: reactNode || label }), groupOptions.map(optionKey => {
|
|
38
36
|
const value = options[optionKey];
|
|
39
37
|
const textValue = childrenToText(value);
|
|
40
|
-
return (jsxs(ListBoxItem, { "aria-label": textValue, className: styles.item, id: optionKey, textValue: textValue, children: [
|
|
38
|
+
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));
|
|
41
39
|
})] }, groupKey)));
|
|
42
40
|
}), optionGroups && grouplessOptions.length > 0 && (jsx(ListBoxSection, { className: styles.section, children: grouplessOptions.map(optionKey => {
|
|
43
41
|
const value = options[optionKey];
|
|
44
42
|
const textValue = childrenToText(value);
|
|
45
|
-
return (jsxs(ListBoxItem, { "aria-label": textValue, className: styles.item, id: optionKey, textValue: textValue, children: [
|
|
43
|
+
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));
|
|
46
44
|
}) })), !optionGroups &&
|
|
47
45
|
Object.entries(options).map(([optionKey, value]) => {
|
|
48
46
|
const textValue = childrenToText(value);
|
|
49
|
-
return (jsxs(ListBoxItem, { "aria-label": textValue, className: styles.item, id: optionKey, textValue: textValue, children: [
|
|
47
|
+
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));
|
|
50
48
|
})] }) })] }) }) }));
|
|
51
49
|
}
|
|
52
50
|
|
|
@@ -11,7 +11,7 @@ import styles from './menu-list.module.css.js';
|
|
|
11
11
|
function MenuListItem({ 'aria-controls': ariaControls, badge, children, className, 'data-test-selector': dataTestSelector, hasChildren, href, image, isSelected, onClick, openInNewTab, ...rest }) {
|
|
12
12
|
const t = useFormattedMessage();
|
|
13
13
|
useMenuListItem({ canCollapse: Boolean(badge) });
|
|
14
|
-
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" }))] }));
|
|
14
|
+
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" }))] }));
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
export { MenuListItem };
|