@edifice.io/react 2.0.0-develop-enabling.20250702095446 → 2.0.0-develop-enabling.20250703141047

package/dist/components/SearchBar/SearchBar.d.ts

@@ -1,51 +1,74 @@
 import { ChangeEvent } from 'react';
 import { Size } from '../../types';
+/**
+ * Base props shared by both SearchBar variants
+ */
 export interface BaseProps {
     /**
-     * String or Template literal with React i18next namespace
+     * String or template literal key for i18next translation
      */
     placeholder?: string;
     /**
-     * Control SearchBar size
+     * Control SearchBar size (excluding 'sm')
      */
     size?: Exclude<Size, 'sm'>;
     /**
-     * Disabled status
+     * Disable the input
      */
     disabled?: boolean;
     /**
-     * Optional class for styling purpose
+     * Optional class for custom styling
      */
     className?: string;
     /**
-     * ChangeEvent Handler
+     * onChange handler for input changes
      */
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Current value of the input
+     */
+    value?: string;
+    /**
+     * Show a clear (reset) button when value is present
+     */
+    clearable?: boolean;
 }
+/**
+ * Default SearchBar with a submit button
+ */
 type DefaultSearchBar = {
     /**
-     * Switch between button or dynamic search bar
+     * Use false to render the default SearchBar (with a button)
      */
     isVariant: false;
     /**
-     * Handle Search with Default SearchBar
+     * Callback when clicking the search button
      */
     onClick: () => void;
 };
+/**
+ * Dynamic SearchBar with icon and no submit button
+ */
 type DynamicSearchBar = {
     /**
-     * Switch between button or dynamic search bar
+     * Use true to render the dynamic SearchBar (with an icon inside input)
      */
     isVariant: true;
     /**
-     * Handle Search with Default SearchBar
+     * onClick must be undefined for dynamic variant
      */
     onClick?: undefined;
 };
+/**
+ * Props for the SearchBar component
+ */
 export type Props = DefaultSearchBar | DynamicSearchBar;
 export type SearchBarProps = BaseProps & Props;
+/**
+ * SearchBar component to handle dynamic or static search input
+ */
 declare const SearchBar: {
-    ({ isVariant, size, placeholder, className, disabled, onChange, onClick, ...restProps }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
+    ({ isVariant, size, placeholder, className, disabled, onChange, onClick, value, clearable, ...restProps }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default SearchBar;

package/dist/components/SearchBar/SearchBar.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import { useTranslation } from "react-i18next";
+import SvgIconClose from "../../modules/icons/components/IconClose.js";
 import SvgIconSearch from "../../modules/icons/components/IconSearch.js";
 import FormControl from "../Form/FormControl.js";
 import SearchButton from "../Button/SearchButton.js";
@@ -12,6 +13,8 @@ const SearchBar = ({
   disabled,
   onChange,
   onClick,
+  value,
+  clearable = !1,
   ...restProps
 }) => {
   const {
@@ -21,13 +24,25 @@ const SearchBar = ({
     "position-relative": isVariant
   }), input = clsx({
     "border-end-0": !isVariant,
-    "ps-48": isVariant
+    "ps-48": isVariant,
+    "searchbar-hide-native-clear": isVariant && clearable
   }), handleClick = () => {
     onClick == null || onClick();
+  }, handleClear = () => {
+    const event = {
+      target: {
+        value: ""
+      }
+    };
+    onChange == null || onChange(event);
   };
   return /* @__PURE__ */ jsxs(FormControl, { id: "search-bar", className: searchbar, children: [
     isVariant && /* @__PURE__ */ jsx("div", { className: "position-absolute z-1 top-50 start-0 translate-middle-y border-0 ps-12 bg-transparent", children: /* @__PURE__ */ jsx(SvgIconSearch, {}) }),
-    /* @__PURE__ */ jsx(FormControl.Input, { type: "search", placeholder: t(placeholder), size, noValidationIcon: !0, className: input, onChange, disabled, ...restProps }),
+    /* @__PURE__ */ jsx(FormControl.Input, { type: "search", placeholder: t(placeholder), size, noValidationIcon: !0, className: input, onChange, value, disabled, ...restProps }),
+    isVariant && clearable && value && onChange && /* @__PURE__ */ jsx("button", { type: "button", onClick: handleClear, className: "position-absolute end-0 top-50 translate-middle-y pe-12 bg-transparent border-0", "aria-label": t("clear"), children: /* @__PURE__ */ jsx(SvgIconClose, { className: "color-gray", style: {
+      width: 12,
+      height: 12
+    } }) }),
     !isVariant && /* @__PURE__ */ jsx(SearchButton, { type: "submit", "aria-label": t("search"), icon: /* @__PURE__ */ jsx(SvgIconSearch, {}), className: "border-start-0", onClick: handleClick })
   ] });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edifice.io/react",
-  "version": "2.0.0-develop-enabling.20250702095446",
+  "version": "2.0.0-develop-enabling.20250703141047",
   "description": "Edifice React Library",
   "keywords": [
     "react",
@@ -118,9 +118,9 @@
     "react-slugify": "^3.0.3",
     "swiper": "^10.1.0",
     "ua-parser-js": "^1.0.36",
-    "@edifice.io/bootstrap": "2.0.0-develop-enabling.20250702095446",
-    "@edifice.io/tiptap-extensions": "2.0.0-develop-enabling.20250702095446",
-    "@edifice.io/utilities": "2.0.0-develop-enabling.20250702095446"
+    "@edifice.io/bootstrap": "2.0.0-develop-enabling.20250703141047",
+    "@edifice.io/tiptap-extensions": "2.0.0-develop-enabling.20250703141047",
+    "@edifice.io/utilities": "2.0.0-develop-enabling.20250703141047"
   },
   "devDependencies": {
     "@babel/plugin-transform-react-pure-annotations": "^7.23.3",
@@ -151,8 +151,8 @@
     "vite": "^5.4.11",
     "vite-plugin-dts": "^4.1.0",
     "vite-tsconfig-paths": "^5.0.1",
-    "@edifice.io/client": "2.0.0-develop-enabling.20250702095446",
-    "@edifice.io/config": "2.0.0-develop-enabling.20250702095446"
+    "@edifice.io/client": "2.0.0-develop-enabling.20250703141047",
+    "@edifice.io/config": "2.0.0-develop-enabling.20250703141047"
   },
   "peerDependencies": {
     "@react-spring/web": "^9.7.5",