@devtron-labs/devtron-fe-common-lib 0.0.53-beta-2 → 0.0.53-beta-4

package/dist/Common/SearchBar/SearchBar.component.d.ts

@@ -1,8 +1,8 @@
-import { FunctionComponent } from 'react';
+/// <reference types="react" />
 import { SearchBarProps } from './types';
 import './searchBar.scss';
 /**
  * Generic search input component with support for enter based and debounced search
  */
-declare const SearchBar: FunctionComponent<SearchBarProps>;
+declare const SearchBar: ({ initialSearchText, handleSearchChange, handleEnter, inputProps, containerClassName, shouldDebounce, debounceTimeout, }: SearchBarProps) => JSX.Element;
 export default SearchBar;

package/dist/Common/SearchBar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SearchBar } from './SearchBar.component';
+export type { SearchBarProps } from './types';

package/dist/Common/SearchBar/types.d.ts

@@ -1,4 +1,4 @@
-import { InputHTMLAttributes, SyntheticEvent } from 'react';
+import { InputHTMLAttributes } from 'react';
 export interface SearchBarProps {
     /**
      * Initial search text
@@ -13,7 +13,7 @@ export interface SearchBarProps {
     /**
      * Enter event handler for the search input
      */
-    handleEnter?: (event: SyntheticEvent) => void;
+    handleEnter?: (searchText: string) => void;
     /**
      * Input props for the search input
      */

package/dist/Common/index.d.ts

@@ -26,7 +26,7 @@ export * from './Common.service';
 export * from './Checkbox';
 export { default as EmptyState } from './EmptyState/EmptyState';
 export { default as GenericEmptyState } from './EmptyState/GenericEmptyState';
-export { default as SearchBar } from './SearchBar/SearchBar.component';
+export * from './SearchBar';
 export { default as Toggle } from './Toggle/Toggle';
 export { default as ScanVulnerabilitiesTable } from './Security/ScanVulnerabilitiesTable';
 export { default as StyledRadioGroup } from './RadioGroup/RadioGroup';

package/dist/index.js

@@ -24613,22 +24613,23 @@ var SvgIcErrorCross = function SvgIcErrorCross(props) {
   }))));
 };
 
