@devtron-labs/devtron-fe-common-lib 0.0.58-beta-21 → 0.0.58-beta-24

package/dist/Common/CustomInput/CustomInput.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { CustomInputProps } from './Types';
-export declare function CustomInput({ name, value, error, onChange, onFocus, label, type, disabled, labelClassName, placeholder, tabIndex, dataTestid, isRequiredField, autoFocus, rootClassName, autoComplete, helperText, handleOnBlur, readOnly, noTrim, ref, onKeyPress, defaultValue, onKeyDown, required, additionalErrorInfo, inputWrapClassName, dataIndex, }: CustomInputProps): JSX.Element;
+export declare function CustomInput({ name, value, error, onChange, onFocus, label, type, disabled, labelClassName, placeholder, tabIndex, dataTestid, isRequiredField, autoFocus, rootClassName, autoComplete, helperText, handleOnBlur, readOnly, noTrim, ref, onKeyPress, defaultValue, onKeyDown, required, additionalErrorInfo, inputWrapClassName, inputProps, }: CustomInputProps): JSX.Element;

package/dist/Common/CustomInput/Types.d.ts

@@ -1,4 +1,4 @@
-import React, { HTMLInputTypeAttribute } from 'react';
+import React, { HTMLInputTypeAttribute, InputHTMLAttributes } from 'react';
 export interface CustomInputProps {
     name: string;
     value: string | number;
@@ -27,5 +27,5 @@ export interface CustomInputProps {
     required?: boolean;
     additionalErrorInfo?: React.ReactNode;
     inputWrapClassName?: string;
-    dataIndex?: string;
+    inputProps?: InputHTMLAttributes<HTMLInputElement>;
 }

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

@@ -35,5 +35,5 @@ import './searchBar.scss';
  * <SearchBar inputProps={{ placeholder: 'Enter search text' }} />
  * ```
  */
-declare const SearchBar: ({ initialSearchText, handleSearchChange, handleEnter, inputProps, containerClassName, shouldDebounce, debounceTimeout, searchIconClassName, }: SearchBarProps) => JSX.Element;
+declare const SearchBar: ({ initialSearchText, handleSearchChange, handleEnter, inputProps, containerClassName, shouldDebounce, debounceTimeout, }: SearchBarProps) => JSX.Element;
 export default SearchBar;

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

@@ -32,9 +32,4 @@ export interface SearchBarProps {
      * Timeout for the debounce handler to be triggered
      */
     debounceTimeout?: number;
-    /**
-     * Placeholder for the search input
-     * @default 'Search'
-     */
-    searchIconClassName?: string;
 }

package/dist/index.js

@@ -24668,8 +24668,8 @@ styleInject(css_248z$5);
  * ```
  */
 var SearchBar = function (_a) {
-    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, _h = _a.searchIconClassName, searchIconClassName = _h === void 0 ? '' : _h;
-    var _j = __read(React.useState(!!initialSearchText), 2), showClearButton = _j[0], setShowClearButton = _j[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,
@@ -24701,7 +24701,7 @@ var SearchBar = function (_a) {
         inputRef.current.value = '';
         _applySearch('');
     };
-    return (jsxRuntime.jsx("div", __assign({ className: containerClassName }, { children: jsxRuntime.jsxs("div", __assign({ className: "search-bar bc-n50 focus-within-border-b5 dc__hover-border-n300 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-16 ".concat(searchIconClassName) }), jsxRuntime.jsx("input", __assign({ placeholder: inputProps.placeholder || 'Search', "data-testid": "search-bar", type: "text" }, inputProps, { defaultValue: initialSearchText, className: "search-bar__input 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" }) })))] })) })));
+    return (jsxRuntime.jsx("div", __assign({ className: containerClassName }, { children: jsxRuntime.jsxs("div", __assign({ className: "search-bar bc-n50 focus-within-border-b5 dc__hover-border-n300 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-16" }), jsxRuntime.jsx("input", __assign({ placeholder: inputProps.placeholder || 'Search', "data-testid": "search-bar", type: "text" }, inputProps, { defaultValue: initialSearchText, className: "search-bar__input 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-16 icon-n4 dc__vertical-align-middle" }) })))] })) })));
 };
 
 var css_248z$4 = ".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}";
