@bikdotai/bik-component-library 0.0.533-beta.2 → 0.0.533-beta.4

package/dist/cjs/components/dropdown/DropdownPopover/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),n=require("react"),o=require("react-popper"),t=require("../../dropShadow/DropShadow.js"),l=require("../Common.styled.js"),s=require("../OpenedDropdown/components/OpennedDropdown.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const a=i(n).default.forwardRef(((i,a)=>{var{children:d,onDropdownVisbilityChange:p,version:u="1.0"}=i,c=e.__rest(i,["children","onDropdownVisbilityChange","version"]);const v=a,[j,b]=n.useState(!1),[f,w]=n.useState(null),[D,O]=n.useState(null),{styles:y,attributes:g}=o.usePopper(f,D,{placement:c.placement,strategy:c.strategy});return n.useImperativeHandle(v,(()=>({openDropdown:j})),[]),n.useEffect((()=>{(null==v?void 0:v.current)&&(v.current.openDropdown=j)}),[j]),n.useEffect((()=>{null==p||p(j)}),[j]),r.jsxs(r.Fragment,{children:[r.jsxs("div",Object.assign({style:{position:"relative"},ref:w},{children:[r.jsx(l.OverLapAbs,{disabled:c.disabled,onClick:e=>{var r;null===(r=c.onDropdownOpen)||void 0===r||r.call(c),j?e.preventDefault():c.disabled||b(!0)}}),d]})),j&&r.jsx(l.OpenDropdownContainer,Object.assign({ref:O,style:Object.assign(Object.assign({},y.popper),{zIndex:3})},g.popper,{children:r.jsx(t.default,Object.assign({level:"z2",position:"down",style:{borderRadius:8}},{children:r.jsx(s.OpenedDropdown,Object.assign({},c,{onSelect:e=>{var r;"2.0"===u&&c.isMultiSelect||(null===(r=c.onSelect)||void 0===r||r.call(c,e),b(!1))},onClose:e=>{var r,n;"2.0"===u&&c.isMultiSelect&&e&&(null===(r=c.onSelect)||void 0===r||r.call(c,[...e])),b(!1),null===(n=null==c?void 0:c.onClose)||void 0===n||n.call(c)},version:u}))}))}))]})}));a.displayName="DropdownPopover",exports.DropdownPopover=a;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),n=require("react"),o=require("react-popper"),t=require("../../dropShadow/DropShadow.js"),l=require("../Common.styled.js"),s=require("../OpenedDropdown/components/OpennedDropdown.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const a=i(n).default.forwardRef(((i,a)=>{var{children:d,onDropdownVisbilityChange:p,version:u="1.0"}=i,c=e.__rest(i,["children","onDropdownVisbilityChange","version"]);const v=a,[f,j]=n.useState(!1),[b,w]=n.useState(null),[D,O]=n.useState(null),y=n.useRef(null),{styles:g,attributes:h}=o.usePopper(b,D,{placement:c.placement,strategy:c.strategy});return n.useImperativeHandle(v,(()=>({openDropdown:f})),[]),n.useEffect((()=>{(null==v?void 0:v.current)&&(v.current.openDropdown=f)}),[f]),n.useEffect((()=>{null==p||p(f)}),[f]),r.jsxs(r.Fragment,{children:[r.jsxs("div",Object.assign({style:{position:"relative"},ref:w},{children:[r.jsx(l.OverLapAbs,{ref:y,disabled:c.disabled,onClick:e=>{var r;null===(r=c.onDropdownOpen)||void 0===r||r.call(c),f?(j(!1),e.preventDefault()):c.disabled||j(!0)}}),d]})),f&&r.jsx(l.OpenDropdownContainer,Object.assign({ref:O,style:Object.assign(Object.assign({},g.popper),{zIndex:3})},h.popper,{children:r.jsx(t.default,Object.assign({level:"z2",position:"down",style:{borderRadius:8}},{children:r.jsx(s.OpenedDropdown,Object.assign({},c,{onSelect:e=>{var r;"2.0"===u&&c.isMultiSelect||(null===(r=c.onSelect)||void 0===r||r.call(c,e),j(!1))},onClose:e=>{var r,n;"2.0"===u&&c.isMultiSelect&&e&&(null===(r=c.onSelect)||void 0===r||r.call(c,[...e])),j(!1),null===(n=null==c?void 0:c.onClose)||void 0===n||n.call(c)},version:u,headerRef:y}))}))}))]})}));a.displayName="DropdownPopover",exports.DropdownPopover=a;

package/dist/cjs/components/dropdown/OpenedDropdown/components/OpennedDropdown.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../../zeroState/ZeroState.js"),s=require("../../../../hooks/useOutside.js"),n=require("../../hooks/useDropdown.js"),o=require("./description/Description.js"),i=require("./menu/FreeFormMenu.js"),l=require("./menu/MenuList.js"),u=require("./menu/SelectAllMenu.js"),c=require("./multiSelect/MultiSelectDropdownBottomBar.js"),a=require("./OpennedDropdown.styled.js"),p=require("./searchbox/SearchBox.js"),d=require("./searchbox/SearchZeroState.js");const h=304,S=290;exports.OpenedDropdown=j=>{let{options:f,isSearchable:x,isMultiSelect:g,width:v,allowFreeForm:w,height:b,onClose:y,onSelect:m,onSearch:O,version:q,skipSorting:M}=j;const{dropdownOptions:C,search:D,searchedString:L,searchedOptions:F,onApplyHandler:A,selectAllHandler:k,onMultiSelectClear:B,onFreeFormSelect:H,onMultiSelectApply:Z,latestDropdownOptionsRef:P,getSelectedOptions:R}=n.useDropdown(q,f,m,M,g,O),[_,z]=t.useState(null!=v?v:S),[E,I]=t.useState(null),K=t.useRef(null);s.useOutside(K,(()=>{if(I(null),g&&"2.0"===q){const e=R(P.current);null==y||y(e)}else null==y||y(C)}));const N=null!=b?b:h,T="number"==typeof N?x&&g?N-96:x&&!g||!x&&g?N-48:N:N;t.useEffect((()=>{const e=null!=v?v:S;if(null===E)z(e);else if("number"==typeof e)z(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));z(t)}}),[E]);const W=[],G=(L&&O?F:C).map((e=>{var t,r;if(L&&!O){if(e.options){const t=Object.assign({},e);return t.options=t.options.filter((e=>{var t;return!!(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(L.toLowerCase()))&&(W.push(!L||e.label===L),!0)})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(L.toLowerCase()))||(null===(r=e.searchKey)||void 0===r?void 0:r.toLowerCase().includes(L.toLowerCase()))?(W.push(!L||e.label===L),e):null}return e})).filter((e=>null!==e)),J=!!x&&L&&0===G.length;return e.jsxs(a.OpennedDropdownContainer,Object.assign({version:q,ref:K,style:{width:_}},{children:[e.jsxs("div",Object.assign({style:{width:E?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!x&&e.jsx(p.SearchBox,{onSearch:D,version:q}),G.length||L?e.jsxs(a.MenuListContainer,Object.assign({minHeight:N,maxHeight:T},{children:[!!g&&!J&&e.jsx(u.SelectAllMenu,{version:q,options:L&&O?F:C,onSelect:k}),!w&&J&&e.jsx(d.SearchZeroState,{height:T,searchedString:L}),w&&(J||!!W.length&&W.every((e=>!1===e)))&&e.jsx(i.FreeFormMenu,{version:q,isMultiSelect:g,onSelect:H,searchedString:L}),e.jsx(l.MenuList,{version:q,onSelect:A,showDescription:function(e,t){I(e&&t?{title:e,description:t}:null)},isMultiSelect:g,options:G})]})):e.jsx("div",Object.assign({style:{height:N,display:"flex"}},{children:e.jsx(r.ZeroState,{title:"No results found",subTitle:"Please try again later or contact us at support@bik.ai if you require further assistance."})})),!!g&&!(!G.length&&!L)&&"2.0"!==q&&e.jsx(c.default,{onClear:B,onApply:Z,list:L&&O?F:C})]})),!!E&&e.jsx(o.Description,{title:E.title,description:E.description,version:q})]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../../zeroState/ZeroState.js"),s=require("../../../../hooks/useOutside.js"),n=require("../../hooks/useDropdown.js"),o=require("./description/Description.js"),i=require("./menu/FreeFormMenu.js"),l=require("./menu/MenuList.js"),u=require("./menu/SelectAllMenu.js"),c=require("./multiSelect/MultiSelectDropdownBottomBar.js"),a=require("./OpennedDropdown.styled.js"),d=require("./searchbox/SearchBox.js"),p=require("./searchbox/SearchZeroState.js");const h=304,S=290;exports.OpenedDropdown=j=>{let{options:x,isSearchable:f,isMultiSelect:g,width:v,allowFreeForm:w,height:b,onClose:y,onSelect:m,onSearch:O,version:q,skipSorting:M,headerRef:C,hideSelectAll:D,primaryButtonText:L}=j;const{dropdownOptions:F,search:A,searchedString:k,searchedOptions:B,onApplyHandler:H,selectAllHandler:Z,onMultiSelectClear:R,onFreeFormSelect:T,onMultiSelectApply:P,latestDropdownOptionsRef:_,getSelectedOptions:z}=n.useDropdown(q,x,m,M,g,O),[E,I]=t.useState(null!=v?v:S),[K,N]=t.useState(null),W=t.useRef(null);s.useOutside(W,(()=>{if(N(null),g&&"2.0"===q){const e=z(_.current);null==y||y(e)}else null==y||y(F)}),[C]);const G=null!=b?b:h,J="number"==typeof G?f&&g?G-96:f&&!g||!f&&g?G-48:G:G;t.useEffect((()=>{const e=null!=v?v:S;if(null===K)I(e);else if("number"==typeof e)I(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));I(t)}}),[K]);const Q=[],U=(k&&O?B:F).map((e=>{var t,r;if(k&&!O){if(e.options){const t=Object.assign({},e);return t.options=t.options.filter((e=>{var t;return!!(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(k.toLowerCase()))&&(Q.push(!k||e.label===k),!0)})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(k.toLowerCase()))||(null===(r=e.searchKey)||void 0===r?void 0:r.toLowerCase().includes(k.toLowerCase()))?(Q.push(!k||e.label===k),e):null}return e})).filter((e=>null!==e)),V=!!f&&k&&0===U.length;return e.jsxs(a.OpennedDropdownContainer,Object.assign({version:q,ref:W,style:{width:E}},{children:[e.jsxs("div",Object.assign({style:{width:K?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!f&&e.jsx(d.SearchBox,{onSearch:A,version:q}),U.length||k?e.jsxs(a.MenuListContainer,Object.assign({minHeight:G,maxHeight:J},{children:[!!g&&!V&&!D&&e.jsx(u.SelectAllMenu,{version:q,options:k&&O?B:F,onSelect:Z}),!w&&V&&e.jsx(p.SearchZeroState,{height:J,searchedString:k}),w&&(V||!!Q.length&&Q.every((e=>!1===e)))&&e.jsx(i.FreeFormMenu,{version:q,isMultiSelect:g,onSelect:T,searchedString:k}),e.jsx(l.MenuList,{version:q,onSelect:H,showDescription:function(e,t){N(e&&t?{title:e,description:t}:null)},isMultiSelect:g,options:U})]})):e.jsx("div",Object.assign({style:{height:G,display:"flex"}},{children:e.jsx(r.ZeroState,{title:"No results found",subTitle:"Please try again later or contact us at support@bik.ai if you require further assistance."})})),!!g&&!(!U.length&&!k)&&"2.0"!==q&&e.jsx(c.default,{onClear:R,onApply:P,list:k&&O?B:F,buttonText:L})]})),!!K&&e.jsx(o.Description,{title:K.title,description:K.description,version:q})]}))};

