@sonic-equipment/ui 209.0.0 → 210.0.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.
@@ -29,7 +29,7 @@ function AccordionItem({ _pseudo = 'none', allowCollapse = true, allowToggle = t
29
29
  }), disabled: isDisabled, id: id, onClick: () => {
30
30
  if (allowToggle && allowCollapse)
31
31
  toggle();
32
- }, tabIndex: allowToggle ? 0 : -1, type: "button", children: [title, jsx("span", { className: styles.icon, children: size === 'lg' ? (jsx(GlyphsChevronsBoldDownIcon, {})) : (jsx(GlyphsChevronsSlimDownIcon, {})) })] }) }), jsx("div", { "aria-hidden": !isOpen, "aria-labelledby": id, className: styles.panel, id: panelId, inert: isOpen ? undefined : '', role: "region", children: children })] }));
32
+ }, tabIndex: allowToggle ? 0 : -1, type: "button", children: [title, jsx("span", { className: styles.icon, children: size === 'lg' ? (jsx(GlyphsChevronsBoldDownIcon, {})) : (jsx(GlyphsChevronsSlimDownIcon, {})) })] }) }), jsx("div", { "aria-hidden": !isOpen, "aria-labelledby": id, className: styles.panel, id: panelId, inert: isOpen ? undefined : 'true', role: "region", children: children })] }));
33
33
  }
34
34
 
35
35
  export { AccordionItem };
@@ -23,7 +23,7 @@ function ShowAll({ children, hasTransparency = true, initialHeight = 0, initialI
23
23
  [styles['is-open']]: isReallyOpen,
24
24
  }), style: contentFits ? undefined : { '--initial-height': `${initialHeight}px` }, children: [jsx("div", { className: styles.panel, children: jsx("div", { className: clsx(styles.content, {
25
25
  [styles['has-transparency']]: !contentFits && hasTransparency,
26
- }), children: jsx("div", { ref: ref, "aria-hidden": !isReallyOpen, inert: isReallyOpen ? undefined : '', children: children }) }) }), !contentFits && (jsxs(Link, { className: styles.button, color: "secondary", onClick: () => {
26
+ }), children: jsx("div", { ref: ref, "aria-hidden": !isReallyOpen, inert: isReallyOpen ? undefined : 'true', children: children }) }) }), !contentFits && (jsxs(Link, { className: styles.button, color: "secondary", onClick: () => {
27
27
  if (isControlled)
28
28
  return onToggle(!isControlled);
29
29
  toggle();
@@ -3,6 +3,7 @@ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
3
3
  import { useAlgoliaSearch } from '../../../algolia/use-algolia-search.js';
4
4
  import { FormattedMessage } from '../../../intl/formatted-message.js';
5
5
  import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
6
+ import { Truncated } from '../../../text/truncated/truncated.js';
6
7
  import { CategoriesGrid } from '../../categories-grid/categories-grid.js';
7
8
  import { useGlobalSearchDisclosure } from '../../global-search-provider/use-search-disclosure.js';
8
9
  import { SearchSection } from '../../search-section/search-section.js';
@@ -16,7 +17,7 @@ function NoSearchResults({ isLoading }) {
16
17
  function NotFound() {
17
18
  const { state } = useAlgoliaSearch();
18
19
  const t = useFormattedMessage();
19
- return (jsx(SearchSection, { title: t('Sorry, we could not find matches for'), children: jsx("div", { className: styles['no-results-text'], children: jsxs("div", { className: styles.section, children: [jsxs("p", { className: styles.query, children: ["'", state.query, "'"] }), jsxs("div", { className: styles.suggestions, children: [jsx("p", { children: jsx(FormattedMessage, { id: "You could try" }) }), jsxs("ul", { className: styles.list, children: [jsx("li", { children: jsx(FormattedMessage, { id: "Searching again using more general terms" }) }), jsx("li", { children: jsx(FormattedMessage, { id: "Double check your spelling" }) }), jsx("li", { children: jsx(FormattedMessage, { id: "Use fewer keywords" }) }), jsx("li", { children: jsx(FormattedMessage, { id: "Exploring our products by category" }) })] })] })] }) }) }));
20
+ return (jsx(SearchSection, { title: t('Sorry, we could not find matches for'), children: jsx("div", { className: styles['no-results-text'], children: jsxs("div", { className: styles.section, children: [jsx("blockquote", { className: styles.query, children: jsx(Truncated, { className: styles['query-text'], lines: 3, children: state.query }) }), jsxs("div", { className: styles.suggestions, children: [jsx("p", { children: jsx(FormattedMessage, { id: "You could try" }) }), jsxs("ul", { className: styles.list, children: [jsx("li", { children: jsx(FormattedMessage, { id: "Searching again using more general terms" }) }), jsx("li", { children: jsx(FormattedMessage, { id: "Double check your spelling" }) }), jsx("li", { children: jsx(FormattedMessage, { id: "Use fewer keywords" }) }), jsx("li", { children: jsx(FormattedMessage, { id: "Exploring our products by category" }) })] })] })] }) }) }));
20
21
  }
21
22
  function PopularCategoriesSection() {
22
23
  const { popularCategories: collection } = useAlgoliaSearch();
@@ -3,6 +3,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
3
3
  import { useAlgoliaSearch } from '../../../algolia/use-algolia-search.js';
4
4
  import { Link } from '../../../buttons/link/link.js';
5
5
  import { CardCarousel } from '../../../carousel/card-carousel/card-carousel.js';
6
+ import { StrokeRecentIcon } from '../../../icons/stroke/stroke-recent-icon.js';
6
7
  import { StrokeSearchIcon } from '../../../icons/stroke/stroke-search-icon.js';
7
8
  import { FormattedMessage } from '../../../intl/formatted-message.js';
8
9
  import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
@@ -30,7 +31,7 @@ function PopularSearchesSection() {
30
31
  }), children: items.slice(0, 4).map(item => (jsx(SearchListItem, { ...autocomplete.getItemProps({
31
32
  item,
32
33
  source: source,
33
- }), icon: jsx(StrokeSearchIcon, {}), text: jsx(Highlight, { attribute: "query", hit: item }) }, item.objectID))) }) }));
34
+ }), icon: jsx(StrokeSearchIcon, { role: "presentation" }), text: jsx(Highlight, { attribute: "query", hit: item }) }, item.objectID))) }) }));
34
35
  }
