@envive-ai/react-toolkit 0.1.10 → 0.1.11

package/src/components/SearchFilter/useHasFilterStateChanged.tsx

@@ -0,0 +1,40 @@
+import { useState, useMemo, useEffect } from 'react';
+import { SearchFilterDatum } from '@envive-ai/react-hooks/types';
+
+export const useHasFilterStateChanged = (filters: SearchFilterDatum[], isOpen: boolean) => {
+  // Track initial filter states when modal opens
+  const [initialFilterStates, setInitialFilterStates] = useState<Record<string, boolean>>({});
+
+  // Create current filter states map to check for filter changes
+  const currentFilterStates = useMemo(() => {
+    const states: Record<string, boolean> = {};
+    filters.forEach((filter) => {
+      filter.items.forEach((item) => {
+        states[`${filter.filterId}-${item.filterItemId}`] = item.isSelected;
+      });
+    });
+    return states;
+  }, [filters]);
+
+  // Check if filters have changed by comparing states
+  const hasFiltersChanged = useMemo(() => {
+    // If no initial states captured yet, no changes
+    if (Object.keys(initialFilterStates).length === 0) {
+      return false;
+    }
+
+    const changed = Object.keys(currentFilterStates).some(
+      (key) => currentFilterStates[key] !== initialFilterStates[key],
+    );
+
+    return changed;
+  }, [currentFilterStates, initialFilterStates]);
+
+  useEffect(() => {
+    if (isOpen) {
+      setInitialFilterStates(currentFilterStates);
+    }
+  }, [isOpen]);
+
+  return hasFiltersChanged;
+};

package/src/components/SearchFilter/utils.ts

@@ -0,0 +1,15 @@
+import { SearchFilterDatum, SearchFilterItemDatum } from '@envive-ai/react-hooks/types';
+
+export const getSelectedFilterItemsCount = (filter: SearchFilterDatum) => {
+  return filter.items.filter((item: SearchFilterItemDatum) => item.isSelected).length;
+};
+
+// Gets the count of total active filters excluding sort filters
+export const getTotalSelectedFilterItemsCount = (filters: SearchFilterDatum[]) => {
+  return filters.reduce((acc: number, filter: SearchFilterDatum) => {
+    if (filter.filterId === 'sort') {
+      return acc;
+    }
+    return acc + getSelectedFilterItemsCount(filter);
+  }, 0);
+};

package/src/components/SearchResultsFilterSidebar/SearchResultsFilter.tsx

@@ -1,11 +1,11 @@
 import { useCallback } from 'react';
 
 import { searchFilterSidebarVariantClasses } from './searchFilterSidebarVariants';
-import SettingsVariant from '@envive-ai/react-icons/SettingsVariant';
 import { ButtonBase } from '../ButtonBase';
 import { SearchFilter, SearchFilterHeader } from '../SearchFilter';
 import { SearchFilterSidebarVariant } from './types';
 import { SearchFilterDatum, SelectFilterItem } from '@envive-ai/react-hooks/types';
