@bikdotai/bik-component-library 0.0.552-beta.3 → 0.0.552-beta.4

package/dist/cjs/components/bik-layout/MockMenus.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const Menus: ({
     displayName: string;
     key: number;

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

@@ -1,12 +1,12 @@
 import React from 'react';
 import { SingleOption } from './type';
 interface ChipInputProps {
+    placeholder?: string;
     chips: SingleOption[];
     onDeleteChip: (chip: SingleOption) => void;
     containerStyle?: React.CSSProperties;
     isDropdownOpened?: boolean;
     sizeToUse?: 'default' | 'small';
-    setDropdownVisibility?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 declare const ChipInput: React.FC<ChipInputProps>;
 export default ChipInput;

package/dist/cjs/components/dropdown/ChipInput.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../constants/Theme.js"),t=require("../../assets/icons/chevronDown.svg.js"),r=require("../../assets/icons/cross.svg.js"),i=require("../tag/Tag.js"),l=require("../TypographyStyle.js"),n=require("./Common.styled.js");exports.default=a=>{let{chips:c,onDeleteChip:o,containerStyle:d={},sizeToUse:h="default",isDropdownOpened:j}=a;return e.jsxs(n.ChipInputWrapper,Object.assign({style:Object.assign({},d)},{children:[e.jsxs("div",Object.assign({className:"chips-container"},{children:[c.slice(0,2).map(((s,t)=>e.jsx("div",Object.assign({style:{zIndex:10}},{children:e.jsx(i.Tag,Object.assign({tagText:s.selectedLabel||s.label,TrailingIcon:()=>e.jsx(r.default,{width:12,height:12,style:{cursor:"pointer"},onClick:()=>{o(s)}})},{children:s.selectedLabel||s.label}))}),t))),c.length>2&&e.jsx(l.BodyCaption,Object.assign({color:s.COLORS.content.placeholder},{children:`+${c.length-2} more`})),0===c.length&&e.jsx(l.BodyCaption,Object.assign({color:s.COLORS.content.placeholder},{children:"Select.."}))]})),e.jsx("div",{children:e.jsx(t.default,{style:{transform:j?"rotate(180deg)":"rotate(0deg)"},width:"small"===h?20:24,height:"small"===h?20:24,color:s.COLORS.content.primary})})]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../constants/Theme.js"),t=require("../../assets/icons/chevronDown.svg.js"),r=require("../../assets/icons/cross.svg.js"),l=require("../tag/Tag.js"),i=require("../TypographyStyle.js"),n=require("./Common.styled.js");exports.default=a=>{let{chips:c,onDeleteChip:o,containerStyle:d={},sizeToUse:h="default",isDropdownOpened:j,placeholder:g="Select.."}=a;return e.jsxs(n.ChipInputWrapper,Object.assign({style:Object.assign({},d)},{children:[e.jsxs("div",Object.assign({className:"chips-container"},{children:[c.slice(0,2).map(((s,t)=>e.jsx("div",Object.assign({style:{zIndex:10}},{children:e.jsx(l.Tag,Object.assign({tagText:s.selectedLabel||s.label,TrailingIcon:()=>e.jsx(r.default,{width:12,height:12,style:{cursor:"pointer"},onClick:()=>{o(s)}})},{children:s.selectedLabel||s.label}))}),t))),c.length>2&&e.jsx(i.BodyCaption,Object.assign({color:s.COLORS.content.placeholder},{children:`+${c.length-2} more`})),0===c.length&&e.jsx("div",Object.assign({style:{color:s.COLORS.content.placeholder}},{children:g}))]})),e.jsx("div",{children:e.jsx(t.default,{style:{transform:j?"rotate(180deg)":"rotate(0deg)"},width:"small"===h?20:24,height:"small"===h?20:24,color:s.COLORS.content.primary})})]}))};

package/dist/cjs/components/dropdown/Dropdown.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),n=require("react"),o=require("../../constants/Theme.js"),i=require("../../assets/icons/chevronDown.svg.js"),r=require("../input/Input.js"),l=require("../input/context/InputStyleProvider.js"),s=require("./ChipInput.js"),d=require("./DropdownPopover/index.js"),u=require("./OpenedDropdown/utils/iterationOnOptions.js");function a(){}const p=p=>{var c,h,v,g,j,{placeHolder:f,size:w,onSelect:b,defaultOptions:x,disabled:y,noErrorHint:O,placeHolderHeight:S,showPlaceholderWhenSelected:D=!1,inputStyle:q={},inputType:C="default",onDeleteChip:H}=p,m=e.__rest(p,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip"]);const[I,E]=n.useState(!1),P=null!=w?w:"default",T=n.useRef(),[_,z]=n.useState(null!=x?x:[]);n.useEffect((()=>{var e;const t=[];null===(e=null==m?void 0:m.options)||void 0===e||e.forEach((e=>{e.options?e.options.forEach((e=>{e.selected&&t.push(Object.assign(Object.assign({},e),{label:e.label}))})):e.selected&&t.push(e)})),z([...t])}),[m.options]),n.useEffect((()=>{x&&z([...x])}),[x]);const W=u.getSelectedOptionsAsText(_);return t.jsx(l.InputStyleContext.Provider,Object.assign({value:{InputWrapper:Object.assign({height:S||("small"===P?32:48),width:null!==(h=null!==(c=m.buttonWidth)&&void 0!==c?c:m.width)&&void 0!==h?h:"100%",zIndex:1,cursor:"pointer",padding:"6px 8px"},q),input:{minHeight:"100%"}}},{children:t.jsxs(d.DropdownPopover,Object.assign({ref:T,onSelect:function(e){Array.isArray(e)?z([...e]):z([e]),null==b||b(e)},disabled:y,onDropdownVisbilityChange:e=>E(e)},m,{children:["default"==C&&t.jsx(r.Input,{version:m.version,noErrorHint:O,state:y?"disabled":"none",value:D?f:null!=W?W:"",errorMessage:m.error,variant:P,placeholder:null!=f?f:"Select an option",width:null!==(v=m.width)&&void 0!==v?v:"100%",onChangeText:a,rightIcon:{icon:()=>t.jsx(i.default,{style:{transform:I?"rotate(180deg)":"rotate(0deg)"},onClick:a,width:"small"===P?20:24,height:"small"===P?20:24,color:o.COLORS.content.primary})},truncateText:!0}),"chip"==C&&t.jsx(s.default,{chips:_,onDeleteChip:e=>{null==H||H(e),console.log("onDeleteChip",e)},isDropdownOpened:I,sizeToUse:P,containerStyle:{width:null!==(g=m.width)&&void 0!==g?g:"100%",cursor:"pointer"},setDropdownVisibility:null===(j=null==T?void 0:T.current)||void 0===j?void 0:j.setDropdownVisibility})]}))}))};p.displayName="Dropdown",exports.Dropdown=p;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),n=require("react"),o=require("../../constants/Theme.js"),r=require("../../assets/icons/chevronDown.svg.js"),i=require("../input/Input.js"),l=require("../input/context/InputStyleProvider.js"),s=require("./ChipInput.js"),u=require("./DropdownPopover/index.js"),a=require("./OpenedDropdown/utils/iterationOnOptions.js");function d(){}const p=p=>{var c,h,v,j,{placeHolder:f,size:g,onSelect:w,defaultOptions:x,disabled:S,noErrorHint:b,placeHolderHeight:O,showPlaceholderWhenSelected:y=!1,inputStyle:D={},inputType:q="default",onDeleteChip:H}=p,m=e.__rest(p,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip"]);const[C,I]=n.useState(!1),E=null!=g?g:"default",P=n.useRef(),[T,_]=n.useState(null!=x?x:[]);n.useEffect((()=>{var e;const t=[];null===(e=null==m?void 0:m.options)||void 0===e||e.forEach((e=>{e.options?e.options.forEach((e=>{e.selected&&t.push(Object.assign(Object.assign({},e),{label:e.label}))})):e.selected&&t.push(e)})),_([...t])}),[m.options]),n.useEffect((()=>{x&&_([...x])}),[x]);const z=a.getSelectedOptionsAsText(T);return t.jsx(l.InputStyleContext.Provider,Object.assign({value:{InputWrapper:Object.assign({height:O||("small"===E?32:48),width:null!==(h=null!==(c=m.buttonWidth)&&void 0!==c?c:m.width)&&void 0!==h?h:"100%",zIndex:1,cursor:"pointer",padding:"6px 8px"},D),input:{minHeight:"100%"}}},{children:t.jsxs(u.DropdownPopover,Object.assign({ref:P,onSelect:function(e){Array.isArray(e)?_([...e]):_([e]),null==w||w(e)},disabled:S,onDropdownVisbilityChange:e=>I(e)},m,{children:["default"==q&&t.jsx(i.Input,{version:m.version,noErrorHint:b,state:S?"disabled":"none",value:y?f:null!=z?z:"",errorMessage:m.error,variant:E,placeholder:null!=f?f:"Select an option",width:null!==(v=m.width)&&void 0!==v?v:"100%",onChangeText:d,rightIcon:{icon:()=>t.jsx(r.default,{style:{transform:C?"rotate(180deg)":"rotate(0deg)"},onClick:d,width:"small"===E?20:24,height:"small"===E?20:24,color:o.COLORS.content.primary})},truncateText:!0}),"chip"==q&&t.jsx(s.default,{placeholder:null!=f?f:"Select options",chips:T,onDeleteChip:e=>{null==H||H(e)},isDropdownOpened:C,sizeToUse:E,containerStyle:{width:null!==(j=m.width)&&void 0!==j?j:"100%",cursor:"pointer"}})]}))}))};p.displayName="Dropdown",exports.Dropdown=p;

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

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

