@bikdotai/bik-component-library 0.0.517-beta.drop.5 → 0.0.517-beta.drop.7

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

package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuList.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("react"),t=require("./MenuItem.js"),s=require("./MenuList.styled.js");exports.MenuList=r=>{let{options:i,isMultiSelect:o,showDescription:l,onSelect:c,version:u,onInfiniteScroll:a}=r;const p=n.useRef(null),j=n.useCallback((e=>{p.current&&p.current.disconnect(),p.current=new IntersectionObserver((e=>{e[0].isIntersecting&&(null==a||a())})),e&&p.current.observe(e)}),[a]);return e.jsx(e.Fragment,{children:i.map(((n,r)=>{const a=r===i.length-1;if(n.options){const i=n;return e.jsxs("div",Object.assign({style:{marginTop:"2.0"===u?2:0}},{children:[e.jsxs(s.StyledGroupedLabel,Object.assign({version:u},{children:[i.leadingIcon?e.jsx("span",Object.assign({style:{marginRight:8}},{children:i.leadingIcon})):e.jsx(e.Fragment,{}),i.label]})),i.options.map(((n,s)=>e.jsx(t.MenuItem,{version:u,last:s===i.options.length-1,onSelect:c,showDescription:l,isMultiSelect:o,option:n},`${r}-${s}`)))]}),r)}return e.jsx("div",Object.assign({ref:a?j:null},{children:e.jsx(t.MenuItem,{version:u,last:a,onSelect:c,showDescription:l,isMultiSelect:o,option:n},r)}),r)}))})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("react"),t=require("./MenuItem.js"),s=require("./MenuList.styled.js");exports.MenuList=r=>{let{options:i,isMultiSelect:c,showDescription:l,onSelect:o,version:u,onInfiniteScroll:a}=r;const p=n.useRef(null),d=n.useRef(null),j=n.useCallback((()=>{p.current&&p.current.disconnect(),p.current=new IntersectionObserver((e=>{e[0].isIntersecting&&(null==a||a())})),d.current&&p.current.observe(d.current)}),[a]);return n.useEffect((()=>(j(),()=>{p.current&&p.current.disconnect()})),[j,i]),e.jsx(e.Fragment,{children:i.map(((n,r)=>{const a=r===i.length-1;if(n.options){const i=n;return e.jsxs("div",Object.assign({style:{marginTop:"2.0"===u?2:0}},{children:[e.jsxs(s.StyledGroupedLabel,Object.assign({version:u},{children:[i.leadingIcon?e.jsx("span",Object.assign({style:{marginRight:8}},{children:i.leadingIcon})):e.jsx(e.Fragment,{}),i.label]})),i.options.map(((n,s)=>e.jsx(t.MenuItem,{version:u,last:s===i.options.length-1,onSelect:o,showDescription:l,isMultiSelect:c,option:n},`${r}-${s}`)))]}),r)}return e.jsxs("div",{children:[e.jsx(t.MenuItem,{version:u,last:a,onSelect:o,showDescription:l,isMultiSelect:c,option:n},r),a?e.jsx("span",{ref:d}):null]},r)}))})};

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

@@ -12,6 +12,7 @@ export declare function iterateOnOptions(options: DropdownOption[], newVal: Part
     leadingIcon?: JSX.Element | undefined;
     customComponent?: JSX.Element | undefined;
     searchKey?: string | undefined;
+    selectedLabel?: string | undefined;
 } | {
     label?: string | undefined;
     value?: string | undefined;
@@ -24,6 +25,8 @@ export declare function iterateOnOptions(options: DropdownOption[], newVal: Part
     leadingIcon?: JSX.Element | undefined;
     customComponent?: JSX.Element | undefined;
     searchKey?: string | undefined;
+    selectedLabel?: string | undefined;
     options: SingleOption[];
 })[];
 export declare function iterateOnOptionsRaw(options: DropdownOption[], cb: (option: SingleOption) => void): void;
+export declare function getSelectedOptionsAsText(selectedOption: DropdownOption[]): string | undefined;

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

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

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

@@ -39,6 +39,7 @@ export type SingleOption = {
     leadingIcon?: JSX.Element;
     customComponent?: JSX.Element;
     searchKey?: string;
+    selectedLabel?: string;
 };
 export type MultiSelectOption = SingleOption;
 export type DropdownOption = MultiSelectOption | SingleOption | GroupedOption;

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

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

package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuList.js

@@ -1 +1 @@
-import{jsx as e,Fragment as n,jsxs as t}from"react/jsx-runtime";import{useRef as i,useCallback as r}from"react";import{MenuItem as o}from"./MenuItem.js";import{StyledGroupedLabel as s}from"./MenuList.styled.js";const c=c=>{let{options:l,isMultiSelect:p,showDescription:a,onSelect:u,version:m,onInfiniteScroll:g}=c;const d=i(null),h=r((e=>{d.current&&d.current.disconnect(),d.current=new IntersectionObserver((e=>{e[0].isIntersecting&&(null==g||g())})),e&&d.current.observe(e)}),[g]);return e(n,{children:l.map(((i,r)=>{const c=r===l.length-1;if(i.options){const c=i;return t("div",Object.assign({style:{marginTop:"2.0"===m?2:0}},{children:[t(s,Object.assign({version:m},{children:[c.leadingIcon?e("span",Object.assign({style:{marginRight:8}},{children:c.leadingIcon})):e(n,{}),c.label]})),c.options.map(((n,t)=>e(o,{version:m,last:t===c.options.length-1,onSelect:u,showDescription:a,isMultiSelect:p,option:n},`${r}-${t}`)))]}),r)}return e("div",Object.assign({ref:c?h:null},{children:e(o,{version:m,last:c,onSelect:u,showDescription:a,isMultiSelect:p,option:i},r)}),r)}))})};export{c as MenuList};
+import{jsx as n,Fragment as e,jsxs as t}from"react/jsx-runtime";import{useRef as r,useCallback as i,useEffect as o}from"react";import{MenuItem as s}from"./MenuItem.js";import{StyledGroupedLabel as c}from"./MenuList.styled.js";const l=l=>{let{options:u,isMultiSelect:p,showDescription:a,onSelect:m,version:d,onInfiniteScroll:g}=l;const h=r(null),v=r(null),f=i((()=>{h.current&&h.current.disconnect(),h.current=new IntersectionObserver((n=>{n[0].isIntersecting&&(null==g||g())})),v.current&&h.current.observe(v.current)}),[g]);return o((()=>(f(),()=>{h.current&&h.current.disconnect()})),[f,u]),n(e,{children:u.map(((r,i)=>{const o=i===u.length-1;if(r.options){const o=r;return t("div",Object.assign({style:{marginTop:"2.0"===d?2:0}},{children:[t(c,Object.assign({version:d},{children:[o.leadingIcon?n("span",Object.assign({style:{marginRight:8}},{children:o.leadingIcon})):n(e,{}),o.label]})),o.options.map(((e,t)=>n(s,{version:d,last:t===o.options.length-1,onSelect:m,showDescription:a,isMultiSelect:p,option:e},`${i}-${t}`)))]}),i)}return t("div",{children:[n(s,{version:d,last:o,onSelect:m,showDescription:a,isMultiSelect:p,option:r},i),o?n("span",{ref:v}):null]},i)}))})};export{l as MenuList};

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

@@ -12,6 +12,7 @@ export declare function iterateOnOptions(options: DropdownOption[], newVal: Part
     leadingIcon?: JSX.Element | undefined;
     customComponent?: JSX.Element | undefined;
     searchKey?: string | undefined;
+    selectedLabel?: string | undefined;
 } | {
     label?: string | undefined;
     value?: string | undefined;
@@ -24,6 +25,8 @@ export declare function iterateOnOptions(options: DropdownOption[], newVal: Part
     leadingIcon?: JSX.Element | undefined;
     customComponent?: JSX.Element | undefined;
     searchKey?: string | undefined;
+    selectedLabel?: string | undefined;
     options: SingleOption[];
 })[];
 export declare function iterateOnOptionsRaw(options: DropdownOption[], cb: (option: SingleOption) => void): void;
+export declare function getSelectedOptionsAsText(selectedOption: DropdownOption[]): string | undefined;

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

@@ -1 +1 @@
-function s(s,n,t){return s.map((s=>{if(s.options){const i=s.options.map((s=>!t||t(s)?Object.assign(Object.assign({},s),n):Object.assign({},s)));return Object.assign(Object.assign({},s),{options:[...i]})}return!t||t(s)?Object.assign(Object.assign({},s),n):Object.assign({},s)}))}function n(s,n){s.forEach((s=>{s.options?s.options.forEach(n):n(s)}))}export{s as iterateOnOptions,n as iterateOnOptionsRaw};
+function n(n,t,s){return n.map((n=>{if(n.options){const o=n.options.map((n=>!s||s(n)?Object.assign(Object.assign({},n),t):Object.assign({},n)));return Object.assign(Object.assign({},n),{options:[...o]})}return!s||s(n)?Object.assign(Object.assign({},n),t):Object.assign({},n)}))}function t(n,t){n.forEach((n=>{n.options?n.options.forEach(t):t(n)}))}function s(n){if(console.log(n),n&&n.length)return n.map((n=>{var t;const s=n;return null!==(t=s.selectedLabel)&&void 0!==t?t:s.label})).join(", ")}export{s as getSelectedOptionsAsText,n as iterateOnOptions,t as iterateOnOptionsRaw};

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

@@ -39,6 +39,7 @@ export type SingleOption = {
     leadingIcon?: JSX.Element;
     customComponent?: JSX.Element;
     searchKey?: string;
+    selectedLabel?: string;
 };
 export type MultiSelectOption = SingleOption;
 export type DropdownOption = MultiSelectOption | SingleOption | GroupedOption;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.517-beta.drop.5",
+	"version": "0.0.517-beta.drop.7",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",