@digital-b2c/coreui-kit 0.10.1 → 0.10.2

package/LICENSE.txt

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2026 Luxottica
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2026 Luxottica
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,52 +1,52 @@
-# CoreUI Kit
-
-A React‑based design system and component library.
-
-## 🚀 Getting Started
-
-Install
-
-```bash
-npm install
-```
-
-Development
-
-- Run the build in watch mode
-
-```bash
-npm run dev
-```
-
-Start Storybook
-
-```bash
-npm run storybook
-```
-
-Run tests
-
-```bash
-npm test
-```
-
-Lint/format
-
-```bash
-npm run lint
-```
-
-## 🛠️ Usage
-
-Import components in other projects:
-
-```ts
-import '@digital-b2c/coreui-kit/styles.css'
-
-import { MiniSectionCta } from '@digital-b2c/coreui-kit'
-
-<MiniSectionCta>
-  <MiniSectionCta.Title>Header</MiniSectionCta.Title>
-  <MiniSectionCta.Subtitle>Description</MiniSectionCta.Subtitle>
-</MiniSectionCta>
-```
+# CoreUI Kit
+
+A React‑based design system and component library.
+
+## 🚀 Getting Started
+
+Install
+
+```bash
+npm install
+```
+
+Development
+
+- Run the build in watch mode
+
+```bash
+npm run dev
+```
+
+Start Storybook
+
+```bash
+npm run storybook
+```
+
+Run tests
+
+```bash
+npm test
+```
+
+Lint/format
+
+```bash
+npm run lint
+```
+
+## 🛠️ Usage
+
+Import components in other projects:
+
+```ts
+import '@digital-b2c/coreui-kit/styles.css'
+
+import { MiniSectionCta } from '@digital-b2c/coreui-kit'
+
+<MiniSectionCta>
+  <MiniSectionCta.Title>Header</MiniSectionCta.Title>
+  <MiniSectionCta.Subtitle>Description</MiniSectionCta.Subtitle>
+</MiniSectionCta>
+```

package/dist/index.cjs

@@ -839,7 +839,8 @@ var FilterBar_module_default = {
   searchInput: "FilterBar_module_searchInput",
   searchClear: "FilterBar_module_searchClear",
   dropdownPanel: "FilterBar_module_dropdownPanel",
-  searchPanel: "FilterBar_module_searchPanel",
+  filterFaded: "FilterBar_module_filterFaded",
+  filterFading: "FilterBar_module_filterFading",
   dropdownOption: "FilterBar_module_dropdownOption",
   selected: "FilterBar_module_selected"
 };
@@ -868,7 +869,6 @@ function FilterBar({
   const [searchState, setSearchState] = React62.useState("closed");
   const filterRef = React62.useRef(null);
   const sortRef = React62.useRef(null);
-  const searchRef = React62.useRef(null);
   const searchInputRef = React62.useRef(null);
   const closeSearch = () => {
     setSearchState("closing");
@@ -881,10 +881,9 @@ function FilterBar({
   };
   React62.useEffect(() => {
     const handleMouseDown = (e) => {
-      var _a, _b, _c;
+      var _a, _b;
       const target = e.target;
-      if (((_a = filterRef.current) == null ? void 0 : _a.contains(target)) || ((_b = sortRef.current) == null ? void 0 : _b.contains(target)) || ((_c = searchRef.current) == null ? void 0 : _c.contains(target)))
-        return;
+      if (((_a = filterRef.current) == null ? void 0 : _a.contains(target)) || ((_b = sortRef.current) == null ? void 0 : _b.contains(target))) return;
       setOpenDropdown(null);
     };
     document.addEventListener("mousedown", handleMouseDown);
@@ -894,10 +893,6 @@ function FilterBar({
     var _a;
     if (searchState === "open") (_a = searchInputRef.current) == null ? void 0 : _a.focus();
   }, [searchState]);
-  React62.useEffect(() => {
-    var _a;
-    if (openDropdown === "search") (_a = searchInputRef.current) == null ? void 0 : _a.focus();
-  }, [openDropdown]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: FilterBar_module_default.filterBar, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: FilterBar_module_default.viewToggle, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
@@ -928,90 +923,108 @@ function FilterBar({
       )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: FilterBar_module_default.filterActions, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: FilterBar_module_default.dropdownWrapper, ref: filterRef, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            type: "button",
-            className: clsx25__default.default(FilterBar_module_default.chip, filterValue !== "all" && FilterBar_module_default.active),
-            onClick: () => setOpenDropdown(openDropdown === "filter" ? null : "filter"),
-            "aria-expanded": openDropdown === "filter",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: "filter", size: 20, "aria-hidden": "true" }),
-              !isMobile && /* @__PURE__ */ jsxRuntime.jsx("span", { className: FilterBar_module_default.chipLabel, children: "Filter" })
-            ]
-          }
-        ),
-        openDropdown === "filter" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: FilterBar_module_default.dropdownPanel, role: "listbox", "aria-label": "Filter by type", children: FILTER_OPTIONS.map((opt) => /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            type: "button",
-            role: "option",
-            "aria-selected": filterValue === opt.value,
-            className: clsx25__default.default(
-              FilterBar_module_default.dropdownOption,
-              filterValue === opt.value && FilterBar_module_default.selected
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: clsx25__default.default(
+            FilterBar_module_default.dropdownWrapper,
+            isMobile && searchState === "open" && FilterBar_module_default.filterFaded,
+            isMobile && searchState === "closing" && FilterBar_module_default.filterFading
+          ),
+          ref: filterRef,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                className: clsx25__default.default(FilterBar_module_default.chip, filterValue !== "all" && FilterBar_module_default.active),
+                onClick: () => setOpenDropdown(openDropdown === "filter" ? null : "filter"),
+                "aria-expanded": openDropdown === "filter",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: "filter", size: 20, "aria-hidden": "true" }),
+                  !isMobile && /* @__PURE__ */ jsxRuntime.jsx("span", { className: FilterBar_module_default.chipLabel, children: "Filter" })
+                ]
+              }
             ),