package/dist/cjs/components/side-modal/SideModal.style.js

@@ -31,6 +31,7 @@
 	svg:hover {
 		cursor: pointer;
 		background: ${t.COLORS.background.base};
+		border-radius: 4px;
 	}
 	${t=>{let{headerStyle:o}=t;return e.css`
 		${Object.keys(o).map((e=>`${e}: ${o[e]};`)).join("\n")}
@@ -42,7 +43,7 @@
 	${t=>{let{bodyStyle:o}=t;return e.css`
 		${Object.keys(o).map((e=>`${e}: ${o[e]};`)).join("\n")}
 	`}}
-`,l=r.default.div`
+`,p=r.default.div`
 	height: 60px;
 	width: 100%;
 	position: sticky;
@@ -57,8 +58,8 @@
 	${t=>{let{footerStyle:o}=t;return e.css`
 		${Object.keys(o).map((e=>`${e}: ${o[e]};`)).join("\n")}
 	`}}
-`,p=r.default.div`
+`,l=r.default.div`
 	display: flex;
 	flex-direction: ${e=>e.footerDirection||"row"};
 	gap: 8px;
-`;exports.FooterButtonWrapper=p,exports.SideModalBody=s,exports.SideModalContainer=n,exports.SideModalFooter=l,exports.SideModalHeader=a,exports.SideModalStyle=d;
+`;exports.FooterButtonWrapper=l,exports.SideModalBody=s,exports.SideModalContainer=n,exports.SideModalFooter=p,exports.SideModalHeader=a,exports.SideModalStyle=d;

package/dist/esm/components/bik-layout/MockMenus.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const Menus: ({
     displayName: string;
     key: number;

package/dist/esm/components/dropdown/ChipInput.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
 import { SingleOption } from './type';
 interface ChipInputProps {
+    placeholder?: string;
     chips: SingleOption[];
     onDeleteChip: (chip: SingleOption) => void;
     containerStyle?: React.CSSProperties;
     isDropdownOpened?: boolean;
     sizeToUse?: 'default' | 'small';
-    setDropdownVisibility?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 declare const ChipInput: React.FC<ChipInputProps>;
 export default ChipInput;

package/dist/esm/components/dropdown/ChipInput.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{COLORS as s}from"../../constants/Theme.js";import o from"../../assets/icons/chevronDown.svg.js";import r from"../../assets/icons/cross.svg.js";import{Tag as n}from"../tag/Tag.js";import{BodyCaption as l}from"../TypographyStyle.js";import{ChipInputWrapper as i}from"./Common.styled.js";const c=c=>{let{chips:a,onDeleteChip:m,containerStyle:d={},sizeToUse:h="default",isDropdownOpened:g}=c;return e(i,Object.assign({style:Object.assign({},d)},{children:[e("div",Object.assign({className:"chips-container"},{children:[a.slice(0,2).map(((e,s)=>t("div",Object.assign({style:{zIndex:10}},{children:t(n,Object.assign({tagText:e.selectedLabel||e.label,TrailingIcon:()=>t(r,{width:12,height:12,style:{cursor:"pointer"},onClick:()=>{m(e)}})},{children:e.selectedLabel||e.label}))}),s))),a.length>2&&t(l,Object.assign({color:s.content.placeholder},{children:`+${a.length-2} more`})),0===a.length&&t(l,Object.assign({color:s.content.placeholder},{children:"Select.."}))]})),t("div",{children:t(o,{style:{transform:g?"rotate(180deg)":"rotate(0deg)"},width:"small"===h?20:24,height:"small"===h?20:24,color:s.content.primary})})]}))};export{c as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{COLORS as s}from"../../constants/Theme.js";import o from"../../assets/icons/chevronDown.svg.js";import r from"../../assets/icons/cross.svg.js";import{Tag as l}from"../tag/Tag.js";import{BodyCaption as n}from"../TypographyStyle.js";import{ChipInputWrapper as i}from"./Common.styled.js";const c=c=>{let{chips:a,onDeleteChip:d,containerStyle:h={},sizeToUse:m="default",isDropdownOpened:g,placeholder:p="Select.."}=c;return e(i,Object.assign({style:Object.assign({},h)},{children:[e("div",Object.assign({className:"chips-container"},{children:[a.slice(0,2).map(((e,s)=>t("div",Object.assign({style:{zIndex:10}},{children:t(l,Object.assign({tagText:e.selectedLabel||e.label,TrailingIcon:()=>t(r,{width:12,height:12,style:{cursor:"pointer"},onClick:()=>{d(e)}})},{children:e.selectedLabel||e.label}))}),s))),a.length>2&&t(n,Object.assign({color:s.content.placeholder},{children:`+${a.length-2} more`})),0===a.length&&t("div",Object.assign({style:{color:s.content.placeholder}},{children:p}))]})),t("div",{children:t(o,{style:{transform:g?"rotate(180deg)":"rotate(0deg)"},width:"small"===m?20:24,height:"small"===m?20:24,color:s.content.primary})})]}))};export{c as default};

package/dist/esm/components/dropdown/Dropdown.js

@@ -1 +1 @@
-import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as o,jsxs as t}from"react/jsx-runtime";import{useState as n,useRef as i,useEffect as r}from"react";import{COLORS as l}from"../../constants/Theme.js";import s from"../../assets/icons/chevronDown.svg.js";import{Input as p}from"../input/Input.js";import{InputStyleContext as d}from"../input/context/InputStyleProvider.js";import a from"./ChipInput.js";import{DropdownPopover as c}from"./DropdownPopover/index.js";import{getSelectedOptionsAsText as u}from"./OpenedDropdown/utils/iterationOnOptions.js";function h(){}const m=m=>{var v,f,g,w,b,{placeHolder:j,size:y,onSelect:D,defaultOptions:O,disabled:H,noErrorHint:S,placeHolderHeight:x,showPlaceholderWhenSelected:C=!1,inputStyle:I={},inputType:T="default",onDeleteChip:E}=m,P=e(m,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip"]);const[z,W]=n(!1),V=null!=y?y:"default",A=i(),[_,k]=n(null!=O?O:[]);r((()=>{var e;const o=[];null===(e=null==P?void 0:P.options)||void 0===e||e.forEach((e=>{e.options?e.options.forEach((e=>{e.selected&&o.push(Object.assign(Object.assign({},e),{label:e.label}))})):e.selected&&o.push(e)})),k([...o])}),[P.options]),r((()=>{O&&k([...O])}),[O]);const M=u(_);return o(d.Provider,Object.assign({value:{InputWrapper:Object.assign({height:x||("small"===V?32:48),width:null!==(f=null!==(v=P.buttonWidth)&&void 0!==v?v:P.width)&&void 0!==f?f:"100%",zIndex:1,cursor:"pointer",padding:"6px 8px"},I),input:{minHeight:"100%"}}},{children:t(c,Object.assign({ref:A,onSelect:function(e){Array.isArray(e)?k([...e]):k([e]),null==D||D(e)},disabled:H,onDropdownVisbilityChange:e=>W(e)},P,{children:["default"==T&&o(p,{version:P.version,noErrorHint:S,state:H?"disabled":"none",value:C?j:null!=M?M:"",errorMessage:P.error,variant:V,placeholder:null!=j?j:"Select an option",width:null!==(g=P.width)&&void 0!==g?g:"100%",onChangeText:h,rightIcon:{icon:()=>o(s,{style:{transform:z?"rotate(180deg)":"rotate(0deg)"},onClick:h,width:"small"===V?20:24,height:"small"===V?20:24,color:l.content.primary})},truncateText:!0}),"chip"==T&&o(a,{chips:_,onDeleteChip:e=>{null==E||E(e),console.log("onDeleteChip",e)},isDropdownOpened:z,sizeToUse:V,containerStyle:{width:null!==(w=P.width)&&void 0!==w?w:"100%",cursor:"pointer"},setDropdownVisibility:null===(b=null==A?void 0:A.current)||void 0===b?void 0:b.setDropdownVisibility})]}))}))};m.displayName="Dropdown";export{m as Dropdown};
+import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as o,jsxs as t}from"react/jsx-runtime";import{useState as n,useRef as i,useEffect as r}from"react";import{COLORS as l}from"../../constants/Theme.js";import s from"../../assets/icons/chevronDown.svg.js";import{Input as p}from"../input/Input.js";import{InputStyleContext as a}from"../input/context/InputStyleProvider.js";import d from"./ChipInput.js";import{DropdownPopover as c}from"./DropdownPopover/index.js";import{getSelectedOptionsAsText as u}from"./OpenedDropdown/utils/iterationOnOptions.js";function h(){}const m=m=>{var f,v,g,w,{placeHolder:b,size:j,onSelect:y,defaultOptions:O,disabled:S,noErrorHint:H,placeHolderHeight:x,showPlaceholderWhenSelected:D=!1,inputStyle:C={},inputType:I="default",onDeleteChip:T}=m,E=e(m,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip"]);const[P,z]=n(!1),W=null!=j?j:"default",A=i(),[_,k]=n(null!=O?O:[]);r((()=>{var e;const o=[];null===(e=null==E?void 0:E.options)||void 0===e||e.forEach((e=>{e.options?e.options.forEach((e=>{e.selected&&o.push(Object.assign(Object.assign({},e),{label:e.label}))})):e.selected&&o.push(e)})),k([...o])}),[E.options]),r((()=>{O&&k([...O])}),[O]);const M=u(_);return o(a.Provider,Object.assign({value:{InputWrapper:Object.assign({height:x||("small"===W?32:48),width:null!==(v=null!==(f=E.buttonWidth)&&void 0!==f?f:E.width)&&void 0!==v?v:"100%",zIndex:1,cursor:"pointer",padding:"6px 8px"},C),input:{minHeight:"100%"}}},{children:t(c,Object.assign({ref:A,onSelect:function(e){Array.isArray(e)?k([...e]):k([e]),null==y||y(e)},disabled:S,onDropdownVisbilityChange:e=>z(e)},E,{children:["default"==I&&o(p,{version:E.version,noErrorHint:H,state:S?"disabled":"none",value:D?b:null!=M?M:"",errorMessage:E.error,variant:W,placeholder:null!=b?b:"Select an option",width:null!==(g=E.width)&&void 0!==g?g:"100%",onChangeText:h,rightIcon:{icon:()=>o(s,{style:{transform:P?"rotate(180deg)":"rotate(0deg)"},onClick:h,width:"small"===W?20:24,height:"small"===W?20:24,color:l.content.primary})},truncateText:!0}),"chip"==I&&o(d,{placeholder:null!=b?b:"Select options",chips:_,onDeleteChip:e=>{null==T||T(e)},isDropdownOpened:P,sizeToUse:W,containerStyle:{width:null!==(w=E.width)&&void 0!==w?w:"100%",cursor:"pointer"}})]}))}))};m.displayName="Dropdown";export{m as Dropdown};

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

@@ -1 +1 @@
-import{__rest as o}from"../../../_virtual/_tslib.js";import{jsx as e,Fragment as n,jsxs as r}from"react/jsx-runtime";import t,{useState as i,useRef as l,useImperativeHandle as s,useEffect as p}from"react";import{usePopper as d}from"react-popper";import a from"../../dropShadow/DropShadow.js";import{Tooltip as c}from"../../tooltips/Tooltip.js";import{OverLapAbs as m,OpenDropdownContainer as v}from"../Common.styled.js";import{OpenedDropdown as u}from"../OpenedDropdown/components/OpennedDropdown.js";const w=t.forwardRef(((t,w)=>{var{children:b,onDropdownVisbilityChange:h,version:f="1.0",tooltipContent:D,tooltipDirection:j,showTooltipArrow:g}=t,y=o(t,["children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow"]);const O=w,[C,S]=i(!1),[x,A]=i(null),[R,T]=i(null),V=l(null),{styles:z,attributes:M}=d(x,R,{placement:y.placement,strategy:y.strategy}),P=o=>{var e,n;"2.0"===f&&y.isMultiSelect&&o&&(null===(e=y.onSelect)||void 0===e||e.call(y,[...o])),S(!1),null===(n=null==y?void 0:y.onClose)||void 0===n||n.call(y)};s(O,(()=>({openDropdown:C,closeDropdown:()=>S(!1),openDropdownFn:()=>S(!0),setDropdownVisibility:S})),[]),p((()=>{(null==O?void 0:O.current)&&(O.current.openDropdown=C)}),[C]),p((()=>{null==h||h(C)}),[C]);const _=()=>r(n,{children:[r("div",Object.assign({style:{position:"relative"},ref:A},{children:[e(m,{ref:V,disabled:y.disabled,onClick:o=>{var e;o.stopPropagation(),null===(e=y.onDropdownOpen)||void 0===e||e.call(y),C?(S(!1),o.preventDefault()):y.disabled||S(!0)}}),b]})),C&&e(v,Object.assign({ref:T,style:Object.assign(Object.assign({},z.popper),{zIndex:3})},M.popper,{children:e(a,Object.assign({level:"z2",position:"down",style:{borderRadius:8}},{children:e(u,Object.assign({},y,{onSelect:o=>{var e;"2.0"===f&&y.isMultiSelect||(null===(e=y.onSelect)||void 0===e||e.call(y,o),S(!1))},onClose:P,version:f,headerRef:V}))}))}))]});return e(n,{children:C||void 0===D?_():e(c,Object.assign({body:D,placement:j,hideArrow:!g},{children:e("div",{children:_()})}))})}));w.displayName="DropdownPopover";export{w as DropdownPopover};
+import{__rest as o}from"../../../_virtual/_tslib.js";import{jsx as e,Fragment as r,jsxs as n}from"react/jsx-runtime";import t,{useState as i,useRef as l,useImperativeHandle as s,useEffect as p}from"react";import{usePopper as d}from"react-popper";import a from"../../dropShadow/DropShadow.js";import{Tooltip as c}from"../../tooltips/Tooltip.js";import{OverLapAbs as m,OpenDropdownContainer as v}from"../Common.styled.js";import{OpenedDropdown as u}from"../OpenedDropdown/components/OpennedDropdown.js";const h=t.forwardRef(((t,h)=>{var{children:w,onDropdownVisbilityChange:b,version:f="1.0",tooltipContent:j,tooltipDirection:g,showTooltipArrow:D}=t,y=o(t,["children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow"]);const O=h,[C,S]=i(!1),[x,A]=i(null),[R,T]=i(null),z=l(null),{styles:M,attributes:P}=d(x,R,{placement:y.placement,strategy:y.strategy}),V=o=>{var e,r;"2.0"===f&&y.isMultiSelect&&o&&(null===(e=y.onSelect)||void 0===e||e.call(y,[...o])),S(!1),null===(r=null==y?void 0:y.onClose)||void 0===r||r.call(y)};s(O,(()=>({openDropdown:C})),[]),p((()=>{(null==O?void 0:O.current)&&(O.current.openDropdown=C)}),[C]),p((()=>{null==b||b(C)}),[C]);const _=()=>n(r,{children:[n("div",Object.assign({style:{position:"relative"},ref:A},{children:[e(m,{ref:z,disabled:y.disabled,onClick:o=>{var e;o.stopPropagation(),null===(e=y.onDropdownOpen)||void 0===e||e.call(y),C?(S(!1),o.preventDefault()):y.disabled||S(!0)}}),w]})),C&&e(v,Object.assign({ref:T,style:Object.assign(Object.assign({},M.popper),{zIndex:3})},P.popper,{children:e(a,Object.assign({level:"z2",position:"down",style:{borderRadius:8}},{children:e(u,Object.assign({},y,{onSelect:o=>{var e;"2.0"===f&&y.isMultiSelect||(null===(e=y.onSelect)||void 0===e||e.call(y,o),S(!1))},onClose:V,version:f,headerRef:z}))}))}))]});return e(r,{children:C||void 0===j?_():e(c,Object.assign({body:j,placement:g,hideArrow:!D},{children:e("div",{children:_()})}))})}));h.displayName="DropdownPopover";export{h as DropdownPopover};

package/dist/esm/components/side-modal/SideModal.style.js

@@ -31,6 +31,7 @@ import e,{css as t}from"styled-components";import{COLORS as o}from"../../constan
 	svg:hover {
 		cursor: pointer;
 		background: ${o.background.base};
+		border-radius: 4px;
 	}
 	${e=>{let{headerStyle:o}=e;return t`
 		${Object.keys(o).map((e=>`${e}: ${o[e]};`)).join("\n")}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.552-beta.3",
+	"version": "0.0.552-beta.4",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",