35
36
  function RecentSearchesSection() {
36
37
  const { autocomplete, recentSearches: collection } = useAlgoliaSearch();
@@ -42,7 +43,7 @@ function RecentSearchesSection() {
42
43
  return (jsx(SearchSection, { button: jsx(Link, { hasUnderline: true, onClick: () => items.forEach(item => source.onRemove(item.id)), children: jsx(FormattedMessage, { id: "Clear" }) }), title: t('Recent searches'), children: jsx(SearchList, { ...autocomplete.getListProps({ source }), children: items.map(item => (jsx(SearchListItem, { ...autocomplete.getItemProps({
43
44
  item,
44
45
  source: source,
45
- }), icon: jsx(StrokeSearchIcon, {}), isRemovable: true, onRemove: () => source.onRemove(item.id), text: jsx(Highlight, { attribute: "label", hit: item }) }, item.id))) }) }));
46
+ }), icon: jsx(StrokeRecentIcon, { role: "presentation" }), isRemovable: true, onRemove: () => source.onRemove(item.id), text: jsx(Highlight, { attribute: "label", hit: item }) }, item.id))) }) }));
46
47
  }
47
48
  function QuickAccessSection() {
48
49
  const { quickAccess: collection } = useAlgoliaSearch();
@@ -1,3 +1,3 @@
1
- var styles = {"section-container":"search-content-module-ZMwlB","content":"search-content-module-KIok6","left":"search-content-module-YRLIf","right":"search-content-module-qK5sg","button-container":"search-content-module-w-ORq","show-all-button":"search-content-module-bO1Q0","product-results":"search-content-module-bcFCH","quick-access-section-header":"search-content-module-HrHCE","product-results-section-header":"search-content-module-9bgxF","no-results-text":"search-content-module-H-FX2","query":"search-content-module-LbQnK","suggestions":"search-content-module-mhiBZ","list":"search-content-module-coPAt","search-section":"search-content-module-qQMqH"};
1
+ var styles = {"section-container":"search-content-module-ZMwlB","content":"search-content-module-KIok6","left":"search-content-module-YRLIf","right":"search-content-module-qK5sg","button-container":"search-content-module-w-ORq","show-all-button":"search-content-module-bO1Q0","product-results":"search-content-module-bcFCH","quick-access-section-header":"search-content-module-HrHCE","product-results-section-header":"search-content-module-9bgxF","no-results-text":"search-content-module-H-FX2","query":"search-content-module-LbQnK","query-text":"search-content-module---Nh-","suggestions":"search-content-module-mhiBZ","list":"search-content-module-coPAt","search-section":"search-content-module-qQMqH"};
2
2
 
3
3
  export { styles as default };
@@ -6,7 +6,6 @@ import { useAlgoliaSearch } from '../../../algolia/use-algolia-search.js';
6
6
  import { Button } from '../../../buttons/button/button.js';
7
7
  import { ConnectedProductCard } from '../../../cards/product-card/connected-product-card.js';
8
8
  import { CardCarousel } from '../../../carousel/card-carousel/card-carousel.js';
9
- import { StrokeRecentIcon } from '../../../icons/stroke/stroke-recent-icon.js';
10
9
  import { StrokeSearchIcon } from '../../../icons/stroke/stroke-search-icon.js';
11
10
  import { FormattedMessage } from '../../../intl/formatted-message.js';
12
11
  import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
@@ -35,14 +34,14 @@ function SuggestionsSection() {
35
34
  }), children: recentSearches.items.slice(0, 3).map(item => (jsx(SearchListItem, { ...autocomplete.getItemProps({
36
35
  item,
37
36
  source: recentSearches.source,
38
- }), icon: jsx(StrokeRecentIcon, {}), isRemovable: true, onRemove: () => {
37
+ }), icon: jsx(StrokeSearchIcon, { role: "presentation" }), isRemovable: true, onRemove: () => {
39
38
  recentSearches.source.onRemove(item.id);
40
39
  }, text: jsx(Highlight, { attribute: "label", hit: item }) }, item.id))) })), querySuggestions && (jsx(SearchList, { ...autocomplete.getListProps({
41
40
  source: querySuggestions.source,
42
41
  }), children: querySuggestions.items.slice(0, 3).map(item => (jsx(SearchListItem, { ...autocomplete.getItemProps({
43
42
  item,
44
43
  source: querySuggestions.source,
45
- }), icon: jsx(StrokeSearchIcon, {}), text: jsx(Highlight, { attribute: "query", hit: item }) }, item.objectID))) })), categories && (jsx(SearchList, { ...autocomplete.getListProps({
44
+ }), icon: jsx(StrokeSearchIcon, { role: "presentation" }), text: jsx(Highlight, { attribute: "query", hit: item }) }, item.objectID))) })), categories && (jsx(SearchList, { ...autocomplete.getListProps({
46
45
  source: categories.source,
47
46
  }), children: categories.items
48
47
  .slice(0, 3)
@@ -50,7 +49,7 @@ function SuggestionsSection() {
50
49
  .map(item => (jsx(SearchListItem, { ...autocomplete.getItemProps({
51
50
  item,
52
51
  source: categories.source,
53
- }), icon: jsx(StrokeSearchIcon, {}), text: jsxs("span", { children: [jsx("span", { children: item.listCategories.at(-1) }), jsx("span", { children: item.listCategories.slice(0, -1).join(' > ') })] }) }, item.objectID))) }))] }));
52
+ }), icon: jsx(StrokeSearchIcon, { role: "presentation" }), text: jsxs("span", { children: [jsx("span", { children: item.listCategories.at(-1) }), jsx("span", { children: item.listCategories.slice(0, -1).join(' > ') })] }) }, item.objectID))) }))] }));
54
53
  }