+import SettingsVariant from '@envive-ai/react-icons/src/SettingsVariant.js';
 
 export type SearchResultsFilterProps = {
   productCount: number;
@@ -58,7 +58,7 @@ export const SearchResultsFilter = ({
         radioButtonFillColor={radioButtonFillColor}
         radioButtonHoverColor={radioButtonHoverColor}
         radioButtonUncheckedBorderColor={radioButtonUncheckedBorderColor}
-        // filterCloseIconVariant={filterCloseIconVariant}
+        filterCloseIconVariant={filterCloseIconVariant}
         headerContent={
           <SearchFilterHeader
             closeModal={() => setIsOpen(false)}

package/src/components/ToggleButton/ToggleButton.tsx

@@ -0,0 +1,98 @@
+import classNames from 'classnames';
+import { Text } from 'src/components/Text';
+
+export type ToggleButtonProps = {
+  isSelected: boolean;
+  variant: ToggleButtonVariant;
+  onClick: () => void;
+  label: string;
+  buttonClassName?: string;
+  labelClassName?: string;
+  secondaryLabel?: string;
+  secondaryLabelClassName?: string;
+  icon?: React.ReactNode;
+  iconClassName?: string;
+};
+
+export type ToggleButtonVariant = 'default';
+
+type ToggleButtonVariantProps = {
+  isSelected: boolean;
+};
+type ToggleButtonClassNameFn = (props: ToggleButtonVariantProps) => string;
+
+const toggleButtonVariants: Record<
+  ToggleButtonVariant,
+  Record<'button' | 'label' | 'secondaryLabel', ToggleButtonClassNameFn>
+> = {
+  default: {
+    button: ({ isSelected }: ToggleButtonVariantProps): string =>
+      classNames({
+        'spiffy-tw-bg-[--spiffy-colors-background-dark]': isSelected,
+        'spiffy-tw-border-[--spiffy-colors-background-dark]': isSelected,
+        'spiffy-tw-text-[--spiffy-colors-text-light]': isSelected,
+        'hover:spiffy-tw-bg-[--spiffy-colors-background-secondary-dark]': true,
+        'hover:spiffy-tw-text-[--spiffy-colors-text-primary]': isSelected,
+        'spiffy-tw-bg-[--spiffy-colors-background-light]': !isSelected,
+        'spiffy-tw-border-[--spiffy-colors-border-light]': !isSelected,
+        'spiffy-tw-text-[--spiffy-colors-text-primary]': !isSelected,
+      }),
+    label: () => '',
+    secondaryLabel: ({ isSelected }: ToggleButtonVariantProps) =>
+      classNames({
+        'spiffy-tw-text-[--spiffy-colors-text-secondary]': !isSelected,
+        'hover:spiffy-tw-text-[--spiffy-colors-text-secondary]': !isSelected,
+      }),
+  },
+};
+
+export const ToggleButton = ({
+  isSelected,
+  onClick,
+  label,
+  buttonClassName,
+  labelClassName,
+  secondaryLabel,
+  secondaryLabelClassName,
+  icon,
+  iconClassName,
+  variant,
+}: ToggleButtonProps) => {
+  const buttonClassNames = classNames(
+    {
+      'spiffy-tw-flex': true,
+      'spiffy-tw-items-center': true,
+      'spiffy-tw-gap-[4px]': true,
+      'spiffy-tw-cursor-pointer': true,
+      'spiffy-tw-py-[8px]': true,
+      'spiffy-tw-px-[12px]': true,
+      'spiffy-tw-rounded-[200px]': true,
+      'spiffy-tw-border': true,
+    },
+    toggleButtonVariants?.[variant]?.button({ isSelected }),
+    buttonClassName,
+  );
+  const labelClassNames = classNames(
+    {},
+    toggleButtonVariants?.[variant]?.label({ isSelected }),
+    labelClassName,
+  );
+  const secondaryLabelClassNames = classNames(
+    {},
+    toggleButtonVariants?.[variant]?.secondaryLabel({ isSelected }),
+    secondaryLabelClassName,
+  );
+  return (
+    <button className={buttonClassNames} onClick={onClick} type="button">
+      {icon && <div className={iconClassName}>{icon}</div>}
+      <Text variant="body3" className={labelClassNames}>
+        {label}
+      </Text>
+      {secondaryLabel && (
+        <Text variant="body4" className={secondaryLabelClassNames}>
+          {secondaryLabel}
+        </Text>
+      )}
+    </button>
+  );
+};

package/src/components/ToggleButton/index.ts

@@ -0,0 +1 @@
+export * from './ToggleButton';

package/dist/SearchFilter-CLYCSNAa.cjs

@@ -1,137 +0,0 @@
-const require_chunk = require('./chunk-CUT6urMc.cjs');
-const require_Text = require('./Text-MQjxqgZZ.cjs');
-const require_ButtonBase = require('./ButtonBase-DGpQBeLR.cjs');
-let classnames = require("classnames");
-classnames = require_chunk.__toESM(classnames);
-let react_jsx_runtime = require("react/jsx-runtime");
-react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
-
-//#region src/components/SearchFilter/SearchFilterItem.tsx
-const SearchFilterItem = ({ filterItem, onSelectFilterItem, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor }) => {
-	const { displayName, isSelected } = filterItem;
-	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 });
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-		className: "spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-between spiffy-tw-py-2 spiffy-tw-cursor-pointer",
-		onClick: () => onSelectFilterItem(filterItem),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
-			variant: "body3",
-			children: displayName
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: radioClasses,
-			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", {
-				"spiffy-tw-bg-white": radioButtonFillColor.includes("spiffy-tw-bg-"),
-				"spiffy-tw-bg-black": radioButtonFillColor.includes("spiffy-tw-bg-white")
-			}) })
-		})]
-	});
-};
-
-//#endregion
-//#region src/components/SearchFilter/SearchFilter.tsx
-const SearchFilter = ({ isOpen, setIsOpen, filters, selectFilterItem, clearAllFilters, filterButtonText, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor, headerContent }) => {
-	const modalClasses = (0, classnames.default)("spiffy-tw-fixed spiffy-tw-inset-0 spiffy-tw-z-50 spiffy-tw-flex spiffy-tw-transform spiffy-tw-transition-all", {
-		"spiffy-tw-translate-x-full": !isOpen,
-		"spiffy-tw-translate-x-0": isOpen
-	});
-	const overlayClasses = (0, classnames.default)("spiffy-tw-absolute spiffy-tw-inset-0 spiffy-tw-bg-black spiffy-tw-bg-opacity-50", {
-		"spiffy-tw-opacity-0": !isOpen,
-		"spiffy-tw-opacity-100": isOpen
-	});
-	const sidebarClasses = (0, classnames.default)("spiffy-tw-relative spiffy-tw-ml-auto spiffy-tw-flex spiffy-tw-h-full spiffy-tw-w-full spiffy-tw-max-w-xs spiffy-tw-flex-col spiffy-tw-overflow-y-auto spiffy-tw-bg-[--spiffy-colors-background-light] spiffy-tw-py-4 spiffy-tw-shadow-xl");
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: modalClasses,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: overlayClasses,
-			onClick: () => setIsOpen(false)
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: sidebarClasses,
-			children: [
-				headerContent,
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "spiffy-tw-flex-1 spiffy-tw-px-4 spiffy-tw-py-6",
-					children: filters.map((filter) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "spiffy-tw-mb-6",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
-							variant: "body2",
-							className: "spiffy-tw-font-medium spiffy-tw-mb-3",
-							children: filter.displayName
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", { children: filter.items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchFilterItem, {
-							filterItem: {
-								...item,
-								filterId: filter.filterId
-							},
-							onSelectFilterItem: selectFilterItem,
-							radioButtonFillColor,
-							radioButtonHoverColor,
-							radioButtonUncheckedBorderColor
-						}, item.filterItemId)) })]
-					}, filter.filterId))
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "spiffy-tw-border-t spiffy-tw-border-[--spiffy-colors-border-light] spiffy-tw-px-4 spiffy-tw-py-3",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ButtonBase.ButtonBase, {
-						onClick: clearAllFilters,
-						text: "Clear All",
-						buttonClass: "spiffy-tw-w-full spiffy-tw-mb-2"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ButtonBase.ButtonBase, {
-						onClick: () => setIsOpen(false),
-						text: filterButtonText,
-						buttonClass: "spiffy-tw-w-full"
-					})]
-				})
-			]
-		})]
-	});
-};
-
-//#endregion
-//#region src/components/SearchFilter/SearchFilterHeader.tsx
-const SearchFilterHeader = ({ closeModal, productCount, headerClassName, filterCloseIconVariant }) => {
-	const closeIconColor = filterCloseIconVariant === "dark" ? "var(--spiffy-colors-text-primary)" : "var(--spiffy-colors-text-light)";
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, classnames.default)("spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-between spiffy-tw-px-4 spiffy-tw-py-3", headerClassName),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Text.Text, {
-			variant: "body2",
-			className: "spiffy-tw-font-medium",
-			children: [
-				"Filters (",
-				productCount,
-				")"
-			]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-			onClick: closeModal,
-			className: "spiffy-tw-p-2",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-				xmlns: "http://www.w3.org/2000/svg",
-				width: "14",
-				height: "14",
-				viewBox: "0 0 14 14",
-				fill: "none",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-					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",
-					fill: closeIconColor
-				})
-			})
-		})]
-	});
-};
-
-//#endregion
-Object.defineProperty(exports, 'SearchFilter', {
-  enumerable: true,
-  get: function () {
-    return SearchFilter;
-  }
-});
-Object.defineProperty(exports, 'SearchFilterHeader', {
-  enumerable: true,
-  get: function () {
-    return SearchFilterHeader;
-  }
-});
-Object.defineProperty(exports, 'SearchFilterItem', {
-  enumerable: true,
-  get: function () {
-    return SearchFilterItem;
-  }
-});

