@envive-ai/react-toolkit 0.2.4 → 0.2.6

package/dist/{index-B5p2z61Y.d.ts → index-DGfkVcQx.d.ts}

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import * as react_jsx_runtime8 from "react/jsx-runtime";
+import * as react_jsx_runtime12 from "react/jsx-runtime";
 import { TestProps } from "@envive-ai/react-hooks/types";
 import { ResponseCategory, SearchResponseProduct } from "@spiffy-ai/commerce-api-client";
 
@@ -261,7 +261,7 @@ declare const RatingSummary: ({
   stars,
   reviewCount,
   className
-}: RatingSummaryProps) => react_jsx_runtime8.JSX.Element;
+}: RatingSummaryProps) => react_jsx_runtime12.JSX.Element;
 interface PriceSectionProps {
   originalPrice?: string;
   salePrice?: string;
@@ -271,7 +271,7 @@ declare const PriceSection: ({
   originalPrice,
   salePrice,
   pricePrefix
-}: PriceSectionProps) => react_jsx_runtime8.JSX.Element;
+}: PriceSectionProps) => react_jsx_runtime12.JSX.Element;
 interface ProductCardProps extends TestProps {
   productCardConfig?: ProductCardConfig;
   merchantShortName: string;
@@ -308,7 +308,7 @@ declare const ProductCard: ({
   aspectRatio,
   growWithContainer,
   handleClick
-}: ProductCardProps) => react_jsx_runtime8.JSX.Element;
+}: ProductCardProps) => react_jsx_runtime12.JSX.Element;
 //#endregion
 //#region src/components/ProductCard/ProductCardSkeleton.d.ts
 declare const ProductCardSkeleton: FC<ProductCardSkeletonProps>;

package/dist/{index-BH-QK27q.d.ts → index-Qtr26aUO.d.ts}

@@ -1,4 +1,4 @@
-import { ElementTypes, TypographyVariantMap } from "./typographyVariantClasses-COmQXqcN.js";
+import { ElementTypes, TypographyVariantMap } from "./typographyVariantClasses-B6wiawat.js";
 import React from "react";
 
 //#region src/components/Typography/Typography.d.ts

package/dist/{searchFilterSidebarVariants-DXabOauB.cjs → searchFilterSidebarVariants-B1P8YS86.cjs}