55
54
  function ProductHitCard({ autocomplete, hit, index, source, }) {
56
55
  const { close } = useGlobalSearchDisclosure();
@@ -1,10 +1,11 @@
1
1
  import { ReactNode } from 'react';
2
2
  interface SearchListItemProps {
3
3
  icon?: ReactNode;
4
+ id?: string;
4
5
  isRemovable?: boolean;
5
- onClick?: React.MouseEventHandler<HTMLDivElement>;
6
+ onClick?: (event: React.MouseEvent<Element, MouseEvent>) => void;
6
7
  onRemove?: VoidFunction;
7
8
  text: ReactNode;
8
9
  }
9
- export declare function SearchListItem({ icon, isRemovable, onClick, onRemove, text, }: SearchListItemProps): import("react/jsx-runtime").JSX.Element;
10
+ export declare function SearchListItem({ icon, id, isRemovable, onClick, onRemove, text, }: SearchListItemProps): import("react/jsx-runtime").JSX.Element;
10
11
  export {};
@@ -1,25 +1,15 @@
1
1
  "use client";
2
2
  import { jsxs, jsx } from 'react/jsx-runtime';
3
3
  import { IconButton } from '../../buttons/icon-button/icon-button.js';
4
+ import { Link } from '../../buttons/link/link.js';
4
5
  import { StrokeCloseboxIcon } from '../../icons/stroke/stroke-closebox-icon.js';
6
+ import { useFormattedMessage } from '../../intl/use-formatted-message.js';
7
+ import { Truncated } from '../../text/truncated/truncated.js';
5
8
  import styles from './search-list-item.module.css.js';
6
9
 
7
- function SearchListItem({ icon, isRemovable = false, onClick, onRemove, text, }) {
8
- return (jsxs("li", { className: styles['search-list-item'], children: [jsx("div", { onClick: onClick, onKeyUp: e => {
9
- if (e.key === 'Enter' || e.key === ' ') {
10
- onClick?.({
11
- altKey: e.altKey,
12
- bubbles: true,
13
- button: 0,
14
- cancelable: true,
15
- clientX: 0,
16
- clientY: 0,
17
- ctrlKey: e.ctrlKey,
18
- metaKey: e.metaKey,
19
- shiftKey: e.shiftKey,
20
- });
21
- }
22
- }, role: "button", tabIndex: 0, children: jsxs("div", { className: styles.content, children: [icon && icon, text && jsx("span", { className: styles.text, children: text })] }) }), isRemovable && (jsx(IconButton, { className: styles['clear-filter-button'], color: "secondary", onClick: onRemove, children: jsx(StrokeCloseboxIcon, {}) }))] }));
10
+ function SearchListItem({ icon, id, isRemovable = false, onClick, onRemove, text, }) {
11
+ const t = useFormattedMessage();
12
+ return (jsxs("li", { className: styles['search-list-item'], children: [jsxs(Link, { className: styles['content'], id: id, onClick: onClick, children: [icon && icon, text && jsx(Truncated, { className: styles.text, children: text })] }), isRemovable && (jsx(IconButton, { "aria-describedby": id, className: styles['clear-filter'], color: "secondary", onClick: onRemove, children: jsx(StrokeCloseboxIcon, { "aria-label": t('Remove') }) }))] }));
23
13
  }
24
14
 
25
15
  export { SearchListItem };
@@ -1,3 +1,3 @@
1
- var styles = {"search-list-item":"search-list-item-module-WXp77","clear-filter-button":"search-list-item-module-YJvJm","content":"search-list-item-module-CPrhz","text":"search-list-item-module--5uqN"};
1
+ var styles = {"search-list-item":"search-list-item-module-WXp77","content":"search-list-item-module-CPrhz","text":"search-list-item-module--5uqN","clear-filter":"search-list-item-module-wwVwX"};
2
2
 
3
3
  export { styles as default };
@@ -1 +1 @@
1
- export type TranslationId = "'{0}' in all products" | "Try 'Search' and try to find the product you're looking for" | "Unfortnately, We found no articles for your search '{0}'" | ' to your account to manage your lists.' | 'Access denied.' | 'Account' | 'active' | 'Add address' | 'Add order notes' | 'Add to cart' | 'Add to list' | 'Address 1' | 'Address 2' | 'Address 3' | 'Address 4' | 'Address not found' | 'Address' | 'Address book' | 'addressProperty.Default' | 'addressProperty.Company Name' | 'addressProperty.Address Line' | 'addressProperty.Postal Code' | 'addressProperty.City' | 'addressProperty.Country' | 'All payment methods are unavailable at this time. Please contact customer support.' | 'Amount: {0}' | 'An error occurred while changing the customer.' | 'An error occurred while fetching customers. Please try again later.' | 'An error occurred while processing your payment. Please try again.' | 'An unexpected error occured' | 'An unexpected error occured. Please try again.' | 'Are you looking for information about our service? Please visit our customer support page' | 'Are you sure you want to remove all items from your cart?' | 'Are you sure you want to remove this item from your cart?' | 'article' | 'articles' | 'As soon as possible' | 'ASC' | 'Attention' | 'Availability unknown, please contact customer support for lead time or alternatives.' | 'Back' | 'Billing address' | 'Billing and shipping address' | 'Billing and shipping information' | 'Billing' | 'Cancel' | 'Cart' | 'Change customer' | 'Change password' | 'Changing your address is currently not possible. Please contact customer support to change your address.' | 'Checkout order' | 'Chosen filters' | 'City' | 'Clear filters' | 'Create' | 'Clear' | 'Click the button below to continue shopping.' | 'Client cases' | 'Close' | 'CoC number' | 'Company name' | 'Conceal value' | 'Confirm password' | 'Continue shopping' | 'Continue to sign in' | 'Continue' | 'Copyright © Sonic Equipment B.V.' | 'Cost overview' | 'Country' | 'create account' | 'Create new list' | 'Currency Change' | 'Current page' | 'Current Password is invalid' | 'Date' | 'Decrease' | 'Default shipping address' | 'Delivery date' | 'Delivery expected on {0}' | 'DESC' | 'Double check your spelling' | 'Downloads' | 'Easily add your favorite products' | 'Edit billing address' | 'Edit shipping address' | 'Edit Sonic account' | 'Edit' | 'Email' | 'Enter your email address and we will send you an email that will allow you to recover your password.' | 'Excl. VAT' | 'Explore by categories' | 'Exploring our products by category' | 'facet.categories' | 'facet.height' | 'facet.weight' | 'Favorites' | 'Features' | 'Filter order status' | 'Finalize order' | 'Finalize payment' | 'First name' | 'Forgot password?' | 'Fulfillment method' | 'General' | 'Hide filters' | 'Home' | 'If an account matches the email address you entered, instructions on how to recover the password will be sent to that email address shortly. If you do not receive this email, please contact Customer Support.' | 'If you want to proceed, click the continue button. If you want to change your country, close this message and select a different country.' | 'Incl. VAT' | 'Includes' | 'Increase' | 'Industry' | 'industry.AG' | 'industry.AU' | 'industry.AV' | 'industry.BC' | 'industry.MA' | 'industry.MC' | 'industry.OT' | 'industry.PP' | 'industry.TR' | 'Information' | 'Language' | 'Last name' | 'List name already exists' | 'Log out' | 'Main menu' | 'Make this the default customer' | 'Make this the default ship to address' | 'More than {0} articles' | 'My Sonic' | 'Name' | 'Navigate to...' | 'Navigation' | 'New list name' | 'New Password is required and must be different than Current Password' | 'New password' | 'New user?' | 'Next' | 'No orders found.' | 'No results found. Please refine your search.' | 'Number of favorites' | 'Number of products' | 'of' | 'OK' | 'Or continue as guest' | 'Order confirmation' | 'Order date' | 'Order number' | 'Order#' | 'Order' | 'Orders' | 'orderProperty.Number' | 'orderProperty.Date' | 'orderProperty.Price' | 'orderProperty.Status' | 'orderProperty.Shipping Address' | 'orderProperty.PO Number' | 'orderStatus.Any' | 'orderStatus.Cancelled' | 'orderStatus.Fulfilled' | 'orderStatus.Partially fulfilled' | 'orderStatus.Processing' | 'orderStatus.Saved' | 'orderStatus.Waiting for customer service' | 'orderStatus.ForwardToReseller' | 'Our products' | 'Overview' | 'Password changed. Please sign in again.' | 'Password does not meet requirements' | 'Password' | 'Passwords do not match' | 'Pay by invoice' | 'Payment method' | 'Payment' | 'pc' | 'Phone' | 'Pick up' | 'Pickup address' | 'Please enter a valid email address' | 'Please enter a valid phone number' | 'please go back to your cart.' | 'Please Sign In' | 'PO Number' | 'Popular searches' | 'Postal Code' | 'Previous' | 'Print' | 'Private account' | 'Processing' | 'Product Features' | 'Product' | 'Products' | 'Quantity' | 'Quick access' | 'Recent searches' | 'Recently viewed' | 'Recover your password' | 'Remember me' | 'Remove all' | 'Reorder' | 'Requested delivery date' | 'Results' | 'Reveal value' | 'Review and payment' | 'Save order' | 'Save' | 'Saved' | 'Saved cart for later.' | 'Saving' | 'Search for a customer' | 'Search' | 'Searching again using more general terms' | 'Search orders' | 'See all results' | 'Select a country' | 'Select a desired delivery date' | 'Select a language' | 'Select a list' | 'Select an industry' | 'Select other customer' | 'Selected customer' | 'Selecting As Soon As Possible will enable us to send the products to you as they become available.' | 'Selecting this country will result in your cart to be converted to the currency {0}' | 'Share your favorite list with others' | 'Ship' | 'Shipping address' | 'Shipping and handling' | 'Shipping details' | 'Shop more efficiently and quicker with a favorites list' | 'Shopping cart' | 'Show all' | 'Show filters' | 'Show less' | 'Show' | 'Sign in or create account' | 'sign in' | 'Sign me up for newsletters and product updates' | 'Signed in' | 'Signed out' | 'Signing in…' | 'Sonic account' | 'Sonic address' | 'Sonic Equipment' | 'Sorry, there are no products found' | 'Sorry, we could not find matches for' | 'Sort by' | 'sort.newest' | 'sort.price_asc' | 'sort.price_desc' | 'sort.relevance' | 'sort.ASC' | 'sort.DESC' | 'sort.NONE' | 'Specifications' | 'Start checkout' | 'Status' | 'Submenu' | 'Submit email address' | 'Submit' | 'Submitting…' | 'Subtotal' | 'Suggestions' | 'Support' | 'tag.limited' | 'tag.new' | 'The email address you entered is already associated with an existing account. Please sign in to this account or contact Customer Support.' | 'The expected delivery is an indication based on the product availability and the shipping location.' | 'The product has been added to your cart.' | 'The product has been removed from your cart.' | 'The product has been updated in your cart.' | 'There are more customers, please refine your search if needed.' | 'There are no products in your shopping cart.' | 'There is no information to display' | 'This email is already in use' | 'Toggle navigation menu' | 'Total amount is' | 'Total' | 'Try another search' | 'Unable to add the product to your cart.' | 'Unable to empty your cart.' | 'Unable to remove the product from your cart.' | 'Unable to save cart for later.' | 'Unable to update the product in your cart.' | 'Unknown' | 'Updating address' | 'Use billing address' | 'Use fewer keywords' | 'Username' | 'Validating' | 'validation.badInput' | 'validation.customError' | 'validation.invalid' | 'validation.patternMismatch' | 'validation.rangeOverflow' | 'validation.rangeUnderflow' | 'validation.stepMismatch' | 'validation.tooLong' | 'validation.tooShort' | 'validation.typeMismatch' | 'validation.valid' | 'validation.valueMissing' | 'VAT Number' | 'VAT' | 'Welcome to Sonic Equipment. Please choose your country and language below.' | 'What are you searching for?' | 'You are not authorized to access this information.' | 'You are not authorized to perform this action' | 'You are not authorized to view customers. Please log in or contact support.' | 'You could try checking the spelling of your search query' | 'You could try exploring our products by category' | 'You could try' | 'You have reached the end of the results, but there may be more articles available. Adjust your filters or search to discover more!' | 'You must ' | 'You selected a country where we invoice in a different currency. This will result in your cart being converted to the new currency. If you would like to review your order, ' | 'Your cart has been emptied.' | 'Your email and password were not recognized.' | 'Your favorites are available on multiple devices' | 'Your new Sonic Equipment account was succesfully created. You should receive an email soon with further instructions on how to activate this account. If you do not receive this email, please contact Customer Support.' | 'Your shopping cart is still empty';
1
+ export type TranslationId = "'{0}' in all products" | "Try 'Search' and try to find the product you're looking for" | "Unfortnately, We found no articles for your search '{0}'" | ' to your account to manage your lists.' | 'Access denied.' | 'Account' | 'active' | 'Add address' | 'Add order notes' | 'Add to cart' | 'Add to list' | 'Address 1' | 'Address 2' | 'Address 3' | 'Address 4' | 'Address not found' | 'Address' | 'Address book' | 'addressProperty.Default' | 'addressProperty.Company Name' | 'addressProperty.Address Line' | 'addressProperty.Postal Code' | 'addressProperty.City' | 'addressProperty.Country' | 'All payment methods are unavailable at this time. Please contact customer support.' | 'Amount: {0}' | 'An error occurred while changing the customer.' | 'An error occurred while fetching customers. Please try again later.' | 'An error occurred while processing your payment. Please try again.' | 'An unexpected error occured' | 'An unexpected error occured. Please try again.' | 'Are you looking for information about our service? Please visit our customer support page' | 'Are you sure you want to remove all items from your cart?' | 'Are you sure you want to remove this item from your cart?' | 'article' | 'articles' | 'As soon as possible' | 'ASC' | 'Attention' | 'Availability unknown, please contact customer support for lead time or alternatives.' | 'Back' | 'Billing address' | 'Billing and shipping address' | 'Billing and shipping information' | 'Billing' | 'Cancel' | 'Cart' | 'Change customer' | 'Change password' | 'Changing your address is currently not possible. Please contact customer support to change your address.' | 'Checkout order' | 'Chosen filters' | 'City' | 'Clear filters' | 'Create' | 'Clear' | 'Click the button below to continue shopping.' | 'Client cases' | 'Close' | 'CoC number' | 'Company name' | 'Conceal value' | 'Confirm password' | 'Continue shopping' | 'Continue to sign in' | 'Continue' | 'Copyright © Sonic Equipment B.V.' | 'Cost overview' | 'Country' | 'create account' | 'Create new list' | 'Currency Change' | 'Current page' | 'Current Password is invalid' | 'Date' | 'Decrease' | 'Default shipping address' | 'Delivery date' | 'Delivery expected on {0}' | 'DESC' | 'Double check your spelling' | 'Downloads' | 'Easily add your favorite products' | 'Edit billing address' | 'Edit shipping address' | 'Edit Sonic account' | 'Edit' | 'Email' | 'Enter your email address and we will send you an email that will allow you to recover your password.' | 'Excl. VAT' | 'Explore by categories' | 'Exploring our products by category' | 'facet.categories' | 'facet.height' | 'facet.weight' | 'Favorites' | 'Features' | 'Filter order status' | 'Finalize order' | 'Finalize payment' | 'First name' | 'Forgot password?' | 'Fulfillment method' | 'General' | 'Hide filters' | 'Home' | 'If an account matches the email address you entered, instructions on how to recover the password will be sent to that email address shortly. If you do not receive this email, please contact Customer Support.' | 'If you want to proceed, click the continue button. If you want to change your country, close this message and select a different country.' | 'Incl. VAT' | 'Includes' | 'Increase' | 'Industry' | 'industry.AG' | 'industry.AU' | 'industry.AV' | 'industry.BC' | 'industry.MA' | 'industry.MC' | 'industry.OT' | 'industry.PP' | 'industry.TR' | 'Information' | 'Language' | 'Last name' | 'List name already exists' | 'Log out' | 'Main menu' | 'Make this the default customer' | 'Make this the default ship to address' | 'More than {0} articles' | 'My Sonic' | 'Name' | 'Navigate to...' | 'Navigation' | 'New list name' | 'New Password is required and must be different than Current Password' | 'New password' | 'New user?' | 'Next' | 'No orders found.' | 'No results found. Please refine your search.' | 'Number of favorites' | 'Number of products' | 'of' | 'OK' | 'Or continue as guest' | 'Order confirmation' | 'Order date' | 'Order number' | 'Order#' | 'Order' | 'Orders' | 'orderProperty.Number' | 'orderProperty.Date' | 'orderProperty.Price' | 'orderProperty.Status' | 'orderProperty.Shipping Address' | 'orderProperty.PO Number' | 'orderStatus.Any' | 'orderStatus.Cancelled' | 'orderStatus.Fulfilled' | 'orderStatus.Partially fulfilled' | 'orderStatus.Processing' | 'orderStatus.Saved' | 'orderStatus.Waiting for customer service' | 'orderStatus.ForwardToReseller' | 'Our products' | 'Overview' | 'Password changed. Please sign in again.' | 'Password does not meet requirements' | 'Password' | 'Passwords do not match' | 'Pay by invoice' | 'Payment method' | 'Payment' | 'pc' | 'Phone' | 'Pick up' | 'Pickup address' | 'Please enter a valid email address' | 'Please enter a valid phone number' | 'please go back to your cart.' | 'Please Sign In' | 'PO Number' | 'Popular searches' | 'Postal Code' | 'Previous' | 'Print' | 'Private account' | 'Processing' | 'Product Features' | 'Product' | 'Products' | 'Quantity' | 'Quick access' | 'Recent searches' | 'Recently viewed' | 'Recover your password' | 'Remember me' | 'Remove' | 'Remove all' | 'Reorder' | 'Requested delivery date' | 'Results' | 'Reveal value' | 'Review and payment' | 'Save order' | 'Save' | 'Saved' | 'Saved cart for later.' | 'Saving' | 'Search for a customer' | 'Search' | 'Searching again using more general terms' | 'Search orders' | 'See all results' | 'Select a country' | 'Select a desired delivery date' | 'Select a language' | 'Select a list' | 'Select an industry' | 'Select other customer' | 'Selected customer' | 'Selecting As Soon As Possible will enable us to send the products to you as they become available.' | 'Selecting this country will result in your cart to be converted to the currency {0}' | 'Share your favorite list with others' | 'Ship' | 'Shipping address' | 'Shipping and handling' | 'Shipping details' | 'Shop more efficiently and quicker with a favorites list' | 'Shopping cart' | 'Show all' | 'Show filters' | 'Show less' | 'Show' | 'Sign in or create account' | 'sign in' | 'Sign me up for newsletters and product updates' | 'Signed in' | 'Signed out' | 'Signing in…' | 'Sonic account' | 'Sonic address' | 'Sonic Equipment' | 'Sorry, there are no products found' | 'Sorry, we could not find matches for' | 'Sort by' | 'sort.newest' | 'sort.price_asc' | 'sort.price_desc' | 'sort.relevance' | 'sort.ASC' | 'sort.DESC' | 'sort.NONE' | 'Specifications' | 'Start checkout' | 'Status' | 'Submenu' | 'Submit email address' | 'Submit' | 'Submitting…' | 'Subtotal' | 'Suggestions' | 'Support' | 'tag.limited' | 'tag.new' | 'The email address you entered is already associated with an existing account. Please sign in to this account or contact Customer Support.' | 'The expected delivery is an indication based on the product availability and the shipping location.' | 'The product has been added to your cart.' | 'The product has been removed from your cart.' | 'The product has been updated in your cart.' | 'There are more customers, please refine your search if needed.' | 'There are no products in your shopping cart.' | 'There is no information to display' | 'This email is already in use' | 'Toggle navigation menu' | 'Total amount is' | 'Total' | 'Try another search' | 'Unable to add the product to your cart.' | 'Unable to empty your cart.' | 'Unable to remove the product from your cart.' | 'Unable to save cart for later.' | 'Unable to update the product in your cart.' | 'Unknown' | 'Updating address' | 'Use billing address' | 'Use fewer keywords' | 'Username' | 'Validating' | 'validation.badInput' | 'validation.customError' | 'validation.invalid' | 'validation.patternMismatch' | 'validation.rangeOverflow' | 'validation.rangeUnderflow' | 'validation.stepMismatch' | 'validation.tooLong' | 'validation.tooShort' | 'validation.typeMismatch' | 'validation.valid' | 'validation.valueMissing' | 'VAT Number' | 'VAT' | 'Welcome to Sonic Equipment. Please choose your country and language below.' | 'What are you searching for?' | 'You are not authorized to access this information.' | 'You are not authorized to perform this action' | 'You are not authorized to view customers. Please log in or contact support.' | 'You could try checking the spelling of your search query' | 'You could try exploring our products by category' | 'You could try' | 'You have reached the end of the results, but there may be more articles available. Adjust your filters or search to discover more!' | 'You must ' | 'You selected a country where we invoice in a different currency. This will result in your cart being converted to the new currency. If you would like to review your order, ' | 'Your cart has been emptied.' | 'Your email and password were not recognized.' | 'Your favorites are available on multiple devices' | 'Your new Sonic Equipment account was succesfully created. You should receive an email soon with further instructions on how to activate this account. If you do not receive this email, please contact Customer Support.' | 'Your shopping cart is still empty';
@@ -14,7 +14,7 @@ function Sidebar({ children, className }) {
14
14
  [styles['is-closed']]: !isOpen,
15
15
  [styles['is-docked']]: isDocked,
16
16
  [styles['is-not-docked']]: !isDocked,
17
- }, className), inert: isOpen ? undefined : '', children: [jsx(IconButton, { className: styles.close, color: "secondary", onClick: toggle, children: jsx(StrokeCloseboxIcon, {}) }), jsx("div", { className: styles['content'], children: children })] }));
17
+ }, className), inert: isOpen ? undefined : 'true', children: [jsx(IconButton, { className: styles.close, color: "secondary", onClick: toggle, children: jsx(StrokeCloseboxIcon, {}) }), jsx("div", { className: styles['content'], children: children })] }));
18
18
  }
