@bikdotai/bik-component-library 0.0.757 → 0.0.758-0
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.
- package/dist/cjs/components/QueryBuilder/Triggers/EVENTS/components/EventsTrigger.d.ts +1 -1
- package/dist/cjs/components/QueryBuilder/Triggers/EVENTS/selectors/useIGTriggerNameCacheSelector.d.ts +1 -1
- package/dist/cjs/components/QueryBuilder/Triggers/IG/components/IGTrigger.d.ts +1 -1
- package/dist/cjs/components/QueryBuilder/Triggers/IG/selectors/useIGTriggerNameCacheSelector.d.ts +1 -1
- package/dist/cjs/components/QueryBuilder/Triggers/components/BaseTriggerQueryBuilderNode.d.ts +2 -2
- package/dist/cjs/components/dropdown/DropdownPopover/index.js +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/OpennedDropdown.js +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuItem.d.ts +6 -0
- package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuItem.js +34 -4
- package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuList.d.ts +2 -0
- package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuList.js +1 -1
- package/dist/cjs/components/dropdown/type.d.ts +4 -0
- package/dist/esm/components/QueryBuilder/Triggers/EVENTS/components/EventsTrigger.d.ts +1 -1
- package/dist/esm/components/QueryBuilder/Triggers/EVENTS/selectors/useIGTriggerNameCacheSelector.d.ts +1 -1
- package/dist/esm/components/QueryBuilder/Triggers/IG/components/IGTrigger.d.ts +1 -1
- package/dist/esm/components/QueryBuilder/Triggers/IG/selectors/useIGTriggerNameCacheSelector.d.ts +1 -1
- package/dist/esm/components/QueryBuilder/Triggers/components/BaseTriggerQueryBuilderNode.d.ts +2 -2
- package/dist/esm/components/dropdown/DropdownPopover/index.js +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/OpennedDropdown.js +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuItem.d.ts +6 -0
- package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuItem.js +36 -6
- package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuList.d.ts +2 -0
- package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuList.js +1 -1
- package/dist/esm/components/dropdown/type.d.ts +4 -0
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { QueryBuilderNodeProps } from "../../../
|
|
2
|
+
import { QueryBuilderNodeProps } from "../../../Types/QueryBuilderNodeProps.type";
|
|
3
3
|
declare const EventsTrigger: React.FC<QueryBuilderNodeProps>;
|
|
4
4
|
export default EventsTrigger;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { QueryBuilderAPIData } from "../../../
|
|
1
|
+
import { QueryBuilderAPIData } from "../../../Types/QueryBuilderAPI.type";
|
|
2
2
|
export declare const useIGTriggerNameCacheSelector: () => QueryBuilderAPIData[];
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { QueryBuilderNodeProps } from "../../../
|
|
2
|
+
import { QueryBuilderNodeProps } from "../../../Types/QueryBuilderNodeProps.type";
|
|
3
3
|
declare const IGTrigger: React.FC<QueryBuilderNodeProps>;
|
|
4
4
|
export default IGTrigger;
|
package/dist/cjs/components/QueryBuilder/Triggers/IG/selectors/useIGTriggerNameCacheSelector.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { QueryBuilderAPIData } from "../../../
|
|
1
|
+
import { QueryBuilderAPIData } from "../../../Types/QueryBuilderAPI.type";
|
|
2
2
|
export declare const useIGTriggerNameCacheSelector: () => QueryBuilderAPIData[];
|
package/dist/cjs/components/QueryBuilder/Triggers/components/BaseTriggerQueryBuilderNode.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { DropdownOption } from "../../../dropdown/type";
|
|
3
|
-
import { QueryBuilderProperty } from "../../
|
|
4
|
-
import { QueryBuilderNodeProps } from "../../
|
|
3
|
+
import { QueryBuilderProperty } from "../../Types/QueryBuilder.type";
|
|
4
|
+
import { QueryBuilderNodeProps } from "../../Types/QueryBuilderNodeProps.type";
|
|
5
5
|
declare const BaseTriggerQueryBuilderNode: React.FC<QueryBuilderNodeProps & {
|
|
6
6
|
cacheKey: string;
|
|
7
7
|
propertyAddBtnText: string;
|
|
@@ -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"),i=require("../Common.styled.js"),s=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,isChildLoading:
|
|
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"),i=require("../Common.styled.js"),s=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,isChildLoading:b,forceOpen:g}=a,h=e.__rest(a,["children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow","isChildLoading","forceOpen"]);const f=d,[O,D]=t.useState(!1),[x,y]=t.useState(null),[S,C]=t.useState(null),m=t.useRef(null),{styles:q,attributes:E}=n.usePopper(x,S,{placement:h.placement,strategy:h.strategy}),R=e=>{var o,t;"2.0"===u&&h.isMultiSelect&&e&&(null===(o=h.onSelect)||void 0===o||o.call(h,[...e])),D(!1),null===(t=null==h?void 0:h.onClose)||void 0===t||t.call(h)};t.useImperativeHandle(f,(()=>({openDropdown:O})),[]),t.useEffect((()=>{(null==f?void 0:f.current)&&(f.current.openDropdown=O)}),[O]),t.useEffect((()=>{null==c||c(O)}),[O]);const _=()=>o.jsxs(o.Fragment,{children:[o.jsxs("div",Object.assign({style:{position:"relative"},ref:y},{children:[o.jsx(i.OverLapAbs,Object.assign({ref:m,allowEvents:h.allowEvents,disabled:h.disabled,onClick:e=>{var o;null===(o=h.onDropdownOpen)||void 0===o||o.call(h),O?(D(!1),e.preventDefault()):h.disabled||D(!0)},isChildLoading:b},{children:h.allowEvents?p:null})),h.allowEvents?null:p]})),(O||g)&&o.jsx(i.OpenDropdownContainer,Object.assign({ref:C,style:Object.assign(Object.assign({},q.popper),{zIndex:3})},E.popper,{"data-test":h["data-test"]},{children:o.jsx(r.DropShadow,Object.assign({level:"z2",position:"down",style:{borderRadius:8}},{children:o.jsx(s.OpenedDropdown,Object.assign({},h,{onSelect:e=>{var o;"2.0"===u&&h.isMultiSelect||(null===(o=h.onSelect)||void 0===o||o.call(h,e),D(!1))},onClose:R,version:u,headerRef:m,zeroState:null==h?void 0:h.zeroState,isDraggable:h.isDraggable,onOptionsReorder:h.onOptionsReorder}))}))}))]});return o.jsx(o.Fragment,{children:O||g||void 0===v?_():o.jsx(l.Tooltip,Object.assign({body:v,placement:j,hideArrow:!w},{children:o.jsx("div",Object.assign({"data-test":h["data-test"]},{children:_()}))}))})}));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"),s=require("../../../../hooks/useOutside.js"),o=require("../../hooks/useDropdown.js"),r=require("./description/Description.js"),i=require("./menu/FreeFormMenu.js"),l=require("./menu/MenuList.js"),u=require("./menu/SelectAllMenu.js"),c=require("./multiSelect/MultiSelectDropdownBottomBar.js"),a=require("./OpennedDropdown.styled.js"),d=require("./searchbox/SearchBox.js"),p=require("./searchbox/SearchZeroState.js");const h=304,f=290;exports.OpenedDropdown=
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../../../zeroState/ZeroState.js"),s=require("../../../../hooks/useOutside.js"),o=require("../../hooks/useDropdown.js"),r=require("./description/Description.js"),i=require("./menu/FreeFormMenu.js"),l=require("./menu/MenuList.js"),u=require("./menu/SelectAllMenu.js"),c=require("./multiSelect/MultiSelectDropdownBottomBar.js"),a=require("./OpennedDropdown.styled.js"),d=require("./searchbox/SearchBox.js"),p=require("./searchbox/SearchZeroState.js");const h=304,f=290;exports.OpenedDropdown=b=>{let{options:S,isSearchable:g,isMultiSelect:j,maxSelections:v,width:x,allowFreeForm:O,height:m,onClose:w,onSelect:y,onSearch:D,version:C,skipSorting:k,headerRef:q,hideSelectAll:M,primaryButtonText:L,onInfiniteScroll:E,onMultiSelectClear:A,onDropdownItemClick:I,buttonOptions:F,isSearchLoading:T,disableSearchOptions:R,disableSearchedOptionExcept:B,useDefaultCursor:H,containerStyle:Z={},zeroState:z,isDraggable:P=!1,onOptionsReorder:V}=b;const W=t.useCallback((e=>{if(!P||!j)return e;const t=[],n=[];return e.forEach((e=>{if(e.options)n.push(e);else{e.selected?t.push(e):n.push(e)}})),[...t,...n]}),[P,j]),[$,_]=t.useState((()=>W(S)));t.useEffect((()=>{_(W(S))}),[S,W]);const K=t.useCallback((e=>{const t=W(e);_(t),null==V||V(t)}),[V,W]),N=P?$:S,{dropdownOptions:U,search:G,searchedString:J,searchedOptions:Q,onApplyHandler:X,selectAllHandler:Y,onMultiSelectClear:ee,onFreeFormSelect:te,onMultiSelectApply:ne,latestDropdownOptionsRef:se,getSelectedOptions:oe,getCurrentSelectionCount:re}=o.useDropdown(C,N,y,k||P,j,D,R,B,v),[ie,le]=t.useState(null!=x?x:f),[ue,ce]=t.useState(null),[ae,de]=t.useState(-1),pe=t.useRef(null),he=t.useRef([]),fe=t.useRef(null);s.useOutside(pe,(()=>{if(ce(null),j&&"2.0"===C){const e=oe(se.current);null==w||w(e)}else null==w||w(U)}),[q,he]),t.useEffect((()=>{const e=setTimeout((()=>{pe.current&&pe.current.focus({preventScroll:!0})}),0);return()=>clearTimeout(e)}),[]);t.useEffect((()=>{const e=e=>{const t=(e=>{const t=[];return e.forEach((e=>{if(e.options)e.options.forEach((e=>{e.disabled||t.push(e)}));else{const n=e;n.disabled||t.push(n)}})),t})(J&&D?Q:U);if(0!==t.length)if("ArrowDown"===e.key)e.preventDefault(),de((e=>{const n=e<t.length-1?e+1:0;return setTimeout((()=>{var e;const t=null===(e=fe.current)||void 0===e?void 0:e.querySelector(`[data-option-index="${n}"]`);t&&t.scrollIntoView({block:"nearest",behavior:"smooth"})}),0),n}));else if("ArrowUp"===e.key)e.preventDefault(),de((e=>{const n=e>0?e-1:t.length-1;return setTimeout((()=>{var e;const t=null===(e=fe.current)||void 0===e?void 0:e.querySelector(`[data-option-index="${n}"]`);t&&t.scrollIntoView({block:"nearest",behavior:"smooth"})}),0),n}));else if("Enter"===e.key&&ae>=0){e.preventDefault();const n=t[ae];n&&(X(Object.assign(Object.assign({},n),{selected:!n.selected})),I&&I(n))}},t=pe.current;if(t)return t.addEventListener("keydown",e),()=>{t.removeEventListener("keydown",e)}}),[ae,J,Q,U,D,X,I]);const be=null!=m?m:h,Se="number"==typeof be?g&&j?be-96:g&&!j||!g&&j?be-48:be:be;t.useEffect((()=>{const e=null!=x?x:f;if(null===ue)le(e);else if("number"==typeof e)le(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));le(t)}}),[ue]);const ge=[],je=(e=>{if(!j||!v&&0!==v)return e;const t=re(e)>=v;return t?e.map((e=>{if(e.options)return Object.assign(Object.assign({},e),{options:e.options.map((e=>Object.assign(Object.assign({},e),{disabled:e.disabled||!e.selected&&t})))});{const n=e;return Object.assign(Object.assign({},n),{disabled:n.disabled||!n.selected&&t})}})):e})((J&&D?Q:U).map((e=>{var t,n;if(J&&!D){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()))&&(ge.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===(n=e.searchKey)||void 0===n?void 0:n.toLowerCase().includes(J.toLowerCase()))?(ge.push(!J||e.label===J),e):null}return e})).filter((e=>null!==e))),ve=!!g&&J&&0===je.length;return e.jsxs(a.OpennedDropdownContainer,Object.assign({version:C,ref:pe,tabIndex:-1,style:Object.assign(Object.assign({width:ie},Z),{outline:"none"})},{children:[e.jsxs("div",Object.assign({style:{width:ue?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!g&&e.jsx(d.SearchBox,{onSearch:G,version:C}),je.length||J?e.jsxs(a.MenuListContainer,Object.assign({minHeight:be,maxHeight:Se,ref:fe},{children:[!!j&&!ve&&!M&&e.jsx(u.SelectAllMenu,{version:C,options:J&&D?Q:U,onSelect:Y}),!O&&ve&&e.jsx(p.SearchZeroState,{isLoading:T,height:Se,searchedString:J,containerWidth:x}),O&&(ve||!!ge.length&&ge.every((e=>!1===e)))&&e.jsx(i.FreeFormMenu,{version:C,isMultiSelect:j,onSelect:te,searchedString:J}),e.jsx(l.MenuList,{onInfiniteScroll:E,onDropdownItemClick:I,version:C,onSelect:X,showDescription:function(e,t){ce(e&&t?{title:e,description:t}:null)},isMultiSelect:j,options:je,useDefaultCursor:H,ref:he,focusedIndex:ae,isDraggable:P,onOptionsReorder:K})]})):e.jsx("div",Object.assign({style:{height:be,display:"flex"}},{children:e.jsx(n.ZeroState,Object.assign({},z,{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."}))})),!!j&&!(!je.length&&!J)&&"2.0"!==C&&e.jsx(c.default,{onClear:()=>{ee(),null==A||A()},onApply:ne,list:J&&D?Q:U,buttonText:L,buttonOptions:F})]})),!!ue&&e.jsx(r.Description,{title:ue.title,description:ue.description,version:C})]}))};
|
|
@@ -11,6 +11,12 @@ interface MenuItemProps {
|
|
|
11
11
|
useDefaultCursor?: boolean;
|
|
12
12
|
isFocused?: boolean;
|
|
13
13
|
dataIndex?: number;
|
|
14
|
+
isDraggable?: boolean;
|
|
15
|
+
onDragStart?: (e: React.DragEvent<HTMLDivElement>) => void;
|
|
16
|
+
onDragOver?: (e: React.DragEvent<HTMLDivElement>) => void;
|
|
17
|
+
onDrop?: (e: React.DragEvent<HTMLDivElement>) => void;
|
|
18
|
+
onDragEnd?: (e: React.DragEvent<HTMLDivElement>) => void;
|
|
19
|
+
isDraggedOver?: boolean;
|
|
14
20
|
}
|
|
15
21
|
export declare const MenuItem: import("react").ForwardRefExoticComponent<MenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
16
22
|
export {};
|
|
@@ -1,13 +1,43 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../../../assets/icons/chevronRight.svg.js"),n=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../../../assets/icons/chevronRight.svg.js"),n=require("react"),r=require("styled-components"),i=require("../../../../checkBox/CheckBox.js"),o=require("../../../../list-item/ListItem.js"),s=require("../../../../tooltips/Tooltip.js"),a=require("../../../../TypographyStyle.js"),l=require("../../../../../constants/Theme.js"),d=require("./FreeFormMenu.styled.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=c(r);const g=u.default(o.ListItem)`
|
|
2
2
|
padding: ${e=>"2.0"===e.version?"8px 12px":"14px 16px"} !important;
|
|
3
3
|
cursor: pointer;
|
|
4
4
|
margin-top: ${e=>"2.0"===e.version?"2px":"0"};
|
|
5
|
-
`,
|
|
5
|
+
`,p=u.default.div`
|
|
6
6
|
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
|
|
7
7
|
border-radius: ${e=>{let{version:t}=e;return"1.0"===t?"0":"8px"}};
|
|
8
8
|
padding: ${e=>{let{version:t}=e;return"1.0"===t?"0":"4px"}};
|
|
9
9
|
min-width: 148px;
|
|
10
|
-
border: ${e=>{let{version:t}=e;return"1.0"===t?`1px solid ${
|
|
10
|
+
border: ${e=>{let{version:t}=e;return"1.0"===t?`1px solid ${l.DEFAULT_THEME.colorsV2.stroke.primary}`:"none"}};
|
|
11
11
|
max-height: 248px;
|
|
12
12
|
overflow-y: auto;
|
|
13
|
-
`,
|
|
13
|
+
`,x=u.default.div`
|
|
14
|
+
display: grid;
|
|
15
|
+
grid-template-columns: repeat(2, 2.86px);
|
|
16
|
+
grid-template-rows: repeat(3, 2.86px);
|
|
17
|
+
column-gap: 3.8px;
|
|
18
|
+
row-gap: 4px;
|
|
19
|
+
margin-right: 8px;
|
|
20
|
+
cursor: move;
|
|
21
|
+
flex-shrink: 0;
|
|
22
|
+
align-self: center;
|
|
23
|
+
height: fit-content;
|
|
24
|
+
min-height: 18px;
|
|
25
|
+
`,v=u.default.div`
|
|
26
|
+
width: 2.86px;
|
|
27
|
+
height: 2.86px;
|
|
28
|
+
border-radius: 50%;
|
|
29
|
+
background-color: ${l.COLORS.content.inactive};
|
|
30
|
+
flex-shrink: 0;
|
|
31
|
+
`,j=u.default.div`
|
|
32
|
+
display: flex;
|
|
33
|
+
align-content: center;
|
|
34
|
+
justify-content: center;
|
|
35
|
+
gap: 8px;
|
|
36
|
+
`,h=u.default.div`
|
|
37
|
+
margin-right: -4px;
|
|
38
|
+
`,b=u.default.div`
|
|
39
|
+
display: flex;
|
|
40
|
+
align-items: center;
|
|
41
|
+
flex-direction: column;
|
|
42
|
+
flex: 1;
|
|
43
|
+
`,m=t=>{let{onDragStart:n,onDragEnd:r}=t;return e.jsxs(x,Object.assign({draggable:!0,onDragStart:n,onDragEnd:r},{children:[e.jsx(v,{}),e.jsx(v,{}),e.jsx(v,{}),e.jsx(v,{}),e.jsx(v,{}),e.jsx(v,{})]}))},f=n.forwardRef(((r,o)=>{let{option:c,isMultiSelect:u,showDescription:x,onSelect:v,last:f,version:O,onDropdownItemClick:D,useDefaultCursor:y,isFocused:C=!1,dataIndex:I=-1,isDraggable:F=!1,onDragStart:T,onDragOver:S,onDrop:E,onDragEnd:k,isDraggedOver:w=!1}=r;var L;const[q,M]=n.useState(c.selected),$=(e,t)=>{if(!e.children){B(!e.selected);const n=t?Object.assign(Object.assign({},e),{parent:t}):e;null==D||D(n)}},B=e=>{c.disabled||v(Object.assign(Object.assign({},c),{selected:e}))},R=y?{cursor:"default"}:{};return e.jsx(e.Fragment,{children:e.jsx(s.Tooltip,Object.assign({body:"",tooltipContent:c.children?e.jsx("div",Object.assign({style:{backgroundColor:l.DEFAULT_THEME.colorsV2.surface.standard},ref:o,onMouseEnter:()=>M(!0),onMouseLeave:()=>M(!1)},{children:e.jsx(p,Object.assign({version:null!=O?O:"2.0"},{children:c.children.map((t=>{var n;return e.jsx(g,{version:O,style:"1.0"!==O&&(null!==(n=null==c?void 0:c.children)&&void 0!==n?n:[]).length-1?{borderBottom:0}:{},onClick:e=>{e.preventDefault(),$(t,c)},listItem:{value:t.value,label:t.label},subText:t.subText,leadingIcon:t.leadingIcon||void 0,customComponent:t.customComponent,trailingIcon:t.trailingIcon||void 0,variant:c.disabled?"inactive":t.selected?"selected":"default"},t.value)}))}))})):e.jsx(e.Fragment,{}),placement:"right-start",hideArrow:!0},{children:e.jsx(g,{version:O,style:f?Object.assign(Object.assign({borderBottom:0},R),w?{borderTop:`2px solid ${l.COLORS.content.brand}`,opacity:.5}:{}):Object.assign(Object.assign({},R),w?{borderTop:`2px solid ${l.COLORS.content.brand}`,opacity:.5}:{}),onClick:e=>{e.preventDefault(),$(c)},onMouseOver:()=>{c.description?x(c.label,c.description):x()},listItem:{value:c.value,label:c.label},subText:c.subText,"data-option-index":I,role:"option",id:`dropdown-option-${I}`,"aria-selected":!!c.selected,onDragOver:F?S:void 0,onDrop:F?E:void 0,leadingIcon:u?e.jsxs(j,{children:[F&&!c.disabled&&e.jsx(m,{onDragStart:T,onDragEnd:k}),e.jsx(i.CheckBox,{size:"2.0"===O?"SMALL":"DEFAULT",isDisabled:null!==(L=c.disabled)&&void 0!==L&&L,isChecked:!!c.selected,onValueChange:B}),e.jsx(h,{children:c.leadingIcon})]}):F&&!c.disabled?e.jsxs(b,{children:[e.jsx(m,{onDragStart:T,onDragEnd:k}),c.leadingIcon&&e.jsx("div",{children:c.leadingIcon})]}):c.leadingIcon?e.jsx(e.Fragment,{children:c.leadingIcon}):void 0,customComponent:c.customComponent,trailingIcon:c.isFreeForm?e.jsx(d.FreeFormContainer,{children:e.jsx(a.BodyCaption,Object.assign({style:{color:l.COLORS.content.secondary}},{children:"Freeform"}))}):c.children?e.jsx(t.default,{width:12,height:12}):c.trailingIcon?e.jsx(e.Fragment,{children:c.trailingIcon}):void 0,variant:c.disabled?"inactive":C||c.selected||!u&&q?"selected":"default"})}))})}));exports.MenuItem=f;
|
|
@@ -10,6 +10,8 @@ interface MenuListProps {
|
|
|
10
10
|
onDropdownItemClick?: (option: DropdownOption) => void;
|
|
11
11
|
useDefaultCursor?: boolean;
|
|
12
12
|
focusedIndex?: number;
|
|
13
|
+
isDraggable?: boolean;
|
|
14
|
+
onOptionsReorder?: (reorderedOptions: DropdownOption[]) => void;
|
|
13
15
|
}
|
|
14
16
|
export declare const MenuList: import("react").ForwardRefExoticComponent<MenuListProps & import("react").RefAttributes<HTMLDivElement[]>>;
|
|
15
17
|
export {};
|
|
@@ -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,
|
|
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,l)=>{let{options:o,isMultiSelect:i,showDescription:c,onSelect:u,version:a,onInfiniteScroll:d,onDropdownItemClick:p,useDefaultCursor:f,focusedIndex:g=-1,isDraggable:b=!1,onOptionsReorder:D}=r;const j=n.useRef(null),v=n.useRef(null),[x,m]=n.useState(null),[I,h]=n.useState(null),C=n.useCallback((()=>{j.current&&j.current.disconnect(),j.current=new IntersectionObserver((e=>{e[0].isIntersecting&&(null==d||d())})),v.current&&j.current.observe(v.current)}),[d]);n.useEffect((()=>(C(),()=>{j.current&&j.current.disconnect()})),[C,o]);const S=n.useCallback((e=>n=>{b&&(m(e),n.dataTransfer.effectAllowed="move")}),[b]),w=n.useCallback((e=>n=>{b&&(n.preventDefault(),n.dataTransfer.dropEffect="move",h(e))}),[b]),M=n.useCallback((e=>n=>{if(b&&null!==x){if(n.preventDefault(),x!==e){const n=[...o],t=n[x],s=n[e];if(t.selected===s.selected){const[t]=n.splice(x,1);n.splice(e,0,t),null==D||D(n)}}m(null),h(null)}}),[b,x,o,D]),k=n.useCallback((()=>{m(null),h(null)}),[]),O=new Map;let y=-1;return o.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:o.map(((n,r)=>{const d=r===o.length-1;if(n.options){const o=n;return e.jsxs("div",Object.assign({style:{marginTop:"2.0"===a?2:0}},{children:[e.jsxs(s.StyledGroupedLabel,Object.assign({version:a},{children:[o.leadingIcon?e.jsx("span",Object.assign({style:{marginRight:8}},{children:o.leadingIcon})):null,o.label]})),o.options.map(((n,s)=>{const d=O.get(n),b=d===g&&!n.disabled;return e.jsx(t.MenuItem,{version:a,last:s===o.options.length-1,onSelect:u,showDescription:c,onDropdownItemClick:p,isMultiSelect:i,option:n,useDefaultCursor:f,isFocused:b,dataIndex:d,isDraggable:!1,ref:e=>{l&&"object"==typeof l&&l.current&&e&&e&&e&&e&&(l.current[r]=e)}},`${r}-${s}`)})),d?e.jsx("span",{ref:v}):null]}),r)}const D=n,j=O.get(D),x=j===g&&!D.disabled;return e.jsxs("div",{children:[e.jsx(t.MenuItem,{version:a,last:d,onSelect:u,showDescription:c,onDropdownItemClick:p,isMultiSelect:i,option:D,useDefaultCursor:f,isFocused:x,dataIndex:j,isDraggable:b,onDragStart:S(r),onDragOver:w(r),onDrop:M(r),onDragEnd:k,isDraggedOver:I===r,ref:e=>{l&&"object"==typeof l&&l.current&&e&&(l.current[r]=e)}},D.value),d?e.jsx("span",{ref:v}):null]},r)}))})}));exports.MenuList=r;
|
|
@@ -39,6 +39,10 @@ export interface OpenDropdownProps {
|
|
|
39
39
|
title: string;
|
|
40
40
|
subTitle?: string;
|
|
41
41
|
};
|
|
42
|
+
/** Enable drag-and-drop reordering of options */
|
|
43
|
+
isDraggable?: boolean;
|
|
44
|
+
/** Callback when options are reordered via drag-and-drop */
|
|
45
|
+
onOptionsReorder?: (reorderedOptions: DropdownOption[]) => void;
|
|
42
46
|
}
|
|
43
47
|
export type GroupedOption = {
|
|
44
48
|
label?: string;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { QueryBuilderNodeProps } from "../../../
|
|
2
|
+
import { QueryBuilderNodeProps } from "../../../Types/QueryBuilderNodeProps.type";
|
|
3
3
|
declare const EventsTrigger: React.FC<QueryBuilderNodeProps>;
|
|
4
4
|
export default EventsTrigger;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { QueryBuilderAPIData } from "../../../
|
|
1
|
+
import { QueryBuilderAPIData } from "../../../Types/QueryBuilderAPI.type";
|
|
2
2
|
export declare const useIGTriggerNameCacheSelector: () => QueryBuilderAPIData[];
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { QueryBuilderNodeProps } from "../../../
|
|
2
|
+
import { QueryBuilderNodeProps } from "../../../Types/QueryBuilderNodeProps.type";
|
|
3
3
|
declare const IGTrigger: React.FC<QueryBuilderNodeProps>;
|
|
4
4
|
export default IGTrigger;
|
package/dist/esm/components/QueryBuilder/Triggers/IG/selectors/useIGTriggerNameCacheSelector.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { QueryBuilderAPIData } from "../../../
|
|
1
|
+
import { QueryBuilderAPIData } from "../../../Types/QueryBuilderAPI.type";
|
|
2
2
|
export declare const useIGTriggerNameCacheSelector: () => QueryBuilderAPIData[];
|
package/dist/esm/components/QueryBuilder/Triggers/components/BaseTriggerQueryBuilderNode.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { DropdownOption } from "../../../dropdown/type";
|
|
3
|
-
import { QueryBuilderProperty } from "../../
|
|
4
|
-
import { QueryBuilderNodeProps } from "../../
|
|
3
|
+
import { QueryBuilderProperty } from "../../Types/QueryBuilder.type";
|
|
4
|
+
import { QueryBuilderNodeProps } from "../../Types/QueryBuilderNodeProps.type";
|
|
5
5
|
declare const BaseTriggerQueryBuilderNode: React.FC<QueryBuilderNodeProps & {
|
|
6
6
|
cacheKey: string;
|
|
7
7
|
propertyAddBtnText: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__rest as o}from"../../../_virtual/_tslib.js";import{jsx as e,Fragment as t,jsxs as
|
|
1
|
+
import{__rest as o}from"../../../_virtual/_tslib.js";import{jsx as e,Fragment as t,jsxs as n}from"react/jsx-runtime";import l,{useState as i,useRef as r,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 h=l.forwardRef(((l,h)=>{var{children:w,onDropdownVisbilityChange:b,version:g="1.0",tooltipContent:f,tooltipDirection:O,showTooltipArrow:j,isChildLoading:D,forceOpen:y}=l,C=o(l,["children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow","isChildLoading","forceOpen"]);const S=h,[R,z]=i(!1),[E,x]=i(null),[A,L]=i(null),T=r(null),{styles:M,attributes:V}=d(E,A,{placement:C.placement,strategy:C.strategy}),_=o=>{var e,t;"2.0"===g&&C.isMultiSelect&&o&&(null===(e=C.onSelect)||void 0===e||e.call(C,[...o])),z(!1),null===(t=null==C?void 0:C.onClose)||void 0===t||t.call(C)};s(S,(()=>({openDropdown:R})),[]),a((()=>{(null==S?void 0:S.current)&&(S.current.openDropdown=R)}),[R]),a((()=>{null==b||b(R)}),[R]);const k=()=>n(t,{children:[n("div",Object.assign({style:{position:"relative"},ref:x},{children:[e(v,Object.assign({ref:T,allowEvents:C.allowEvents,disabled:C.disabled,onClick:o=>{var e;null===(e=C.onDropdownOpen)||void 0===e||e.call(C),R?(z(!1),o.preventDefault()):C.disabled||z(!0)},isChildLoading:D},{children:C.allowEvents?w:null})),C.allowEvents?null:w]})),(R||y)&&e(m,Object.assign({ref:L,style:Object.assign(Object.assign({},M.popper),{zIndex:3})},V.popper,{"data-test":C["data-test"]},{children:e(p,Object.assign({level:"z2",position:"down",style:{borderRadius:8}},{children:e(u,Object.assign({},C,{onSelect:o=>{var e;"2.0"===g&&C.isMultiSelect||(null===(e=C.onSelect)||void 0===e||e.call(C,o),z(!1))},onClose:_,version:g,headerRef:T,zeroState:null==C?void 0:C.zeroState,isDraggable:C.isDraggable,onOptionsReorder:C.onOptionsReorder}))}))}))]});return e(t,{children:R||y||void 0===f?k():e(c,Object.assign({body:f,placement:O,hideArrow:!j},{children:e("div",Object.assign({"data-test":C["data-test"]},{children:k()}))}))})}));h.displayName="DropdownPopover";export{h as DropdownPopover};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useCallback as o,useState as n,useEffect as r,useRef as i}from"react";import{ZeroState as s}from"../../../zeroState/ZeroState.js";import{useOutside as l}from"../../../../hooks/useOutside.js";import{useDropdown as c}from"../../hooks/useDropdown.js";import{Description as a}from"./description/Description.js";import{FreeFormMenu as u}from"./menu/FreeFormMenu.js";import{MenuList as d}from"./menu/MenuList.js";import{SelectAllMenu as p}from"./menu/SelectAllMenu.js";import h from"./multiSelect/MultiSelectDropdownBottomBar.js";import{OpennedDropdownContainer as f,MenuListContainer as m}from"./OpennedDropdown.styled.js";import{SearchBox as b}from"./searchbox/SearchBox.js";import{SearchZeroState as g}from"./searchbox/SearchZeroState.js";const S=304,v=290,j=j=>{let{options:O,isSearchable:w,isMultiSelect:y,maxSelections:x,width:D,allowFreeForm:C,height:k,onClose:L,onSelect:M,onSearch:I,version:A,skipSorting:T,headerRef:E,hideSelectAll:F,primaryButtonText:B,onInfiniteScroll:H,onMultiSelectClear:R,onDropdownItemClick:q,buttonOptions:z,isSearchLoading:V,disableSearchOptions:W,disableSearchedOptionExcept:Z,useDefaultCursor:$,containerStyle:K={},zeroState:N,isDraggable:P=!1,onOptionsReorder:U}=j;const G=o((e=>{if(!P||!y)return e;const t=[],o=[];return e.forEach((e=>{if(e.options)o.push(e);else{e.selected?t.push(e):o.push(e)}})),[...t,...o]}),[P,y]),[J,Q]=n((()=>G(O)));r((()=>{Q(G(O))}),[O,G]);const X=o((e=>{const t=G(e);Q(t),null==U||U(t)}),[U,G]),Y=P?J:O,{dropdownOptions:_,search:ee,searchedString:te,searchedOptions:oe,onApplyHandler:ne,selectAllHandler:re,onMultiSelectClear:ie,onFreeFormSelect:se,onMultiSelectApply:le,latestDropdownOptionsRef:ce,getSelectedOptions:ae,getCurrentSelectionCount:ue}=c(A,Y,M,T||P,y,I,W,Z,x),[de,pe]=n(null!=D?D:v),[he,fe]=n(null),[me,be]=n(-1),ge=i(null),Se=i([]),ve=i(null);l(ge,(()=>{if(fe(null),y&&"2.0"===A){const e=ae(ce.current);null==L||L(e)}else null==L||L(_)}),[E,Se]),r((()=>{const e=setTimeout((()=>{ge.current&&ge.current.focus({preventScroll:!0})}),0);return()=>clearTimeout(e)}),[]);r((()=>{const e=e=>{const t=(e=>{const t=[];return e.forEach((e=>{if(e.options)e.options.forEach((e=>{e.disabled||t.push(e)}));else{const o=e;o.disabled||t.push(o)}})),t})(te&&I?oe:_);if(0!==t.length)if("ArrowDown"===e.key)e.preventDefault(),be((e=>{const o=e<t.length-1?e+1:0;return setTimeout((()=>{var e;const t=null===(e=ve.current)||void 0===e?void 0:e.querySelector(`[data-option-index="${o}"]`);t&&t.scrollIntoView({block:"nearest",behavior:"smooth"})}),0),o}));else if("ArrowUp"===e.key)e.preventDefault(),be((e=>{const o=e>0?e-1:t.length-1;return setTimeout((()=>{var e;const t=null===(e=ve.current)||void 0===e?void 0:e.querySelector(`[data-option-index="${o}"]`);t&&t.scrollIntoView({block:"nearest",behavior:"smooth"})}),0),o}));else if("Enter"===e.key&&me>=0){e.preventDefault();const o=t[me];o&&(ne(Object.assign(Object.assign({},o),{selected:!o.selected})),q&&q(o))}},t=ge.current;if(t)return t.addEventListener("keydown",e),()=>{t.removeEventListener("keydown",e)}}),[me,te,oe,_,I,ne,q]);const je=null!=k?k:S,Oe="number"==typeof je?w&&y?je-96:w&&!y||!w&&y?je-48:je:je;r((()=>{const e=null!=D?D:v;if(null===he)pe(e);else if("number"==typeof e)pe(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));pe(t)}}),[he]);const we=[],ye=(e=>{if(!y||!x&&0!==x)return e;const t=ue(e)>=x;return t?e.map((e=>{if(e.options)return Object.assign(Object.assign({},e),{options:e.options.map((e=>Object.assign(Object.assign({},e),{disabled:e.disabled||!e.selected&&t})))});{const o=e;return Object.assign(Object.assign({},o),{disabled:o.disabled||!o.selected&&t})}})):e})((te&&I?oe:_).map((e=>{var t,o;if(te&&!I){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(te.toLowerCase()))&&(we.push(!te||e.label===te),!0)})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(te.toLowerCase()))||(null===(o=e.searchKey)||void 0===o?void 0:o.toLowerCase().includes(te.toLowerCase()))?(we.push(!te||e.label===te),e):null}return e})).filter((e=>null!==e))),xe=!!w&&te&&0===ye.length;return e(f,Object.assign({version:A,ref:ge,tabIndex:-1,style:Object.assign(Object.assign({width:de},K),{outline:"none"})},{children:[e("div",Object.assign({style:{width:he?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!w&&t(b,{onSearch:ee,version:A}),ye.length||te?e(m,Object.assign({minHeight:je,maxHeight:Oe,ref:ve},{children:[!!y&&!xe&&!F&&t(p,{version:A,options:te&&I?oe:_,onSelect:re}),!C&&xe&&t(g,{isLoading:V,height:Oe,searchedString:te,containerWidth:D}),C&&(xe||!!we.length&&we.every((e=>!1===e)))&&t(u,{version:A,isMultiSelect:y,onSelect:se,searchedString:te}),t(d,{onInfiniteScroll:H,onDropdownItemClick:q,version:A,onSelect:ne,showDescription:function(e,t){fe(e&&t?{title:e,description:t}:null)},isMultiSelect:y,options:ye,useDefaultCursor:$,ref:Se,focusedIndex:me,isDraggable:P,onOptionsReorder:X})]})):t("div",Object.assign({style:{height:je,display:"flex"}},{children:t(s,Object.assign({},N,{title:(null==N?void 0:N.title)||"No results found",subTitle:(null==N?void 0:N.subTitle)||"Please try again later or contact us at support@bik.ai if you require further assistance."}))})),!!y&&!(!ye.length&&!te)&&"2.0"!==A&&t(h,{onClear:()=>{ie(),null==R||R()},onApply:le,list:te&&I?oe:_,buttonText:B,buttonOptions:z})]})),!!he&&t(a,{title:he.title,description:he.description,version:A})]}))};export{j as OpenedDropdown};
|
|
@@ -11,6 +11,12 @@ interface MenuItemProps {
|
|
|
11
11
|
useDefaultCursor?: boolean;
|
|
12
12
|
isFocused?: boolean;
|
|
13
13
|
dataIndex?: number;
|
|
14
|
+
isDraggable?: boolean;
|
|
15
|
+
onDragStart?: (e: React.DragEvent<HTMLDivElement>) => void;
|
|
16
|
+
onDragOver?: (e: React.DragEvent<HTMLDivElement>) => void;
|
|
17
|
+
onDrop?: (e: React.DragEvent<HTMLDivElement>) => void;
|
|
18
|
+
onDragEnd?: (e: React.DragEvent<HTMLDivElement>) => void;
|
|
19
|
+
isDraggedOver?: boolean;
|
|
14
20
|
}
|
|
15
21
|
export declare const MenuItem: import("react").ForwardRefExoticComponent<MenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
16
22
|
export {};
|
|
@@ -1,13 +1,43 @@
|
|
|
1
|
-
import{jsx as e,Fragment as
|
|
1
|
+
import{jsx as e,Fragment as n,jsxs as o}from"react/jsx-runtime";import t from"../../../../../assets/icons/chevronRight.svg.js";import{forwardRef as r,useState as i}from"react";import l from"styled-components";import{CheckBox as a}from"../../../../checkBox/CheckBox.js";import{ListItem as s}from"../../../../list-item/ListItem.js";import{Tooltip as d}from"../../../../tooltips/Tooltip.js";import{BodyCaption as c}from"../../../../TypographyStyle.js";import{DEFAULT_THEME as p,COLORS as g}from"../../../../../constants/Theme.js";import{FreeFormContainer as m}from"./FreeFormMenu.styled.js";const u=l(s)`
|
|
2
2
|
padding: ${e=>"2.0"===e.version?"8px 12px":"14px 16px"} !important;
|
|
3
3
|
cursor: pointer;
|
|
4
4
|
margin-top: ${e=>"2.0"===e.version?"2px":"0"};
|
|
5
|
-
`,v=
|
|
5
|
+
`,v=l.div`
|
|
6
6
|
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
|
|
7
|
-
border-radius: ${e=>{let{version:
|
|
8
|
-
padding: ${e=>{let{version:
|
|
7
|
+
border-radius: ${e=>{let{version:n}=e;return"1.0"===n?"0":"8px"}};
|
|
8
|
+
padding: ${e=>{let{version:n}=e;return"1.0"===n?"0":"4px"}};
|
|
9
9
|
min-width: 148px;
|
|
10
|
-
border: ${e=>{let{version:
|
|
10
|
+
border: ${e=>{let{version:n}=e;return"1.0"===n?`1px solid ${p.colorsV2.stroke.primary}`:"none"}};
|
|
11
11
|
max-height: 248px;
|
|
12
12
|
overflow-y: auto;
|
|
13
|
-
`,h=
|
|
13
|
+
`,h=l.div`
|
|
14
|
+
display: grid;
|
|
15
|
+
grid-template-columns: repeat(2, 2.86px);
|
|
16
|
+
grid-template-rows: repeat(3, 2.86px);
|
|
17
|
+
column-gap: 3.8px;
|
|
18
|
+
row-gap: 4px;
|
|
19
|
+
margin-right: 8px;
|
|
20
|
+
cursor: move;
|
|
21
|
+
flex-shrink: 0;
|
|
22
|
+
align-self: center;
|
|
23
|
+
height: fit-content;
|
|
24
|
+
min-height: 18px;
|
|
25
|
+
`,b=l.div`
|
|
26
|
+
width: 2.86px;
|
|
27
|
+
height: 2.86px;
|
|
28
|
+
border-radius: 50%;
|
|
29
|
+
background-color: ${g.content.inactive};
|
|
30
|
+
flex-shrink: 0;
|
|
31
|
+
`,x=l.div`
|
|
32
|
+
display: flex;
|
|
33
|
+
align-content: center;
|
|
34
|
+
justify-content: center;
|
|
35
|
+
gap: 8px;
|
|
36
|
+
`,f=l.div`
|
|
37
|
+
margin-right: -4px;
|
|
38
|
+
`,D=l.div`
|
|
39
|
+
display: flex;
|
|
40
|
+
align-items: center;
|
|
41
|
+
flex-direction: column;
|
|
42
|
+
flex: 1;
|
|
43
|
+
`,j=n=>{let{onDragStart:t,onDragEnd:r}=n;return o(h,Object.assign({draggable:!0,onDragStart:t,onDragEnd:r},{children:[e(b,{}),e(b,{}),e(b,{}),e(b,{}),e(b,{}),e(b,{})]}))},y=r(((r,l)=>{let{option:s,isMultiSelect:h,showDescription:b,onSelect:y,last:I,version:O,onDropdownItemClick:C,useDefaultCursor:k,isFocused:w=!1,dataIndex:T=-1,isDraggable:$=!1,onDragStart:S,onDragOver:E,onDrop:F,onDragEnd:M,isDraggedOver:L=!1}=r;var B;const[A,V]=i(s.selected),z=(e,n)=>{if(!e.children){R(!e.selected);const o=n?Object.assign(Object.assign({},e),{parent:n}):e;null==C||C(o)}},R=e=>{s.disabled||y(Object.assign(Object.assign({},s),{selected:e}))},U=k?{cursor:"default"}:{};return e(n,{children:e(d,Object.assign({body:"",tooltipContent:s.children?e("div",Object.assign({style:{backgroundColor:p.colorsV2.surface.standard},ref:l,onMouseEnter:()=>V(!0),onMouseLeave:()=>V(!1)},{children:e(v,Object.assign({version:null!=O?O:"2.0"},{children:s.children.map((n=>{var o;return e(u,{version:O,style:"1.0"!==O&&(null!==(o=null==s?void 0:s.children)&&void 0!==o?o:[]).length-1?{borderBottom:0}:{},onClick:e=>{e.preventDefault(),z(n,s)},listItem:{value:n.value,label:n.label},subText:n.subText,leadingIcon:n.leadingIcon||void 0,customComponent:n.customComponent,trailingIcon:n.trailingIcon||void 0,variant:s.disabled?"inactive":n.selected?"selected":"default"},n.value)}))}))})):e(n,{}),placement:"right-start",hideArrow:!0},{children:e(u,{version:O,style:I?Object.assign(Object.assign({borderBottom:0},U),L?{borderTop:`2px solid ${g.content.brand}`,opacity:.5}:{}):Object.assign(Object.assign({},U),L?{borderTop:`2px solid ${g.content.brand}`,opacity:.5}:{}),onClick:e=>{e.preventDefault(),z(s)},onMouseOver:()=>{s.description?b(s.label,s.description):b()},listItem:{value:s.value,label:s.label},subText:s.subText,"data-option-index":T,role:"option",id:`dropdown-option-${T}`,"aria-selected":!!s.selected,onDragOver:$?E:void 0,onDrop:$?F:void 0,leadingIcon:h?o(x,{children:[$&&!s.disabled&&e(j,{onDragStart:S,onDragEnd:M}),e(a,{size:"2.0"===O?"SMALL":"DEFAULT",isDisabled:null!==(B=s.disabled)&&void 0!==B&&B,isChecked:!!s.selected,onValueChange:R}),e(f,{children:s.leadingIcon})]}):$&&!s.disabled?o(D,{children:[e(j,{onDragStart:S,onDragEnd:M}),s.leadingIcon&&e("div",{children:s.leadingIcon})]}):s.leadingIcon?e(n,{children:s.leadingIcon}):void 0,customComponent:s.customComponent,trailingIcon:s.isFreeForm?e(m,{children:e(c,Object.assign({style:{color:g.content.secondary}},{children:"Freeform"}))}):s.children?e(t,{width:12,height:12}):s.trailingIcon?e(n,{children:s.trailingIcon}):void 0,variant:s.disabled?"inactive":w||s.selected||!h&&A?"selected":"default"})}))})}));export{y as MenuItem};
|
|
@@ -10,6 +10,8 @@ interface MenuListProps {
|
|
|
10
10
|
onDropdownItemClick?: (option: DropdownOption) => void;
|
|
11
11
|
useDefaultCursor?: boolean;
|
|
12
12
|
focusedIndex?: number;
|
|
13
|
+
isDraggable?: boolean;
|
|
14
|
+
onOptionsReorder?: (reorderedOptions: DropdownOption[]) => void;
|
|
13
15
|
}
|
|
14
16
|
export declare const MenuList: import("react").ForwardRefExoticComponent<MenuListProps & import("react").RefAttributes<HTMLDivElement[]>>;
|
|
15
17
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,Fragment as n,jsxs as t}from"react/jsx-runtime";import{forwardRef as r,useRef as o,
|
|
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 a}from"./MenuList.styled.js";const u=r(((r,u)=>{let{options:d,isMultiSelect:p,showDescription:f,onSelect:g,version:m,onInfiniteScroll:D,onDropdownItemClick:b,useDefaultCursor:v,focusedIndex:h=-1,isDraggable:I=!1,onOptionsReorder:w}=r;const j=o(null),S=o(null),[O,C]=s(null),[M,x]=s(null),y=l((()=>{j.current&&j.current.disconnect(),j.current=new IntersectionObserver((e=>{e[0].isIntersecting&&(null==D||D())})),S.current&&j.current.observe(S.current)}),[D]);i((()=>(y(),()=>{j.current&&j.current.disconnect()})),[y,d]);const E=l((e=>n=>{I&&(C(e),n.dataTransfer.effectAllowed="move")}),[I]),k=l((e=>n=>{I&&(n.preventDefault(),n.dataTransfer.dropEffect="move",x(e))}),[I]),T=l((e=>n=>{if(I&&null!==O){if(n.preventDefault(),O!==e){const n=[...d],t=n[O],r=n[e];if(t.selected===r.selected){const[t]=n.splice(O,1);n.splice(e,0,t),null==w||w(n)}}C(null),x(null)}}),[I,O,d,w]),F=l((()=>{C(null),x(null)}),[]),R=new Map;let $=-1;return d.forEach((e=>{if(e.options)e.options.forEach((e=>{e.disabled||($++,R.set(e,$))}));else{const n=e;n.disabled||($++,R.set(n,$))}})),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"===m?2:0}},{children:[t(a,Object.assign({version:m},{children:[s.leadingIcon?e("span",Object.assign({style:{marginRight:8}},{children:s.leadingIcon})):null,s.label]})),s.options.map(((n,t)=>{const o=R.get(n),l=o===h&&!n.disabled;return e(c,{version:m,last:t===s.options.length-1,onSelect:g,showDescription:f,onDropdownItemClick:b,isMultiSelect:p,option:n,useDefaultCursor:v,isFocused:l,dataIndex:o,isDraggable:!1,ref:e=>{u&&"object"==typeof u&&u.current&&e&&e&&e&&e&&(u.current[r]=e)}},`${r}-${t}`)})),o?e("span",{ref:S}):null]}),r)}const s=n,l=R.get(s),i=l===h&&!s.disabled;return t("div",{children:[e(c,{version:m,last:o,onSelect:g,showDescription:f,onDropdownItemClick:b,isMultiSelect:p,option:s,useDefaultCursor:v,isFocused:i,dataIndex:l,isDraggable:I,onDragStart:E(r),onDragOver:k(r),onDrop:T(r),onDragEnd:F,isDraggedOver:M===r,ref:e=>{u&&"object"==typeof u&&u.current&&e&&(u.current[r]=e)}},s.value),o?e("span",{ref:S}):null]},r)}))})}));export{u as MenuList};
|
|
@@ -39,6 +39,10 @@ export interface OpenDropdownProps {
|
|
|
39
39
|
title: string;
|
|
40
40
|
subTitle?: string;
|
|
41
41
|
};
|
|
42
|
+
/** Enable drag-and-drop reordering of options */
|
|
43
|
+
isDraggable?: boolean;
|
|
44
|
+
/** Callback when options are reordered via drag-and-drop */
|
|
45
|
+
onOptionsReorder?: (reorderedOptions: DropdownOption[]) => void;
|
|
42
46
|
}
|
|
43
47
|
export type GroupedOption = {
|
|
44
48
|
label?: string;
|