package/dist/cjs/components/dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.d.ts

@@ -4,5 +4,6 @@ declare const MultiSelectDropdownBottomBar: React.FC<{
     onClear?: () => void;
     onApply: () => void;
     list: DropdownOption[];
+    buttonText?: string;
 }>;
 export default MultiSelectDropdownBottomBar;

package/dist/cjs/components/dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../../button/Button.js"),r=require("../../../../TypographyStyle.js"),s=require("../../../../../constants/Theme.js"),n=require("./MultiSelectDropdownBottomBar.styled.js");exports.default=o=>{let{onApply:l,onClear:i,list:a}=o;const c=a.reduce(((e,t)=>{if(t.options){return e+t.options.filter((e=>!0===e.selected)).length}return t.selected?e+1:e}),0);return e.jsxs(n.BottomBarContainer,Object.assign({style:{justifyContent:"space-between"}},{children:[e.jsx(r.BodySecondary,Object.assign({style:{flex:1,color:s.COLORS.content.primary}},{children:c?`${c} selected`:""})),e.jsxs("div",Object.assign({style:{flexDirection:"row",display:"flex",gap:12}},{children:[e.jsx(t.Button,{size:"small",buttonType:"tertiaryGray",buttonText:"Clear",onClick:i}),e.jsx(t.Button,{size:"small",buttonText:"Apply",onClick:()=>{l()}})]}))]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../../button/Button.js"),r=require("../../../../TypographyStyle.js"),s=require("../../../../../constants/Theme.js"),n=require("./MultiSelectDropdownBottomBar.styled.js");exports.default=o=>{let{onApply:l,onClear:i,list:u,buttonText:a}=o;const c=u.reduce(((e,t)=>{if(t.options){return e+t.options.filter((e=>!0===e.selected)).length}return t.selected?e+1:e}),0);return e.jsxs(n.BottomBarContainer,Object.assign({style:{justifyContent:"space-between"}},{children:[e.jsx(r.BodySecondary,Object.assign({style:{flex:1,color:s.COLORS.content.primary}},{children:c?`${c} selected`:""})),e.jsxs("div",Object.assign({style:{flexDirection:"row",display:"flex",gap:12}},{children:[e.jsx(t.Button,{size:"small",buttonType:"tertiaryGray",buttonText:"Clear",onClick:i}),e.jsx(t.Button,{size:"small",buttonText:null!=a?a:"Apply",onClick:()=>{l()}})]}))]}))};

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

