@asante-org/leybold-design-system 1.3.2 → 1.3.5
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/index.js +92 -134
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -1,11 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
var proSolidSvgIcons = require('@fortawesome/pro-solid-svg-icons');
|
|
8
|
-
var edwardsvacuumDesignSystem = require('@asante-org/edwardsvacuum-design-system');
|
|
1
|
+
import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
|
|
2
|
+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
3
|
+
import { faArrowLeft, faArrowLeftLong, faArrowRight, faArrowRightLong, faChevronRight, faChevronLeft, faArrowUpRightFromSquare, faGlobe, faXmark as faXmark$1 } from '@fortawesome/free-solid-svg-icons';
|
|
4
|
+
import { faInstagram, faYoutube, faLinkedinIn, faXTwitter, faFacebookF } from '@fortawesome/free-brands-svg-icons';
|
|
5
|
+
import { faChevronRight as faChevronRight$1, faArrowUpRightFromSquare as faArrowUpRightFromSquare$1 } from '@fortawesome/pro-solid-svg-icons';
|
|
6
|
+
import { ProductDetailsCard, AlgoliaDynamicSearchRaw, QrForm } from '@asante-org/edwardsvacuum-design-system';
|
|
9
7
|
|
|
10
8
|
function _extends() {
|
|
11
9
|
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
@@ -112,20 +110,20 @@ var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
|
|
|
112
110
|
const getIcon = icon => {
|
|
113
111
|
switch (icon) {
|
|
114
112
|
case "arrow-right":
|
|
115
|
-
return /*#__PURE__*/React.createElement(
|
|
116
|
-
icon:
|
|
113
|
+
return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
114
|
+
icon: faArrowRight
|
|
117
115
|
});
|
|
118
116
|
case "external":
|
|
119
|
-
return /*#__PURE__*/React.createElement(
|
|
120
|
-
icon:
|
|
117
|
+
return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
118
|
+
icon: faArrowUpRightFromSquare
|
|
121
119
|
});
|
|
122
120
|
case "chevron-left":
|
|
123
|
-
return /*#__PURE__*/React.createElement(
|
|
124
|
-
icon:
|
|
121
|
+
return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
122
|
+
icon: faChevronLeft
|
|
125
123
|
});
|
|
126
124
|
case "chevron-right":
|
|
127
|
-
return /*#__PURE__*/React.createElement(
|
|
128
|
-
icon:
|
|
125
|
+
return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
126
|
+
icon: faChevronRight
|
|
129
127
|
});
|
|
130
128
|
default:
|
|
131
129
|
return null;
|
|
@@ -209,19 +207,19 @@ const Button = ({
|
|
|
209
207
|
"data-force-state": props["data-force-state"]
|
|
210
208
|
}, props), !isIconOnly && children, isCarouselLeft && /*#__PURE__*/React.createElement("span", {
|
|
211
209
|
className: iconClasses
|
|
212
|
-
}, /*#__PURE__*/React.createElement(
|
|
213
|
-
icon:
|
|
210
|
+
}, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
211
|
+
icon: faArrowLeft,
|
|
214
212
|
className: styles$m.button__icon__default
|
|
215
|
-
}), /*#__PURE__*/React.createElement(
|
|
216
|
-
icon:
|
|
213
|
+
}), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
214
|
+
icon: faArrowLeftLong,
|
|
217
215
|
className: styles$m.button__icon__hover
|
|
218
216
|
})), isCarouselRight && /*#__PURE__*/React.createElement("span", {
|
|
219
217
|
className: iconClasses
|
|
220
|
-
}, /*#__PURE__*/React.createElement(
|
|
221
|
-
icon:
|
|
218
|
+
}, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
219
|
+
icon: faArrowRight,
|
|
222
220
|
className: styles$m.button__icon__default
|
|
223
|
-
}), /*#__PURE__*/React.createElement(
|
|
224
|
-
icon:
|
|
221
|
+
}), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
222
|
+
icon: faArrowRightLong,
|
|
225
223
|
className: styles$m.button__icon__hover
|
|
226
224
|
})), !isIconOnly && iconElement && /*#__PURE__*/React.createElement("span", {
|
|
227
225
|
className: iconClasses
|
|
@@ -248,22 +246,22 @@ const Image = ({
|
|
|
248
246
|
srcSet,
|
|
249
247
|
sizes
|
|
250
248
|
}) => {
|
|
251
|
-
const [isLoading, setIsLoading] =
|
|
252
|
-
const [hasError, setHasError] =
|
|
253
|
-
const [currentSrc, setCurrentSrc] =
|
|
249
|
+
const [isLoading, setIsLoading] = useState(true);
|
|
250
|
+
const [hasError, setHasError] = useState(false);
|
|
251
|
+
const [currentSrc, setCurrentSrc] = useState(src);
|
|
254
252
|
|
|
255
253
|
// Keep internal state in sync when parent updates `src` (e.g. async data).
|
|
256
|
-
|
|
254
|
+
useEffect(() => {
|
|
257
255
|
setCurrentSrc(src);
|
|
258
256
|
setIsLoading(true);
|
|
259
257
|
setHasError(false);
|
|
260
258
|
}, [src]);
|
|
261
|
-
const handleLoad =
|
|
259
|
+
const handleLoad = useCallback(() => {
|
|
262
260
|
setIsLoading(false);
|
|
263
261
|
setHasError(false);
|
|
264
262
|
onLoad?.();
|
|
265
263
|
}, [onLoad]);
|
|
266
|
-
const handleError =
|
|
264
|
+
const handleError = useCallback(() => {
|
|
267
265
|
setIsLoading(false);
|
|
268
266
|
setHasError(true);
|
|
269
267
|
|
|
@@ -385,8 +383,8 @@ const CarouselCard = ({
|
|
|
385
383
|
}, linkText, /*#__PURE__*/React.createElement("span", {
|
|
386
384
|
className: styles$k.carouselCard__icon,
|
|
387
385
|
"aria-hidden": "true"
|
|
388
|
-
}, /*#__PURE__*/React.createElement(
|
|
389
|
-
icon:
|
|
386
|
+
}, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
387
|
+
icon: faArrowRight
|
|
390
388
|
})))));
|
|
391
389
|
};
|
|
392
390
|
|
|
@@ -450,13 +448,13 @@ const SocialIconComponent = ({
|
|
|
450
448
|
platform
|
|
451
449
|
}) => {
|
|
452
450
|
const iconMap = {
|
|
453
|
-
facebook:
|
|
454
|
-
x:
|
|
455
|
-
linkedin:
|
|
456
|
-
youtube:
|
|
457
|
-
instagram:
|
|
451
|
+
facebook: faFacebookF,
|
|
452
|
+
x: faXTwitter,
|
|
453
|
+
linkedin: faLinkedinIn,
|
|
454
|
+
youtube: faYoutube,
|
|
455
|
+
instagram: faInstagram
|
|
458
456
|
};
|
|
459
|
-
return /*#__PURE__*/React.createElement(
|
|
457
|
+
return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
460
458
|
icon: iconMap[platform]
|
|
461
459
|
});
|
|
462
460
|
};
|
|
@@ -582,8 +580,8 @@ const FooterBottom = ({
|
|
|
582
580
|
className: styles$j.footer__countrySelector
|
|
583
581
|
}, countrySelector.showIcon !== false && /*#__PURE__*/React.createElement("span", {
|
|
584
582
|
className: styles$j.footer__countrySelectorIcon
|
|
585
|
-
}, /*#__PURE__*/React.createElement(
|
|
586
|
-
icon:
|
|
583
|
+
}, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
584
|
+
icon: faGlobe
|
|
587
585
|
})), countrySelector.label));
|
|
588
586
|
};
|
|
589
587
|
|
|
@@ -777,8 +775,8 @@ const PaginationButton = ({
|
|
|
777
775
|
className: `${styles$i.navButton} ${styles$i[`navButton--${direction}`]} ${disabled ? styles$i.navButtonDisabled : ""} ${className || ""}`,
|
|
778
776
|
"aria-label": ariaLabel || label,
|
|
779
777
|
tabIndex: disabled ? -1 : 0
|
|
780
|
-
}, /*#__PURE__*/React.createElement("span", null, label), direction === "next" && /*#__PURE__*/React.createElement(
|
|
781
|
-
icon:
|
|
778
|
+
}, /*#__PURE__*/React.createElement("span", null, label), direction === "next" && /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
779
|
+
icon: faChevronRight$1,
|
|
782
780
|
className: styles$i.navIcon,
|
|
783
781
|
"aria-hidden": "true"
|
|
784
782
|
})));
|
|
@@ -857,7 +855,7 @@ const Pagination = ({
|
|
|
857
855
|
className,
|
|
858
856
|
ariaLabel = "Pagination"
|
|
859
857
|
}) => {
|
|
860
|
-
const pageNumbers =
|
|
858
|
+
const pageNumbers = useMemo(() => generatePageNumbers(currentPage, totalPages, maxVisiblePages), [currentPage, totalPages, maxVisiblePages]);
|
|
861
859
|
const handlePageChange = page => {
|
|
862
860
|
if (page >= 1 && page <= totalPages && page !== currentPage) {
|
|
863
861
|
onPageChange(page);
|
|
@@ -979,7 +977,7 @@ const ProductCardHorizontal = ({
|
|
|
979
977
|
className: styles$h.productButton,
|
|
980
978
|
onClick: button.onClick,
|
|
981
979
|
size: "extra-small"
|
|
982
|
-
}, button.label) : /*#__PURE__*/React.createElement(
|
|
980
|
+
}, button.label) : /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
983
981
|
icon: faArrowUpRight,
|
|
984
982
|
className: styles$h.productArrowIcon,
|
|
985
983
|
"aria-hidden": "true"
|
|
@@ -1043,7 +1041,7 @@ const ProductCardDetails = ({
|
|
|
1043
1041
|
};
|
|
1044
1042
|
return /*#__PURE__*/React.createElement("div", {
|
|
1045
1043
|
className: styles$g.productDetails
|
|
1046
|
-
}, /*#__PURE__*/React.createElement(
|
|
1044
|
+
}, /*#__PURE__*/React.createElement(ProductDetailsCard, {
|
|
1047
1045
|
className: `${className}`,
|
|
1048
1046
|
title: title,
|
|
1049
1047
|
imageUrl: showProductImage ? imageUrl : "",
|
|
@@ -1292,7 +1290,7 @@ const AlgoliaDynamicSearchLeybold = props => {
|
|
|
1292
1290
|
}),
|
|
1293
1291
|
Button: ButtonAdapter
|
|
1294
1292
|
};
|
|
1295
|
-
return /*#__PURE__*/React.createElement(
|
|
1293
|
+
return /*#__PURE__*/React.createElement(AlgoliaDynamicSearchRaw, _extends({}, props, {
|
|
1296
1294
|
innerComponents: innerComponents
|
|
1297
1295
|
}));
|
|
1298
1296
|
};
|
|
@@ -1345,7 +1343,7 @@ const QrFormButtonAdapter = ({
|
|
|
1345
1343
|
const QrFormLeybold = props => {
|
|
1346
1344
|
return /*#__PURE__*/React.createElement("div", {
|
|
1347
1345
|
className: "qr-journey-form-wrapper"
|
|
1348
|
-
}, /*#__PURE__*/React.createElement(
|
|
1346
|
+
}, /*#__PURE__*/React.createElement(QrForm, _extends({}, props, {
|
|
1349
1347
|
ButtonComponent: QrFormButtonAdapter
|
|
1350
1348
|
})));
|
|
1351
1349
|
};
|
|
@@ -1403,16 +1401,16 @@ const SearchModal = ({
|
|
|
1403
1401
|
className = "",
|
|
1404
1402
|
stickyHeaderContent
|
|
1405
1403
|
}) => {
|
|
1406
|
-
const modalRef =
|
|
1407
|
-
const scrollableContentRef =
|
|
1408
|
-
const previouslyFocusedElement =
|
|
1409
|
-
const lastScrollTopRef =
|
|
1410
|
-
const scrollTickingRef =
|
|
1411
|
-
const [shouldRender, setShouldRender] =
|
|
1412
|
-
const [isClosing, setIsClosing] =
|
|
1413
|
-
const closeTimerRef =
|
|
1414
|
-
const [isMobileCloseVisible, setIsMobileCloseVisible] =
|
|
1415
|
-
const stateClassNames =
|
|
1404
|
+
const modalRef = useRef(null);
|
|
1405
|
+
const scrollableContentRef = useRef(null);
|
|
1406
|
+
const previouslyFocusedElement = useRef(null);
|
|
1407
|
+
const lastScrollTopRef = useRef(0);
|
|
1408
|
+
const scrollTickingRef = useRef(false);
|
|
1409
|
+
const [shouldRender, setShouldRender] = useState(isOpen);
|
|
1410
|
+
const [isClosing, setIsClosing] = useState(false);
|
|
1411
|
+
const closeTimerRef = useRef(null);
|
|
1412
|
+
const [isMobileCloseVisible, setIsMobileCloseVisible] = useState(true);
|
|
1413
|
+
const stateClassNames = useMemo(() => {
|
|
1416
1414
|
if (isClosing) {
|
|
1417
1415
|
return {
|
|
1418
1416
|
overlay: styles$e.overlayClosing,
|
|
@@ -1424,14 +1422,14 @@ const SearchModal = ({
|
|
|
1424
1422
|
modal: styles$e.modalOpen
|
|
1425
1423
|
};
|
|
1426
1424
|
}, [isClosing]);
|
|
1427
|
-
|
|
1425
|
+
useEffect(() => {
|
|
1428
1426
|
return () => {
|
|
1429
1427
|
if (closeTimerRef.current) {
|
|
1430
1428
|
window.clearTimeout(closeTimerRef.current);
|
|
1431
1429
|
}
|
|
1432
1430
|
};
|
|
1433
1431
|
}, []);
|
|
1434
|
-
|
|
1432
|
+
useEffect(() => {
|
|
1435
1433
|
if (isOpen) {
|
|
1436
1434
|
if (closeTimerRef.current) {
|
|
1437
1435
|
window.clearTimeout(closeTimerRef.current);
|
|
@@ -1453,7 +1451,7 @@ const SearchModal = ({
|
|
|
1453
1451
|
}, [isOpen, shouldRender]);
|
|
1454
1452
|
|
|
1455
1453
|
// Mobile-only: hide close button when scrolling down, show when scrolling up.
|
|
1456
|
-
|
|
1454
|
+
useEffect(() => {
|
|
1457
1455
|
if (!isOpen) return;
|
|
1458
1456
|
// Important: this component renders `null` until `shouldRender` becomes true.
|
|
1459
1457
|
// We need to wait for that render so `scrollableContentRef.current` exists.
|
|
@@ -1493,7 +1491,7 @@ const SearchModal = ({
|
|
|
1493
1491
|
el.removeEventListener("scroll", onScroll);
|
|
1494
1492
|
};
|
|
1495
1493
|
}, [isOpen, shouldRender]);
|
|
1496
|
-
|
|
1494
|
+
useEffect(() => {
|
|
1497
1495
|
if (isOpen) {
|
|
1498
1496
|
// Store the previously focused element
|
|
1499
1497
|
previouslyFocusedElement.current = document.activeElement;
|
|
@@ -1512,7 +1510,7 @@ const SearchModal = ({
|
|
|
1512
1510
|
}
|
|
1513
1511
|
}
|
|
1514
1512
|
}, [isOpen]);
|
|
1515
|
-
|
|
1513
|
+
useEffect(() => {
|
|
1516
1514
|
if (shouldRender) {
|
|
1517
1515
|
document.body.style.overflow = "hidden";
|
|
1518
1516
|
} else {
|
|
@@ -1522,7 +1520,7 @@ const SearchModal = ({
|
|
|
1522
1520
|
document.body.style.overflow = "";
|
|
1523
1521
|
};
|
|
1524
1522
|
}, [shouldRender]);
|
|
1525
|
-
|
|
1523
|
+
useEffect(() => {
|
|
1526
1524
|
const handleEscape = event => {
|
|
1527
1525
|
if (event.key === "Escape" && isOpen) {
|
|
1528
1526
|
onClose();
|
|
@@ -1533,7 +1531,7 @@ const SearchModal = ({
|
|
|
1533
1531
|
}, [isOpen, onClose]);
|
|
1534
1532
|
|
|
1535
1533
|
// Focus trap implementation
|
|
1536
|
-
|
|
1534
|
+
useEffect(() => {
|
|
1537
1535
|
if (!isOpen || !modalRef.current) return;
|
|
1538
1536
|
const modal = modalRef.current;
|
|
1539
1537
|
const focusableElements = modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
|
@@ -1958,7 +1956,7 @@ const FilterSearch = ({
|
|
|
1958
1956
|
};
|
|
1959
1957
|
return /*#__PURE__*/React.createElement("div", {
|
|
1960
1958
|
className: `${styles$7.filterSearch} ${className || ""}`
|
|
1961
|
-
}, !value && /*#__PURE__*/React.createElement(
|
|
1959
|
+
}, !value && /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
1962
1960
|
icon: faMagnifyingGlass,
|
|
1963
1961
|
className: styles$7.searchIcon,
|
|
1964
1962
|
"aria-hidden": "true"
|
|
@@ -1974,8 +1972,8 @@ const FilterSearch = ({
|
|
|
1974
1972
|
onClick: handleClear,
|
|
1975
1973
|
className: styles$7.clearButton,
|
|
1976
1974
|
"aria-label": "Clear search"
|
|
1977
|
-
}, /*#__PURE__*/React.createElement(
|
|
1978
|
-
icon:
|
|
1975
|
+
}, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
1976
|
+
icon: faXmark$1
|
|
1979
1977
|
})));
|
|
1980
1978
|
};
|
|
1981
1979
|
|
|
@@ -2078,10 +2076,10 @@ const FilterAccordion = ({
|
|
|
2078
2076
|
variant = "desktop",
|
|
2079
2077
|
showCheckbox = true
|
|
2080
2078
|
}) => {
|
|
2081
|
-
const [searchQuery, setSearchQuery] =
|
|
2079
|
+
const [searchQuery, setSearchQuery] = useState("");
|
|
2082
2080
|
|
|
2083
2081
|
// Filter facet values based on search query
|
|
2084
|
-
const filteredValues =
|
|
2082
|
+
const filteredValues = useMemo(() => {
|
|
2085
2083
|
if (!searchQuery.trim()) {
|
|
2086
2084
|
return facet.values;
|
|
2087
2085
|
}
|
|
@@ -2206,7 +2204,7 @@ const AppliedFilters = ({
|
|
|
2206
2204
|
className
|
|
2207
2205
|
}) => {
|
|
2208
2206
|
// Extract all refined (selected) filters
|
|
2209
|
-
const appliedFilters =
|
|
2207
|
+
const appliedFilters = useMemo(() => {
|
|
2210
2208
|
const filters = [];
|
|
2211
2209
|
facets.forEach(facet => {
|
|
2212
2210
|
facet.values.forEach(value => {
|
|
@@ -2258,7 +2256,7 @@ const FiltersPanel = ({
|
|
|
2258
2256
|
showCheckbox = true
|
|
2259
2257
|
}) => {
|
|
2260
2258
|
// Track which accordions are expanded (transient UI state)
|
|
2261
|
-
const [expandedAccordions, setExpandedAccordions] =
|
|
2259
|
+
const [expandedAccordions, setExpandedAccordions] = useState(() => {
|
|
2262
2260
|
// Initialize with default expanded facets
|
|
2263
2261
|
const expanded = new Set();
|
|
2264
2262
|
facets.forEach(facet => {
|
|
@@ -2270,7 +2268,7 @@ const FiltersPanel = ({
|
|
|
2270
2268
|
});
|
|
2271
2269
|
|
|
2272
2270
|
// Sync expansion state when facets change (e.g., new facets appear after refetch)
|
|
2273
|
-
|
|
2271
|
+
useEffect(() => {
|
|
2274
2272
|
setExpandedAccordions(prev => {
|
|
2275
2273
|
const next = new Set(prev);
|
|
2276
2274
|
// Add new facets with defaultExpanded
|
|
@@ -2289,7 +2287,7 @@ const FiltersPanel = ({
|
|
|
2289
2287
|
return next;
|
|
2290
2288
|
});
|
|
2291
2289
|
}, [facets]);
|
|
2292
|
-
const handleAccordionToggle =
|
|
2290
|
+
const handleAccordionToggle = useCallback(facetId => {
|
|
2293
2291
|
setExpandedAccordions(prev => {
|
|
2294
2292
|
const next = new Set(prev);
|
|
2295
2293
|
if (next.has(facetId)) {
|
|
@@ -2300,13 +2298,13 @@ const FiltersPanel = ({
|
|
|
2300
2298
|
return next;
|
|
2301
2299
|
});
|
|
2302
2300
|
}, []);
|
|
2303
|
-
const handleValueToggle =
|
|
2301
|
+
const handleValueToggle = useCallback((attribute, value) => {
|
|
2304
2302
|
onFacetToggle(attribute, value);
|
|
2305
2303
|
}, [onFacetToggle]);
|
|
2306
|
-
const handleRemoveFilter =
|
|
2304
|
+
const handleRemoveFilter = useCallback((attribute, value) => {
|
|
2307
2305
|
onFacetToggle(attribute, value);
|
|
2308
2306
|
}, [onFacetToggle]);
|
|
2309
|
-
const handleClearAll =
|
|
2307
|
+
const handleClearAll = useCallback(() => {
|
|
2310
2308
|
// Remove all refined facets
|
|
2311
2309
|
facets.forEach(facet => {
|
|
2312
2310
|
facet.values.forEach(value => {
|
|
@@ -2425,8 +2423,8 @@ const ProductCardVertical = ({
|
|
|
2425
2423
|
className: styles$6.productCardVertical__button,
|
|
2426
2424
|
"aria-label": `${buttonLabel} - ${title}`,
|
|
2427
2425
|
tabIndex: -1
|
|
2428
|
-
}, /*#__PURE__*/React.createElement("span", null, buttonLabel), /*#__PURE__*/React.createElement(
|
|
2429
|
-
icon:
|
|
2426
|
+
}, /*#__PURE__*/React.createElement("span", null, buttonLabel), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
2427
|
+
icon: faArrowUpRightFromSquare$1,
|
|
2430
2428
|
"aria-hidden": "true"
|
|
2431
2429
|
})));
|
|
2432
2430
|
};
|
|
@@ -2699,12 +2697,12 @@ const FilterDrawer = ({
|
|
|
2699
2697
|
children,
|
|
2700
2698
|
className
|
|
2701
2699
|
}) => {
|
|
2702
|
-
const drawerRef =
|
|
2703
|
-
const previouslyFocusedElement =
|
|
2704
|
-
const [renderState, setRenderState] =
|
|
2700
|
+
const drawerRef = useRef(null);
|
|
2701
|
+
const previouslyFocusedElement = useRef(null);
|
|
2702
|
+
const [renderState, setRenderState] = useState(isOpen ? "opening" : "closed");
|
|
2705
2703
|
|
|
2706
2704
|
// Mount/unmount sequencing for transitions.
|
|
2707
|
-
|
|
2705
|
+
useEffect(() => {
|
|
2708
2706
|
let closeTimer;
|
|
2709
2707
|
let raf1;
|
|
2710
2708
|
let raf2;
|
|
@@ -2736,7 +2734,7 @@ const FilterDrawer = ({
|
|
|
2736
2734
|
}, [isOpen]);
|
|
2737
2735
|
|
|
2738
2736
|
// Focus management
|
|
2739
|
-
|
|
2737
|
+
useEffect(() => {
|
|
2740
2738
|
const isRendered = renderState !== "closed";
|
|
2741
2739
|
if (!isRendered) {
|
|
2742
2740
|
// Restore body scroll
|
|
@@ -2771,7 +2769,7 @@ const FilterDrawer = ({
|
|
|
2771
2769
|
}, [renderState]);
|
|
2772
2770
|
|
|
2773
2771
|
// Escape key handler
|
|
2774
|
-
|
|
2772
|
+
useEffect(() => {
|
|
2775
2773
|
const handleEscape = event => {
|
|
2776
2774
|
if (event.key === "Escape" && renderState !== "closed") {
|
|
2777
2775
|
onClose();
|
|
@@ -2782,7 +2780,7 @@ const FilterDrawer = ({
|
|
|
2782
2780
|
}, [renderState, onClose]);
|
|
2783
2781
|
|
|
2784
2782
|
// Focus trap implementation
|
|
2785
|
-
|
|
2783
|
+
useEffect(() => {
|
|
2786
2784
|
if (renderState !== "open" || !drawerRef.current) return;
|
|
2787
2785
|
const drawer = drawerRef.current;
|
|
2788
2786
|
const focusableElements = drawer.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
|
@@ -2829,7 +2827,7 @@ const FilterDrawer = ({
|
|
|
2829
2827
|
onClick: onClose,
|
|
2830
2828
|
"aria-label": "Close filters",
|
|
2831
2829
|
className: styles$2.drawerCloseButton
|
|
2832
|
-
}, /*#__PURE__*/React.createElement(
|
|
2830
|
+
}, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
2833
2831
|
icon: faXmark
|
|
2834
2832
|
})), /*#__PURE__*/React.createElement("div", {
|
|
2835
2833
|
ref: drawerRef,
|
|
@@ -2864,8 +2862,8 @@ const FederatedResultsView = ({
|
|
|
2864
2862
|
onFilterDrawerToggle,
|
|
2865
2863
|
onFilterDrawerClose
|
|
2866
2864
|
}) => {
|
|
2867
|
-
const [isMobile, setIsMobile] =
|
|
2868
|
-
|
|
2865
|
+
const [isMobile, setIsMobile] = useState(false);
|
|
2866
|
+
useEffect(() => {
|
|
2869
2867
|
if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
|
|
2870
2868
|
return;
|
|
2871
2869
|
}
|
|
@@ -2889,7 +2887,7 @@ const FederatedResultsView = ({
|
|
|
2889
2887
|
const displayContents = activeTab === "products" ? [] : contents;
|
|
2890
2888
|
|
|
2891
2889
|
// Content tab single-select handler (clears all others when selecting)
|
|
2892
|
-
const handleContentCategorySelect =
|
|
2890
|
+
const handleContentCategorySelect = useCallback((attribute, value) => {
|
|
2893
2891
|
const facet = facets.find(f => f.attribute === attribute);
|
|
2894
2892
|
if (!facet) return;
|
|
2895
2893
|
|
|
@@ -2908,15 +2906,15 @@ const FederatedResultsView = ({
|
|
|
2908
2906
|
}, [facets, onFacetToggle]);
|
|
2909
2907
|
|
|
2910
2908
|
// Track if any filters applied
|
|
2911
|
-
const hasAppliedFilters =
|
|
2909
|
+
const hasAppliedFilters = useMemo(() => {
|
|
2912
2910
|
return facets.some(facet => facet.values.some(value => value.isRefined));
|
|
2913
2911
|
}, [facets]);
|
|
2914
2912
|
|
|
2915
2913
|
// Track previous filter state to detect transitions
|
|
2916
|
-
const prevHasAppliedFilters =
|
|
2914
|
+
const prevHasAppliedFilters = useRef(hasAppliedFilters);
|
|
2917
2915
|
|
|
2918
2916
|
// Auto-close drawer when transitioning FROM filters applied TO no filters (mobile only)
|
|
2919
|
-
|
|
2917
|
+
useEffect(() => {
|
|
2920
2918
|
// Only close if we HAD filters and now have NONE (not on initial open)
|
|
2921
2919
|
if (prevHasAppliedFilters.current && !hasAppliedFilters && isFilterDrawerOpen && onFilterDrawerClose) {
|
|
2922
2920
|
onFilterDrawerClose();
|
|
@@ -3073,7 +3071,7 @@ const FederatedSearchExperience = ({
|
|
|
3073
3071
|
onFilterDrawerClose
|
|
3074
3072
|
}) => {
|
|
3075
3073
|
// Track if any filters are active (for red dot indicator)
|
|
3076
|
-
const hasAppliedFilters =
|
|
3074
|
+
const hasAppliedFilters = useMemo(() => {
|
|
3077
3075
|
return facets.some(facet => facet.values.some(value => value.isRefined));
|
|
3078
3076
|
}, [facets]);
|
|
3079
3077
|
return /*#__PURE__*/React.createElement(SearchModal, {
|
|
@@ -3246,44 +3244,4 @@ const SearchTriggerButton = ({
|
|
|
3246
3244
|
}, label));
|
|
3247
3245
|
};
|
|
3248
3246
|
|
|
3249
|
-
|
|
3250
|
-
exports.AlgoliaDynamicSearchLeybold = AlgoliaDynamicSearchLeybold;
|
|
3251
|
-
exports.AppliedFilterTag = AppliedFilterTag;
|
|
3252
|
-
exports.AppliedFilters = AppliedFilters;
|
|
3253
|
-
exports.Button = Button;
|
|
3254
|
-
exports.CarouselCard = CarouselCard;
|
|
3255
|
-
exports.ContentCardBase = ContentCardBase;
|
|
3256
|
-
exports.ContentCardHorizontal = ContentCardHorizontal;
|
|
3257
|
-
exports.FederatedInstantResultsLayout = FederatedInstantResultsLayout;
|
|
3258
|
-
exports.FederatedResultsView = FederatedResultsView;
|
|
3259
|
-
exports.FederatedSearchExperience = FederatedSearchExperience;
|
|
3260
|
-
exports.FilterAccordion = FilterAccordion;
|
|
3261
|
-
exports.FilterItem = FilterItem;
|
|
3262
|
-
exports.FilterSearch = FilterSearch;
|
|
3263
|
-
exports.FiltersPanel = FiltersPanel;
|
|
3264
|
-
exports.Footer = Footer;
|
|
3265
|
-
exports.FooterBottom = FooterBottom;
|
|
3266
|
-
exports.FooterLink = FooterLink;
|
|
3267
|
-
exports.FooterLinkGroup = FooterLinkGroup;
|
|
3268
|
-
exports.FooterSocialIcon = FooterSocialIcon;
|
|
3269
|
-
exports.FooterSocialIcons = FooterSocialIcons;
|
|
3270
|
-
exports.ModalCloseButton = ModalCloseButton;
|
|
3271
|
-
exports.Pagination = Pagination;
|
|
3272
|
-
exports.PaginationButton = PaginationButton;
|
|
3273
|
-
exports.PaginationEllipsis = PaginationEllipsis;
|
|
3274
|
-
exports.PaginationItem = PaginationItem;
|
|
3275
|
-
exports.ProductCardHorizontal = ProductCardHorizontal;
|
|
3276
|
-
exports.ProductCardVertical = ProductCardVertical;
|
|
3277
|
-
exports.QrForm = QrFormLeybold;
|
|
3278
|
-
exports.QrFormLeybold = QrFormLeybold;
|
|
3279
|
-
exports.ResultsColumn = ResultsColumn;
|
|
3280
|
-
exports.ResultsCount = ResultsCount;
|
|
3281
|
-
exports.ResultsList = ResultsList;
|
|
3282
|
-
exports.SearchBar = SearchBar;
|
|
3283
|
-
exports.SearchIcon = SearchIcon;
|
|
3284
|
-
exports.SearchInput = SearchInput;
|
|
3285
|
-
exports.SearchModal = SearchModal;
|
|
3286
|
-
exports.SearchSubmitButton = SearchSubmitButton;
|
|
3287
|
-
exports.SearchTriggerButton = SearchTriggerButton;
|
|
3288
|
-
exports.SeeAllLinkButton = SeeAllLinkButton;
|
|
3289
|
-
//# sourceMappingURL=index.js.map
|
|
3247
|
+
export { AlgoliaDynamicSearchLeybold as AlgoliaDynamicSearch, AlgoliaDynamicSearchLeybold, AppliedFilterTag, AppliedFilters, Button, CarouselCard, ContentCardBase, ContentCardHorizontal, FederatedInstantResultsLayout, FederatedResultsView, FederatedSearchExperience, FilterAccordion, FilterItem, FilterSearch, FiltersPanel, Footer, FooterBottom, FooterLink, FooterLinkGroup, FooterSocialIcon, FooterSocialIcons, ModalCloseButton, Pagination, PaginationButton, PaginationEllipsis, PaginationItem, ProductCardHorizontal, ProductCardVertical, QrFormLeybold as QrForm, QrFormLeybold, ResultsColumn, ResultsCount, ResultsList, SearchBar, SearchIcon, SearchInput, SearchModal, SearchSubmitButton, SearchTriggerButton, SeeAllLinkButton };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@asante-org/leybold-design-system",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.5",
|
|
4
4
|
"description": "Design system for Leybold",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"release:major": "npm version major && npm run build:npm && npm run publish:npm"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@asante-org/edwardsvacuum-design-system": "^1.9.
|
|
27
|
+
"@asante-org/edwardsvacuum-design-system": "^1.9.4",
|
|
28
28
|
"classnames": "^2.5.1",
|
|
29
29
|
"next": "13.3.0",
|
|
30
30
|
"path": "^0.12.7",
|