@ilo-org/react 0.10.5 → 0.10.6

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @ilo-org/react
 
+## 0.10.6
+
+### Patch Changes
+
+- 460210518: Add clear button to search input field
+- Updated dependencies [ac23bf484]
+- Updated dependencies [1b9c54f99]
+- Updated dependencies [138890e7a]
+  - @ilo-org/styles@0.14.0
+
 ## 0.10.5
 
 ### Patch Changes

package/lib/cjs/components/Input/Input.js

@@ -11,7 +11,7 @@ require('../../GlobalCtx-97e4b433.js');
 require('../Tooltip/Tooltip.js');
 require('@popperjs/core');
 
-const Input = ({ callback, disabled = false, error, helper, id, label, name, placeholder, required, tooltip, type = "text", }) => {
+const Input = ({ callback, disabled = false, error, helper, id, label, name, placeholder, required, tooltip, value, type = "text", }) => {
     const { prefix } = hooks_useGlobalSettings();
     const baseClass = `${prefix}--input`;
     const InputClasses = classNames("", {
@@ -26,7 +26,7 @@ const Input = ({ callback, disabled = false, error, helper, id, label, name, pla
             callback(e);
         }
     };
-    return (jsxRuntime.jsx(components_Fieldset_Fieldset.default, { children: jsxRuntime.jsx(components_FormElement_FormElement, Object.assign({ elemid: name, label: label, helper: helper, error: error, required: required, tooltip: tooltip }, { children: jsxRuntime.jsx("input", { id: id ? id : name, name: name, onChange: handleChange, disabled: disabled, placeholder: placeholder, required: required, type: type, className: InputClasses }) })) }));
+    return (jsxRuntime.jsx(components_Fieldset_Fieldset.default, { children: jsxRuntime.jsx(components_FormElement_FormElement, Object.assign({ elemid: name, label: label, helper: helper, error: error, required: required, tooltip: tooltip }, { children: jsxRuntime.jsx("input", { id: id ? id : name, name: name, onChange: handleChange, disabled: disabled, placeholder: placeholder, required: required, type: type, value: value, className: InputClasses }) })) }));
 };
 
 module.exports = Input;

package/lib/cjs/components/Navigation/Navigation.js

@@ -13,6 +13,8 @@ require('../Fieldset/Fieldset.js');
 require('../Tooltip/Tooltip.js');
 require('@popperjs/core');
 require('../FormElement/FormElement.js');
+require('../Icon/Icon.js');
+require('@ilo-org/icons-react');
 
 const Navigation = ({ logo, mobilelogo, siteurl, tagline, primarynav, subnav, menulabel, menucloselabel, searchlabel, searchfield, languagelabel, languagecontextmenu, }) => {
     const { prefix } = hooks_useGlobalSettings();

package/lib/cjs/components/Navigation/index.js

@@ -14,6 +14,8 @@ require('../Fieldset/Fieldset.js');
 require('../Tooltip/Tooltip.js');
 require('@popperjs/core');
 require('../FormElement/FormElement.js');
+require('../Icon/Icon.js');
+require('@ilo-org/icons-react');
 
 
 

package/lib/cjs/components/SearchField/SearchField.js

@@ -1,38 +1,48 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var require$$0 = require('react');
 var classNames = require('classnames');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
 var components_Input_Input = require('../Input/Input.js');
+var components_Icon_Icon = require('../Icon/Icon.js');
 require('tslib');
-require('react');
 require('../../GlobalCtx-97e4b433.js');
 require('../Fieldset/Fieldset.js');
 require('../Tooltip/Tooltip.js');
 require('@popperjs/core');
 require('../FormElement/FormElement.js');
+require('@ilo-org/icons-react');
 
 const SearchField = ({ action, callback, className, input, }) => {
+    const [searchValue, setSearchValue] = require$$0.useState("");
     const { prefix } = hooks_useGlobalSettings();
     const baseClass = `${prefix}--searchfield`;
     const buttonClass = `${baseClass}--button`;
+    const clearButtonClass = `${baseClass}--clear-button ${searchValue.trim() !== "" && "show"}`;
+    const fieldSetClass = `${prefix}--fieldset`;
     const SearchFieldClasses = classNames(className, {
         [baseClass]: true,
         [`haslabel`]: input === null || input === void 0 ? void 0 : input.label,
     });
-    /**
-     * On click, if there is a callback, call it
-     */
     const handleClick = (e) => {
         if (callback) {
             callback(e);
         }
     };
+    // handle click for clear button in search
+    const handleClearButtonClick = () => {
+        setSearchValue("");
+    };
+    // Update search value on input
+    const onKeyPress = (e) => {
+        setSearchValue(e.target.value);
+    };
     const inputHasType = !!(input === null || input === void 0 ? void 0 : input.type);
     if (!inputHasType) {
         throw new Error("SearchField: Input must have type prop");
     }
-    return inputHasType ? (jsxRuntime.jsxs("form", Object.assign({ className: SearchFieldClasses, action: action }, { children: [jsxRuntime.jsx(components_Input_Input, { id: input === null || input === void 0 ? void 0 : input.id, name: input === null || input === void 0 ? void 0 : input.name, disabled: input === null || input === void 0 ? void 0 : input.disabled, callback: input === null || input === void 0 ? void 0 : input.callback, error: input === null || input === void 0 ? void 0 : input.error, helper: input === null || input === void 0 ? void 0 : input.helper, label: input === null || input === void 0 ? void 0 : input.label, placeholder: input === null || input === void 0 ? void 0 : input.placeholder, type: input === null || input === void 0 ? void 0 : input.type, className: `${prefix}--input` }), jsxRuntime.jsx("input", { className: buttonClass, disabled: input === null || input === void 0 ? void 0 : input.disabled, type: "submit", onClick: handleClick })] }))) : null;
+    return inputHasType ? (jsxRuntime.jsxs("form", Object.assign({ className: SearchFieldClasses, action: action }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: fieldSetClass }, { children: [jsxRuntime.jsx(components_Input_Input, { id: input === null || input === void 0 ? void 0 : input.id, name: input === null || input === void 0 ? void 0 : input.name, disabled: input === null || input === void 0 ? void 0 : input.disabled, callback: onKeyPress, error: input === null || input === void 0 ? void 0 : input.error, helper: input === null || input === void 0 ? void 0 : input.helper, label: input === null || input === void 0 ? void 0 : input.label, placeholder: input === null || input === void 0 ? void 0 : input.placeholder, type: input === null || input === void 0 ? void 0 : input.type, value: searchValue, className: `${prefix}--input` }), jsxRuntime.jsx("span", Object.assign({ onClick: handleClearButtonClick, className: clearButtonClass }, { children: jsxRuntime.jsx(components_Icon_Icon, { name: "close", hidden: true }) }))] })), jsxRuntime.jsx("input", { className: buttonClass, disabled: input === null || input === void 0 ? void 0 : input.disabled, type: "submit", onClick: handleClick })] }))) : null;
 };
 
 module.exports = SearchField;