19
19
 
20
20
  export { Sidebar };
package/dist/styles.css CHANGED
@@ -265,6 +265,11 @@
265
265
  --focus-outline-inset: calc(var(--focus-outline-size) * -1);
266
266
  --focus-outline-color: rgb(227 6 19 / 40%);
267
267
  --focus-outline: var(--focus-outline-size) solid var(--focus-outline-color);
268
+
269
+ /* space reserved in boxes for focus outline when clipped */
270
+ --focus-outline-box-space: calc(
271
+ var(--focus-outline-size) + var(--focus-outline-offset)
272
+ );
268
273
  }
269
274
  html {
270
275
  padding-right: 0 !important;
@@ -422,6 +427,8 @@ html {
422
427
 
423
428
  .accordion-module-9WvAH .accordion-module-lf9d- .accordion-module-KZjMo {
424
429
  overflow: clip;
430
+ padding: var(--focus-outline-box-space);
431
+ margin: calc(var(--focus-outline-box-space) * -1);
425
432
  transition: var(--transition-duration-short) ease-in-out;
426
433
  transition-behavior: allow-discrete;
427
434
  transition-property: visibility, block-size;
@@ -447,7 +454,6 @@ html {
447
454
 
448
455
  .accordion-module-9WvAH .accordion-module-lf9d-.accordion-module-kYmoe .accordion-module-KZjMo {
449
456
  block-size: 0;
450
- visibility: hidden;
451
457
  }
452
458
 
453
459
  /* open state */
@@ -458,7 +464,6 @@ html {
458
464
 
459
465
  .accordion-module-9WvAH .accordion-module-lf9d-.accordion-module-W0F1z .accordion-module-KZjMo {
460
466
  block-size: auto;
461
- visibility: visible;
462
467
  }
463
468
 
464
469
  .accordion-module-9WvAH .accordion-module-lf9d-:has(.accordion-module--Rwpb[disabled]):not(.accordion-module-RnNRT) {
@@ -868,8 +873,6 @@ html {
868
873
  'footer';
869
874
  grid-template-rows: 1fr auto;
870
875
  min-block-size: 100%;
871
-
872
- /* padding-inline: var(--space-16); */
873
876
  }
874
877
 
875
878
  .algolia-filter-panel-module-GfhOO,
@@ -884,10 +887,11 @@ html {
884
887
  .algolia-filter-panel-module-GfhOO .algolia-filter-panel-module--DfrD {
885
888
  position: sticky;
886
889
  display: grid;
890
+ padding: var(--space-16);
887
891
  background: var(--color-white);
888
892
  grid-area: footer;
889
893
  inset-block-end: 0;
890
- padding-block: var(--space-16);
894
+ margin-inline: calc(var(--space-16) * -1);
891
895
  }
892
896
 
893
897
  .algolia-filter-panel-module-GfhOO .algolia-filter-panel-module-LKet3 {
@@ -1278,6 +1282,8 @@ html {
1278
1282
  .show-all-module-BDp21 .show-all-module-bEdda .show-all-module-RF--F {
1279
1283
  position: relative;
1280
1284
  overflow: hidden;
1285
+ padding: var(--focus-outline-box-space);
1286
+ margin: calc(var(--focus-outline-box-space) * -1);
1281
1287
  color: currentcolor;
1282
1288
  min-block-size: var(--initial-height);
1283
1289
  }
@@ -1383,9 +1389,6 @@ html {
1383
1389
  border: 2px solid var(--color-brand-medium-gray);
1384
1390
  border-radius: var(--border-radius-2);
1385
1391
  color: var(--checkmark-color);
1386
- margin-inline-start: calc(
1387
- var(--focus-outline-size) + var(--focus-outline-offset)
1388
- );
1389
1392
  transition:
1390
1393
  border var(--transition-duration-short),
1391
1394
  background var(--transition-duration-short);
@@ -5734,49 +5737,62 @@ button.swiper-pagination-bullet {
5734
5737
 
5735
5738
  .search-list-module-vRuMO {
5736
5739
  all: unset;
5737
- display: grid;
5738
5740
  }
5739
5741
 
5740
- .search-list-item-module-WXp77 {
5741
- display: flex;
5742
- height: 32px;
5743
- justify-content: space-between;
5744
- cursor: pointer;
5745
- line-height: 32px;
5742
+ .truncated-module-bwo1A {
5743
+ display: -webkit-box;
5744
+ text-wrap: pretty;
5746
5745
  }
5747
5746
 
5748
- .search-list-item-module-WXp77 .search-list-item-module-YJvJm {
5749
- height: 32px;
5750
- min-height: 32px;
5751
- max-height: 32px;
5752
- margin-right: -16px;
5747
+ .truncated-module-bwo1A.truncated-module-JHMUL {
5748
+ overflow: hidden;
5749
+ -webkit-box-orient: vertical;
5750
+ -webkit-line-clamp: var(--lines, 1);
5751
+ line-clamp: var(--lines, 1);
5752
+ text-overflow: ellipsis;
5753
5753
  }
5754
5754
 
5755
- .search-list-item-module-WXp77:hover {
5756
- color: var(--color-brand-red);
5757
- }
5755
+ .search-list-item-module-WXp77 {
5756
+ --gap: var(--space-4);
5757
+ --icon-size: 20px;
5758
+ --clear-button-size: 32px;
5759
+
5760
+ display: grid;
5761
+ align-items: center;
5762
+ gap: var(--gap);
5763
+ grid-template:
5764
+ var(--clear-button-size) / var(--icon-size)
5765
+ minmax(0, min-content) auto var(--clear-button-size);
5766
+ grid-template-areas: '. . . clear';
5767
+ }
5758
5768
 
5759
5769
  .search-list-item-module-WXp77 .search-list-item-module-CPrhz {
5760
- display: flex;
5770
+ display: grid;
5761
5771
  align-items: center;
5762
- gap: 5px;
5772
+ grid-column: 1 / 3;
5773
+ grid-template-areas: 'icon text';
5774
+ grid-template-columns: subgrid;
5775
+ text-align: start;
5763
5776
  }
5764
5777
 
5778
+ .search-list-item-module-WXp77 .search-list-item-module-CPrhz:hover {
5779
+ color: var(--color-brand-red);
5780
+ }
5781
+
5765
5782
  .search-list-item-module-WXp77 .search-list-item-module-CPrhz svg {
5766
- display: block;
5767
- width: 20px;
5768
- height: 20px;
5769
- flex-shrink: 0;
5783
+ block-size: var(--icon-size);
5770
5784
  color: currentcolor;
5785
+ grid-area: icon;
5786
+ inline-size: var(--icon-size);
5771
5787
  }
5772
5788
 
5773
5789
  .search-list-item-module-WXp77 .search-list-item-module-CPrhz .search-list-item-module--5uqN {
5774
- display: -webkit-box;
5775
5790
  overflow: hidden;
5776
- -webkit-box-orient: vertical;
5777
- -webkit-line-clamp: 1;
5778
- line-clamp: 1;
5779
- overflow-wrap: break-word;
5791
+ grid-area: text;
5792
+ justify-self: start;
5793
+ max-inline-size: 100%;
5794
+ text-overflow: ellipsis;
5795
+ white-space: nowrap;
5780
5796
  }
5781
5797
 
5782
5798
  .search-list-item-module-WXp77 .search-list-item-module-CPrhz .search-list-item-module--5uqN mark {
@@ -5785,11 +5801,20 @@ button.swiper-pagination-bullet {
5785
5801
  font-weight: var(--font-weight-bold);
5786
5802
  }
5787
5803
 
5804
+ .search-list-item-module-WXp77 .search-list-item-module-wwVwX {
5805
+ block-size: var(--clear-button-size);
5806
+ grid-area: clear;
5807
+ inline-size: var(--clear-button-size);
5808
+ min-block-size: unset;
5809
+ min-inline-size: unset;
5810
+ }
5811
+
5788
5812
  .search-section-module-qaTiw {
5789
5813
  --padding-inline: var(--space-16);
5790
5814
  --padding-block: var(--space-20);
5791
5815
 
5792
5816
  display: grid;
5817
+ gap: var(--space-12);
5793
5818
  grid-template-rows: auto 1fr;
5794
5819
  padding-block: var(--padding-block);
5795
5820
  padding-inline: var(--padding-inline);
@@ -5799,7 +5824,6 @@ button.swiper-pagination-bullet {
5799
5824
  display: flex;
5800
5825
  align-items: center;
5801
5826
  justify-content: space-between;
5802
- margin-bottom: var(--space-12);
5803
5827
  }
5804
5828
 
5805
5829
  .search-section-module-qaTiw .search-section-module-E--U2 .search-section-module-AHlDR {
@@ -5875,13 +5899,21 @@ button.swiper-pagination-bullet {
5875
5899
  }
5876
5900
 
5877
5901
  .search-content-module-H-FX2 .search-content-module-LbQnK {
5878
- margin-top: var(--space-12);
5879
- margin-bottom: var(--space-24);
5902
+ padding: 0;
5903
+ margin: var(--space-4) 0 var(--space-20);
5880
5904
  font-size: var(--font-size-24);
5881
5905
  font-weight: var(--font-weight-medium);
5882
- overflow-wrap: break-word;
5906
+ line-height: var(--line-height-28);
5883
5907
  }
5884
5908
 
5909
+ .search-content-module-H-FX2 .search-content-module---Nh-::before {
5910
+ content: open-quote;
5911
+ }
5912
+
5913
+ .search-content-module-H-FX2 .search-content-module---Nh-::after {
5914
+ content: close-quote;
5915
+ }
5916
+
5885
5917
  .search-content-module-H-FX2 .search-content-module-mhiBZ {
5886
5918
  line-height: 1.5;
5887
5919
  }
@@ -8537,19 +8569,6 @@ button.swiper-pagination-bullet {
8537
8569
  margin: calc(var(--cell-padding) * -1);
8538
8570
  }
8539
8571
 
8540
- .truncated-module-bwo1A {
8541
- display: -webkit-box;
8542
- text-wrap: pretty;
8543
- }
8544
-
8545
- .truncated-module-bwo1A.truncated-module-JHMUL {
8546
- overflow: hidden;
8547
- -webkit-box-orient: vertical;
8548
- -webkit-line-clamp: var(--lines, 1);
8549
- line-clamp: var(--lines, 1);
8550
- text-overflow: ellipsis;
8551
- }
8552
-
8553
8572
  .data-table-module-7CcZR {
8554
8573
  display: flex;
8555
8574
  flex-direction: column;
@@ -8961,6 +8980,8 @@ button.swiper-pagination-bullet {
8961
8980
  overflow: hidden auto;
8962
8981
  grid-area: content;
8963
8982
  padding-inline: var(--space-16);
8983
+ scroll-padding-block-end: 100px;
8984
+ scrollbar-gutter: stable;
8964
8985
  scrollbar-width: thin;
8965
8986
  }
8966
8987
  /* not docked */
@@ -8968,7 +8989,8 @@ button.swiper-pagination-bullet {
8968
8989
  inline-size: var(--docked-size);
8969
8990
  }
8970
8991
  .sidebar-module-fSa9Q.sidebar-module-Scw7D.sidebar-module-dGDrr {
8971
- display: none;
8992
+ content-visibility: hidden;
8993
+ inline-size: 0;
8972
8994
  }
8973
8995
  .sidebar-module-fSa9Q.sidebar-module-Scw7D .sidebar-module-2puGC {
8974
8996
  display: none;
@@ -1,6 +1,7 @@
1
1
  export interface TruncatedProps {
2
2
  active?: boolean;
3
3
  children: React.ReactNode;
4
+ className?: string;
4
5
  lines?: number;
5
6
  }
6
- export declare function Truncated({ active, children, lines, }: TruncatedProps): import("react/jsx-runtime").JSX.Element;
7
+ export declare function Truncated({ active, children, className, lines, }: TruncatedProps): import("react/jsx-runtime").JSX.Element;
@@ -4,9 +4,9 @@ import clsx from 'clsx';
4
4
  import { childrenToText } from '../../shared/utils/children-to-text.js';
5
5
  import styles from './truncated.module.css.js';
6
6
 
7
- function Truncated({ active = true, children, lines = 1, }) {
7
+ function Truncated({ active = true, children, className, lines = 1, }) {
8
8
  const title = childrenToText(children);
9
- return (jsx("div", { className: clsx(styles['truncated'], active && styles['active']), style: { '--lines': lines }, title: title, children: children }));
9
+ return (jsx("div", { className: clsx(styles['truncated'], active && styles['active'], className), style: { '--lines': lines }, title: title, children: children }));
10
10
  }
11
11
 
12
12
  export { Truncated };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sonic-equipment/ui",
3
- "version": "209.0.0",
3
+ "version": "210.0.0",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "engines": {