@@ -1,4 +1,4 @@
-const require_colorsConfig = require('./colorsConfig-D-MZuBvt.cjs');
+const require_colorsConfig = require('./colorsConfig-BjmNL7s7.cjs');
 
 //#region src/components/SearchResultsFilterSidebar/searchFilterSidebarVariants.ts
 const searchFilterSidebarVariantClasses = {

package/dist/{searchFilterSidebarVariants-BD4SYugF.js → searchFilterSidebarVariants-CN9_kzJ8.js}

@@ -1,4 +1,4 @@
-import { ColorNames, colorVar } from "./colorsConfig-DEfiLHH0.js";
+import { ColorNames, colorVar } from "./colorsConfig-E7w6Ol6W.js";
 
 //#region src/components/SearchResultsFilterSidebar/searchFilterSidebarVariants.ts
 const searchFilterSidebarVariantClasses = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-toolkit",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "React component library for Envive services.",
   "keywords": [
     "react",

package/src/components/SearchAutocomplete/SearchAutocomplete.tsx

@@ -2,26 +2,70 @@ import React from 'react';
 import { motion } from 'framer-motion';
 import classNames from 'classnames';
 import OutlinedStar from '@envive-ai/react-icons/OutlinedStar';
+import { Typography } from '../Typography';
 
 interface GlobalSearchAutocompleteProps {
   id: string;
   results: string[];
   focusedIndex: number;
+  searchText?: string;
   onSuggestionSelect: (suggestion: string, rankPosition: number) => void;
   iconColor?: string;
 }
 
-export const SearchAutocomplete: React.FC<GlobalSearchAutocompleteProps> = ({
+export const SearchAutocomplete = ({
   id,
   results,
   focusedIndex,
+  searchText = '',
   onSuggestionSelect,
   iconColor,
-}) => {
+}: GlobalSearchAutocompleteProps) => {
   if (results.length === 0) {
     return null;
   }
 
+  const highlightMatchingText = (text: string, searchQuery: string) => {
+    if (!searchQuery.trim()) {
+      return <Typography variant="body3">{text}</Typography>;
+    }
+
+    const escapedQuery = searchQuery.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const regex = new RegExp(`(${escapedQuery})`, 'gi');
+    const parts = text.split(regex);
+
+    return (
+      <Typography variant="body3">
+        {parts.map((part, index) => {
+          const isMatch = part.toLowerCase() === searchQuery.toLowerCase();
+          return isMatch ? (
+            <strong key={index} className="spiffy-tw-font-bold">
+              {part}
+            </strong>
+          ) : (
+            <span key={index}>{part}</span>
+          );
+        })}
+      </Typography>
+    );
+  };
+
+  const containerClasses = classNames(
+    'spiffy-tw-mt-[16px]',
+    'spiffy-tw-mb-[8px]',
+  );
+
+  const getListElementClasses = (index: number) => classNames(
+    'spiffy-tw-flex',
+    'spiffy-tw-items-center',
+    'spiffy-tw-cursor-pointer',
+    'spiffy-tw-py-[8px]',
+    'spiffy-tw-pl-[16px]',
+    'spiffy-tw-text-[--spiffy-colors-text-primary]',
+    'hover:spiffy-tw-bg-neutral-100',
+    { 'spiffy-tw-bg-neutral-200': focusedIndex === index },
+  );
+
   return (
     <motion.div
       className="spiffy-tw-h-full"
@@ -30,18 +74,14 @@ export const SearchAutocomplete: React.FC<GlobalSearchAutocompleteProps> = ({
       exit={{ opacity: 0, y: -10 }}
       transition={{ duration: 0.2 }}
     >
-      <ul id={id} role="listbox" className="spiffy-tw-mt-4 spiffy-tw-space-y-2">
+      <ul id={id} role="listbox" className={containerClasses}>
         {results.map((result, index) => (
           <li
             key={index}
             id={`option-${index}`}
             role="option"
             aria-selected={index === focusedIndex}
-            className={classNames(
-              'spiffy-tw-flex spiffy-tw-items-center spiffy-tw-cursor-pointer spiffy-tw-py-1',
-              { 'spiffy-tw-bg-neutral-200': index === focusedIndex },
-              'hover:spiffy-tw-bg-neutral-100',
-            )}
+            className={getListElementClasses(index)}
             onClick={() => onSuggestionSelect(result, index)}
             onKeyDown={(event) => {
               if (event.key === 'Enter' || event.keyCode === 13) {
@@ -50,13 +90,13 @@ export const SearchAutocomplete: React.FC<GlobalSearchAutocompleteProps> = ({
             }}
           >
             <OutlinedStar
-              className="spiffy-tw-w-[16px] spiffy-tw-h-[16px] spiffy-tw-mr-2"
+              className="spiffy-tw-w-[16px] spiffy-tw-h-[16px] spiffy-tw-mr-[16px]"
               fill={iconColor}
             />
-            <span className="spiffy-tw-font-bold">{result}</span>
+            {highlightMatchingText(result, searchText)}
           </li>
         ))}
       </ul>
     </motion.div>
   );
-};
+};

package/src/components/SearchInput/SearchInput.tsx

@@ -1,7 +1,7 @@
 import React, { useRef, useImperativeHandle } from 'react';
 import classNames from 'classnames';
 import MagnifyingGlassStarVariant from '@envive-ai/react-icons/MagnifyingGlassStarVariant';
-import { IconClose } from '@envive-ai/react-icons/src/index.js';
+import IconClose from '@envive-ai/react-icons/IconClose';
 import { SearchInputVariant } from '@envive-ai/react-hooks/contexts/types';
 import { TextInput } from '../TextInput';
 import { searchInputVariantClasses } from './searchInputVariants';

package/src/components/SearchInputForm/SearchInputForm.tsx

@@ -1,3 +1,5 @@
+import classNames from 'classnames';
+import { SEARCH_INPUT_TESTID } from '@envive-ai/react-hooks/config/locators/components/search';
 import { SearchAutocomplete } from '../SearchAutocomplete';
 import { SearchInput } from '../SearchInput/SearchInput';
 import { searchInputVariantClasses } from '../SearchInput/searchInputVariants';
@@ -9,13 +11,14 @@ interface SearchInputFormProps {
   autocompleteResults: string[];
   searchBoxPlaceholder: string;
   focusedOptionId: string | undefined;
-  isDirty: boolean;
   focusedIndex: number;
   onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-  onAutocompleteSelect: (suggestion: string) => void;
+  onAutocompleteSelect: (suggestion: string, rankPosition?: number) => void;
   onSearchInputChange: (value: string) => void;
   onSearchSubmit: () => void;
-  searchInputDataTestId?: string;
+  onSearchInputFocus: () => void;
+  onSearchInputBlur: () => void;
+  shouldShowAutocomplete: boolean;
 }
 
 export const SearchInputForm = ({
@@ -24,24 +27,50 @@ export const SearchInputForm = ({
   autocompleteResults,
   searchBoxPlaceholder,
   focusedOptionId,
-  isDirty,
+  shouldShowAutocomplete,
   focusedIndex,
   onKeyDown,
   onAutocompleteSelect,
   onSearchInputChange,
   onSearchSubmit,
-  searchInputDataTestId,
+  onSearchInputFocus,
+  onSearchInputBlur,
 }: SearchInputFormProps) => {
-  const { searchInputIconColor } = searchInputVariantClasses[searchInputVariant];
+  const { autocompleteIconColor } = searchInputVariantClasses[searchInputVariant];
+
+  const containerClasses = classNames(
+    'spiffy-tw-relative',
+    'spiffy-tw-w-full'
+  );
+
+  const formClasses = classNames({
+    'spiffy-tw-grow': true,
+    'spiffy-tw-relative': true,
+    'spiffy-tw-z-20': shouldShowAutocomplete
+  });
+
+  const autocompleteContainerClasses = classNames(
+    'spiffy-tw-absolute',
+    'spiffy-tw-top-1/2',
+    'spiffy-tw-z-10',
+    'spiffy-tw-left-0',
+    'spiffy-tw-right-0',
+    'spiffy-tw-bg-white',
+    'spiffy-tw-w-full',
+    'spiffy-tw-rounded-b-lg',
+    'spiffy-tw-border',
+    'spiffy-tw-border-t-0',
+    'spiffy-tw-pt-4'
+  );
 
   return (
-    <>
+    <div className={containerClasses}>
       <form
         onSubmit={(e) => {
           e.preventDefault();
           onSearchSubmit();
         }}
-        className="spiffy-tw-grow"
+        className={formClasses}
       >
         <SearchInput
           value={searchText}
@@ -49,20 +78,25 @@ export const SearchInputForm = ({
           suggestions={autocompleteResults}
           ariaActivedescendant={focusedOptionId}
           searchInputVariant={searchInputVariant}
-          dataTestId={searchInputDataTestId}
+          dataTestId={SEARCH_INPUT_TESTID}
           onKeyDown={onKeyDown}
           onChange={onSearchInputChange}
+          onFocus={onSearchInputFocus}
+          onBlur={onSearchInputBlur}
         />
       </form>
-      {isDirty && (
-        <SearchAutocomplete
-          id="autocomplete-results"
-          results={autocompleteResults}
-          focusedIndex={focusedIndex}
-          iconColor={searchInputIconColor}
-          onSuggestionSelect={onAutocompleteSelect}
-        />
+      {shouldShowAutocomplete && (
+        <div className={autocompleteContainerClasses}>
+          <SearchAutocomplete
+            id="autocomplete-results"
+            results={autocompleteResults}
+            focusedIndex={focusedIndex}
+            searchText={searchText}
+            iconColor={autocompleteIconColor}
+            onSuggestionSelect={onAutocompleteSelect}
+          />
+        </div>
       )}
-    </>
+    </div>
   );
 };

package/src/components/SuggestionButton/SuggestionButton.tsx

@@ -105,6 +105,20 @@ const variantClassMap = new Map<SuggestionButtonVariant, string[]>([
       BORDER_CLASS,
     ],
   ],
+  // dark accent appears to have been originally been made with the bg color text-accent
+  // instead of the design, acccent-primary. This is a correction to match the design without
+  // regressing intentional uses of the other styling. text-accent and accent-primary are often
+  // the same or very similar colors but in some cases, they are very different to deal with contrast correctly.
+  [
+    'darkAccentContrast',
+    [
+      ...DARK_BACKGROUND_CLASSES,
+      'spiffy-tw-text-[--spiffy-colors-text-light]', // hover:spiffy-tw-text-[--spiffy-colors-text-light]
+      'spiffy-tw-fill-[--spiffy-colors-accent-primary]', // hover:spiffy-tw-fill-[--spiffy-colors-accent-primary]
+      'spiffy-tw-stroke-[--spiffy-colors-accent-primary]', // hover:spiffy-tw-stroke-[--spiffy-colors-accent-primary]
+      BORDER_CLASS,
+    ],
+  ],
   [
     'transparent',
     [
@@ -169,6 +183,7 @@ const borderedVariants = [
   'tertiary',
   'dark',
   'darkAccent',
+  'darkAccentContrast',
   'darkPrimary',
   'transparent',
   'transparentDark',

package/src/components/SuggestionButton/types.ts

@@ -6,9 +6,10 @@ export type SuggestionButtonVariant =
   | 'tertiary'
   | 'dark'
   | 'darkAccent'
+  | 'darkAccentContrast'
   | 'darkPrimary'
   | 'secondaryDark'
   | 'secondaryAccent'
   | 'transparent'
   | 'transparentDark'
-  | 'lightDark';
+  | 'lightDark';

package/src/components/TextInput/TextInput.tsx

@@ -1,7 +1,3 @@
-/* eslint-disable react/jsx-props-no-spreading */
-// Disabling this prevents an otherwise simple wrapper around input
-// from becoming needlessly verbose while maintaining flexibility.
-// Keeping it enabled requires listing every possible prop.
 import React from 'react';
 import classNames from 'classnames';
 

package/dist/SearchAutocomplete-obO19yzL.js

@@ -1,51 +0,0 @@
-import { motion } from "framer-motion";
-import React from "react";
-import classNames from "classnames";
-import { jsx, jsxs } from "react/jsx-runtime";
-import OutlinedStar from "@envive-ai/react-icons/OutlinedStar";
-
-//#region src/components/SearchAutocomplete/SearchAutocomplete.tsx
-const SearchAutocomplete = ({ id, results, focusedIndex, onSuggestionSelect, iconColor }) => {
-	if (results.length === 0) return null;
-	return /* @__PURE__ */ jsx(motion.div, {
-		className: "spiffy-tw-h-full",
-		initial: {
-			opacity: 0,
-			y: -10
-		},
-		animate: {
-			opacity: 1,
-			y: 0
-		},
-		exit: {
-			opacity: 0,
-			y: -10
-		},
-		transition: { duration: .2 },
-		children: /* @__PURE__ */ jsx("ul", {
-			id,
-			role: "listbox",
-			className: "spiffy-tw-mt-4 spiffy-tw-space-y-2",
-			children: results.map((result, index) => /* @__PURE__ */ jsxs("li", {
-				id: `option-${index}`,
-				role: "option",
-				"aria-selected": index === focusedIndex,
-				className: classNames("spiffy-tw-flex spiffy-tw-items-center spiffy-tw-cursor-pointer spiffy-tw-py-1", { "spiffy-tw-bg-neutral-200": index === focusedIndex }, "hover:spiffy-tw-bg-neutral-100"),
-				onClick: () => onSuggestionSelect(result, index),
-				onKeyDown: (event) => {
-					if (event.key === "Enter" || event.keyCode === 13) onSuggestionSelect(result, index);
-				},
-				children: [/* @__PURE__ */ jsx(OutlinedStar, {
-					className: "spiffy-tw-w-[16px] spiffy-tw-h-[16px] spiffy-tw-mr-2",
-					fill: iconColor
-				}), /* @__PURE__ */ jsx("span", {
-					className: "spiffy-tw-font-bold",
-					children: result
-				})]
-			}, index))
-		})
-	});
-};
-
-//#endregion
-export { SearchAutocomplete };

package/dist/SettingsVariant-BsBbdjV5.cjs

@@ -1,63 +0,0 @@
-const require_chunk = require('./chunk-CUT6urMc.cjs');
-let react = require("react");
-react = require_chunk.__toESM(react);
-let react_jsx_runtime = require("react/jsx-runtime");
-react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
-
-//#region ../icons/src/SettingsVariant.tsx
-const SvgSettingsVariant = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
-	xmlns: "http://www.w3.org/2000/svg",
-	width: 28,
-	height: 28,
-	fill: "none",
-	...props,
-	children: [
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
-			cx: 3.5,
-			cy: 3.5,
-			r: 3.033,
-			stroke: "#767676",
-			strokeWidth: .933,
-			transform: "matrix(-1 0 0 1 22.4 0)"
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-			stroke: "#767676",
-			strokeWidth: .933,
-			d: "M14 3.5H0M28 3.5h-4.5"
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
-			cx: 9.1,
-			cy: 13.5,
-			r: 3.033,
-			stroke: "#767676",
-			strokeWidth: .933
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-			stroke: "#767676",
-			strokeWidth: .933,
-			d: "M14 13.5h14M0 13.5h4.5"
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
-			cx: 3.5,
-			cy: 3.5,
-			r: 3.033,
-			stroke: "#767676",
-			strokeWidth: .933,
-			transform: "matrix(-1 0 0 1 22.4 20)"
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-			stroke: "#767676",
-			strokeWidth: .933,
-			d: "M14 23.5H0M28 23.5h-4.5"
-		})
-	]
-});
-var SettingsVariant_default = SvgSettingsVariant;
-
-//#endregion
-Object.defineProperty(exports, 'SettingsVariant_default', {
-  enumerable: true,
-  get: function () {
-    return SettingsVariant_default;
-  }
-});

package/dist/SettingsVariant-CUSFlJEu.js

@@ -1,55 +0,0 @@
-import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region ../icons/src/SettingsVariant.tsx
-const SvgSettingsVariant = (props) => /* @__PURE__ */ jsxs("svg", {
-	xmlns: "http://www.w3.org/2000/svg",
-	width: 28,
-	height: 28,
-	fill: "none",
-	...props,
-	children: [
-		/* @__PURE__ */ jsx("circle", {
-			cx: 3.5,
-			cy: 3.5,
-			r: 3.033,
-			stroke: "#767676",
-			strokeWidth: .933,
-			transform: "matrix(-1 0 0 1 22.4 0)"
-		}),
-		/* @__PURE__ */ jsx("path", {
-			stroke: "#767676",
-			strokeWidth: .933,
-			d: "M14 3.5H0M28 3.5h-4.5"
-		}),
-		/* @__PURE__ */ jsx("circle", {
-			cx: 9.1,
-			cy: 13.5,
-			r: 3.033,
-			stroke: "#767676",
-			strokeWidth: .933
-		}),
-		/* @__PURE__ */ jsx("path", {
-			stroke: "#767676",
-			strokeWidth: .933,
-			d: "M14 13.5h14M0 13.5h4.5"
-		}),
-		/* @__PURE__ */ jsx("circle", {
-			cx: 3.5,
-			cy: 3.5,
-			r: 3.033,
-			stroke: "#767676",
-			strokeWidth: .933,
-			transform: "matrix(-1 0 0 1 22.4 20)"
-		}),
-		/* @__PURE__ */ jsx("path", {
-			stroke: "#767676",
-			strokeWidth: .933,
-			d: "M14 23.5H0M28 23.5h-4.5"
-		})
-	]
-});
-var SettingsVariant_default = SvgSettingsVariant;
-
-//#endregion
-export { SettingsVariant_default };