@@ -16,6 +16,9 @@ export interface OpenDropdownProps {
     onSearch?: (key: string) => Promise<DropdownOption[]>;
     version?: '1.0' | '2.0';
     skipSorting?: boolean;
+    headerRef?: any;
+    hideSelectAll?: boolean;
+    primaryButtonText?: string;
 }
 export type GroupedOption = {
     label?: string;

package/dist/cjs/components/dynamic-tabs/DynamicTabs.d.ts

@@ -1,9 +1,11 @@
 /// <reference types="react" />
+import { TooltipProps } from '../tooltips/Tooltip';
 export interface DynamicTabsDetails {
     id: number;
     text: string;
     action: (tabName: string) => void;
     displayText?: string;
+    tooltipProps?: TooltipProps;
 }
 export interface DynamicTabsStyleDetails {
     type: 'SQUARE' | 'CAPSULE';

package/dist/cjs/components/dynamic-tabs/DynamicTabs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),o=require("react"),r=require("../../constants/Theme.js"),t=require("../TypographyStyle.js");exports.DynamicTabs=d=>{var s;const[i,l]=o.useState(0),{tabsInfo:n,tabStyleInfo:a}=d;return o.useEffect((()=>{void 0!==d.selectedTabId&&null!==d.selectedTabId&&l(d.selectedTabId)}),[d.selectedTabId]),e.jsx("div",Object.assign({style:null!==(s=d.wrapperStyle)&&void 0!==s?s:{}},{children:e.jsx("div",Object.assign({style:{display:"flex",alignItems:"center",borderColor:r.DEFAULT_THEME.colorsV2.stroke.primary,backgroundColor:"SMALL"===(null==a?void 0:a.size)?"unset":r.DEFAULT_THEME.colorsV2.surface.standard}},{children:n.map(((o,s)=>{var c,u,p,b,y,T,E,L;const v="CAPSULE"===a.type?null!==(u=null===(c=a.style)||void 0===c?void 0:c.borderTopLeftRadius)&&void 0!==u?u:20:0===s&&"SQUARE"===a.type?(null===(p=a.style)||void 0===p?void 0:p.borderTopLeftRadius)?a.style.borderTopLeftRadius:4:0,x="CAPSULE"===a.type?null!==(y=null===(b=a.style)||void 0===b?void 0:b.borderTopLeftRadius)&&void 0!==y?y:20:s===n.length-1&&"SQUARE"===a.type?(null===(T=a.style)||void 0===T?void 0:T.borderTopLeftRadius)?a.style.borderTopLeftRadius:4:0,f=o.id===i?r.DEFAULT_THEME.colorsV2.content.brand:r.DEFAULT_THEME.colorsV2.stroke.primary;return e.jsx("div",Object.assign({onClick:()=>{(e=>{l(e.id),e.action(e.text)})(o)},style:{cursor:"pointer",display:"flex",flex:1,width:null!==(E=d.tabWidth)&&void 0!==E?E:"110px",borderTop:`1px solid ${f}`,borderBottom:`1px solid ${f}`,borderLeft:`1px solid ${f}`,borderRight:`${s===n.length-1&&"SQUARE"===a.type||"CAPSULE"===a.type||o.id===i?1:0}px solid ${f}`,backgroundColor:o.id===i?r.DEFAULT_THEME.colorsV2.background.brandLight:r.DEFAULT_THEME.colorsV2.surface.standard,borderTopLeftRadius:v,borderBottomLeftRadius:v,borderTopRightRadius:x,borderBottomRightRadius:x,padding:"SMALL"===(null==a?void 0:a.size)?"2px 14px":"8px 24px",marginRight:null===(L=a.style)||void 0===L?void 0:L.marginRight,justifyContent:"space-around"}},{children:e.jsx(t.BodySecondary,Object.assign({style:{color:o.id===i?r.DEFAULT_THEME.colorsV2.content.brand:r.DEFAULT_THEME.colorsV2.content.secondary}},{children:o.text}))}),o.id)}))}))}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),o=require("react"),t=require("../../constants/Theme.js"),r=require("../tooltips/Tooltip.js"),d=require("../TypographyStyle.js");exports.DynamicTabs=s=>{var i;const[l,n]=o.useState(0),{tabsInfo:a,tabStyleInfo:c}=s;return o.useEffect((()=>{void 0!==s.selectedTabId&&null!==s.selectedTabId&&n(s.selectedTabId)}),[s.selectedTabId]),e.jsx("div",Object.assign({style:null!==(i=s.wrapperStyle)&&void 0!==i?i:{}},{children:e.jsx("div",Object.assign({style:{display:"flex",alignItems:"center",borderColor:t.DEFAULT_THEME.colorsV2.stroke.primary,backgroundColor:"SMALL"===(null==c?void 0:c.size)?"unset":t.DEFAULT_THEME.colorsV2.surface.standard}},{children:a.map(((o,i)=>{var u,p,b,T,y,E,v,L,x;const g="CAPSULE"===c.type?null!==(p=null===(u=c.style)||void 0===u?void 0:u.borderTopLeftRadius)&&void 0!==p?p:20:0===i&&"SQUARE"===c.type?(null===(b=c.style)||void 0===b?void 0:b.borderTopLeftRadius)?c.style.borderTopLeftRadius:4:0,f="CAPSULE"===c.type?null!==(y=null===(T=c.style)||void 0===T?void 0:T.borderTopLeftRadius)&&void 0!==y?y:20:i===a.length-1&&"SQUARE"===c.type?(null===(E=c.style)||void 0===E?void 0:E.borderTopLeftRadius)?c.style.borderTopLeftRadius:4:0,R=o.id===l?t.DEFAULT_THEME.colorsV2.content.brand:t.DEFAULT_THEME.colorsV2.stroke.primary;return e.jsx(r.Tooltip,Object.assign({},null!==(v=o.tooltipProps)&&void 0!==v?v:{},{children:e.jsx("div",Object.assign({onClick:()=>{(e=>{n(e.id),e.action(e.text)})(o)},style:{cursor:"pointer",display:"flex",flex:1,width:null!==(L=s.tabWidth)&&void 0!==L?L:"110px",borderTop:`1px solid ${R}`,borderBottom:`1px solid ${R}`,borderLeft:`1px solid ${R}`,borderRight:`${i===a.length-1&&"SQUARE"===c.type||"CAPSULE"===c.type||o.id===l?1:0}px solid ${R}`,backgroundColor:o.id===l?t.DEFAULT_THEME.colorsV2.background.brandLight:t.DEFAULT_THEME.colorsV2.surface.standard,borderTopLeftRadius:g,borderBottomLeftRadius:g,borderTopRightRadius:f,borderBottomRightRadius:f,padding:"SMALL"===(null==c?void 0:c.size)?"2px 14px":"8px 24px",marginRight:null===(x=c.style)||void 0===x?void 0:x.marginRight,justifyContent:"space-around"}},{children:e.jsx(d.BodySecondary,Object.assign({style:{color:o.id===l?t.DEFAULT_THEME.colorsV2.content.brand:t.DEFAULT_THEME.colorsV2.content.secondary}},{children:o.text}))}))}),o.id)}))}))}))};

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

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

@@ -10,6 +10,11 @@ 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

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

@@ -58,5 +58,7 @@ export interface InputProps {
     minHeight?: string;
     maxHeight?: string;
     labelTextBold?: boolean;
+    truncateText?: boolean;
+    maxCharLimitPosition?: 'TOP' | 'BOTTOM';
 }
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement | null>>;

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

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

@@ -70,6 +70,8 @@ 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;