@asante-org/leybold-design-system 1.2.2 → 1.3.1

package/dist/index.js

@@ -1,11 +1,9 @@
-'use strict';
-
-var React = require('react');
-var reactFontawesome = require('@fortawesome/react-fontawesome');
-var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
-var freeBrandsSvgIcons = require('@fortawesome/free-brands-svg-icons');
-var proSolidSvgIcons = require('@fortawesome/pro-solid-svg-icons');
-var edwardsvacuumDesignSystem = require('@asante-org/edwardsvacuum-design-system');
+import React, { useMemo, useState, useCallback, useRef, useEffect } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowLeft, faArrowLeftLong, faArrowRight, faArrowRightLong, faChevronRight, faChevronLeft, faArrowUpRightFromSquare, faGlobe, faXmark as faXmark$1 } from '@fortawesome/free-solid-svg-icons';
+import { faInstagram, faYoutube, faLinkedinIn, faXTwitter, faFacebookF } from '@fortawesome/free-brands-svg-icons';
+import { faChevronRight as faChevronRight$1, faArrowUpRightFromSquare as faArrowUpRightFromSquare$1 } from '@fortawesome/pro-solid-svg-icons';
+import { ProductDetailsCard, AlgoliaDynamicSearchRaw, QrForm } from '@asante-org/edwardsvacuum-design-system';
 
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -112,20 +110,20 @@ var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 const getIcon = icon => {
   switch (icon) {
     case "arrow-right":
-      return /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-        icon: freeSolidSvgIcons.faArrowRight
+      return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+        icon: faArrowRight
       });
     case "external":
-      return /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-        icon: freeSolidSvgIcons.faArrowUpRightFromSquare
+      return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+        icon: faArrowUpRightFromSquare
       });
     case "chevron-left":
-      return /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-        icon: freeSolidSvgIcons.faChevronLeft
+      return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+        icon: faChevronLeft
       });
     case "chevron-right":
-      return /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-        icon: freeSolidSvgIcons.faChevronRight
+      return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+        icon: faChevronRight
       });
     default:
       return null;
@@ -209,19 +207,19 @@ const Button = ({
     "data-force-state": props['data-force-state']
   }, props), !isIconOnly && children, isCarouselLeft && /*#__PURE__*/React.createElement("span", {
     className: iconClasses
-  }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: freeSolidSvgIcons.faArrowLeft,
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faArrowLeft,
     className: styles$k.button__icon__default
-  }), /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: freeSolidSvgIcons.faArrowLeftLong,
+  }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faArrowLeftLong,
     className: styles$k.button__icon__hover
   })), isCarouselRight && /*#__PURE__*/React.createElement("span", {
     className: iconClasses
-  }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: freeSolidSvgIcons.faArrowRight,
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faArrowRight,
     className: styles$k.button__icon__default
-  }), /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: freeSolidSvgIcons.faArrowRightLong,
+  }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faArrowRightLong,
     className: styles$k.button__icon__hover
   })), !isIconOnly && iconElement && /*#__PURE__*/React.createElement("span", {
     className: iconClasses
@@ -288,13 +286,13 @@ const SocialIconComponent = ({
   platform
 }) => {
   const iconMap = {
-    facebook: freeBrandsSvgIcons.faFacebookF,
-    x: freeBrandsSvgIcons.faXTwitter,
-    linkedin: freeBrandsSvgIcons.faLinkedinIn,
-    youtube: freeBrandsSvgIcons.faYoutube,
-    instagram: freeBrandsSvgIcons.faInstagram
+    facebook: faFacebookF,
+    x: faXTwitter,
+    linkedin: faLinkedinIn,
+    youtube: faYoutube,
+    instagram: faInstagram
   };
-  return /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
+  return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: iconMap[platform]
   });
 };
@@ -420,8 +418,8 @@ const FooterBottom = ({
     className: styles$j.footer__countrySelector
   }, countrySelector.showIcon !== false && /*#__PURE__*/React.createElement("span", {
     className: styles$j.footer__countrySelectorIcon
-  }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: freeSolidSvgIcons.faGlobe
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faGlobe
   })), countrySelector.label));
 };
 
