@envive-ai/react-toolkit 0.2.0 → 0.2.1
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/package.json +10 -13
- package/src/components/Accordion/Accordion.tsx +3 -3
- package/src/components/AppliedFiltersScrollbar/AppliedFiltersScrollbar.tsx +2 -2
- package/src/components/ButtonBase/ButtonBase.tsx +2 -2
- package/src/components/DynamicFiltersScrollbar/DynamicFiltersScrollbar.tsx +2 -2
- package/src/components/FilterScrollbar/AppliedFiltersScrollbar.tsx +2 -2
- package/src/components/FilterScrollbar/DynamicFiltersScrollbar.tsx +2 -2
- package/src/components/ProductCard/ProductCard.tsx +10 -9
- package/src/components/RadioButton/RadioButton.tsx +2 -2
- package/src/components/SearchFilter/SearchFilterHeader.tsx +3 -3
- package/src/components/SearchFilter/SearchFilterItem.tsx +2 -2
- package/src/components/SearchInput/searchInputVariants.ts +2 -2
- package/src/components/SearchResultsStates/NoSearchResultsFound.tsx +3 -3
- package/src/components/SearchResultsStates/SearchResultsLoadingGrid.tsx +2 -2
- package/src/components/TextInput/TextInput.tsx +4 -3
- package/src/components/ToggleButton/ToggleButton.tsx +5 -5
- package/src/components/Typography/Typography.spec.tsx +22 -0
- package/src/components/Typography/Typography.tsx +73 -0
- package/src/components/Typography/index.ts +2 -0
- package/src/components/{Text/textVariantClasses.ts → Typography/typographyVariantClasses.ts} +36 -38
- package/src/components/Typography/util.ts +19 -0
- package/dist/Accordion/index.cjs +0 -6
- package/dist/Accordion/index.d.cts +0 -13
- package/dist/Accordion/index.d.ts +0 -13
- package/dist/Accordion/index.js +0 -6
- package/dist/Accordion-D9gO9_y3.cjs +0 -88
- package/dist/Accordion-ZEdp99Ph.js +0 -77
- package/dist/AnimatedChevron/index.cjs +0 -3
- package/dist/AnimatedChevron/index.d.cts +0 -11
- package/dist/AnimatedChevron/index.d.ts +0 -11
- package/dist/AnimatedChevron/index.js +0 -3
- package/dist/AnimatedChevron-CwuXgR2r.js +0 -29
- package/dist/AnimatedChevron-e_UzWBl0.cjs +0 -37
- package/dist/AppliedFiltersScrollbar/index.cjs +0 -48
- package/dist/AppliedFiltersScrollbar/index.d.cts +0 -22
- package/dist/AppliedFiltersScrollbar/index.d.ts +0 -22
- package/dist/AppliedFiltersScrollbar/index.js +0 -44
- package/dist/ButtonBase/index.cjs +0 -7
- package/dist/ButtonBase/index.d.cts +0 -42
- package/dist/ButtonBase/index.d.ts +0 -42
- package/dist/ButtonBase/index.js +0 -6
- package/dist/ButtonBase-BJ0qXMWD.js +0 -60
- package/dist/ButtonBase-BktteD9c.js +0 -1
- package/dist/ButtonBase-Cb6Iec6f.cjs +0 -0
- package/dist/ButtonBase-VIv-tn7H.cjs +0 -75
- package/dist/DynamicFiltersScrollbar/index.cjs +0 -36
- package/dist/DynamicFiltersScrollbar/index.d.cts +0 -28
- package/dist/DynamicFiltersScrollbar/index.d.ts +0 -28
- package/dist/DynamicFiltersScrollbar/index.js +0 -32
- package/dist/DynamicFiltersScrollbar-HCYZjI14.cjs +0 -81
- package/dist/DynamicFiltersScrollbar-O0ai3cIG.js +0 -66
- package/dist/FilterScrollbar/index.cjs +0 -6
- package/dist/FilterScrollbar/index.d.cts +0 -47
- package/dist/FilterScrollbar/index.d.ts +0 -47
- package/dist/FilterScrollbar/index.js +0 -5
- package/dist/Headline/index.cjs +0 -4
- package/dist/Headline/index.d.cts +0 -21
- package/dist/Headline/index.d.ts +0 -21
- package/dist/Headline/index.js +0 -4
- package/dist/Headline-CKJmd2w4.cjs +0 -72
- package/dist/Headline-DtjTB4xS.js +0 -64
- package/dist/ImageWithFallback/index.cjs +0 -3
- package/dist/ImageWithFallback/index.d.cts +0 -26
- package/dist/ImageWithFallback/index.d.ts +0 -26
- package/dist/ImageWithFallback/index.js +0 -3
- package/dist/ImageWithFallback-CbYsD1_a.js +0 -42
- package/dist/ImageWithFallback-Km9h16Vz.cjs +0 -51
- package/dist/ModalSheet/index.cjs +0 -4
- package/dist/ModalSheet/index.d.cts +0 -38
- package/dist/ModalSheet/index.d.ts +0 -38
- package/dist/ModalSheet/index.js +0 -4
- package/dist/ModalSheet-DwnbbFh7.cjs +0 -313
- package/dist/ModalSheet-sMg44OLz.js +0 -302
- package/dist/ProductCard/index.cjs +0 -17
- package/dist/ProductCard/index.d.cts +0 -2
- package/dist/ProductCard/index.d.ts +0 -2
- package/dist/ProductCard/index.js +0 -8
- package/dist/ProductCard-BDz80MCQ.cjs +0 -319
- package/dist/ProductCard-CqhNJShq.js +0 -255
- package/dist/ProductGrid/index.cjs +0 -10
- package/dist/ProductGrid/index.d.cts +0 -33
- package/dist/ProductGrid/index.d.ts +0 -33
- package/dist/ProductGrid/index.js +0 -9
- package/dist/ProductGrid-8n4XgcMr.js +0 -60
- package/dist/ProductGrid-RRcdkY5J.cjs +0 -74
- package/dist/RadioButton/index.cjs +0 -6
- package/dist/RadioButton/index.d.cts +0 -32
- package/dist/RadioButton/index.d.ts +0 -32
- package/dist/RadioButton/index.js +0 -6
- package/dist/RadioButton-BWnaUI8o.cjs +0 -84
- package/dist/RadioButton-CG8_M0hY.js +0 -75
- package/dist/RadioButtonGroup/index.cjs +0 -8
- package/dist/RadioButtonGroup/index.d.cts +0 -36
- package/dist/RadioButtonGroup/index.d.ts +0 -36
- package/dist/RadioButtonGroup/index.js +0 -7
- package/dist/RadioButtonGroup-B7EuiEP1.js +0 -38
- package/dist/RadioButtonGroup-ReQqakpS.cjs +0 -52
- package/dist/SearchAutocomplete/index.cjs +0 -3
- package/dist/SearchAutocomplete/index.d.cts +0 -13
- package/dist/SearchAutocomplete/index.d.ts +0 -13
- package/dist/SearchAutocomplete/index.js +0 -3
- package/dist/SearchAutocomplete-BMNYZiJL.js +0 -51
- package/dist/SearchAutocomplete-BmHdijOv.cjs +0 -62
- package/dist/SearchFilter/index.cjs +0 -19
- package/dist/SearchFilter/index.d.cts +0 -91
- package/dist/SearchFilter/index.d.ts +0 -91
- package/dist/SearchFilter/index.js +0 -14
- package/dist/SearchFilter-C8mgj84o.js +0 -268
- package/dist/SearchFilter-FrdHPM5O.cjs +0 -307
- package/dist/SearchInput/index.cjs +0 -7
- package/dist/SearchInput/index.d.cts +0 -34
- package/dist/SearchInput/index.d.ts +0 -34
- package/dist/SearchInput/index.js +0 -6
- package/dist/SearchInput--x9NTMTb.cjs +0 -106
- package/dist/SearchInput-IBq83nqF.js +0 -89
- package/dist/SearchInputForm/index.cjs +0 -39
- package/dist/SearchInputForm/index.d.cts +0 -34
- package/dist/SearchInputForm/index.d.ts +0 -34
- package/dist/SearchInputForm/index.js +0 -37
- package/dist/SearchResultsContent/index.cjs +0 -47
- package/dist/SearchResultsContent/index.d.cts +0 -48
- package/dist/SearchResultsContent/index.d.ts +0 -48
- package/dist/SearchResultsContent/index.js +0 -44
- package/dist/SearchResultsFilterSidebar/index.cjs +0 -62
- package/dist/SearchResultsFilterSidebar/index.d.cts +0 -2
- package/dist/SearchResultsFilterSidebar/index.d.ts +0 -2
- package/dist/SearchResultsFilterSidebar/index.js +0 -57
- package/dist/SearchResultsStates/index.cjs +0 -17
- package/dist/SearchResultsStates/index.d.cts +0 -69
- package/dist/SearchResultsStates/index.d.ts +0 -69
- package/dist/SearchResultsStates/index.js +0 -15
- package/dist/SearchResultsStates-D7dM35qq.js +0 -110
- package/dist/SearchResultsStates-nlaPbkj3.cjs +0 -132
- package/dist/SparkleAnimation/index.cjs +0 -4
- package/dist/SparkleAnimation/index.d.cts +0 -23
- package/dist/SparkleAnimation/index.d.ts +0 -23
- package/dist/SparkleAnimation/index.js +0 -3
- package/dist/SparkleAnimation-D1aZE-7A.cjs +0 -101
- package/dist/SparkleAnimation-DtWkXmkN.js +0 -84
- package/dist/Spinner/index.cjs +0 -3
- package/dist/Spinner/index.d.cts +0 -11
- package/dist/Spinner/index.d.ts +0 -11
- package/dist/Spinner/index.js +0 -3
- package/dist/Spinner-bg6jb_ks.js +0 -38
- package/dist/Spinner-rcWX566W.cjs +0 -46
- package/dist/SuggestionButton/index.cjs +0 -188
- package/dist/SuggestionButton/index.d.cts +0 -35
- package/dist/SuggestionButton/index.d.ts +0 -35
- package/dist/SuggestionButton/index.js +0 -180
- package/dist/Text/index.cjs +0 -10
- package/dist/Text/index.d.cts +0 -42
- package/dist/Text/index.d.ts +0 -42
- package/dist/Text/index.js +0 -5
- package/dist/Text-BLzNhX4H.js +0 -42
- package/dist/Text-BMsncrpY.js +0 -10
- package/dist/Text-C8t_iEj6.cjs +0 -16
- package/dist/Text-DllCE9_D.cjs +0 -50
- package/dist/TextInput/index.cjs +0 -4
- package/dist/TextInput/index.d.cts +0 -12
- package/dist/TextInput/index.d.ts +0 -12
- package/dist/TextInput/index.js +0 -4
- package/dist/TextInput-BeHPlVHT.js +0 -31
- package/dist/TextInput-CGs4BY1q.cjs +0 -40
- package/dist/ToggleButton/index.cjs +0 -6
- package/dist/ToggleButton/index.d.cts +0 -30
- package/dist/ToggleButton/index.d.ts +0 -30
- package/dist/ToggleButton/index.js +0 -6
- package/dist/ToggleButton-CRiPqTCb.js +0 -60
- package/dist/ToggleButton-DfJZ8POQ.cjs +0 -68
- package/dist/chunk-CUT6urMc.cjs +0 -30
- package/dist/colorsConfig-Ck2jeqWe.js +0 -26
- package/dist/colorsConfig-CqCKftuM.cjs +0 -38
- package/dist/index-B9WeFNlO.d.cts +0 -325
- package/dist/index-CLGe_Pam.d.cts +0 -46
- package/dist/index-CeECGrFM.d.ts +0 -325
- package/dist/index-PSzeHU2s.d.ts +0 -46
- package/dist/searchFilterSidebarVariants-B05f5SD5.js +0 -34
- package/dist/searchFilterSidebarVariants-NQhqq-NT.cjs +0 -39
- package/dist/textVariantClasses-B0gNjzl4.d.cts +0 -174
- package/dist/textVariantClasses-Bl8SAGwZ.d.ts +0 -174
- package/dist/textVariantClasses-CBre7vXv.cjs +0 -123
- package/dist/textVariantClasses-CRrTb43V.js +0 -99
- package/dist/types-BhGjnuWx.d.cts +0 -4
- package/dist/types-CTOdb0G0.d.ts +0 -4
- package/src/components/Headline/Headline.tsx +0 -81
- package/src/components/Headline/index.ts +0 -1
- package/src/components/Text/Text.tsx +0 -58
- package/src/components/Text/index.ts +0 -3
- package/src/components/Text/types.ts +0 -23
|
@@ -1,268 +0,0 @@
|
|
|
1
|
-
import { Text } from "./Text-BLzNhX4H.js";
|
|
2
|
-
import { Accordion } from "./Accordion-ZEdp99Ph.js";
|
|
3
|
-
import { ButtonBase } from "./ButtonBase-BJ0qXMWD.js";
|
|
4
|
-
import { ModalSheet } from "./ModalSheet-sMg44OLz.js";
|
|
5
|
-
import { RadioButtonGroup } from "./RadioButtonGroup-B7EuiEP1.js";
|
|
6
|
-
import { ToggleButton } from "./ToggleButton-CRiPqTCb.js";
|
|
7
|
-
import { useCallback, useEffect, useMemo, useState } from "react";
|
|
8
|
-
import classNames from "classnames";
|
|
9
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
10
|
-
|
|
11
|
-
//#region src/components/SearchFilter/SearchFilterHeader.tsx
|
|
12
|
-
const SearchFilterHeader = ({ closeModal, productCount, headerClassName, filterCloseIconVariant }) => {
|
|
13
|
-
const closeIconColor = filterCloseIconVariant === "dark" ? "var(--spiffy-colors-text-primary)" : "var(--spiffy-colors-text-light)";
|
|
14
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
15
|
-
className: classNames("spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-between spiffy-tw-px-4 spiffy-tw-py-3", headerClassName),
|
|
16
|
-
children: [/* @__PURE__ */ jsxs(Text, {
|
|
17
|
-
variant: "body2",
|
|
18
|
-
className: "spiffy-tw-font-medium",
|
|
19
|
-
children: [
|
|
20
|
-
"Filters (",
|
|
21
|
-
productCount,
|
|
22
|
-
")"
|
|
23
|
-
]
|
|
24
|
-
}), /* @__PURE__ */ jsx("button", {
|
|
25
|
-
onClick: closeModal,
|
|
26
|
-
className: "spiffy-tw-p-2",
|
|
27
|
-
type: "button",
|
|
28
|
-
"aria-label": "Open Filter Menu",
|
|
29
|
-
children: /* @__PURE__ */ jsx("svg", {
|
|
30
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
31
|
-
width: "14",
|
|
32
|
-
height: "14",
|
|
33
|
-
viewBox: "0 0 14 14",
|
|
34
|
-
fill: "none",
|
|
35
|
-
children: /* @__PURE__ */ jsx("path", {
|
|
36
|
-
d: "M13.7071 1.70711C14.0976 1.31658 14.0976 0.683417 13.7071 0.292893C13.3166 -0.0976311 12.6834 -0.0976311 12.2929 0.292893L7 5.58579L1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L5.58579 7L0.292893 12.2929C-0.0976311 12.6834 -0.0976311 13.3166 0.292893 13.7071C0.683417 14.0976 1.31658 14.0976 1.70711 13.7071L7 8.41421L12.2929 13.7071C12.6834 14.0976 13.3166 14.0976 13.7071 13.7071C14.0976 13.3166 14.0976 12.6834 13.7071 12.2929L8.41421 7L13.7071 1.70711Z",
|
|
37
|
-
fill: closeIconColor
|
|
38
|
-
})
|
|
39
|
-
})
|
|
40
|
-
})]
|
|
41
|
-
});
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
//#endregion
|
|
45
|
-
//#region src/components/SearchFilter/useHasFilterStateChanged.tsx
|
|
46
|
-
const useHasFilterStateChanged = (filters, isOpen) => {
|
|
47
|
-
const [initialFilterStates, setInitialFilterStates] = useState({});
|
|
48
|
-
const currentFilterStates = useMemo(() => {
|
|
49
|
-
const states = {};
|
|
50
|
-
filters.forEach((filter) => {
|
|
51
|
-
filter.items.forEach((item) => {
|
|
52
|
-
states[`${filter.filterId}-${item.filterItemId}`] = item.isSelected;
|
|
53
|
-
});
|
|
54
|
-
});
|
|
55
|
-
return states;
|
|
56
|
-
}, [filters]);
|
|
57
|
-
const hasFiltersChanged = useMemo(() => {
|
|
58
|
-
if (Object.keys(initialFilterStates).length === 0) return false;
|
|
59
|
-
return Object.keys(currentFilterStates).some((key) => currentFilterStates[key] !== initialFilterStates[key]);
|
|
60
|
-
}, [currentFilterStates, initialFilterStates]);
|
|
61
|
-
useEffect(() => {
|
|
62
|
-
if (isOpen) setInitialFilterStates(currentFilterStates);
|
|
63
|
-
}, [isOpen]);
|
|
64
|
-
return hasFiltersChanged;
|
|
65
|
-
};
|
|
66
|
-
|
|
67
|
-
//#endregion
|
|
68
|
-
//#region src/components/SearchFilter/utils.ts
|
|
69
|
-
const getSelectedFilterItemsCount = (filter) => filter.items.filter((item) => item.isSelected).length;
|
|
70
|
-
const getTotalSelectedFilterItemsCount = (filters) => filters.reduce((acc, filter) => {
|
|
71
|
-
if (filter.filterId === "sort") return acc;
|
|
72
|
-
return acc + getSelectedFilterItemsCount(filter);
|
|
73
|
-
}, 0);
|
|
74
|
-
|
|
75
|
-
//#endregion
|
|
76
|
-
//#region src/components/SearchFilter/SearchFilterFooter.tsx
|
|
77
|
-
const SearchFilterFooter = ({ closeModal, clearAllFilters, filterCount, applyFiltersUnchangedClasses, applyFiltersChangedClasses, hasFiltersChanged }) => {
|
|
78
|
-
const clearAllButtonEnabled = filterCount > 0;
|
|
79
|
-
const footerWrapperClassName = classNames({
|
|
80
|
-
"spiffy-tw-flex": true,
|
|
81
|
-
"spiffy-tw-flex-col": true,
|
|
82
|
-
"spiffy-tw-items-center": true,
|
|
83
|
-
"spiffy-tw-justify-between": true,
|
|
84
|
-
"spiffy-tw-w-full": true,
|
|
85
|
-
"spiffy-tw-border-t": true,
|
|
86
|
-
"spiffy-tw-border-t-[--spiffy-colors-border-light]": true,
|
|
87
|
-
"spiffy-tw-p-[16px]": true,
|
|
88
|
-
"spiffy-tw-gap-[16px]": true
|
|
89
|
-
});
|
|
90
|
-
const applyFilterButtonClassName = classNames("spiffy-tw-flex spiffy-tw-flex-row spiffy-tw-justify-center spiffy-tw-rounded-[8px] spiffy-tw-w-full", hasFiltersChanged ? applyFiltersChangedClasses : applyFiltersUnchangedClasses);
|
|
91
|
-
const clearAllButtonClassName = classNames({
|
|
92
|
-
"spiffy-tw-flex": true,
|
|
93
|
-
"spiffy-tw-flex-row": true,
|
|
94
|
-
"spiffy-tw-justify-center": true,
|
|
95
|
-
"spiffy-tw-w-full": true,
|
|
96
|
-
"spiffy-tw-text-[--spiffy-colors-text-primary]": clearAllButtonEnabled,
|
|
97
|
-
"spiffy-tw-text-[--spiffy-colors-text-secondary]": !clearAllButtonEnabled
|
|
98
|
-
});
|
|
99
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
100
|
-
className: footerWrapperClassName,
|
|
101
|
-
children: [/* @__PURE__ */ jsx(ButtonBase, {
|
|
102
|
-
isDisabled: !hasFiltersChanged,
|
|
103
|
-
buttonClass: applyFilterButtonClassName,
|
|
104
|
-
text: "Apply Filters",
|
|
105
|
-
onClick: closeModal
|
|
106
|
-
}), /* @__PURE__ */ jsx(ButtonBase, {
|
|
107
|
-
isDisabled: !clearAllButtonEnabled,
|
|
108
|
-
buttonClass: clearAllButtonClassName,
|
|
109
|
-
text: "Clear All",
|
|
110
|
-
onClick: clearAllFilters
|
|
111
|
-
})]
|
|
112
|
-
});
|
|
113
|
-
};
|
|
114
|
-
|
|
115
|
-
//#endregion
|
|
116
|
-
//#region src/components/SearchFilter/SearchFilter.tsx
|
|
117
|
-
const SortFilter = ({ filter, selectFilterItem, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor }) => {
|
|
118
|
-
const filterTitle = filter.displayName;
|
|
119
|
-
const options = filter.items.map((item) => ({
|
|
120
|
-
label: item.displayName,
|
|
121
|
-
value: item.filterItemId,
|
|
122
|
-
isSelected: item.isSelected
|
|
123
|
-
}));
|
|
124
|
-
const content = /* @__PURE__ */ jsx(RadioButtonGroup, {
|
|
125
|
-
options,
|
|
126
|
-
name: filterTitle,
|
|
127
|
-
onChange: (value) => {
|
|
128
|
-
const selectedItem = filter.items.find((item) => item.filterItemId === value);
|
|
129
|
-
selectFilterItem({
|
|
130
|
-
filterId: filter.filterId,
|
|
131
|
-
filterItemId: value,
|
|
132
|
-
isSelected: true,
|
|
133
|
-
displayName: selectedItem?.displayName || value
|
|
134
|
-
});
|
|
135
|
-
},
|
|
136
|
-
gap: "large",
|
|
137
|
-
textButtonGap: "large",
|
|
138
|
-
value: filter.items.find((item) => item.isSelected)?.filterItemId,
|
|
139
|
-
fillColor: radioButtonFillColor,
|
|
140
|
-
hoverColor: radioButtonHoverColor,
|
|
141
|
-
uncheckedBorderColor: radioButtonUncheckedBorderColor
|
|
142
|
-
});
|
|
143
|
-
return /* @__PURE__ */ jsx(Accordion, {
|
|
144
|
-
title: filterTitle,
|
|
145
|
-
content
|
|
146
|
-
});
|
|
147
|
-
};
|
|
148
|
-
const FilterItem = ({ filterId, filterItem, selectFilterItem }) => /* @__PURE__ */ jsx(ToggleButton, {
|
|
149
|
-
label: filterItem.displayName,
|
|
150
|
-
secondaryLabel: `(${filterItem.productCount})`,
|
|
151
|
-
isSelected: filterItem.isSelected,
|
|
152
|
-
onClick: () => selectFilterItem({
|
|
153
|
-
filterId,
|
|
154
|
-
filterItemId: filterItem.filterItemId,
|
|
155
|
-
isSelected: !filterItem.isSelected,
|
|
156
|
-
displayName: filterItem.displayName
|
|
157
|
-
}),
|
|
158
|
-
variant: "default"
|
|
159
|
-
});
|
|
160
|
-
const Filter = ({ filter, selectFilterItem }) => {
|
|
161
|
-
const filterContentClassName = classNames({
|
|
162
|
-
"spiffy-tw-flex": true,
|
|
163
|
-
"spiffy-tw-flex-wrap": true,
|
|
164
|
-
"spiffy-tw-gap-[8px]": true,
|
|
165
|
-
"spiffy-tw-pb-[1px]": true
|
|
166
|
-
});
|
|
167
|
-
const selectedFilterItems = getSelectedFilterItemsCount(filter);
|
|
168
|
-
const filterTitle = selectedFilterItems > 0 ? `${filter.displayName} (${selectedFilterItems})` : filter.displayName;
|
|
169
|
-
const content = /* @__PURE__ */ jsx("div", {
|
|
170
|
-
className: filterContentClassName,
|
|
171
|
-
children: filter.items.map((item) => /* @__PURE__ */ jsx(FilterItem, {
|
|
172
|
-
filterId: filter.filterId,
|
|
173
|
-
filterItem: item,
|
|
174
|
-
selectFilterItem
|
|
175
|
-
}, item.filterItemId))
|
|
176
|
-
});
|
|
177
|
-
return /* @__PURE__ */ jsx(Accordion, {
|
|
178
|
-
title: filterTitle,
|
|
179
|
-
content
|
|
180
|
-
});
|
|
181
|
-
};
|
|
182
|
-
const SearchFilter = ({ filters, productCount, selectFilterItem, clearAllFilters, isOpen, setIsOpen, applyFiltersUnchangedClasses, applyFiltersChangedClasses, headerContent, footerContent, headerClassName, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor, filterCloseIconVariant }) => {
|
|
183
|
-
const closeModal = useCallback(() => setIsOpen(false), [setIsOpen]);
|
|
184
|
-
const filterCount = getTotalSelectedFilterItemsCount(filters);
|
|
185
|
-
const hasFiltersChanged = useHasFilterStateChanged(filters, isOpen);
|
|
186
|
-
const filterWrapperClassName = classNames({
|
|
187
|
-
"spiffy-tw-flex": true,
|
|
188
|
-
"spiffy-tw-flex-col": true,
|
|
189
|
-
"spiffy-tw-gap-[16px]": true,
|
|
190
|
-
"spiffy-tw-px-[24px]": true,
|
|
191
|
-
"spiffy-tw-py-[16px]": true,
|
|
192
|
-
"spiffy-tw-max-h-screen": true,
|
|
193
|
-
"spiffy-tw-overflow-y-auto": true
|
|
194
|
-
});
|
|
195
|
-
return /* @__PURE__ */ jsx(ModalSheet, {
|
|
196
|
-
isOpen,
|
|
197
|
-
closeModal,
|
|
198
|
-
headerProps: {
|
|
199
|
-
headerContent: headerContent || /* @__PURE__ */ jsx(SearchFilterHeader, {
|
|
200
|
-
closeModal,
|
|
201
|
-
productCount,
|
|
202
|
-
headerClassName: headerClassName ?? "",
|
|
203
|
-
filterCloseIconVariant
|
|
204
|
-
}),
|
|
205
|
-
chevronColor: "#000"
|
|
206
|
-
},
|
|
207
|
-
footerProps: { footerContent: footerContent || /* @__PURE__ */ jsx(SearchFilterFooter, {
|
|
208
|
-
closeModal,
|
|
209
|
-
clearAllFilters,
|
|
210
|
-
filterCount,
|
|
211
|
-
hasFiltersChanged,
|
|
212
|
-
applyFiltersUnchangedClasses,
|
|
213
|
-
applyFiltersChangedClasses
|
|
214
|
-
}) },
|
|
215
|
-
children: /* @__PURE__ */ jsx("div", {
|
|
216
|
-
className: filterWrapperClassName,
|
|
217
|
-
children: filters.filter((filter) => filter.displayName !== "").map((filter) => {
|
|
218
|
-
if (filter.filterId === "sort") return /* @__PURE__ */ jsx(SortFilter, {
|
|
219
|
-
filter,
|
|
220
|
-
selectFilterItem,
|
|
221
|
-
radioButtonFillColor,
|
|
222
|
-
radioButtonHoverColor,
|
|
223
|
-
radioButtonUncheckedBorderColor
|
|
224
|
-
}, filter.filterId);
|
|
225
|
-
return /* @__PURE__ */ jsx(Filter, {
|
|
226
|
-
filter,
|
|
227
|
-
selectFilterItem
|
|
228
|
-
}, filter.filterId);
|
|
229
|
-
})
|
|
230
|
-
})
|
|
231
|
-
});
|
|
232
|
-
};
|
|
233
|
-
|
|
234
|
-
//#endregion
|
|
235
|
-
//#region src/components/SearchFilter/SearchFilterItem.tsx
|
|
236
|
-
const SearchFilterItem = ({ filterItem, onSelectFilterItem, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor }) => {
|
|
237
|
-
const { displayName, isSelected } = filterItem;
|
|
238
|
-
const radioClasses = classNames("spiffy-tw-w-4 spiffy-tw-h-4 spiffy-tw-rounded-full spiffy-tw-border-2", "spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-center", radioButtonUncheckedBorderColor, radioButtonHoverColor, { [radioButtonFillColor]: isSelected });
|
|
239
|
-
return /* @__PURE__ */ jsxs("button", {
|
|
240
|
-
type: "button",
|
|
241
|
-
role: "option",
|
|
242
|
-
"aria-selected": isSelected,
|
|
243
|
-
className: "spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-between spiffy-tw-py-2",
|
|
244
|
-
onClick: () => onSelectFilterItem(filterItem),
|
|
245
|
-
onKeyDown: (event) => {
|
|
246
|
-
if (event.key === "Enter" || event.key === " ") {
|
|
247
|
-
event.preventDefault();
|
|
248
|
-
onSelectFilterItem(filterItem);
|
|
249
|
-
}
|
|
250
|
-
},
|
|
251
|
-
onKeyUp: (event) => {
|
|
252
|
-
if (event.key === " ") event.preventDefault();
|
|
253
|
-
},
|
|
254
|
-
children: [/* @__PURE__ */ jsx(Text, {
|
|
255
|
-
variant: "body3",
|
|
256
|
-
children: displayName
|
|
257
|
-
}), /* @__PURE__ */ jsx("div", {
|
|
258
|
-
className: radioClasses,
|
|
259
|
-
children: isSelected && /* @__PURE__ */ jsx("div", { className: classNames("spiffy-tw-w-2 spiffy-tw-h-2 spiffy-tw-rounded-full", {
|
|
260
|
-
"spiffy-tw-bg-white": radioButtonFillColor.includes("spiffy-tw-bg-"),
|
|
261
|
-
"spiffy-tw-bg-black": radioButtonFillColor.includes("spiffy-tw-bg-white")
|
|
262
|
-
}) })
|
|
263
|
-
})]
|
|
264
|
-
});
|
|
265
|
-
};
|
|
266
|
-
|
|
267
|
-
//#endregion
|
|
268
|
-
export { SearchFilter, SearchFilterFooter, SearchFilterHeader, SearchFilterItem, getSelectedFilterItemsCount, getTotalSelectedFilterItemsCount };
|
|
@@ -1,307 +0,0 @@
|
|
|
1
|
-
const require_chunk = require('./chunk-CUT6urMc.cjs');
|
|
2
|
-
const require_Text = require('./Text-DllCE9_D.cjs');
|
|
3
|
-
const require_Accordion = require('./Accordion-D9gO9_y3.cjs');
|
|
4
|
-
const require_ButtonBase = require('./ButtonBase-VIv-tn7H.cjs');
|
|
5
|
-
const require_ModalSheet = require('./ModalSheet-DwnbbFh7.cjs');
|
|
6
|
-
const require_RadioButtonGroup = require('./RadioButtonGroup-ReQqakpS.cjs');
|
|
7
|
-
const require_ToggleButton = require('./ToggleButton-DfJZ8POQ.cjs');
|
|
8
|
-
let react = require("react");
|
|
9
|
-
react = require_chunk.__toESM(react);
|
|
10
|
-
let classnames = require("classnames");
|
|
11
|
-
classnames = require_chunk.__toESM(classnames);
|
|
12
|
-
let react_jsx_runtime = require("react/jsx-runtime");
|
|
13
|
-
react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
|
|
14
|
-
|
|
15
|
-
//#region src/components/SearchFilter/SearchFilterHeader.tsx
|
|
16
|
-
const SearchFilterHeader = ({ closeModal, productCount, headerClassName, filterCloseIconVariant }) => {
|
|
17
|
-
const closeIconColor = filterCloseIconVariant === "dark" ? "var(--spiffy-colors-text-primary)" : "var(--spiffy-colors-text-light)";
|
|
18
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
19
|
-
className: (0, classnames.default)("spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-between spiffy-tw-px-4 spiffy-tw-py-3", headerClassName),
|
|
20
|
-
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Text.Text, {
|
|
21
|
-
variant: "body2",
|
|
22
|
-
className: "spiffy-tw-font-medium",
|
|
23
|
-
children: [
|
|
24
|
-
"Filters (",
|
|
25
|
-
productCount,
|
|
26
|
-
")"
|
|
27
|
-
]
|
|
28
|
-
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
|
|
29
|
-
onClick: closeModal,
|
|
30
|
-
className: "spiffy-tw-p-2",
|
|
31
|
-
type: "button",
|
|
32
|
-
"aria-label": "Open Filter Menu",
|
|
33
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
|
|
34
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
35
|
-
width: "14",
|
|
36
|
-
height: "14",
|
|
37
|
-
viewBox: "0 0 14 14",
|
|
38
|
-
fill: "none",
|
|
39
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
|
|
40
|
-
d: "M13.7071 1.70711C14.0976 1.31658 14.0976 0.683417 13.7071 0.292893C13.3166 -0.0976311 12.6834 -0.0976311 12.2929 0.292893L7 5.58579L1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L5.58579 7L0.292893 12.2929C-0.0976311 12.6834 -0.0976311 13.3166 0.292893 13.7071C0.683417 14.0976 1.31658 14.0976 1.70711 13.7071L7 8.41421L12.2929 13.7071C12.6834 14.0976 13.3166 14.0976 13.7071 13.7071C14.0976 13.3166 14.0976 12.6834 13.7071 12.2929L8.41421 7L13.7071 1.70711Z",
|
|
41
|
-
fill: closeIconColor
|
|
42
|
-
})
|
|
43
|
-
})
|
|
44
|
-
})]
|
|
45
|
-
});
|
|
46
|
-
};
|
|
47
|
-
|
|
48
|
-
//#endregion
|
|
49
|
-
//#region src/components/SearchFilter/useHasFilterStateChanged.tsx
|
|
50
|
-
const useHasFilterStateChanged = (filters, isOpen) => {
|
|
51
|
-
const [initialFilterStates, setInitialFilterStates] = (0, react.useState)({});
|
|
52
|
-
const currentFilterStates = (0, react.useMemo)(() => {
|
|
53
|
-
const states = {};
|
|
54
|
-
filters.forEach((filter) => {
|
|
55
|
-
filter.items.forEach((item) => {
|
|
56
|
-
states[`${filter.filterId}-${item.filterItemId}`] = item.isSelected;
|
|
57
|
-
});
|
|
58
|
-
});
|
|
59
|
-
return states;
|
|
60
|
-
}, [filters]);
|
|
61
|
-
const hasFiltersChanged = (0, react.useMemo)(() => {
|
|
62
|
-
if (Object.keys(initialFilterStates).length === 0) return false;
|
|
63
|
-
return Object.keys(currentFilterStates).some((key) => currentFilterStates[key] !== initialFilterStates[key]);
|
|
64
|
-
}, [currentFilterStates, initialFilterStates]);
|
|
65
|
-
(0, react.useEffect)(() => {
|
|
66
|
-
if (isOpen) setInitialFilterStates(currentFilterStates);
|
|
67
|
-
}, [isOpen]);
|
|
68
|
-
return hasFiltersChanged;
|
|
69
|
-
};
|
|
70
|
-
|
|
71
|
-
//#endregion
|
|
72
|
-
//#region src/components/SearchFilter/utils.ts
|
|
73
|
-
const getSelectedFilterItemsCount = (filter) => filter.items.filter((item) => item.isSelected).length;
|
|
74
|
-
const getTotalSelectedFilterItemsCount = (filters) => filters.reduce((acc, filter) => {
|
|
75
|
-
if (filter.filterId === "sort") return acc;
|
|
76
|
-
return acc + getSelectedFilterItemsCount(filter);
|
|
77
|
-
}, 0);
|
|
78
|
-
|
|
79
|
-
//#endregion
|
|
80
|
-
//#region src/components/SearchFilter/SearchFilterFooter.tsx
|
|
81
|
-
const SearchFilterFooter = ({ closeModal, clearAllFilters, filterCount, applyFiltersUnchangedClasses, applyFiltersChangedClasses, hasFiltersChanged }) => {
|
|
82
|
-
const clearAllButtonEnabled = filterCount > 0;
|
|
83
|
-
const footerWrapperClassName = (0, classnames.default)({
|
|
84
|
-
"spiffy-tw-flex": true,
|
|
85
|
-
"spiffy-tw-flex-col": true,
|
|
86
|
-
"spiffy-tw-items-center": true,
|
|
87
|
-
"spiffy-tw-justify-between": true,
|
|
88
|
-
"spiffy-tw-w-full": true,
|
|
89
|
-
"spiffy-tw-border-t": true,
|
|
90
|
-
"spiffy-tw-border-t-[--spiffy-colors-border-light]": true,
|
|
91
|
-
"spiffy-tw-p-[16px]": true,
|
|
92
|
-
"spiffy-tw-gap-[16px]": true
|
|
93
|
-
});
|
|
94
|
-
const applyFilterButtonClassName = (0, classnames.default)("spiffy-tw-flex spiffy-tw-flex-row spiffy-tw-justify-center spiffy-tw-rounded-[8px] spiffy-tw-w-full", hasFiltersChanged ? applyFiltersChangedClasses : applyFiltersUnchangedClasses);
|
|
95
|
-
const clearAllButtonClassName = (0, classnames.default)({
|
|
96
|
-
"spiffy-tw-flex": true,
|
|
97
|
-
"spiffy-tw-flex-row": true,
|
|
98
|
-
"spiffy-tw-justify-center": true,
|
|
99
|
-
"spiffy-tw-w-full": true,
|
|
100
|
-
"spiffy-tw-text-[--spiffy-colors-text-primary]": clearAllButtonEnabled,
|
|
101
|
-
"spiffy-tw-text-[--spiffy-colors-text-secondary]": !clearAllButtonEnabled
|
|
102
|
-
});
|
|
103
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
104
|
-
className: footerWrapperClassName,
|
|
105
|
-
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ButtonBase.ButtonBase, {
|
|
106
|
-
isDisabled: !hasFiltersChanged,
|
|
107
|
-
buttonClass: applyFilterButtonClassName,
|
|
108
|
-
text: "Apply Filters",
|
|
109
|
-
onClick: closeModal
|
|
110
|
-
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ButtonBase.ButtonBase, {
|
|
111
|
-
isDisabled: !clearAllButtonEnabled,
|
|
112
|
-
buttonClass: clearAllButtonClassName,
|
|
113
|
-
text: "Clear All",
|
|
114
|
-
onClick: clearAllFilters
|
|
115
|
-
})]
|
|
116
|
-
});
|
|
117
|
-
};
|
|
118
|
-
|
|
119
|
-
//#endregion
|
|
120
|
-
//#region src/components/SearchFilter/SearchFilter.tsx
|
|
121
|
-
const SortFilter = ({ filter, selectFilterItem, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor }) => {
|
|
122
|
-
const filterTitle = filter.displayName;
|
|
123
|
-
const options = filter.items.map((item) => ({
|
|
124
|
-
label: item.displayName,
|
|
125
|
-
value: item.filterItemId,
|
|
126
|
-
isSelected: item.isSelected
|
|
127
|
-
}));
|
|
128
|
-
const content = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_RadioButtonGroup.RadioButtonGroup, {
|
|
129
|
-
options,
|
|
130
|
-
name: filterTitle,
|
|
131
|
-
onChange: (value) => {
|
|
132
|
-
const selectedItem = filter.items.find((item) => item.filterItemId === value);
|
|
133
|
-
selectFilterItem({
|
|
134
|
-
filterId: filter.filterId,
|
|
135
|
-
filterItemId: value,
|
|
136
|
-
isSelected: true,
|
|
137
|
-
displayName: selectedItem?.displayName || value
|
|
138
|
-
});
|
|
139
|
-
},
|
|
140
|
-
gap: "large",
|
|
141
|
-
textButtonGap: "large",
|
|
142
|
-
value: filter.items.find((item) => item.isSelected)?.filterItemId,
|
|
143
|
-
fillColor: radioButtonFillColor,
|
|
144
|
-
hoverColor: radioButtonHoverColor,
|
|
145
|
-
uncheckedBorderColor: radioButtonUncheckedBorderColor
|
|
146
|
-
});
|
|
147
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Accordion.Accordion, {
|
|
148
|
-
title: filterTitle,
|
|
149
|
-
content
|
|
150
|
-
});
|
|
151
|
-
};
|
|
152
|
-
const FilterItem = ({ filterId, filterItem, selectFilterItem }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ToggleButton.ToggleButton, {
|
|
153
|
-
label: filterItem.displayName,
|
|
154
|
-
secondaryLabel: `(${filterItem.productCount})`,
|
|
155
|
-
isSelected: filterItem.isSelected,
|
|
156
|
-
onClick: () => selectFilterItem({
|
|
157
|
-
filterId,
|
|
158
|
-
filterItemId: filterItem.filterItemId,
|
|
159
|
-
isSelected: !filterItem.isSelected,
|
|
160
|
-
displayName: filterItem.displayName
|
|
161
|
-
}),
|
|
162
|
-
variant: "default"
|
|
163
|
-
});
|
|
164
|
-
const Filter = ({ filter, selectFilterItem }) => {
|
|
165
|
-
const filterContentClassName = (0, classnames.default)({
|
|
166
|
-
"spiffy-tw-flex": true,
|
|
167
|
-
"spiffy-tw-flex-wrap": true,
|
|
168
|
-
"spiffy-tw-gap-[8px]": true,
|
|
169
|
-
"spiffy-tw-pb-[1px]": true
|
|
170
|
-
});
|
|
171
|
-
const selectedFilterItems = getSelectedFilterItemsCount(filter);
|
|
172
|
-
const filterTitle = selectedFilterItems > 0 ? `${filter.displayName} (${selectedFilterItems})` : filter.displayName;
|
|
173
|
-
const content = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
174
|
-
className: filterContentClassName,
|
|
175
|
-
children: filter.items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterItem, {
|
|
176
|
-
filterId: filter.filterId,
|
|
177
|
-
filterItem: item,
|
|
178
|
-
selectFilterItem
|
|
179
|
-
}, item.filterItemId))
|
|
180
|
-
});
|
|
181
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Accordion.Accordion, {
|
|
182
|
-
title: filterTitle,
|
|
183
|
-
content
|
|
184
|
-
});
|
|
185
|
-
};
|
|
186
|
-
const SearchFilter = ({ filters, productCount, selectFilterItem, clearAllFilters, isOpen, setIsOpen, applyFiltersUnchangedClasses, applyFiltersChangedClasses, headerContent, footerContent, headerClassName, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor, filterCloseIconVariant }) => {
|
|
187
|
-
const closeModal = (0, react.useCallback)(() => setIsOpen(false), [setIsOpen]);
|
|
188
|
-
const filterCount = getTotalSelectedFilterItemsCount(filters);
|
|
189
|
-
const hasFiltersChanged = useHasFilterStateChanged(filters, isOpen);
|
|
190
|
-
const filterWrapperClassName = (0, classnames.default)({
|
|
191
|
-
"spiffy-tw-flex": true,
|
|
192
|
-
"spiffy-tw-flex-col": true,
|
|
193
|
-
"spiffy-tw-gap-[16px]": true,
|
|
194
|
-
"spiffy-tw-px-[24px]": true,
|
|
195
|
-
"spiffy-tw-py-[16px]": true,
|
|
196
|
-
"spiffy-tw-max-h-screen": true,
|
|
197
|
-
"spiffy-tw-overflow-y-auto": true
|
|
198
|
-
});
|
|
199
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ModalSheet.ModalSheet, {
|
|
200
|
-
isOpen,
|
|
201
|
-
closeModal,
|
|
202
|
-
headerProps: {
|
|
203
|
-
headerContent: headerContent || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchFilterHeader, {
|
|
204
|
-
closeModal,
|
|
205
|
-
productCount,
|
|
206
|
-
headerClassName: headerClassName ?? "",
|
|
207
|
-
filterCloseIconVariant
|
|
208
|
-
}),
|
|
209
|
-
chevronColor: "#000"
|
|
210
|
-
},
|
|
211
|
-
footerProps: { footerContent: footerContent || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchFilterFooter, {
|
|
212
|
-
closeModal,
|
|
213
|
-
clearAllFilters,
|
|
214
|
-
filterCount,
|
|
215
|
-
hasFiltersChanged,
|
|
216
|
-
applyFiltersUnchangedClasses,
|
|
217
|
-
applyFiltersChangedClasses
|
|
218
|
-
}) },
|
|
219
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
220
|
-
className: filterWrapperClassName,
|
|
221
|
-
children: filters.filter((filter) => filter.displayName !== "").map((filter) => {
|
|
222
|
-
if (filter.filterId === "sort") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortFilter, {
|
|
223
|
-
filter,
|
|
224
|
-
selectFilterItem,
|
|
225
|
-
radioButtonFillColor,
|
|
226
|
-
radioButtonHoverColor,
|
|
227
|
-
radioButtonUncheckedBorderColor
|
|
228
|
-
}, filter.filterId);
|
|
229
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Filter, {
|
|
230
|
-
filter,
|
|
231
|
-
selectFilterItem
|
|
232
|
-
}, filter.filterId);
|
|
233
|
-
})
|
|
234
|
-
})
|
|
235
|
-
});
|
|
236
|
-
};
|
|
237
|
-
|
|
238
|
-
//#endregion
|
|
239
|
-
//#region src/components/SearchFilter/SearchFilterItem.tsx
|
|
240
|
-
const SearchFilterItem = ({ filterItem, onSelectFilterItem, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor }) => {
|
|
241
|
-
const { displayName, isSelected } = filterItem;
|
|
242
|
-
const radioClasses = (0, classnames.default)("spiffy-tw-w-4 spiffy-tw-h-4 spiffy-tw-rounded-full spiffy-tw-border-2", "spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-center", radioButtonUncheckedBorderColor, radioButtonHoverColor, { [radioButtonFillColor]: isSelected });
|
|
243
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
|
|
244
|
-
type: "button",
|
|
245
|
-
role: "option",
|
|
246
|
-
"aria-selected": isSelected,
|
|
247
|
-
className: "spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-between spiffy-tw-py-2",
|
|
248
|
-
onClick: () => onSelectFilterItem(filterItem),
|
|
249
|
-
onKeyDown: (event) => {
|
|
250
|
-
if (event.key === "Enter" || event.key === " ") {
|
|
251
|
-
event.preventDefault();
|
|
252
|
-
onSelectFilterItem(filterItem);
|
|
253
|
-
}
|
|
254
|
-
},
|
|
255
|
-
onKeyUp: (event) => {
|
|
256
|
-
if (event.key === " ") event.preventDefault();
|
|
257
|
-
},
|
|
258
|
-
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
|
|
259
|
-
variant: "body3",
|
|
260
|
-
children: displayName
|
|
261
|
-
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
262
|
-
className: radioClasses,
|
|
263
|
-
children: isSelected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, classnames.default)("spiffy-tw-w-2 spiffy-tw-h-2 spiffy-tw-rounded-full", {
|
|
264
|
-
"spiffy-tw-bg-white": radioButtonFillColor.includes("spiffy-tw-bg-"),
|
|
265
|
-
"spiffy-tw-bg-black": radioButtonFillColor.includes("spiffy-tw-bg-white")
|
|
266
|
-
}) })
|
|
267
|
-
})]
|
|
268
|
-
});
|
|
269
|
-
};
|
|
270
|
-
|
|
271
|
-
//#endregion
|
|
272
|
-
Object.defineProperty(exports, 'SearchFilter', {
|
|
273
|
-
enumerable: true,
|
|
274
|
-
get: function () {
|
|
275
|
-
return SearchFilter;
|
|
276
|
-
}
|
|
277
|
-
});
|
|
278
|
-
Object.defineProperty(exports, 'SearchFilterFooter', {
|
|
279
|
-
enumerable: true,
|
|
280
|
-
get: function () {
|
|
281
|
-
return SearchFilterFooter;
|
|
282
|
-
}
|
|
283
|
-
});
|
|
284
|
-
Object.defineProperty(exports, 'SearchFilterHeader', {
|
|
285
|
-
enumerable: true,
|
|
286
|
-
get: function () {
|
|
287
|
-
return SearchFilterHeader;
|
|
288
|
-
}
|
|
289
|
-
});
|
|
290
|
-
Object.defineProperty(exports, 'SearchFilterItem', {
|
|
291
|
-
enumerable: true,
|
|
292
|
-
get: function () {
|
|
293
|
-
return SearchFilterItem;
|
|
294
|
-
}
|
|
295
|
-
});
|
|
296
|
-
Object.defineProperty(exports, 'getSelectedFilterItemsCount', {
|
|
297
|
-
enumerable: true,
|
|
298
|
-
get: function () {
|
|
299
|
-
return getSelectedFilterItemsCount;
|
|
300
|
-
}
|
|
301
|
-
});
|
|
302
|
-
Object.defineProperty(exports, 'getTotalSelectedFilterItemsCount', {
|
|
303
|
-
enumerable: true,
|
|
304
|
-
get: function () {
|
|
305
|
-
return getTotalSelectedFilterItemsCount;
|
|
306
|
-
}
|
|
307
|
-
});
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
require('../textVariantClasses-CBre7vXv.cjs');
|
|
2
|
-
require('../TextInput-CGs4BY1q.cjs');
|
|
3
|
-
require('../colorsConfig-CqCKftuM.cjs');
|
|
4
|
-
const require_SearchInput = require('../SearchInput--x9NTMTb.cjs');
|
|
5
|
-
|
|
6
|
-
exports.SearchInput = require_SearchInput.SearchInput;
|
|
7
|
-
exports.searchInputVariantClasses = require_SearchInput.searchInputVariantClasses;
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import { SearchInputVariant as SearchInputVariant$1 } from "../types-BhGjnuWx.cjs";
|
|
2
|
-
import { TextStyleVariantMap } from "../textVariantClasses-B0gNjzl4.cjs";
|
|
3
|
-
import React from "react";
|
|
4
|
-
import { SearchInputVariant } from "@envive-ai/react-hooks/contexts/types";
|
|
5
|
-
|
|
6
|
-
//#region src/components/SearchInput/SearchInput.d.ts
|
|
7
|
-
interface SearchInputProps {
|
|
8
|
-
searchInputVariant?: SearchInputVariant;
|
|
9
|
-
value: string;
|
|
10
|
-
placeholder?: string;
|
|
11
|
-
suggestions?: string[];
|
|
12
|
-
className?: string;
|
|
13
|
-
dataTestId?: string;
|
|
14
|
-
ariaActivedescendant?: string;
|
|
15
|
-
onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
16
|
-
onChange: (newValue: string) => void;
|
|
17
|
-
onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
18
|
-
onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
19
|
-
}
|
|
20
|
-
declare const SearchInput: React.ForwardRefExoticComponent<SearchInputProps & React.RefAttributes<HTMLInputElement>>;
|
|
21
|
-
//#endregion
|
|
22
|
-
//#region src/components/SearchInput/searchInputVariants.d.ts
|
|
23
|
-
type SearchInputVariantClasses = {
|
|
24
|
-
searchInputIconColor: string;
|
|
25
|
-
searchInputBorderColor: string;
|
|
26
|
-
searchInputCloseIconClasses: string;
|
|
27
|
-
searchInputActiveStarClasses: string;
|
|
28
|
-
autocompleteIconColor: string;
|
|
29
|
-
searchInputClasses: string;
|
|
30
|
-
placeholderVariant: keyof typeof TextStyleVariantMap;
|
|
31
|
-
};
|
|
32
|
-
declare const searchInputVariantClasses: Record<SearchInputVariant$1, SearchInputVariantClasses>;
|
|
33
|
-
//#endregion
|
|
34
|
-
export { SearchInput, searchInputVariantClasses };
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import { SearchInputVariant as SearchInputVariant$1 } from "../types-CTOdb0G0.js";
|
|
2
|
-
import { TextStyleVariantMap } from "../textVariantClasses-Bl8SAGwZ.js";
|
|
3
|
-
import React from "react";
|
|
4
|
-
import { SearchInputVariant } from "@envive-ai/react-hooks/contexts/types";
|
|
5
|
-
|
|
6
|
-
//#region src/components/SearchInput/SearchInput.d.ts
|
|
7
|
-
interface SearchInputProps {
|
|
8
|
-
searchInputVariant?: SearchInputVariant;
|
|
9
|
-
value: string;
|
|
10
|
-
placeholder?: string;
|
|
11
|
-
suggestions?: string[];
|
|
12
|
-
className?: string;
|
|
13
|
-
dataTestId?: string;
|
|
14
|
-
ariaActivedescendant?: string;
|
|
15
|
-
onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
16
|
-
onChange: (newValue: string) => void;
|
|
17
|
-
onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
18
|
-
onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
19
|
-
}
|
|
20
|
-
declare const SearchInput: React.ForwardRefExoticComponent<SearchInputProps & React.RefAttributes<HTMLInputElement>>;
|
|
21
|
-
//#endregion
|
|
22
|
-
//#region src/components/SearchInput/searchInputVariants.d.ts
|
|
23
|
-
type SearchInputVariantClasses = {
|
|
24
|
-
searchInputIconColor: string;
|
|
25
|
-
searchInputBorderColor: string;
|
|
26
|
-
searchInputCloseIconClasses: string;
|
|
27
|
-
searchInputActiveStarClasses: string;
|
|
28
|
-
autocompleteIconColor: string;
|
|
29
|
-
searchInputClasses: string;
|
|
30
|
-
placeholderVariant: keyof typeof TextStyleVariantMap;
|
|
31
|
-
};
|
|
32
|
-
declare const searchInputVariantClasses: Record<SearchInputVariant$1, SearchInputVariantClasses>;
|
|
33
|
-
//#endregion
|
|
34
|
-
export { SearchInput, searchInputVariantClasses };
|