@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.
Files changed (2) hide show
  1. package/dist/index.js +92 -134
  2. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -1,11 +1,9 @@
1
- 'use strict';
2
-
3
- var React = require('react');
4
- var reactFontawesome = require('@fortawesome/react-fontawesome');
5
- var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
6
- var freeBrandsSvgIcons = require('@fortawesome/free-brands-svg-icons');
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(reactFontawesome.FontAwesomeIcon, {
116
- icon: freeSolidSvgIcons.faArrowRight
113
+ return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
114
+ icon: faArrowRight
117
115
  });
118
116
  case "external":
119
- return /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
120
- icon: freeSolidSvgIcons.faArrowUpRightFromSquare
117
+ return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
118
+ icon: faArrowUpRightFromSquare
121
119
  });
122
120
  case "chevron-left":
123
- return /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
124
- icon: freeSolidSvgIcons.faChevronLeft
121
+ return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
122
+ icon: faChevronLeft
125
123
  });
126
124
  case "chevron-right":
127
- return /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
128
- icon: freeSolidSvgIcons.faChevronRight
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(reactFontawesome.FontAwesomeIcon, {
213
- icon: freeSolidSvgIcons.faArrowLeft,
210
+ }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
211
+ icon: faArrowLeft,
214
212
  className: styles$m.button__icon__default
215
- }), /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
216
- icon: freeSolidSvgIcons.faArrowLeftLong,
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(reactFontawesome.FontAwesomeIcon, {
221
- icon: freeSolidSvgIcons.faArrowRight,
218
+ }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
219
+ icon: faArrowRight,
222
220
  className: styles$m.button__icon__default
223
- }), /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
224
- icon: freeSolidSvgIcons.faArrowRightLong,
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] = React.useState(true);
252
- const [hasError, setHasError] = React.useState(false);
253
- const [currentSrc, setCurrentSrc] = React.useState(src);
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
- React.useEffect(() => {
254
+ useEffect(() => {
257
255
  setCurrentSrc(src);
258
256
  setIsLoading(true);
259
257
  setHasError(false);
260
258
  }, [src]);
261
- const handleLoad = React.useCallback(() => {
259
+ const handleLoad = useCallback(() => {
262
260
  setIsLoading(false);
263
261
  setHasError(false);
264
262
  onLoad?.();
265
263
  }, [onLoad]);
266
- const handleError = React.useCallback(() => {
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(reactFontawesome.FontAwesomeIcon, {
389
- icon: freeSolidSvgIcons.faArrowRight
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: freeBrandsSvgIcons.faFacebookF,
454
- x: freeBrandsSvgIcons.faXTwitter,
455
- linkedin: freeBrandsSvgIcons.faLinkedinIn,
456
- youtube: freeBrandsSvgIcons.faYoutube,
457
- instagram: freeBrandsSvgIcons.faInstagram
451
+ facebook: faFacebookF,
452
+ x: faXTwitter,
453
+ linkedin: faLinkedinIn,
454
+ youtube: faYoutube,
455
+ instagram: faInstagram
458
456
  };
459
- return /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
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(reactFontawesome.FontAwesomeIcon, {
586
- icon: freeSolidSvgIcons.faGlobe
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(reactFontawesome.FontAwesomeIcon, {
781
- icon: proSolidSvgIcons.faChevronRight,
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 = React.useMemo(() => generatePageNumbers(currentPage, totalPages, maxVisiblePages), [currentPage, totalPages, maxVisiblePages]);
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(reactFontawesome.FontAwesomeIcon, {
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(edwardsvacuumDesignSystem.ProductDetailsCard, {
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(edwardsvacuumDesignSystem.AlgoliaDynamicSearchRaw, _extends({}, props, {
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(edwardsvacuumDesignSystem.QrForm, _extends({}, props, {
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 = React.useRef(null);
1407
- const scrollableContentRef = React.useRef(null);
1408
- const previouslyFocusedElement = React.useRef(null);
1409
- const lastScrollTopRef = React.useRef(0);
1410
- const scrollTickingRef = React.useRef(false);
1411
- const [shouldRender, setShouldRender] = React.useState(isOpen);
1412
- const [isClosing, setIsClosing] = React.useState(false);
1413
- const closeTimerRef = React.useRef(null);
1414
- const [isMobileCloseVisible, setIsMobileCloseVisible] = React.useState(true);
1415
- const stateClassNames = React.useMemo(() => {
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
- React.useEffect(() => {
1425
+ useEffect(() => {
1428
1426
  return () => {
1429
1427
  if (closeTimerRef.current) {
1430
1428
  window.clearTimeout(closeTimerRef.current);
1431
1429
  }
1432
1430
  };
1433
1431
  }, []);
1434
- React.useEffect(() => {
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
- React.useEffect(() => {
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
- React.useEffect(() => {
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
- React.useEffect(() => {
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
- React.useEffect(() => {
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
- React.useEffect(() => {
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(reactFontawesome.FontAwesomeIcon, {
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(reactFontawesome.FontAwesomeIcon, {
1978
- icon: freeSolidSvgIcons.faXmark
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] = React.useState("");
2079
+ const [searchQuery, setSearchQuery] = useState("");
2082
2080
 
2083
2081
  // Filter facet values based on search query
2084
- const filteredValues = React.useMemo(() => {
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 = React.useMemo(() => {
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] = React.useState(() => {
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
- React.useEffect(() => {
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 = React.useCallback(facetId => {
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 = React.useCallback((attribute, value) => {
2301
+ const handleValueToggle = useCallback((attribute, value) => {
2304
2302
  onFacetToggle(attribute, value);
2305
2303
  }, [onFacetToggle]);
2306
- const handleRemoveFilter = React.useCallback((attribute, value) => {
2304
+ const handleRemoveFilter = useCallback((attribute, value) => {
2307
2305
  onFacetToggle(attribute, value);
2308
2306
  }, [onFacetToggle]);
2309
- const handleClearAll = React.useCallback(() => {
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(reactFontawesome.FontAwesomeIcon, {
2429
- icon: proSolidSvgIcons.faArrowUpRightFromSquare,
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 = React.useRef(null);
2703
- const previouslyFocusedElement = React.useRef(null);
2704
- const [renderState, setRenderState] = React.useState(isOpen ? "opening" : "closed");
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
- React.useEffect(() => {
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
- React.useEffect(() => {
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
- React.useEffect(() => {
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
- React.useEffect(() => {
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(reactFontawesome.FontAwesomeIcon, {
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] = React.useState(false);
2868
- React.useEffect(() => {
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 = React.useCallback((attribute, value) => {
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 = React.useMemo(() => {
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 = React.useRef(hasAppliedFilters);
2914
+ const prevHasAppliedFilters = useRef(hasAppliedFilters);
2917
2915
 
2918
2916
  // Auto-close drawer when transitioning FROM filters applied TO no filters (mobile only)
2919
- React.useEffect(() => {
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 = React.useMemo(() => {
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
- exports.AlgoliaDynamicSearch = AlgoliaDynamicSearchLeybold;
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.2",
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.1",
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",