@@ -28485,7 +28485,7 @@ var handleAddCD = function (_a) {
 };
 
 function CustomInput(_a) {
-    var name = _a.name, value = _a.value, error = _a.error, onChange = _a.onChange, _b = _a.onFocus, onFocus = _b === void 0 ? function (e) { } : _b, label = _a.label, _c = _a.type, type = _c === void 0 ? 'text' : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.labelClassName, labelClassName = _e === void 0 ? '' : _e, _f = _a.placeholder, placeholder = _f === void 0 ? '' : _f, _g = _a.tabIndex, tabIndex = _g === void 0 ? 1 : _g, _h = _a.dataTestid, dataTestid = _h === void 0 ? '' : _h, _j = _a.isRequiredField, isRequiredField = _j === void 0 ? false : _j, _k = _a.autoFocus, autoFocus = _k === void 0 ? false : _k, _l = _a.rootClassName, rootClassName = _l === void 0 ? '' : _l, _m = _a.autoComplete, autoComplete = _m === void 0 ? 'off' : _m, _o = _a.helperText, helperText = _o === void 0 ? '' : _o, handleOnBlur = _a.handleOnBlur, _p = _a.readOnly, readOnly = _p === void 0 ? false : _p, _q = _a.noTrim, noTrim = _q === void 0 ? false : _q, ref = _a.ref, onKeyPress = _a.onKeyPress, defaultValue = _a.defaultValue, onKeyDown = _a.onKeyDown, required = _a.required, additionalErrorInfo = _a.additionalErrorInfo, _r = _a.inputWrapClassName, inputWrapClassName = _r === void 0 ? '' : _r, _s = _a.dataIndex, dataIndex = _s === void 0 ? '' : _s;
+    var name = _a.name, value = _a.value, error = _a.error, onChange = _a.onChange, _b = _a.onFocus, onFocus = _b === void 0 ? function (e) { } : _b, label = _a.label, _c = _a.type, type = _c === void 0 ? 'text' : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.labelClassName, labelClassName = _e === void 0 ? '' : _e, _f = _a.placeholder, placeholder = _f === void 0 ? '' : _f, _g = _a.tabIndex, tabIndex = _g === void 0 ? 1 : _g, _h = _a.dataTestid, dataTestid = _h === void 0 ? '' : _h, _j = _a.isRequiredField, isRequiredField = _j === void 0 ? false : _j, _k = _a.autoFocus, autoFocus = _k === void 0 ? false : _k, _l = _a.rootClassName, rootClassName = _l === void 0 ? '' : _l, _m = _a.autoComplete, autoComplete = _m === void 0 ? 'off' : _m, _o = _a.helperText, helperText = _o === void 0 ? '' : _o, handleOnBlur = _a.handleOnBlur, _p = _a.readOnly, readOnly = _p === void 0 ? false : _p, _q = _a.noTrim, noTrim = _q === void 0 ? false : _q, ref = _a.ref, onKeyPress = _a.onKeyPress, defaultValue = _a.defaultValue, onKeyDown = _a.onKeyDown, required = _a.required, additionalErrorInfo = _a.additionalErrorInfo, _r = _a.inputWrapClassName, inputWrapClassName = _r === void 0 ? '' : _r, _s = _a.inputProps, inputProps = _s === void 0 ? {} : _s;
     function handleError(error) {
         if (!Array.isArray(error)) {
             return [error];
@@ -28534,10 +28534,10 @@ function CustomInput(_a) {
             return (jsxRuntime.jsx("label", __assign({ className: "form__label ".concat(labelClassName), "data-testid": "label-".concat(dataTestid) }, { children: renderInputLabelConditionally() })));
         }
     };
-    return (jsxRuntime.jsxs("div", __assign({ className: "flex column left top ".concat(inputWrapClassName) }, { children: [renderInputLabel(), jsxRuntime.jsx("input", { "data-testid": dataTestid, "data-index": dataIndex, type: type, name: name, autoComplete: autoComplete, className: "form__input ".concat(rootClassName), onChange: function (e) {
+    return (jsxRuntime.jsxs("div", __assign({ className: "flex column left top ".concat(inputWrapClassName) }, { children: [renderInputLabel(), jsxRuntime.jsx("input", __assign({ "data-testid": dataTestid, type: type, name: name, autoComplete: autoComplete, className: "form__input ".concat(rootClassName), onChange: function (e) {
                     e.persist();
                     onChange(e);
-                }, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder, value: value, disabled: disabled, tabIndex: tabIndex, autoFocus: autoFocus, readOnly: readOnly, ref: ref, onKeyPress: onKeyPress, defaultValue: defaultValue, onKeyDown: onKeyDown, required: required }), getInputError(), helperText && (jsxRuntime.jsxs("div", __assign({ className: "form__text-field-info" }, { children: [jsxRuntime.jsx(SvgIcInfoFilled, { className: "form__icon form__icon--info" }), jsxRuntime.jsx("p", __assign({ className: "sentence-case" }, { children: helperText }))] })))] })));
+                }, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder, value: value, disabled: disabled, tabIndex: tabIndex, autoFocus: autoFocus, readOnly: readOnly, ref: ref, onKeyPress: onKeyPress, defaultValue: defaultValue, onKeyDown: onKeyDown, required: required }, inputProps)), getInputError(), helperText && (jsxRuntime.jsxs("div", __assign({ className: "form__text-field-info" }, { children: [jsxRuntime.jsx(SvgIcInfoFilled, { className: "form__icon form__icon--info" }), jsxRuntime.jsx("p", __assign({ className: "sentence-case" }, { children: helperText }))] })))] })));
 }
 
 exports.DraggablePositionVariant = void 0;

package/package.json

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

package/src/Common/CustomInput/CustomInput.tsx

@@ -30,7 +30,7 @@ export function CustomInput({
     required,
     additionalErrorInfo,
     inputWrapClassName = '',
-    dataIndex = '',
+    inputProps = {},
 }: CustomInputProps) {
     function handleError(error: any): any[] {
         if (!Array.isArray(error)) {
@@ -97,7 +97,6 @@ export function CustomInput({
             {renderInputLabel()}
             <input
                 data-testid={dataTestid}
-                data-index={dataIndex}
                 type={type}
                 name={name}
                 autoComplete={autoComplete}
@@ -119,6 +118,7 @@ export function CustomInput({
                 defaultValue={defaultValue}
                 onKeyDown={onKeyDown}
                 required={required}
+                {...inputProps}
             />
 
             {getInputError()}

package/src/Common/CustomInput/Types.ts

@@ -1,4 +1,4 @@
-import React, { HTMLInputTypeAttribute } from 'react'
+import React, { HTMLInputTypeAttribute, InputHTMLAttributes } from 'react'
 
 export interface CustomInputProps {
     name: string
@@ -6,7 +6,7 @@ export interface CustomInputProps {
     onChange: (e: any) => void
     onFocus?: (e: any) => void
     autoComplete?: string
-    label?: string |  React.ReactNode
+    label?: string | React.ReactNode
     labelClassName?: string
     type?: HTMLInputTypeAttribute
     disabled?: boolean
@@ -28,5 +28,5 @@ export interface CustomInputProps {
     required?: boolean
     additionalErrorInfo?: React.ReactNode
     inputWrapClassName?: string
-    dataIndex?: string
-}
+    inputProps?: InputHTMLAttributes<HTMLInputElement>
+}

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

@@ -47,7 +47,6 @@ const SearchBar = ({
     containerClassName,
     shouldDebounce = false,
     debounceTimeout = 300,
-    searchIconClassName = '',
 }: SearchBarProps) => {
     const [showClearButton, setShowClearButton] = useState(!!initialSearchText)
     const inputRef = useRef<HTMLInputElement>()
@@ -88,9 +87,7 @@ const SearchBar = ({
     return (
         <div className={containerClassName}>
             <div className="search-bar bc-n50 focus-within-border-b5 dc__hover-border-n300 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-16 ${searchIconClassName}`}
-                />
+                <Search className="search-bar__icon dc__position-abs icon-color-n6 icon-dim-16" />
                 <input
                     placeholder={inputProps.placeholder || 'Search'}
                     data-testid="search-bar"
@@ -111,7 +108,7 @@ const SearchBar = ({
                         onClick={clearSearch}
                         aria-label="Clear search"
                     >
-                        <Clear className="icon-dim-18 icon-n4 dc__vertical-align-middle" />
+                        <Clear className="icon-dim-16 icon-n4 dc__vertical-align-middle" />
                     </button>
                 )}
             </div>

package/src/Common/SearchBar/types.ts

@@ -33,9 +33,4 @@ export interface SearchBarProps {
      * Timeout for the debounce handler to be triggered
      */
     debounceTimeout?: number
-    /**
-     * Placeholder for the search input
-     * @default 'Search'
-     */
-    searchIconClassName?: string
 }