@bikdotai/bik-component-library 0.0.644 → 0.0.645

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.
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import { ButtonProps } from "../../button/model";
2
3
  import { Placement } from "../../tooltips";
3
4
  import { OpenDropdownProps } from '../type';
4
5
  export declare const DropdownPopover: React.ForwardRefExoticComponent<OpenDropdownProps & {
@@ -12,6 +13,11 @@ export declare const DropdownPopover: React.ForwardRefExoticComponent<OpenDropdo
12
13
  showTooltipArrow?: boolean | undefined;
13
14
  allowEvents?: boolean | undefined;
14
15
  'data-test'?: string | undefined;
16
+ zeroState?: {
17
+ actionButton?: ButtonProps | undefined;
18
+ title: string;
19
+ subTitle?: string | undefined;
20
+ } | undefined;
15
21
  } & React.RefAttributes<{
16
22
  openDropdown: boolean;
17
23
  }>>;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),o=require("react/jsx-runtime"),t=require("react"),n=require("react-popper"),r=require("../../dropShadow/DropShadow.js"),l=require("../../tooltips/Tooltip.js"),s=require("../Common.styled.js"),i=require("../OpenedDropdown/components/OpennedDropdown.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const d=a(t).default.forwardRef(((a,d)=>{var{children:p,onDropdownVisbilityChange:c,version:u="1.0",tooltipContent:v,tooltipDirection:j,showTooltipArrow:w}=a,b=e.__rest(a,["children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow"]);const h=d,[f,D]=t.useState(!1),[O,g]=t.useState(null),[x,y]=t.useState(null),m=t.useRef(null),{styles:S,attributes:C}=n.usePopper(O,x,{placement:b.placement,strategy:b.strategy}),q=e=>{var o,t;"2.0"===u&&b.isMultiSelect&&e&&(null===(o=b.onSelect)||void 0===o||o.call(b,[...e])),D(!1),null===(t=null==b?void 0:b.onClose)||void 0===t||t.call(b)};t.useImperativeHandle(h,(()=>({openDropdown:f})),[]),t.useEffect((()=>{(null==h?void 0:h.current)&&(h.current.openDropdown=f)}),[f]),t.useEffect((()=>{null==c||c(f)}),[f]);const E=()=>o.jsxs(o.Fragment,{children:[o.jsxs("div",Object.assign({style:{position:"relative"},ref:g},{children:[o.jsx(s.OverLapAbs,Object.assign({ref:m,allowEvents:b.allowEvents,disabled:b.disabled,onClick:e=>{var o;null===(o=b.onDropdownOpen)||void 0===o||o.call(b),f?(D(!1),e.preventDefault()):b.disabled||D(!0)}},{children:b.allowEvents?p:null})),b.allowEvents?null:p]})),f&&o.jsx(s.OpenDropdownContainer,Object.assign({ref:y,style:Object.assign(Object.assign({},S.popper),{zIndex:3})},C.popper,{"data-test":b["data-test"]},{children:o.jsx(r.DropShadow,Object.assign({level:"z2",position:"down",style:{borderRadius:8}},{children:o.jsx(i.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:f||void 0===v?E():o.jsx(l.Tooltip,Object.assign({body:v,placement:j,hideArrow:!w},{children:o.jsx("div",Object.assign({"data-test":b["data-test"]},{children:E()}))}))})}));d.displayName="DropdownPopover",exports.DropdownPopover=d;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),o=require("react"),n=require("react-popper"),r=require("../../dropShadow/DropShadow.js"),l=require("../../tooltips/Tooltip.js"),s=require("../Common.styled.js"),i=require("../OpenedDropdown/components/OpennedDropdown.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const d=a(o).default.forwardRef(((a,d)=>{var{children:p,onDropdownVisbilityChange:c,version:u="1.0",tooltipContent:v,tooltipDirection:j,showTooltipArrow:w}=a,b=e.__rest(a,["children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow"]);const h=d,[f,D]=o.useState(!1),[O,g]=o.useState(null),[x,y]=o.useState(null),S=o.useRef(null),{styles:m,attributes:C}=n.usePopper(O,x,{placement:b.placement,strategy:b.strategy}),q=e=>{var t,o;"2.0"===u&&b.isMultiSelect&&e&&(null===(t=b.onSelect)||void 0===t||t.call(b,[...e])),D(!1),null===(o=null==b?void 0:b.onClose)||void 0===o||o.call(b)};o.useImperativeHandle(h,(()=>({openDropdown:f})),[]),o.useEffect((()=>{(null==h?void 0:h.current)&&(h.current.openDropdown=f)}),[f]),o.useEffect((()=>{null==c||c(f)}),[f]);const E=()=>t.jsxs(t.Fragment,{children:[t.jsxs("div",Object.assign({style:{position:"relative"},ref:g},{children:[t.jsx(s.OverLapAbs,Object.assign({ref:S,allowEvents:b.allowEvents,disabled:b.disabled,onClick:e=>{var t;null===(t=b.onDropdownOpen)||void 0===t||t.call(b),f?(D(!1),e.preventDefault()):b.disabled||D(!0)}},{children:b.allowEvents?p:null})),b.allowEvents?null:p]})),f&&t.jsx(s.OpenDropdownContainer,Object.assign({ref:y,style:Object.assign(Object.assign({},m.popper),{zIndex:3})},C.popper,{"data-test":b["data-test"]},{children:t.jsx(r.DropShadow,Object.assign({level:"z2",position:"down",style:{borderRadius:8}},{children:t.jsx(i.OpenedDropdown,Object.assign({},b,{onSelect:e=>{var t;"2.0"===u&&b.isMultiSelect||(null===(t=b.onSelect)||void 0===t||t.call(b,e),D(!1))},onClose:q,version:u,headerRef:S,zeroState:null==b?void 0:b.zeroState}))}))}))]});return t.jsx(t.Fragment,{children:f||void 0===v?E():t.jsx(l.Tooltip,Object.assign({body:v,placement:j,hideArrow:!w},{children:t.jsx("div",Object.assign({"data-test":b["data-test"]},{children:E()}))}))})}));d.displayName="DropdownPopover",exports.DropdownPopover=d;
@@ -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"),r=require("../../../../hooks/useOutside.js"),s=require("../../hooks/useDropdown.js"),o=require("./description/Description.js"),i=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=f=>{let{options:j,isSearchable:x,isMultiSelect:g,width:b,allowFreeForm:w,height:v,onClose:O,onSelect:m,onSearch:y,version:C,skipSorting:D,headerRef:M,hideSelectAll:q,primaryButtonText:L,onInfiniteScroll:F,onMultiSelectClear:k,onDropdownItemClick:A,buttonOptions:B,isSearchLoading:I,disableSearchOptions:H,disableSearchedOptionExcept:R,useDefaultCursor:Z,containerStyle:T={}}=f;const{dropdownOptions:E,search:P,searchedString:_,searchedOptions:z,onApplyHandler:K,selectAllHandler:N,onMultiSelectClear:W,onFreeFormSelect:G,onMultiSelectApply:J,latestDropdownOptionsRef:Q,getSelectedOptions:U}=s.useDropdown(C,j,m,D,g,y,H,R),[V,X]=t.useState(null!=b?b:S),[Y,$]=t.useState(null),ee=t.useRef(null),te=t.useRef([]);r.useOutside(ee,(()=>{if($(null),g&&"2.0"===C){const e=U(Q.current);null==O||O(e)}else null==O||O(E)}),[M,te]);const ne=null!=v?v:h,re="number"==typeof ne?x&&g?ne-96:x&&!g||!x&&g?ne-48:ne:ne;t.useEffect((()=>{const e=null!=b?b:S;if(null===Y)X(e);else if("number"==typeof e)X(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));X(t)}}),[Y]);const se=[],oe=(_&&y?z:E).map((e=>{var t,n;if(_&&!y){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()))&&(se.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()))?(se.push(!_||e.label===_),e):null}return e})).filter((e=>null!==e)),ie=!!x&&_&&0===oe.length;return e.jsxs(c.OpennedDropdownContainer,Object.assign({version:C,ref:ee,style:Object.assign({width:V},T)},{children:[e.jsxs("div",Object.assign({style:{width:Y?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!x&&e.jsx(d.SearchBox,{onSearch:P,version:C}),oe.length||_?e.jsxs(c.MenuListContainer,Object.assign({minHeight:ne,maxHeight:re},{children:[!!g&&!ie&&!q&&e.jsx(u.SelectAllMenu,{version:C,options:_&&y?z:E,onSelect:N}),!w&&ie&&e.jsx(p.SearchZeroState,{isLoading:I,height:re,searchedString:_}),w&&(ie||!!se.length&&se.every((e=>!1===e)))&&e.jsx(i.FreeFormMenu,{version:C,isMultiSelect:g,onSelect:G,searchedString:_}),e.jsx(l.MenuList,{onInfiniteScroll:F,onDropdownItemClick:A,version:C,onSelect:K,showDescription:function(e,t){$(e&&t?{title:e,description:t}:null)},isMultiSelect:g,options:oe,useDefaultCursor:Z,ref:te})]})):e.jsx("div",Object.assign({style:{height:ne,display:"flex"}},{children:e.jsx(n.ZeroState,{title:"No results found",subTitle:"Please try again later or contact us at support@bik.ai if you require further assistance."})})),!!g&&!(!oe.length&&!_)&&"2.0"!==C&&e.jsx(a.default,{onClear:()=>{W(),null==k||k()},onApply:J,list:_&&y?z:E,buttonText:L,buttonOptions:B})]})),!!Y&&e.jsx(o.Description,{title:Y.title,description:Y.description,version:C})]}))};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../../../zeroState/ZeroState.js"),o=require("../../../../hooks/useOutside.js"),r=require("../../hooks/useDropdown.js"),i=require("./description/Description.js"),s=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=f=>{let{options:j,isSearchable:x,isMultiSelect:g,width:b,allowFreeForm:v,height:w,onClose:O,onSelect:m,onSearch:y,version:C,skipSorting:D,headerRef:M,hideSelectAll:q,primaryButtonText:L,onInfiniteScroll:F,onMultiSelectClear:k,onDropdownItemClick:A,buttonOptions:B,isSearchLoading:I,disableSearchOptions:H,disableSearchedOptionExcept:R,useDefaultCursor:T,containerStyle:Z={},zeroState:z}=f;const{dropdownOptions:E,search:P,searchedString:_,searchedOptions:K,onApplyHandler:N,selectAllHandler:W,onMultiSelectClear:G,onFreeFormSelect:J,onMultiSelectApply:Q,latestDropdownOptionsRef:U,getSelectedOptions:V}=r.useDropdown(C,j,m,D,g,y,H,R),[X,Y]=t.useState(null!=b?b:S),[$,ee]=t.useState(null),te=t.useRef(null),ne=t.useRef([]);o.useOutside(te,(()=>{if(ee(null),g&&"2.0"===C){const e=V(U.current);null==O||O(e)}else null==O||O(E)}),[M,ne]);const oe=null!=w?w:h,re="number"==typeof oe?x&&g?oe-96:x&&!g||!x&&g?oe-48:oe:oe;t.useEffect((()=>{const e=null!=b?b:S;if(null===$)Y(e);else if("number"==typeof e)Y(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));Y(t)}}),[$]);const ie=[],se=(_&&y?K:E).map((e=>{var t,n;if(_&&!y){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()))&&(ie.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()))?(ie.push(!_||e.label===_),e):null}return e})).filter((e=>null!==e)),le=!!x&&_&&0===se.length;return e.jsxs(c.OpennedDropdownContainer,Object.assign({version:C,ref:te,style:Object.assign({width:X},Z)},{children:[e.jsxs("div",Object.assign({style:{width:$?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!x&&e.jsx(d.SearchBox,{onSearch:P,version:C}),se.length||_?e.jsxs(c.MenuListContainer,Object.assign({minHeight:oe,maxHeight:re},{children:[!!g&&!le&&!q&&e.jsx(u.SelectAllMenu,{version:C,options:_&&y?K:E,onSelect:W}),!v&&le&&e.jsx(p.SearchZeroState,{isLoading:I,height:re,searchedString:_}),v&&(le||!!ie.length&&ie.every((e=>!1===e)))&&e.jsx(s.FreeFormMenu,{version:C,isMultiSelect:g,onSelect:J,searchedString:_}),e.jsx(l.MenuList,{onInfiniteScroll:F,onDropdownItemClick:A,version:C,onSelect:N,showDescription:function(e,t){ee(e&&t?{title:e,description:t}:null)},isMultiSelect:g,options:se,useDefaultCursor:T,ref:ne})]})):e.jsx("div",Object.assign({style:{height:oe,display:"flex"}},{children:e.jsx(n.ZeroState,{title:(null==z?void 0:z.title)||"No results found",subTitle:(null==z?void 0:z.subTitle)||"Please try again later or contact us at support@bik.ai if you require further assistance.",actionButton:null==z?void 0:z.actionButton})})),!!g&&!(!se.length&&!_)&&"2.0"!==C&&e.jsx(a.default,{onClear:()=>{G(),null==k||k()},onApply:Q,list:_&&y?K:E,buttonText:L,buttonOptions:B})]})),!!$&&e.jsx(i.Description,{title:$.title,description:$.description,version:C})]}))};
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import { Placement, PositioningStrategy } from '@popperjs/core';
3
- import { Type } from '../button/model';
3
+ import { ButtonProps, Type } from '../button/model';
4
4
  export interface OpenDropdownProps {
5
5
  defaultOptions?: DropdownOption[];
6
6
  options: DropdownOption[];
@@ -30,6 +30,11 @@ export interface OpenDropdownProps {
30
30
  useDefaultCursor?: boolean;
31
31
  'data-test'?: string;
32
32
  containerStyle?: React.CSSProperties;
33
+ zeroState?: {
34
+ actionButton?: ButtonProps;
35
+ title: string;
36
+ subTitle?: string;
37
+ };
33
38
  }
34
39
  export type GroupedOption = {
35
40
  label?: string;
@@ -1,8 +1,10 @@
1
1
  import React from 'react';
2
+ import { ButtonProps } from '../button/model';
2
3
  export declare const ZeroState: React.FC<{
3
4
  isLoading?: boolean;
4
5
  title: string;
5
6
  subTitle?: string;
6
7
  IconHolderStyle?: React.CSSProperties;
7
8
  style?: React.CSSProperties /** now this component is extendable through styled-component */;
9
+ actionButton?: ButtonProps;
8
10
  }>;
@@ -1,11 +1,11 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("styled-components"),r=require("../spinner/Spinner.js"),n=require("../TypographyStyle.js"),s=require("../../constants/Theme.js"),i=require("../../assets/icons/alert.svg.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=l(t);const a=o.default.div`
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),n=require("styled-components"),r=require("../spinner/Spinner.js"),i=require("../TypographyStyle.js"),s=require("../../constants/Theme.js"),l=require("../../assets/icons/alert.svg.js"),o=require("../button/Button.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=a(n);const u=c.default.div`
2
2
  background: ${s.COLORS.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
- `,c=o.default.div`
8
+ `,d=c.default.div`
9
9
  background: ${s.COLORS.background.base};
10
10
  width: 48px;
11
11
  height: 48px;
@@ -14,4 +14,4 @@
14
14
  align-items: center;
15
15
  justify-content: center;
16
16
  border-radius: 24px;
17
- `;exports.ZeroState=t=>{let{subTitle:l,title:o,IconHolderStyle:d,style:u,isLoading:g}=t;return e.jsxs(a,Object.assign({style:null!=u?u:{}},{children:[g?e.jsx(r.Spinner,{size:"large",color:s.COLORS.stroke.brand}):e.jsx(c,Object.assign({style:null!=d?d:{}},{children:e.jsx(i.default,{color:s.COLORS.content.placeholder,height:24,width:24})})),e.jsx(n.TitleRegular,Object.assign({style:{marginTop:8,color:s.COLORS.content.primary}},{children:g?"Loading...":o||"No results found"})),!!l&&!g&&e.jsx(n.BodyCaption,Object.assign({style:{marginTop:4,color:s.COLORS.content.secondary,textAlign:"center",maxWidth:184}},{children:l}))]}))};
17
+ `;exports.ZeroState=n=>{var{subTitle:a,title:c,IconHolderStyle:j,style:g,isLoading:x}=n,y=e.__rest(n,["subTitle","title","IconHolderStyle","style","isLoading"]);return t.jsxs(u,Object.assign({style:null!=g?g:{}},{children:[x?t.jsx(r.Spinner,{size:"large",color:s.COLORS.stroke.brand}):t.jsx(d,Object.assign({style:null!=j?j:{}},{children:t.jsx(l.default,{color:s.COLORS.content.placeholder,height:24,width:24})})),t.jsx(i.TitleRegular,Object.assign({style:{marginTop:8,color:s.COLORS.content.primary}},{children:x?"Loading...":c||"No results found"})),!!a&&!x&&t.jsx(i.BodyCaption,Object.assign({style:{marginTop:4,color:s.COLORS.content.secondary,textAlign:"center",maxWidth:184}},{children:a})),!!(null==y?void 0:y.actionButton)&&t.jsx("div",{children:t.jsx(o.Button,Object.assign({},null==y?void 0:y.actionButton))})]}))};
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import { ButtonProps } from "../../button/model";
2
3
  import { Placement } from "../../tooltips";
3
4
  import { OpenDropdownProps } from '../type';
4
5
  export declare const DropdownPopover: React.ForwardRefExoticComponent<OpenDropdownProps & {
@@ -12,6 +13,11 @@ export declare const DropdownPopover: React.ForwardRefExoticComponent<OpenDropdo
12
13
  showTooltipArrow?: boolean | undefined;
13
14
  allowEvents?: boolean | undefined;
14
15
  'data-test'?: string | undefined;
16
+ zeroState?: {
17
+ actionButton?: ButtonProps | undefined;
18
+ title: string;
19
+ subTitle?: string | undefined;
20
+ } | undefined;
15
21
  } & React.RefAttributes<{
16
22
  openDropdown: boolean;
17
23
  }>>;
@@ -1 +1 @@
1
- import{__rest as o}from"../../../_virtual/_tslib.js";import{jsx as e,Fragment as t,jsxs as l}from"react/jsx-runtime";import n,{useState as r,useRef as i,useImperativeHandle as s,useEffect as a}from"react";import{usePopper as d}from"react-popper";import{DropShadow as p}from"../../dropShadow/DropShadow.js";import{Tooltip as c}from"../../tooltips/Tooltip.js";import{OverLapAbs as v,OpenDropdownContainer as m}from"../Common.styled.js";import{OpenedDropdown as u}from"../OpenedDropdown/components/OpennedDropdown.js";const w=n.forwardRef(((n,w)=>{var{children:b,onDropdownVisbilityChange:h,version:f="1.0",tooltipContent:j,tooltipDirection:g,showTooltipArrow:D}=n,O=o(n,["children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow"]);const y=w,[C,S]=r(!1),[E,x]=r(null),[A,R]=r(null),T=i(null),{styles:z,attributes:M}=d(E,A,{placement:O.placement,strategy:O.strategy}),V=o=>{var e,t;"2.0"===f&&O.isMultiSelect&&o&&(null===(e=O.onSelect)||void 0===e||e.call(O,[...o])),S(!1),null===(t=null==O?void 0:O.onClose)||void 0===t||t.call(O)};s(y,(()=>({openDropdown:C})),[]),a((()=>{(null==y?void 0:y.current)&&(y.current.openDropdown=C)}),[C]),a((()=>{null==h||h(C)}),[C]);const _=()=>l(t,{children:[l("div",Object.assign({style:{position:"relative"},ref:x},{children:[e(v,Object.assign({ref:T,allowEvents:O.allowEvents,disabled:O.disabled,onClick:o=>{var e;null===(e=O.onDropdownOpen)||void 0===e||e.call(O),C?(S(!1),o.preventDefault()):O.disabled||S(!0)}},{children:O.allowEvents?b:null})),O.allowEvents?null:b]})),C&&e(m,Object.assign({ref:R,style:Object.assign(Object.assign({},z.popper),{zIndex:3})},M.popper,{"data-test":O["data-test"]},{children:e(p,Object.assign({level:"z2",position:"down",style:{borderRadius:8}},{children:e(u,Object.assign({},O,{onSelect:o=>{var e;"2.0"===f&&O.isMultiSelect||(null===(e=O.onSelect)||void 0===e||e.call(O,o),S(!1))},onClose:V,version:f,headerRef:T}))}))}))]});return e(t,{children:C||void 0===j?_():e(c,Object.assign({body:j,placement:g,hideArrow:!D},{children:e("div",Object.assign({"data-test":O["data-test"]},{children:_()}))}))})}));w.displayName="DropdownPopover";export{w as DropdownPopover};
1
+ import{__rest as o}from"../../../_virtual/_tslib.js";import{jsx as e,Fragment as t,jsxs as l}from"react/jsx-runtime";import n,{useState as r,useRef as i,useImperativeHandle as s,useEffect as a}from"react";import{usePopper as d}from"react-popper";import{DropShadow as p}from"../../dropShadow/DropShadow.js";import{Tooltip as c}from"../../tooltips/Tooltip.js";import{OverLapAbs as v,OpenDropdownContainer as m}from"../Common.styled.js";import{OpenedDropdown as u}from"../OpenedDropdown/components/OpennedDropdown.js";const w=n.forwardRef(((n,w)=>{var{children:b,onDropdownVisbilityChange:h,version:f="1.0",tooltipContent:j,tooltipDirection:g,showTooltipArrow:D}=n,O=o(n,["children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow"]);const y=w,[S,C]=r(!1),[z,E]=r(null),[x,A]=r(null),R=i(null),{styles:T,attributes:M}=d(z,x,{placement:O.placement,strategy:O.strategy}),V=o=>{var e,t;"2.0"===f&&O.isMultiSelect&&o&&(null===(e=O.onSelect)||void 0===e||e.call(O,[...o])),C(!1),null===(t=null==O?void 0:O.onClose)||void 0===t||t.call(O)};s(y,(()=>({openDropdown:S})),[]),a((()=>{(null==y?void 0:y.current)&&(y.current.openDropdown=S)}),[S]),a((()=>{null==h||h(S)}),[S]);const _=()=>l(t,{children:[l("div",Object.assign({style:{position:"relative"},ref:E},{children:[e(v,Object.assign({ref:R,allowEvents:O.allowEvents,disabled:O.disabled,onClick:o=>{var e;null===(e=O.onDropdownOpen)||void 0===e||e.call(O),S?(C(!1),o.preventDefault()):O.disabled||C(!0)}},{children:O.allowEvents?b:null})),O.allowEvents?null:b]})),S&&e(m,Object.assign({ref:A,style:Object.assign(Object.assign({},T.popper),{zIndex:3})},M.popper,{"data-test":O["data-test"]},{children:e(p,Object.assign({level:"z2",position:"down",style:{borderRadius:8}},{children:e(u,Object.assign({},O,{onSelect:o=>{var e;"2.0"===f&&O.isMultiSelect||(null===(e=O.onSelect)||void 0===e||e.call(O,o),C(!1))},onClose:V,version:f,headerRef:R,zeroState:null==O?void 0:O.zeroState}))}))}))]});return e(t,{children:S||void 0===j?_():e(c,Object.assign({body:j,placement:g,hideArrow:!D},{children:e("div",Object.assign({"data-test":O["data-test"]},{children:_()}))}))})}));w.displayName="DropdownPopover";export{w as DropdownPopover};
@@ -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 r}from"../../../zeroState/ZeroState.js";import{useOutside as l}from"../../../../hooks/useOutside.js";import{useDropdown as s}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 g=304,b=290,w=w=>{let{options:j,isSearchable:v,isMultiSelect:y,width:O,allowFreeForm:x,height:C,onClose:D,onSelect:M,onSearch:L,version:k,skipSorting:A,headerRef:F,hideSelectAll:I,primaryButtonText:B,onInfiniteScroll:H,onMultiSelectClear:T,onDropdownItemClick:R,buttonOptions:Z,isSearchLoading:q,disableSearchOptions:z,disableSearchedOptionExcept:E,useDefaultCursor:K,containerStyle:N={}}=w;const{dropdownOptions:P,search:W,searchedString:G,searchedOptions:J,onApplyHandler:Q,selectAllHandler:U,onMultiSelectClear:V,onFreeFormSelect:X,onMultiSelectApply:Y,latestDropdownOptionsRef:$,getSelectedOptions:_}=s(k,j,M,A,y,L,z,E),[ee,te]=o(null!=O?O:b),[oe,ne]=o(null),ie=n(null),re=n([]);l(ie,(()=>{if(ne(null),y&&"2.0"===k){const e=_($.current);null==D||D(e)}else null==D||D(P)}),[F,re]);const le=null!=C?C:g,se="number"==typeof le?v&&y?le-96:v&&!y||!v&&y?le-48:le:le;i((()=>{const e=null!=O?O:b;if(null===oe)te(e);else if("number"==typeof e)te(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));te(t)}}),[oe]);const ce=[],ae=(G&&L?J:P).map((e=>{var t,o;if(G&&!L){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(G.toLowerCase()))&&(ce.push(!G||e.label===G),!0)})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(G.toLowerCase()))||(null===(o=e.searchKey)||void 0===o?void 0:o.toLowerCase().includes(G.toLowerCase()))?(ce.push(!G||e.label===G),e):null}return e})).filter((e=>null!==e)),ue=!!v&&G&&0===ae.length;return e(h,Object.assign({version:k,ref:ie,style:Object.assign({width:ee},N)},{children:[e("div",Object.assign({style:{width:oe?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!v&&t(f,{onSearch:W,version:k}),ae.length||G?e(m,Object.assign({minHeight:le,maxHeight:se},{children:[!!y&&!ue&&!I&&t(p,{version:k,options:G&&L?J:P,onSelect:U}),!x&&ue&&t(S,{isLoading:q,height:se,searchedString:G}),x&&(ue||!!ce.length&&ce.every((e=>!1===e)))&&t(a,{version:k,isMultiSelect:y,onSelect:X,searchedString:G}),t(u,{onInfiniteScroll:H,onDropdownItemClick:R,version:k,onSelect:Q,showDescription:function(e,t){ne(e&&t?{title:e,description:t}:null)},isMultiSelect:y,options:ae,useDefaultCursor:K,ref:re})]})):t("div",Object.assign({style:{height:le,display:"flex"}},{children:t(r,{title:"No results found",subTitle:"Please try again later or contact us at support@bik.ai if you require further assistance."})})),!!y&&!(!ae.length&&!G)&&"2.0"!==k&&t(d,{onClear:()=>{V(),null==T||T()},onApply:Y,list:G&&L?J:P,buttonText:B,buttonOptions:Z})]})),!!oe&&t(c,{title:oe.title,description:oe.description,version:k})]}))};export{w as OpenedDropdown};
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 l}from"../../../zeroState/ZeroState.js";import{useOutside as r}from"../../../../hooks/useOutside.js";import{useDropdown as s}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 g=304,b=290,v=v=>{let{options:w,isSearchable:j,isMultiSelect:y,width:O,allowFreeForm:x,height:C,onClose:D,onSelect:M,onSearch:L,version:k,skipSorting:A,headerRef:B,hideSelectAll:F,primaryButtonText:I,onInfiniteScroll:H,onMultiSelectClear:T,onDropdownItemClick:z,buttonOptions:R,isSearchLoading:Z,disableSearchOptions:q,disableSearchedOptionExcept:E,useDefaultCursor:K,containerStyle:N={},zeroState:P}=v;const{dropdownOptions:W,search:G,searchedString:J,searchedOptions:Q,onApplyHandler:U,selectAllHandler:V,onMultiSelectClear:X,onFreeFormSelect:Y,onMultiSelectApply:$,latestDropdownOptionsRef:_,getSelectedOptions:ee}=s(k,w,M,A,y,L,q,E),[te,oe]=o(null!=O?O:b),[ne,ie]=o(null),le=n(null),re=n([]);r(le,(()=>{if(ie(null),y&&"2.0"===k){const e=ee(_.current);null==D||D(e)}else null==D||D(W)}),[B,re]);const se=null!=C?C:g,ce="number"==typeof se?j&&y?se-96:j&&!y||!j&&y?se-48:se:se;i((()=>{const e=null!=O?O:b;if(null===ne)oe(e);else if("number"==typeof e)oe(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));oe(t)}}),[ne]);const ae=[],ue=(J&&L?Q:W).map((e=>{var t,o;if(J&&!L){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(J.toLowerCase()))&&(ae.push(!J||e.label===J),!0)})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(J.toLowerCase()))||(null===(o=e.searchKey)||void 0===o?void 0:o.toLowerCase().includes(J.toLowerCase()))?(ae.push(!J||e.label===J),e):null}return e})).filter((e=>null!==e)),pe=!!j&&J&&0===ue.length;return e(h,Object.assign({version:k,ref:le,style:Object.assign({width:te},N)},{children:[e("div",Object.assign({style:{width:ne?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!j&&t(f,{onSearch:G,version:k}),ue.length||J?e(m,Object.assign({minHeight:se,maxHeight:ce},{children:[!!y&&!pe&&!F&&t(p,{version:k,options:J&&L?Q:W,onSelect:V}),!x&&pe&&t(S,{isLoading:Z,height:ce,searchedString:J}),x&&(pe||!!ae.length&&ae.every((e=>!1===e)))&&t(a,{version:k,isMultiSelect:y,onSelect:Y,searchedString:J}),t(u,{onInfiniteScroll:H,onDropdownItemClick:z,version:k,onSelect:U,showDescription:function(e,t){ie(e&&t?{title:e,description:t}:null)},isMultiSelect:y,options:ue,useDefaultCursor:K,ref:re})]})):t("div",Object.assign({style:{height:se,display:"flex"}},{children:t(l,{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.",actionButton:null==P?void 0:P.actionButton})})),!!y&&!(!ue.length&&!J)&&"2.0"!==k&&t(d,{onClear:()=>{X(),null==T||T()},onApply:$,list:J&&L?Q:W,buttonText:I,buttonOptions:R})]})),!!ne&&t(c,{title:ne.title,description:ne.description,version:k})]}))};export{v as OpenedDropdown};
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import { Placement, PositioningStrategy } from '@popperjs/core';
3
- import { Type } from '../button/model';
3
+ import { ButtonProps, Type } from '../button/model';
4
4
  export interface OpenDropdownProps {
5
5
  defaultOptions?: DropdownOption[];
6
6
  options: DropdownOption[];
@@ -30,6 +30,11 @@ export interface OpenDropdownProps {
30
30
  useDefaultCursor?: boolean;
31
31
  'data-test'?: string;
32
32
  containerStyle?: React.CSSProperties;
33
+ zeroState?: {
34
+ actionButton?: ButtonProps;
35
+ title: string;
36
+ subTitle?: string;
37
+ };
33
38
  }
34
39
  export type GroupedOption = {
35
40
  label?: string;
@@ -1,8 +1,10 @@
1
1
  import React from 'react';
2
+ import { ButtonProps } from '../button/model';
2
3
  export declare const ZeroState: React.FC<{
3
4
  isLoading?: boolean;
4
5
  title: string;
5
6
  subTitle?: string;
6
7
  IconHolderStyle?: React.CSSProperties;
7
8
  style?: React.CSSProperties /** now this component is extendable through styled-component */;
9
+ actionButton?: ButtonProps;
8
10
  }>;
@@ -1,12 +1,12 @@
1
- import{jsxs as e,jsx as t}from"react/jsx-runtime";import n from"styled-components";import{Spinner as r}from"../spinner/Spinner.js";import{TitleRegular as o,BodyCaption as i}from"../TypographyStyle.js";import{COLORS as s}from"../../constants/Theme.js";import l from"../../assets/icons/alert.svg.js";const c=n.div`
2
- background: ${s.surface.standard};
1
+ import{__rest as t}from"../../_virtual/_tslib.js";import{jsxs as e,jsx as n}from"react/jsx-runtime";import o from"styled-components";import{Spinner as i}from"../spinner/Spinner.js";import{TitleRegular as r,BodyCaption as s}from"../TypographyStyle.js";import{COLORS as l}from"../../constants/Theme.js";import c from"../../assets/icons/alert.svg.js";import{Button as a}from"../button/Button.js";const d=o.div`
2
+ background: ${l.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
- `,a=n.div`
9
- background: ${s.background.base};
8
+ `,m=o.div`
9
+ background: ${l.background.base};
10
10
  width: 48px;
11
11
  height: 48px;
12
12
  display: flex;
@@ -14,4 +14,4 @@ import{jsxs as e,jsx as t}from"react/jsx-runtime";import n from"styled-component
14
14
  align-items: center;
15
15
  justify-content: center;
16
16
  border-radius: 24px;
17
- `,d=n=>{let{subTitle:d,title:m,IconHolderStyle:p,style:g,isLoading:u}=n;return e(c,Object.assign({style:null!=g?g:{}},{children:[u?t(r,{size:"large",color:s.stroke.brand}):t(a,Object.assign({style:null!=p?p:{}},{children:t(l,{color:s.content.placeholder,height:24,width:24})})),t(o,Object.assign({style:{marginTop:8,color:s.content.primary}},{children:u?"Loading...":m||"No results found"})),!!d&&!u&&t(i,Object.assign({style:{marginTop:4,color:s.content.secondary,textAlign:"center",maxWidth:184}},{children:d}))]}))};export{d as ZeroState};
17
+ `,u=o=>{var{subTitle:u,title:p,IconHolderStyle:g,style:y,isLoading:f}=o,b=t(o,["subTitle","title","IconHolderStyle","style","isLoading"]);return e(d,Object.assign({style:null!=y?y:{}},{children:[f?n(i,{size:"large",color:l.stroke.brand}):n(m,Object.assign({style:null!=g?g:{}},{children:n(c,{color:l.content.placeholder,height:24,width:24})})),n(r,Object.assign({style:{marginTop:8,color:l.content.primary}},{children:f?"Loading...":p||"No results found"})),!!u&&!f&&n(s,Object.assign({style:{marginTop:4,color:l.content.secondary,textAlign:"center",maxWidth:184}},{children:u})),!!(null==b?void 0:b.actionButton)&&n("div",{children:n(a,Object.assign({},null==b?void 0:b.actionButton))})]}))};export{u as ZeroState};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bikdotai/bik-component-library",
3
- "version": "0.0.644",
3
+ "version": "0.0.645",
4
4
  "description": "Bik Component Library",
5
5
  "repository": {
6
6
  "type": "git",