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

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");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;
+"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;

package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuList.styled.d.ts

@@ -1,3 +1,4 @@
+export declare const Divider: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledGroupedLabel: import("styled-components").StyledComponent<"div", any, {
     numberOfLines?: number | undefined;
     color?: string | undefined;

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

@@ -1,6 +1,10 @@
-"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)`
+"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`
+	height: 1px;
+	background-color: ${o.COLORS.stroke.primary};
+	margin: 4px 8px;
+`,s=n.default(r.BodyCaption)`
 	padding: 8px ${e=>"2.0"===e.version?12:16}px;
-	color: ${e=>"2.0"===e.version?r.COLORS.content.placeholder:r.COLORS.content.secondary};
-	background-color: ${e=>"2.0"===e.version?r.COLORS.surface.standard:r.COLORS.background.base};
+	color: ${e=>"2.0"===e.version?o.COLORS.content.placeholder:o.COLORS.content.secondary};
+	background-color: ${e=>"2.0"===e.version?o.COLORS.surface.standard:o.COLORS.background.base};
 	font-size: ${e=>"2.0"===e.version?10:12}px;
-`;exports.StyledGroupedLabel=n;
+`;exports.Divider=a,exports.StyledGroupedLabel=s;

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

@@ -80,6 +80,7 @@ export type SingleOption = {
     children?: SingleOption[];
     parent?: SingleOption;
     'data-test'?: string;
+    hasDivider?: boolean;
 };
 export type MultiSelectOption = SingleOption;
 export type DropdownOption = MultiSelectOption | SingleOption | GroupedOption;

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{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};
+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};

package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuList.styled.d.ts

@@ -1,3 +1,4 @@
+export declare const Divider: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledGroupedLabel: import("styled-components").StyledComponent<"div", any, {
     numberOfLines?: number | undefined;
     color?: string | undefined;

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

@@ -1,6 +1,10 @@
-import o from"styled-components";import{BodyCaption as r}from"../../../../TypographyStyle.js";import{COLORS as n}from"../../../../../constants/Theme.js";const e=o(r)`
+import o from"styled-components";import{BodyCaption as r}from"../../../../TypographyStyle.js";import{COLORS as n}from"../../../../../constants/Theme.js";const e=o.div`
+	height: 1px;
+	background-color: ${n.stroke.primary};
+	margin: 4px 8px;
+`,t=o(r)`
 	padding: 8px ${o=>"2.0"===o.version?12:16}px;
 	color: ${o=>"2.0"===o.version?n.content.placeholder:n.content.secondary};
 	background-color: ${o=>"2.0"===o.version?n.surface.standard:n.background.base};
 	font-size: ${o=>"2.0"===o.version?10:12}px;
-`;export{e as StyledGroupedLabel};
+`;export{e as Divider,t as StyledGroupedLabel};

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

@@ -80,6 +80,7 @@ export type SingleOption = {
     children?: SingleOption[];
     parent?: SingleOption;
     'data-test'?: string;
+    hasDivider?: boolean;
 };
 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.799-beta.20",
+	"version": "0.0.799-beta.21",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",