@bikdotai/bik-component-library 0.0.5584-tooltip-beta → 0.0.9998-beta-switch

package/dist/cjs/components/dropdown/OpenedDropdown/components/searchbox/SearchBox.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../../../../input/Input.js"),o=require("../../../../input/context/InputStyleProvider.js"),n=require("../../../../../constants/Theme.js"),s=require("../../../../../assets/icons/cross.svg.js"),i=require("../../../../../assets/icons/search.svg.js");exports.SearchBox=a=>{let{onSearch:c,version:u}=a;const[l,p]=r.useState(""),[d,h]=r.useState(!1);return e.jsx(o.InputStyleContext.Provider,Object.assign({value:{InputWrapper:{borderRadius:0,border:0,borderBottom:`${"2.0"===u?.5:1}px solid ${n.COLORS.stroke.primary}`,padding:""+("2.0"===u?"6px 8px":"14px 16px"),marginBottom:4},IconHolder:{marginLeft:0},input:{marginLeft:4,minHeight:"100%"}}},{children:e.jsx(t.Input,{noKeyDownChange:!0,skipFocus:!0,placeholder:"Search",variant:"2.0"===u?"small":"default",leftIcon:{icon:()=>e.jsx(i.default,{width:"2.0"===u?18:24,height:"2.0"===u?18:24,color:n.COLORS.content.placeholder})},rightIcon:{icon:()=>l?e.jsx(s.default,{onClick:()=>{h(!0),c(""),p("")},width:24,height:24,color:n.COLORS.content.placeholder}):e.jsx(e.Fragment,{})},reset:d,onChangeText:e=>{h(!1),p(e),c(e)}})}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../../../../input/Input.js"),n=require("../../../../input/context/InputStyleProvider.js"),o=require("../../../../../constants/Theme.js"),i=require("../../../../../assets/icons/cross.svg.js"),s=require("../../../../../assets/icons/search.svg.js");exports.SearchBox=c=>{let{onSearch:u}=c;const a=r.createRef();return e.jsx(n.InputStyleContext.Provider,Object.assign({value:{InputWrapper:{borderRadius:0,border:0,borderBottom:"1px solid "+o.COLORS.stroke.primary,padding:"14px 16px"},IconHolder:{marginLeft:0},input:{marginLeft:4,minHeight:"100%"}}},{children:e.jsx(t.Input,{ref:a,placeholder:"Search",leftIcon:{icon:()=>e.jsx(s.default,{width:24,height:24,color:o.COLORS.content.placeholder})},rightIcon:{icon:()=>{var r;return(null===(r=null==a?void 0:a.current)||void 0===r?void 0:r.value)?e.jsx(i.default,{onClick:()=>{a.current&&(a.current.value=""),u("")},width:24,height:24,color:o.COLORS.content.placeholder}):e.jsx(e.Fragment,{})}},onChangeText:u})}))};

package/dist/cjs/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.d.ts

@@ -1,6 +1,4 @@
 import React from 'react';
 export declare const SearchZeroState: React.FC<{
     searchedString: string;
-    height: number;
-    isLoading?: boolean;
 }>;

package/dist/cjs/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../../zeroState/ZeroState.js");exports.SearchZeroState=r=>{let{searchedString:s,height:i,isLoading:o}=r;return e.jsx("div",Object.assign({style:{height:i,display:"flex",alignItems:"center"}},{children:e.jsx(t.ZeroState,{isLoading:o,title:"No results found",subTitle:`Sorry we could not find any results for "${null!=s?s:""}"`})}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../../../zeroState/ZeroState.js");exports.SearchZeroState=t=>{let{searchedString:o}=t;return e.jsx(r.ZeroState,{title:"No results found",subTitle:`Sorry we could not find any results for "${null!=o?o:""}"`})};

package/dist/cjs/components/dropdown/OpenedDropdown/utils/iterationOnOptions.d.ts

@@ -9,10 +9,7 @@ export declare function iterateOnOptions(options: DropdownOption[], newVal: Part
     isFreeForm?: boolean | undefined;
     subText?: string | undefined;
     trailingIcon?: JSX.Element | undefined;
-    leadingIcon?: JSX.Element | undefined;
     customComponent?: JSX.Element | undefined;
-    searchKey?: string | undefined;
-    selectedLabel?: string | undefined;
 } | {
     label?: string | undefined;
     value?: string | undefined;
@@ -22,12 +19,6 @@ export declare function iterateOnOptions(options: DropdownOption[], newVal: Part
     isFreeForm?: boolean | undefined;
     subText?: string | undefined;
     trailingIcon?: JSX.Element | undefined;
-    leadingIcon?: JSX.Element | undefined;
     customComponent?: JSX.Element | undefined;
-    searchKey?: string | undefined;
-    selectedLabel?: string | undefined;
     options: SingleOption[];
 })[];