-            onClick: () => {
-              onFilterChange(filterValue === opt.value ? "all" : opt.value);
-              setOpenDropdown(null);
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: opt.icon, size: 20, "aria-hidden": "true" }),
-              opt.label
-            ]
-          },
-          opt.value
-        )) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: FilterBar_module_default.dropdownWrapper, ref: sortRef, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            type: "button",
-            className: FilterBar_module_default.chip,
-            onClick: () => setOpenDropdown(openDropdown === "sort" ? null : "sort"),
-            "aria-expanded": openDropdown === "sort",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: "internalFilter", size: 20, "aria-hidden": "true" }),
-              !isMobile && /* @__PURE__ */ jsxRuntime.jsx("span", { className: FilterBar_module_default.chipLabel, children: "Sort" })
-            ]
-          }
-        ),
-        openDropdown === "sort" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: FilterBar_module_default.dropdownPanel, role: "listbox", "aria-label": "Sort by", children: SORT_OPTIONS.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            role: "option",
-            "aria-selected": sortValue === opt.value,
-            className: clsx25__default.default(
-              FilterBar_module_default.dropdownOption,
-              sortValue === opt.value && FilterBar_module_default.selected
+            openDropdown === "filter" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: FilterBar_module_default.dropdownPanel, role: "listbox", "aria-label": "Filter by type", children: FILTER_OPTIONS.map((opt) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                "aria-selected": filterValue === opt.value,
+                className: clsx25__default.default(
+                  FilterBar_module_default.dropdownOption,
+                  filterValue === opt.value && FilterBar_module_default.selected
+                ),
+                onClick: () => {
+                  onFilterChange(filterValue === opt.value ? "all" : opt.value);
+                  setOpenDropdown(null);
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: opt.icon, size: 20, "aria-hidden": "true" }),
+                  opt.label
+                ]
+              },
+              opt.value
+            )) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: clsx25__default.default(
+            FilterBar_module_default.dropdownWrapper,
+            isMobile && searchState === "open" && FilterBar_module_default.filterFaded,
+            isMobile && searchState === "closing" && FilterBar_module_default.filterFading
+          ),
+          ref: sortRef,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                className: FilterBar_module_default.chip,
+                onClick: () => setOpenDropdown(openDropdown === "sort" ? null : "sort"),
+                "aria-expanded": openDropdown === "sort",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: "internalFilter", size: 20, "aria-hidden": "true" }),
+                  !isMobile && /* @__PURE__ */ jsxRuntime.jsx("span", { className: FilterBar_module_default.chipLabel, children: "Sort" })
+                ]
+              }
             ),
