@bikdotai/bik-component-library 0.0.799-beta.21 → 0.0.799-beta.4

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 +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");const r=n.forwardRef(((r,o)=>{let{options:l,isMultiSelect:i,showDescription:u,onSelect:c,version:a,onInfiniteScroll:d,onDropdownItemClick:p,useDefaultCursor:f,focusedIndex:b=-1,isDraggable:g=!1,onOptionsReorder:D,showCheckboxForCustomElement:h=!1}=r;const m=n.useRef(null),j=n.useRef(null),[v,x]=n.useState(null),[C,I]=n.useState(null),w=n.useCallback((()=>{m.current&&m.current.disconnect(),m.current=new IntersectionObserver((e=>{e[0].isIntersecting&&(null==d||d())})),j.current&&m.current.observe(j.current)}),[d]);n.useEffect((()=>(w(),()=>{m.current&&m.current.disconnect()})),[w,l]);const k=n.useCallback((e=>n=>{g&&(x(e),n.dataTransfer.effectAllowed="move")}),[g]),S=n.useCallback((e=>n=>{g&&(n.preventDefault(),n.dataTransfer.dropEffect="move",I(e))}),[g]),M=n.useCallback((e=>n=>{if(g&&null!==v){if(n.preventDefault(),v!==e){const n=[...l],[t]=n.splice(v,1);n.splice(e,0,t),null==D||D(n)}x(null),I(null)}}),[g,v,l,D]),E=n.useCallback((()=>{x(null),I(null)}),[]),O=new Map;let y=-1;return l.forEach((e=>{if(e.options)e.options.forEach((e=>{e.disabled||(y++,O.set(e,y))}));else{const n=e;n.disabled||(y++,O.set(n,y))}})),e.jsx(e.Fragment,{children:l.map(((n,r)=>{const d=r===l.length-1;if(n.options){const l=n;return e.jsxs("div",Object.assign({style:{marginTop:"2.0"===a?2:0}},{children:[e.jsxs(s.StyledGroupedLabel,Object.assign({version:a},{children:[l.leadingIcon?e.jsx("span",Object.assign({style:{marginRight:8}},{children:l.leadingIcon})):null,l.label]})),l.options.map(((n,s)=>{const d=O.get(n),g=d===b&&!n.disabled;return e.jsx(t.MenuItem,{version:a,last:s===l.options.length-1,onSelect:c,showDescription:u,onDropdownItemClick:p,isMultiSelect:i,option:n,useDefaultCursor:f,isFocused:g,dataIndex:d,isDraggable:!1,showCheckboxForCustomElement:h,ref:e=>{o&&"object"==typeof o&&o.current&&e&&e&&e&&e&&(o.current[r]=e)}},`${r}-${s}`)})),d?e.jsx("span",{ref:j}):null]}),r)}const D=n,m=O.get(D),v=m===b&&!D.disabled;return e.jsxs("div",{children:[D.hasDivider&&e.jsx(s.Divider,{}),e.jsx(t.MenuItem,{version:a,last:d,onSelect:c,showDescription:u,onDropdownItemClick:p,isMultiSelect:i,option:D,useDefaultCursor:f,isFocused:v,dataIndex:m,isDraggable:g,onDragStart:k(r),onDragOver:S(r),onDrop:M(r),onDragEnd:E,isDraggedOver:C===r,showCheckboxForCustomElement:h,ref:e=>{o&&"object"==typeof o&&o.current&&e&&(o.current[r]=e)}},D.value),d?e.jsx("span",{ref:j}):null]},r)}))})}));exports.MenuList=r;
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");const r=n.forwardRef(((r,o)=>{let{options:l,isMultiSelect:i,showDescription:u,onSelect:c,version:a,onInfiniteScroll:d,onDropdownItemClick:p,useDefaultCursor:f,focusedIndex:b=-1,isDraggable:g=!1,onOptionsReorder:m,showCheckboxForCustomElement:h=!1}=r;const D=n.useRef(null),j=n.useRef(null),[x,v]=n.useState(null),[C,I]=n.useState(null),w=n.useCallback((()=>{D.current&&D.current.disconnect(),D.current=new IntersectionObserver((e=>{e[0].isIntersecting&&(null==d||d())})),j.current&&D.current.observe(j.current)}),[d]);n.useEffect((()=>(w(),()=>{D.current&&D.current.disconnect()})),[w,l]);const k=n.useCallback((e=>n=>{g&&(v(e),n.dataTransfer.effectAllowed="move")}),[g]),S=n.useCallback((e=>n=>{g&&(n.preventDefault(),n.dataTransfer.dropEffect="move",I(e))}),[g]),M=n.useCallback((e=>n=>{if(g&&null!==x){if(n.preventDefault(),x!==e){const n=[...l],[t]=n.splice(x,1);n.splice(e,0,t),null==m||m(n)}v(null),I(null)}}),[g,x,l,m]),E=n.useCallback((()=>{v(null),I(null)}),[]),O=new Map;let y=-1;return l.forEach((e=>{if(e.options)e.options.forEach((e=>{e.disabled||(y++,O.set(e,y))}));else{const n=e;n.disabled||(y++,O.set(n,y))}})),e.jsx(e.Fragment,{children:l.map(((n,r)=>{const d=r===l.length-1;if(n.options){const l=n;return e.jsxs("div",Object.assign({style:{marginTop:"2.0"===a?2:0}},{children:[e.jsxs(s.StyledGroupedLabel,Object.assign({version:a},{children:[l.leadingIcon?e.jsx("span",Object.assign({style:{marginRight:8}},{children:l.leadingIcon})):null,l.label]})),l.options.map(((n,s)=>{const d=O.get(n),g=d===b&&!n.disabled;return e.jsx(t.MenuItem,{version:a,last:s===l.options.length-1,onSelect:c,showDescription:u,onDropdownItemClick:p,isMultiSelect:i,option:n,useDefaultCursor:f,isFocused:g,dataIndex:d,isDraggable:!1,showCheckboxForCustomElement:h,ref:e=>{o&&"object"==typeof o&&o.current&&e&&e&&e&&e&&(o.current[r]=e)}},`${r}-${s}`)})),d?e.jsx("span",{ref:j}):null]}),r)}const m=n,D=O.get(m),x=D===b&&!m.disabled;return e.jsxs("div",{children:[e.jsx(t.MenuItem,{version:a,last:d,onSelect:c,showDescription:u,onDropdownItemClick:p,isMultiSelect:i,option:m,useDefaultCursor:f,isFocused:x,dataIndex:D,isDraggable:g,onDragStart:k(r),onDragOver:S(r),onDrop:M(r),onDragEnd:E,isDraggedOver:C===r,showCheckboxForCustomElement:h,ref:e=>{o&&"object"==typeof o&&o.current&&e&&(o.current[r]=e)}},m.value),d?e.jsx("span",{ref:j}):null]},r)}))})}));exports.MenuList=r;
@@ -1,4 +1,3 @@
1
- export declare const Divider: import("styled-components").StyledComponent<"div", any, {}, never>;
2
1
  export declare const StyledGroupedLabel: import("styled-components").StyledComponent<"div", any, {
3
2
  numberOfLines?: number | undefined;
4
3
  color?: string | undefined;
@@ -1,10 +1,6 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),r=require("../../../../TypographyStyle.js"),o=require("../../../../../constants/Theme.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=t(e);const a=n.default.div`
2
- height: 1px;
3
- background-color: ${o.COLORS.stroke.primary};
4
- margin: 4px 8px;
5
- `,s=n.default(r.BodyCaption)`
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),o=require("../../../../TypographyStyle.js"),r=require("../../../../../constants/Theme.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const n=t(e).default(o.BodyCaption)`
6
2
  padding: 8px ${e=>"2.0"===e.version?12:16}px;
7
- color: ${e=>"2.0"===e.version?o.COLORS.content.placeholder:o.COLORS.content.secondary};
8
- background-color: ${e=>"2.0"===e.version?o.COLORS.surface.standard:o.COLORS.background.base};
3
+ color: ${e=>"2.0"===e.version?r.COLORS.content.placeholder:r.COLORS.content.secondary};
4
+ background-color: ${e=>"2.0"===e.version?r.COLORS.surface.standard:r.COLORS.background.base};
9
5
  font-size: ${e=>"2.0"===e.version?10:12}px;
10
- `;exports.Divider=a,exports.StyledGroupedLabel=s;
6
+ `;exports.StyledGroupedLabel=n;
@@ -80,7 +80,6 @@ export type SingleOption = {
80
80
  children?: SingleOption[];
81
81
  parent?: SingleOption;
82
82
  'data-test'?: string;
83
- hasDivider?: boolean;
84
83
  };
85
84
  export type MultiSelectOption = SingleOption;
86
85
  export type DropdownOption = MultiSelectOption | SingleOption | GroupedOption;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var o=require("../../_virtual/_tslib.js"),e=require("react/jsx-runtime"),n=require("../dropdown/DropdownPopover/index.js");require("../dropdown/Dropdown.js"),require("../dropdown/ChipDropdown.js"),require("react"),require("../zeroState/ZeroState.js"),require("../../constants/Theme.js"),require("lodash/debounce"),require("../TypographyStyle.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");var r=require("../button/Button.js");require("../dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js"),require("../dropdown/OpenedDropdown/components/OpennedDropdown.styled.js");var t=require("../icon-button/IconButton.js");require("../input/Input.js"),require("../dropdown/MenuItem/MenuItem.js");var i=require("../button/themes.js"),s=require("../spinner/Spinner.js"),d=require("./DropdownButton.style.js");exports.DropdownButton=p=>{var u,l,a,c,b,j,x,v,y;const m=!!p.iconButtonProps,w=m?null===(u=p.iconButtonProps)||void 0===u?void 0:u.disabled:null===(l=p.buttonProps)||void 0===l?void 0:l.disabled;if(m){const{iconButtonProps:o}=p;return e.jsxs(d.DropdownButtonStyle,Object.assign({type:void 0,disabled:w,isIconButton:!0,iconButtonType:null!==(a=null==o?void 0:o.iconButtonType)&&void 0!==a?a:"primary",iconButtonSize:null!==(c=null==o?void 0:o.size)&&void 0!==c?c:"default"},{children:[e.jsx(t.IconButton,Object.assign({},o,{style:{borderRadius:"0px",borderTopLeftRadius:"4px",borderBottomLeftRadius:"4px"}})),e.jsx("div",{className:"dd-button-divider"}),e.jsx("div",Object.assign({style:{display:"flex",alignItems:"center"}},{children:e.jsx(n.DropdownPopover,Object.assign({},p.dropdownProps,{isChildLoading:!1},{children:e.jsx(t.IconButton,{Icon:p.iconProps,iconButtonType:null!==(b=null==o?void 0:o.iconButtonType)&&void 0!==b?b:"primary",size:null==o?void 0:o.size,disabled:w,style:{display:"flex",borderRadius:"0px",borderTopRightRadius:"4px",borderBottomRightRadius:"4px"}})}))}))]}))}const g=p.buttonProps,B=o.__rest(g,["onClick","LeadingIcon","LeadingIconStyles","IconComponent","TrailingIcon"]);return e.jsxs(d.DropdownButtonStyle,Object.assign({type:p.buttonProps.buttonType,disabled:p.buttonProps.disabled,size:p.buttonProps.size},{children:[(null===(j=p.buttonProps)||void 0===j?void 0:j.isLoading)&&e.jsx(d.LoaderContainer,Object.assign({type:p.buttonProps.buttonType},{children:e.jsx(s.Spinner,{className:"spinner",size:"small",color:i.SpinnerColorMap(p.buttonProps.buttonType||"primary",p.buttonProps.inverse)})})),e.jsx(r.Button,Object.assign({},p.buttonProps,{isLoading:!1,style:Object.assign({borderRadius:"0px",borderTopLeftRadius:"4px",borderBottomLeftRadius:"4px",borderRight:"0px"},"xs"===(null===(x=p.buttonProps)||void 0===x?void 0:x.size)?{border:"none",borderRadius:"0px"}:{})})),e.jsx("div",{className:"dd-button-divider"}),e.jsx(n.DropdownPopover,Object.assign({},p.dropdownProps,{isChildLoading:null===(v=p.buttonProps)||void 0===v?void 0:v.isLoading},{children:e.jsx(r.Button,Object.assign({},B,{isLoading:!1,buttonText:"",TrailingIcon:p.iconProps,style:Object.assign({borderRadius:"0px",borderTopRightRadius:"4px",borderBottomRightRadius:"4px"},"xs"===(null===(y=p.buttonProps)||void 0===y?void 0:y.size)?{border:"none",borderRadius:"0px"}:{})}))}))]}))};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var o=require("../../_virtual/_tslib.js"),e=require("react/jsx-runtime"),r=require("../dropdown/DropdownPopover/index.js");require("../dropdown/Dropdown.js"),require("../dropdown/ChipDropdown.js"),require("react"),require("../zeroState/ZeroState.js"),require("../../constants/Theme.js"),require("lodash/debounce"),require("../TypographyStyle.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");var n=require("../button/Button.js");require("../dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js"),require("../dropdown/OpenedDropdown/components/OpennedDropdown.styled.js");var t=require("../icon-button/IconButton.js");require("../input/Input.js"),require("../dropdown/MenuItem/MenuItem.js");var s=require("../button/themes.js"),i=require("../spinner/Spinner.js"),d=require("./DropdownButton.style.js");exports.DropdownButton=p=>{var u,l,a,c,b,j;const x=!!p.iconButtonProps,m=x?null===(u=p.iconButtonProps)||void 0===u?void 0:u.disabled:null===(l=p.buttonProps)||void 0===l?void 0:l.disabled;if(x){const{iconButtonProps:o}=p;return e.jsxs(d.DropdownButtonStyle,Object.assign({type:void 0,disabled:m,isIconButton:!0,iconButtonType:null!==(a=null==o?void 0:o.iconButtonType)&&void 0!==a?a:"primary"},{children:[e.jsx(t.IconButton,Object.assign({},o,{style:{borderRadius:"0px",borderTopLeftRadius:"4px",borderBottomLeftRadius:"4px"}})),e.jsx("div",{className:"dd-button-divider"}),e.jsx(r.DropdownPopover,Object.assign({},p.dropdownProps,{isChildLoading:!1},{children:e.jsx(t.IconButton,{Icon:p.iconProps,iconButtonType:null!==(c=null==o?void 0:o.iconButtonType)&&void 0!==c?c:"primary",disabled:m,style:{borderRadius:"0px",borderTopRightRadius:"4px",borderBottomRightRadius:"4px"}})}))]}))}const y=p.buttonProps,w=o.__rest(y,["onClick"]);return e.jsxs(d.DropdownButtonStyle,Object.assign({type:p.buttonProps.buttonType,disabled:p.buttonProps.disabled},{children:[(null===(b=p.buttonProps)||void 0===b?void 0:b.isLoading)&&e.jsx(d.LoaderContainer,Object.assign({type:p.buttonProps.buttonType},{children:e.jsx(i.Spinner,{className:"spinner",size:"small",color:s.SpinnerColorMap(p.buttonProps.buttonType||"primary",p.buttonProps.inverse)})})),e.jsx(n.Button,Object.assign({},p.buttonProps,{isLoading:!1,style:{borderRadius:"0px",borderTopLeftRadius:"4px",borderBottomLeftRadius:"4px",borderRight:"0px"}})),e.jsx("div",{className:"dd-button-divider"}),e.jsx(r.DropdownPopover,Object.assign({},p.dropdownProps,{isChildLoading:null===(j=p.buttonProps)||void 0===j?void 0:j.isLoading},{children:e.jsx(n.Button,Object.assign({},w,{isLoading:!1,buttonText:"",TrailingIcon:p.iconProps,style:{borderRadius:"0px",borderTopRightRadius:"4px",borderBottomRightRadius:"4px"}}))}))]}))};
@@ -1,12 +1,10 @@
1
- import { Size, Type } from '../button/model';
1
+ import { Type } from '../button/model';
2
2
  import { IconButtonType } from '../icon-button/model';
3
3
  export declare const DropdownButtonStyle: import("styled-components").StyledComponent<"div", any, {
4
4
  type: Type | undefined;
5
5
  disabled: boolean | undefined;
6
6
  isIconButton?: boolean | undefined;
7
7
  iconButtonType?: IconButtonType | undefined;
8
- iconButtonSize?: "default" | "xs" | undefined;
9
- size?: Size | undefined;
10
8
  }, never>;
11
9
  export declare const LoaderContainer: import("styled-components").StyledComponent<"div", any, {
12
10
  type: Type | undefined;
@@ -4,13 +4,10 @@
4
4
  width: max-content;
5
5
  position: relative;
6
6
  align-items: stretch;
7
- ${t=>{var r,n,i;return t.isIconButton&&`\n\t\tborder-radius: 4px;\n\t\tbackground: ${n=null!==(r=t.iconButtonType)&&void 0!==r?r:"primary",i=t.disabled,i?e.COLORS.background.inactive:"primary"===n?e.COLORS.background.inverseLight:"transparent"};\n\t\theight: ${"xs"===t.iconButtonSize?"24px":"32px"};\n\t\talign-items: center;\n\t`}}
8
- ${t=>("xs"===t.size||"xs"===t.iconButtonSize)&&`\n\t\theight: 24px;\n\t\talign-items: center;\n\t\tborder-radius: 4px;\n\t\t${!t.isIconButton&&t.type?`border: 1px solid ${t.disabled||"secondaryGray"===t.type?e.COLORS.stroke.primary:"secondary"===t.type?e.COLORS.stroke.brand:"transparent"};`:""}\n\t`}
7
+ ${t=>{var r,n,i;return t.isIconButton&&`\n\t\tborder-radius: 4px;\n\t\tbackground: ${n=null!==(r=t.iconButtonType)&&void 0!==r?r:"primary",i=t.disabled,i?e.COLORS.background.inactive:"primary"===n?e.COLORS.background.inverseLight:"transparent"};\n\t\toverflow: hidden;\n\t`}}
9
8
  .dd-button-divider {
10
- width: ${t=>["primary","destructive"].includes(t.type)||t.isIconButton||"xs"===t.size?"1px":"0px"};
11
- height: ${t=>t.isIconButton||"xs"===t.size?"12px":"auto"};
12
- flex-shrink: 0;
13
- background-color: ${t=>{return t.isIconButton?"rgba(255, 255, 255, 0.3)":"xs"===t.size?e.COLORS.stroke.primary:(r=t.type,(null==t?void 0:t.disabled)?e.COLORS.content.inactive:"primary"===r?"#CDA2FC":e.COLORS.content.primaryInverse);var r}};
9
+ width: ${t=>["primary","destructive"].includes(t.type)||t.isIconButton?"1px":"0px"};
10
+ background-color: ${t=>{return t.isIconButton?"rgba(255, 255, 255, 0.3)":(r=t.type,(null==t?void 0:t.disabled)?e.COLORS.content.inactive:"primary"===r?"#CDA2FC":e.COLORS.content.primaryInverse);var r}};
14
11
  }
15
12
  `,o=n.default.div`
16
13
  position: absolute;
@@ -1 +1 @@
1
- import{jsx as e,Fragment as n,jsxs as t}from"react/jsx-runtime";import{forwardRef as r,useRef as o,useState as s,useCallback as l,useEffect as i}from"react";import{MenuItem as c}from"./MenuItem.js";import{StyledGroupedLabel as u,Divider as a}from"./MenuList.styled.js";const d=r(((r,d)=>{let{options:p,isMultiSelect:f,showDescription:m,onSelect:g,version:h,onInfiniteScroll:D,onDropdownItemClick:b,useDefaultCursor:v,focusedIndex:w=-1,isDraggable:C=!1,onOptionsReorder:I,showCheckboxForCustomElement:j=!1}=r;const x=o(null),S=o(null),[E,O]=s(null),[k,M]=s(null),y=l((()=>{x.current&&x.current.disconnect(),x.current=new IntersectionObserver((e=>{e[0].isIntersecting&&(null==D||D())})),S.current&&x.current.observe(S.current)}),[D]);i((()=>(y(),()=>{x.current&&x.current.disconnect()})),[y,p]);const F=l((e=>n=>{C&&(O(e),n.dataTransfer.effectAllowed="move")}),[C]),T=l((e=>n=>{C&&(n.preventDefault(),n.dataTransfer.dropEffect="move",M(e))}),[C]),R=l((e=>n=>{if(C&&null!==E){if(n.preventDefault(),E!==e){const n=[...p],[t]=n.splice(E,1);n.splice(e,0,t),null==I||I(n)}O(null),M(null)}}),[C,E,p,I]),$=l((()=>{O(null),M(null)}),[]),A=new Map;let L=-1;return p.forEach((e=>{if(e.options)e.options.forEach((e=>{e.disabled||(L++,A.set(e,L))}));else{const n=e;n.disabled||(L++,A.set(n,L))}})),e(n,{children:p.map(((n,r)=>{const o=r===p.length-1;if(n.options){const s=n;return t("div",Object.assign({style:{marginTop:"2.0"===h?2:0}},{children:[t(u,Object.assign({version:h},{children:[s.leadingIcon?e("span",Object.assign({style:{marginRight:8}},{children:s.leadingIcon})):null,s.label]})),s.options.map(((n,t)=>{const o=A.get(n),l=o===w&&!n.disabled;return e(c,{version:h,last:t===s.options.length-1,onSelect:g,showDescription:m,onDropdownItemClick:b,isMultiSelect:f,option:n,useDefaultCursor:v,isFocused:l,dataIndex:o,isDraggable:!1,showCheckboxForCustomElement:j,ref:e=>{d&&"object"==typeof d&&d.current&&e&&e&&e&&e&&(d.current[r]=e)}},`${r}-${t}`)})),o?e("span",{ref:S}):null]}),r)}const s=n,l=A.get(s),i=l===w&&!s.disabled;return t("div",{children:[s.hasDivider&&e(a,{}),e(c,{version:h,last:o,onSelect:g,showDescription:m,onDropdownItemClick:b,isMultiSelect:f,option:s,useDefaultCursor:v,isFocused:i,dataIndex:l,isDraggable:C,onDragStart:F(r),onDragOver:T(r),onDrop:R(r),onDragEnd:$,isDraggedOver:k===r,showCheckboxForCustomElement:j,ref:e=>{d&&"object"==typeof d&&d.current&&e&&(d.current[r]=e)}},s.value),o?e("span",{ref:S}):null]},r)}))})}));export{d as MenuList};
1
+ import{jsx as e,Fragment as n,jsxs as t}from"react/jsx-runtime";import{forwardRef as r,useRef as o,useState as s,useCallback as l,useEffect as i}from"react";import{MenuItem as c}from"./MenuItem.js";import{StyledGroupedLabel as u}from"./MenuList.styled.js";const a=r(((r,a)=>{let{options:d,isMultiSelect:p,showDescription:f,onSelect:m,version:g,onInfiniteScroll:h,onDropdownItemClick:D,useDefaultCursor:b,focusedIndex:v=-1,isDraggable:w=!1,onOptionsReorder:C,showCheckboxForCustomElement:I=!1}=r;const j=o(null),x=o(null),[S,E]=s(null),[O,k]=s(null),M=l((()=>{j.current&&j.current.disconnect(),j.current=new IntersectionObserver((e=>{e[0].isIntersecting&&(null==h||h())})),x.current&&j.current.observe(x.current)}),[h]);i((()=>(M(),()=>{j.current&&j.current.disconnect()})),[M,d]);const y=l((e=>n=>{w&&(E(e),n.dataTransfer.effectAllowed="move")}),[w]),F=l((e=>n=>{w&&(n.preventDefault(),n.dataTransfer.dropEffect="move",k(e))}),[w]),T=l((e=>n=>{if(w&&null!==S){if(n.preventDefault(),S!==e){const n=[...d],[t]=n.splice(S,1);n.splice(e,0,t),null==C||C(n)}E(null),k(null)}}),[w,S,d,C]),R=l((()=>{E(null),k(null)}),[]),$=new Map;let A=-1;return d.forEach((e=>{if(e.options)e.options.forEach((e=>{e.disabled||(A++,$.set(e,A))}));else{const n=e;n.disabled||(A++,$.set(n,A))}})),e(n,{children:d.map(((n,r)=>{const o=r===d.length-1;if(n.options){const s=n;return t("div",Object.assign({style:{marginTop:"2.0"===g?2:0}},{children:[t(u,Object.assign({version:g},{children:[s.leadingIcon?e("span",Object.assign({style:{marginRight:8}},{children:s.leadingIcon})):null,s.label]})),s.options.map(((n,t)=>{const o=$.get(n),l=o===v&&!n.disabled;return e(c,{version:g,last:t===s.options.length-1,onSelect:m,showDescription:f,onDropdownItemClick:D,isMultiSelect:p,option:n,useDefaultCursor:b,isFocused:l,dataIndex:o,isDraggable:!1,showCheckboxForCustomElement:I,ref:e=>{a&&"object"==typeof a&&a.current&&e&&e&&e&&e&&(a.current[r]=e)}},`${r}-${t}`)})),o?e("span",{ref:x}):null]}),r)}const s=n,l=$.get(s),i=l===v&&!s.disabled;return t("div",{children:[e(c,{version:g,last:o,onSelect:m,showDescription:f,onDropdownItemClick:D,isMultiSelect:p,option:s,useDefaultCursor:b,isFocused:i,dataIndex:l,isDraggable:w,onDragStart:y(r),onDragOver:F(r),onDrop:T(r),onDragEnd:R,isDraggedOver:O===r,showCheckboxForCustomElement:I,ref:e=>{a&&"object"==typeof a&&a.current&&e&&(a.current[r]=e)}},s.value),o?e("span",{ref:x}):null]},r)}))})}));export{a as MenuList};
@@ -1,4 +1,3 @@
1
- export declare const Divider: import("styled-components").StyledComponent<"div", any, {}, never>;
2
1
  export declare const StyledGroupedLabel: import("styled-components").StyledComponent<"div", any, {
3
2
  numberOfLines?: number | undefined;
4
3
  color?: string | undefined;
@@ -1,10 +1,6 @@
1
- import o from"styled-components";import{BodyCaption as r}from"../../../../TypographyStyle.js";import{COLORS as n}from"../../../../../constants/Theme.js";const e=o.div`
2
- height: 1px;
3
- background-color: ${n.stroke.primary};
4
- margin: 4px 8px;
5
- `,t=o(r)`
1
+ import o from"styled-components";import{BodyCaption as r}from"../../../../TypographyStyle.js";import{COLORS as n}from"../../../../../constants/Theme.js";const e=o(r)`
6
2
  padding: 8px ${o=>"2.0"===o.version?12:16}px;
7
3
  color: ${o=>"2.0"===o.version?n.content.placeholder:n.content.secondary};
8
4
  background-color: ${o=>"2.0"===o.version?n.surface.standard:n.background.base};
9
5
  font-size: ${o=>"2.0"===o.version?10:12}px;
10
- `;export{e as Divider,t as StyledGroupedLabel};
6
+ `;export{e as StyledGroupedLabel};
@@ -80,7 +80,6 @@ export type SingleOption = {
80
80
  children?: SingleOption[];
81
81
  parent?: SingleOption;
82
82
  'data-test'?: string;
83
- hasDivider?: boolean;
84
83
  };
85
84
  export type MultiSelectOption = SingleOption;
86
85
  export type DropdownOption = MultiSelectOption | SingleOption | GroupedOption;
@@ -1 +1 @@
1
- import{__rest as o}from"../../_virtual/_tslib.js";import{jsxs as t,jsx as n}from"react/jsx-runtime";import{DropdownPopover as i}from"../dropdown/DropdownPopover/index.js";import"../dropdown/Dropdown.js";import"../dropdown/ChipDropdown.js";import"react";import"../zeroState/ZeroState.js";import"../../constants/Theme.js";import"lodash/debounce";import"../TypographyStyle.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 as e}from"../button/Button.js";import"../dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js";import"../dropdown/OpenedDropdown/components/OpennedDropdown.styled.js";import{IconButton as r}from"../icon-button/IconButton.js";import"../input/Input.js";import"../dropdown/MenuItem/MenuItem.js";import{SpinnerColorMap as s}from"../button/themes.js";import{Spinner as d}from"../spinner/Spinner.js";import{DropdownButtonStyle as p,LoaderContainer as u}from"./DropdownButton.style.js";const l=l=>{var m,a,c,b,j,y,v,g,x;const w=!!l.iconButtonProps,P=w?null===(m=l.iconButtonProps)||void 0===m?void 0:m.disabled:null===(a=l.buttonProps)||void 0===a?void 0:a.disabled;if(w){const{iconButtonProps:o}=l;return t(p,Object.assign({type:void 0,disabled:P,isIconButton:!0,iconButtonType:null!==(c=null==o?void 0:o.iconButtonType)&&void 0!==c?c:"primary",iconButtonSize:null!==(b=null==o?void 0:o.size)&&void 0!==b?b:"default"},{children:[n(r,Object.assign({},o,{style:{borderRadius:"0px",borderTopLeftRadius:"4px",borderBottomLeftRadius:"4px"}})),n("div",{className:"dd-button-divider"}),n("div",Object.assign({style:{display:"flex",alignItems:"center"}},{children:n(i,Object.assign({},l.dropdownProps,{isChildLoading:!1},{children:n(r,{Icon:l.iconProps,iconButtonType:null!==(j=null==o?void 0:o.iconButtonType)&&void 0!==j?j:"primary",size:null==o?void 0:o.size,disabled:P,style:{display:"flex",borderRadius:"0px",borderTopRightRadius:"4px",borderBottomRightRadius:"4px"}})}))}))]}))}const h=l.buttonProps,B=o(h,["onClick","LeadingIcon","LeadingIconStyles","IconComponent","TrailingIcon"]);return t(p,Object.assign({type:l.buttonProps.buttonType,disabled:l.buttonProps.disabled,size:l.buttonProps.size},{children:[(null===(y=l.buttonProps)||void 0===y?void 0:y.isLoading)&&n(u,Object.assign({type:l.buttonProps.buttonType},{children:n(d,{className:"spinner",size:"small",color:s(l.buttonProps.buttonType||"primary",l.buttonProps.inverse)})})),n(e,Object.assign({},l.buttonProps,{isLoading:!1,style:Object.assign({borderRadius:"0px",borderTopLeftRadius:"4px",borderBottomLeftRadius:"4px",borderRight:"0px"},"xs"===(null===(v=l.buttonProps)||void 0===v?void 0:v.size)?{border:"none",borderRadius:"0px"}:{})})),n("div",{className:"dd-button-divider"}),n(i,Object.assign({},l.dropdownProps,{isChildLoading:null===(g=l.buttonProps)||void 0===g?void 0:g.isLoading},{children:n(e,Object.assign({},B,{isLoading:!1,buttonText:"",TrailingIcon:l.iconProps,style:Object.assign({borderRadius:"0px",borderTopRightRadius:"4px",borderBottomRightRadius:"4px"},"xs"===(null===(x=l.buttonProps)||void 0===x?void 0:x.size)?{border:"none",borderRadius:"0px"}:{})}))}))]}))};export{l as DropdownButton};
1
+ import{__rest as o}from"../../_virtual/_tslib.js";import{jsxs as t,jsx as n}from"react/jsx-runtime";import{DropdownPopover as r}from"../dropdown/DropdownPopover/index.js";import"../dropdown/Dropdown.js";import"../dropdown/ChipDropdown.js";import"react";import"../zeroState/ZeroState.js";import"../../constants/Theme.js";import"lodash/debounce";import"../TypographyStyle.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 as i}from"../button/Button.js";import"../dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js";import"../dropdown/OpenedDropdown/components/OpennedDropdown.styled.js";import{IconButton as e}from"../icon-button/IconButton.js";import"../input/Input.js";import"../dropdown/MenuItem/MenuItem.js";import{SpinnerColorMap as d}from"../button/themes.js";import{Spinner as s}from"../spinner/Spinner.js";import{DropdownButtonStyle as p,LoaderContainer as u}from"./DropdownButton.style.js";const m=m=>{var l,a,c,b,j,y;const w=!!m.iconButtonProps,g=w?null===(l=m.iconButtonProps)||void 0===l?void 0:l.disabled:null===(a=m.buttonProps)||void 0===a?void 0:a.disabled;if(w){const{iconButtonProps:o}=m;return t(p,Object.assign({type:void 0,disabled:g,isIconButton:!0,iconButtonType:null!==(c=null==o?void 0:o.iconButtonType)&&void 0!==c?c:"primary"},{children:[n(e,Object.assign({},o,{style:{borderRadius:"0px",borderTopLeftRadius:"4px",borderBottomLeftRadius:"4px"}})),n("div",{className:"dd-button-divider"}),n(r,Object.assign({},m.dropdownProps,{isChildLoading:!1},{children:n(e,{Icon:m.iconProps,iconButtonType:null!==(b=null==o?void 0:o.iconButtonType)&&void 0!==b?b:"primary",disabled:g,style:{borderRadius:"0px",borderTopRightRadius:"4px",borderBottomRightRadius:"4px"}})}))]}))}const v=m.buttonProps,h=o(v,["onClick"]);return t(p,Object.assign({type:m.buttonProps.buttonType,disabled:m.buttonProps.disabled},{children:[(null===(j=m.buttonProps)||void 0===j?void 0:j.isLoading)&&n(u,Object.assign({type:m.buttonProps.buttonType},{children:n(s,{className:"spinner",size:"small",color:d(m.buttonProps.buttonType||"primary",m.buttonProps.inverse)})})),n(i,Object.assign({},m.buttonProps,{isLoading:!1,style:{borderRadius:"0px",borderTopLeftRadius:"4px",borderBottomLeftRadius:"4px",borderRight:"0px"}})),n("div",{className:"dd-button-divider"}),n(r,Object.assign({},m.dropdownProps,{isChildLoading:null===(y=m.buttonProps)||void 0===y?void 0:y.isLoading},{children:n(i,Object.assign({},h,{isLoading:!1,buttonText:"",TrailingIcon:m.iconProps,style:{borderRadius:"0px",borderTopRightRadius:"4px",borderBottomRightRadius:"4px"}}))}))]}))};export{m as DropdownButton};
@@ -1,12 +1,10 @@
1
- import { Size, Type } from '../button/model';
1
+ import { Type } from '../button/model';
2
2
  import { IconButtonType } from '../icon-button/model';
3
3
  export declare const DropdownButtonStyle: import("styled-components").StyledComponent<"div", any, {
4
4
  type: Type | undefined;
5
5
  disabled: boolean | undefined;
6
6
  isIconButton?: boolean | undefined;
7
7
  iconButtonType?: IconButtonType | undefined;
8
- iconButtonSize?: "default" | "xs" | undefined;
9
- size?: Size | undefined;
10
8
  }, never>;
11
9
  export declare const LoaderContainer: import("styled-components").StyledComponent<"div", any, {
12
10
  type: Type | undefined;
@@ -1,18 +1,15 @@
1
- import t from"styled-components";import{COLORS as e}from"../../constants/Theme.js";const n=t.div`
1
+ import t from"styled-components";import{COLORS as e}from"../../constants/Theme.js";const r=t.div`
2
2
  display: flex;
3
3
  flex-direction: row;
4
4
  width: max-content;
5
5
  position: relative;
6
6
  align-items: stretch;
7
- ${t=>{var n,r,i;return t.isIconButton&&`\n\t\tborder-radius: 4px;\n\t\tbackground: ${r=null!==(n=t.iconButtonType)&&void 0!==n?n:"primary",i=t.disabled,i?e.background.inactive:"primary"===r?e.background.inverseLight:"transparent"};\n\t\theight: ${"xs"===t.iconButtonSize?"24px":"32px"};\n\t\talign-items: center;\n\t`}}
8
- ${t=>("xs"===t.size||"xs"===t.iconButtonSize)&&`\n\t\theight: 24px;\n\t\talign-items: center;\n\t\tborder-radius: 4px;\n\t\t${!t.isIconButton&&t.type?`border: 1px solid ${t.disabled||"secondaryGray"===t.type?e.stroke.primary:"secondary"===t.type?e.stroke.brand:"transparent"};`:""}\n\t`}
7
+ ${t=>{var r,n,i;return t.isIconButton&&`\n\t\tborder-radius: 4px;\n\t\tbackground: ${n=null!==(r=t.iconButtonType)&&void 0!==r?r:"primary",i=t.disabled,i?e.background.inactive:"primary"===n?e.background.inverseLight:"transparent"};\n\t\toverflow: hidden;\n\t`}}
9
8
  .dd-button-divider {
10
- width: ${t=>["primary","destructive"].includes(t.type)||t.isIconButton||"xs"===t.size?"1px":"0px"};
11
- height: ${t=>t.isIconButton||"xs"===t.size?"12px":"auto"};
12
- flex-shrink: 0;
13
- background-color: ${t=>{return t.isIconButton?"rgba(255, 255, 255, 0.3)":"xs"===t.size?e.stroke.primary:(n=t.type,(null==t?void 0:t.disabled)?e.content.inactive:"primary"===n?"#CDA2FC":e.content.primaryInverse);var n}};
9
+ width: ${t=>["primary","destructive"].includes(t.type)||t.isIconButton?"1px":"0px"};
10
+ background-color: ${t=>{return t.isIconButton?"rgba(255, 255, 255, 0.3)":(r=t.type,(null==t?void 0:t.disabled)?e.content.inactive:"primary"===r?"#CDA2FC":e.content.primaryInverse);var r}};
14
11
  }
15
- `,r=t.div`
12
+ `,n=t.div`
16
13
  position: absolute;
17
14
  inset: 0;
18
15
  display: flex;
@@ -23,4 +20,4 @@ import t from"styled-components";import{COLORS as e}from"../../constants/Theme.j
23
20
  border-radius: 4px;
24
21
  background: ${t=>(t=>{switch(t){case"destructive":return e.background.negative.light;case"secondaryGray":return e.surface.subdued;default:return e.background.brandLight}})(t.type)};
25
22
  z-index: 3;
26
- `;export{n as DropdownButtonStyle,r as LoaderContainer};
23
+ `;export{r as DropdownButtonStyle,n as LoaderContainer};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bikdotai/bik-component-library",
3
- "version": "0.0.799-beta.21",
3
+ "version": "0.0.799-beta.4",
4
4
  "description": "Bik Component Library",
5
5
  "repository": {
6
6
  "type": "git",