@bikdotai/bik-component-library 0.0.679-1 → 0.0.679-10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/bik-layout/MockMenus.d.ts +1 -0
- package/dist/cjs/components/country-code-picker/CountryCodePicker.d.ts +4 -0
- package/dist/cjs/components/country-code-picker/CountryCodePicker.js +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/OpennedDropdown.js +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.d.ts +1 -0
- package/dist/cjs/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.js +1 -1
- package/dist/cjs/components/dropdown/hooks/useDropdown.d.ts +4 -1
- package/dist/cjs/components/dropdown/hooks/useDropdown.js +1 -1
- package/dist/cjs/components/dropdown/type.d.ts +1 -0
- package/dist/cjs/components/input/Input.d.ts +1 -0
- package/dist/cjs/components/input/Input.js +1 -1
- package/dist/cjs/components/zeroState/ZeroState.d.ts +1 -0
- package/dist/cjs/components/zeroState/ZeroState.js +1 -1
- package/dist/esm/components/bik-layout/MockMenus.d.ts +1 -0
- package/dist/esm/components/country-code-picker/CountryCodePicker.d.ts +4 -0
- package/dist/esm/components/country-code-picker/CountryCodePicker.js +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/OpennedDropdown.js +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.d.ts +1 -0
- package/dist/esm/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.js +1 -1
- package/dist/esm/components/dropdown/hooks/useDropdown.d.ts +4 -1
- package/dist/esm/components/dropdown/hooks/useDropdown.js +1 -1
- package/dist/esm/components/dropdown/type.d.ts +1 -0
- package/dist/esm/components/input/Input.d.ts +1 -0
- package/dist/esm/components/input/Input.js +1 -1
- package/dist/esm/components/zeroState/ZeroState.d.ts +1 -0
- package/dist/esm/components/zeroState/ZeroState.js +5 -5
- package/package.json +1 -1
|
@@ -12,4 +12,8 @@ export declare const CountryCodePicker: React.FC<{
|
|
|
12
12
|
disabled?: boolean;
|
|
13
13
|
hideFlagImage?: boolean;
|
|
14
14
|
containerStyles?: React.CSSProperties;
|
|
15
|
+
codeColor?: string;
|
|
16
|
+
dialColor?: string;
|
|
17
|
+
countryTextStyle?: React.CSSProperties;
|
|
18
|
+
onDropdownClick?: () => void;
|
|
15
19
|
}>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),o=require("../../assets/icons/chevronDown.svg.js"),r=require("react"),t=require("./CountryCodePicker.modal.js"),n=require("./CountryCodePicker.styled.js"),s=require("../dropdown/DropdownPopover/index.js");require("../dropdown/Dropdown.js"),require("../dropdown/ChipDropdown.js"),require("../zeroState/ZeroState.js");var d=require("../TypographyStyle.js"),i=require("../../constants/Theme.js");require("../dropdown/OpenedDropdown/components/description/Description.styled.js"),require("../checkBox/CheckBox.styled.js"),require("../list-item/ListItem.js"),require("../dropdown/OpenedDropdown/components/menu/FreeFormMenu.styled.js"),require("../dropdown/OpenedDropdown/components/menu/MenuItem.js"),require("../dropdown/OpenedDropdown/components/menu/MenuList.styled.js"),require("../button/Button.js"),require("../dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js"),require("../dropdown/OpenedDropdown/components/OpennedDropdown.styled.js"),require("../icon-button/IconButton.js"),require("../input/Input.js"),require("../dropdown/MenuItem/MenuItem.js");exports.CountryCodePicker=
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),o=require("../../assets/icons/chevronDown.svg.js"),r=require("react"),t=require("./CountryCodePicker.modal.js"),n=require("./CountryCodePicker.styled.js"),s=require("../dropdown/DropdownPopover/index.js");require("../dropdown/Dropdown.js"),require("../dropdown/ChipDropdown.js"),require("../zeroState/ZeroState.js");var d=require("../TypographyStyle.js"),i=require("../../constants/Theme.js");require("../dropdown/OpenedDropdown/components/description/Description.styled.js"),require("../checkBox/CheckBox.styled.js"),require("../list-item/ListItem.js"),require("../dropdown/OpenedDropdown/components/menu/FreeFormMenu.styled.js"),require("../dropdown/OpenedDropdown/components/menu/MenuItem.js"),require("../dropdown/OpenedDropdown/components/menu/MenuList.styled.js"),require("../button/Button.js"),require("../dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js"),require("../dropdown/OpenedDropdown/components/OpennedDropdown.styled.js"),require("../icon-button/IconButton.js"),require("../input/Input.js"),require("../dropdown/MenuItem/MenuItem.js");exports.CountryCodePicker=l=>{var c,a,u,p,y,m,j;const[v,h]=r.useState(null!==(c=l.selectedCountry)&&void 0!==c?c:{name:"India",dial:"+91",code:"IN"}),w=`https://flagcdn.com/${null===(a=v.code)||void 0===a?void 0:a.toLowerCase()}.svg`;r.useEffect((()=>{l.selectedCountry&&h(l.selectedCountry)}),[null===(u=l.selectedCountry)||void 0===u?void 0:u.code]);return e.jsx(s.DropdownPopover,Object.assign({version:l.version,isSearchable:!0,width:null!==(p=l.popoverWidth)&&void 0!==p?p:"200px",placement:null!==(y=l.placement)&&void 0!==y?y:"bottom-start",strategy:null!==(m=l.placementStrategy)&&void 0!==m?m:"absolute",options:t.CountriesData.map((o=>{var r,t,s,c;const a=`https://flagcdn.com/${null===(r=o.code)||void 0===r?void 0:r.toLowerCase()}.svg`;return{value:o.code,label:o.dial,searchKey:o.name,customComponent:e.jsxs(n.StyledCountryPickerOption,{children:[!l.hideFlagImage&&e.jsx("img",{src:a,className:"country-flag__option",alt:o.name}),e.jsxs(d.BodySecondary,Object.assign({style:null!==(t=l.countryTextStyle)&&void 0!==t?t:{}},{children:[e.jsx("span",Object.assign({style:{color:null!==(s=l.codeColor)&&void 0!==s?s:i.COLORS.text.primary}},{children:o.code}))," ",e.jsx("span",Object.assign({style:{color:null!==(c=l.dialColor)&&void 0!==c?c:i.COLORS.text.primary}},{children:o.dial}))]}))]}),selected:v.code===o.code}})),disabled:l.disabled,onSelect:e=>{const o=t.CountriesData.filter((o=>o.code===e.value));h(o[0]),l.onCountrySelect(o[0])}},{children:e.jsxs(n.StyledCountryPickerWrapper,Object.assign({height:l.height,style:l.containerStyles,onClick:()=>{var e;console.log("hello"),null===(e=l.onDropdownClick)||void 0===e||e.call(l)}},{children:[e.jsxs("div",Object.assign({className:"content__wrapper"},{children:[!l.hideFlagImage&&e.jsx("img",{src:w,className:"country-flag__selected-option",alt:v.name}),e.jsx(d.BodySecondary,Object.assign({style:null!==(j=l.countryTextStyle)&&void 0!==j?j:{}},{children:v.dial}))]})),e.jsx(o.default,{width:24,height:24,color:i.COLORS.content.primary})]}))}))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../../../zeroState/ZeroState.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../../../zeroState/ZeroState.js"),s=require("../../../../hooks/useOutside.js"),i=require("../../hooks/useDropdown.js"),r=require("./description/Description.js"),o=require("./menu/FreeFormMenu.js"),l=require("./menu/MenuList.js"),u=require("./menu/SelectAllMenu.js"),a=require("./multiSelect/MultiSelectDropdownBottomBar.js"),c=require("./OpennedDropdown.styled.js"),d=require("./searchbox/SearchBox.js"),p=require("./searchbox/SearchZeroState.js");const h=304,S=290;exports.OpenedDropdown=j=>{let{options:b,isSearchable:f,isMultiSelect:g,maxSelections:x,width:O,allowFreeForm:m,height:v,onClose:w,onSelect:y,onSearch:C,version:D,skipSorting:M,headerRef:q,hideSelectAll:L,primaryButtonText:F,onInfiniteScroll:k,onMultiSelectClear:A,onDropdownItemClick:B,buttonOptions:I,isSearchLoading:H,disableSearchOptions:R,disableSearchedOptionExcept:T,useDefaultCursor:Z,containerStyle:z={},zeroState:E}=j;const{dropdownOptions:P,search:W,searchedString:_,searchedOptions:K,onApplyHandler:N,selectAllHandler:G,onMultiSelectClear:J,onFreeFormSelect:Q,onMultiSelectApply:U,latestDropdownOptionsRef:V,getSelectedOptions:X,getCurrentSelectionCount:Y}=i.useDropdown(D,b,y,M,g,C,R,T,x),[$,ee]=t.useState(null!=O?O:S),[te,ne]=t.useState(null),se=t.useRef(null),ie=t.useRef([]);s.useOutside(se,(()=>{if(ne(null),g&&"2.0"===D){const e=X(V.current);null==w||w(e)}else null==w||w(P)}),[q,ie]);const re=null!=v?v:h,oe="number"==typeof re?f&&g?re-96:f&&!g||!f&&g?re-48:re:re;t.useEffect((()=>{const e=null!=O?O:S;if(null===te)ee(e);else if("number"==typeof e)ee(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));ee(t)}}),[te]);const le=[],ue=(e=>{if(!g||!x&&0!==x)return e;const t=Y(e)>=x;return t?e.map((e=>{if(e.options)return Object.assign(Object.assign({},e),{options:e.options.map((e=>Object.assign(Object.assign({},e),{disabled:e.disabled||!e.selected&&t})))});{const n=e;return Object.assign(Object.assign({},n),{disabled:n.disabled||!n.selected&&t})}})):e})((_&&C?K:P).map((e=>{var t,n;if(_&&!C){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(_.toLowerCase()))&&(le.push(!_||e.label===_),!0)})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(_.toLowerCase()))||(null===(n=e.searchKey)||void 0===n?void 0:n.toLowerCase().includes(_.toLowerCase()))?(le.push(!_||e.label===_),e):null}return e})).filter((e=>null!==e))),ae=!!f&&_&&0===ue.length;return e.jsxs(c.OpennedDropdownContainer,Object.assign({version:D,ref:se,style:Object.assign({width:$},z)},{children:[e.jsxs("div",Object.assign({style:{width:te?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!f&&e.jsx(d.SearchBox,{onSearch:W,version:D}),ue.length||_?e.jsxs(c.MenuListContainer,Object.assign({minHeight:re,maxHeight:oe},{children:[!!g&&!ae&&!L&&e.jsx(u.SelectAllMenu,{version:D,options:_&&C?K:P,onSelect:G}),!m&&ae&&e.jsx(p.SearchZeroState,{isLoading:H,height:oe,searchedString:_,containerWidth:O}),m&&(ae||!!le.length&&le.every((e=>!1===e)))&&e.jsx(o.FreeFormMenu,{version:D,isMultiSelect:g,onSelect:Q,searchedString:_}),e.jsx(l.MenuList,{onInfiniteScroll:k,onDropdownItemClick:B,version:D,onSelect:N,showDescription:function(e,t){ne(e&&t?{title:e,description:t}:null)},isMultiSelect:g,options:ue,useDefaultCursor:Z,ref:ie})]})):e.jsx("div",Object.assign({style:{height:re,display:"flex"}},{children:e.jsx(n.ZeroState,Object.assign({},E,{title:(null==E?void 0:E.title)||"No results found",subTitle:(null==E?void 0:E.subTitle)||"Please try again later or contact us at support@bik.ai if you require further assistance."}))})),!!g&&!(!ue.length&&!_)&&"2.0"!==D&&e.jsx(a.default,{onClear:()=>{J(),null==A||A()},onApply:U,list:_&&C?K:P,buttonText:F,buttonOptions:I})]})),!!te&&e.jsx(r.Description,{title:te.title,description:te.description,version:D})]}))};
|
|
@@ -1 +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:
|
|
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:i,height:s,isLoading:n,containerWidth:o}=r;return e.jsx("div",Object.assign({style:{height:s,display:"flex",alignItems:"center"}},{children:e.jsx(t.ZeroState,{isLoading:n,title:"No results found",subTitle:`Sorry we could not find any results for "${null!=i?i:""}"`,containerWidth:o})}))};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { SelectAllCheckboxState } from '../OpenedDropdown/components/menu/SelectAllMenu';
|
|
3
3
|
import { DropdownOption, SingleOption } from '../type';
|
|
4
|
-
export declare const useDropdown: (version: string | undefined, options: DropdownOption[], onSelect: ((option: DropdownOption | DropdownOption[]) => void) | undefined, skipSorting?: boolean, isMultiSelect?: boolean, onSearch?: ((searchKey: string) => Promise<DropdownOption[]>) | undefined, disableOtherSearchedOption?: boolean, disableSearchedOptionExcept?: string[]) => {
|
|
4
|
+
export declare const useDropdown: (version: string | undefined, options: DropdownOption[], onSelect: ((option: DropdownOption | DropdownOption[]) => void) | undefined, skipSorting?: boolean, isMultiSelect?: boolean, onSearch?: ((searchKey: string) => Promise<DropdownOption[]>) | undefined, disableOtherSearchedOption?: boolean, disableSearchedOptionExcept?: string[], maxSelections?: number) => {
|
|
5
5
|
latestDropdownOptionsRef: import("react").MutableRefObject<DropdownOption[]>;
|
|
6
6
|
dropdownOptions: DropdownOption[];
|
|
7
7
|
search: (searchKey: string) => void;
|
|
@@ -46,4 +46,7 @@ export declare const useDropdown: (version: string | undefined, options: Dropdow
|
|
|
46
46
|
onFreeFormSelect: (selected: boolean) => void;
|
|
47
47
|
onMultiSelectApply: (options?: DropdownOption[]) => void;
|
|
48
48
|
getSelectedOptions: (data: DropdownOption[]) => DropdownOption[];
|
|
49
|
+
getCurrentSelectionCount: (data: DropdownOption[]) => number;
|
|
50
|
+
isMaxSelectionsReached: (data: DropdownOption[]) => boolean;
|
|
51
|
+
maxSelections: number | undefined;
|
|
49
52
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../OpenedDropdown/utils/iterationOnOptions.js");exports.useDropdown=function(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"1.0",n=arguments.length>1?arguments[1]:void 0,l=arguments.length>2?arguments[2]:void 0,i=arguments.length>3?arguments[3]:void 0,c=arguments.length>4?arguments[4]:void 0,o=arguments.length>5?arguments[5]:void 0,a=arguments.length>6?arguments[6]:void 0,u=arguments.length>7&&void 0!==arguments[7]?arguments[7]:[];const[
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../OpenedDropdown/utils/iterationOnOptions.js");exports.useDropdown=function(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"1.0",n=arguments.length>1?arguments[1]:void 0,l=arguments.length>2?arguments[2]:void 0,i=arguments.length>3?arguments[3]:void 0,c=arguments.length>4?arguments[4]:void 0,o=arguments.length>5?arguments[5]:void 0,a=arguments.length>6?arguments[6]:void 0,u=arguments.length>7&&void 0!==arguments[7]?arguments[7]:[],r=arguments.length>8?arguments[8]:void 0;const[d,p]=e.useState(null!=n?n:[]),[v,f]=e.useState([]),[O,g]=e.useState(""),b=e.useRef(d);e.useEffect((()=>{if(b.current=d,v.length&&O&&o){let e=[...v];const t=d.map((e=>{if(e.options)return e.options.map((e=>({value:e.value,selected:e.selected})));const t=e;return{value:t.value,selected:t.selected}})).flat();e=e.map((e=>{const s=t.find((t=>e.value===t.value));return s?Object.assign(Object.assign({},e),{selected:s.selected}):e})),a&&(e=e.map((e=>Object.assign(Object.assign({},e),{disabled:!u.includes(e.value)})))),f(c&&!i?[...e.sort((e=>e.selected?-1:1))]:[...e])}}),[d]),e.useEffect((()=>{if(n){const e=[...n];p(c&&!i?[...e.sort((e=>e.selected?-1:1))]:[...e])}}),[n]);const h=e=>{const t=[];return e.forEach((e=>{if(e.options){const s=e.options.filter((e=>!0===e.selected));t.push(Object.assign(Object.assign({},e),{options:[...s]}))}else e.selected&&t.push(Object.assign({},e))})),t},j=e=>{let t=0;return e.forEach((e=>{e.options?t+=e.options.filter((e=>!0===e.selected)).length:e.selected&&t++})),t},m=e=>!(!c||!r&&0!==r)&&j(e)>=r;function S(e,n){if(c){if(e.selected&&r&&m(d))return;if(v.length&&O&&o)if(e.selected){if(r&&m(d))return;let l=!1;const i=t.iterateOnOptions(d,{selected:e.selected},(t=>t.value===e.value&&(l=!0,!0)));if(l||i.push(e),n)return[...i];p([...i]),"2.0"===s&&w(i)}else{let l=!1,i=t.iterateOnOptions(d,{selected:e.selected},(t=>t.value===e.value&&(l=!0,!0)));if(l&&(i=i.filter((t=>t.value!==e.value))),n)return[...i];p([...i]),"2.0"===s&&w(i)}else{const l=t.iterateOnOptions(d,{selected:e.selected},(t=>t.value===e.value));if(n)return[...l];p([...l]),"2.0"===s&&w(l)}}else null==l||l(e)}function w(e){const t=h(null!=e?e:b.current);null==l||l([...t])}return{latestDropdownOptionsRef:b,dropdownOptions:d,search:function(e){if(g(e),f([]),e&&o){const s=[];t.iterateOnOptionsRaw(d,(e=>{e.selected&&!s.includes(e.value)&&s.push(e.value)})),o(e).then((e=>{if(e){const t=e.map((e=>{if(e.options){const t=e;return Object.assign(Object.assign({},t),{options:t.options.map((e=>Object.assign(Object.assign({},e),{selected:s.includes(e.value)})))})}return Object.assign(Object.assign({},e),{selected:s.includes(e.value)})}));f([...t])}}))}},searchedString:O,searchedOptions:v,onApplyHandler:S,selectAllHandler:function(e){if(v.length&&O&&o)!function(e){let t=[...d];e?v.forEach((e=>{let s=!1;t=t.map((t=>{const n=e;return void 0!==n.value&&n.value===t.value?(s=!0,Object.assign(Object.assign({},t),{selected:!0})):t})),s||t.push(Object.assign(Object.assign({},e),{selected:!0}))})):v.forEach((e=>{t=t.map((t=>{const s=e;return void 0!==s.value&&s.value===t.value?Object.assign(Object.assign({},t),{selected:!1}):t}))})),p([...t]),"2.0"===s&&w(t)}("selectAll"===e);else if("selectAll"===e){const e=t.iterateOnOptions(d,{selected:!0},(e=>{var t;return O?(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(O.toLowerCase()))&&!e.disabled:!e.disabled}));p([...e]),"2.0"===s&&w(e)}else if("notSelected"===e){const e=t.iterateOnOptions(d,{selected:!1},(e=>!e.disabled));p([...e]),"2.0"===s&&w(e)}},onMultiSelectClear:function(){const e=t.iterateOnOptions(d,{selected:!1});p([...e]),"2.0"===s&&w(e)},onFreeFormSelect:function(e){if(!c)return void S({label:O,value:O,isFreeForm:!0,selected:!0});const t=d.map((t=>t.options?t:Object.assign(Object.assign({},t),{selected:t.label===O&&t.value===O?e:t.selected})));e&&(t.some((e=>e.label===O&&e.value===O))||t.unshift({label:O,value:O,isFreeForm:!0,selected:!0})),p([...t]),"2.0"===s&&w(t)},onMultiSelectApply:w,getSelectedOptions:h,getCurrentSelectionCount:j,isMaxSelectionsReached:m,maxSelections:r}};
|
|
@@ -67,5 +67,6 @@ export interface InputProps {
|
|
|
67
67
|
hideInputHeader?: boolean;
|
|
68
68
|
hideBorder?: boolean;
|
|
69
69
|
inputWrapperStyles?: React.CSSProperties;
|
|
70
|
+
minCharLimit?: number;
|
|
70
71
|
}
|
|
71
72
|
export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement | null>>;
|
|
@@ -1 +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"),
|
|
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"),l=require("./Input-helper.js"),s=require("../tooltips/Tooltip.js"),r=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,f,m,b;const{placeholder:y,leftIcon:C,rightIcon:O,labelText:I,maxCharLimit:T,isRequired:S,hintText:w,type:E,state:k,validate:H,variant:L,button:q,suffixText:B,prefixText:M,onChangeText:F,value:P,noErrorHint:R,reset:D,rangeValidation:z,noKeyDownChange:A,version:K,noMaxCharCheck:N,labelElement:_,autoGrow:W,minHeight:G,maxHeight:V,labelTextBold:$,truncateText:J,maxCharLimitPosition:Q,hightlightInputColor:U,onKeyDownEvent:X,hideInputHeader:Y,hideBorder:Z,inputWrapperStyles:ee,minCharLimit:te}=Object.assign({maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP",minCharLimit:0},d),ne=null==C?void 0:C.icon,ie=null==O?void 0:O.icon,[le,se]=n.useState(!1),[re,ae]=n.useState(!1),[oe,ue]=n.useState(),ce="x-small"===L?"12px":"small"===L?"18px":"22px",de=n.useContext(u.InputStyleContext),[he,ve]=n.useState(),pe=n.useRef(null),xe=null!=h?h:pe;n.useEffect((()=>{ve(P),!P&&W&&(xe.current.style.height=G||"48px")}),[P]),n.useEffect((()=>{var e;xe.current&&(null===(e=d.onReferenceInit)||void 0===e||e.call(d,xe.current))}),[xe]),n.useEffect((()=>{const e=xe.current;if(e&&["phonenumber","zip","number"].includes(E))return e.addEventListener("wheel",me,{passive:!1}),()=>{e.removeEventListener("wheel",me)}}),[]),n.useEffect((()=>{D&&ve("")}),[D]),n.useEffect((()=>{var e;ae(!!d.isActive),d.isActive&&(null===(e=xe.current)||void 0===e||e.focus())}),[d.isActive]),n.useEffect((()=>{ue(d.errorMessage)}),[d.errorMessage]),n.useEffect((()=>{var e;se(!1),("invalid"===d.state||oe||"disabled-invalid"===d.state)&&se(!0),"active"===d.state&&(null===(e=xe.current)||void 0===e||e.focus())}),[d.state,oe]),n.useEffect((()=>{se(!!oe||"invalid"===d.state)}),[oe,d.state]);const ge=function(e){if(l.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)}},je=()=>"zip"===E?6:2e3,fe=e=>{const t=0!==T?T:je(),n=te,i=e.target.value;X&&(!i.length||i.length>=n)&&X(e),A||i.length&&!(i.length>=n)||F(P||"",e),N||![8].includes(e.which)&&t>0&&i.length>=t&&e.preventDefault()},me=e=>{e.preventDefault()},be=e=>{let t=e.target.value;const n=0!==T?T+1:je(),i=te;if(!N&&n>0&&t.length>=n&&(t=t.substring(0,n-1)),d.textControl||ve(t),i&&t&&t.length<i)return;F(t,e),W&&(xe.current.style.height=`${xe.current.scrollHeight}px`,t||(xe.current.style.height=G||"48px"));const s=H||l.validateInput;if(!s||!l.isFunction(s))return;const[r,a]=s(t,E,z);se(!r),ue(d.errorMessage?d.errorMessage:a)},ye=e=>{var t;d.skipFocus||ae(!0),ge(null===(t=d.onFocus)||void 0===t?void 0:t.call(d,e))},Ce=e=>{var t;d.skipFocus||ae(!1),ge(null===(t=d.onBlur)||void 0===t?void 0:t.call(d,e))},Oe=()=>{var t;return e.jsxs(e.Fragment,{children:["multiline"!==E&&e.jsx("input",{className:J?"truncate-class":"","data-test":d["data-test"],id:d.id,style:null!==(t=null==de?void 0:de.input)&&void 0!==t?t:{},ref:xe,type:["phonenumber","zip","number"].includes(E)?"number":E,value:he,onFocus:e=>ye(e),onBlur:e=>Ce(e),placeholder:y||"Enter here",onChange:be,onClick:e=>ge(d.onClick),onKeyDown:e=>fe(e)}),"multiline"===E&&e.jsx("textarea",{"data-test":d["data-test"],value:he,ref:xe,onFocus:e=>ye(e),onBlur:e=>Ce(e),onClick:e=>ge(d.onClick),placeholder:y||"Enter here",onChange:be,onKeyDown:e=>fe(e),maxLength:T>0?T:void 0})]})};return e.jsxs(c.RootContainer,Object.assign({width:d.width,height:d.height,state:k,type:E,style:null!==(v=null==de?void 0:de.RootContainer)&&void 0!==v?v:{}},{children:[e.jsxs("div",Object.assign({className:"flex-align-center"},{children:[!R&&(!!w||!!oe)&&e.jsxs(c.InputFooter,Object.assign({invalid:!!oe},{children:[!!oe&&e.jsx(o.default,{width:16,height:16}),oe||w]})),T>0&&"BOTTOM"===Q&&e.jsxs(c.MaxCharStyle,Object.assign({position:"BOTTOM"},{children:[null!==(x=null===(p=(null!=P?P:"").toString())||void 0===p?void 0:p.length)&&void 0!==x?x:0,"/",T]}))]})),e.jsxs(c.InputWrapper,Object.assign({variant:L,state:k,width:d.width,isActive:"active"===k||re,isInvalid:le,style:null!==(j=null!==(g=null==de?void 0:de.InputWrapper)&&void 0!==g?g:ee)&&void 0!==j?j:{},version:K,height:d.height,hightlightInputColor:U,hideBorder:Z},{children:[!!ne&&e.jsx(c.IconHolder,Object.assign({variant:L,iconSize:ce,onClick:()=>ge(null==C?void 0:C.callback),isLeft:!0,style:null!==(f=null==de?void 0:de.IconHolder)&&void 0!==f?f:{}},{children:e.jsx(ne,{})})),!!M&&e.jsx(c.PrefixHolder,Object.assign({variant:L},{children:M})),"default"===L&&e.jsx(c.InputContainer,Object.assign({height:d.height,type:d.type,minHeight:G,maxHeight:V,autoGrow:W},{children:Oe()})),["x-small","small"].includes(L)&&e.jsx(c.InputContainerSmall,Object.assign({height:d.height,type:d.type},{children:Oe()})),!!ie&&e.jsx(c.IconHolder,Object.assign({variant:L,iconSize:ce,onClick:()=>ge(null==O?void 0:O.callback),isLeft:!1},{children:e.jsx(ie,{})})),!!B&&e.jsx(c.SuffixHolder,Object.assign({variant:L},{children:B})),q&&q.text&&e.jsx(i.Button,{buttonText:q.text,onClick:()=>ge(null==q?void 0:q.onClick)}),q&&q.buttonProps&&e.jsx(i.Button,Object.assign({},q.buttonProps))]})),!Y&&(!!I||!!T)&&e.jsxs(c.InputHeader,Object.assign({invalid:le},{children:[_&&_,e.jsxs("div",Object.assign({className:"label__container"},{children:[$?e.jsxs(r.TitleSmall,{children:[I,S?e.jsx("span",{children:"*"}):""]}):e.jsxs(r.BodySecondary,{children:[I,S?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:le?a.COLORS.content.negative:a.COLORS.content.primary})})}))]})),T>0&&"TOP"===Q&&e.jsxs(c.MaxCharStyle,{children:[null!==(b=null===(m=(null!=P?P:"").toString())||void 0===m?void 0:m.length)&&void 0!==b?b:0,"/",T]})]}))]}))}));d.displayName="Input",exports.Input=d;
|
|
@@ -14,4 +14,4 @@
|
|
|
14
14
|
align-items: center;
|
|
15
15
|
justify-content: center;
|
|
16
16
|
border-radius: 24px;
|
|
17
|
-
`;exports.ZeroState=n=>{var{subTitle:a,title:c,IconHolderStyle:j,style:g,isLoading:y}=n,x=e.__rest(n,["subTitle","title","IconHolderStyle","style","isLoading"]);return t.jsxs(d,Object.assign({style:null!=g?g:{}},{children:[y?t.jsx(i.Spinner,{size:"large",color:s.COLORS.stroke.brand}):t.jsx(u,Object.assign({style:null!=j?j:{}},{children:(null==x?void 0:x.Icon)||t.jsx(l.default,{color:s.COLORS.content.placeholder,height:24,width:24})})),t.jsx(
|
|
17
|
+
`;exports.ZeroState=n=>{var{subTitle:a,title:c,IconHolderStyle:j,style:g,isLoading:y,containerWidth:p}=n,x=e.__rest(n,["subTitle","title","IconHolderStyle","style","isLoading","containerWidth"]);let b=r.TitleRegular;const h=p?parseFloat(p):0;return h&&!isNaN(h)&&h<=150&&(b=r.TitleSmall),t.jsxs(d,Object.assign({style:null!=g?g:{}},{children:[y?t.jsx(i.Spinner,{size:"large",color:s.COLORS.stroke.brand}):t.jsx(u,Object.assign({style:null!=j?j:{}},{children:(null==x?void 0:x.Icon)||t.jsx(l.default,{color:s.COLORS.content.placeholder,height:24,width:24})})),t.jsx(b,Object.assign({style:{marginTop:8,color:s.COLORS.content.primary}},{children:y?"Loading...":c||"No results found"})),!!a&&!y&&t.jsx(r.BodyCaption,Object.assign({style:{marginTop:4,color:s.COLORS.content.secondary,textAlign:"center",maxWidth:184}},{children:a})),!!(null==x?void 0:x.actionButton)&&t.jsx("div",Object.assign({style:(null==x?void 0:x.buttonWidth)?{width:null==x?void 0:x.buttonWidth,display:"flex"}:{}},{children:t.jsx(o.Button,Object.assign({},null==x?void 0:x.actionButton))}))]}))};
|
|
@@ -12,4 +12,8 @@ export declare const CountryCodePicker: React.FC<{
|
|
|
12
12
|
disabled?: boolean;
|
|
13
13
|
hideFlagImage?: boolean;
|
|
14
14
|
containerStyles?: React.CSSProperties;
|
|
15
|
+
codeColor?: string;
|
|
16
|
+
dialColor?: string;
|
|
17
|
+
countryTextStyle?: React.CSSProperties;
|
|
18
|
+
onDropdownClick?: () => void;
|
|
15
19
|
}>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as o,jsxs as e}from"react/jsx-runtime";import t from"../../assets/icons/chevronDown.svg.js";import{useState as n,useEffect as r}from"react";import{CountriesData as d}from"./CountryCodePicker.modal.js";import{StyledCountryPickerWrapper as s,StyledCountryPickerOption as i}from"./CountryCodePicker.styled.js";import{DropdownPopover as
|
|
1
|
+
import{jsx as o,jsxs as e}from"react/jsx-runtime";import t from"../../assets/icons/chevronDown.svg.js";import{useState as n,useEffect as r}from"react";import{CountriesData as d}from"./CountryCodePicker.modal.js";import{StyledCountryPickerWrapper as s,StyledCountryPickerOption as i}from"./CountryCodePicker.styled.js";import{DropdownPopover as l}from"../dropdown/DropdownPopover/index.js";import"../dropdown/Dropdown.js";import"../dropdown/ChipDropdown.js";import"../zeroState/ZeroState.js";import{BodySecondary as c}from"../TypographyStyle.js";import{COLORS as p}from"../../constants/Theme.js";import"../dropdown/OpenedDropdown/components/description/Description.styled.js";import"../checkBox/CheckBox.styled.js";import"../list-item/ListItem.js";import"../dropdown/OpenedDropdown/components/menu/FreeFormMenu.styled.js";import"../dropdown/OpenedDropdown/components/menu/MenuItem.js";import"../dropdown/OpenedDropdown/components/menu/MenuList.styled.js";import"../button/Button.js";import"../dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js";import"../dropdown/OpenedDropdown/components/OpennedDropdown.styled.js";import"../icon-button/IconButton.js";import"../input/Input.js";import"../dropdown/MenuItem/MenuItem.js";const m=m=>{var a,u,y,h,j,v,w;const[g,C]=n(null!==(a=m.selectedCountry)&&void 0!==a?a:{name:"India",dial:"+91",code:"IN"}),b=`https://flagcdn.com/${null===(u=g.code)||void 0===u?void 0:u.toLowerCase()}.svg`;r((()=>{m.selectedCountry&&C(m.selectedCountry)}),[null===(y=m.selectedCountry)||void 0===y?void 0:y.code]);return o(l,Object.assign({version:m.version,isSearchable:!0,width:null!==(h=m.popoverWidth)&&void 0!==h?h:"200px",placement:null!==(j=m.placement)&&void 0!==j?j:"bottom-start",strategy:null!==(v=m.placementStrategy)&&void 0!==v?v:"absolute",options:d.map((t=>{var n,r,d,s;const l=`https://flagcdn.com/${null===(n=t.code)||void 0===n?void 0:n.toLowerCase()}.svg`;return{value:t.code,label:t.dial,searchKey:t.name,customComponent:e(i,{children:[!m.hideFlagImage&&o("img",{src:l,className:"country-flag__option",alt:t.name}),e(c,Object.assign({style:null!==(r=m.countryTextStyle)&&void 0!==r?r:{}},{children:[o("span",Object.assign({style:{color:null!==(d=m.codeColor)&&void 0!==d?d:p.text.primary}},{children:t.code}))," ",o("span",Object.assign({style:{color:null!==(s=m.dialColor)&&void 0!==s?s:p.text.primary}},{children:t.dial}))]}))]}),selected:g.code===t.code}})),disabled:m.disabled,onSelect:o=>{const e=d.filter((e=>e.code===o.value));C(e[0]),m.onCountrySelect(e[0])}},{children:e(s,Object.assign({height:m.height,style:m.containerStyles,onClick:()=>{var o;console.log("hello"),null===(o=m.onDropdownClick)||void 0===o||o.call(m)}},{children:[e("div",Object.assign({className:"content__wrapper"},{children:[!m.hideFlagImage&&o("img",{src:b,className:"country-flag__selected-option",alt:g.name}),o(c,Object.assign({style:null!==(w=m.countryTextStyle)&&void 0!==w?w:{}},{children:g.dial}))]})),o(t,{width:24,height:24,color:p.content.primary})]}))}))};export{m as CountryCodePicker};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as o,useRef as n,useEffect as i}from"react";import{ZeroState as
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as o,useRef as n,useEffect as i}from"react";import{ZeroState as r}from"../../../zeroState/ZeroState.js";import{useOutside as s}from"../../../../hooks/useOutside.js";import{useDropdown as l}from"../../hooks/useDropdown.js";import{Description as c}from"./description/Description.js";import{FreeFormMenu as a}from"./menu/FreeFormMenu.js";import{MenuList as u}from"./menu/MenuList.js";import{SelectAllMenu as p}from"./menu/SelectAllMenu.js";import d from"./multiSelect/MultiSelectDropdownBottomBar.js";import{OpennedDropdownContainer as h,MenuListContainer as m}from"./OpennedDropdown.styled.js";import{SearchBox as f}from"./searchbox/SearchBox.js";import{SearchZeroState as S}from"./searchbox/SearchZeroState.js";const b=304,g=290,j=j=>{let{options:O,isSearchable:v,isMultiSelect:w,maxSelections:y,width:C,allowFreeForm:x,height:D,onClose:M,onSelect:L,onSearch:k,version:A,skipSorting:F,headerRef:I,hideSelectAll:B,primaryButtonText:H,onInfiniteScroll:T,onMultiSelectClear:z,onDropdownItemClick:R,buttonOptions:W,isSearchLoading:Z,disableSearchOptions:q,disableSearchedOptionExcept:E,useDefaultCursor:K,containerStyle:N={},zeroState:P}=j;const{dropdownOptions:G,search:J,searchedString:Q,searchedOptions:U,onApplyHandler:V,selectAllHandler:X,onMultiSelectClear:Y,onFreeFormSelect:$,onMultiSelectApply:_,latestDropdownOptionsRef:ee,getSelectedOptions:te,getCurrentSelectionCount:oe}=l(A,O,L,F,w,k,q,E,y),[ne,ie]=o(null!=C?C:g),[re,se]=o(null),le=n(null),ce=n([]);s(le,(()=>{if(se(null),w&&"2.0"===A){const e=te(ee.current);null==M||M(e)}else null==M||M(G)}),[I,ce]);const ae=null!=D?D:b,ue="number"==typeof ae?v&&w?ae-96:v&&!w||!v&&w?ae-48:ae:ae;i((()=>{const e=null!=C?C:g;if(null===re)ie(e);else if("number"==typeof e)ie(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));ie(t)}}),[re]);const pe=[],de=(e=>{if(!w||!y&&0!==y)return e;const t=oe(e)>=y;return t?e.map((e=>{if(e.options)return Object.assign(Object.assign({},e),{options:e.options.map((e=>Object.assign(Object.assign({},e),{disabled:e.disabled||!e.selected&&t})))});{const o=e;return Object.assign(Object.assign({},o),{disabled:o.disabled||!o.selected&&t})}})):e})((Q&&k?U:G).map((e=>{var t,o;if(Q&&!k){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(Q.toLowerCase()))&&(pe.push(!Q||e.label===Q),!0)})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(Q.toLowerCase()))||(null===(o=e.searchKey)||void 0===o?void 0:o.toLowerCase().includes(Q.toLowerCase()))?(pe.push(!Q||e.label===Q),e):null}return e})).filter((e=>null!==e))),he=!!v&&Q&&0===de.length;return e(h,Object.assign({version:A,ref:le,style:Object.assign({width:ne},N)},{children:[e("div",Object.assign({style:{width:re?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!v&&t(f,{onSearch:J,version:A}),de.length||Q?e(m,Object.assign({minHeight:ae,maxHeight:ue},{children:[!!w&&!he&&!B&&t(p,{version:A,options:Q&&k?U:G,onSelect:X}),!x&&he&&t(S,{isLoading:Z,height:ue,searchedString:Q,containerWidth:C}),x&&(he||!!pe.length&&pe.every((e=>!1===e)))&&t(a,{version:A,isMultiSelect:w,onSelect:$,searchedString:Q}),t(u,{onInfiniteScroll:T,onDropdownItemClick:R,version:A,onSelect:V,showDescription:function(e,t){se(e&&t?{title:e,description:t}:null)},isMultiSelect:w,options:de,useDefaultCursor:K,ref:ce})]})):t("div",Object.assign({style:{height:ae,display:"flex"}},{children:t(r,Object.assign({},P,{title:(null==P?void 0:P.title)||"No results found",subTitle:(null==P?void 0:P.subTitle)||"Please try again later or contact us at support@bik.ai if you require further assistance."}))})),!!w&&!(!de.length&&!Q)&&"2.0"!==A&&t(d,{onClear:()=>{Y(),null==z||z()},onApply:_,list:Q&&k?U:G,buttonText:H,buttonOptions:W})]})),!!re&&t(c,{title:re.title,description:re.description,version:A})]}))};export{j as OpenedDropdown};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as t}from"react/jsx-runtime";import{ZeroState as e}from"../../../../zeroState/ZeroState.js";const i=i=>{let{searchedString:r,height:n,isLoading:o,containerWidth:s}=i;return t("div",Object.assign({style:{height:n,display:"flex",alignItems:"center"}},{children:t(e,{isLoading:o,title:"No results found",subTitle:`Sorry we could not find any results for "${null!=r?r:""}"`,containerWidth:s})}))};export{i as SearchZeroState};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { SelectAllCheckboxState } from '../OpenedDropdown/components/menu/SelectAllMenu';
|
|
3
3
|
import { DropdownOption, SingleOption } from '../type';
|
|
4
|
-
export declare const useDropdown: (version: string | undefined, options: DropdownOption[], onSelect: ((option: DropdownOption | DropdownOption[]) => void) | undefined, skipSorting?: boolean, isMultiSelect?: boolean, onSearch?: ((searchKey: string) => Promise<DropdownOption[]>) | undefined, disableOtherSearchedOption?: boolean, disableSearchedOptionExcept?: string[]) => {
|
|
4
|
+
export declare const useDropdown: (version: string | undefined, options: DropdownOption[], onSelect: ((option: DropdownOption | DropdownOption[]) => void) | undefined, skipSorting?: boolean, isMultiSelect?: boolean, onSearch?: ((searchKey: string) => Promise<DropdownOption[]>) | undefined, disableOtherSearchedOption?: boolean, disableSearchedOptionExcept?: string[], maxSelections?: number) => {
|
|
5
5
|
latestDropdownOptionsRef: import("react").MutableRefObject<DropdownOption[]>;
|
|
6
6
|
dropdownOptions: DropdownOption[];
|
|
7
7
|
search: (searchKey: string) => void;
|
|
@@ -46,4 +46,7 @@ export declare const useDropdown: (version: string | undefined, options: Dropdow
|
|
|
46
46
|
onFreeFormSelect: (selected: boolean) => void;
|
|
47
47
|
onMultiSelectApply: (options?: DropdownOption[]) => void;
|
|
48
48
|
getSelectedOptions: (data: DropdownOption[]) => DropdownOption[];
|
|
49
|
+
getCurrentSelectionCount: (data: DropdownOption[]) => number;
|
|
50
|
+
isMaxSelectionsReached: (data: DropdownOption[]) => boolean;
|
|
51
|
+
maxSelections: number | undefined;
|
|
49
52
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{useState as e,useRef as t,useEffect as s}from"react";import{iterateOnOptionsRaw as l,iterateOnOptions as n}from"../OpenedDropdown/utils/iterationOnOptions.js";const c=function(){let c=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"1.0",i=arguments.length>1?arguments[1]:void 0,o=arguments.length>2?arguments[2]:void 0,a=arguments.length>3?arguments[3]:void 0,u=arguments.length>4?arguments[4]:void 0,
|
|
1
|
+
import{useState as e,useRef as t,useEffect as s}from"react";import{iterateOnOptionsRaw as l,iterateOnOptions as n}from"../OpenedDropdown/utils/iterationOnOptions.js";const c=function(){let c=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"1.0",i=arguments.length>1?arguments[1]:void 0,o=arguments.length>2?arguments[2]:void 0,a=arguments.length>3?arguments[3]:void 0,u=arguments.length>4?arguments[4]:void 0,r=arguments.length>5?arguments[5]:void 0,d=arguments.length>6?arguments[6]:void 0,v=arguments.length>7&&void 0!==arguments[7]?arguments[7]:[],p=arguments.length>8?arguments[8]:void 0;const[f,g]=e(null!=i?i:[]),[b,h]=e([]),[O,j]=e(""),m=t(f);s((()=>{if(m.current=f,b.length&&O&&r){let e=[...b];const t=f.map((e=>{if(e.options)return e.options.map((e=>({value:e.value,selected:e.selected})));const t=e;return{value:t.value,selected:t.selected}})).flat();e=e.map((e=>{const s=t.find((t=>e.value===t.value));return s?Object.assign(Object.assign({},e),{selected:s.selected}):e})),d&&(e=e.map((e=>Object.assign(Object.assign({},e),{disabled:!v.includes(e.value)})))),h(u&&!a?[...e.sort((e=>e.selected?-1:1))]:[...e])}}),[f]),s((()=>{if(i){const e=[...i];g(u&&!a?[...e.sort((e=>e.selected?-1:1))]:[...e])}}),[i]);const S=e=>{const t=[];return e.forEach((e=>{if(e.options){const s=e.options.filter((e=>!0===e.selected));t.push(Object.assign(Object.assign({},e),{options:[...s]}))}else e.selected&&t.push(Object.assign({},e))})),t},F=e=>{let t=0;return e.forEach((e=>{e.options?t+=e.options.filter((e=>!0===e.selected)).length:e.selected&&t++})),t},w=e=>!(!u||!p&&0!==p)&&F(e)>=p;function A(e,t){if(u){if(e.selected&&p&&w(f))return;if(b.length&&O&&r)if(e.selected){if(p&&w(f))return;let s=!1;const l=n(f,{selected:e.selected},(t=>t.value===e.value&&(s=!0,!0)));if(s||l.push(e),t)return[...l];g([...l]),"2.0"===c&&C(l)}else{let s=!1,l=n(f,{selected:e.selected},(t=>t.value===e.value&&(s=!0,!0)));if(s&&(l=l.filter((t=>t.value!==e.value))),t)return[...l];g([...l]),"2.0"===c&&C(l)}else{const s=n(f,{selected:e.selected},(t=>t.value===e.value));if(t)return[...s];g([...s]),"2.0"===c&&C(s)}}else null==o||o(e)}function C(e){const t=S(null!=e?e:m.current);null==o||o([...t])}return{latestDropdownOptionsRef:m,dropdownOptions:f,search:function(e){if(j(e),h([]),e&&r){const t=[];l(f,(e=>{e.selected&&!t.includes(e.value)&&t.push(e.value)})),r(e).then((e=>{if(e){const s=e.map((e=>{if(e.options){const s=e;return Object.assign(Object.assign({},s),{options:s.options.map((e=>Object.assign(Object.assign({},e),{selected:t.includes(e.value)})))})}return Object.assign(Object.assign({},e),{selected:t.includes(e.value)})}));h([...s])}}))}},searchedString:O,searchedOptions:b,onApplyHandler:A,selectAllHandler:function(e){if(b.length&&O&&r)!function(e){let t=[...f];e?b.forEach((e=>{let s=!1;t=t.map((t=>{const l=e;return void 0!==l.value&&l.value===t.value?(s=!0,Object.assign(Object.assign({},t),{selected:!0})):t})),s||t.push(Object.assign(Object.assign({},e),{selected:!0}))})):b.forEach((e=>{t=t.map((t=>{const s=e;return void 0!==s.value&&s.value===t.value?Object.assign(Object.assign({},t),{selected:!1}):t}))})),g([...t]),"2.0"===c&&C(t)}("selectAll"===e);else if("selectAll"===e){const e=n(f,{selected:!0},(e=>{var t;return O?(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(O.toLowerCase()))&&!e.disabled:!e.disabled}));g([...e]),"2.0"===c&&C(e)}else if("notSelected"===e){const e=n(f,{selected:!1},(e=>!e.disabled));g([...e]),"2.0"===c&&C(e)}},onMultiSelectClear:function(){const e=n(f,{selected:!1});g([...e]),"2.0"===c&&C(e)},onFreeFormSelect:function(e){if(!u)return void A({label:O,value:O,isFreeForm:!0,selected:!0});const t=f.map((t=>t.options?t:Object.assign(Object.assign({},t),{selected:t.label===O&&t.value===O?e:t.selected})));e&&(t.some((e=>e.label===O&&e.value===O))||t.unshift({label:O,value:O,isFreeForm:!0,selected:!0})),g([...t]),"2.0"===c&&C(t)},onMultiSelectApply:C,getSelectedOptions:S,getCurrentSelectionCount:F,isMaxSelectionsReached:w,maxSelections:p}};export{c as useDropdown};
|
|
@@ -67,5 +67,6 @@ export interface InputProps {
|
|
|
67
67
|
hideInputHeader?: boolean;
|
|
68
68
|
hideBorder?: boolean;
|
|
69
69
|
inputWrapperStyles?: React.CSSProperties;
|
|
70
|
+
minCharLimit?: number;
|
|
70
71
|
}
|
|
71
72
|
export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement | null>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t,Fragment as i}from"react/jsx-runtime";import n from"../../assets/icons/info.svg.js";import{forwardRef as l,useState as r,useContext as o,useRef as a,useEffect as s}from"react";import{Button as c}from"../button/Button.js";import{isFunction as h,validateInput as u}from"./Input-helper.js";import{Tooltip as d}from"../tooltips/Tooltip.js";import{TitleSmall as v,BodySecondary as p}from"../TypographyStyle.js";import{COLORS as g}from"../../constants/Theme.js";import m from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as x}from"./context/InputStyleProvider.js";import{RootContainer as b,InputFooter as f,MaxCharStyle as y,InputWrapper as j,IconHolder as C,PrefixHolder as O,InputContainer as T,InputContainerSmall as w,SuffixHolder as I,InputHeader as k}from"./Input.styled.js";const
|
|
1
|
+
import{jsxs as e,jsx as t,Fragment as i}from"react/jsx-runtime";import n from"../../assets/icons/info.svg.js";import{forwardRef as l,useState as r,useContext as o,useRef as a,useEffect as s}from"react";import{Button as c}from"../button/Button.js";import{isFunction as h,validateInput as u}from"./Input-helper.js";import{Tooltip as d}from"../tooltips/Tooltip.js";import{TitleSmall as v,BodySecondary as p}from"../TypographyStyle.js";import{COLORS as g}from"../../constants/Theme.js";import m from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as x}from"./context/InputStyleProvider.js";import{RootContainer as b,InputFooter as f,MaxCharStyle as y,InputWrapper as j,IconHolder as C,PrefixHolder as O,InputContainer as T,InputContainerSmall as w,SuffixHolder as I,InputHeader as k}from"./Input.styled.js";const L=l(((l,L)=>{var B,H,E,M,P,S,D,z;const{placeholder:A,leftIcon:F,rightIcon:K,labelText:N,maxCharLimit:R,isRequired:G,hintText:W,type:_,state:q,validate:V,variant:$,button:J,suffixText:Q,prefixText:U,onChangeText:X,value:Y,noErrorHint:Z,reset:ee,rangeValidation:te,noKeyDownChange:ie,version:ne,noMaxCharCheck:le,labelElement:re,autoGrow:oe,minHeight:ae,maxHeight:se,labelTextBold:ce,truncateText:he,maxCharLimitPosition:ue,hightlightInputColor:de,onKeyDownEvent:ve,hideInputHeader:pe,hideBorder:ge,inputWrapperStyles:me,minCharLimit:xe}=Object.assign({maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP",minCharLimit:0},l),be=null==F?void 0:F.icon,fe=null==K?void 0:K.icon,[ye,je]=r(!1),[Ce,Oe]=r(!1),[Te,we]=r(),Ie="x-small"===$?"12px":"small"===$?"18px":"22px",ke=o(x),[Le,Be]=r(),He=a(null),Ee=null!=L?L:He;s((()=>{Be(Y),!Y&&oe&&(Ee.current.style.height=ae||"48px")}),[Y]),s((()=>{var e;Ee.current&&(null===(e=l.onReferenceInit)||void 0===e||e.call(l,Ee.current))}),[Ee]),s((()=>{const e=Ee.current;if(e&&["phonenumber","zip","number"].includes(_))return e.addEventListener("wheel",De,{passive:!1}),()=>{e.removeEventListener("wheel",De)}}),[]),s((()=>{ee&&Be("")}),[ee]),s((()=>{var e;Oe(!!l.isActive),l.isActive&&(null===(e=Ee.current)||void 0===e||e.focus())}),[l.isActive]),s((()=>{we(l.errorMessage)}),[l.errorMessage]),s((()=>{var e;je(!1),("invalid"===l.state||Te||"disabled-invalid"===l.state)&&je(!0),"active"===l.state&&(null===(e=Ee.current)||void 0===e||e.focus())}),[l.state,Te]),s((()=>{je(!!Te||"invalid"===l.state)}),[Te,l.state]);const Me=function(e){if(h(e)){for(var t=arguments.length,i=new Array(t>1?t-1:0),n=1;n<t;n++)i[n-1]=arguments[n];e(...i)}},Pe=()=>"zip"===_?6:2e3,Se=e=>{const t=0!==R?R:Pe(),i=xe,n=e.target.value;ve&&(!n.length||n.length>=i)&&ve(e),ie||n.length&&!(n.length>=i)||X(Y||"",e),le||![8].includes(e.which)&&t>0&&n.length>=t&&e.preventDefault()},De=e=>{e.preventDefault()},ze=e=>{let t=e.target.value;const i=0!==R?R+1:Pe(),n=xe;if(!le&&i>0&&t.length>=i&&(t=t.substring(0,i-1)),l.textControl||Be(t),n&&t&&t.length<n)return;X(t,e),oe&&(Ee.current.style.height=`${Ee.current.scrollHeight}px`,t||(Ee.current.style.height=ae||"48px"));const r=V||u;if(!r||!h(r))return;const[o,a]=r(t,_,te);je(!o),we(l.errorMessage?l.errorMessage:a)},Ae=e=>{var t;l.skipFocus||Oe(!0),Me(null===(t=l.onFocus)||void 0===t?void 0:t.call(l,e))},Fe=e=>{var t;l.skipFocus||Oe(!1),Me(null===(t=l.onBlur)||void 0===t?void 0:t.call(l,e))},Ke=()=>{var n;return e(i,{children:["multiline"!==_&&t("input",{className:he?"truncate-class":"","data-test":l["data-test"],id:l.id,style:null!==(n=null==ke?void 0:ke.input)&&void 0!==n?n:{},ref:Ee,type:["phonenumber","zip","number"].includes(_)?"number":_,value:Le,onFocus:e=>Ae(e),onBlur:e=>Fe(e),placeholder:A||"Enter here",onChange:ze,onClick:e=>Me(l.onClick),onKeyDown:e=>Se(e)}),"multiline"===_&&t("textarea",{"data-test":l["data-test"],value:Le,ref:Ee,onFocus:e=>Ae(e),onBlur:e=>Fe(e),onClick:e=>Me(l.onClick),placeholder:A||"Enter here",onChange:ze,onKeyDown:e=>Se(e),maxLength:R>0?R:void 0})]})};return e(b,Object.assign({width:l.width,height:l.height,state:q,type:_,style:null!==(B=null==ke?void 0:ke.RootContainer)&&void 0!==B?B:{}},{children:[e("div",Object.assign({className:"flex-align-center"},{children:[!Z&&(!!W||!!Te)&&e(f,Object.assign({invalid:!!Te},{children:[!!Te&&t(m,{width:16,height:16}),Te||W]})),R>0&&"BOTTOM"===ue&&e(y,Object.assign({position:"BOTTOM"},{children:[null!==(E=null===(H=(null!=Y?Y:"").toString())||void 0===H?void 0:H.length)&&void 0!==E?E:0,"/",R]}))]})),e(j,Object.assign({variant:$,state:q,width:l.width,isActive:"active"===q||Ce,isInvalid:ye,style:null!==(P=null!==(M=null==ke?void 0:ke.InputWrapper)&&void 0!==M?M:me)&&void 0!==P?P:{},version:ne,height:l.height,hightlightInputColor:de,hideBorder:ge},{children:[!!be&&t(C,Object.assign({variant:$,iconSize:Ie,onClick:()=>Me(null==F?void 0:F.callback),isLeft:!0,style:null!==(S=null==ke?void 0:ke.IconHolder)&&void 0!==S?S:{}},{children:t(be,{})})),!!U&&t(O,Object.assign({variant:$},{children:U})),"default"===$&&t(T,Object.assign({height:l.height,type:l.type,minHeight:ae,maxHeight:se,autoGrow:oe},{children:Ke()})),["x-small","small"].includes($)&&t(w,Object.assign({height:l.height,type:l.type},{children:Ke()})),!!fe&&t(C,Object.assign({variant:$,iconSize:Ie,onClick:()=>Me(null==K?void 0:K.callback),isLeft:!1},{children:t(fe,{})})),!!Q&&t(I,Object.assign({variant:$},{children:Q})),J&&J.text&&t(c,{buttonText:J.text,onClick:()=>Me(null==J?void 0:J.onClick)}),J&&J.buttonProps&&t(c,Object.assign({},J.buttonProps))]})),!pe&&(!!N||!!R)&&e(k,Object.assign({invalid:ye},{children:[re&&re,e("div",Object.assign({className:"label__container"},{children:[e(ce?v:p,{children:[N,G?t("span",{children:"*"}):""]}),l.tooltipText&&t(d,Object.assign({body:l.tooltipText,placement:"top"},{children:t("span",{children:t(n,{style:{marginTop:-3},width:18,height:18,color:ye?g.content.negative:g.content.primary})})}))]})),R>0&&"TOP"===ue&&e(y,{children:[null!==(z=null===(D=(null!=Y?Y:"").toString())||void 0===D?void 0:D.length)&&void 0!==z?z:0,"/",R]})]}))]}))}));L.displayName="Input";export{L as Input};
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import{__rest as t}from"../../_virtual/_tslib.js";import{jsxs as e,jsx as n}from"react/jsx-runtime";import
|
|
2
|
-
background: ${
|
|
1
|
+
import{__rest as t}from"../../_virtual/_tslib.js";import{jsxs as e,jsx as n}from"react/jsx-runtime";import i from"styled-components";import{Spinner as o}from"../spinner/Spinner.js";import{BodyCaption as r,TitleRegular as l,TitleSmall as s}from"../TypographyStyle.js";import{COLORS as c}from"../../constants/Theme.js";import a from"../../assets/icons/alert.svg.js";import{Button as d}from"../button/Button.js";const u=i.div`
|
|
2
|
+
background: ${c.surface.standard};
|
|
3
3
|
display: flex;
|
|
4
4
|
flex-direction: column;
|
|
5
5
|
align-items: center;
|
|
6
6
|
justify-content: center;
|
|
7
7
|
flex: 1;
|
|
8
|
-
`,
|
|
9
|
-
background: ${
|
|
8
|
+
`,m=i.div`
|
|
9
|
+
background: ${c.background.base};
|
|
10
10
|
width: 48px;
|
|
11
11
|
height: 48px;
|
|
12
12
|
display: flex;
|
|
@@ -14,4 +14,4 @@ import{__rest as t}from"../../_virtual/_tslib.js";import{jsxs as e,jsx as n}from
|
|
|
14
14
|
align-items: center;
|
|
15
15
|
justify-content: center;
|
|
16
16
|
border-radius: 24px;
|
|
17
|
-
`,
|
|
17
|
+
`,p=i=>{var{subTitle:p,title:g,IconHolderStyle:h,style:y,isLoading:b,containerWidth:f}=i,j=t(i,["subTitle","title","IconHolderStyle","style","isLoading","containerWidth"]);let x=l;const v=f?parseFloat(f):0;return v&&!isNaN(v)&&v<=150&&(x=s),e(u,Object.assign({style:null!=y?y:{}},{children:[b?n(o,{size:"large",color:c.stroke.brand}):n(m,Object.assign({style:null!=h?h:{}},{children:(null==j?void 0:j.Icon)||n(a,{color:c.content.placeholder,height:24,width:24})})),n(x,Object.assign({style:{marginTop:8,color:c.content.primary}},{children:b?"Loading...":g||"No results found"})),!!p&&!b&&n(r,Object.assign({style:{marginTop:4,color:c.content.secondary,textAlign:"center",maxWidth:184}},{children:p})),!!(null==j?void 0:j.actionButton)&&n("div",Object.assign({style:(null==j?void 0:j.buttonWidth)?{width:null==j?void 0:j.buttonWidth,display:"flex"}:{}},{children:n(d,Object.assign({},null==j?void 0:j.actionButton))}))]}))};export{p as ZeroState};
|