package/dist/SearchFilter-qQPpx-34.js

@@ -1,117 +0,0 @@
-import { Text } from "./Text-Bod4OMPk.js";
-import { ButtonBase } from "./ButtonBase-DGbSm0SJ.js";
-import classNames from "classnames";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/components/SearchFilter/SearchFilterItem.tsx
-const SearchFilterItem = ({ filterItem, onSelectFilterItem, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor }) => {
-	const { displayName, isSelected } = filterItem;
-	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 });
-	return /* @__PURE__ */ jsxs("li", {
-		className: "spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-between spiffy-tw-py-2 spiffy-tw-cursor-pointer",
-		onClick: () => onSelectFilterItem(filterItem),
-		children: [/* @__PURE__ */ jsx(Text, {
-			variant: "body3",
-			children: displayName
-		}), /* @__PURE__ */ jsx("div", {
-			className: radioClasses,
-			children: isSelected && /* @__PURE__ */ jsx("div", { className: classNames("spiffy-tw-w-2 spiffy-tw-h-2 spiffy-tw-rounded-full", {
-				"spiffy-tw-bg-white": radioButtonFillColor.includes("spiffy-tw-bg-"),
-				"spiffy-tw-bg-black": radioButtonFillColor.includes("spiffy-tw-bg-white")
-			}) })
-		})]
-	});
-};
-
-//#endregion
-//#region src/components/SearchFilter/SearchFilter.tsx
-const SearchFilter = ({ isOpen, setIsOpen, filters, selectFilterItem, clearAllFilters, filterButtonText, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor, headerContent }) => {
-	const modalClasses = classNames("spiffy-tw-fixed spiffy-tw-inset-0 spiffy-tw-z-50 spiffy-tw-flex spiffy-tw-transform spiffy-tw-transition-all", {
-		"spiffy-tw-translate-x-full": !isOpen,
-		"spiffy-tw-translate-x-0": isOpen
-	});
-	const overlayClasses = classNames("spiffy-tw-absolute spiffy-tw-inset-0 spiffy-tw-bg-black spiffy-tw-bg-opacity-50", {
-		"spiffy-tw-opacity-0": !isOpen,
-		"spiffy-tw-opacity-100": isOpen
-	});
-	const sidebarClasses = classNames("spiffy-tw-relative spiffy-tw-ml-auto spiffy-tw-flex spiffy-tw-h-full spiffy-tw-w-full spiffy-tw-max-w-xs spiffy-tw-flex-col spiffy-tw-overflow-y-auto spiffy-tw-bg-[--spiffy-colors-background-light] spiffy-tw-py-4 spiffy-tw-shadow-xl");
-	return /* @__PURE__ */ jsxs("div", {
-		className: modalClasses,
-		children: [/* @__PURE__ */ jsx("div", {
-			className: overlayClasses,
-			onClick: () => setIsOpen(false)
-		}), /* @__PURE__ */ jsxs("div", {
-			className: sidebarClasses,
-			children: [
-				headerContent,
-				/* @__PURE__ */ jsx("div", {
-					className: "spiffy-tw-flex-1 spiffy-tw-px-4 spiffy-tw-py-6",
-					children: filters.map((filter) => /* @__PURE__ */ jsxs("div", {
-						className: "spiffy-tw-mb-6",
-						children: [/* @__PURE__ */ jsx(Text, {
-							variant: "body2",
-							className: "spiffy-tw-font-medium spiffy-tw-mb-3",
-							children: filter.displayName
-						}), /* @__PURE__ */ jsx("ul", { children: filter.items.map((item) => /* @__PURE__ */ jsx(SearchFilterItem, {
-							filterItem: {
-								...item,
-								filterId: filter.filterId
-							},
-							onSelectFilterItem: selectFilterItem,
-							radioButtonFillColor,
-							radioButtonHoverColor,
-							radioButtonUncheckedBorderColor
-						}, item.filterItemId)) })]
-					}, filter.filterId))
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "spiffy-tw-border-t spiffy-tw-border-[--spiffy-colors-border-light] spiffy-tw-px-4 spiffy-tw-py-3",
-					children: [/* @__PURE__ */ jsx(ButtonBase, {
-						onClick: clearAllFilters,
-						text: "Clear All",
-						buttonClass: "spiffy-tw-w-full spiffy-tw-mb-2"
-					}), /* @__PURE__ */ jsx(ButtonBase, {
-						onClick: () => setIsOpen(false),
-						text: filterButtonText,
-						buttonClass: "spiffy-tw-w-full"
-					})]
-				})
-			]
-		})]
-	});
-};
-
-//#endregion
-//#region src/components/SearchFilter/SearchFilterHeader.tsx
-const SearchFilterHeader = ({ closeModal, productCount, headerClassName, filterCloseIconVariant }) => {
-	const closeIconColor = filterCloseIconVariant === "dark" ? "var(--spiffy-colors-text-primary)" : "var(--spiffy-colors-text-light)";
-	return /* @__PURE__ */ jsxs("div", {
-		className: classNames("spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-between spiffy-tw-px-4 spiffy-tw-py-3", headerClassName),
-		children: [/* @__PURE__ */ jsxs(Text, {
-			variant: "body2",
-			className: "spiffy-tw-font-medium",
-			children: [
-				"Filters (",
-				productCount,
-				")"
-			]
-		}), /* @__PURE__ */ jsx("button", {
-			onClick: closeModal,
-			className: "spiffy-tw-p-2",
-			children: /* @__PURE__ */ jsx("svg", {
-				xmlns: "http://www.w3.org/2000/svg",
-				width: "14",
-				height: "14",
-				viewBox: "0 0 14 14",
-				fill: "none",
-				children: /* @__PURE__ */ jsx("path", {
-					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",
-					fill: closeIconColor
-				})
-			})
-		})]
-	});
-};
-
-//#endregion
-export { SearchFilter, SearchFilterHeader, SearchFilterItem };