@bikdotai/bik-component-library 0.0.763-beta.55 → 0.0.763-beta.57
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/dropdown/Dropdown.js +1 -1
- package/dist/cjs/components/dropdown/DropdownPopover/index.js +1 -1
- package/dist/cjs/components/dropdown/type.d.ts +2 -0
- package/dist/esm/components/dropdown/Dropdown.js +1 -1
- package/dist/esm/components/dropdown/DropdownPopover/index.js +1 -1
- package/dist/esm/components/dropdown/type.d.ts +2 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),n=require("react/jsx-runtime"),t=require("react"),o=require("../../constants/Theme.js"),l=require("../../assets/icons/chevronDown.svg.js"),r=require("../input/Input.js"),i=require("../input/context/InputStyleProvider.js"),s=require("./ChipInput.js"),a=require("./DropdownPopover/index.js"),d=require("./OpenedDropdown/utils/iterationOnOptions.js");function
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),n=require("react/jsx-runtime"),t=require("react"),o=require("../../constants/Theme.js"),l=require("../../assets/icons/chevronDown.svg.js"),r=require("../input/Input.js"),i=require("../input/context/InputStyleProvider.js"),s=require("./ChipInput.js"),a=require("./DropdownPopover/index.js"),d=require("./OpenedDropdown/utils/iterationOnOptions.js");function c(){}const u=u=>{var p,h,v,x,f,{placeHolder:g,size:j,onSelect:b,defaultOptions:m,disabled:w,noErrorHint:O,placeHolderHeight:S,showPlaceholderWhenSelected:y=!1,inputStyle:I={},inputType:E="default",onDeleteChip:H,truncatedText:C,showLeadingIconInPlaceholder:D=!1,showTrailingIconPlaceholder:P=!1,showLabelsOnMoreHover:T=!1,value:q}=u,M=e.__rest(u,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip","truncatedText","showLeadingIconInPlaceholder","showTrailingIconPlaceholder","showLabelsOnMoreHover","value"]);const[W,L]=t.useState(!1),[_,z]=t.useState(!1),k=null!=j?j:"default",A=t.useRef(),[F,R]=t.useState(null!=m?m:[]),N=t.useRef(null),[U,V]=t.useState(null);t.useEffect((()=>{var e;const n=[];null===(e=null==M?void 0:M.options)||void 0===e||e.forEach((e=>{e.options?e.options.forEach((e=>{e.selected&&n.push(Object.assign(Object.assign({},e),{label:e.label}))})):e.selected&&n.push(e)})),R([...n])}),[M.options]),t.useEffect((()=>{m&&R([...m])}),[m]);const $=d.getSelectedOptionsAsText(F),B=y?g:null!==(p=null!=$?$:g)&&void 0!==p?p:"Select an option";t.useEffect((()=>{if(N.current){const e=N.current.scrollWidth;V(e+("x-small"===k?16:"small"===k?20:24)+2*("x-small"===k?16:12)+8+2)}}),[B,k]);const G=null!==(v=null!==(h=M.buttonWidth)&&void 0!==h?h:M.inputWidth)&&void 0!==v?v:"100%",J=U?`${U}px`:G;return n.jsxs(n.Fragment,{children:[n.jsx("span",Object.assign({ref:N,style:{position:"absolute",visibility:"hidden",whiteSpace:"nowrap",fontSize:"x-small"===k?"12px":"small"===k?"14px":"16px",fontFamily:"Inter"}},{children:B})),n.jsx(i.InputStyleContext.Provider,Object.assign({value:{InputWrapper:Object.assign({height:S||("x-small"===k?24:"small"===k?32:48),width:J,maxWidth:G,zIndex:1,cursor:"pointer",padding:"x-small"===k?"4px 8px":"6px 8px",backgroundColor:void 0!==q?"#C3E4C4":_?"#E0E0E0":"#ffffff",transition:"background-color 0.3s ease"},I),input:{minHeight:"100%",maxWidth:"100%",color:void 0!==q?"#00580E":"inherit"}}},{children:n.jsx("div",Object.assign({onMouseEnter:()=>z(!0),onMouseLeave:()=>z(!1)},{children:n.jsxs(a.DropdownPopover,Object.assign({"data-test":M["data-test"],ref:A,onSelect:function(e){Array.isArray(e)?R([...e]):R([e]),null==b||b(e)},disabled:w,onDropdownVisbilityChange:e=>L(e)},M,{children:["default"==E&&n.jsx(r.Input,{version:M.version,noErrorHint:O,state:w?"disabled":"none",value:void 0===q?B:q,errorMessage:M.error,variant:k,placeholder:null!=g?g:"Select an option",onChangeText:c,leftIcon:D&&(null===(x=F[0])||void 0===x?void 0:x.leadingIcon)?{icon:()=>{var e;return n.jsx(n.Fragment,{children:null===(e=F[0])||void 0===e?void 0:e.leadingIcon})}}:void 0,rightIcon:{icon:()=>{var e;return n.jsxs("div",Object.assign({style:{display:"flex"}},{children:[P&&(null===(e=F[0])||void 0===e?void 0:e.trailingIcon),n.jsx(l.default,{style:{transform:W?"rotate(180deg)":"rotate(0deg)"},onClick:c,width:"x-small"===k?16:"small"===k?20:24,height:"x-small"===k?16:"small"===k?20:24,color:o.COLORS.content.primary})]}))}},truncateText:null==C||C}),"chip"==E&&n.jsx(s.default,{placeholder:null!=g?g:"Select options",chips:F,onDeleteChip:e=>{null==H||H(e)},errorMessage:M.error,isDropdownOpened:W,sizeToUse:k,containerStyle:{width:null!==(f=M.width)&&void 0!==f?f:"100%",cursor:"pointer"},showLabelsOnMoreHover:T})]}))}))}))]})};u.displayName="Dropdown",exports.Dropdown=u;
|
|
@@ -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: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
|
+
"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 _=()=>{var e;return 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:null!==(e=h.dropdownZIndex)&&void 0!==e?e: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;
|
|
@@ -45,6 +45,8 @@ export interface OpenDropdownProps {
|
|
|
45
45
|
hideClearButton?: boolean;
|
|
46
46
|
/** Callback when options are reordered via drag-and-drop */
|
|
47
47
|
onOptionsReorder?: (reorderedOptions: DropdownOption[]) => void;
|
|
48
|
+
/** z-index of the dropdown popover. Defaults to 3. */
|
|
49
|
+
dropdownZIndex?: number;
|
|
48
50
|
}
|
|
49
51
|
export type GroupedOption = {
|
|
50
52
|
label?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__rest as e}from"../../_virtual/_tslib.js";import{jsxs as o,Fragment as n,jsx as l}from"react/jsx-runtime";import{useState as t,useRef as i,useEffect as r}from"react";import{COLORS as s}from"../../constants/Theme.js";import a from"../../assets/icons/chevronDown.svg.js";import{Input as d}from"../input/Input.js";import{InputStyleContext as c}from"../input/context/InputStyleProvider.js";import p from"./ChipInput.js";import{DropdownPopover as u}from"./DropdownPopover/index.js";import{getSelectedOptionsAsText as h}from"./OpenedDropdown/utils/iterationOnOptions.js";function m(){}const v=v=>{var f,g,x,b,w,{placeHolder:j,size:y,onSelect:I,defaultOptions:O,disabled:S,noErrorHint:H,placeHolderHeight:
|
|
1
|
+
import{__rest as e}from"../../_virtual/_tslib.js";import{jsxs as o,Fragment as n,jsx as l}from"react/jsx-runtime";import{useState as t,useRef as i,useEffect as r}from"react";import{COLORS as s}from"../../constants/Theme.js";import a from"../../assets/icons/chevronDown.svg.js";import{Input as d}from"../input/Input.js";import{InputStyleContext as c}from"../input/context/InputStyleProvider.js";import p from"./ChipInput.js";import{DropdownPopover as u}from"./DropdownPopover/index.js";import{getSelectedOptionsAsText as h}from"./OpenedDropdown/utils/iterationOnOptions.js";function m(){}const v=v=>{var f,g,x,b,w,{placeHolder:j,size:y,onSelect:I,defaultOptions:O,disabled:S,noErrorHint:H,placeHolderHeight:E,showPlaceholderWhenSelected:C=!1,inputStyle:T={},inputType:D="default",onDeleteChip:P,truncatedText:W,showLeadingIconInPlaceholder:M=!1,showTrailingIconPlaceholder:L=!1,showLabelsOnMoreHover:z=!1,value:k}=v,A=e(v,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip","truncatedText","showLeadingIconInPlaceholder","showTrailingIconPlaceholder","showLabelsOnMoreHover","value"]);const[_,F]=t(!1),[N,U]=t(!1),V=null!=y?y:"default",$=i(),[q,B]=t(null!=O?O:[]),G=i(null),[J,K]=t(null);r((()=>{var e;const o=[];null===(e=null==A?void 0:A.options)||void 0===e||e.forEach((e=>{e.options?e.options.forEach((e=>{e.selected&&o.push(Object.assign(Object.assign({},e),{label:e.label}))})):e.selected&&o.push(e)})),B([...o])}),[A.options]),r((()=>{O&&B([...O])}),[O]);const Q=h(q),R=C?j:null!==(f=null!=Q?Q:j)&&void 0!==f?f:"Select an option";r((()=>{if(G.current){const e=G.current.scrollWidth;K(e+("x-small"===V?16:"small"===V?20:24)+2*("x-small"===V?16:12)+8+2)}}),[R,V]);const X=null!==(x=null!==(g=A.buttonWidth)&&void 0!==g?g:A.inputWidth)&&void 0!==x?x:"100%",Y=J?`${J}px`:X;return o(n,{children:[l("span",Object.assign({ref:G,style:{position:"absolute",visibility:"hidden",whiteSpace:"nowrap",fontSize:"x-small"===V?"12px":"small"===V?"14px":"16px",fontFamily:"Inter"}},{children:R})),l(c.Provider,Object.assign({value:{InputWrapper:Object.assign({height:E||("x-small"===V?24:"small"===V?32:48),width:Y,maxWidth:X,zIndex:1,cursor:"pointer",padding:"x-small"===V?"4px 8px":"6px 8px",backgroundColor:void 0!==k?"#C3E4C4":N?"#E0E0E0":"#ffffff",transition:"background-color 0.3s ease"},T),input:{minHeight:"100%",maxWidth:"100%",color:void 0!==k?"#00580E":"inherit"}}},{children:l("div",Object.assign({onMouseEnter:()=>U(!0),onMouseLeave:()=>U(!1)},{children:o(u,Object.assign({"data-test":A["data-test"],ref:$,onSelect:function(e){Array.isArray(e)?B([...e]):B([e]),null==I||I(e)},disabled:S,onDropdownVisbilityChange:e=>F(e)},A,{children:["default"==D&&l(d,{version:A.version,noErrorHint:H,state:S?"disabled":"none",value:void 0===k?R:k,errorMessage:A.error,variant:V,placeholder:null!=j?j:"Select an option",onChangeText:m,leftIcon:M&&(null===(b=q[0])||void 0===b?void 0:b.leadingIcon)?{icon:()=>{var e;return l(n,{children:null===(e=q[0])||void 0===e?void 0:e.leadingIcon})}}:void 0,rightIcon:{icon:()=>{var e;return o("div",Object.assign({style:{display:"flex"}},{children:[L&&(null===(e=q[0])||void 0===e?void 0:e.trailingIcon),l(a,{style:{transform:_?"rotate(180deg)":"rotate(0deg)"},onClick:m,width:"x-small"===V?16:"small"===V?20:24,height:"x-small"===V?16:"small"===V?20:24,color:s.content.primary})]}))}},truncateText:null==W||W}),"chip"==D&&l(p,{placeholder:null!=j?j:"Select options",chips:q,onDeleteChip:e=>{null==P||P(e)},errorMessage:A.error,isDropdownOpened:_,sizeToUse:V,containerStyle:{width:null!==(w=A.width)&&void 0!==w?w:"100%",cursor:"pointer"},showLabelsOnMoreHover:z})]}))}))}))]})};v.displayName="Dropdown";export{v as Dropdown};
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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 r,useRef as i,useImperativeHandle as s,useEffect as d}from"react";import{usePopper as a}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 u}from"../Common.styled.js";import{OpenedDropdown as m}from"../OpenedDropdown/components/OpennedDropdown.js";const w=l.forwardRef(((l,w)=>{var{children:h,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=w,[R,x]=r(!1),[z,E]=r(null),[A,L]=r(null),T=i(null),{styles:I,attributes:M}=a(z,A,{placement:C.placement,strategy:C.strategy}),V=o=>{var e,t;"2.0"===g&&C.isMultiSelect&&o&&(null===(e=C.onSelect)||void 0===e||e.call(C,[...o])),x(!1),null===(t=null==C?void 0:C.onClose)||void 0===t||t.call(C)};s(S,(()=>({openDropdown:R})),[]),d((()=>{(null==S?void 0:S.current)&&(S.current.openDropdown=R)}),[R]),d((()=>{null==b||b(R)}),[R]);const _=()=>{var o;return n(t,{children:[n("div",Object.assign({style:{position:"relative"},ref:E},{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?(x(!1),o.preventDefault()):C.disabled||x(!0)},isChildLoading:D},{children:C.allowEvents?h:null})),C.allowEvents?null:h]})),(R||y)&&e(u,Object.assign({ref:L,style:Object.assign(Object.assign({},I.popper),{zIndex:null!==(o=C.dropdownZIndex)&&void 0!==o?o:3})},M.popper,{"data-test":C["data-test"]},{children:e(p,Object.assign({level:"z2",position:"down",style:{borderRadius:8}},{children:e(m,Object.assign({},C,{onSelect:o=>{var e;"2.0"===g&&C.isMultiSelect||(null===(e=C.onSelect)||void 0===e||e.call(C,o),x(!1))},onClose:V,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?_():e(c,Object.assign({body:f,placement:O,hideArrow:!j},{children:e("div",Object.assign({"data-test":C["data-test"]},{children:_()}))}))})}));w.displayName="DropdownPopover";export{w as DropdownPopover};
|
|
@@ -45,6 +45,8 @@ export interface OpenDropdownProps {
|
|
|
45
45
|
hideClearButton?: boolean;
|
|
46
46
|
/** Callback when options are reordered via drag-and-drop */
|
|
47
47
|
onOptionsReorder?: (reorderedOptions: DropdownOption[]) => void;
|
|
48
|
+
/** z-index of the dropdown popover. Defaults to 3. */
|
|
49
|
+
dropdownZIndex?: number;
|
|
48
50
|
}
|
|
49
51
|
export type GroupedOption = {
|
|
50
52
|
label?: string;
|