-var css_248z$4 = ".search-bar {\n  margin-right: 0;\n  margin-bottom: 0;\n  background-color: var(--N0);\n  display: block;\n  width: 100%;\n  min-width: 200px;\n  height: 32px;\n  position: relative;\n}\n.search-bar:focus, .search-bar:focus-within {\n  outline: none;\n  border: solid 1px var(--B500);\n}\n.search-bar__input {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border-radius: 4px;\n  border: none;\n  padding: 6px 10px 6px 30px;\n  font-size: 13px;\n  line-height: 20px;\n  color: var(--N900);\n}\n.search-bar__input--applied {\n  width: calc(100% - 22px);\n}\n.search-bar__input:focus, .search-bar__input:focus-visible {\n  border: none;\n  outline: none;\n}\n.search-bar__input::placeholder {\n  font-weight: 400;\n  color: var(--N500);\n}\n.search-bar__icon {\n  position: absolute;\n  z-index: 1;\n  color: var(--N600);\n  top: 50%;\n  left: 8px;\n  transform: translateY(-50%);\n  line-height: 1.9;\n}\n.search-bar__clear-button {\n  background-color: transparent;\n  position: absolute;\n  right: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 1;\n  border: none;\n  padding: 2px;\n  color: var(--N600);\n  margin: 0px 5px;\n}";
+var css_248z$4 = ".search-bar:focus, .search-bar:focus-within {\n  outline: none;\n  border: solid 1px var(--B500);\n}\n.search-bar__input:focus, .search-bar__input:focus-visible {\n  border: none;\n  outline: none;\n}\n.search-bar__icon {\n  z-index: 1;\n  top: 50%;\n  left: 8px;\n  transform: translateY(-50%);\n}\n.search-bar__clear-button {\n  right: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 1;\n}";
 styleInject(css_248z$4);
 
 /**
  * Generic search input component with support for enter based and debounced search
  */
 var SearchBar = function (_a) {
-    var _b = _a.initialSearchText, initialSearchText = _b === void 0 ? '' : _b, _c = _a.handleSearchChange, handleSearchChange = _c === void 0 ? noop$1 : _c, _d = _a.handleEnter, handleEnter = _d === void 0 ? noop$1 : _d, _e = _a.inputProps, inputProps = _e === void 0 ? {} : _e, containerClassName = _a.containerClassName, _f = _a.shouldDebounce, shouldDebounce = _f === void 0 ? false : _f, _g = _a.debounceTimeout, debounceTimeout = _g === void 0 ? 300 : _g;
-    var _h = __read(React.useState(!!initialSearchText), 2), isSearchApplied = _h[0], setIsSearchApplied = _h[1];
+    var _b = _a.initialSearchText, initialSearchText = _b === void 0 ? '' : _b, _c = _a.handleSearchChange, handleSearchChange = _c === void 0 ? function () { } : _c, _d = _a.handleEnter, handleEnter = _d === void 0 ? function () { } : _d, _e = _a.inputProps, inputProps = _e === void 0 ? {} : _e, containerClassName = _a.containerClassName, _f = _a.shouldDebounce, shouldDebounce = _f === void 0 ? false : _f, _g = _a.debounceTimeout, debounceTimeout = _g === void 0 ? 300 : _g;
+    var _h = __read(React.useState(!!initialSearchText), 2), showClearButton = _h[0], setShowClearButton = _h[1];
+    var inputRef = React.useRef();
     var debouncedSearchChange = React.useCallback(debounce$2(handleSearchChange, debounceTimeout), [
         handleSearchChange,
         debounceTimeout,
     ]);
     var handleChange = function (e) {
         var value = e.target.value;
-        setIsSearchApplied(!!value);
+        setShowClearButton(!!value);
         if (shouldDebounce) {
             debouncedSearchChange(value);
         }
@@ -24636,19 +24637,23 @@ var SearchBar = function (_a) {
             handleSearchChange(value);
         }
     };
+    var _applySearch = function (value) {
+        handleSearchChange(value);
+        handleEnter(value);
+    };
     var handleKeyDown = function (e) {
-        var _a;
-        var keyCode = e.key;
-        if (keyCode === 'Enter') {
-            var event_1 = __assign(__assign({}, e), { target: __assign(__assign({}, e.target), { value: (_a = e.target.value) === null || _a === void 0 ? void 0 : _a.trim() }) });
-            handleSearchChange(event_1.target.value);
-            handleEnter(event_1);
+        var key = e.key;
+        if (key === 'Enter') {
+            var inputTarget = e.target;
+            var value = inputTarget.value.trim();
+            _applySearch(value);
         }
     };
     var clearSearch = function () {
-        handleSearchChange('');
+        inputRef.current.value = '';
+        _applySearch('');
     };
-    return (jsxRuntime.jsx("div", __assign({ className: containerClassName }, { children: jsxRuntime.jsxs("div", __assign({ className: "search-bar dc__position-rel en-2 bw-1 br-4 h-32" }, { children: [jsxRuntime.jsx(SvgIcSearch, { className: "search-bar__icon icon-dim-18" }), jsxRuntime.jsx("input", __assign({ placeholder: "Search" }, inputProps, { type: "text", "data-testid": "search-bar", defaultValue: initialSearchText, className: "search-bar__input bcn-0 ".concat(isSearchApplied ? 'search-bar__input--applied' : ''), onChange: handleChange, onKeyDown: handleKeyDown })), isSearchApplied && (jsxRuntime.jsx("button", __assign({ className: "flex search-bar__clear-button", type: "button", onClick: clearSearch, "aria-label": "Clear search" }, { children: jsxRuntime.jsx(SvgIcErrorCross, { className: "icon-dim-18 icon-n4 dc__vertical-align-middle" }) })))] })) })));
+    return (jsxRuntime.jsx("div", __assign({ className: containerClassName }, { children: jsxRuntime.jsxs("div", __assign({ className: "search-bar bcn-0 dc__block w-100 min-w-200 dc__position-rel en-2 bw-1 br-4 h-32" }, { children: [jsxRuntime.jsx(SvgIcSearch, { className: "search-bar__icon dc__position-abs icon-color-n6 icon-dim-18" }), jsxRuntime.jsx("input", __assign({ placeholder: "Search", "data-testid": "search-bar", type: "text" }, inputProps, { defaultValue: initialSearchText, className: "search-bar__input bcn-0 dc__position-abs w-100 h-100 br-4 dc__no-border pt-6 pr-10 pb-6 pl-30 fs-13 lh-20 fw-4 cn-9 placeholder-cn5 ".concat(showClearButton ? 'pr-30' : 'pr-10'), onChange: handleChange, onKeyDown: handleKeyDown, ref: inputRef })), showClearButton && (jsxRuntime.jsx("button", __assign({ className: "flex search-bar__clear-button dc__position-abs dc__transparent mt-0 mb-0 mr-5 ml-5", type: "button", onClick: clearSearch, "aria-label": "Clear search" }, { children: jsxRuntime.jsx(SvgIcErrorCross, { className: "icon-dim-18 icon-n4 dc__vertical-align-middle" }) })))] })) })));
 };
 
 var css_248z$3 = ".toggle__switch {\n  position: relative;\n  display: inline-block;\n  width: 100%;\n  height: 100%;\n}\n.toggle__switch.disabled {\n  cursor: not-allowed;\n}\n.toggle__switch.disabled .toggle__slider {\n  cursor: not-allowed;\n}\n\n/* Hide default HTML checkbox */\n.toggle__switch input {\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n/* The slider */\n.toggle__slider {\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: #ccc;\n  transition: all 0.4s ease;\n}\n.toggle__slider.round {\n  border-radius: 34px;\n}\n.toggle__slider.round:before {\n  border-radius: 50%;\n}\n.toggle__slider:before {\n  position: absolute;\n  content: \"\";\n  height: calc(100% - 8px);\n  width: calc(50% - 4px);\n  left: 4px;\n  bottom: 4px;\n  background-color: white;\n  transition: all 0.4s ease;\n}\n.toggle__slider.with-icon {\n  background-color: var(--N000) !important;\n}\n.toggle__slider.with-icon svg {\n  position: absolute;\n  content: \"\";\n  top: -1px;\n  left: -1px;\n  background-color: var(--N300);\n  transition: all 0.4s ease;\n}\n\ninput:checked + .toggle__slider {\n  background-color: var(--color);\n}\ninput:checked + .toggle__slider:before {\n  transform: translateX(100%);\n}\ninput:checked + .toggle__slider.with-icon svg {\n  transform: translateX(100%);\n  background-color: var(--color);\n}\n\ninput:focus + .toggle__slider {\n  box-shadow: 0 0 1px var(--color);\n}";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.53-beta-2",
+    "version": "0.0.53-beta-4",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {

package/src/Common/SearchBar/SearchBar.component.tsx

@@ -1,23 +1,24 @@
-import { ChangeEvent, FunctionComponent, useCallback, useState } from 'react'
+import { ChangeEvent, useCallback, useRef, useState, KeyboardEvent } from 'react'
 import { ReactComponent as Search } from '../../Assets/Icon/ic-search.svg'
 import { ReactComponent as Clear } from '../../Assets/Icon/ic-error-cross.svg'
 import { SearchBarProps } from './types'
 import './searchBar.scss'
-import { debounce, noop } from '../Helper'
+import { debounce } from '../Helper'
 
 /**
  * Generic search input component with support for enter based and debounced search
  */
-const SearchBar: FunctionComponent<SearchBarProps> = ({
+const SearchBar = ({
     initialSearchText = '',
-    handleSearchChange = noop,
-    handleEnter = noop,
+    handleSearchChange = () => {},
+    handleEnter = () => {},
     inputProps = {},
     containerClassName,
     shouldDebounce = false,
     debounceTimeout = 300,
-}) => {
-    const [isSearchApplied, setIsSearchApplied] = useState(!!initialSearchText)
+}: SearchBarProps) => {
+    const [showClearButton, setShowClearButton] = useState(!!initialSearchText)
+    const inputRef = useRef<HTMLInputElement>()
     const debouncedSearchChange = useCallback(debounce(handleSearchChange, debounceTimeout), [
         handleSearchChange,
         debounceTimeout,
@@ -25,7 +26,7 @@ const SearchBar: FunctionComponent<SearchBarProps> = ({
 
     const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
         const { value } = e.target
-        setIsSearchApplied(!!value)
+        setShowClearButton(!!value)
         if (shouldDebounce) {
             debouncedSearchChange(value)
         } else {
@@ -33,37 +34,46 @@ const SearchBar: FunctionComponent<SearchBarProps> = ({
         }
     }
 
-    const handleKeyDown = (e) => {
-        const keyCode = e.key
+    const _applySearch = (value: string) => {
+        handleSearchChange(value)
+        handleEnter(value)
+    }
+
+    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+        const { key } = e
 
-        if (keyCode === 'Enter') {
-            const event = { ...e, target: { ...e.target, value: e.target.value?.trim() } }
-            handleSearchChange(event.target.value)
-            handleEnter(event)
+        if (key === 'Enter') {
+            const inputTarget = e.target as HTMLInputElement
+            const value = inputTarget.value.trim()
+            _applySearch(value)
         }
     }
 
     const clearSearch = () => {
-        handleSearchChange('')
+        inputRef.current.value = ''
+        _applySearch('')
     }
 
     return (
         <div className={containerClassName}>
-            <div className="search-bar dc__position-rel en-2 bw-1 br-4 h-32">
-                <Search className="search-bar__icon icon-dim-18" />
+            <div className="search-bar bcn-0 dc__block w-100 min-w-200 dc__position-rel en-2 bw-1 br-4 h-32">
+                <Search className="search-bar__icon dc__position-abs icon-color-n6 icon-dim-18" />
                 <input
                     placeholder="Search"
-                    {...inputProps}
-                    type="text"
                     data-testid="search-bar"
+                    type="text"
+                    {...inputProps}
                     defaultValue={initialSearchText}
-                    className={`search-bar__input bcn-0 ${isSearchApplied ? 'search-bar__input--applied' : ''}`}
+                    className={`search-bar__input bcn-0 dc__position-abs w-100 h-100 br-4 dc__no-border pt-6 pr-10 pb-6 pl-30 fs-13 lh-20 fw-4 cn-9 placeholder-cn5 ${
+                        showClearButton ? 'pr-30' : 'pr-10'
+                    }`}
                     onChange={handleChange}
                     onKeyDown={handleKeyDown}
+                    ref={inputRef}
                 />
-                {isSearchApplied && (
+                {showClearButton && (
                     <button
-                        className="flex search-bar__clear-button"
+                        className="flex search-bar__clear-button dc__position-abs dc__transparent mt-0 mb-0 mr-5 ml-5"
                         type="button"
                         onClick={clearSearch}
                         aria-label="Clear search"

package/src/Common/SearchBar/index.ts

@@ -0,0 +1,2 @@
+export { default as SearchBar } from './SearchBar.component'
+export type { SearchBarProps } from './types'

package/src/Common/SearchBar/searchBar.scss

@@ -1,65 +1,31 @@
 .search-bar {
-    margin-right: 0;
-    margin-bottom: 0;
-    background-color: var(--N0);
-    display: block;
-    width: 100%;
-    min-width: 200px;
-    height: 32px;
-    position: relative;
 
-    &:focus, &:focus-within {
+    &:focus,
+    &:focus-within {
         outline: none;
         border: solid 1px var(--B500);
     }
 
     &__input {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        border-radius: 4px;
-        border: none;
-        padding: 6px 10px 6px 30px;
-        font-size: 13px;
-        line-height: 20px;
-        color: var(--N900);
-
-        &--applied {
-            width: calc(100% - 22px);
-        }
 
         &:focus,
         &:focus-visible {
             border: none;
             outline: none;
         }
-
-        &::placeholder {
-            font-weight: 400;
-            color: var(--N500);
-        }
     }
 
     &__icon {
-        position: absolute;
         z-index: 1;
-        color: var(--N600);
         top: 50%;
         left: 8px;
         transform: translateY(-50%);
-        line-height: 1.9;
     }
 
     &__clear-button {
-        background-color: transparent;
-        position: absolute;
         right: 0;
         top: 50%;
         transform: translateY(-50%);
         z-index: 1;
-        border: none;
-        padding: 2px;
-        color: var(--N600);
-        margin: 0px 5px;
     }
 }

package/src/Common/SearchBar/types.ts

@@ -1,4 +1,4 @@
-import { InputHTMLAttributes, SyntheticEvent } from 'react'
+import { InputHTMLAttributes } from 'react'
 
 export interface SearchBarProps {
     /**
@@ -14,7 +14,7 @@ export interface SearchBarProps {
     /**
      * Enter event handler for the search input
      */
-    handleEnter?: (event: SyntheticEvent) => void
+    handleEnter?: (searchText: string) => void
     /**
      * Input props for the search input
      */

package/src/Common/index.ts

@@ -26,7 +26,7 @@ export * from './Common.service'
 export * from './Checkbox'
 export { default as EmptyState } from './EmptyState/EmptyState'
 export { default as GenericEmptyState } from './EmptyState/GenericEmptyState'
-export { default as SearchBar } from './SearchBar/SearchBar.component'
+export * from './SearchBar'
 export { default as Toggle } from './Toggle/Toggle'
 export { default as ScanVulnerabilitiesTable } from './Security/ScanVulnerabilitiesTable'
 export { default as StyledRadioGroup } from './RadioGroup/RadioGroup'