@digital-b2c/coreui-kit 0.10.1 → 0.10.2
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/LICENSE.txt +21 -21
- package/README.md +52 -52
- package/dist/index.cjs +125 -145
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +35 -18
- package/dist/index.css.map +1 -1
- package/dist/index.mjs +125 -145
- package/dist/index.mjs.map +1 -1
- package/dist/types/global.d.ts +25 -25
- package/package.json +100 -99
package/dist/index.mjs
CHANGED
|
@@ -831,7 +831,8 @@ var FilterBar_module_default = {
|
|
|
831
831
|
searchInput: "FilterBar_module_searchInput",
|
|
832
832
|
searchClear: "FilterBar_module_searchClear",
|
|
833
833
|
dropdownPanel: "FilterBar_module_dropdownPanel",
|
|
834
|
-
|
|
834
|
+
filterFaded: "FilterBar_module_filterFaded",
|
|
835
|
+
filterFading: "FilterBar_module_filterFading",
|
|
835
836
|
dropdownOption: "FilterBar_module_dropdownOption",
|
|
836
837
|
selected: "FilterBar_module_selected"
|
|
837
838
|
};
|
|
@@ -860,7 +861,6 @@ function FilterBar({
|
|
|
860
861
|
const [searchState, setSearchState] = useState("closed");
|
|
861
862
|
const filterRef = useRef(null);
|
|
862
863
|
const sortRef = useRef(null);
|
|
863
|
-
const searchRef = useRef(null);
|
|
864
864
|
const searchInputRef = useRef(null);
|
|
865
865
|
const closeSearch = () => {
|
|
866
866
|
setSearchState("closing");
|
|
@@ -873,10 +873,9 @@ function FilterBar({
|
|
|
873
873
|
};
|
|
874
874
|
useEffect(() => {
|
|
875
875
|
const handleMouseDown = (e) => {
|
|
876
|
-
var _a, _b
|
|
876
|
+
var _a, _b;
|
|
877
877
|
const target = e.target;
|
|
878
|
-
if (((_a = filterRef.current) == null ? void 0 : _a.contains(target)) || ((_b = sortRef.current) == null ? void 0 : _b.contains(target))
|
|
879
|
-
return;
|
|
878
|
+
if (((_a = filterRef.current) == null ? void 0 : _a.contains(target)) || ((_b = sortRef.current) == null ? void 0 : _b.contains(target))) return;
|
|
880
879
|
setOpenDropdown(null);
|
|
881
880
|
};
|
|
882
881
|
document.addEventListener("mousedown", handleMouseDown);
|
|
@@ -886,10 +885,6 @@ function FilterBar({
|
|
|
886
885
|
var _a;
|
|
887
886
|
if (searchState === "open") (_a = searchInputRef.current) == null ? void 0 : _a.focus();
|
|
888
887
|
}, [searchState]);
|
|
889
|
-
useEffect(() => {
|
|
890
|
-
var _a;
|
|
891
|
-
if (openDropdown === "search") (_a = searchInputRef.current) == null ? void 0 : _a.focus();
|
|
892
|
-
}, [openDropdown]);
|
|
893
888
|
return /* @__PURE__ */ jsxs("div", { className: FilterBar_module_default.filterBar, children: [
|
|
894
889
|
/* @__PURE__ */ jsxs("div", { className: FilterBar_module_default.viewToggle, children: [
|
|
895
890
|
/* @__PURE__ */ jsxs(
|
|
@@ -920,90 +915,108 @@ function FilterBar({
|
|
|
920
915
|
)
|
|
921
916
|
] }),
|
|
922
917
|
/* @__PURE__ */ jsxs("div", { className: FilterBar_module_default.filterActions, children: [
|
|
923
|
-
/* @__PURE__ */ jsxs(
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
filterValue === opt.value && FilterBar_module_default.selected
|
|
918
|
+
/* @__PURE__ */ jsxs(
|
|
919
|
+
"div",
|
|
920
|
+
{
|
|
921
|
+
className: clsx25(
|
|
922
|
+
FilterBar_module_default.dropdownWrapper,
|
|
923
|
+
isMobile && searchState === "open" && FilterBar_module_default.filterFaded,
|
|
924
|
+
isMobile && searchState === "closing" && FilterBar_module_default.filterFading
|
|
925
|
+
),
|
|
926
|
+
ref: filterRef,
|
|
927
|
+
children: [
|
|
928
|
+
/* @__PURE__ */ jsxs(
|
|
929
|
+
"button",
|
|
930
|
+
{
|
|
931
|
+
type: "button",
|
|
932
|
+
className: clsx25(FilterBar_module_default.chip, filterValue !== "all" && FilterBar_module_default.active),
|
|
933
|
+
onClick: () => setOpenDropdown(openDropdown === "filter" ? null : "filter"),
|
|
934
|
+
"aria-expanded": openDropdown === "filter",
|
|
935
|
+
children: [
|
|
936
|
+
/* @__PURE__ */ jsx(Icon, { type: "filter", size: 20, "aria-hidden": "true" }),
|
|
937
|
+
!isMobile && /* @__PURE__ */ jsx("span", { className: FilterBar_module_default.chipLabel, children: "Filter" })
|
|
938
|
+
]
|
|
939
|
+
}
|
|
946
940
|
),
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
941
|
+
openDropdown === "filter" && /* @__PURE__ */ jsx("div", { className: FilterBar_module_default.dropdownPanel, role: "listbox", "aria-label": "Filter by type", children: FILTER_OPTIONS.map((opt) => /* @__PURE__ */ jsxs(
|
|
942
|
+
"button",
|
|
943
|
+
{
|
|
944
|
+
type: "button",
|
|
945
|
+
role: "option",
|
|
946
|
+
"aria-selected": filterValue === opt.value,
|
|
947
|
+
className: clsx25(
|
|
948
|
+
FilterBar_module_default.dropdownOption,
|
|
949
|
+
filterValue === opt.value && FilterBar_module_default.selected
|
|
950
|
+
),
|
|
951
|
+
onClick: () => {
|
|
952
|
+
onFilterChange(filterValue === opt.value ? "all" : opt.value);
|
|
953
|
+
setOpenDropdown(null);
|
|
954
|
+
},
|
|
955
|
+
children: [
|
|
956
|
+
/* @__PURE__ */ jsx(Icon, { type: opt.icon, size: 20, "aria-hidden": "true" }),
|
|
957
|
+
opt.label
|
|
958
|
+
]
|
|
959
|
+
},
|
|
960
|
+
opt.value
|
|
961
|
+
)) })
|
|
962
|
+
]
|
|
963
|
+
}
|
|
964
|
+
),
|
|
965
|
+
/* @__PURE__ */ jsxs(
|
|
966
|
+
"div",
|
|
967
|
+
{
|
|
968
|
+
className: clsx25(
|
|
969
|
+
FilterBar_module_default.dropdownWrapper,
|
|
970
|
+
isMobile && searchState === "open" && FilterBar_module_default.filterFaded,
|
|
971
|
+
isMobile && searchState === "closing" && FilterBar_module_default.filterFading
|
|
972
|
+
),
|
|
973
|
+
ref: sortRef,
|
|
974
|
+
children: [
|
|
975
|
+
/* @__PURE__ */ jsxs(
|
|
976
|
+
"button",
|
|
977
|
+
{
|
|
978
|
+
type: "button",
|
|
979
|
+
className: FilterBar_module_default.chip,
|
|
980
|
+
onClick: () => setOpenDropdown(openDropdown === "sort" ? null : "sort"),
|
|
981
|
+
"aria-expanded": openDropdown === "sort",
|
|
982
|
+
children: [
|
|
983
|
+
/* @__PURE__ */ jsx(Icon, { type: "internalFilter", size: 20, "aria-hidden": "true" }),
|
|
984
|
+
!isMobile && /* @__PURE__ */ jsx("span", { className: FilterBar_module_default.chipLabel, children: "Sort" })
|
|
985
|
+
]
|
|
986
|
+
}
|
|
982
987
|
),
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
988
|
+
openDropdown === "sort" && /* @__PURE__ */ jsx("div", { className: FilterBar_module_default.dropdownPanel, role: "listbox", "aria-label": "Sort by", children: SORT_OPTIONS.map((opt) => /* @__PURE__ */ jsx(
|
|
989
|
+
"button",
|
|
990
|
+
{
|
|
991
|
+
type: "button",
|
|
992
|
+
role: "option",
|
|
993
|
+
"aria-selected": sortValue === opt.value,
|
|
994
|
+
className: clsx25(
|
|
995
|
+
FilterBar_module_default.dropdownOption,
|
|
996
|
+
sortValue === opt.value && FilterBar_module_default.selected
|
|
997
|
+
),
|
|
998
|
+
onClick: () => {
|
|
999
|
+
onSortChange(opt.value);
|
|
1000
|
+
setOpenDropdown(null);
|
|
1001
|
+
},
|
|
1002
|
+
children: opt.label
|
|
1003
|
+
},
|
|
1004
|
+
opt.value
|
|
1005
|
+
)) })
|
|
1006
|
+
]
|
|
1007
|
+
}
|
|
1008
|
+
),
|
|
1009
|
+
searchState !== "closed" ? /* @__PURE__ */ jsxs(
|
|
1010
|
+
"div",
|
|
1011
|
+
{
|
|
1012
|
+
className: clsx25(
|
|
1013
|
+
FilterBar_module_default.searchExpanded,
|
|
1014
|
+
searchState === "closing" && FilterBar_module_default.searchCollapsing
|
|
1005
1015
|
),
|
|
1006
|
-
|
|
1016
|
+
onAnimationEnd: () => {
|
|
1017
|
+
if (searchState === "closing") setSearchState("closed");
|
|
1018
|
+
},
|
|
1019
|
+
children: [
|
|
1007
1020
|
/* @__PURE__ */ jsx("span", { className: FilterBar_module_default.searchIconInner, children: /* @__PURE__ */ jsx(Icon, { type: "search", size: 20, "aria-hidden": "true" }) }),
|
|
1008
1021
|
/* @__PURE__ */ jsx(
|
|
1009
1022
|
"input",
|
|
@@ -1017,8 +1030,11 @@ function FilterBar({
|
|
|
1017
1030
|
onKeyDown: (e) => {
|
|
1018
1031
|
if (e.key === "Escape") {
|
|
1019
1032
|
if (searchValue) clearSearch();
|
|
1020
|
-
else
|
|
1033
|
+
else closeSearch();
|
|
1021
1034
|
}
|
|
1035
|
+
},
|
|
1036
|
+
onBlur: () => {
|
|
1037
|
+
if (!searchValue) closeSearch();
|
|
1022
1038
|
}
|
|
1023
1039
|
}
|
|
1024
1040
|
),
|
|
@@ -1028,64 +1044,28 @@ function FilterBar({
|
|
|
1028
1044
|
type: "button",
|
|
1029
1045
|
className: FilterBar_module_default.searchClear,
|
|
1030
1046
|
"aria-label": "Clear search",
|
|
1047
|
+
onMouseDown: (e) => e.preventDefault(),
|
|
1031
1048
|
onClick: clearSearch,
|
|
1032
1049
|
children: /* @__PURE__ */ jsx(Icon, { type: "xBlack", size: 16, "aria-hidden": "true" })
|
|
1033
1050
|
}
|
|
1034
1051
|
)
|
|
1035
|
-
]
|
|
1036
|
-
|
|
1037
|
-
) :
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
"
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
}
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
"input",
|
|
1053
|
-
{
|
|
1054
|
-
ref: searchInputRef,
|
|
1055
|
-
type: "text",
|
|
1056
|
-
className: FilterBar_module_default.searchInput,
|
|
1057
|
-
placeholder: "Search\u2026",
|
|
1058
|
-
value: searchValue,
|
|
1059
|
-
onChange: (e) => onSearchChange(e.target.value),
|
|
1060
|
-
onKeyDown: (e) => {
|
|
1061
|
-
if (e.key === "Escape") {
|
|
1062
|
-
if (searchValue) clearSearch();
|
|
1063
|
-
else closeSearch();
|
|
1064
|
-
}
|
|
1065
|
-
},
|
|
1066
|
-
onBlur: () => {
|
|
1067
|
-
if (!searchValue) closeSearch();
|
|
1068
|
-
}
|
|
1069
|
-
}
|
|
1070
|
-
),
|
|
1071
|
-
searchValue && /* @__PURE__ */ jsx(
|
|
1072
|
-
"button",
|
|
1073
|
-
{
|
|
1074
|
-
type: "button",
|
|
1075
|
-
className: FilterBar_module_default.searchClear,
|
|
1076
|
-
"aria-label": "Clear search",
|
|
1077
|
-
onMouseDown: (e) => e.preventDefault(),
|
|
1078
|
-
onClick: clearSearch,
|
|
1079
|
-
children: /* @__PURE__ */ jsx(Icon, { type: "xBlack", size: 16, "aria-hidden": "true" })
|
|
1080
|
-
}
|
|
1081
|
-
)
|
|
1082
|
-
]
|
|
1083
|
-
}
|
|
1084
|
-
)
|
|
1085
|
-
) : /* @__PURE__ */ jsxs("button", { type: "button", className: FilterBar_module_default.chip, onClick: () => setSearchState("open"), children: [
|
|
1086
|
-
/* @__PURE__ */ jsx(Icon, { type: "search", size: 20, "aria-hidden": "true" }),
|
|
1087
|
-
/* @__PURE__ */ jsx("span", { className: FilterBar_module_default.chipLabel, children: "Search" })
|
|
1088
|
-
] })
|
|
1052
|
+
]
|
|
1053
|
+
}
|
|
1054
|
+
) : /* @__PURE__ */ jsxs(
|
|
1055
|
+
"button",
|
|
1056
|
+
{
|
|
1057
|
+
type: "button",
|
|
1058
|
+
className: FilterBar_module_default.chip,
|
|
1059
|
+
onClick: () => {
|
|
1060
|
+
setOpenDropdown(null);
|
|
1061
|
+
setSearchState("open");
|
|
1062
|
+
},
|
|
1063
|
+
children: [
|
|
1064
|
+
/* @__PURE__ */ jsx(Icon, { type: "search", size: 20, "aria-hidden": "true" }),
|
|
1065
|
+
!isMobile && /* @__PURE__ */ jsx("span", { className: FilterBar_module_default.chipLabel, children: "Search" })
|
|
1066
|
+
]
|
|
1067
|
+
}
|
|
1068
|
+
)
|
|
1089
1069
|
] })
|
|
1090
1070
|
] });
|
|
1091
1071
|
}
|