@@ -615,8 +613,8 @@ const PaginationButton = ({
     className: `${styles$i.navButton} ${styles$i[`navButton--${direction}`]} ${disabled ? styles$i.navButtonDisabled : ""} ${className || ""}`,
     "aria-label": ariaLabel || label,
     tabIndex: disabled ? -1 : 0
-  }, /*#__PURE__*/React.createElement("span", null, label), direction === "next" && /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: proSolidSvgIcons.faChevronRight,
+  }, /*#__PURE__*/React.createElement("span", null, label), direction === "next" && /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faChevronRight$1,
     className: styles$i.navIcon,
     "aria-hidden": "true"
   })));
@@ -695,7 +693,7 @@ const Pagination = ({
   className,
   ariaLabel = "Pagination"
 }) => {
-  const pageNumbers = React.useMemo(() => generatePageNumbers(currentPage, totalPages, maxVisiblePages), [currentPage, totalPages, maxVisiblePages]);
+  const pageNumbers = useMemo(() => generatePageNumbers(currentPage, totalPages, maxVisiblePages), [currentPage, totalPages, maxVisiblePages]);
   const handlePageChange = page => {
     if (page >= 1 && page <= totalPages && page !== currentPage) {
       onPageChange(page);
@@ -769,15 +767,15 @@ const Image = ({
   srcSet,
   sizes
 }) => {
-  const [isLoading, setIsLoading] = React.useState(true);
-  const [hasError, setHasError] = React.useState(false);
-  const [currentSrc, setCurrentSrc] = React.useState(src);
-  const handleLoad = React.useCallback(() => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasError, setHasError] = useState(false);
+  const [currentSrc, setCurrentSrc] = useState(src);
+  const handleLoad = useCallback(() => {
     setIsLoading(false);
     setHasError(false);
     onLoad?.();
   }, [onLoad]);
-  const handleError = React.useCallback(() => {
+  const handleError = useCallback(() => {
     setIsLoading(false);
     setHasError(true);
 
@@ -919,7 +917,7 @@ const ProductCardHorizontal = ({
     className: styles$h.productButton,
     onClick: button.onClick,
     size: "extra-small"
-  }, button.label) : /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
+  }, button.label) : /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faArrowUpRight,
     className: styles$h.productArrowIcon,
     "aria-hidden": "true"
@@ -978,7 +976,7 @@ const ProductCardDetails = ({
   };
   return /*#__PURE__*/React.createElement("div", {
     className: styles$f.productDetails
-  }, /*#__PURE__*/React.createElement(edwardsvacuumDesignSystem.ProductDetailsCard, {
+  }, /*#__PURE__*/React.createElement(ProductDetailsCard, {
     className: `${className}`,
     title: title,
     imageUrl: imageUrl,
@@ -1065,7 +1063,7 @@ const AlgoliaDynamicSearchLeybold = props => {
     ProductCard: ProductCardAdapter,
     ProductDetailsCard: ProductCardDetailsAdapter
   };
-  return /*#__PURE__*/React.createElement(edwardsvacuumDesignSystem.AlgoliaDynamicSearchRaw, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(AlgoliaDynamicSearchRaw, _extends({}, props, {
     innerComponents: innerComponents
   }));
 };
@@ -1118,7 +1116,7 @@ const QrFormButtonAdapter = ({
 const QrFormLeybold = props => {
   return /*#__PURE__*/React.createElement("div", {
     className: "qr-journey-form-wrapper"
-  }, /*#__PURE__*/React.createElement(edwardsvacuumDesignSystem.QrForm, _extends({}, props, {
+  }, /*#__PURE__*/React.createElement(QrForm, _extends({}, props, {
     ButtonComponent: QrFormButtonAdapter
   })));
 };
@@ -1169,9 +1167,9 @@ const SearchModal = ({
   className = '',
   stickyHeaderContent
 }) => {
-  const modalRef = React.useRef(null);
-  const previouslyFocusedElement = React.useRef(null);
-  React.useEffect(() => {
+  const modalRef = useRef(null);
+  const previouslyFocusedElement = useRef(null);
+  useEffect(() => {
     if (isOpen) {
       // Store the previously focused element
       previouslyFocusedElement.current = document.activeElement;
@@ -1196,7 +1194,7 @@ const SearchModal = ({
       document.body.style.overflow = '';
     };
   }, [isOpen]);
-  React.useEffect(() => {
+  useEffect(() => {
     const handleEscape = event => {
       if (event.key === 'Escape' && isOpen) {
         onClose();
@@ -1207,7 +1205,7 @@ const SearchModal = ({
   }, [isOpen, onClose]);
 
   // Focus trap implementation
-  React.useEffect(() => {
+  useEffect(() => {
     if (!isOpen || !modalRef.current) return;
     const modal = modalRef.current;
     const focusableElements = modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
@@ -1620,7 +1618,7 @@ const FilterSearch = ({
   };
   return /*#__PURE__*/React.createElement("div", {
     className: `${styles$7.filterSearch} ${className || ""}`
-  }, !value && /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
+  }, !value && /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faMagnifyingGlass,
     className: styles$7.searchIcon,
     "aria-hidden": "true"
@@ -1636,8 +1634,8 @@ const FilterSearch = ({
     onClick: handleClear,
     className: styles$7.clearButton,
     "aria-label": "Clear search"
-  }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: freeSolidSvgIcons.faXmark
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faXmark$1
   })));
 };
 
@@ -1733,10 +1731,10 @@ const FilterAccordion = ({
   variant = 'desktop',
   showCheckbox = true
 }) => {
-  const [searchQuery, setSearchQuery] = React.useState("");
+  const [searchQuery, setSearchQuery] = useState("");
 
   // Filter facet values based on search query
-  const filteredValues = React.useMemo(() => {
+  const filteredValues = useMemo(() => {
     if (!searchQuery.trim()) {
       return facet.values;
     }
@@ -1861,7 +1859,7 @@ const AppliedFilters = ({
   className
 }) => {
   // Extract all refined (selected) filters
-  const appliedFilters = React.useMemo(() => {
+  const appliedFilters = useMemo(() => {
     const filters = [];
     facets.forEach(facet => {
       facet.values.forEach(value => {
@@ -1913,7 +1911,7 @@ const FiltersPanel = ({
   showCheckbox = true
 }) => {
   // Track which accordions are expanded (transient UI state)
-  const [expandedAccordions, setExpandedAccordions] = React.useState(() => {
+  const [expandedAccordions, setExpandedAccordions] = useState(() => {
     // Initialize with default expanded facets
     const expanded = new Set();
     facets.forEach(facet => {
@@ -1925,7 +1923,7 @@ const FiltersPanel = ({
   });
 
   // Sync expansion state when facets change (e.g., new facets appear after refetch)
-  React.useEffect(() => {
+  useEffect(() => {
     setExpandedAccordions(prev => {
       const next = new Set(prev);
       // Add new facets with defaultExpanded
@@ -1944,7 +1942,7 @@ const FiltersPanel = ({
       return next;
     });
   }, [facets]);
-  const handleAccordionToggle = React.useCallback(facetId => {
+  const handleAccordionToggle = useCallback(facetId => {
     setExpandedAccordions(prev => {
       const next = new Set(prev);
       if (next.has(facetId)) {
@@ -1955,13 +1953,13 @@ const FiltersPanel = ({
       return next;
     });
   }, []);
-  const handleValueToggle = React.useCallback((attribute, value) => {
+  const handleValueToggle = useCallback((attribute, value) => {
     onFacetToggle(attribute, value);
   }, [onFacetToggle]);
-  const handleRemoveFilter = React.useCallback((attribute, value) => {
+  const handleRemoveFilter = useCallback((attribute, value) => {
     onFacetToggle(attribute, value);
   }, [onFacetToggle]);
-  const handleClearAll = React.useCallback(() => {
+  const handleClearAll = useCallback(() => {
     // Remove all refined facets
     facets.forEach(facet => {
       facet.values.forEach(value => {
@@ -2070,8 +2068,8 @@ const ProductCardVertical = ({
     className: styles$6.productCardVertical__button,
     "aria-label": `${buttonLabel} - ${title}`,
     tabIndex: -1
-  }, /*#__PURE__*/React.createElement("span", null, buttonLabel), /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: proSolidSvgIcons.faArrowUpRightFromSquare,
+  }, /*#__PURE__*/React.createElement("span", null, buttonLabel), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faArrowUpRightFromSquare$1,
     "aria-hidden": "true"
   })));
 };
@@ -2340,11 +2338,11 @@ const FilterDrawer = ({
   children,
   className
 }) => {
-  const drawerRef = React.useRef(null);
-  const previouslyFocusedElement = React.useRef(null);
+  const drawerRef = useRef(null);
+  const previouslyFocusedElement = useRef(null);
 
   // Focus management
-  React.useEffect(() => {
+  useEffect(() => {
     if (isOpen) {
       // Store previously focused element
       previouslyFocusedElement.current = document.activeElement;
@@ -2371,7 +2369,7 @@ const FilterDrawer = ({
   }, [isOpen]);
 
   // Escape key handler
-  React.useEffect(() => {
+  useEffect(() => {
     const handleEscape = event => {
       if (event.key === 'Escape' && isOpen) {
         onClose();
@@ -2382,7 +2380,7 @@ const FilterDrawer = ({
   }, [isOpen, onClose]);
 
   // Focus trap implementation
-  React.useEffect(() => {
+  useEffect(() => {
     if (!isOpen || !drawerRef.current) return;
     const drawer = drawerRef.current;
     const focusableElements = drawer.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
@@ -2428,7 +2426,7 @@ const FilterDrawer = ({
     onClick: onClose,
     "aria-label": "Close filters",
     className: styles$2.drawerCloseButton
-  }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faXmark
   })), /*#__PURE__*/React.createElement("div", {
     ref: drawerRef,
@@ -2471,7 +2469,7 @@ const FederatedResultsView = ({
   const displayContents = activeTab === "products" ? [] : contents;
 
   // Content tab single-select handler (clears all others when selecting)
-  const handleContentCategorySelect = React.useCallback((attribute, value) => {
+  const handleContentCategorySelect = useCallback((attribute, value) => {
     const facet = facets.find(f => f.attribute === attribute);
     if (!facet) return;
 
@@ -2490,15 +2488,15 @@ const FederatedResultsView = ({
   }, [facets, onFacetToggle]);
 
   // Track if any filters applied
-  const hasAppliedFilters = React.useMemo(() => {
+  const hasAppliedFilters = useMemo(() => {
     return facets.some(facet => facet.values.some(value => value.isRefined));
   }, [facets]);
 
   // Track previous filter state to detect transitions
-  const prevHasAppliedFilters = React.useRef(hasAppliedFilters);
+  const prevHasAppliedFilters = useRef(hasAppliedFilters);
 
   // Auto-close drawer when transitioning FROM filters applied TO no filters (mobile only)
-  React.useEffect(() => {
+  useEffect(() => {
     // Only close if we HAD filters and now have NONE (not on initial open)
     if (prevHasAppliedFilters.current && !hasAppliedFilters && isFilterDrawerOpen && onFilterDrawerClose) {
       onFilterDrawerClose();
@@ -2657,7 +2655,7 @@ const FederatedSearchExperience = ({
   onFilterDrawerClose
 }) => {
   // Track if any filters are active (for red dot indicator)
-  const hasAppliedFilters = React.useMemo(() => {
+  const hasAppliedFilters = useMemo(() => {
     return facets.some(facet => facet.values.some(value => value.isRefined));
   }, [facets]);
   return /*#__PURE__*/React.createElement(SearchModal, {
@@ -2830,10 +2828,8 @@ const SearchTriggerButton = ({
   }, label));
 };
 
-exports.AlgoliaDynamicSearch = AlgoliaDynamicSearchLeybold;
-exports.AlgoliaDynamicSearchLeybold = AlgoliaDynamicSearchLeybold;
-exports.AppliedFilterTag = AppliedFilterTag;
-exports.AppliedFilters = AppliedFilters;
+export { AlgoliaDynamicSearchLeybold as AlgoliaDynamicSearch, AlgoliaDynamicSearchLeybold, AppliedFilterTag, AppliedFilters, Button, 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 };
+liedFilters = AppliedFilters;
 exports.Button = Button;
 exports.ContentCardHorizontal = ContentCardHorizontal;
 exports.FederatedInstantResultsLayout = FederatedInstantResultsLayout;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asante-org/leybold-design-system",
-  "version": "1.2.2",
+  "version": "1.3.1",
   "description": "Design system for Leybold",
   "license": "UNLICENSED",
   "main": "dist/index.js",
@@ -24,7 +24,7 @@
     "release:major": "npm version major && npm run build:npm && npm run publish:npm"
   },
   "dependencies": {
-    "@asante-org/edwardsvacuum-design-system": "^1.8.3",
+    "@asante-org/edwardsvacuum-design-system": "^1.9.1",
     "classnames": "^2.5.1",
     "next": "13.3.0",
     "path": "^0.12.7",