-export declare function iterateOnOptionsRaw(options: DropdownOption[], cb: (option: SingleOption) => void): void;
-export declare function getSelectedOptionsAsText(selectedOption: DropdownOption[]): string | undefined;
-export declare function getSelectedOptionsAsArray(selectedOption: DropdownOption[]): string[];

package/dist/cjs/components/dropdown/OpenedDropdown/utils/iterationOnOptions.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.getSelectedOptionsAsText=function(t){if(t&&t.length)return t.map((t=>{var e;const n=t;return null!==(e=n.selectedLabel)&&void 0!==e?e:n.label})).join(", ")},exports.iterateOnOptions=function(t,e,n){return t.map((t=>{if(t.options){const s=t.options.map((t=>!n||n(t)?Object.assign(Object.assign({},t),e):Object.assign({},t)));return Object.assign(Object.assign({},t),{options:[...s]})}return!n||n(t)?Object.assign(Object.assign({},t),e):Object.assign({},t)}))},exports.iterateOnOptionsRaw=function(t,e){t.forEach((t=>{t.options?t.options.forEach(e):e(t)}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.iterateOnOptions=function(s,t,e){return s.map((s=>{if(s.options){const n=s.options.map((s=>!e||e(s)?Object.assign(Object.assign({},s),t):Object.assign({},s)));return Object.assign(Object.assign({},s),{options:[...n]})}return!e||e(s)?Object.assign(Object.assign({},s),t):Object.assign({},s)}))};

package/dist/cjs/components/dropdown/index.d.ts

@@ -1,6 +1,3 @@
-import { DropdownPopover } from './DropdownPopover';
 export * from './Dropdown';
-export * from './ChipDropdown';
-export { DropdownPopover };
+export * from './DropdownPopover';
 export * from './OpenedDropdown';
-export * from './MenuItem/MenuItem';

package/dist/cjs/components/dropdown/type.d.ts

@@ -1,6 +1,4 @@
 /// <reference types="react" />
-import { Placement, PositioningStrategy } from '@popperjs/core';
-import { Type } from '../button/model';
 export interface OpenDropdownProps {
     defaultOptions?: DropdownOption[];
     options: DropdownOption[];
@@ -10,25 +8,11 @@ export interface OpenDropdownProps {
     width?: string;
     height?: number | string;
     allowFreeForm?: boolean;
-    onClose?: (selectedData?: DropdownOption | DropdownOption[]) => void;
+    onClose?: () => void;
     onSelect?: (option: DropdownOption | DropdownOption[]) => void;
-    placement?: Placement;
-    strategy?: PositioningStrategy;
-    onSearch?: (key: string) => Promise<DropdownOption[]>;
-    version?: '1.0' | '2.0';
-    skipSorting?: boolean;
-    headerRef?: any;
-    hideSelectAll?: boolean;
-    primaryButtonText?: string;
-    onInfiniteScroll?: () => void;
-    onMultiSelectClear?: () => void;
-    onDropdownItemClick?: (option: DropdownOption) => void;
-    buttonOptions?: ButtonOptions;
-    isSearchLoading?: boolean;
 }
 export type GroupedOption = {
     label?: string;
-    leadingIcon?: JSX.Element;
     options: (SingleOption | MultiSelectOption)[];
 };
 export type SingleOption = {
@@ -40,17 +24,7 @@ export type SingleOption = {
     isFreeForm?: boolean;
     subText?: string;
     trailingIcon?: JSX.Element;
-    leadingIcon?: JSX.Element;
     customComponent?: JSX.Element;
-    searchKey?: string;
-    selectedLabel?: string;
 };
 export type MultiSelectOption = SingleOption;
 export type DropdownOption = MultiSelectOption | SingleOption | GroupedOption;
-export interface ButtonOptions {
-    primaryButtonText?: string;
-    primaryButtonType?: Type;
-    secondaryButtonText?: string;
-    secondaryButtonType?: Type;
-}
-export type { Placement };

package/dist/cjs/components/fab-menu/FABMenu.d.ts

@@ -21,5 +21,4 @@ export declare const FABMenu: React.FC<{
     isRound?: boolean;
     dropPosition?: DROP_POSITION;
     menuAligment?: MENU_ALIGNMENT;
-    version?: '1.0' | '2.0';
 }>;

package/dist/cjs/components/fab-menu/FABMenu.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),o=require("../dropdown/OpenedDropdown/components/OpennedDropdown.js"),n=require("../floating-action-button/FloatingActionButton.js");require("../floating-action-button/FloatingActionButton.styles.js");exports.FABMenu=i=>{const{onSelect:e,menuOptions:r,buttonWidth:d,buttonHeight:u,buttonColor:s,buttonPosition:l,menuWidth:p,menuHeight:c,buttonIcon:a,buttonPaddingHorizontal:g,buttonPaddingVertical:h,tooltipPlacement:b,tooltipText:m,zIndex:x,isRound:P,dropPosition:j,menuAligment:w,tooltipWidth:A}=i;return t.jsx("div",{children:t.jsx(n.FloatingActionButton,Object.assign({icon:a,width:d,height:u,color:s,position:l,buttonPaddingHorizontal:g,buttonPaddingVertical:h,tooltipPlacement:b,tooltipText:m,zIndex:x,isRound:P,dropPosition:j,menuAligment:w,tootipWidth:A},{children:t.jsx(o.OpenedDropdown,{options:r,height:c||90,width:`${p}px`,onSelect:e,version:i.version})}))})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),o=require("../dropdown/OpenedDropdown/components/OpennedDropdown.js"),n=require("../floating-action-button/FloatingActionButton.js");require("../floating-action-button/FloatingActionButton.styles.js");exports.FABMenu=i=>{const{onSelect:e,menuOptions:d,buttonWidth:r,buttonHeight:u,buttonColor:l,buttonPosition:s,menuWidth:p,menuHeight:c,buttonIcon:a,buttonPaddingHorizontal:g,buttonPaddingVertical:h,tooltipPlacement:b,tooltipText:m,zIndex:x,isRound:P,dropPosition:j,menuAligment:w,tooltipWidth:A}=i;return t.jsx("div",{children:t.jsx(n.FloatingActionButton,Object.assign({icon:a,width:r,height:u,color:l,position:s,buttonPaddingHorizontal:g,buttonPaddingVertical:h,tooltipPlacement:b,tooltipText:m,zIndex:x,isRound:P,dropPosition:j,menuAligment:w,tootipWidth:A},{children:t.jsx(o.OpenedDropdown,{options:d,height:c||90,width:`${p}px`,onSelect:e})}))})};

package/dist/cjs/components/helpers/FileUploaderHelper.d.ts

@@ -1,4 +1,4 @@
-export declare const FILE_TYPE_NOT_SUPPORT = "File type not supported";
+export declare const FILE_TYPE_NOT_SUPPORT = "File type no supported";
 export declare const FILE_SIZE_REACHED: (size: number) => string;
 export declare const getFileFormatErrorMessage: (format: string) => string;
 export declare const SIZE_LIMIT_MAP: {
@@ -8,11 +8,5 @@ export declare const SIZE_LIMIT_MAP: {
 };
 export declare const SUPPORTED_FILE_FORMAT: string[];
 export declare class FileUploaderHelper {
-    validate(inputData: {
-        file?: Blob;
-        linkData?: {
-            type: string;
-            size: number;
-        };
-    }): string | undefined;
+    validate(file: Blob): string | undefined;
 }

package/dist/cjs/components/helpers/FileUploaderHelper.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../utils/bytesToMB.js");const t="File type not supported",p=e=>`Max file size of ${e}MB is allowed`,i=e=>`Only ${e.toUpperCase()} format allowed`,r={image:5,video:16,application:100},s=["mp4","png","jpeg","jpg","pdf"];exports.FILE_SIZE_REACHED=p,exports.FILE_TYPE_NOT_SUPPORT=t,exports.FileUploaderHelper=class{validate(o){const{file:l,linkData:a}=o;let n=0,f="",u="";if(l)n=l.size,f=l.type.split("/")[0],u=l.type.split("/")[1];else{if(!a)return t;n=a.size,f=a.type.split("/")[0],u=a.type.split("/")[1]}if(!r[f])return t;if(e.bytesToMB(n)>r[f])return p(r[f]);if(!s.includes(u.toLocaleLowerCase())){if("video"===f)return i("mp4");if("image"===f)return i("png, jpeg, jpg");if("application"===f)return i("pdf")}}},exports.SIZE_LIMIT_MAP=r,exports.SUPPORTED_FILE_FORMAT=s,exports.getFileFormatErrorMessage=i;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../utils/bytesToMB.js");const r="File type no supported",t=e=>`Max file size of ${e}mb is allowed`,p=e=>`Only ${e.toUpperCase()} format allowed`,o={image:5,video:16,application:100},i=["mp4","png","jpeg","jpg","pdf"];exports.FILE_SIZE_REACHED=t,exports.FILE_TYPE_NOT_SUPPORT=r,exports.FileUploaderHelper=class{validate(s){const a=s.size,[l,n]=s.type.split("/");if(!o[l])return r;if(e.bytesToMB(a)>o[l])return t(o[l]);if(!i.includes(n.toLocaleLowerCase())){if("video"===l)return p("mp4");if("image"===l)return p("png, jpeg, jpg");if("application"===l)return p("pdf")}}},exports.SIZE_LIMIT_MAP=o,exports.SUPPORTED_FILE_FORMAT=i,exports.getFileFormatErrorMessage=p;

package/dist/cjs/components/icon-button/IconButton.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("react"),o=require("./IconButton.styled.js"),i=require("./theme.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=n(r);const d=r.forwardRef(((r,n)=>{var{id:d,iconButtonType:l="default",Icon:c,height:u=20,width:a=20,bordered:y,disabled:b,isSelected:h,style:f,svgStyle:j,iconColor:p}=r,g=e.__rest(r,["id","iconButtonType","Icon","height","width","bordered","disabled","isSelected","style","svgStyle","iconColor"]);const v=i.getIconColor(l,b,h);return t.jsx(o.IconButton,Object.assign({id:d,ref:n,style:f,iconButtonType:l,bordered:y,disabled:b,isSelected:h},g,{children:s.default.createElement(c,{height:u,width:a,color:p||v,style:Object.assign({display:"block"},null!=j?j:{})})}))}));d.displayName="IconButton",exports.IconButton=d;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("react"),o=require("./IconButton.styled.js"),i=require("./theme.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=d(r);const s=r.forwardRef(((r,d)=>{var{id:s,iconButtonType:c="default",Icon:l,height:u=20,width:a=20,bordered:y,disabled:b,isSelected:h,style:f}=r,p=e.__rest(r,["id","iconButtonType","Icon","height","width","bordered","disabled","isSelected","style"]);const j=i.getIconColor(c,b,h);return t.jsx(o.IconButton,Object.assign({id:s,ref:d,style:f,iconButtonType:c,bordered:y,disabled:b,isSelected:h},p,{children:n.default.createElement(l,{height:u,width:a,color:j,style:{display:"block"}})}))}));s.displayName="IconButton",exports.IconButton=s;

package/dist/cjs/components/icon-button/IconButton.styled.js

@@ -1,3 +1,3 @@
 "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("styled-components"),e=require("../../constants/Theme.js"),n=require("./theme.js");function r(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}const o=r(t).default.button`
-	${t=>`\n\tall: unset;\n\tcursor: pointer;\n\tpadding: 6px;\n\tborder-radius: 4px;\n\tflex-wrap: wrap;\n\t${t.bordered&&"ai"!==t.iconButtonType?`border: 1px solid ${e.COLORS.stroke.primary};`:""}\n\t${t.isSelected?`\n\t\t\tbackground: ${n.generateBackgroundColor(t.iconButtonType)};\n\t\t\t\t`:"\n\t\t\t\t:hover {\n\t\t\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t\t\t}\n\t\t\t"}\n\t${t.disabled&&"\n\t\t\tcursor: not-allowed !important;\n\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t"}\n\n\t`}
+	${t=>`\n\tall: unset;\n\tcursor: pointer;\n\tpadding: 6px;\n\tborder-radius: 4px;\n\tflex-wrap: wrap;\n\t${t.bordered?`border: 1px solid ${e.COLORS.stroke.primary};`:""}\n\t${t.isSelected?`\n\t\t\tbackground-color: ${n.generateBackgroundColor(t.iconButtonType)};\n\t\t\t\t`:"\n\t\t\t\t:hover {\n\t\t\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t\t\t}\n\t\t\t"}\n\t${t.disabled&&"\n\t\t\tcursor: not-allowed !important;\n\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t"}\n\n\t`}
 `;exports.IconButton=o;

package/dist/cjs/components/icon-button/model.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export type IconButtonType = 'default' | 'negative' | 'positive' | 'warning' | 'ai';
+export type IconButtonType = 'default' | 'negative' | 'positive' | 'warning';
 export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /**
      * Icon to render
@@ -10,11 +10,6 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
      * @default default undefined
      */
     style?: React.CSSProperties;
-    /**
-     * Custom styles which can be added to the svg
-     * @default default undefined
-     */
-    svgStyle?: React.CSSProperties;
     /**
      * Custom height for the svg icon
      * @default default 20
@@ -39,5 +34,4 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
      * Flag to check if icon button is selected/clicked
      */
     isSelected?: boolean;
-    iconColor?: string;
 }

package/dist/cjs/components/icon-button/theme.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../constants/Theme.js");exports.generateBackgroundColor=t=>"default"===t?e.COLORS.background.brandLight:"negative"===t?e.COLORS.background.negative.light:"positive"===t?e.COLORS.background.positive.light:"ai"===t?e.COLORS.surface.aiLight:e.COLORS.background.warning.light,exports.getIconColor=(t,n,r)=>{if(n)return e.COLORS.content.inactive;switch(t){case"default":return r?e.COLORS.content.brand:e.COLORS.content.primary;case"negative":return e.COLORS.content.negative;case"positive":return e.COLORS.content.positive;case"warning":return r?e.COLORS.content.warning:e.COLORS.content.primary;default:return e.COLORS.content.primary}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../constants/Theme.js");exports.generateBackgroundColor=t=>"default"===t?e.COLORS.background.brandLight:"negative"===t?e.COLORS.background.negative.light:"positive"===t?e.COLORS.background.positive.light:e.COLORS.background.warning.light,exports.getIconColor=(t,n,r)=>{if(n)return e.COLORS.content.inactive;switch(t){case"default":return r?e.COLORS.content.brand:e.COLORS.content.primary;case"negative":return e.COLORS.content.negative;case"positive":return e.COLORS.content.positive;case"warning":return r?e.COLORS.content.warning:e.COLORS.content.primary;default:return e.COLORS.content.primary}};

package/dist/cjs/components/image-compress/ImageCompress.d.ts

@@ -1,11 +1,7 @@
-export interface CompressImageOptions {
-    maxSizeMB?: number;
-}
 export interface CompressImageReturnType {
     base64: string;
     compressedFile: File;
 }
 export declare class ImageService {
-    static base64ToImage: (base64String: string) => File;
-    static compressImage: (file: File, options?: CompressImageOptions) => Promise<CompressImageReturnType>;
+    static compressImage: (file: File) => Promise<CompressImageReturnType>;
 }

package/dist/cjs/components/image-compress/ImageCompress.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=r(require("browser-image-compression"));class i{}Object.defineProperty(i,"base64ToImage",{enumerable:!0,configurable:!0,writable:!0,value:e=>{const r=atob(e.split(",")[1]),t=e.split(",")[0].split(":")[1].split(";")[0],i=new ArrayBuffer(r.length),a=new Uint8Array(i);for(let e=0;e<r.length;e++)a[e]=r.charCodeAt(e);const o=new Blob([i],{type:t});return new File([o],"image",{type:t})}}),Object.defineProperty(i,"compressImage",{enumerable:!0,configurable:!0,writable:!0,value:(r,i)=>e.__awaiter(void 0,void 0,void 0,(function*(){let e=r,a="";const o=i?i.maxSizeMB:r.size/1024/1024*.8;try{const i={maxSizeMB:o,maxWidthOrHeight:1920,useWebWorker:!0};r.size/1024/1024>.1&&(e=yield t.default(r,i)),a=yield t.default.getDataUrlFromFile(e)}catch(e){console.error(e)}return{base64:a,compressedFile:e}}))}),exports.ImageService=i;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=r(require("browser-image-compression"));class i{}Object.defineProperty(i,"compressImage",{enumerable:!0,configurable:!0,writable:!0,value:r=>e.__awaiter(void 0,void 0,void 0,(function*(){let e=r,i="";try{const a={maxSizeMB:r.size/1024/1024*.8,maxWidthOrHeight:1920,useWebWorker:!0};r.size/1024/1024>1&&(e=yield t.default(r,a)),i=yield t.default.getDataUrlFromFile(e)}catch(e){console.error(e)}return{base64:i,compressedFile:e}}))}),exports.ImageService=i;

package/dist/cjs/components/input/Input.d.ts

@@ -1,9 +1,8 @@
-import React from 'react';
+/// <reference types="react" />
 export type InputVariant = 'default' | 'small';
-export type InputStateI = 'invalid' | 'active' | 'read-only' | 'disabled' | 'disabled-invalid' | 'none';
-export type InputTypeI = 'number' | 'email' | 'text' | 'multiline' | 'url' | 'zip' | 'phonenumber' | 'password';
+export type InputStateI = 'invalid' | 'active' | 'read-only' | 'disabled' | 'none';
+export type InputTypeI = 'number' | 'email' | 'text' | 'multiline';
 export interface InputProps {
-    'data-test'?: string;
     noErrorHint?: boolean;
     placeholder?: string;
     variant?: InputVariant;
@@ -17,7 +16,6 @@ export interface InputProps {
         icon: React.FC;
         callback?: () => void;
     };
-    labelElement?: React.ReactNode;
     labelText?: string;
     maxCharLimit?: number;
     isRequired?: boolean;
@@ -37,28 +35,9 @@ export interface InputProps {
     suffixText?: string;
     prefixText?: string;
     value?: string;
-    reset?: boolean;
     onBlur?: (e: any) => void;
-    onFocus?: (e: any) => void;
-    onClick?: (e: any) => void;
+    onFocus?: () => void;
     isActive?: boolean;
     id?: string;
-    onReferenceInit?: (element: HTMLInputElement | HTMLTextAreaElement) => void;
-    rangeValidation?: {
-        min: number;
-        max: number;
-    };
-    noKeyDownChange?: boolean;
-    skipFocus?: boolean;
-    version?: '1.0' | '2.0';
-    textControl?: boolean;
-    noMaxCharCheck?: boolean;
-    tooltipText?: string;
-    autoGrow?: boolean;
-    minHeight?: string;
-    maxHeight?: string;
-    labelTextBold?: boolean;
-    truncateText?: boolean;
-    maxCharLimitPosition?: 'TOP' | 'BOTTOM';
 }
-export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement | null>>;
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;

package/dist/cjs/components/input/Input.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/info.svg.js"),n=require("react"),i=require("../button/Button.js"),s=require("./Input-helper.js"),l=require("../tooltips/Tooltip.js"),r=require("../TypographyStyle.js"),a=require("../../constants/Theme.js"),o=require("../../assets/icons/errorInfo.svg.js"),c=require("./context/InputStyleProvider.js"),u=require("./Input.styled.js");const d=n.forwardRef(((d,h)=>{var v,x,p,g,j,f,m;const{placeholder:y,leftIcon:b,rightIcon:C,labelText:O,maxCharLimit:T,isRequired:I,hintText:S,type:w,state:E,validate:k,variant:q,button:H,suffixText:L,prefixText:M,onChangeText:B,value:F,noErrorHint:R,reset:P,rangeValidation:z,noKeyDownChange:A,version:D,noMaxCharCheck:N,labelElement:_,autoGrow:K,minHeight:G,maxHeight:W,labelTextBold:V,truncateText:$,maxCharLimitPosition:J}=Object.assign({maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP"},d),Q=null==b?void 0:b.icon,U=null==C?void 0:C.icon,[X,Y]=n.useState(!1),[Z,ee]=n.useState(!1),[te,ne]=n.useState(),ie="small"===q?"18px":"22px",se=n.useContext(c.InputStyleContext),[le,re]=n.useState(),ae=n.useRef(null),oe=null!=h?h:ae;n.useEffect((()=>{re(F),!F&&K&&(oe.current.style.height=G||"48px")}),[F]),n.useEffect((()=>{var e;oe.current&&(null===(e=d.onReferenceInit)||void 0===e||e.call(d,oe.current))}),[oe]),n.useEffect((()=>{const e=oe.current;if(e&&["phonenumber","zip","number"].includes(w))return e.addEventListener("wheel",he,{passive:!1}),()=>{e.removeEventListener("wheel",he)}}),[]),n.useEffect((()=>{P&&re("")}),[P]),n.useEffect((()=>{var e;ee(!!d.isActive),d.isActive&&(null===(e=oe.current)||void 0===e||e.focus())}),[d.isActive]),n.useEffect((()=>{ne(d.errorMessage)}),[d.errorMessage]),n.useEffect((()=>{var e;Y(!1),("invalid"===d.state||te||"disabled-invalid"===d.state)&&Y(!0),"active"===d.state&&(null===(e=oe.current)||void 0===e||e.focus())}),[d.state,te]),n.useEffect((()=>{Y(!!te||"invalid"===d.state)}),[te,d.state]);const ce=function(e){if(s.isFunction(e)){for(var t=arguments.length,n=new Array(t>1?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];e(...n)}},ue=()=>"zip"===w?6:2e3,de=e=>{const t=0!==T?T:ue();if(A||B(F||"",e),N)return;const n=e.target.value;![8].includes(e.which)&&t>0&&n.length>=t&&e.preventDefault()},he=e=>{e.preventDefault()},ve=e=>{let t=e.target.value;const n=0!==T?T+1:ue();!N&&n>0&&t.length>=n&&(t=t.substring(0,n-1)),B(t,e),d.textControl||re(t),K&&(oe.current.style.height=`${oe.current.scrollHeight}px`,t||(oe.current.style.height=G||"48px"));const i=k||s.validateInput;if(!i||!s.isFunction(i))return;const[l,r]=i(t,w,z);Y(!l),ne(d.errorMessage?d.errorMessage:r)},xe=e=>{var t;d.skipFocus||ee(!0),ce(null===(t=d.onFocus)||void 0===t?void 0:t.call(d,e))},pe=e=>{var t;d.skipFocus||ee(!1),ce(null===(t=d.onBlur)||void 0===t?void 0:t.call(d,e))},ge=()=>{var t;return e.jsxs(e.Fragment,{children:["multiline"!==w&&e.jsx("input",{className:$?"truncate-class":"","data-test":d["data-test"],id:d.id,style:null!==(t=null==se?void 0:se.input)&&void 0!==t?t:{},ref:oe,type:["phonenumber","zip","number"].includes(w)?"number":w,value:le,onFocus:e=>xe(e),onBlur:e=>pe(e),placeholder:y||"Enter here",onChange:ve,onClick:e=>ce(d.onClick),onKeyDown:e=>de(e)}),"multiline"===w&&e.jsx("textarea",{"data-test":d["data-test"],value:le,ref:oe,onFocus:e=>xe(e),onBlur:e=>pe(e),onClick:e=>ce(d.onClick),placeholder:y||"Enter here",onChange:ve,onKeyDown:e=>de(e),maxLength:T>0?T:void 0})]})};return e.jsxs(u.RootContainer,Object.assign({width:d.width,height:d.height,state:E,type:w,style:null!==(v=null==se?void 0:se.RootContainer)&&void 0!==v?v:{}},{children:[e.jsxs("div",Object.assign({className:"flex-align-center"},{children:[!R&&(!!S||!!te)&&e.jsxs(u.InputFooter,Object.assign({invalid:!!te},{children:[!!te&&e.jsx(o.default,{width:16,height:16}),te||S]})),T>0&&"BOTTOM"===J&&e.jsxs(u.MaxCharStyle,Object.assign({position:"BOTTOM"},{children:[null!==(p=null===(x=d.value)||void 0===x?void 0:x.length)&&void 0!==p?p:0,"/",T]}))]})),e.jsxs(u.InputWrapper,Object.assign({variant:q,state:E,width:d.width,isActive:"active"===E||Z,isInvalid:X,style:null!==(g=null==se?void 0:se.InputWrapper)&&void 0!==g?g:{},version:D,height:d.height},{children:[!!Q&&e.jsx(u.IconHolder,Object.assign({variant:q,iconSize:ie,onClick:()=>ce(null==b?void 0:b.callback),isLeft:!0,style:null!==(j=null==se?void 0:se.IconHolder)&&void 0!==j?j:{}},{children:e.jsx(Q,{})})),!!M&&e.jsx(u.PrefixHolder,Object.assign({variant:q},{children:M})),"default"===q&&e.jsx(u.InputContainer,Object.assign({height:d.height,type:d.type,minHeight:G,maxHeight:W,autoGrow:K},{children:ge()})),"small"===q&&e.jsx(u.InputContainerSmall,Object.assign({height:d.height,type:d.type},{children:ge()})),!!U&&e.jsx(u.IconHolder,Object.assign({variant:q,iconSize:ie,onClick:()=>ce(null==C?void 0:C.callback),isLeft:!1},{children:e.jsx(U,{})})),!!L&&e.jsx(u.SuffixHolder,Object.assign({variant:q},{children:L})),H&&H.text&&e.jsx(i.Button,{buttonText:H.text,onClick:()=>ce(null==H?void 0:H.onClick)})]})),(!!O||!!T)&&e.jsxs(u.InputHeader,Object.assign({invalid:X},{children:[_&&_,e.jsxs("div",Object.assign({className:"label__container"},{children:[V?e.jsxs(r.TitleSmall,{children:[O,I?e.jsx("span",{children:"*"}):""]}):e.jsxs(r.BodySecondary,{children:[O,I?e.jsx("span",{children:"*"}):""]}),d.tooltipText&&e.jsx(l.Tooltip,Object.assign({body:d.tooltipText,placement:"top"},{children:e.jsx("span",{children:e.jsx(t.default,{style:{marginTop:-3},width:18,height:18,color:X?a.COLORS.content.negative:a.COLORS.content.primary})})}))]})),T>0&&"TOP"===J&&e.jsxs(u.MaxCharStyle,{children:[null!==(m=null===(f=d.value)||void 0===f?void 0:f.length)&&void 0!==m?m:0,"/",T]})]}))]}))}));d.displayName="Input",exports.Input=d;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../button/Button.js"),i=require("../TypographyStyle.js"),r=require("../../assets/icons/errorInfo.svg.js"),l=require("./context/InputStyleProvider.js"),s=require("./Input.styled.js");const a=e=>e&&"function"==typeof e,o=t.forwardRef(((o,u)=>{var c,d,v,x;const{placeholder:h,leftIcon:j,rightIcon:p,labelText:f,maxCharLimit:g,isRequired:y,hintText:I,type:b,state:C,validate:m,variant:S,button:w,suffixText:O,prefixText:q,onChangeText:E,value:H,noErrorHint:T}=Object.assign({maxCharLimit:0,type:"text",variant:"default"},o),k=null==j?void 0:j.icon,B=null==p?void 0:p.icon,[F,A]=t.useState(!1),[L,M]=t.useState(!1),[R,D]=t.useState(),P="small"===S?"18px":"22px",z=t.useContext(l.InputStyleContext);t.useEffect((()=>{M(!!o.isActive)}),[o.isActive]),t.useEffect((()=>{D(o.errorMessage)}),[o.errorMessage]),t.useEffect((()=>{A(!1),("invalid"===o.state||R)&&A(!0)}),[o.state,R]),t.useEffect((()=>{A(!!R)}),[R]);const K=function(e){if(a(e)){for(var t=arguments.length,n=new Array(t>1?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];e(...n)}},W=e=>{E(H||"",e),![8].includes(e.which)&&g>0&&e.target.value.length===g&&e.preventDefault()},_=e=>{const t=e.target.value;if(E(t,e),!m||!a(m))return;const[n,i]=m(t);A(!n),D(i)},N=()=>{var t;return e.jsxs(e.Fragment,{children:["multiline"!==b&&e.jsx("input",{id:o.id,style:null!==(t=null==z?void 0:z.input)&&void 0!==t?t:{},ref:u,type:b,value:H,onFocus:()=>(M(!0),void K(o.onFocus)),onBlur:e=>(e=>{var t;M(!1),K(null===(t=o.onBlur)||void 0===t?void 0:t.call(o,e))})(e),placeholder:h||"Enter here",onChange:_,onKeyDown:e=>W(e)}),"multiline"===b&&e.jsx("textarea",{value:H,ref:u,onFocus:()=>M(!0),onBlur:()=>M(!1),placeholder:h||"Enter here",onChange:_,onKeyDown:e=>W(e)})]})};return e.jsxs(s.RootContainer,Object.assign({width:o.width,height:o.height,state:C,type:b,style:null!==(c=null==z?void 0:z.RootContainer)&&void 0!==c?c:{}},{children:[!T&&(!!I||!!R)&&e.jsxs(s.InputFooter,Object.assign({invalid:!!R},{children:[!!R&&e.jsx(r.default,{width:16,height:16}),R||I]})),e.jsxs(s.InputWrapper,Object.assign({variant:S,state:C,width:o.width,isActive:"active"===C||L,isInvalid:F,style:null!==(d=null==z?void 0:z.InputWrapper)&&void 0!==d?d:{}},{children:[!!k&&e.jsx(s.IconHolder,Object.assign({variant:S,iconSize:P,onClick:()=>K(null==j?void 0:j.callback),isLeft:!0,style:null!==(v=null==z?void 0:z.IconHolder)&&void 0!==v?v:{}},{children:e.jsx(k,{})})),!!q&&e.jsx(s.PrefixHolder,Object.assign({variant:S},{children:q})),"default"===S&&e.jsx(s.InputContainer,{children:N()}),"small"===S&&e.jsx(s.InputContainerSmall,{children:N()}),!!B&&e.jsx(s.IconHolder,Object.assign({variant:S,iconSize:P,onClick:()=>K(null==p?void 0:p.callback),isLeft:!1},{children:e.jsx(B,{})})),!!O&&e.jsx(s.SuffixHolder,Object.assign({variant:S},{children:O})),w&&w.text&&e.jsx(n.Button,{buttonText:w.text,onClick:()=>K(null==w?void 0:w.onClick)})]})),(!!f||!!g)&&"default"===S&&e.jsxs(s.InputHeader,Object.assign({invalid:F},{children:[e.jsxs(i.BodySecondary,{children:[f,y?e.jsx("span",{children:"*"}):""]}),g>0&&e.jsxs(s.MaxCharStyle,{children:[null===(x=o.value)||void 0===x?void 0:x.length,"/",g]})]}))]}))}));o.displayName="Input",exports.Input=o;

package/dist/cjs/components/input/Input.styled.d.ts

@@ -10,7 +10,6 @@ export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
     isInvalid?: boolean | undefined;
     state?: InputStateI | undefined;
     variant?: InputVariant | undefined;
-    version?: "1.0" | "2.0" | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const IconHolder: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
@@ -31,12 +30,6 @@ export declare const InputContainer: import("@emotion/styled").StyledComponent<{
     forwardedAs?: string | import("react").ComponentType<any> | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
-} & {
-    height?: string | undefined;
-    type?: InputTypeI | undefined;
-    autoGrow?: boolean | undefined;
-    minHeight?: string | undefined;
-    maxHeight?: string | undefined;
 }, {}, {}>;
 export declare const InputContainerSmall: import("@emotion/styled").StyledComponent<{
     [x: string]: any;
@@ -49,9 +42,6 @@ export declare const InputContainerSmall: import("@emotion/styled").StyledCompon
     forwardedAs?: string | import("react").ComponentType<any> | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
-} & {
-    height?: string | undefined;
-    type?: InputTypeI | undefined;
 }, {}, {}>;
 export declare const InputHeader: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
@@ -70,8 +60,6 @@ export declare const MaxCharStyle: import("@emotion/styled").StyledComponent<{
     forwardedAs?: string | import("react").ComponentType<any> | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
-} & {
-    position?: string | undefined;
 }, {}, {}>;
 export declare const InputFooter: import("@emotion/styled").StyledComponent<{
     [x: string]: any;