package/lib/cjs/components/SearchField/index.js

@@ -2,16 +2,18 @@
 
 var components_SearchField_SearchField = require('./SearchField.js');
 require('react/jsx-runtime');
+require('react');
 require('classnames');
 require('../../hooks/useGlobalSettings.js');
 require('tslib');
-require('react');
 require('../../GlobalCtx-97e4b433.js');
 require('../Input/Input.js');
 require('../Fieldset/Fieldset.js');
 require('../Tooltip/Tooltip.js');
 require('@popperjs/core');
 require('../FormElement/FormElement.js');
+require('../Icon/Icon.js');
+require('@ilo-org/icons-react');
 
 
 

package/lib/esm/components/Input/Input.js

@@ -9,7 +9,7 @@ import '../../GlobalCtx-7fb23cfa.js';
 import '../Tooltip/Tooltip.js';
 import '@popperjs/core';
 
-const Input = ({ callback, disabled = false, error, helper, id, label, name, placeholder, required, tooltip, type = "text", }) => {
+const Input = ({ callback, disabled = false, error, helper, id, label, name, placeholder, required, tooltip, value, type = "text", }) => {
     const { prefix } = useGlobalSettings();
     const baseClass = `${prefix}--input`;
     const InputClasses = classNames("", {
@@ -24,7 +24,7 @@ const Input = ({ callback, disabled = false, error, helper, id, label, name, pla
             callback(e);
         }
     };
-    return (jsx(Fieldset, { children: jsx(FormElement, Object.assign({ elemid: name, label: label, helper: helper, error: error, required: required, tooltip: tooltip }, { children: jsx("input", { id: id ? id : name, name: name, onChange: handleChange, disabled: disabled, placeholder: placeholder, required: required, type: type, className: InputClasses }) })) }));
+    return (jsx(Fieldset, { children: jsx(FormElement, Object.assign({ elemid: name, label: label, helper: helper, error: error, required: required, tooltip: tooltip }, { children: jsx("input", { id: id ? id : name, name: name, onChange: handleChange, disabled: disabled, placeholder: placeholder, required: required, type: type, value: value, className: InputClasses }) })) }));
 };
 
 export { Input as default };

package/lib/esm/components/Navigation/Navigation.js

@@ -11,6 +11,8 @@ import '../Fieldset/Fieldset.js';
 import '../Tooltip/Tooltip.js';
 import '@popperjs/core';
 import '../FormElement/FormElement.js';
+import '../Icon/Icon.js';
+import '@ilo-org/icons-react';
 
 const Navigation = ({ logo, mobilelogo, siteurl, tagline, primarynav, subnav, menulabel, menucloselabel, searchlabel, searchfield, languagelabel, languagecontextmenu, }) => {
     const { prefix } = useGlobalSettings();

package/lib/esm/components/Navigation/index.js

@@ -12,3 +12,5 @@ import '../Fieldset/Fieldset.js';
 import '../Tooltip/Tooltip.js';
 import '@popperjs/core';
 import '../FormElement/FormElement.js';
+import '../Icon/Icon.js';
+import '@ilo-org/icons-react';

package/lib/esm/components/SearchField/SearchField.js

@@ -1,36 +1,46 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
 import classNames from 'classnames';
 import useGlobalSettings from '../../hooks/useGlobalSettings.js';
 import Input from '../Input/Input.js';
+import Icon from '../Icon/Icon.js';
 import 'tslib';
-import 'react';
 import '../../GlobalCtx-7fb23cfa.js';
 import '../Fieldset/Fieldset.js';
 import '../Tooltip/Tooltip.js';
 import '@popperjs/core';
 import '../FormElement/FormElement.js';
+import '@ilo-org/icons-react';
 
 const SearchField = ({ action, callback, className, input, }) => {
+    const [searchValue, setSearchValue] = useState("");
     const { prefix } = useGlobalSettings();
     const baseClass = `${prefix}--searchfield`;
     const buttonClass = `${baseClass}--button`;
+    const clearButtonClass = `${baseClass}--clear-button ${searchValue.trim() !== "" && "show"}`;
+    const fieldSetClass = `${prefix}--fieldset`;
     const SearchFieldClasses = classNames(className, {
         [baseClass]: true,
         [`haslabel`]: input === null || input === void 0 ? void 0 : input.label,
     });
-    /**
-     * On click, if there is a callback, call it
-     */
     const handleClick = (e) => {
         if (callback) {
             callback(e);
         }
     };
+    // handle click for clear button in search
+    const handleClearButtonClick = () => {
+        setSearchValue("");
+    };
+    // Update search value on input
+    const onKeyPress = (e) => {
+        setSearchValue(e.target.value);
+    };
     const inputHasType = !!(input === null || input === void 0 ? void 0 : input.type);
     if (!inputHasType) {
         throw new Error("SearchField: Input must have type prop");
     }
-    return inputHasType ? (jsxs("form", Object.assign({ className: SearchFieldClasses, action: action }, { children: [jsx(Input, { id: input === null || input === void 0 ? void 0 : input.id, name: input === null || input === void 0 ? void 0 : input.name, disabled: input === null || input === void 0 ? void 0 : input.disabled, callback: input === null || input === void 0 ? void 0 : input.callback, error: input === null || input === void 0 ? void 0 : input.error, helper: input === null || input === void 0 ? void 0 : input.helper, label: input === null || input === void 0 ? void 0 : input.label, placeholder: input === null || input === void 0 ? void 0 : input.placeholder, type: input === null || input === void 0 ? void 0 : input.type, className: `${prefix}--input` }), jsx("input", { className: buttonClass, disabled: input === null || input === void 0 ? void 0 : input.disabled, type: "submit", onClick: handleClick })] }))) : null;
+    return inputHasType ? (jsxs("form", Object.assign({ className: SearchFieldClasses, action: action }, { children: [jsxs("div", Object.assign({ className: fieldSetClass }, { children: [jsx(Input, { id: input === null || input === void 0 ? void 0 : input.id, name: input === null || input === void 0 ? void 0 : input.name, disabled: input === null || input === void 0 ? void 0 : input.disabled, callback: onKeyPress, error: input === null || input === void 0 ? void 0 : input.error, helper: input === null || input === void 0 ? void 0 : input.helper, label: input === null || input === void 0 ? void 0 : input.label, placeholder: input === null || input === void 0 ? void 0 : input.placeholder, type: input === null || input === void 0 ? void 0 : input.type, value: searchValue, className: `${prefix}--input` }), jsx("span", Object.assign({ onClick: handleClearButtonClick, className: clearButtonClass }, { children: jsx(Icon, { name: "close", hidden: true }) }))] })), jsx("input", { className: buttonClass, disabled: input === null || input === void 0 ? void 0 : input.disabled, type: "submit", onClick: handleClick })] }))) : null;
 };
 
 export { SearchField as default };

package/lib/esm/components/SearchField/index.js

@@ -1,12 +1,14 @@
 export { default as SearchField } from './SearchField.js';
 import 'react/jsx-runtime';
+import 'react';
 import 'classnames';
 import '../../hooks/useGlobalSettings.js';
 import 'tslib';
-import 'react';
 import '../../GlobalCtx-7fb23cfa.js';
 import '../Input/Input.js';
 import '../Fieldset/Fieldset.js';
 import '../Tooltip/Tooltip.js';
 import '@popperjs/core';
 import '../FormElement/FormElement.js';
+import '../Icon/Icon.js';
+import '@ilo-org/icons-react';

package/lib/types/react/src/components/Input/Input.props.d.ts

@@ -48,4 +48,5 @@ export interface InputProps {
      * The input's type.
      */
     type: TextInputTypes;
+    value: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/react",
-  "version": "0.10.5",
+  "version": "0.10.6",
   "description": "React components for the ILO's Design System",
   "keywords": [
     "ui_patterns",
@@ -75,9 +75,9 @@
     "react-player": "2.10.1",
     "react-transition-group": "^4.4.1",
     "@ilo-org/brand-assets": "0.4.0",
-    "@ilo-org/fonts": "0.1.2",
     "@ilo-org/icons-react": "0.0.21",
-    "@ilo-org/styles": "0.13.3",
+    "@ilo-org/fonts": "0.1.2",
+    "@ilo-org/styles": "0.14.0",
     "@ilo-org/themes": "0.7.1",
     "@ilo-org/utils": "0.0.11"
   },
@@ -132,8 +132,8 @@
     "tslib": "^2.3.1",
     "vite": "^4.5.2",
     "@ilo-org/eslint-config": "0.1.0",
-    "@ilo-org/prettier-config": "0.0.2",
-    "@ilo-org/typescript-config": "0.0.1"
+    "@ilo-org/typescript-config": "0.0.1",
+    "@ilo-org/prettier-config": "0.0.2"
   },
   "peerDependencies": {
     "react": ">16",

package/src/components/Input/Input.props.ts

@@ -60,4 +60,6 @@ export interface InputProps {
    * The input's type.
    */
   type: TextInputTypes;
+
+  value: string;
 }

package/src/components/Input/Input.tsx

@@ -16,6 +16,7 @@ const Input: FC<InputProps> = ({
   placeholder,
   required,
   tooltip,
+  value,
   type = "text",
 }) => {
   const { prefix } = useGlobalSettings();
@@ -53,6 +54,7 @@ const Input: FC<InputProps> = ({
           placeholder={placeholder}
           required={required as any}
           type={type}
+          value={value}
           className={InputClasses}
         />
       </FormElement>

package/src/components/SearchField/SearchField.args.ts

@@ -8,6 +8,7 @@ const searchfield: SearchFieldProps = {
     name: "search",
     placeholder: "Search Field",
     type: "search",
+    value: "",
   },
 };
 
@@ -20,6 +21,7 @@ const searchfielderror: SearchFieldProps = {
     name: "search",
     placeholder: "Search Field",
     type: "search",
+    value: "",
   },
 };
 
@@ -31,6 +33,7 @@ const searchfielddisabled: SearchFieldProps = {
     name: "search",
     placeholder: "Search Field",
     type: "search",
+    value: "",
   },
 };
 
@@ -41,6 +44,7 @@ const searchfieldlabel: SearchFieldProps = {
     name: "search",
     placeholder: "Search Field",
     type: "search",
+    value: "",
   },
 };
 
@@ -51,6 +55,7 @@ const searchfieldhelper: SearchFieldProps = {
     name: "search",
     placeholder: "Search Field",
     type: "search",
+    value: "",
   },
 };
 

package/src/components/SearchField/SearchField.tsx

@@ -1,8 +1,9 @@
-import { FC } from "react";
+import { FC, useState } from "react";
 import classNames from "classnames";
 import useGlobalSettings from "../../hooks/useGlobalSettings";
 import { SearchFieldProps } from "./SearchField.props";
 import { Input } from "../Input";
+import { Icon } from "../Icon";
 
 const SearchField: FC<SearchFieldProps> = ({
   action,
@@ -10,24 +11,39 @@ const SearchField: FC<SearchFieldProps> = ({
   className,
   input,
 }) => {
+  const [searchValue, setSearchValue] = useState("");
+
   const { prefix } = useGlobalSettings();
   const baseClass = `${prefix}--searchfield`;
   const buttonClass = `${baseClass}--button`;
+  const clearButtonClass = `${baseClass}--clear-button ${
+    searchValue.trim() !== "" && "show"
+  }`;
+  const fieldSetClass = `${prefix}--fieldset`;
 
   const SearchFieldClasses = classNames(className, {
     [baseClass]: true,
     [`haslabel`]: input?.label,
   });
 
-  /**
-   * On click, if there is a callback, call it
-   */
   const handleClick: React.MouseEventHandler<HTMLInputElement> = (e) => {
     if (callback) {
       callback(e);
     }
   };
 
+  // handle click for clear button in search
+  const handleClearButtonClick: React.MouseEventHandler<
+    HTMLInputElement
+  > = () => {
+    setSearchValue("");
+  };
+
+  // Update search value on input
+  const onKeyPress: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    setSearchValue(e.target.value);
+  };
+
   const inputHasType = !!input?.type;
 
   if (!inputHasType) {
@@ -36,18 +52,24 @@ const SearchField: FC<SearchFieldProps> = ({
 
   return inputHasType ? (
     <form className={SearchFieldClasses} action={action}>
-      <Input
-        id={input?.id}
-        name={input?.name}
-        disabled={input?.disabled}
-        callback={input?.callback}
-        error={input?.error}
-        helper={input?.helper}
-        label={input?.label}
-        placeholder={input?.placeholder}
-        type={input?.type}
-        className={`${prefix}--input`}
-      />
+      <div className={fieldSetClass}>
+        <Input
+          id={input?.id}
+          name={input?.name}
+          disabled={input?.disabled}
+          callback={onKeyPress}
+          error={input?.error}
+          helper={input?.helper}
+          label={input?.label}
+          placeholder={input?.placeholder}
+          type={input?.type}
+          value={searchValue}
+          className={`${prefix}--input`}
+        />
+        <span onClick={handleClearButtonClick} className={clearButtonClass}>
+          <Icon name="close" hidden={true} />
+        </span>
+      </div>
       <input
         className={buttonClass}
         disabled={input?.disabled}