-            onClick: () => {
-              onSortChange(opt.value);
-              setOpenDropdown(null);
-            },
-            children: opt.label
-          },
-          opt.value
-        )) })
-      ] }),
-      isMobile ? (
-        /* Mobile — popup panel, mirroring the Filter/Sort dropdowns */
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: FilterBar_module_default.dropdownWrapper, ref: searchRef, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              className: clsx25__default.default(FilterBar_module_default.chip, searchValue !== "" && FilterBar_module_default.active),
-              onClick: () => setOpenDropdown(openDropdown === "search" ? null : "search"),
-              "aria-expanded": openDropdown === "search",
-              "aria-label": "Search",
-              children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: "search", size: 20, "aria-hidden": "true" })
-            }
+            openDropdown === "sort" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: FilterBar_module_default.dropdownPanel, role: "listbox", "aria-label": "Sort by", children: SORT_OPTIONS.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                "aria-selected": sortValue === opt.value,
+                className: clsx25__default.default(
+                  FilterBar_module_default.dropdownOption,
+                  sortValue === opt.value && FilterBar_module_default.selected
+                ),
+                onClick: () => {
+                  onSortChange(opt.value);
+                  setOpenDropdown(null);
+                },
+                children: opt.label
+              },
+              opt.value
+            )) })
+          ]
+        }
+      ),
+      searchState !== "closed" ? /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: clsx25__default.default(
+            FilterBar_module_default.searchExpanded,
+            searchState === "closing" && FilterBar_module_default.searchCollapsing
           ),
-          openDropdown === "search" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: FilterBar_module_default.searchPanel, children: [
+          onAnimationEnd: () => {
+            if (searchState === "closing") setSearchState("closed");
+          },
+          children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: FilterBar_module_default.searchIconInner, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: "search", size: 20, "aria-hidden": "true" }) }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "input",
@@ -1025,8 +1038,11 @@ function FilterBar({
                 onKeyDown: (e) => {
                   if (e.key === "Escape") {
                     if (searchValue) clearSearch();
-                    else setOpenDropdown(null);
+                    else closeSearch();
                   }
+                },
+                onBlur: () => {
+                  if (!searchValue) closeSearch();
                 }
               }
             ),
@@ -1036,64 +1052,28 @@ function FilterBar({
                 type: "button",
                 className: FilterBar_module_default.searchClear,
                 "aria-label": "Clear search",
+                onMouseDown: (e) => e.preventDefault(),
                 onClick: clearSearch,
                 children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: "xBlack", size: 16, "aria-hidden": "true" })
               }
             )
-          ] })
-        ] })
-      ) : searchState !== "closed" ? (
-        /* Desktop — animated inline expand */
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: clsx25__default.default(
-              FilterBar_module_default.searchExpanded,
-              searchState === "closing" && FilterBar_module_default.searchCollapsing
-            ),
-            onAnimationEnd: () => {
-              if (searchState === "closing") setSearchState("closed");
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: FilterBar_module_default.searchIconInner, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: "search", size: 20, "aria-hidden": "true" }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
-                {
-                  ref: searchInputRef,
-                  type: "text",
-                  className: FilterBar_module_default.searchInput,
-                  placeholder: "Search\u2026",
-                  value: searchValue,
-                  onChange: (e) => onSearchChange(e.target.value),
-                  onKeyDown: (e) => {
-                    if (e.key === "Escape") {
-                      if (searchValue) clearSearch();
-                      else closeSearch();
-                    }
-                  },
-                  onBlur: () => {
-                    if (!searchValue) closeSearch();
-                  }
-                }
-              ),
-              searchValue && /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  className: FilterBar_module_default.searchClear,
-                  "aria-label": "Clear search",
-                  onMouseDown: (e) => e.preventDefault(),
-                  onClick: clearSearch,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: "xBlack", size: 16, "aria-hidden": "true" })
-                }
-              )
-            ]
-          }
-        )
-      ) : /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: FilterBar_module_default.chip, onClick: () => setSearchState("open"), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: "search", size: 20, "aria-hidden": "true" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: FilterBar_module_default.chipLabel, children: "Search" })
-      ] })
+          ]
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          className: FilterBar_module_default.chip,
+          onClick: () => {
+            setOpenDropdown(null);
+            setSearchState("open");
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: "search", size: 20, "aria-hidden": "true" }),
+            !isMobile && /* @__PURE__ */ jsxRuntime.jsx("span", { className: FilterBar_module_default.chipLabel, children: "Search" })
+          ]
+        }
+      )
     ] })
   ] });
 }